Arch Linux

Zangwill

会员

注册时间： 2018-03-16

帖子： 54

[已过时] 分享下 Firefox 自动隐藏书签栏的几种方式

2021/1/21 Firefox已经支持自动隐藏标签页了

如图是 chrome 自动隐藏书签栏的方式：
左边是google主页，自动隐藏书签栏;右边是标签页，自动显示书签栏。

Firefox (版本73.0.1)自动隐藏书签栏的方法：
1. Firefox 进入高级首选项about:config
2. 搜索toolkit.legacyUserProfileCustomizations.stylesheets，并设置为true
3. 打开配置文件夹：about:support(右上角打开菜单图标 - 帮助 - 故障排除信息) - 配置文件夹 - 打开目录
4. 新建chrome文件夹，并打开
5. 新建userChrome.css文件，并写入配置，参见下面3个配置
6. 重启Firefox

配置1：
效果：自动隐藏书签栏，当在URL栏内单击或创建新标签页时，书签栏出现。
预览： https://img.vim-cn.com/4a/e3622eaac1c90 … d885f.webm
代码：

#nav-bar:not(:focus-within) + #PersonalToolbar:not(:hover):not(:focus-within):not([customizing]) { visibility: collapse; }

参见 https://www.reddit.com/r/FirefoxCSS/com … e/feme6yv/

配置2：
效果：自动隐藏导航栏和书签栏，鼠标移到顶部时自动显示。
预览： https://img.vim-cn.com/d4/0ae487343944c … bc911.webm
代码：

/*
 * Auto-hide the URL-bar and bookmarks bar, show on hover or focus
 */

:root[uidensity=compact] #navigator-toolbox {
  --nav-bar-height: 33px;
  --bookmark-bar-height: 23px;
  --navbar-transition-time: 0.1s;
  --toolbar-buttons: 1;
}

:root:not([uidensity]) #navigator-toolbox {
  --nav-bar-height: 39px;
  --bookmark-bar-height: 23px;
  --navbar-transition-time: 0.1s;
  --toolbar-buttons: 1;
}

:root[uidensity=touch] #navigator-toolbox {
  --nav-bar-height: 41px;
  --bookmark-bar-height: 25px;
  --navbar-transition-time: 0.1s;
  --toolbar-buttons: 1;
}

:root:not([customizing]) #nav-bar, #PersonalToolbar {
  z-index: 1;
  display: block !important;
  position: fixed !important;
  min-height: 0 !important;
  height: 0 !important;
  width: 100%;
  opacity: 0;
  transition: opacity var(--navbar-transition-time) ease-in, height var(--navbar-transition-time) linear !important;
  pointer-events: none;
}

:root:not([customizing]) #nav-bar
{
  transition-delay: var(--navbar-transition-time) !important;
  z-index: 10;
}

:root:not([customizing]) #navigator-toolbox:hover #nav-bar,
:root:not([customizing]) #navigator-toolbox:focus-within #nav-bar {
  transition-delay: 0s !important;
  height: var(--nav-bar-height) !important;
  opacity: 1;
  pointer-events: all;
}

/* If the bookmarks bar is turned on, auto-hide that too */
:root:not([customizing]) #PersonalToolbar {
  margin-top: var(--nav-bar-height) !important;
}

:root:not([customizing]) #navigator-toolbox:hover #PersonalToolbar,
:root:not([customizing]) #navigator-toolbox:focus-within #PersonalToolbar {
  transition-delay: var(--navbar-transition-time) !important;
  height: var(--bookmark-bar-height) !important;
  opacity: 1;
  pointer-events: all;
}

/* haxx for the menu button */
:root:not([customizing]) #nav-bar #nav-bar-customization-target {
  width: calc(100% - (35px * var(--toolbar-buttons)));
}

:root:not([customizing]) #PanelUI-button {
  height: 100%;
}

:root:not([customizing]) #PanelUI-button .toolbarbutton-badge-stack,
:root:not([customizing]) #PanelUI-button .toolbarbutton-badge-stack .toolbarbutton-icon {
  display: block;
}

/* Lightweight Theme Support */
:root:-moz-lwtheme #nav-bar,
:root:-moz-lwtheme #PersonalToolbar {
  background-color: var(--lwt-accent-color) !important;
  background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
  background-position: var(--lwt-background-alignment) !important;
  background-repeat: var(--lwt-background-tiling) !important;
}

参见 https://www.reddit.com/r/FirefoxCSS/com … marks_bar/

配置3：
效果：自动隐藏书签栏，鼠标移到导航栏区域时自动显示书签栏。
预览： https://img.vim-cn.com/71/c817db71443e3 … cc23a.webm
代码：

#PersonalToolbar{
  --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
  --uc-bm-padding: 2px; /* Vertical padding to be applied to bookmarks */
}

:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 6px }

#PersonalToolbar:not([customizing]){
  margin-bottom: calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
  transform: rotateX(90deg);
  transform-origin: top;
  transition: transform 135ms linear 600ms !important;
  z-index: 1;

}
#PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }

/* SELECT BOOKMARKS TOOLBAR BEHAVIOR */
/* Comment out or delete either one of these to disable that behavior */

/* Show when urlbar is focused */
#nav-bar:focus-within + #PersonalToolbar{
  transition-delay: 100ms !important;
  transform: rotateX(0);
}

/* Show when cursor is over the toolbar area */
#navigator-toolbox:hover > #PersonalToolbar{
  transition-delay: 100ms !important;
  transform: rotateX(0);
}

/* Uncomment to enable compatibility for multi-row_bookmarks.css */
/* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup  */
/*
#PersonalToolbar:not([customizing]){
  position: fixed;
  display: block;
  margin-bottom: 0px !important;
}
*/

参见 https://www.reddit.com/r/FirefoxCSS/com … n/fdiakau/

最近编辑记录 Zangwill (2021-01-21 10:17:37)

依云

会员

所在地： a.k.a. 百合仙子

注册时间： 2011-08-21

帖子： 8,919

个人网站

Re: [已过时] 分享下 Firefox 自动隐藏书签栏的几种方式

好厉害。