Firefox TreeStyleTabs UI tweaks

TreeStyleTabsCustomCSS.css

#tabbar-container {
	--color-red-05: #ffe8e8;
	--color-red-10: #ffbdc5;
	--color-red-20: #ff9aa2;
	--color-red-30: #f37f98;
	--color-red-50: #d7264c;
	--color-red-60: #ac1e3d;
	--color-red-70: #8a1831;
	--color-red-80: #690f22;
	--button-background-color-destructive-inverted-hover: light-dark(var(--color-red-10), var(--color-red-60));
	--button-background-color-destructive-inverted-active: light-dark(var(--color-red-05), var(--color-red-70));
	background: var(--theme-colors-toolbar);

	* {
		box-shadow: none !important;
	}

	#tabbar {
		border: none !important;
		counter-reset: counter-tabs-active counter-tabs-all;
	
		tab-item {
			/* border-color: var(--theme-colors-toolbar);
			background-color: var(--theme-colors-toolbar_field); */
			
			& {
				counter-increment: counter-tabs-all;
			}
			&:not(.discarded) {
				counter-increment: counter-tabs-active counter-tabs-all;
			}
			

			/* &.active {  
				background-color: var(--theme-colors-toolbar_field_focus);
			} */
			&.unread .label {
				font-style: italic !important;
			}
			&[data-child-ids] .label {
				font-weight: bold;
			}
			.highlighter::before {
				opacity: 1;
				transform: none !important;
				background: transparent;
			}
			&:not(.discarded) {
				.highlighter::before {
					background: var(--tab-surface-active);
				}
			}
			
			:root[data-label-overflow="fade"] & tab-label.overflow {
				mask-image: linear-gradient(to left, transparent 0px, black 1em); /* reduced from 2em to 1em */
			}
			tab-closebox {
				display: none !important;

				&::before {
					border-radius: 0;
				}
		
				&:hover::before {
					background-color: var(--button-background-color-destructive-inverted-hover) !important;
					opacity: 1 !important;
				}
				&:active::before {
					background-color: var(--button-background-color-destructive-inverted-active) !important;
					opacity: 1 !important;
				}
			}
			&:hover tab-closebox {
				display: block !important;
			}
		}
	}
	.after-tabs {
		.newtab-action-selector-anchor {
			opacity: 1 !important;
		}
		.newtab-button {
			--tab-count-text: counter(counter-tabs-active) "/" counter(counter-tabs-all) " tabs";
	
			&::before {
				content: var(--tab-count-text);
				pointer-events: none;
				  
				position: absolute;
				left: 0.5em;
			}
		}
	}
}

userChrome.css

#TabsToolbar{
	visibility: collapse;
}
#nav-bar {
	/* Replicate tabbar color, needed for private mode */
	background-color: var(--tabpanel-background-color) !important;

	> .titlebar-buttonbox-container{
		display: flex !important;
	}
	> .titlebar-spacer {
		&[type="pre-tabs"] {
			display: none !important;
		}
		&[type="post-tabs"] {
			display: flex !important;
		}
	}
}
/* Hide sidebar title */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
	display: none;
}

userChrome.optionnal.css

/* Square & nomargin style */
* {
	border-radius: 0 !important;
}
.toolbarbutton-1 {
	-moz-box-align: stretch !important;
	height: 34px !important;
	width: 34px !important;
}
toolbar .toolbarbutton-1 {
	> .toolbarbutton-icon,
	> .toolbarbutton-text,
	> .toolbarbutton-badge-stack
	{
		height: 34px !important;
		width : 34px !important;
		padding: var(--toolbarbutton-inner-padding) !important;
		--toolbarbutton-inner-padding: 8px;
	}
}
#urlbar {
	--urlbar-height: 34px !important;
	padding-left: 5px;
	padding-right: 5px;
}
.subview-subheader,
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list
.toolbarbutton-1
{
	--arrowpanel-menuitem-margin: 0 !important;
}
.panel-subview-body {
	padding: 0 !important;
}


/* Colors */
.sidebar-splitter {
	border-color: var(--lwt-accent-color) !important;
}
#TabsToolbar, #toolbar-menubar {
	background-color: var(--toolbar-bgcolor) !important;
}
findbar {
	background-color: var(--toolbar-bgcolor) !important;
}
.findbar-container {
	&, & > * {
		color: var(--menu-color) !important;
	}
}