Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Mulongo oyo etiyamaki na archive. Tuna motuna mosusu soki osengeli na lisalisi

Run Hide One Tab & Tabs On Bottom in Firefox 65?

  • 5 biyano
  • 2 eza na bankokoso oyo
  • 1 view
  • Eyano yasuka ya cor-el

more options
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?
Bafoto sur écran jointes

Solution eye eponami

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.

Tanga eyano oyo ndenge esengeli 👍 0

All Replies (5)

more options

Hello, the best thing is that you post the issue in the forum of FirefoxCSS: https://www.reddit.com/r/FirefoxCSS

Ezalaki modifié na GerardoPcp04

more options

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.

more options

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; 
}
more options

Solution eye oponami

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.

Ezalaki modifié na cor-el

more options