Last active
January 14, 2026 14:09
-
-
Save rtgibbons/8cf727b60ec7770ac75b48f5be50d316 to your computer and use it in GitHub Desktop.
Firefox 147 UX Tweaks (UserChrome.css) for vertical tabs with sideberry (Styles Editor)
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:-moz-window-inactive {--frame-bg: rgb(31,30,37);} | |
| #root.root {--frame-bg: rgb(28,27,34);} | |
| #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; | |
| } | |
| border-radius: 0 !important; | |
| outline: none !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; | |
| } | |
| /* Adds rounded corners to the browser, one is the is the viewport, the other is for the box-shadow */ | |
| /* In about:config, you can now enable sidebar.revamp.round-content-area */ | |
| /* .browserContainer, | |
| .browserContainer browser { | |
| border-top-left-radius: 15px; | |
| } */ |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Enable Firefox Vertical Tabs and enable
sidebar.revamp.round-content-areain about:config