Firefox menu bar collapse for Tree Style Tabs

userChrome.css

/*
Made for Firefox version 134.0.2, and designed to be used with the Tree Style Tabs extension

This css collapses the menu bar and horizontal tabs at the top of the browser,
and moves the minimize, restore, and close buttons to the right of the hamburger icon button

This uses some code from the TST wiki, https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules
The examples there did not work for me or had pixel-offset issues, so the below is a result of extensive modifications

Known issue: when the browser window is very small, the top-right buttons overlap with the search bar 
*/

:root {
	--thin-tab-width: 1px;
	--wide-tab-width: 250px;
}
	
/* Hide default horizontal tabs above search bar */
#TabsToolbar {
	display: none !important;
}

/* Sidebar min and max width removal */
#sidebar {
	max-width: none !important;
	min-width: 0px !important;
}

/* Hide splitter when using Tree Style Tabs. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
	display: none !important;
}

/* Hide sidebar header when using Tree Style Tabs. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
	visibility: collapse;
}

/* Shrink sidebar until hovered when using Tree Style Tabs. */
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
	min-width: var(--wide-tab-width) !important;
	max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
	position: relative !important;
	transition: all 200ms !important;
	min-width: var(--thin-tab-width) !important;
	max-width: var(--thin-tab-width) !important;
	padding-right: var(--thin-tab-width);
	margin-right: calc(var(--thin-tab-width) * -1);
	background-color: transparent;
	z-index: 3;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
	/* transition: all 200ms !important; */
	min-width: var(--wide-tab-width) !important;
	max-width: var(--wide-tab-width) !important;
	margin-right: calc(var(--wide-tab-width) * -1) !important;
	padding-right: 0px;
	z-index:3;
}

/* Adding empty space for buttons */
#nav-bar {
	/* This is equivalent to the width of the three buttons in .titlebar-buttonbox-container, 45.5 * 3    */
	margin-right: 136.5px;
}

/* 15px for dragging whole window by mouse*/
#titlebar {
	appearance: none !important;
	height: 15px;
}

/* Fix for main menu calling by Alt button */
#titlebar > #toolbar-menubar {
	margin-top: 10px;
}

/* Move minimize/restore/close buttons to empty space */
#toolbar-menubar {
	visibility: collapse;
}

/* Position the button box which contains the Minimize, Window, and Close buttons */
.titlebar-buttonbox-container {
	position: absolute;
	height: 40px;
	right: 0px;
	top: 0px;
	visibility: visible !important;
}

/* Hide the default items in the menu bar, including File, Edit, View, Help, etc. */
#menubar-items {
	display: none !important;
}