userChrome.css

@import url("MrOtherGuy--firefox-csshacks/compact_extensions_panel.css");

@import url("datguypiko--Firefox-Mod-Blur/icons_in_main_menu.css");
@import url("datguypiko--Firefox-Mod-Blur/menu_icon_change_to_firefox.css");
@import url("datguypiko--Firefox-Mod-Blur/ublock-icon-change.css");
@import url("datguypiko--Firefox-Mod-Blur/white_github_icon_in_bookmarks.css");

@import url("ranmaru22--firefox-vertical-tabs/userChrome.css");

@import url("stonecrusher--simpleMenuWizard/userChrome.css");

@import url("helpimnotdrowning--icon-replacements/userChrome.css");

:root {
	--delay: 0.5s;
	--uc-toolbar-height: 0px;
	--uc-navbar-height: 43px;
	--theme-colors-popup: var(--toolbar-bgcolor);
	--theme-colors-popup-light: color-mix(in srgb, var(--theme-colors-popup), white 10%);
	--ease-out-exponential: cubic-bezier(0.16, 1, 0.3, 1);

	--uc-win-ctrl-vertical-offset: 7px !important;
	
	--normal-shadow-down: 0px 8px 10px 0px rgba(0, 0, 0, .14);
	--normal-shadow-right: 8px 0px 10px 0px rgba(0, 0, 0, .14);

	--nhnd-sidebar-width: 48px;
}

/* hide ff tabs bar */
.toolbar-items {
	visibility: hidden;
}

#navigator-toolbox {
	/* anchor bg for seamless transition into sidebar */
	background-position: left top !important;

	/* remove that stupid border on the bottom */
	border-bottom: 0px !important;

	/* oops something broke! */
	height: 43px !important;
}

#nav-bar {
	/* merge nav-bar and titlebar */
	background-color: transparent !important;
	position: absolute !important;
	padding-top: 3.5px !important;

	/* make space for mmc buttons */
	left: 0px !important;
	right: 99px !important;

	/* remove that stupid border on top */
	border-width: 0px 0px 0px 0px !important;
	border-top: 0px !important;
	border-bottom: 0px !important;
}

/* fix padding weirdness */
.browser-toolbar {
	padding: unset !important;
}

/* set height */
#TabsToolbar {
	/*height: 43px !important;*/
}

/* remove splitter, header */
#sidebar-splitter, #sidebar-header {
	visibility: collapse !important;
}

@media (-moz-platform: windows) {
	#navigator-toolbox {
		/* micro inconsistency */
		margin-top: 1px !important;
	}
}

@media (-moz-platform: linux) {
	/*
		From: MrOtherGuy/firefox-csshacks: Workaround for Firefox bug: Use
		Linux's own mmc buttons instead of built-in ones when using a theme
	*/	
	.titlebar-button{
		list-style-image: none !important;
		appearance: none !important;
	}
	
	.titlebar-button > .toolbarbutton-icon{
		appearance: auto !important;
		background: none !important;
		width: unset !important;
		height: unset !important;
	}
	
	.titlebar-min > .toolbarbutton-icon{
		-moz-default-appearance: -moz-window-button-minimize !important;
	}
	
	.titlebar-max > .toolbarbutton-icon{
		-moz-default-appearance: -moz-window-button-maximize !important;
	}
	
	.titlebar-restore > .toolbarbutton-icon{
		-moz-default-appearance: -moz-window-button-restore !important;
	}
	
	.titlebar-close > .toolbarbutton-icon{
		-moz-default-appearance: -moz-window-button-close !important;
	}

	/* Properly align MMC buttons on my personal install */
	.titlebar-min, .titlebar-max, .titlebar-restore {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	.titlebar-min {
		margin-bottom: 1px !important;
		padding-left: 10px !important;
	}

	.titlebar-close {
		padding-left: 0px !important;
		padding-right: 5px !important;
	}
}

/* patches for ranmaru22 */
#sidebar {
	width: 50px !important;
	height: calc(100vh - 43px) !important;
	left: 50px !important;
}

#sidebar-box {
	top: 27px !important;
}

/* make browser content smaller when tabs are shown */
#sidebar-box[sidebarcommand*="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden]) ~ #tabbrowser-tabbox {
	position: absolute !important;

	top: var(--uc-navbar-height) !important;
	left: var(--nhnd-sidebar-width) !important;
	
	width: calc(100vw - var(--nhnd-sidebar-width)) !important;
	height: calc(100vh - var(--uc-navbar-height)) !important;
}

@media print {
#sidebar-box[sidebarcommand*="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden]) {
	top: var(--uc-navbar-height) !important;
	left: 0px !important;

	width: 48px !important;
	min-width: 48px !important;
	height: calc(100vh - var(--uc-navbar-height)) !important;
	
	position: fixed !important;
	
	overflow: hidden !important;
	z-index: 999 !important;

	border-right: 1px solid var(--sidebar-border-color) !important;
	
	/* 2nd item unclips shadow */
	transition: all 0.2s ease, clip-path 0.2s ease !important;
	transition-delay: 0s !important;
	
	/*
		remove weird block on top of sidebar when on new tab page & bookmarks bar is
		set to "only show on new tab"
	*/
	padding-top: 0px !important;
	
	/*
		spacer to show the border from underneath (the navigator-toolbox border)
		since I couldn't figure out how to give the sidebar its own border
	*/
	top: -2px;
	
	box-shadow: var(--normal-shadow-right) !important;
	/*
		creates a clip mask like
		┌ 48px ┐
		│      41px
		100%   └ 300% - 48px ┐
		│                    100% - 41px
		└─────── 300% ───────┘
		which stops the shadow from showing on top of the #nav-bar
	*/
	/* clip-path: polygon( 0% 0%, 48px 0%, 48px 41px, 300% 41px, 300% 100%, 0px 100%) !important; */
}

#sidebar-box[sidebarcommand*="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden]):hover {
	/*
		creates a clip mask like
		┌ 300% ┐
		│      │
		100%   100%
		│      │
		└ 300% ┘
	*/
	clip-path: polygon( 0% 0%, 300% 0px, 300% 41px, 300% 41px, 300% 100%, 0px 100%) !important;

	transition-delay: var(--delay) !important;
	width: 250px !important;
}

}