Mỗi sáng, tôi thức dậy, nhìn vào gương, và tự hỏi: Tôi có phải là hipster không? Và vì câu trả lời luôn là không chắc chắn, tôi biết các lựa chọn của mình trong cuộc sống sẽ vượt trội, về mặt thẩm mỹ và chức năng. Điều đó có nghĩa là khi tôi thấy Firefox 78 ESR của mình biến thành Firefox 91 ESR với giao diện Proton vô nghĩa, tôi biết đó sẽ là một ngày tồi tệ.
Bây giờ, Firefox là trình duyệt mặc định tôi chọn trên mọi nền tảng, luôn là và hy vọng sẽ luôn là, nhưng tôi từ chối khuất phục trước xu hướng hipsterology. Tôi không phải trẻ con cũng không sống gần bờ biển Thái Bình Dương. Do đó, sự rõ ràng, độ tương phản, màu sắc tốt đẹp. Tôi đã chỉ cho bạn cách đảo ngược hầu hết rắc rối Proton trong một hướng dẫn chuyên biệt, bây giờ tôi muốn đưa ra thêm vài mẹo. Theo chân tôi.
Tab Container
Có vẻ như với bản nâng cấp này, phiên bản Windows của Firefox cần chăm sóc đặc biệt. Về mặt này, tôi không hài lòng với đường nhấn (accent line) trên tab container; nó hiển thị ngắn hơn chiều rộng tab, và trông ngốc nghếch. Vì vậy, lệnh ưu tiên đầu tiên của tôi là xóa đường nhấn và dùng màu nền toàn tab.
.tabbrowser-tab[usercontextid] .tab-context-line {
display: none !important;
Mã CSS trên, bạn cần thêm vào userChrome.css, như đã giải thích trong hướng dẫn đầu tiên, sẽ chỉ xóa đường nhấn cho tab container. Để làm cho tab container nổi bật hơn, tôi dùng màu ngữ cảnh của chúng cho nền cộng với đường viền trên đỏ sáng thay vì đường nhấn:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-top: 3px solid red !important;
opacity: 0.6 !important;
}
Và một lần nữa, nếu bạn muốn màu nhấn, nhưng theo cách đẹp, bạn có thể kết hợp chức năng tab context line với phần tử border-top, và không dùng màu container ngữ cảnh cho nền. Do đó, khối mã thứ hai (trên) trở thành:
.tabbrowser-tab[usercontextid] .tab-background {
border-top: 3px solid var(--identity-tab-color) !important;
}
Tab thường
Độ mờ của đường viền tôi dùng trong ví dụ Linux hơi khắc nghiệt, nên một chút tinh chỉnh nhỏ:
.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;
}
Tách biệt hàng tab (nav bar) khỏi đoạn urlbar
Mặc định không có đường phân cách, điều này phiền toái. Bạn có thể thêm một đường.
#nav-bar {
border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
}
Lề hàng tab từ hàng trên bên trái
Bạn có thể nhận thấy rằng lề trái và trên của hàng tab không equidistant (cách đều). Bạn có thể sửa bằng cách thêm lề trái nhỏ cho phần tử này. Khung chứa tab cộng với urlbar gọi là navigator-toolbox.
#navigator-toolbox {
margin-left: 2px !important;
}
Tinh chỉnh Urlbar
Nhiều thay đổi cần thiết ở đây. Đầu tiên, tôi đảm bảo tất cả các phần tử của URL hiển thị với cùng một màu. Như tôi nói, tôi không phải trẻ con, và tôi không cần ba màu để cho tôi biết tôi đang truy cập miền gì. Mở about:config, sau đó chuyển cài đặt sau sang false:
browser.urlbar.formatting.enabled
Tiếp theo, tôi đảm bảo nền urlbar là trắng, và có đường viền. Không có những thứ độ tương phản thấp đó.
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
Tôi cũng thay đổi padding và margin một chút, để trông đẹp hơn - hoàn toàn thẩm mỹ:
#urlbar {
padding-top: 2px !important;
margin-top: 2px !important;
margin-bottom: 3px !important;
}
Hộp tìm kiếm
Bạn có thể làm thủ thuật tương tự cho hộp tìm kiếm bên phải thanh địa chỉ.
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
Màu sắc thêm
Nếu bạn thích màu xanh dương nhấn của tôi, và muốn dùng nó cho đường viền urlbar, searchbar và nav bar, thì bạn có thể thay thế các instance của rgba(0, 0, 0, 0.1) thành rgba(10, 132, 255, 0.3), ví dụ. Bạn có thể dùng bất kỳ độ mờ nào bạn thích (số cuối cùng trong bốn số). Ví dụ, khai báo searchbar:
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
Kết quả, ảnh chụp màn hình, bình an tâm!
Đây, đồ gọn gàng:
Tab container không đường nhấn, lề trên đỏ.
Urlbar và hộp tìm kiếm với nền trắng, văn bản cùng màu.
Urlbar padding thêm, trên và dưới.
Đường nav bar có mặt, khớp màu viền tab.
Căn chỉnh góc trên trái hàng tab đẹp hơn, cộng màu nhấn (đường viền trên) trên tab active.
Quay lại tab container, với đường viền trên thay vì đường nhấn đặt màu ngữ cảnh.
Và một vài màu vui vẻ, khắp nơi!
Cuối cùng, chỉ để nhắc lại, đây là mặc định bạn nhận được:
Kết luận
Xong. Quỷ OCD có thể nghỉ ngơi lại. Kết quả vẫn chưa hoàn hảo, vì toàn bộ màu sắc và độ tương phản giao diện trình duyệt (vẫn) sai, tuy nhiên tôi luôn cố gắng giữ số lượng thay đổi ít nhất có thể, và tuyệt đối không dùng công cụ bên thứ ba. Điều này không làm Firefox trở nên tuyệt vời, nhưng nó làm cho Firefox đủ dùng hợp lý. Phần thực sự buồn cười? Tôi đã có thể, trong chưa đầy một giờ, sửa 10+ vấn đề công thái học mà một đội phát triển củaם dường như bỏ qua. Và vì cái gì? Vô lý xám trên xám?
Với thông tin nêu trong hướng dẫn đầu tiên, cộng với nội dung mới ở đây, bạn nên có đủ tweak CSS cho trải nghiệm Firefox cross-platform ổn định. Bạn có thể có phân tách tab tốt, màu tốt, và urlbar nền trắng. Hy vọng tôi đã làm cho cuộc sống bạn dễ dàng hơn. Điều buồn cười là, Firefox là trình duyệt duy nhất tôi thực sự muốn dùng, nên tôi nể sợ ngày nó quyết định trở nên hoàn toàn vô dụng hoặc xấu xí. Nhưng hey, đó là cuộc sống hiện đại. Nhưng chúng ta đã giành được một trận chiến nhỏ. Người dùng trình duyệt bình thường 1, hipsterology 0.
Chúc vui.