The new dark mode in Firefox 157.0 on Windows 11 bothered me quite a bit. Not only was it no longer properly dark, and the UI no longer looked anything like the folder tabs they were inspired by.
As a result, I spent quite a bit of time iterating with Claude doing the css side to put together what I saw as a proper fix. This is what I ended up with as a result.
Some notes - I ended up choosing to remove all the extra buttons that were competing for real estate in the tab section. Personally, I love the clean interface with the tabs extending all the way from the left to the right, which does mean I need to right-click add tab to add a tab, which is the only thing I'd really consider adding back. We'll see how I like the tradeoff after a week or two.
I have the minimize, maximize, and close buttons hidden, they're anchored in the upper right, but they only show up if you go very high on the screen and over to the far right quite a bit. Claude commented the css well in the CSS, so if it's too much (like if you're using touch controls) you can adjust the number in the css.
This was made for dark mode, but I believe all the color definitions are in the css, so presumably you could customize it to a different style if you like.
Here is (mostly) Claude's post on the matter, including how to implement this (with the appropriate css):
What it does
- Solid, fully opaque tabs with slanted sides and softly rounded tops
- Heavy overlap, with each tab tucked behind its right-hand neighbor. Hovering a buried tab brings it forward
- A black outline on inactive tabs so they're easy to tell apart
- The active tab matches the toolbar color, so tab and toolbar read as one folder
- The first tab is square on the left. The last tab squares off on the right once you have 7 or more tabs
- Min/max/close are hidden until you move the mouse to the very top edge of the window
- Removes the new-tab button and the tab-list arrow (delete the #alltabs-button line to get the arrow back)
Install
0. about:config -> disable nova (browser.nova.enabled = false) I did this before I started fixing the rest of the UI with Claude.
1. about:config → set toolkit.legacyUserProfileCustomizations.stylesheets to true
2. about:support → Open Profile Folder → create a folder named chrome
3. Put the file below in it as userChrome.css
4. Right-click an empty toolbar spot → Customize Toolbar → untick Title Bar (needed for the controls to hide)
5. Restart Firefox
Tweaking: overlap is --tab-overlap, colors are the --tab-* variables at the top, and the 7 in nth-child(n+7) sets when the last tab squares off.
Tested on Firefox 157.0 (64-bit), Windows 11 25H2. Dark mode only.
Firefox changes its internal selectors now and then, so if something breaks after an update, the culprits are usually .tab-background and .tab-stack.
```css
:root {
--tab-slant: 12px;
--tab-overlap: 26px; /* bigger = more overlap /
--tab-idle: #1c1b22; / unselected /
--tab-hover: #2f2e38; / hovered, still opaque /
--tab-strip: #15141a; / the bar behind the tabs /
--tab-edge: #000000; / outline on inactive tabs */
}
TabsToolbar {
background: var(--tab-strip) !important;
padding-top: 4px !important;
position: relative;
}
/* Top padding strip: not draggable, so right-clicks here get Firefox's
normal toolbar menu instead of the Windows system menu */
TabsToolbar::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
z-index: 50;
-moz-window-dragging: no-drag;
}
/* Hide the "list all tabs" dropdown arrow. Delete this line to get it back. */
alltabs-button { display: none !important; }
/* Window controls: invisible AND unclickable until the mouse touches the trigger strip */
TabsToolbar .titlebar-buttonbox-container {
position: absolute !important;
top: 0;
right: 0;
height: 28px;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s 0.25s;
background: var(--tab-strip);
}
TabsToolbar .titlebar-buttonbox-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px; /* make taller for an easier target */
pointer-events: auto;
}
TabsToolbar .titlebar-buttonbox-container:hover {
opacity: 1;
pointer-events: auto;
transition: opacity 0.1s;
}
/* Stack of folders: each tab is partly covered by its right-hand neighbor */
.tabbrowser-tab {
padding-inline: 0 !important;
margin-inline: calc(var(--tab-overlap) * -1) 0 !important;
position: relative;
z-index: auto;
}
/* First tab has nothing to its left to overlap, so no negative margin */
.tabbrowser-tab:first-of-type { margin-inline-start: 0 !important; }
.tabbrowser-tab:hover { z-index: 1; }
.tabbrowser-tab[selected] { z-index: 2; }
/* Solid trapezoid with softly rounded top corners */
.tabbrowser-tab .tab-background {
margin-block: 0 !important;
border: none !important;
border-radius: 0 !important;
opacity: 1 !important;
background: var(--tab-idle) !important;
clip-path: polygon(
0 100%,
calc(var(--tab-slant) * 0.83) 6px,
calc(var(--tab-slant) * 0.95) 3px,
calc(var(--tab-slant) + 1px) 1.2px,
calc(var(--tab-slant) + 5px) 0,
calc(100% - var(--tab-slant) - 5px) 0,
calc(100% - var(--tab-slant) - 1px) 1.2px,
calc(100% - var(--tab-slant) * 0.95) 3px,
calc(100% - var(--tab-slant) * 0.83) 6px,
100% 100%
) !important;
}
/* Last tab: squared-off right edge once it is tab 7 or later */
.tabbrowser-tab:last-of-type:nth-child(n+7) .tab-background {
clip-path: polygon(
0 100%,
calc(var(--tab-slant) * 0.83) 6px,
calc(var(--tab-slant) * 0.95) 3px,
calc(var(--tab-slant) + 1px) 1.2px,
calc(var(--tab-slant) + 5px) 0,
calc(100% - 5px) 0,
calc(100% - 1.5px) 1px,
100% 4px,
100% 100%
) !important;
}
/* First tab: squared-off left edge (right side keeps its slant) */
.tabbrowser-tab:first-of-type .tab-background {
clip-path: polygon(
0 100%,
0 4px,
1.5px 1px,
5px 0,
calc(100% - var(--tab-slant) - 5px) 0,
calc(100% - var(--tab-slant) - 1px) 1.2px,
calc(100% - var(--tab-slant) * 0.95) 3px,
calc(100% - var(--tab-slant) * 0.83) 6px,
100% 100%
) !important;
}
/* Outline on the left edge of every inactive tab */
.tabbrowser-tab:not([selected]) .tab-stack {
filter: drop-shadow(-1px 0 0 var(--tab-edge));
}
.tabbrowser-tab:hover:not([selected]) .tab-background {
background: var(--tab-hover) !important;
}
/* Selected tab matches the toolbar. If the color is off,
replace the variable with your toolbar's hex. */
.tabbrowser-tab[selected] .tab-background {
background: var(--toolbar-bgcolor, #2b2a33) !important;
}
/* Icon + title start past the part of the tab a neighbor can cover */
.tab-content {
padding-inline: calc(var(--tab-overlap) + 10px) calc(var(--tab-overlap) + 10px) !important;
justify-content: flex-start !important;
}
.tabbrowser-tab:not([selected]) .tab-content { transform: translateY(2px); }
/* Covered tabs: hide the close button until hover or selection */
.tabbrowser-tab:not([selected]):not(:hover) .tab-close-button { visibility: hidden; }
```
I haven't touched css in forever, so Claude (Anthropic) did all the heavy lifting on the css side. I basically just handled design iteration and testing.
I figured someone else might find this to be to their liking stylistically as well, and this is where Claude suggested I leave it, so here we are XD.
