कंटेनर टैब
जैसा कि यह पता चला है, इस अपग्रेड के साथ, Firefox का Windows संस्करण अतिरिक्त विशेष देखभाल की मांग करता है। इस संबंध में, मैं कंटेनर टैब पर एक्सेंट लाइन से खुश नहीं था; यह टैब की चौड़ाई से छोटा रेंडर होता है, और इस प्रकार बेवकूफ दिखता है। और इसलिए, मेरे दिन का पहला आदेश एक्सेंट लाइन को हटाना और पूर्ण टैब रंग का उपयोग करना था।
.tabbrowser-tab[usercontextid] .tab-context-line {
display: none !important;
उपरोक्त CSS कोड, जिसे आपको userChrome.css में जोड़ना होगा, जैसा कि पहले ट्यूटोरियल में बताया गया है, केवल कंटेनर टैब के लिए एक्सेंट लाइन को हटा देगा। कंटेनर टैब को अधिक विशिष्ट बनाने के लिए, मैं उनके प्रासंगिक रंग का उपयोग बैकग्राउंड के लिए प्लस एक्सेंट लाइन के बजाय चमकीले लाल शीर्ष बॉर्डर के साथ करता हूं:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-top: 3px solid red !important;
opacity: 0.6 !important;
}
और एक बार फिर, यदि आप एक्सेंट रंग चाहते हैं, लेकिन एक अच्छे तरीके से, आप टैब संदर्भ रेखा कार्यक्षमता को शीर्ष बॉर्डर तत्व के साथ जोड़ सकते हैं, और पृष्ठभूमि के लिए प्रासंगिक कंटेनर रंग का उपयोग नहीं कर सकते। इस प्रकार, कोड का दूसरा ब्लॉक (ऊपर) बन जाता है:
.tabbrowser-tab[usercontextid] .tab-background {
border-top: 3px solid var(--identity-tab-color) !important;
}
नियमित टैब
लिनक्स उदाहरण में मेरे द्वारा उपयोग की गई बॉर्डर की अस्पष्टता थोड़ी कठोर लगी, इसलिए एक छोटा सा ट्वीक:
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color: color-mix(in srgb, currentColor 5%, transparent);
border: 1px solid rgba(0, 0, 0, 0.3) !important;
}
.tabbrowser-tab[selected="true"] .tab-background {
border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
border-top: 3px solid white !important;
}
टैब (नैव बार) को यूआरएलबार सेगमेंट से अलग करना
डिफ़ॉल्ट रूप से कोई रेखा नहीं है, जो कष्टप्रद है। आप एक जोड़ सकते हैं।
#nav-bar {
border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
}
शीर्ष बाएं पंक्ति से टैब पंक्ति मार्जिन
आपने देखा होगा कि टैब पंक्ति के बाएं और शीर्ष मार्जिन समान दूरी पर नहीं हैं। आप इस तत्व में एक छोटा बायां मार्जिन जोड़कर इसे ठीक कर सकते हैं। वह फ्रेम जो टैब प्लस यूआरएलबार को रखता है, navigator-toolbox कहलाता है।
#navigator-toolbox {
margin-left: 2px !important;
}
यूआरएलबार ट्वीक
यहां कई बदलावों की आवश्यकता है। सबसे पहले, मैंने सुनिश्चित किया कि URL के सभी तत्व सटीक समान रंग में दिखें। जैसा कि मैंने कहा, मैं कोई बच्चा नहीं हूं, और मुझे यह बताने के लिए तीन रंगों की आवश्यकता नहीं है कि मैं किस डोमेन पर जा रहा हूं। about:config खोलें, और फिर निम्नलिखित सेटिंग को false पर टॉगल करें:
browser.urlbar.formatting.enabled
अगला, मैंने सुनिश्चित किया कि यूआरएलबार बैकग्राउंड सफेद है, और इसमें एक बॉर्डर है। उस कम-कंट्रास्ट बकवास में से कोई नहीं।
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
मैंने पैडिंग और मार्जिन को थोड़ा बदल दिया, ताकि यह बेहतर दिखे - पूरी तरह से कॉस्मेटिक:
#urlbar {
padding-top: 2px !important;
margin-top: 2px !important;
margin-bottom: 3px !important;
}
खोज बॉक्स
आप एड्रेस बार के दाईं ओर खोज बॉक्स के लिए वही ट्रिक कर सकते हैं।
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
अतिरिक्त रंग
यदि आप मेरे नीले रंग के एक्सेंट को पसंद करते हैं, और आप इसे यूआरएलबार, सर्चबार और नैव बार बॉर्डर के लिए उपयोग करना चाहते हैं, तो आप rgba(0, 0, 0, 0.1) के उदाहरणों को rgba(10, 132, 255, 0.3) से बदल सकते हैं, उदाहरण के लिए। आप किसी भी अस्पष्टता का उपयोग कर सकते हैं जो आपको पसंद हो (चार की अंतिम संख्या)। उदाहरण के लिए, सर्चबार घोषणा:
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
परिणाम, स्क्रीनशॉट, मानसिक शांति!
यहाँ हम जाते हैं, अच्छा और साफ सामान:
कंटेनर टैब बिना एक्सेंट लाइन, शीर्ष लाल मार्जिन के साथ।
यूआरएलबार और खोज बॉक्स सफेद बैकग्राउंड, समान रंग के टेक्स्ट के साथ।
यूआरएलबार अतिरिक्त पैडिंग, ऊपर और नीचे।
नैव बार लाइन जगह में, टैब बॉर्डर रंग से मेल खाती।
अच्छा शीर्ष-बाएं टैब पंक्ति संरेखण, साथ ही सक्रिय टैब पर एक्सेंट रंग (शीर्ष बॉर्डर)।
कंटेनर टैब पर वापस, एक्सेंट लाइन के बजाय शीर्ष बॉर्डर प्रासंगिक रंग पर सेट।
और कुछ खुश रंग, हर जगह!
अंत में, बस आपको याद दिलाने के लिए, यह वह डिफ़ॉल्ट है जो आपको मिलता है:
निष्कर्ष
यहाँ हम जाते हैं। OCD राक्षस एक बार फिर आराम कर सकते हैं। परिणाम अभी भी सही नहीं है, क्योंकि पूरे ब्राउज़र इंटरफेस का रंग और कंट्रास्ट (अभी भी) गलत है, हालांकि मैंने हमेशा परिवर्तनों की संख्या को यथासंभव कम रखने की कोशिश की है, और किसी भी तीसरे पक्ष के टूल के उपयोग के बिना बिल्कुल। यह Firefox को महान नहीं बनाता, लेकिन यह इसे उचित रूप से उपयोग योग्य बनाता है। वास्तव में दुखद हिस्सा? मैं एक घंटे से भी कम समय में 10+ एर्गोनोमिक समस्याओं को ठीक करने में सक्षम था जो प्रतीत होता है कि एक पूरी विकास टीम बस अनदेखा करती है। और किस लिए? ग्रे-ऑन-ग्रे बकवास?
पहले ट्यूटोरियल में उल्लिखित जानकारी के साथ, प्लस यहां नया सामान, आपके पास एक सभ्य क्रॉस-प्लेटफ़ॉर्म Firefox अनुभव के लिए पर्याप्त CSS ट्वीक होने चाहिए। इस प्रकार आपके पास अच्छा टैब पृथक्करण, अच्छा रंग, और सफेद बैकग्राउंड वाला यूआरएलबार हो सकता है। उम्मीद है, मैं आपके जीवन को आसान बनाने में कामयाब रहा। दुखद बात यह है, Firefox एकमात्र ब्राउज़र है जिसे मैं वास्तव में उपयोग करना चाहता हूं, इसलिए मुझे उस दिन का डर है जब यह पूरी तरह से बेकार या बदसूरत बनने का फैसला करता है। लेकिन हे, यह तथाकथित आधुनिक जीवन है। लेकिन हमने एक और छोटी लड़ाई जीत ली। समझदार ब्राउज़र उपयोगकर्ता 1, हिप्स्टरोलॉजी 0।
चीयर्स।
