Firefox 89 UI 调整

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注