Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

Hide tab bar with one tab Firefox 76

more options

My hide tab bar with one tab code has broken with 76. The tabs themselves remain collapsed, but the bar remains. Here's my userChrome file:

/* Modify to change window drag space width */
:root[tabsintitlebar="true"] #nav-bar{ --window-drag-space-width: 24px }

.titlebar-buttonbox-container{
  position: fixed;
  display:block !important;
  top:0;
  right:0;
  height: 40px;
}
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

:root[sidemode="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;
  display:block !important;
  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;
}

 #toolbar-menubar, #menubar-items, #main-menubar {
 background-color: #F8F8FB !important;
 background-image: none !important;
}
 #TabsToolbar, #menubar-items, #main-menubar {
 background-color: #F8F8FB !important;
 background-image: none !important;
}

/* Change Color of Active tab */

/* Change Color of Normal Tabs */
tab:not([selected=”true”]) 
{
	background-color: rgb(240,240,245) !important;
	color: black !important;
}

/* Hide solo tab */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
  visibility: collapse;
}
/* Hide New Tab Button immediately next to solo tab */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] + toolbarbutton {
  visibility: collapse;
}

Any help is appreciated.

My hide tab bar with one tab code has broken with 76. The tabs themselves remain collapsed, but the bar remains. Here's my userChrome file: <pre><nowiki>/* Modify to change window drag space width */ :root[tabsintitlebar="true"] #nav-bar{ --window-drag-space-width: 24px } .titlebar-buttonbox-container{ position: fixed; display:block !important; top:0; right:0; height: 40px; } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } :root[sidemode="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; display:block !important; 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; } #toolbar-menubar, #menubar-items, #main-menubar { background-color: #F8F8FB !important; background-image: none !important; } #TabsToolbar, #menubar-items, #main-menubar { background-color: #F8F8FB !important; background-image: none !important; } /* Change Color of Active tab */ /* Change Color of Normal Tabs */ tab:not([selected=”true”]) { background-color: rgb(240,240,245) !important; color: black !important; } /* Hide solo tab */ #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] { visibility: collapse; } /* Hide New Tab Button immediately next to solo tab */ #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] + toolbarbutton { visibility: collapse; } </nowiki></pre> Any help is appreciated.

Được chỉnh sửa bởi cor-el vào

Tất cả các câu trả lời (5)

more options

Hi click-click

That is likely because the code to place the tabs at the lower position includes code to set a minimum height to the Tab bar and also reserves space in the #navigator-toolbox for the Tab bar.
I don't think that it is possible to combine the two codes.

You can try the FirefoxCSS Reddit forum.

more options

Hi click-click, I just looked at your screenshot. I'm not sure why there is a conflict between the code in this thread and the code you are using to rearrange your toolbar order.

That said, your image says you DO want the tab bar to show AND be available for use. This is very different from the current discussion so I suggest starting a new thread about that, either here or on the following subreddit:

https://www.reddit.com/r/FirefoxCSS/

more options

jscher2000 said

That said, your image says you DO want the tab bar to show AND be available for use. This is very different from the current discussion...

When I get it right, what click-click wants is just a variant of the OP. Instead of having the tabs above the address bar, he has them below the bookmarks bar, and he wants to hide the tabs bar when only a single tab is in use. I think he uses something like this:

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
	-moz-box-ordinal-group: 10 !important;

}
#TabsToolbar {
	-moz-box-ordinal-group: 1000 !important;
	display: block !important;
	position: absolute !important;
	bottom: 0 !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
	padding-bottom: var(--tab-min-height);
}
#TabsToolbar #window-controls {
	display: none !important;
}
tab:only-of-type, tab:only-of-type + #tabs-newtab-button {
  display: none !important;
}
#tabbrowser-tabs, #tabbrowser-arrowscrollbox {
  min-height: 0 !important;
}

And the question is: How can one minimize the padding at the bottom of the navigator toolbox to 0px when only one tab is in use?

more options

MJK said

When I get it right, what click-click wants is just a variant of the OP. Instead of having the tabs above the address bar, he has them below the bookmarks bar, and he wants to hide the tabs bar when only a single tab is in use.. And the question is: How can one minimize the padding at the bottom of the navigator toolbox to 0px when only one tab is in use?

Correct.

The previously suggested code works fine if using tabs on top, but not the other way around.

For tabs below,. I use the Firefox Quantum userChrome.css tweaks 3.1.6 on Github with @import "./css/tabs/tabs_below_navigation_toolbar_fx74.css" enabled

i'm beginning to think I won't be able to bring back the functionality I had with Firefox 52.9 ESR in regards to hiding the toolbars. I just don't understand why this process is now broken as designed.

more options

MJK said

I think he uses something like this:
...
#TabsToolbar {
	-moz-box-ordinal-group: 1000 !important;
	display: block !important;
	position: absolute !important;
	bottom: 0 !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
	padding-bottom: var(--tab-min-height);
}
...

And the question is: How can one minimize the padding at the bottom of the navigator toolbox to 0px when only one tab is in use?

I don't think CSS can do that. The ability to detect that there is only a single tab is way down at the tab level:

  • #navigator-toolbox > #titlebar > #TabsToolbar > #TabsToolbar-customization-target > #tabbrowser-tabs > #tabbrowser-arrowscrollbox > tab:only-of-type

There is no way in CSS to bring that information "up" the hierarchy to the level of the #navigator-toolbox, which is the shared parent, or the #titlebar, which is the sibling, of the #nav-bar.

  • #navigator-toolbox > #nav-bar
  1. 1
  2. 2