Fancy Side Tabs in Firefox

Tree Style Tab.css

/* sync animation transitions */
.tab, .favicon, .twisty, .contextual-identity-marker, .newtab-button-box, .label {
    transition: all 500ms ease-in-out 400ms, background-color 200ms ease-in-out !important;
}
html:hover .tab, html:hover .favicon, html:hover .twisty, html:hover .newtab-button-box, html:hover .label {
    transition: all 400ms ease-in-out, background-color 200ms ease-in-out !important;
}

html:not(:hover) .tab {
    margin-left: 0 !important;
    border-left-width: 0px !important;
}
html:not(:hover) .twisty, html:not(:hover) .label {
    opacity: 0;
}

html:not(:hover) .favicon {
    margin-left: -12px;
}
.contextual-identity-marker {
    left: 0px;
}
html:not(:hover) .newtab-button-box {
    opacity: 0;
    max-height: 0px;
}
/* various style tweaks */
.active-marker {
    opacity: 0;
}
.tab:not(.active):not(:hover) {
    background-color: #323234;
}

userChrome.css

#TabsToolbar {
  visibility: collapse;
}
#nav-bar {
  padding-left: 75px;
}
#titlebar-buttonbox-container {
  margin-top: 7px;
}

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


/* Remove below if not using TreeStyleTab extension */

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

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
	--thin-tab-width: 30px;
	--wide-tab-width: 200px;
}
#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"] {
	overflow: hidden !important;
	position: relative !important;
	transition: all 500ms ease-in-out 400ms !important;
	min-width: var(--thin-tab-width) !important;
	max-width: var(--thin-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:focus-within,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
	transition: all 500ms ease-in-out !important;
	min-width: var(--wide-tab-width) !important;
	max-width: var(--wide-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([positionend="true"]):focus-within,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([positionend="true"]):hover {
	margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"][positionend="true"]:focus-within,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"][positionend="true"]:hover {
	margin-left: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

userChrome CSS is pretty much entirely taken from reddit user TanzNukeTerror: https://www.reddit.com/r/FirefoxCSS/comments/7mwfoi/my_notquite_singlebar_setup_finally_happy_with/