Firefox 89 换了新的 Proton UI,总体设计上讲是好看的,也更符合现代浏览器的审美,但是默认隐藏了 compact 界面风格,加上过大的纵向 padding 对现代的带鱼屏显示器极为不友好,需要做一些调整。
要改这玩意,我们需要修改 Firefox 的 userChrome.css,并且打开被隐藏的 compact 模式。
Compact Toolbar Density
about:config -> browser.compactmode.show -> true
userChrome.css
首先,创建 userChrome.css: about:support -> Profile Folder -> Open Folder 打开当前的 profile 文件夹,在下面创建一个 “chrome” 文件夹,再放入一个空白的 userChrome.css 文件。
之后调整 toolkit.legacyUserProfileCustomizations.stylesheets 为 true,让 Firefox 在启动时加载 userChrome.css
界面调整
我主要在 Compact 下做了如下界面风格调整:
- Tab 使用 6px 圆角
- 将 Tab 和下方页面连在一起,而非默认的浮动风格
- 增加 Tab 之间的纵向分隔符
- 降低菜单项之间的 padding 到 4px
- 书签栏在 Compact 下使用和 Normal 相同的 2px 纵向 padding
/*** Tighten up drop-down/context/popup menu spacing ***/ menupopup > menuitem, menupopup > menu { padding-block: 4px !important; } :root { --arrowpanel-menuitem-padding: 4px 8px !important; } /*** Proton Tabs Tweaks ***/ /* Adjust tab corner shape, optionally remove space below tabs */ #tabbrowser-tabs { --user-tab-rounding: 6px; } .tab-background { border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; margin-block: 1px 0 !important; } /* Inactive tabs: Separator line style */ .tab-background:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) { border-right: 1px solid rgba(0, 0, 0, .20) !important; } /* For dark backgrounds */ [brighttext="true"] .tab-background:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) { border-right: 1px solid var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20)) !important; } .tab-background:not([selected=true]):not([multiselected=true]) { border-radius: 0 !important; } /* Remove padding between tabs */ .tabbrowser-tab { padding-left: 0 !important; padding-right: 0 !important; } /* Tweak Options as of 5/30/2021; Generated Sat Jun 05 2021 16:07:09 GMT-0400 (Eastern Daylight Time) */ /* Use Normal top and bottom padding for Compact */ #PlacesToolbarItems .bookmark-item { padding-top: 2px !important; padding-bottom: 2px !important; }
Reference
https://www.userchrome.org/firefox-89-styling-proton-ui.html
https://www.userchrome.org/how-create-userchrome-css.html
https://support.mozilla.org/en-US/questions/1243994#answer-1182082
https://support.mozilla.org/en-US/questions/1186601