Created
November 11, 2025 18:43
-
-
Save rtgibbons/8cf727b60ec7770ac75b48f5be50d316 to your computer and use it in GitHub Desktop.
Firefox 145 UX Tweaks for vertical tabs with sideberry
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #root.root {--tabs-margin: 3px;} | |
| #root.root {--tabs-height: max(32px, calc(1.7 * 1em));} | |
| #root.root {--general-border-radius: 8px;} | |
| #root.root {--frame-bg: rgb(30,30,30);} | |
| #root.root {padding-top: 12px;} | |
| .Tab { | |
| margin: 0; | |
| width: calc(100% - var(--tabs-margin) / 2 ); | |
| } | |
| .Tab > .body { | |
| padding-block-end: 1.4685px; | |
| padding-block-start: 2.9374px; | |
| padding-inline-end: 8.811px; | |
| border-top-right-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| } | |
| .Tab:first-of-type { | |
| margin-top: 2px; | |
| } | |
| .Tab[data-pin="false"] .ctx { | |
| top: 0; | |
| right: 0px; | |
| width: 1.5px; | |
| height: 100%; | |
| } | |
| .Tab .body:after { | |
| top:calc(-10% - var(--tabs-margin)); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Vertical Tabbar | |
| */ | |
| /* Hides the tabs in sidebar, but not sidebar functionality when in vertical tabs */ | |
| #vertical-tabs { | |
| /* If hidden, the vertical tabbar sidebar settings / shortcuts will stay on bottom, if collapse, then moved to top */ | |
| visibility: collapse !important; | |
| } | |
| /* Resize the facotry sidebar to 42px, the width for asingle roll of icons */ | |
| #sidebar-main { | |
| width: 49px !important; | |
| } | |
| /* Removes box-shadow from secondary side-bar now that vertical tabs is primary */ | |
| /* set the revamped sidebar background color to same as browser ux */ | |
| #sidebar { | |
| @media -moz-pref("sidebar.revamp") { | |
| box-shadow: none !important; | |
| background-color: var(--toolbar-bgcolor) !important; | |
| } | |
| } | |
| #sidebar-splitter { | |
| width: 0 !important; | |
| border: 0 !important; | |
| } | |
| #sidebar-panel-header { | |
| visibility: collapse !important; | |
| } | |
| #sidebar-tools-and-extensions-splitter { | |
| visibility: collapse; | |
| } | |
| #sidebar-launcher-splitter { | |
| display: none; | |
| } | |
| #tabbrowser-tabbox .browserStack { | |
| background: rgb(30, 30, 30); | |
| } | |
| #tabbrowser-tabbox .browserStack > browser { | |
| border-radius: 9px !important; | |
| transition: margin 0.2s; | |
| border: 1px solid rgb(21, 20, 26); | |
| } | |
| /* | |
| * Horizontal Tabbar | |
| */ | |
| /* #navigator-toolbox { | |
| background-color: var(--toolbar-bgcolor) !important; | |
| border: none !important; | |
| } | |
| #TabsToolbar > .titlebar-buttonbox-container { | |
| position: relative; | |
| top: 8px; | |
| } | |
| #TabsToolbar > .toolbar-items { | |
| visibility: collapse; | |
| } | |
| #nav-bar { | |
| position: relative; | |
| top: -1em; | |
| margin-left: 91px; | |
| } | |
| */ | |
| /** | |
| * Sidebar addon customization for sideberry | |
| */ | |
| /* | |
| #PlacesToolbarItems { | |
| display: flex; | |
| justify-content: center; | |
| padding-bottom: 3px; | |
| } | |
| #sidebar-header:has(label[value="Tabs"]) { | |
| display: none; | |
| } | |
| #sidebar-splitter { | |
| border: none !important; | |
| } | |
| #tabbrowser-tabbox .browserStack { | |
| background: rgb(30,30,30); | |
| } | |
| #tabbrowser-tabbox .browserStack > browser { | |
| border-radius: 9px !important; | |
| transition: margin 0.2s; | |
| border: 1px solid rgb(21,20,26); | |
| } */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment