/* 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. */ /*= Tabbar - Move to bottom ==================================================*/ #titlebar{ order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; --tabs-navbar-shadow-size: 0px; } #tab-notification-deck { order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; } #TabsToolbar .titlebar-spacer { display: none; } @include Option("userChrome.tab.on_bottom.above_bookmark") { #PersonalToolbar { order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; } } @include NotOption("userChrome.tab.on_bottom.above_bookmark") { @include Option("userChrome.tab.connect_to_window") { @include Option("userChrome.tab.color_like_toolbar") { #navigator-toolbox { border-bottom-color: var(--toolbar-bgcolor) !important; /* Original: 1px solid var(--chrome-content-separator-color); */ } } } } /*= Windows Control - Move to toolbar ========================================*/ :root { --uc-titlebar-padding: 0px; } @include OS($win) { :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); right:0; height: 40px; } /* where window controls are on left */ @include OS($mac) { :root{ --uc-titlebar-padding: 0px !important; } .titlebar-buttonbox-container{ left:0; right: unset !important; } } #navigator-toolbox { padding-top: var(--uc-titlebar-padding) !important; } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { height: 32px; } #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; @include OS($mac) { margin-block: 10px; } } /* At Full Screen */ :root[sizemode="fullscreen"] #window-controls { position: fixed; display: flex; top: 0; right: 0; height: 40px; } :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { height: 32px; } @include Option("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; } /*= Navbar - Padding for window controls =====================================*/ /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ :root { --uc-window-control-width: 0px; /* Same as .titlebar-buttonbox-container - Space reserved for window controls */ --uc-window-drag-space-pre: 0px; /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */ --uc-window-drag-space-post: 0px; /* Same as .titlebar-spacer[type="post-tabs"] */ } :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 84px; /* 84px is default value of linux */ --uc-window-drag-space-pre: 30px; --uc-window-drag-space-post: 25px; } :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; /* Remove pre space */ } #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); border-inline-style: solid !important; border-inline-color: var(--toolbar-bgcolor); } /* Windows */ @include OS($win7, $win8) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 105px; } } @include OS($win10) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 138px; } } /* Use this pref to check Mac OS where window controls are on left */ /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ @include OS($mac) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 72px; } :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); border-inline-end-width: var(--uc-window-drag-space-pre); } :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, :root[sizemode="fullscreen"] #window-controls { right: unset; } } /*= Menubar - Always on top ==================================================*/ @include Option("userChrome.tab.on_bottom.menubar_on_top") { /* 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. */ :root { /* height if native titlebar is enabled, assumes empty menubar */ --uc-menubar-height: 20px; --uc-menubar-padding: 1px; /* FF's menubar padding */ --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); } :root[tabsintitlebar] { /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ --uc-menubar-height: 30px; } /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root:not([sizemode="fullscreen"]) { --uc-window-control-width: 0px !important; } /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ :root:not([sizemode="fullscreen"]) #nav-bar { border-inline-width: 0; } #navigator-toolbox{ -moz-window-dragging: drag; padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding)) !important; } :root[sizemode="fullscreen"] #navigator-toolbox { padding-top: 0px !important; } #toolbar-menubar { position: fixed; display: flex; top: var(--uc-titlebar-padding); height: var(--uc-menubar-height); width: 100%; overflow: hidden; } :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { height: var(--uc-menubar-height) !important; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ } #toolbar-menubar > .titlebar-buttonbox-container { height: 100%; order: 100; } #toolbar-menubar > [flex] { flex-grow: 100; } #toolbar-menubar > spacer[flex] { order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-post); } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px; } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { height: var(--uc-menubar-container-height); } :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container{ visibility: collapse !important; } :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: visible; } }