userchrome.css Firefox 100-ish+ MacOS Dark mode browser.uidensity = 1

userChrome.css

/*
    @replete's userChrome.css
    https://gist.github.com/replete/ba62b8bc9cf61c1e1f8a2ac2eb3907f9

    multi-row styles taken from:
    https://github.com/MrOtherGuy/firefox-csshacks
    
    compact toolbar styles stolen from somewhere before I decided to do a better job of it
    
    Tweaked these two contributions a bit, but can't remember what I did. My styles are at the bottom

    This is designed for MacOS, using Dark Mode, with `browser.uidensity` set to `1` in `about:config`.
    If it looks kooky in linux/windows then it probably just needs a load of pixel values replacing with
    something like calc(--css-variable-name) .
*/


/* Multi-row tabs (found at https://github.com/MrOtherGuy/firefox-csshacks) */

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/

/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */

:root {
	--multirow-n-rows: 10;
	--multirow-tab-min-width: 100px;
	--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */

/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */

/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */

#tabbrowser-tabs {
	min-height: unset !important;
	padding-inline-start: 0px !important;
}

@-moz-document url(chrome://browser/content/browser.xhtml)
{
	#scrollbutton-up ~ spacer,
	#scrollbutton-up,
	#scrollbutton-down {
		display: var(--scrollbutton-display-model, initial);
	}

	scrollbox[part][orient="horizontal"] {
		display: flex;
		flex-wrap: wrap;
		overflow-y: auto;
		max-height: calc(
			(var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) *
				var(--multirow-n-rows)
		);
		scrollbar-color: currentColor transparent;
		scrollbar-width: thin;
		scroll-snap-type: y mandatory;
	}
}

.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox {
	overflow: -moz-hidden-unscrollable;
	display: block;
	--scrollbutton-display-model: none;
}

.tabbrowser-tab {
	scroll-snap-align: start;
}

#tabbrowser-tabs .tabbrowser-tab[pinned] {
	position: static !important;
	margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]) {
	min-width: var(--multirow-tab-min-width) !important;
	flex-grow: var(--multirow-tab-dynamic-width);
	/*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
	/*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack {
	width: 100%;
	height: 100%;
}

/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button {
	margin-bottom: 0 !important;
}

#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after {
	display: none !important;
}

/*
 * Removes the side borders from active and inactive tabs.
 *
 * Contributor(s): Madis0
 */

.tabbrowser-tab::after,
.tabbrowser-tab::before {
	border-left: none !important; /* Remove borders from inactive tabs */
}

/* Show X on hover tab in multiline */
.tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
	display: -moz-box !important;
}

/* Toolbar tweaks */
#main-window[uidensity="compact"] {
	--toolbarbutton-outer-padding: 2px !important;
	--toolbarbutton-inner-padding: 3px !important;
	--bookmark-block-padding: 1px !important;
}

#main-window[uidensity="compact"] #urlbar-search-splitter {
	min-width: 1px !important;
}
#main-window[uidensity="compact"] #PanelUI-menu-button {
	padding-inline-end: 5px !important;
}



/*** Remove items from image context menu ***/

/* Email Image... */
#context-sendimage, 
/* Set Image as Desktop Background... (and preceding separator) */
#context-sep-setbackground, #context-setDesktopBackground
{
  display: none !important;
}


/*
  This is designed for dark mode MacOS with browser.uidensity = 1 set in about:config
*/

/* Line up tabs with urlbar configured with back/next/reload on compact uidensity: */
.titlebar-spacer[type="pre-tabs"] {
	width: 21px !important;
}

/* Moooar tab space at right */
.titlebar-spacer[type="post-tabs"] {
	width: 23px !important;
}

/* Shorten gap between pinned tabs and normal */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
	margin-inline-start: 5px !important;
}
  
/* 
  Use the built-in purple tracking protection icon if page is valid
  padlocks + shields are similar symbols and I mixed them up a lot
*/
#nav-bar:not([urlbar-exceeds-toolbar-bounds=true]) #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container:not(:hover) > #tracking-protection-icon-box > #tracking-protection-icon {
	list-style-image: url(chrome://browser/skin/tracking-protection-active.svg) !important;
}
  
/* Improve urlbar boundary legibility */
#urlbar-background {
	border: 1px solid #3C4151 !important;
}

/* Disable urlbar bookmark star because keyboard shortcuts */
#star-button-box {
	display: none;
}
  
/* Make page urlbar page zoon less ugly */
#urlbar-zoom-button:not(:hover) {
	background: transparent !important;
	color: #bbb !important;
}
  
/* Fixes the gap between tab rows */
#tabbrowser-tabs .tabbrowser-tab {
	height:34px !important;
}
#TabsToolbar {
	padding-bottom:4px
}
.tabbrowser-tab .tab-close-button {
  /* Fix close button right alignment */
	transform: translate(1px,0) !important;
	height:23px !important;
}

/* gap above tabs */
#tabbrowser-tabs {
	padding-top:2px !important;
}

/* alignment fix */
.tabbrowser-tab[first-visible-tab=true] {
padding-left:2px !important
}

/* alignment fix */
.tab-label-container .tab-text {
	transform:translate(0,-1px)
}

/* Multi-container tab colour (delete if you want the solid color strip back) */
.tabbrowser-tab .tab-context-line {
	height: 29px !important; 
	margin:0 !important;
	border-radius: 4px !important;
	background-color: transparent !important;
	background: radial-gradient(ellipse farthest-side at 15% -75%, var(--identity-icon-color) 0%, transparent 100%);
  opacity:0.8
}
.tabbrowser-tab[pinned=true] .tab-context-line {
  background: linear-gradient(0deg, transparent 60%, var(--identity-icon-color) 140%)
}

.tabbrowser-tab[selected=true] .tab-context-line {
  opacity:1;
}
.tabbrowser-tab:hover:not([selected=true) .tab-context-line {
	background: radial-gradient(ellipse farthest-side at 50% 0%, var(--identity-icon-color) 0%, transparent 100%);
  opacity:1;
}

replete darkmode compact FF v0.2 (mac)

userchrome.webm

Compact Darkmode Multi-row tabs userChrome.css for Firefox-based browsers

Main features

• Compacted UI
• Dynamic multi-row tabs
• Multi-Account Container tab styles
• Various tweaks / alignments

Multi-row tabs are pretty useful, instantly showing your current session history. Drag and drop tab arrangement is kinda borked on the extra tab rows but it's a decent tradeoff. Comment out what you don't want ofc.

Firefox Multi-Account Containers gets used a lot so I restyled the colored line for background gradients.

It should work on linux/win but I'd expect some misalignments. When I install linux again I'll probably fix this, probably just a few calc() replacements

Screenshots

single tab mode

Multi-line tabs are actually pretty handy as a session history and in particular work well for secondary portrait displays

Features

• tabs: Dynamic multi-row tabs (caveat: tab ordering on new lines is broken and can't be fixed)
• tabs: Compact
• tabs: Aligned tabs with searchbar
• tabs: Container tabs now use background gradients to show the identity colour
• titlebar: Reclaimed wasted space in titlebar
• extensions/menubar: Compacted
• urlbar: Removed bookmarks urlbar button (use CMD/CTRL+D)
• urlbar: Page zoom indicator tweak
• urlbar: Tracking protection icon uses the purple version to prevent mix up with the padlock (similar symbol meaning)
• urlbar: Increased searchbar contrast as there's a lot of grey going on and it gets muddy with less padding on compact-ed searchbar
• contextmenu: Removed 'Email Image' (haven't used this once since Firefox was released)
• contextmenu: Removed 'Set Image as Desktop Background' (again..)