हाथ में समस्या
हमने इस बारे में बात की, लेकिन हमें और बात करने की जरूरत है। उस बेकार, ग्रे-ऑन-ग्रे बकवास को देखो। टैब कहां शुरू होता है? यह कहां खत्म होता है? क्या यह टैब भी है? 80 और 90 के दशक में उन रंगीन टैब को याद करो जो लोग पुराने बड़े फ़ोल्डर्स में पेज मार्क करने के लिए इस्तेमाल करते थे? अब अदृश्य टैब की कल्पना करो! दूह! एर्गोनॉमिक्स!
सामग्री
काफी कुछ चीजें हैं जो आप कर सकते हैं। लेकिन चलो धीरे-धीरे शुरू करते हैं। सबसे पहले, आपको आज के काम की प्रकृति को समझने की जरूरत है। चूंकि बिल्ट-इन कॉन्फ़िगरेशन ट्वीक अब संभव नहीं हैं, हमें गहरे जाने की जरूरत है। आप कस्टम CSS नियमों के एक सेट का उपयोग करके Firefox के लुक को बदल सकते हैं, बहुत कुछ जैसे कोई वेब पेज को संपादित करता - वास्तव में, अधिकांश आधुनिक ब्राउज़र खुद को वेब पेजों की तरह ही स्टाइल करते हैं। मैंने पहले ही आपको दिखाया है कि मेरे Plasma & HD ट्यूटोरियल, पिन्ड टैब गाइड और यूआरएल बार को साने दिखाने के ट्यूटोरियल में यह कैसे करना है - यह आज हमारे काम के लिए बेसलाइन है।
सबसे पहले, कस्टम उपयोगकर्ता-निर्मित CSS ओवरराइड का उपयोग करने के विकल्पों को सक्षम करें। एक नया टैब खोलें, about:config टाइप करें, और फिर निम्नलिखित वरीयता को खोजें:
toolkit.legacyUserProfileCustomizations.stylesheets
इस सेटिंग को true पर टॉगल करें। फिर, अपने Firefox प्रोफ़ाइल फ़ोल्डर पर जाएं। Windows में, आमतौर पर:
C:\Users\"username"\AppData\Roaming\Mozilla\Firefox\"profile"
और लिनक्स में, आमतौर पर:
/home/"user"/.mozilla/firefox/"profile"
इस फ़ोल्डर में, chrome नामक एक फ़ोल्डर बनाएं (यदि यह पहले से मौजूद नहीं है) (लोअरकेस)। chrome फ़ोल्डर के अंदर, userChrome.css नामक एक खाली टेक्स्ट फ़ाइल बनाएं (यदि यह मौजूद नहीं है) (लोअर/अपरकेस का ध्यान रखें)। हम इस फ़ाइल में टेक्स्ट का एक गुच्छा जोड़ेंगे।
Proton नियम
अब, हमें कई नियम जोड़ने की जरूरत है जो Firefox व्यवहार को बदल देंगे। सबसे आपत्तिजनक तत्व नया टैब व्यवहार है, जिसमें ओवर-साइज़ टैब, पीला कंट्रास्ट, और सक्रिय और निष्क्रिय टैब और बैकग्राउंड टैब बार स्ट्रिप के बीच लगभग कोई पृथक्करण नहीं है। यहीं चीजें मुश्किल हो जाती हैं, क्योंकि CSS नियमों का एक भी निश्चित सेट नहीं है जिसे आप बस उपयोग कर सकें। कुछ विकल्प:
- AskVG गाइड क्लासिक लुक और UI को पुनर्स्थापित करने पर - सबसे सरल गाइड, और यहां मेरे काम के लिए बेसलाइन।
- Proton को Photon कॉम्पैक्ट में वापस लाने के लिए GitHub प्रोजेक्ट।
- Proton के कुछ पहलुओं को संशोधित करने के लिए GitHub प्रोजेक्ट।
- क्लासिक लुक का उपयोग करने के लिए GitHub प्रोजेक्ट (Proton से बहुत अधिक शामिल)।
- Firefox 89 Proton UI इंटरएक्टिव स्टाइलर - आपको सभी प्रकार की चीजें बदलने देता है + लाइव पूर्वावलोकन।
आइए AskVG गाइड से शुरू करें। userChrome.css में, निम्नलिखित कोड जोड़ें:
.titlebar-color {
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
.tab-background {
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup > menu, menupopup > menuitem {
padding-block: 2px !important;
}
:root {
--arrowpanel-menuitem-padding: 2px !important;
}
यह आपको काफी सभ्य लुक देगा - सक्रिय टैब में एक बॉर्डर होगा, बैकग्राउंड वाले नहीं होंगे। हालांकि, आपके पास मानक Proton की तुलना में बेहतर कंट्रास्ट होगा। मैंने इसे पर्याप्त पाया, लेकिन फिर कुछ और संशोधन करने का फैसला किया।
बैकग्राउंड टैब बॉर्डर
यदि आप चाहते हैं कि बैकग्राउंड टैब में भी बॉर्डर हों, तो आप निम्नलिखित जोड़ सकते हैं:
.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background {
border: 1px solid rgba(130, 130, 130, 0.5) !important;
}
यह बैकग्राउंड टैब को 50% पारदर्शिता पर सेट हल्के ग्रे 1px ठोस बॉर्डर के साथ सेट करेगा। आप कोई भी रंग या पारदर्शिता मान उपयोग कर सकते हैं जो आप पसंद करते हैं। इसके अलावा, कृपया ध्यान दें कि यह खंड AskVG कोड स्निपेट में परिभाषित एक के समान है, और आप वास्तव में नियमों को संयोजित कर सकते हैं ताकि CSS फ़ाइल में कोड का एक छोटा, अधिक कॉम्पैक्ट खंड बन सके। हालांकि, यदि आप इस बारे में पूरी तरह से निश्चित नहीं हैं कि क्या करना है, तो बस अतिरिक्त पंक्तियों को अलग से जोड़ें। कोई संघर्ष नहीं है, क्योंकि नियम स्तरित हैं।
फोरग्राउंड टैब बॉर्डर
इसी तरह, आप सक्रिय टैब को भी OCD के लिए ट्वीक कर सकते हैं:
.tabbrowser-tab[selected="true"] .tab-background {
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
}
टैब एक्सेंट रंग
आप यह सुनिश्चित कर सकते हैं कि सक्रिय टैब हाइलाइट और दृश्यमान है, इसे अन्य टैब से अलग करने के लिए:
.tabbrowser-tab[selected="true"] .tab-background {
border-top: 3px solid #3daee9 !important;
आप बस ऊपर दी गई परिभाषा में अतिरिक्त लाइन जोड़ सकते हैं, यदि आप चाहें। मेरे उदाहरण में, मैंने एक्सेंट रंग को इस विशेष उदाहरण में Plasma डेस्कटॉप द्वारा उपयोग किए गए डेस्कटॉप रंग योजना से मेल खाने के लिए सेट किया है। रंग कोड #3daee9 इस विशेष उदाहरण में Plasma डेस्कटॉप द्वारा उपयोग किया जाने वाला एक्सेंट रंग है। आप सिस्टम एक्सेंट रंग का उपयोग कर सकते हैं - जैसा कि शीर्षक बार CSS नियम में परिभाषित है:
border-top: 3px solid -moz-accent-color-foreground !important;
टैब बार ऊंचाई
यदि आप टैब को छोटा बनाना चाहते हैं - पुराने कॉम्पैक्ट मोड के समान, तो आप निम्नलिखित नियम जोड़ सकते हैं:
.toolbar-items, .tabbrowser-tab {
max-height: 38px;
}
:root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
max-height: 45px;
}
आप मानों को अपनी पसंद के अनुसार संशोधित कर सकते हैं, उदाहरण के लिए max-height: 28px; या समान। टच खंड वैकल्पिक है। किसी भी घनत्व (ऊंचाई) के साथ जाएं जो आपके लिए काम करता है।
कंटेनर टैब रंग
Firefox 91 कंटेनर टैब को भी नीरस और सामान्य टैब से अलग करना मुश्किल बना देता है। इसलिए मैंने थोड़ा रंग पेश करने का फैसला किया [sic]। कई विकल्प हैं, और अब तक, आपको आवश्यक परिवर्तन करने में थोड़ा अधिक सहज महसूस करना चाहिए। मैं पूरी तरह से रंगीन टैब के लिए गया जो कंटेनर रंग से मेल खाते हैं, साथ ही अच्छे बॉर्डर, ताकि मेरे OCD राक्षसों को जागने की आवश्यकता न हो:
.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;
}
प्रत्येक टैब अपने स्वयं के पहचान रंग का उपयोग करता है (var क्लॉज द्वारा परिभाषित), नीचे का बॉर्डर पहचान रंग से मेल खाता है ताकि टैब टैब बार में अच्छी तरह से मिश्रित हो जाए, और साइड बॉर्डर सामान्य टैब की तरह ही हैं। मैंने विभिन्न विकल्प आजमाए। उदाहरण के लिए, मैंने 20% और 80% अस्पष्टता विकल्प दोनों आजमाए। इसे देखें:
और अब, आपका Firefox बहुत बेहतर दिखता है! एक और पागल छोटा उदाहरण:
अतिरिक्त कॉस्मेटिक्स
आप और बहुत कुछ कर सकते हैं। मैंने एड्रेस बार में ज़ूम बटन को भी ट्वीक किया, क्योंकि पैडिंग कभी थोड़ा बंद था, और हम किसी भी दुष्ट पिक्सेल को नहीं रख सकते, अब क्या हम। लेकिन हमें यहाँ एक उच्च नोट पर समाप्त करना चाहिए।
#urlbar-zoom-button {
padding-top: 0px !important;
}
निष्कर्ष
वहां जाते हैं। आज, मैं आपको दिखा सका कि Firefox 91 में पेश किए गए कुछ बेकार "आधुनिक" UI परिवर्तनों को कैसे पूर्ववत किया जाए। जब तक Firefox में CSS ओवरराइड हैं, तब तक आशा है। अपने सॉफ़्टवेयर से लड़ना मजेदार नहीं है, लेकिन कम से कम आपके पास कम-IQ सामान से छुटकारा पाने और अपनी उत्पादकता और दक्षता बनाए रखने का विकल्प है। ऊपर उल्लिखित CSS नियमों के साथ, Firefox 91, और अधिक महत्वपूर्ण रूप से, Firefox 91 ESR, निकट भविष्य के लिए अपेक्षाकृत सभ्य और उपयोग योग्य दिख सकते हैं।
एक या दो साल में क्या होगा? कौन जानता है। मुझे अभी भी विश्वास है कि Firefox आपका डिफ़ॉल्ट ब्राउज़र होना चाहिए, Mozilla टीम द्वारा इसमें डाले जा रहे सभी बकवास के बावजूद, लेकिन मुझे यकीन नहीं है कि मैं उस स्थिति को कितने समय तक बनाए रख पाऊंगा। कुछ बिंदु पर, Firefox अपने प्रतिद्वंद्वियों के स्तर की दृश्य बदसूरती और बेकारता तक पहुंच सकता है। मुझे नहीं पता कि मैं तब क्या करने जा रहा हूं, क्योंकि मैं इंटरनेट का उपयोग नहीं करना चाहता जब क्रोमियम-आधारित ब्राउज़र मेरा एकमात्र विकल्प हो। वेब छोड़ दें? यह एक समाधान हो सकता है। खैर, हमें आज उस कठिन विकल्प का सामना करने की आवश्यकता नहीं है। CSS ट्वीक हो गए। बुद्धि 1, हिप्स्टरोलॉजी 0। अंत।
चीयर्स।
