Run Hide One Tab & Tabs On Bottom in Firefox 65?
These two codes work separately:
https://www.reddit.com/r/FirefoxCSS/comments/7dqtuf/hide_tab_bar_if_only_one_tab_is_open/
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar.css & https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx65.css
But when combined, this is the result:
https://prod-cdn.sumo.mozilla.net/uploads/images/2019-01-29-22-34-45-94d43e.png
When two or more tabs are open, it works fine. Any ideas on how to get these to work properly together?
Vahaolana nofidina
Edit:
At the reddit link provided by Geraldo, the following solution was presented:
/* Modify to change window drag space width */ :root[tabsintitlebar="true"] #nav-bar{ --window-drag-space-width: 24px } .titlebar-buttonbox-container{ position: fixed; top:0; right:0; height: 40px; } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } :root[sizemode="maximized"] > #navigator-toolbox{ padding-top: 8px !important; } :root[sizemode="maximized"] .titlebar-buttonbox-container{ top: 8px } :root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; } :root[tabsintitlebar="true"] #nav-bar{ padding-right: calc(138px + var(--window-drag-space-width,0px)); padding-left: var(--window-drag-space-width,0px) } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } /* Menubar on top patch - use with Fx65_tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ #navigator-toolbox{ margin-top: 22px } #toolbar-menubar{ position: fixed; top: 0px; height: 22px; margin-top:1px; width: 100%; overflow: hidden; } #toolbar-menubar .titlebar-buttonbox-container{ height: 22px; } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } /* This will allow you to MAYBE put some items to the menubar */ #toolbar-menubar > *{ float: left } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* Makes tabs toolbar items zero-height initially and sets enlarge them to fill up space equal to tab-min-height set on tabs */ /* Firefox 65+ only */ /* !!USER!! - REMOVE ALL BUTTONS you can from the tabs toolbar */ /* Configurable window drag space */ :root[sizemode="normal"] #nav-bar{ --window-drag-space-width: 20px } #titlebar{ -moz-appearance: none !important; } #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox{ min-height: 0 !important; } :root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button, :root:not([customizing]) #TabsToolbar .titlebar-button{ -moz-appearance: none !important; height: 0px; padding-top: 0px !important; padding-bottom: 0px !important; -moz-box-align: stretch; margin: 0 !important; } #tabbrowser-tabs .tabbrowser-tab{ height: var(--tab-min-height) } #tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{ visibility: collapse !important; } /* Button re-styling */ #tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) } #tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{ padding: 0 !important; transform: scale(0.6); background-color: transparent !important; } /* Extra top padding in maximized window */ :root[sizemode="maximized"] > #navigator-toolbox{ padding-top:7px !important; } /* Fix window controls not being clickable */ #toolbar-menubar:hover{ min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important; height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important; -moz-appearance: initial !important; } #nav-bar{ padding: 0 var(--window-drag-space-width,0px) } /* Hide blue stripe on active tab */ .tab-line[selected="true"] { opacity: 0 !important; }
This seems to work. I'll update this to solved at least for now.
Hamaky an'ity valiny ity @ sehatra 👍 0All Replies (5)
Hello, the best thing is that you post the issue in the forum of FirefoxCSS: https://www.reddit.com/r/FirefoxCSS
Novain'i GerardoPcp04 t@
Thanks Gerardo. Done. I've also posted it on MozillaZine, but no reply there. Hoping someone can figure this out sometime soon. If I hear from somewhere else, I'll post the solution here as well.
When the Tab bar is visible then it is necessary to reserve space (padding) in the #navigator-toolbox. You would have to disable this padding if the Tab bar is hidden. I don't know if there is a selector possible. Probably best (easiest) would be to abandon the hide one tab code and only use tabs on bottom code.
/* hide tab bar if only one tab */ tab:only-of-type { display:none; }
Vahaolana Nofidina
Edit:
At the reddit link provided by Geraldo, the following solution was presented:
/* Modify to change window drag space width */ :root[tabsintitlebar="true"] #nav-bar{ --window-drag-space-width: 24px } .titlebar-buttonbox-container{ position: fixed; top:0; right:0; height: 40px; } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } :root[sizemode="maximized"] > #navigator-toolbox{ padding-top: 8px !important; } :root[sizemode="maximized"] .titlebar-buttonbox-container{ top: 8px } :root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; } :root[tabsintitlebar="true"] #nav-bar{ padding-right: calc(138px + var(--window-drag-space-width,0px)); padding-left: var(--window-drag-space-width,0px) } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } /* Menubar on top patch - use with Fx65_tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ #navigator-toolbox{ margin-top: 22px } #toolbar-menubar{ position: fixed; top: 0px; height: 22px; margin-top:1px; width: 100%; overflow: hidden; } #toolbar-menubar .titlebar-buttonbox-container{ height: 22px; } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } /* This will allow you to MAYBE put some items to the menubar */ #toolbar-menubar > *{ float: left } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* Makes tabs toolbar items zero-height initially and sets enlarge them to fill up space equal to tab-min-height set on tabs */ /* Firefox 65+ only */ /* !!USER!! - REMOVE ALL BUTTONS you can from the tabs toolbar */ /* Configurable window drag space */ :root[sizemode="normal"] #nav-bar{ --window-drag-space-width: 20px } #titlebar{ -moz-appearance: none !important; } #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox{ min-height: 0 !important; } :root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button, :root:not([customizing]) #TabsToolbar .titlebar-button{ -moz-appearance: none !important; height: 0px; padding-top: 0px !important; padding-bottom: 0px !important; -moz-box-align: stretch; margin: 0 !important; } #tabbrowser-tabs .tabbrowser-tab{ height: var(--tab-min-height) } #tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{ visibility: collapse !important; } /* Button re-styling */ #tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) } #tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{ padding: 0 !important; transform: scale(0.6); background-color: transparent !important; } /* Extra top padding in maximized window */ :root[sizemode="maximized"] > #navigator-toolbox{ padding-top:7px !important; } /* Fix window controls not being clickable */ #toolbar-menubar:hover{ min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important; height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important; -moz-appearance: initial !important; } #nav-bar{ padding: 0 var(--window-drag-space-width,0px) } /* Hide blue stripe on active tab */ .tab-line[selected="true"] { opacity: 0 !important; }
This seems to work. I'll update this to solved at least for now.
Novain'i cor-el t@