समस्या विस्तार से
तो यह है जो Firefox 97 में होता है। दो मुद्दे। एक सक्रिय कंटेनर टैब के लिए, शीर्ष-बॉर्डर हाइलाइट आंशिक रूप से अस्पष्ट है, जिससे सक्रिय टैब देखना मुश्किल हो जाता है। टैब बैकग्राउंड रंग क्षेत्र भी टैब बार के ऊपर थोड़ा बाहर निकलता है। दूसरा मुद्दा है, निष्क्रिय टैब के लिए, बैकग्राउंड क्षेत्र काफी बाहर निकलता है, और यह कच्चा दिखता है।
मैं पूरी तरह से अवगत हूं कि यह एक स्व-प्रेरित समस्या है, जैसा कि मैंने Firefox में कुछ हल करने की कोशिश की, जो मैंने किया, लेकिन अब परिणामस्वरूप कलाकृतियां हैं। लेकिन यह ठीक है, क्योंकि यह वह कीमत है जिसे मैं सामान्य UI, अच्छे स्पष्ट कंट्रास्ट और टैब के आसान पृथक्करण के लिए चुकाने को तैयार हूं। मैं फिर से अपने Proton प्रलाप में नहीं जाऊंगा।
समाधान
फिलहाल, कंटेनर टैब के लिए मेरा CSS इस प्रकार है:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
border-bottom: var(--identity-tab-color) !important;
border-top: 3px solid red !important;
opacity: 0.8 !important;
}
अब, सुधार इस प्रकार हैं:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
border-bottom: var(--identity-tab-color) !important;
opacity: 0.8 !important;
}
.tabbrowser-tab[usercontextid] .tab-background {
border-top: 3px solid red !important;
padding-top: 3px !important;
}
.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
border-top: 1px solid rgba(130, 130, 130, 0.5) !important;
padding-top: 3px !important;
}
सबसे पहले, मैंने कोड को कई ब्लॉकों में तोड़ दिया, क्योंकि हमें सक्रिय और निष्क्रिय कंटेनर टैब के लिए शीर्ष बॉर्डर के लिए अलग-अलग ट्वीक की आवश्यकता है। सक्रिय टैब के लिए भद्दे पैडिंग से छुटकारा पाने के लिए, हमें बस 3px पैडिंग जोड़ने की आवश्यकता है।
निष्क्रिय टैब के लिए, द्वारा पहचाने गए:
.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
हमें शीर्ष बॉर्डर को सामान्य टैब की तरह सटीक बनाने की आवश्यकता है (मेरे पहले दो गाइड देखें) लेकिन पैडिंग घोषणा भी जोड़ें। यह टैब बैकग्राउंड को "छोटा" बना देगा, यानी टैब बार के ऊपर नहीं निकलेगा, और बॉर्डर अन्य सभी टैब से मेल खाएगा, एक अच्छा समान रूप देगा।
और बस इतना ही!
निष्कर्ष
मुझे एहसास है कि मेरे ट्वीक में एक स्थिरता समस्या और रखरखाव लागत है। आखिरकार, मैं Firefox UI में हर छोटे बदलाव का हिसाब नहीं रख सकता, और छोटी-मोटी गड़बड़ियां अब और फिर हो सकती हैं। लेकिन फिर, ये मामूली होंगी, और मेरे पास उनके लिए त्वरित सुधार होंगे, जबकि सब-ऑप्टिमल लुक वाले ब्राउज़र का उपयोग हर समय नो-गो है। यह कोई मजेदार स्थिति नहीं है, लेकिन फिर भी, Firefox अभी भी सबसे अच्छा ब्राउज़र है, और आपको व्यावहारिक और दार्शनिक कारणों से इसका उपयोग करना चाहिए, हिप्स्टरोलॉजी के बावजूद।
वैसे भी, यदि आप एक नर्ड हैं, क्योंकि आइए इसका सामना करते हैं, अन्यथा आप यहां नहीं होते, और आप अपनी चीजों को साफ, स्वच्छ, पठनीय, एर्गोनोमिक और कुशल पसंद करते हैं, तो आपने Firefox 91 और उसके बाद के संस्करणों में UI लुक बदल दिए होंगे। आप मेरे कुछ ट्वीक का उपयोग भी कर रहे होंगे। यदि हां, तो आपके पास पॉलिश का एक नया दौर है, यदि आप Firefox 97 के साथ कुछ छोटी-मोटी परेशानियों का सामना करते हैं। वहां जाएं। ध्यान रखें, और जल्द मिलते हैं।
चीयर्स।
