☰

如何切换回 Firefox 的旧式标签页？

tag-icon • tag-icon firefox tabs border ux
如何切换回 Firefox 的旧式标签页？

最近的更新（我认为是 89）导致所有选项卡都以相同的连续阴影呈现，这使得每个选项卡的开始和结束变得更加困难（无论图标是什么，对不起，愚蠢的旧边框对我来说更容易看）。我该如何恢复它？我试过了相关答案 browser.proton.enabled=false毫无效果，并且重新启用紧凑模式也只是部分恢复了以前的外观和感觉。如何才能恢复旧的标签底纹和边框？

答案1

在Firefox 91中，恢复旧的标签页样式如下：

  1. 打开关于：配置。

  2. 搜索工具包.legacyUserProfileCustomizations.stylesheets。

  3. 双击该值将其设置为true。

  4. 打开关于：支持。

  5. 搜索个人资料目录（或者配置文件文件夹）。

  6. 点击开放目录（或者打开文件夹）。

  7. 创建名为 的目录chrome。

  8. 导航到铬合金目录。

  9. 在里面创建一个新文件铬合金命名userChrome.css。

  10. 复制并粘贴以下代码到用户Chrome.css：

     .tab-background {
   border-radius: 0px 0px !important;
   margin-bottom: 0px !important;
 }

 .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
   background-color: color-mix(in srgb, currentColor 5%, transparent);
 }

 menupopup>menu,
 menupopup>menuitem {
   padding-block: 2px !important;
 }

 :root {
   --arrowpanel-menuitem-padding: 2px !important;
 }

  11. 保存文件。

  12. 重新启动 Firefox。

恢复旧的标签样式。

答案2

不出所料我不是唯一一个不喜欢这个的人，幸运的是，已经有一个名为 Lepton 的修复程序https://github.com/black7375/FixFix#installation-guide。虽然感觉还不是 100% 正确，但使用简单的制表符分隔符已经好多了。

答案3

我的版本userChrome.css，其中我只更改了令我困扰的部分（分离的标签）。

  • 选项卡附加到工具栏，除非背景选项卡被多选。
  • 选择该选项卡时，其颜色与工具栏相同。
.tab-background {
  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  padding-bottom: 31px !important;
}
.tabbrowser-tab[multiselected=true]:not([selected=true]) .tab-background {
  border-radius: var(--tab-border-radius) !important;
  margin-top: 2px !important;
  margin-bottom: 1px !important;
  padding-bottom: 29px !important;
}
.tabbrowser-tab[selected=true] .tab-background ,
.tabbrowser-tab[multiselected=true] .tab-background {
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage) !important;
}

答案4

这篇文章和第一个答案是伟大的起点，但第一个答案说标签背景的颜色与其下方的工具栏不完全相同，这让我很恼火，所以我又挖了一点，这就是我想出的（仅适用于 Linux，在 Windows 上 Firefox 的主题略有不同，我将根据要求用 Windows 版本更新此帖子）：

在此处输入图片描述

/* 
about:config -> toolkit.legacyUserProfileCustomizations.stylesheets -> true
create <user-profile-dir>/chrome/userChrome.css and insert:
*/

.tabbrowser-tab .tab-background {
  box-shadow: 0 0 0px 1px color-mix(in srgb, currentColor 40%, transparent), 0 10px 10px rgba(255,255,255,0.2) inset !important;
  background-image: var(--toolbar-non-lwt-bgimage) !important;
  border-radius: 3px 3px 0 0 !important;
  margin-bottom: 0px !important;
}

.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
  box-shadow: none !important;
  background-image: none !important;
}

.tab-close-button:hover {
   background-color: color-mix(in srgb, #000000 15%, transparent) !important;
   color: #ff0000 !important;
}

.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-close-button:hover {
   background-color: color-mix(in srgb, #000000 10%, transparent) !important;
}

menupopup>menu,
menupopup>menuitem {
  padding-block: 5px !important;
}

:root {
  --arrowpanel-menuitem-padding: 5px !important;
}

.browser-toolbar {background-color: none !important;}
#navigator-toolbox-background {--toolbar-bgimage: var(--toolbar-non-lwt-bgimage) !important}

相关内容