X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

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

Kuphostiwe
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?
Ama-screenshot ananyekiwe

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 0

Eminye Imininingwane Yohlelo

Fakela amapulagi

  • Shockwave Flash 32.0 r0

Isisebenziso

  • I-ejenti Engumsebenzisi: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:65.0) Gecko/20100101 Firefox/65.0

Eminye Imininingwane

GerardoPcp04
  • Top 25 Contributor
396 izisombululo 2607 izimpendulo
Kuphostiwe

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

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

Okulungisiwe ngu GerardoPcp04

Umnikazi wombuzo

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.

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.
cor-el
  • Top 10 Contributor
  • Moderator
17540 izisombululo 158604 izimpendulo
Kuphostiwe

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; 
}
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. ---- <pre><nowiki>/* hide tab bar if only one tab */ tab:only-of-type { display:none; }</nowiki></pre>

Isisombululo Esikhethiwe

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.

Edit: At the reddit link provided by Geraldo, the following solution was presented: <pre><nowiki>/* 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; } </nowiki></pre> This seems to work. I'll update this to solved at least for now.

Okulungisiwe ngu cor-el

cor-el
  • Top 10 Contributor
  • Moderator
17540 izisombululo 158604 izimpendulo
Kuphostiwe

Impendulo Ewusizo

https://www.reddit.com/r/FirefoxCSS/comments/amk6mn/run_hide_one_tab_tabs_on_bottom_in_firefox_65/