为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

UserChrome CSS Hide Tabstoolbar when only one TAB Firefox 128.4.0esr

more options

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;

}

  1. 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 */

}

  1. PersonalToolbar{
 position: fixed;
 display: flex;
 bottom: 0;
 width: 100vw;
 border-top: 1px solid var(--chrome-content-separator-color);

}

  1. personal-toolbar-empty + toolbarspring,
  2. 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;

}

  1. personal-toolbar-empty{ visibility: hidden; }
  2. PersonalToolbar .toolbarbutton-1{
 align-items: center !important;

}

  1. 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. */

  1. PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none }
  1. statuspanel{
 padding-top: 0 !important;
 text-shadow: none !important;

}

  1. 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 */

  1. statuspanel-inner{ background-color: var(--toolbar-accent-color) }

/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/

  1. statuspanel{
 color: lightpink; /* color used to indicate insecure http:// links */
 z-index: -1;
 visibility: visible !important;
 opacity: 1 !important;

}

  1. statuspanel[inactive] #statuspanel-label{ visibility: hidden }

.browserStack > #statuspanel[inactive]::before,

  1. statuspanel[inactive] > #statuspanel-inner::before{
 content: "Done";
 display: flex;
 margin-top: 2px;
 color: var(--toolbar-field-color, black) !important;

}

  1. statuspanel[type="status"] { color: skyblue }
  1. 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 */

  1. 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;

}

  1. navigator-toolbox,
  2. sidebar-box,
  3. sidebar-main,
  4. sidebar-splitter,
  5. 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;

}

  1. PlacesToolbarItems > .bookmark-item,
  2. OtherBookmarks,
  3. 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;

}

  1. nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }
  1. 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);

}

  1. mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox #urlbar[popover],
  2. navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
  3. 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,
  1. PersonalToolbar[collapsed="true"]{
 min-height: initial !important;
 max-height: initial !important;
 visibility: hidden !important

}

  1. 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 */

  1. 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 */

  1. 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 */

  1. nav-bar:focus-within + #PersonalToolbar,
  2. navigator-toolbox > #nav-bar:focus-within{
 transition-delay: 100ms !important;
 transform: rotateX(0);

}

/* Show when cursor is over the toolbar area */

  1. 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 */

  1. 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; } */
已附加屏幕截图

所有回复 (1)

more options

Where do you usually get your style rules? Major repositories like the following usually update them whenever Firefox changes significantly:

有帮助吗?

我要提问

您需要登录才能回复。如果您还没账号,可以提出新问题