Tab Bar Placement Issue After Firefox 133 Update
Today, my Firefox updated to version 133. I had the Tab Bar below the Address Bar and under the Bookmarks Toolbar - configured via userChrome.css. After the update, my Ta… (jàng ci lu gën a bari)
Today, my Firefox updated to version 133. I had the Tab Bar below the Address Bar and under the Bookmarks Toolbar - configured via userChrome.css. After the update, my Tab Bar is above the Address Bar. Could you please advise what changes I need to make in userChrome.css to place the Tab Bar below the Bookmarks Toolbar? Thank you.
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Modify to change window drag space width */ /* Use tabs_on_bottom_menubar_on_top_patch.css if you have menubar permanently enabled and want it on top
- /
/* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it. Additionally on Linux, you may need to get: linux_gtk_window_control_patch.css
- /
- root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
- root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
- toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
- TabsToolbar > .titlebar-buttonbox-container{
position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 40px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
- root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; } }
- root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }
- toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
- navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
- titlebar{
order: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 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; }
@media (-moz-gtk-csd-close-button){ .titlebar-button{ flex-direction: column } }
/* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
- navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */
/* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */
- root{ --uc-window-control-width: 0px !important }
- navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }
- toolbar-menubar{
position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 29px; width: 100%; overflow: hidden; }
- toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }
- toolbar-menubar > [flex]{ flex-grow: 100; }
- toolbar-menubar > spacer[flex]{
order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); }
- toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }
- toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; --tab-min-width: 80px !important;
- tabbrowser-tabs {
width: 100vw !important; }
- main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
.tab-background { border-radius: 8px 8px 0px 0px !important; border-image: none !important; } .tab-line { display: none; }
.tab-close-button { color: red!important; }