/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/navbar_tabs_oneliner_tabs_on_left.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /*Make tabs and navbar appear side-by-side tabs on left */ /* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it */ :root[uidensity="compact"]{ --tab-block-margin: 2px !important; } /* Modify these to change relative widths or default height */ #navigator-toolbox{ --uc-navigationbar-width: 45vw; --uc-toolbar-height: 40px; --uc-urlbar-min-width: 50vw; /* minimum width for opened urlbar */ } #scrollbutton-up, #scrollbutton-down{ border-block-width: 2px !important; } /* Override for other densities */ :root[uidensity="compact"] #navigator-toolbox{ --uc-toolbar-height: 34px;} :root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 44px; } :root[uidensity="compact"] #urlbar-container{ --urlbar-container-height: var(--uc-toolbar-height) !important; padding-block: 0 !important; } :root[uidensity="compact"] #urlbar{ --urlbar-toolbar-height: var(--uc-toolbar-height) !important; } /* prevent urlbar overflow on narrow windows */ /* Dependent on how many items are in navigation toolbar and tabs-/nav-bar ratio - ADJUST AS NEEDED */ @media screen and (max-width: 1600px){ #urlbar-container{ min-width:unset !important } } :root[tabsintitlebar] #toolbar-menubar{ height: initial !important; } :root[tabsintitlebar] #toolbar-menubar[inactive] > :not(.titlebar-buttonbox-container){ opacity: 0; pointer-events: none; } :root[tabsintitlebar] #toolbar-menubar[inactive]{ margin-bottom: calc(0px - var(--uc-toolbar-height)); } #TabsToolbar > .titlebar-buttonbox-container, .titlebar-spacer[type="post-tabs"]{ display: none; } #TabsToolbar{ margin-right: var(--uc-navigationbar-width); --tabs-navbar-shadow-size: 0px; } #tabbrowser-tabs{ --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--tab-block-margin,0px)) !important; } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container{ min-height: var(--uc-toolbar-height) !important } #tabbrowser-tabs, .tabbrowser-tab[pinned]{ min-height: var(--tab-min-height) !important; } #nav-bar{ margin-left: calc(100vw - var(--uc-navigationbar-width)); margin-top: calc(0px - var(--uc-toolbar-height)); } /* Override style set in window_control_placeholder_support.css */ #nav-bar{ border-left-width: 0px !important } #nav-bar::before{ display:none !important } /* Rules specific to window controls on left layout */ @media (-moz-platform: macos), (-moz-gtk-csd-reversed-placement){ :root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{ width: var(--uc-window-drag-space-post) !important; display: flex !important; } #TabsToolbar > .titlebar-buttonbox-container{ display: flex; } } @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){ :root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{ width: var(--uc-window-drag-space-post) !important; display: flex !important; } #TabsToolbar > .titlebar-buttonbox-container{ display: flex; } } /* 1px margin on touch density causes tabs to be too high */ .tab-close-button{ margin-top: 0 !important } /* Make opened urlbar overlay the toolbar */ #urlbar[open]:focus-within{ min-width: var(--uc-urlbar-min-width,none) !important; right: 0 !important; left: auto !important; } /* Hide dropdown placeholder */ #urlbar-container:not(:hover) .urlbar-history-dropmarker{ margin-inline-start: -28px; } /* Fix customization view */ #customization-panelWrapper > .panel-arrowbox > .panel-arrow{ margin-inline-end: initial !important; }