UserChrome CSS Hide Tabstoolbar when only one TAB Firefox 128.4.0esr
Hi All,
Been trying to find a solution for over 2 days now! Please help me!
Firefox 128.4.0esr
I want to hide the following, because I need the screen space: 1/ Tabstoolbar = NOK 2/ Autohide main toolbars = OK 3/ Bring back the old status bar = OK
The last 2 are OK, but the first one doesn't seem to work? I think that there's something in the first script that prevents this from working, coz I have tried everything. Please help it's driving me nuts, never use tabs only windows, because on macOS that's better.
Here's what I have so far, all this is working just fine.
The very last line is disabled because this does what I want but it breaks the "auto hide" main toolbars.
MANY THANKS FOR YOU TIME AND HELP!!!!
/* Fake_Statusbar_W_Bookmarksbar_-_Creates A Statusbar At The Bottom Of The Window By Using Bookmarks Toolbar */
- root:not([inFullscreen]) > body{
--uc-statusbar-button-padding: 4px; --uc-browser-base-padding: calc(2 * var(--uc-statusbar-button-padding) + 7px + 2px); --uc-statusbar-text-vertical-position: 5px;
}
- PersonalToolbar .toolbarbutton-1{
--toolbarbutton-inner-padding: var(--uc-statusbar-button-padding) !important;
}
- root[uidensity="compact"]:not([inFullscreen]) > body{
--uc-statusbar-text-vertical-position: 3px;
}
- root:not([inFullscreen]) > body::after{
content: ""; display: flex; margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important; order: 2; /* To make this really the bottom-most toolbar even with custom toolbar order */
}
- PersonalToolbar{
position: fixed; display: flex; bottom: 0; width: 100vw; border-top: 1px solid var(--chrome-content-separator-color);
}
- personal-toolbar-empty + toolbarspring,
- PersonalToolbar > :first-child + toolbarspring{
background-position: left var(--uc-statusbar-text-vertical-position); background-repeat: no-repeat; background-image: -moz-element(#statuspanel); max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */ min-width: 60ch; flex-grow: 10 !important;
}
- personal-toolbar-empty{ visibility: hidden; }
- PersonalToolbar .toolbarbutton-1{
align-items: center !important;
}
- PersonalToolbar > toolbarspring{
flex-grow: 1; max-width: none !important; min-height: var(--uc-browser-base-padding) !important;
}
/* Using -moz-element() causes some problems after Firefox has been running several hours such as long tab switch times. For this reason the background image is removed on hover and focused states which appears to clear the state. */
- PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none }
- statuspanel{
padding-top: 0 !important; text-shadow: none !important;
}
- statuspanel-label{
height:3em; min-width: 1000px; background-color: transparent !important; border: none !important; font-size: inherit; color: inherit !important; margin-inline: 0px !important; padding-inline: 0 !important;
} /* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */
- statuspanel-inner{ background-color: var(--toolbar-accent-color) }
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
- statuspanel{
color: lightpink; /* color used to indicate insecure http:// links */ z-index: -1; visibility: visible !important; opacity: 1 !important;
}
- statuspanel[inactive] #statuspanel-label{ visibility: hidden }
.browserStack > #statuspanel[inactive]::before,
- statuspanel[inactive] > #statuspanel-inner::before{
content: "Done"; display: flex; margin-top: 2px; color: var(--toolbar-field-color, black) !important;
}
- statuspanel[type="status"] { color: skyblue }
- statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }
/* These should make sure that there is some opaque color covering the real statuspanel - necessary when RFP letterboxing is enabled */ .browserContainer, .browserSidebarContainer{
background-color: inherit;
}
/* Autohide_Bookmarks_And_Main_Toolbars */
- navigator-toolbox{
--uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ --uc-bm-height: calc(20px + 2 * var(--uc-bm-padding)); /* Might need to adjust if the toolbar has other buttons */ --uc-navbar-height: -40px; /* navbar is main toolbar. Use negative value */ --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
}
- root[uidensity="compact"] #navigator-toolbox{
--uc-navbar-height: -34px;
}
- root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }
- root[chromehidden~="directories"] #navigator-toolbox{
--uc-bm-height: 0px;
}
- root[chromehidden~="toolbar"] #navigator-toolbox{
--uc-navbar-height: 0px;
}
- navigator-toolbox,
- sidebar-box,
- sidebar-main,
- sidebar-splitter,
- tabbrowser-tabbox{
z-index: auto !important;
}
- root[sessionrestored] #nav-bar,
- root[sessionrestored] #PersonalToolbar{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important; background-position: top,var(--lwt-background-alignment); background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px)); background-repeat: repeat,var(--lwt-background-tiling); transform: rotateX(90deg); transform-origin: top; transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; z-index: 2;
}
- PlacesToolbarItems > .bookmark-item,
- OtherBookmarks,
- PersonalToolbar > #import-button{
padding-block: var(--uc-bm-padding) !important;
}
- root[sessionrestored] #PersonalToolbar{
z-index: 1; background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));
}
- root[lwtheme-image] #nav-bar,
- root[lwtheme-image] #PersonalToolbar{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
}
- nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }
- navigator-toolbox > #PersonalToolbar{
transform-origin: 0px var(--uc-navbar-height); position: relative;
}
- root[sessionrestored] #urlbar[popover]{
opacity: 0; pointer-events: none; transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms); transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2); transform: rotateX(89.5deg);
}
- mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox #urlbar[popover],
- navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
- urlbar-container > #urlbar[popover]:is([focused],[open]){
opacity: 1; pointer-events: auto; transition-delay: 100ms; transform: rotateX(0deg);
}
- root[sessionrestored]:not([customizing]) #navigator-toolbox{
margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height));
}
/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */
- root[sizemode="fullscreen"] #PersonalToolbar,
- PersonalToolbar[collapsed="true"]{
min-height: initial !important; max-height: initial !important; visibility: hidden !important
}
- PersonalToolbar[collapsed="true"] #PlacesToolbarItems > *,
- root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{
visibility: hidden !important;
}
/* If bookmarks toolbar is collapsed on startup, then no items are generated, and we need to set some height for it */
- PlacesToolbarItems:empty{
height: var(--uc-bm-height);
}
/* Selected tab needs higher z-index now to "hide" the broder below it */ .tabbrowser-tab[selected]{ z-index: 3 !important; }
/* Show when cursor is over main menu popup - this requires :has selector support */
- mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox > .browser-toolbar{
transition-delay: 100ms !important; transform: rotateX(0);
}
/* SELECT TOOLBAR BEHAVIOR */ /* Comment out or delete one of these to disable that behavior */
/* Show when urlbar is focused */
- nav-bar:focus-within + #PersonalToolbar,
- navigator-toolbox > #nav-bar:focus-within{
transition-delay: 100ms !important; transform: rotateX(0);
}
/* Show when cursor is over the toolbar area */
- navigator-toolbox:hover > .browser-toolbar{
transition-delay: 100ms !important; transform: rotateX(0);
}
/* This makes the tab notification box show immediately below tabs, otherwise it would break the layout */
- navigator-toolbox > div{ display: contents }
- where(#titlebar,#navigator-toolbox > #TabsToolbar,#navigator-toolbox > #toolbar-menubar,#tab-notification-deck,.global-notificationbox){
order: -1;
}
- root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{
margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)) !important; z-index: auto !important;
} @media (-moz-bool-pref: "browser.fullscreen.autohide"){
:root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{
margin-top: calc(1px - var(--tab-min-height) - 2 * var(--tab-block-margin)) !important;
}
}
/* Set the following pref to enable compatibility with multi-row_bookmarks.css */ @media (-moz-bool-pref: "userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"){
#navigator-toolbox{ margin-bottom: var(--uc-navbar-height) !important; }
#PersonalToolbar:not([customizing]){
min-height: 0 !important;
margin-bottom: 0;
height: 0;
overflow-y: visible !important;
z-index: 2;
padding-inline: 0 !important;
}
#personal-bookmarks{
background: inherit;
height: min-content;
}
#PlacesToolbarDropIndicatorHolder{
pointer-events: none !important;
}
}
/* Hide Tab Bar With Only One Tab */
/* #TabsToolbar { visibility: collapse !important; } */
Hi All,
Been trying to find a solution for over 2 days now!
Please help me!
Firefox 128.4.0esr
I want to hide the following, because I need the screen space:
1/ Tabstoolbar = NOK
2/ Autohide main toolbars = OK
3/ Bring back the old status bar = OK
The last 2 are OK, but the first one doesn't seem to work?
I think that there's something in the first script that prevents this from working, coz I have tried everything.
Please help it's driving me nuts, never use tabs only windows, because on macOS that's better.
Here's what I have so far, all this is working just fine.
The very last line is disabled because this does what I want but it breaks the "auto hide" main toolbars.
MANY THANKS FOR YOU TIME AND HELP!!!!
/* Fake_Statusbar_W_Bookmarksbar_-_Creates A Statusbar At The Bottom Of The Window By Using Bookmarks Toolbar */
:root:not([inFullscreen]) > body{
--uc-statusbar-button-padding: 4px;
--uc-browser-base-padding: calc(2 * var(--uc-statusbar-button-padding) + 7px + 2px);
--uc-statusbar-text-vertical-position: 5px;
}
#PersonalToolbar .toolbarbutton-1{
--toolbarbutton-inner-padding: var(--uc-statusbar-button-padding) !important;
}
:root[uidensity="compact"]:not([inFullscreen]) > body{
--uc-statusbar-text-vertical-position: 3px;
}
:root:not([inFullscreen]) > body::after{
content: "";
display: flex;
margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
order: 2; /* To make this really the bottom-most toolbar even with custom toolbar order */
}
#PersonalToolbar{
position: fixed;
display: flex;
bottom: 0;
width: 100vw;
border-top: 1px solid var(--chrome-content-separator-color);
}
#personal-toolbar-empty + toolbarspring,
#PersonalToolbar > :first-child + toolbarspring{
background-position: left var(--uc-statusbar-text-vertical-position);
background-repeat: no-repeat;
background-image: -moz-element(#statuspanel);
max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */
min-width: 60ch;
flex-grow: 10 !important;
}
#personal-toolbar-empty{ visibility: hidden; }
#PersonalToolbar .toolbarbutton-1{
align-items: center !important;
}
#PersonalToolbar > toolbarspring{
flex-grow: 1;
max-width: none !important;
min-height: var(--uc-browser-base-padding) !important;
}
/* Using -moz-element() causes some problems after Firefox has been running several hours such as long tab switch times. For this reason the background image is removed on hover and focused states which appears to clear the state. */
#PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none }
#statuspanel{
padding-top: 0 !important;
text-shadow: none !important;
}
#statuspanel-label{
height:3em;
min-width: 1000px;
background-color: transparent !important;
border: none !important;
font-size: inherit;
color: inherit !important;
margin-inline: 0px !important;
padding-inline: 0 !important;
}
/* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */
#statuspanel-inner{ background-color: var(--toolbar-accent-color) }
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
#statuspanel{
color: lightpink; /* color used to indicate insecure http:// links */
z-index: -1;
visibility: visible !important;
opacity: 1 !important;
}
#statuspanel[inactive] #statuspanel-label{ visibility: hidden }
.browserStack > #statuspanel[inactive]::before,
#statuspanel[inactive] > #statuspanel-inner::before{
content: "Done";
display: flex;
margin-top: 2px;
color: var(--toolbar-field-color, black) !important;
}
#statuspanel[type="status"] { color: skyblue }
#statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }
/* These should make sure that there is some opaque color covering the real statuspanel - necessary when RFP letterboxing is enabled */
.browserContainer,
.browserSidebarContainer{
background-color: inherit;
}
/* Autohide_Bookmarks_And_Main_Toolbars */
#navigator-toolbox{
--uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
--uc-bm-height: calc(20px + 2 * var(--uc-bm-padding)); /* Might need to adjust if the toolbar has other buttons */
--uc-navbar-height: -40px; /* navbar is main toolbar. Use negative value */
--uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
}
:root[uidensity="compact"] #navigator-toolbox{
--uc-navbar-height: -34px;
}
:root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }
:root[chromehidden~="directories"] #navigator-toolbox{
--uc-bm-height: 0px;
}
:root[chromehidden~="toolbar"] #navigator-toolbox{
--uc-navbar-height: 0px;
}
#navigator-toolbox,
#sidebar-box,
#sidebar-main,
#sidebar-splitter,
#tabbrowser-tabbox{
z-index: auto !important;
}
:root[sessionrestored] #nav-bar,
:root[sessionrestored] #PersonalToolbar{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
background-position: top,var(--lwt-background-alignment);
background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
background-repeat: repeat,var(--lwt-background-tiling);
transform: rotateX(90deg);
transform-origin: top;
transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
z-index: 2;
}
#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
padding-block: var(--uc-bm-padding) !important;
}
:root[sessionrestored] #PersonalToolbar{
z-index: 1;
background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));
}
:root[lwtheme-image] #nav-bar,
:root[lwtheme-image] #PersonalToolbar{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
}
#nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }
#navigator-toolbox > #PersonalToolbar{
transform-origin: 0px var(--uc-navbar-height);
position: relative;
}
:root[sessionrestored] #urlbar[popover]{
opacity: 0;
pointer-events: none;
transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms);
transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2);
transform: rotateX(89.5deg);
}
#mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){
opacity: 1;
pointer-events: auto;
transition-delay: 100ms;
transform: rotateX(0deg);
}
:root[sessionrestored]:not([customizing]) #navigator-toolbox{
margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height));
}
/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */
:root[sizemode="fullscreen"] #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{
min-height: initial !important;
max-height: initial !important;
visibility: hidden !important
}
#PersonalToolbar[collapsed="true"] #PlacesToolbarItems > *,
:root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{
visibility: hidden !important;
}
/* If bookmarks toolbar is collapsed on startup, then no items are generated, and we need to set some height for it */
#PlacesToolbarItems:empty{
height: var(--uc-bm-height);
}
/* Selected tab needs higher z-index now to "hide" the broder below it */
.tabbrowser-tab[selected]{ z-index: 3 !important; }
/* Show when cursor is over main menu popup - this requires :has selector support */
#mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox > .browser-toolbar{
transition-delay: 100ms !important;
transform: rotateX(0);
}
/* SELECT TOOLBAR BEHAVIOR */
/* Comment out or delete one of these to disable that behavior */
/* Show when urlbar is focused */
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox > #nav-bar:focus-within{
transition-delay: 100ms !important;
transform: rotateX(0);
}
/* Show when cursor is over the toolbar area */
#navigator-toolbox:hover > .browser-toolbar{
transition-delay: 100ms !important;
transform: rotateX(0);
}
/* This makes the tab notification box show immediately below tabs, otherwise it would break the layout */
#navigator-toolbox > div{ display: contents }
:where(#titlebar,#navigator-toolbox > #TabsToolbar,#navigator-toolbox > #toolbar-menubar,#tab-notification-deck,.global-notificationbox){
order: -1;
}
:root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{
margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)) !important;
z-index: auto !important;
}
@media (-moz-bool-pref: "browser.fullscreen.autohide"){
:root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{
margin-top: calc(1px - var(--tab-min-height) - 2 * var(--tab-block-margin)) !important;
}
}
/* Set the following pref to enable compatibility with multi-row_bookmarks.css */
@media (-moz-bool-pref: "userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"){
#navigator-toolbox{ margin-bottom: var(--uc-navbar-height) !important; }
#PersonalToolbar:not([customizing]){
min-height: 0 !important;
margin-bottom: 0;
height: 0;
overflow-y: visible !important;
z-index: 2;
padding-inline: 0 !important;
}
#personal-bookmarks{
background: inherit;
height: min-content;
}
#PlacesToolbarDropIndicatorHolder{
pointer-events: none !important;
}
}
/* Hide Tab Bar With Only One Tab */
/* #TabsToolbar { visibility: collapse !important; } */
All Replies (2)
Where do you usually get your style rules? Major repositories like the following usually update them whenever Firefox changes significantly:
Hi there jscher2000!
First many thanks for all your help and time.
I'll get my style rules and css rules from here: https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome
And yesterday evening, very late, I finally found one which does hide everything. So problem solved, I'm so happy for this, after more than 2 days of searching the internet,...
THANK YOU! Marc.
You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.