这是一个创建于 2016 天前的主题，其中的信息可能已经有所发展或是发生改变。
简介
- 我有个不用的副屏，平时用来刷刷 instagram 或者 behance 之类的，配合自己些的自动滚屏脚本和 css，实现一个全屏的自动刷图。
- 但因为偶尔也会在这个屏上放点别的窗口，所以全屏有时切换不方便，就希望 firefox 能自动隐藏顶部，以提供更大的展示空间。
- 现在实现的效果就是窗口顶部 15px，鼠标悬停可以恢复整个顶部工具栏的显示，移出后则自动隐藏，整个窗口都是浏览器的内容区，接近一个无边窗口。
- 压缩到 15px 高度是为了不影响原本网页上的一些顶部按钮和输入等。
方法
-
Step 1:
- 地址栏输入 about:config
- toolkit.legacyUserProfileCustomizations.stylesheets > true
-
Step 2:
- 地址栏输入 about:support > Click on "Profile Folder" -> "Open Folder"
- 在这个打开的目录下建文件夹 "chrome", 然后把下面代码存为 "userChrome.css" 放在 "chrome" 内.
/* Firefox Hide Header / Navigator / Top / Tabs / Address / Toolbox Step 1: about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true Step 2: about:support > Click on "Profile Folder" -> "Open Folder" Create folder "chrome" here, and put this file in (as "userChrome.css"). More: Tutorial: How to create and live-debug userChrome.css : FirefoxCSS https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/ */ @-moz-document url("chrome://browser/content/browser.xul"), url("chrome://browser/content/browser.xhtml") { /* 隐藏顶部栏 第一行 10px 是顶部触发显示的高度。 下面的 99px 是顶部栏的预估高度。受各种自定义设置的影响，请自行调整。 如果只需要隐藏地址栏，保留标签栏，用 #nav-bar，然后可能需要适度调节。 */ #navigator-toolbox { max-height: 15px !important; z-index: 1000 !important; background: black !important; opacity: 0 !important; margin-bottom: -99px; transition: all .2s !important; } #navigator-toolbox:hover { max-height: none !important; opacity: 1 !important; } } - 一开始有参考 t/669207
- 自动滚屏的油猴脚本放 greasyfork 了，不想关联不同平台的账号，看缘分吧。
- 额外的参考 如何使用 userChrome.css 自定义 Firefox 的用户界面 | 阳光盒子
- 有兴趣深入研究的，这里有比较完整的调试方法。Tutorial: How to create and live-debug userChrome.css : FirefoxCSS
第 1 条附言 2020-06-22 15:24:38 +08:00
补丁
- overflow 还是要加，去掉之后触发区域还是完整高度，不是15px。
- 顺便又修了点别的，更新如下。
/* Firefox Hide Header / Navigator / Top / Tabs / Address / Toolbox Step 1: about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true Step 2: about:support > Click on "Profile Folder" -> "Open Folder" Create folder "chrome" here, and put this file in (as "userChrome.css"). More: Tutorial: How to create and live-debug userChrome.css : FirefoxCSS https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/ */ @-moz-document url("chrome://browser/content/browser.xul"), url("chrome://browser/content/browser.xhtml") { /* 隐藏顶部栏 第一行15px是顶部触发显示的高度。 如果只需要隐藏地址栏，保留标签栏，用 #nav-bar，然后可能需要适度调节。 */ #navigator-toolbox { max-height: 15px !important; overflow: hidden !important; z-index: 1000 !important; background: black !important; opacity: 0 !important; margin-bottom: -15px !important; transition: all .2s !important; } #navigator-toolbox:hover { max-height: none !important; opacity: 1 !important; margin-bottom: 0 !important; } /* 窗口最大化时 #titlebar 会多出来一个 padding-top:8px，但没找到哪儿设的。 会导致显示区上移8px，这里补回来。 顶部hover时，显示区和顶部间还是有8px的margin，平时看不到就先不管了。 */ html[sizemode="maximized"] #browser{ margin-top: 8px !important; } } 5 条回复 2021-12-05 16:53:47 +08:00
 | 1 ciaoly 2020-06-22 08:43:14 +08:00 via Android 道理我都懂，可为啥自定义 Firefox 的外观用的是 chrome.css 呢？这是 Firefox 和 chrome 有什么渊源还是咋地？ （刚查了查 chrome 单词的意思，就“镉”的意思哇，难道有表示“外观”的意思？ |
 | 2 Remember 2020-06-22 08:57:26 +08:00  2 firefox 配置用 chrome 这个词的时候，chrome 还不知道在哪儿呢。 |
 | 3 JCZ2MkKb5S8ZX9pq OP 或者最后补那 8px 的补丁这样打也可以 html[sizemode="maximized"] #navigator-toolbox{ margin-bottom: -7px !important; } html[sizemode="maximized"] #navigator-toolbox:hover{ margin-bottom: 0 !important; } |
 | 4 PeekPop 2021-09-23 16:02:01 +08:00 终于找到想要的了，不然用插件 auto full screen 会看不到系统任务栏。 |
| 5 PeekPop 2021-12-05 16:53:47 +08:00 找到个更好的了 https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css ，这个内外屏切换不会出现 bug ，你这个只有一个屏时改下参数还是可以的，多屏就有点 bug 了，在外屏正常全屏，在内屏顶部会多出一部分 |
Select Language