ทุกเช้าผมตื่น มอง鏡 และถามตัวเอง: ผมเป็น hipster ไหม? และเพราะคำตอบคือ no แบบคัดค้าน ผมรู้ว่าตัวเลือกในชีวิตของผมจะเหนือกว่า ทาง aesthetics และ functionality ซึ่งหมายความว่าเมื่อเห็น Firefox 78 ESR ของผมกลายเป็น Firefox 91 ESR ด้วย Proton interface ที่ไร้ประโยชน์ ผมรู้ว่าจะเป็นวันแย่
ตอนนี้ Firefox เป็น default browser ที่ผมเลือกบนทุกแพลตฟอร์ม มานานแล้วและหวังว่าจะเป็นเช่นนี้ตลอด แต่ผมปฏิเสธที่จะ succumb to hipsterology trends ผมไม่ใช่เด็ก และไม่ได้อยู่ใกล้ชายฝั่ง Pacific Ocean ดังนั้น ความชัดเจน คอนทราสต์ สีที่ดีและชัดเจน ผมได้แสดงวิธีการย้อนกลับ Proton nonsense ใน tutorial แล้ว ตอนนี้ผมอยากให้ tips เพิ่มเติม ตามมาผม
Container tabs
เหมือนกัน การอัปเกรดครั้งนี้ Firefox เวอร์ชัน Windows ต้องการดูแลพิเศษ ในเรื่องนี้ ผมไม่พอใจกับ accent line บน container tabs มัน render สั้นกว่าความกว้างของแท็บ และดูโง่ ดังนั้น สิ่งแรกที่ผมทำคือลบ accent line และใช้สีเต็มแท็บ
.tabbrowser-tab[usercontextid] .tab-context-line {
display: none !important;
}
CSS code ข้างต้น ซึ่งคุณต้องเพิ่มใน userChrome.css ตามที่อธิบายใน tutorial แรก จะลบ accent line สำห container tabs เท่านั้น เพื่อให้ container tabs distinct มากขึ้น ผมใช้ contextual color ของพวกมันสำห background บวก bright red top border แทน accent line:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-top: 3px solid red !important;
opacity: 0.6 !important;
}
และอีกครั้ง หากคุณต้องการ accent color แต่อย่างสวย คุณสามารถรวม tab context line functionality กับ top border element และไม่ใช้ contextual container color สำห background ดังนั้น บล็อกโค้ดที่สอง (ด้านบน) จะกลายเป็น:
.tabbrowser-tab[usercontextid] .tab-background {
border-top: 3px solid var(--identity-tab-color) !important;
}
Regular tabs
Opacity ของขอบที่ผมใช้ในตัวอย่าง Linux รู้สึก harsh เล็กน้อย ดังนั้น tweak เล็กน้อย:
.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) จาก urlbar segment
ไม่มีเส้นคั่นโดย default ซึ่ง annoying คุณสามารถเพิ่มได้
#nav-bar {
border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
}
Tab row margins จาก top left row
คุณอาจสังเกตว่า left และ top margins ของ tab row ไม่ equidistant คุณสามารถแก้ได้โดยเพิ่ม left margin เล็กน้อยให้ element นี้ frame ที่จัดเก็บ tabs บวก urlbar เรียกว่า navigator-toolbox
#navigator-toolbox {
margin-left: 2px !important;
}
Urlbar tweaks
ต้องการการเปลี่ยนแปลงหลายอย่าง ที่นี่ ขั้นแรก ผมทำให้ทุก element ของ URL แสดงในสีเดียวกันทุกตัว เหมือนที่ผมบอก ผมไม่ใช่เด็ก และไม่ต้องการสามสีเพื่อบอกว่า domain ไหนที่กำลังเยี่ยมชม เปิด about:config แล้ว toggle setting ต่อไปนี้เป็น false:
browser.urlbar.formatting.enabled
ต่อไป ผมทำให้ urlbar background เป็นสีขาว และมีขอบ ไม่ใช่ low-contrast nonsense
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
ผมยังเปลี่ยน padding และ margins เล็กน้อย เพื่อให้ดูสวย - ทาง cosmetic ทั้งหมด:
#urlbar {
padding-top: 2px !important;
margin-top: 2px !important;
margin-bottom: 3px !important;
}
Search box
คุณสามารถทำ trick เดียวกันสำห search box ข้างขวาของ address bar
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
Extra color
หากคุณชอบ blue color accent ของผม และอยากใช้มันสำห urlbar, searchbar และ nav bar borders คุณสามารถแทนที่ instances ของ rgba(0, 0, 0, 0.1) เป็น rgba(10, 132, 255, 0.3) ตัวอย่างเช่น คุณสามารถใช้ opacity ใดๆ ที่ชอบ (ตัวเลขตัวสุดท้ายของสี่) ตัวอย่าง declaration searchbar:
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
ผลลัพธ์, สกรีนช็อต, ความรู้สึกสบายใจ!
นี่คือผลลัพธ์ที่ดีและเรียบร้อย:
Container tabs ไม่มี accent line, top red margin
Urlbar และ search box พื้นหลังสีขาว ข้อความสีเดียวกัน
Urlbar extra padding, top และ bottom
Nav bar line อยู่ที่ที่แล้ว ตรงกับสีขอบแท็บ
Nicer top-left tab row alignment บวก accent color (top border) บน active tab
กลับไปที่ container tabs ด้วย top border แทน accent line ตั้งค่าเป็น contextual color
และสีสันที่มีความสุข ทั่วทั้งที่!
สุดท้าย เพื่อเตือนอีกครั้ง นี่คือ default ที่คุณได้:
สรุป
นี่คือผลลัพธ์ OCD demons สามารถพักผ่อนได้อีกครั้ง ผลลัพธ์ยังไม่สมบูรณ์แบบ เพราะการจัดสีและคอนทราสต์ของ browser interface ทั้งหมด (ยังคง) ผิด แต่ผมพยายามเก็บจำนวนการเปลี่ยนแปลงให้น้อยที่สุด และ absolutely ไม่ใช้ third-party tools นี่ไม่ทำให้ Firefox great แต่ทำให้มัน reasonably usable สิ่งที่น่าเศร้าคือ ผมสามารถในเวลาไม่ถึงหนึ่งชั่วโมง แก้ไขปัญหา ergonomic 10+ ปัญหาที่ทีมพัฒนาทั้งทีมดูเหมือนจะ ignore ไว้ เพื่ออะไร? Gray on gray nonsense?
ด้วยข้อมูลที่ระบุใน tutorial แรก บวกกับสิ่งใหม่ๆ ที่นี่ คุณควรมี CSS tweaks เพียงพอสำห cross-platform Firefox experience ที่ดี คุณจึงสามารถมี good tab separation, good color, และ urlbar พื้นหลังสีขาว ได้ หวังว่าผมช่วยทำให้ชีวิตคุณง่ายขึ้น สิ่งน่าเศร้าคือ Firefox เป็นเบราว์เซอร์เดียวที่ผมอยากใช้จริงๆ ดังนั้นผมเกรงว่าจะมีวันมันตัดสินใจกลายเป็น totally useless หรือ ugly แต่เฮ้ นี่คือ modern life ที่เรียกกัน แต่เราขยับออกมาอีกหนึ่งรอบเล็กๆ Sane browser users 1, hipsterology 0
ขอแสดงความนับถือ
