본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 Twitter의 @FirefoxSupport 및 Reddit의 /r/firefox 채널을 활용하세요.

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

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; } */
첨부된 스크린샷

모든 댓글 (2)

more options

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

도움이 되셨습니까?

more options

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.

도움이 되셨습니까?

질문하기

글에 답글을 달기 위해서는 계정으로 로그인해야만 합니다. 계정이 아직 없다면 새로운 질문을 올려주세요.