Mỗi sáng thức dậy, tôi nhìn vào gương và tự hỏi:Mình có phải là một hipster không? Và vì câu trả lời luôn rõ ràng là không, tôi biết rằng những lựa chọn của tôi trong cuộc sống sẽ tốt hơn, về mặt thẩm mỹ và chức năng. Điều đó có nghĩa là khi tôi nhìn 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 hôm nay sẽ là một ngày tồi tệ.
Bây giờ, Firefox là trình duyệt mặc định mà tôi lựa chọn trên bất kỳ nền tảng nào, đã luôn như vậy và hy vọng sẽ luôn như vậy, nhưng tôi không chịu khuất phục trước xu hướng hipsterology. Tôi không phải là một đứa trẻ và cũng không sống gần bờ biển Thái Bình Dương. Do đó, độ rõ nét, độ tương phản, màu sắc rõ ràng tốt. Tôi đã chỉ cho bạn cách hoàn tác hầu hết những điều vô nghĩa về Proton trong một hướng dẫn chuyên dụng, bây giờ tôi muốn cung cấp cho bạn một số mẹo nữa. Đi theo tôi.
Các tab vùng chứa
Hóa ra, với bản nâng cấp này, phiên bản Firefox dành cho Windows cần được chăm sóc đặc biệt hơn. Về vấn đề này, tôi không hài lòng với dòng trọng âm trên các tab vùng chứa; nó hiển thị ngắn hơn chiều rộng của tab và do đó trông thật ngu ngốc. Vì vậy, yêu cầu đầu tiên trong ngày của tôi là xóa đường dấu và sử dụng toàn bộ màu tab.
.tabbrowser-tab[usercontextid] .tab-context-line {
display:none !important;
Mã CSS ở trên mà 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 dòng dấu trọng âm cho các tab vùng chứa. Để làm cho các tab vùng chứa trở nên khác biệt hơn, tôi sử dụng màu nền theo ngữ cảnh của chúng cùng với đường viền trên cùng màu đỏ tươi thay vì đường dấu:
.tabbrowser-tab[usercontextid] .tab-background {
nền:var(--identity-tab-color) !quan trọng;
border-top:3px màu đỏ đặc !important;
độ mờ:0,6 !quan trọng;
}
Và một lần nữa, nếu bạn muốn có màu nhấn, nhưng theo một cách hay, bạn có thể kết hợp chức năng dòng ngữ cảnh tab với phần tử đường viền trên cùng và không sử dụng màu vùng chứa 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 thường
Độ mờ của các đường viền mà tôi đã sử dụng trong ví dụ về Linux có vẻ hơi khắc nghiệt, do đó, một điều chỉnh nhỏ:
.tabbrowser-tab:not([selected="true"]):not([multisered="true"]) .tab-background {
background-color:color-mix(in srgb, currentColor 5%, trong suốt);
đường viền:1px solid rgba(0, 0, 0, 0.3) !important;
}
.tabbrowser-tab[đã chọn="true"] .tab-background {
border-left:1px solid rgba(0, 0, 0, 0.3) !quan trọng;
border-right:1px solid rgba(0, 0, 0, 0.3) !important;
border-top:3px màu trắng đặc !important;
}
Tách các tab (thanh điều hướng) khỏi đoạn urlbar
Không có dòng nào theo mặc định, điều này gây khó chịu. Bạn có thể thêm một.
#nav-bar {
border-top:1px solid rgba(0, 0, 0, 0.3) !important;
}
Lề hàng tab từ hàng trên cùng bên trái
Bạn có thể nhận thấy rằng lề trái và lề trên của hàng tab không cách đều nhau. Bạn có thể khắc phục điều này bằng cách thêm một lề trái nhỏ vào phần tử này. Khung chứa các tab cộng với thanh url được gọi là hộp công cụ điều hướng.
#navigator-toolbox {
lề-trái:2px !quan trọng;
}
Chỉnh sửa thanh url
Nhiều thay đổi là cần thiết ở đây. Đầu tiên, tôi đảm bảo rằng tất cả các thành phần của URL hiển thị cùng một màu. Như tôi đã nói, tôi không phải là một đứa trẻ và tôi không cần ba màu để biết tôi đang truy cập miền nào. Mở about:config rồi chuyển cài đặt sau thành false:
browser.urlbar.formatting.enabled
Tiếp theo, tôi đảm bảo nền thanh url có màu trắng và có viền. Không có thứ gì vô nghĩa với độ tương phản thấp.
#urlbar-background {
background-color:trắng !quan trọng;
đường viền:1px solid rgba(0, 0, 0, 0.1) !important;
}
Tôi cũng thay đổi phần đệm và lề một chút, để nó trông đẹp hơn - hoàn toàn mang tính thẩm mỹ:
#urlbar {
padding-top:2px !quan trọng;
lề-trên:2px !quan trọng;
lề-dưới:3px !quan trọng;
}
Hộp tìm kiếm
Bạn có thể thực hiện thủ thuật tương tự cho hộp tìm kiếm ở bên phải thanh địa chỉ.
#searchbar {
lề-top:1px !quan trọng;
màu nền:trắng !quan trọng;
đường viền:1px solid rgba(0, 0, 0, 0.1) !important;
}
Màu bổ sung
Nếu bạn thích điểm nhấn màu xanh lam của tôi và bạn muốn sử dụng nó cho đường viền thanh url, thanh tìm kiếm và thanh điều hướng, thì bạn có thể thay thế các phiên bản rgba(0, 0, 0, 0.1) thành rgba(10, 132, 255, 0,3), chẳng hạn. Bạn có thể sử dụng bất kỳ độ mờ nào bạn thích (số cuối cùng trong số bốn). Chẳng hạn, khai báo thanh tìm kiếm:
#searchbar {
lề-top:1px !quan trọng;
màu nền:trắng !quan trọng;
đường viền:1px solid rgba(10, 132, 255, 0.3) !important;
}
Kết quả, ảnh chụp màn hình, yên tâm!
Đây là những thứ tốt và gọn gàng:
Các tab vùng chứa không có dòng dấu, lề màu đỏ trên cùng.
Thanh url và hộp tìm kiếm có nền trắng, văn bản có màu đồng nhất.
Phần đệm thêm, trên cùng và dưới cùng của thanh url.
Đường thanh điều hướng đã có, khớp với màu đường viền tab.
Căn chỉnh hàng tab trên cùng bên trái đẹp hơn, cộng với màu nhấn (đường viền trên cùng) trên tab đang hoạt động.
Quay lại tab vùng chứa, với đường viền trên cùng thay vì đường dấu được đặt thành màu theo ngữ cảnh.
Và một số màu sắc hạnh phúc, ở khắp mọi nơi!
Cuối cùng, xin nhắc bạn rằng đây là giá trị mặc định mà bạn nhận được:
Kết luận
Chúng ta đi đây. Những con quỷ OCD có thể nghỉ ngơi một lần nữa. Kết quả vẫn chưa hoàn hảo vì toàn bộ màu sắc và độ tương phản của 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 ở mức nhỏ nhất có thể và hoàn toàn không sử dụng công cụ của bên thứ ba. Điều này không làm cho Firefox trở nên tuyệt vời, nhưng nó làm cho nó có thể sử dụng được một cách hợp lý. Phần thực sự buồn? Trong vòng chưa đầy một giờ, tôi đã có thể khắc phục hơn 10 sự cố về công thái học mà dường như toàn bộ nhóm phát triển đơn giản là bỏ qua. Và vì lợi ích của cái gì? Màu xám trên màu xám vô nghĩa?
Với thông tin được nêu trong hướng dẫn đầu tiên, cộng với nội dung mới ở đây, bạn sẽ có đủ các chỉnh sửa CSS để có trải nghiệm Firefox đa nền tảng phù hợp. Do đó, bạn có thể tách tab tốt, màu sắc đẹp và thanh url có nền trắng. Hy vọng rằng, tôi đã quản lý để làm cho cuộc sống của bạn dễ dàng hơn. Điều đáng buồn là, Firefox là trình duyệt duy nhất mà tôi thực sự muốn sử dụng, vì vậy tôi rất sợ cái ngày mà nó quyết định trở nên hoàn toàn vô dụng hoặc xấu xí. Nhưng bạn ơi, đó mới gọi là cuộc sống hiện đại. Nhưng chúng tôi đã tạo ra một cuộc chiến nhỏ khác. Người dùng trình duyệt lành mạnh 1, hipsterology 0.
Chúc mừng.