V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JCZ2MkKb5S8ZX9pq
V2EX  ›  浏览器

[分享] Firefox 隐藏整个顶部栏 全屏显示

  •  
  •   JCZ2MkKb5S8ZX9pq · 2020-06-22 05:33:34 +08:00 · 3476 次点击
    这是一个创建于 1375 天前的主题,其中的信息可能已经有所发展或是发生改变。

    简介

    • 我有个不用的副屏,平时用来刷刷 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;
        }
    }
    

    第 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
    ciaoly
        1
    ciaoly  
       2020-06-22 08:43:14 +08:00 via Android
    道理我都懂,可为啥自定义 Firefox 的外观用的是 chrome.css 呢?这是 Firefox 和 chrome 有什么渊源还是咋地?
    (刚查了查 chrome 单词的意思,就“镉”的意思哇,难道有表示“外观”的意思?
    Remember
        2
    Remember  
       2020-06-22 08:57:26 +08:00   ❤️ 2
    firefox 配置用 chrome 这个词的时候,chrome 还不知道在哪儿呢。
    JCZ2MkKb5S8ZX9pq
        3
    JCZ2MkKb5S8ZX9pq  
    OP
       2020-06-22 15:34:28 +08:00
    或者最后补那 8px 的补丁这样打也可以

    html[sizemode="maximized"] #navigator-toolbox{
    margin-bottom: -7px !important;
    }
    html[sizemode="maximized"] #navigator-toolbox:hover{
    margin-bottom: 0 !important;
    }
    ltuxer
        4
    ltuxer  
       2021-09-23 16:02:01 +08:00
    终于找到想要的了,不然用插件 auto full screen 会看不到系统任务栏。
    ltuxer
        5
    ltuxer  
       2021-12-05 16:53:47 +08:00
    找到个更好的了 https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css ,这个内外屏切换不会出现 bug ,你这个只有一个屏时改下参数还是可以的,多屏就有点 bug 了,在外屏正常全屏,在内屏顶部会多出一部分
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3512 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 10:47 · PVG 18:47 · LAX 03:47 · JFK 06:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.