This code will hide Firefox's horizontal tab strip in favour of solely using Tree Style Tab's vertical tabs. It will leave space for window buttons on the top left in a space of the same colour as the toolbar. This code is also optimised for full screen and both dark and light mode. Since the code is .css only, it does not require setting up autoconfig.js.
Tested on: macOS 11 (Big Sur), macOS 12 (Monterey), macOS 13 (Ventura), Windows 11, and Arch Linux (running i3wm).
| /* Change the sidebar colour to match Proton colour scheme in dark and light mode */ | |
| @media (prefers-color-scheme: dark) { | |
| #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] { | |
| --sidebar-background-color: #1C1B22 !important; | |
| } | |
| } | |
| @media (prefers-color-scheme: light) { | |
| #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] { | |
| --sidebar-background-color: #F0F0F4 !important; | |
| -moz-appearance: none !important; /* Remove translucency of the sidebar-box */ | |
| } | |
| } | |
| #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { | |
| border-bottom: none !important; | |
| } | |
| /* Hide tab strip but keep space for window buttons */ | |
| #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| #main-window:not([tabsintitlebar="true"]) #TabsToolbar { | |
| visibility: collapse !important; | |
| } | |
| .tab { | |
| margin-left: 1px; | |
| margin-right: 1px; | |
| } | |
| :root { | |
| --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */ | |
| --tab-min-height: 25px !important; | |
| } | |
| :root #tabbrowser-tabs { | |
| --tab-min-height: 25px !important; | |
| } | |
| #TabsToolbar { | |
| height: var(--tab-min-height) !important; | |
| background-color: var(--toolbar-bgcolor) | |
| } | |
| #TabsToolbar[inFullscreen="true"] { /* Do not display window buttons space in full screen */ | |
| display:none!important; | |
| } | |
| /* Shift the position of the window buttons for better symetry */ | |
| .titlebar-buttonbox { | |
| margin-left: 6px !important; | |
| } | |
| /* Make Accessibility and Private Browsing Indicator smaller to fit the tab bar */ | |
| .accessibility-indicator, .private-browsing-indicator { | |
| width: 17px !important; | |
| height: 17px !important; | |
| margin-right: 4px !important; | |
| } | |
| /* Dim UI elements when window is not in focus */ | |
| /* Append `:not(:hover):-moz-window-inactive` after element */ | |
| hbox#urlbar-input-container:not(:hover):-moz-window-inactive, vbox#sidebar-box.chromeclass-extrachrome:-moz-window-inactive { | |
| opacity: 0.5; | |
| } |