userChrome.css

/*! SHIMMMER v2.28 */
/*? https://github.com/nuclearcodecat/shimmer */



/* browser toolbox prompt hack - set devtools.debugger.prompt-connection to false */

/*? shimmer variables */
:root {
	/*? COLLAPSING SIDEBAR SETTINGS */
	--shimmer-cbar-collapsed-width: 42px;
	--shimmer-cbar-expanded-width: 300px;

	/*? urlbar border radius */
	--shimmer-urlbar-rounding: 16px;
	--shimmer-urlbar-inner-rounding: calc(var(--shimmer-urlbar-rounding) * .75);

	/*? max tab width */
	--shimmer-tab-max-width: 13em;
	/*? min tab width */
	--shimmer-tab-min-width: 9em;
	/*? selected tab width */
	--shimmer-tab-selected-width: var(--shimmer-tab-max-width);

	/* --shimmer-tab-height: 32px; */
	/* --shimmer-titlebar-height: calc(var(--shimmer-tab-height) + 6px); */
	--shimmer-tab-border-radius: 12px;
	--shimmer-browser-border-radius: 20px;
	--shimmer-top-bottom-browser-margin: 8px;

	/* could be hardcoded in some places... */
	--shimmer-btn-anim: background 0.075s linear, opacity 0.075s linear;

	/*? gap between window control buttons */
	--shimmer-winctr-gap: 5px;
	/*? margin around winctr buttons */
	--shimmer-winctr-margin: 12px;

	--shimmer-sidebar-splitter-width: var(--shimmer-top-bottom-browser-margin);
}

/*? overwritten variables */
:root {
	--arrowpanel-menuitem-margin-inline: 5px !important;
	--arrowpanel-header-min-height: calc(calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-margin-horizontal) * 2)) * 0.5) !important;
	--arrowpanel-menuitem-padding: 4px 8px !important;
	--arrowpanel-border-radius: 12px !important;
	--arrowpanel-menuitem-border-radius: calc(var(--arrowpanel-border-radius) / 1.65) !important;
	/* --var-tab-min-height: 10px !important; */
	/* --tab-border-radius: var(--shimmer-tab-border-radius) !important; */
	/*? disable opacity change when tabbed out */
	--inactive-titlebar-opacity: 1 !important;
	--splitter-width: var(--shimmer-sidebar-splitter-width) !important;
}

/*? customize context menu */
/* #context-back, */
/* #context-bookmarklink, */
/* #context-bookmarkpage, */
/* #context-forward, */
/* #context-inspect, */
#context-inspect-a11y,
/* #context-navigation, */
/* #context-openlink, */
/* #context-openlinkintab, */
/* #context-openlinkinusercontext-menu, */
/* #context-openlinkprivate, */
#context-pocket,
/* #context-reload, */
#context-savelink,
#context-savelinktopocket,
/* #context-savepage, */
/* #context-searchselect, */
/* #context-selectall, */
/* #context-sendlinktodevice, */
/* #context-sendpagetodevice, */
/* #context-sep-navigation, */
/* #context-sep-open, */
/* #context-sep-selectall, */
#context-sep-sendlinktodevice,
#context-sep-sendpagetodevice,
/* #context-sep-viewbgimage, */
#context-sep-viewsource,
/* #context-stop, */
/* #context-viewbgimage, */
/* #context-viewinfo, */
#context-viewpartialsource-selection,
#context-viewsource,
/* #inspect-separator, */
#screenshots_mozilla_org_create-screenshot {
	display: none !important;
}

/*? slim scrollbars everywhear!!!! */
* {
	scrollbar-width: thin !important;
}

@media (-moz-bool-pref: "shimmer.hide-sidebar-button") {
	#sidebar-button {
		display: none !important;
	}
}

/*! === titlebar === */

/*? fix theming issues */
#main-window[titlepreface="​"] #nav-bar {
	background: rgba(0, 0, 0, 0) !important;
}

.toolbarbutton-animatable-box>image {
	/*? change reload button animation length */
	animation-duration: 0.7s !important;
	animation-timing-function: ease-in-out !important;
}

/*? change bookmark star button to yellow_ when starred */
#star-button[starred="true"] {
	fill: #f7e617 !important;
	stroke: #000 !important;
	stroke-width: 2px !important;
	filter: drop-shadow(0px 0px 0.5px #000) !important;
}

/*? taller navbar */
@media not (-moz-bool-pref: "shimmer.shorter-navbar") {
	#navigator-toolbox, #nav-bar {
		min-height: 50px !important;
	}
}
#TabsToolbar {
	height: 100% !important;
}

/*? make extensions buttons reach the entire height of navbar */
#nav-bar-customization-target toolbarbutton {
	height: 100% !important;
}

#urlbar {
	margin: 0 !important;
}

/*? move the window control buttons to the same row as urlbar */
#main-window[titlepreface="​"] #navigator-toolbox {
	display: grid !important;
	grid-template-rows: repeat(4, auto);
}
#PersonalToolbar:not([collapsed="true"]) {
	padding-bottom: calc(var(--shimmer-top-bottom-browser-margin) / 2) !important;
}
@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	#PersonalToolbar {
		grid-area: 4 / 1 / 5 / 3 !important;
	}
}
@media not (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	#main-window[titlepreface="​"] #PersonalToolbar {
		grid-area: 4 / 1 / 5 / 3 !important;
	}
}
@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	#toolbar-menubar {
		grid-area: 1 / 1 / 2 / 3 !important;
	}
}
@media not (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	#main-window[titlepreface="​"] #toolbar-menubar {
		grid-area: 1 / 1 / 2 / 3 !important;
	}
}
@media not (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
	#navigator-toolbox {
		grid-template-columns: 1fr auto !important;
	}

	@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
		#nav-bar {
			grid-area: 3 / 1 / 4 / 2 !important;
		}
	}
	#main-window[titlepreface="​"] #nav-bar {
		grid-area: 3 / 1 / 4 / 2 !important;
	}

	@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
		#TabsToolbar {
			grid-area: 3 / 2 / 4 / 3 !important;
		}
	}
	#main-window[titlepreface="​"] #TabsToolbar {
		grid-area: 3 / 2 / 4 / 3 !important;
	}
}
@media (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
	#navigator-toolbox {
		grid-template-columns: auto 1fr !important;
	}

	@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
		#nav-bar {
			grid-area: 3 / 2 / 4 / 3 !important;
		}
	}
	#main-window[titlepreface="​"] #nav-bar {
		grid-area: 3 / 2 / 4 / 3 !important;
	}

	@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
		#TabsToolbar {
			grid-area: 3 / 1 / 4 / 2 !important;
		}
	}
	#main-window[titlepreface="​"] #TabsToolbar {
		grid-area: 3 / 1 / 4 / 2 !important;
	}

	@supports (not (-moz-osx-font-smoothing: grayscale)) {
		#TabsToolbar {
			flex-direction: row-reverse !important;
		}
	}
}

@supports (-moz-osx-font-smoothing: grayscale) {
	.titlebar-buttonbox-container {
		justify-content: space-evenly !important;
		align-items: center !important;
	}
	.titlebar-buttonbox {
		align-items: center !important;
	}
	.titlebar-button {
		height: 100% !important;
	}
}



/*? make the window grabbable at the top, but not the window control buttons */
/* #main-window[titlepreface="​"] #nav-bar {
	border-top: 1px solid rgba(0, 0, 0, 0) !important;
}
#main-window[titlepreface=""] .toolbar-items {
	margin-top: 1px !important;
} */

/*? hide native tabs */
@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	#TabsToolbar > .toolbar-items {
		display: none !important;
	}
}
#main-window[titlepreface="​"] #TabsToolbar > .toolbar-items {
	display: none !important;
}

/*? make navigation buttons white_ when sidebar open */
@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	#navigator-toolbox, #nav-bar {
		background: var(--toolbar-bgcolor) !important;
	}
}
#main-window[titlepreface="​"] #navigator-toolbox {
	background: var(--toolbar-bgcolor) !important;
}

/*? hide spacers when sidebery open */
@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	#TabsToolbar .titlebar-spacer {
		display: none;
	}
}
#main-window[titlepreface="​"] #TabsToolbar .titlebar-spacer {
	display: none;
}

/*? smaller titlebar buttons */
.toolbar-items {
	& .toolbarbutton-icon {
		padding: 4px !important;
		width: 100% !important;
		height: auto !important;
	}
	& .toolbarbutton-badge-stack {
		padding: 0 !important;
	} 
}

#firefox-view-button {
	margin-left: 8px !important;
}

@media (-moz-bool-pref: "shimmer.hide-firefox-view-button") {
	#firefox-view-button {
		display: none !important;
	}
}

/*! === menubar === */

/*? hide regular winctr buttons when menubar is open */
@supports (not (-moz-osx-font-smoothing: grayscale)) {
	#toolbar-menubar:not([inactive]) ~ #TabsToolbar .titlebar-buttonbox-container {
		display: none !important;
	}
}

#toolbar-menubar:not([inactive]) {
	width: 100vw !important;
	overflow: hidden !important;
	min-height: 0 !important;
	height: auto !important;
}

/*? hide if sidebery open and stable release */
@media not (-moz-bool-pref: "shimmer.nightly") {
	#main-window[titlepreface="​"] #titlebar #toolbar-menubar {
		display: none !important;
	}
}

/*! === navbar === */

/*? rounded urlbar and box */
:root[chromehidden*="menubar toolbar directories extrachrome"] #urlbar-background { 
	background: rgba(0, 0, 0, 0) !important;
	border: 0 !important;
}
:root:not([chromehidden*="menubar toolbar directories extrachrome"]) #urlbar-background { 
	background: var(--toolbar-field-background-color) !important;
	border: 1px solid var(--toolbar-field-border-color) !important;
}
#urlbar-background {
	border-radius: var(--shimmer-urlbar-rounding) !important;
	transition: all 0.1s linear !important;
}

/*? rounded buttons inside urlbar (firefox logo on about pages, padlock, trans, etc.) */
#identity-box > box, #tracking-protection-icon-container, #page-action-buttons > *, #urlbar-revert-button-container, #urlbar-searchmode-switcher {
	border-radius: var(--shimmer-urlbar-rounding) !important;
}

/*? needed for popup transition to work */
#urlbar {
	margin-top: 0 !important;
}

/*? make the background of extended urlbar move down and BROKEN drop a blur behind */
@media not (-moz-bool-pref: "shimmer.disable-popover-urlbar") {
	#urlbar[breakout-extend] {
		position: fixed !important;
		margin-top: 12vh !important;
		/* backdrop-filter: blur(8px) !important; */
		background: rgba(0, 0, 0, 0) !important;
		/* border-radius: 20px; */
	}  
}

@media not (-moz-bool-pref: "shimmer.disable-popover-transition") {
	#urlbar[breakout-extend] {
		transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
	}

	#urlbar {
	transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
	}
}

#urlbar[breakout-extend] {
	z-index: 9999 !important;
	left: 10% !important;
	width: calc(100vw - 20%) !important;
}

@media not (-moz-bool-pref: "shimmer.disable-urlbar-background-transition") {
	#urlbar[breakout-extend] #urlbar-background {
		transition: all 0.1s linear !important;
	}
}

@media (-moz-bool-pref: "shimmer.disable-urlbar-background-transition") {
	#urlbar[breakout-extend] #urlbar-background {
		transition: none !important;
	}
}

#urlbar[breakout-extend] #urlbar-background {
	background: var(--toolbar-field-focus-background-color) !important;
}

/*? urlbox backdrop */
#urlbar[breakout-extend]::before{
	content: '' !important;
	width: 200vw !important;
	height: 200vh !important;
	position: fixed !important;
	pointer-events: none !important;
	overflow: hidden !important;
	top: -30vh !important;
	left: -30vw !important;
	background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 65%, rgba(0, 0, 0, 0)) !important;
}

/*? urlbar bigger text */
#urlbar[breakout-extend] #urlbar-input {
	font-size: 1.4rem !important;
}

/*? taller urlbar for bigger text when extended */
#urlbar[breakout-extend] .urlbar-input-container {
	height: 48px !important;
}

@media (max-width: 600px) {
	#urlbar[breakout-extend] #urlbar-input {
		font-size: 1.25rem !important;
	}
}

/*? centered text when urlbar not in use */
#urlbar:not(:is([breakout-extend])) #urlbar-input {
	text-align: center !important;
}

/*? hide search one offs */
@media not (-moz-bool-pref: "shimmer.show-search-one-offs") {
	.search-one-offs {
		display: none !important;
	}
}

/*? fix for floating urlbar */
@media (-moz-bool-pref: "shimmer.nightly") { 
	#urlbar:not([breakout-extend]) {
		top: auto !important;
	}
}

/*? hide 1px line below urlbar */
.urlbarView-body-inner {
	border-top: none !important;
}

/*? hide border below top bar */
#navigator-toolbox {
	border: 0px !important;
}

/*? make rounded borders have nice color */
#browser {
	background: var(--toolbar-bgcolor) !important;
}

/*? if popup window, make urlbar smaller and centered */
#main-window[chromehidden*="toolbar"] #urlbar-container {
	max-width: 90% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/*? bigger rounding for navbar buttons */
#nav-bar {
	toolbarbutton {
		& > stack, & > image {
			border-radius: 8px !important;
		}
	}
}

/*! === findbar === */

findbar {
	border: 0 !important;
	/*? relative for margins */
	position: relative !important;
	border-radius: 12px !important;
	bottom: 60px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 40rem !important;
	height: 3rem !important;
	display: flex !important;
	align-items: center !important;
	/*? fix for relative positioning */
	margin-top: -3rem !important;
	border: 0 !important;
	transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
	overflow-x: visible !important;
	box-shadow: 0 0 0px 1px var(--lwt-accent-color) !important;
}

findbar[hidden]{
	margin-bottom: 0 !important;
	opacity: 0 !important;
	background: rgba(0, 0, 0, 0) !important;
	transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

findbar:not([hidden]) {
	opacity: 1 !important;
	background: var(--toolbar-bgcolor, var(--toolbar-non-lwt-bgcolor)) !important;
	-moz-appearance: none !important;
	appearance: none !important;
}
.findbar-container, .findbar-container > hbox {
	height: 100% !important;
}

.findbar-container {
	margin-left: 7px !important;
}

/*? change text to icons for smaller findbar */
.findbar-container checkbox::after {
	height: 16px;
	font-size: 14px;
	background-size: cover;
	display: flex;
	align-items: center;
	-moz-context-properties: fill;
	fill: currentColor;
	color: inherit;
}
.findbar-highlight::after {
	content: '';
	background: url(./assets/icons/hl.svg) no-repeat;
	width: 18px;
	background-position-y: -1px;
}
.findbar-match-diacritics::after {
	content: 'ąâ';
	font-weight: 600;
}
.findbar-entire-word::after {
	content: '';
	background: url(./assets/icons/word.svg) no-repeat;
	width: 20px;
	background-position-y: -2px;
}
.findbar-case-sensitive::after {
	content: 'Aa';
	font-weight: 600;
}

/*? hide all text for findbar checkboxes */
.findbar-container checkbox > .checkbox-label-box {
	display: none !important;
}

.findbar-textbox {
	border-radius: 8px !important;
	font-family: monospace !important;
	padding: 5px 8px !important;
	width: 12rem !important;
}

.findbar-closebutton:hover {
	opacity: 1 !important;
	background: var(--toolbarbutton-hover-background) !important;
}
.findbar-closebutton {
	opacity: 1 !important;
	/* background: var(--lwt-accent-color) !important; */
	/* wasn't square for some reason */
	width: auto !important;
}
.findbar-closebutton image {
	width: 16px;
	height: 16px;
	padding: 2px;
}

/*? move matched amount below main findbar */
.found-matches {
	position: absolute !important;
	padding: 1.8rem 0.7rem 0.2rem 0.6rem !important;
	top: 14px !important;
	background: var(--toolbar-bgcolor, var(--toolbar-non-lwt-bgcolor)) !important;
	/* border: solid var(--arrowpanel-border-color) 1px !important; */
	left: -12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
	z-index: 9 !important;
	box-shadow: 0 0 0px 1px var(--lwt-accent-color);
	clip-path: inset(0 -10px -5px -5px);
}
.findbar-find-status {
	display: none !important;
}
.found-matches::before {
	z-index: 8 !important;
}
.found-matches::after {
	position: absolute;
	display: block;
	content: '';
	width: 1rem;
	height: 1.5rem;
	background: var(--toolbar-bgcolor, var(--toolbar-non-lwt-bgcolor)) !important;
	right: -0.5rem;
	top: 0.8rem;
	transform: rotate(45deg);
	box-shadow: 0 0 0px 1px var(--lwt-accent-color);
	clip-path: inset(0 -0.3rem 0 0);
}
.findbar-textbox { 
	z-index: 10 !important;
}


/*? compact private browsing indicator */
#private-browsing-indicator-with-label > label, .private-browsing-indicator-label {
	display: none !important;
}
.private-browsing-indicator-icon {
	width: 24px !important;
	height: 24px !important;
}

#PanelUI-menu-button {
	display: flex !important;
}

@media (max-width: 620px) {
	#PanelUI-menu-button {
		display: none !important;
	}

	#unified-extensions-button {
		margin-right: 12px !important;
	}
}

/*? make the go button bigger in urlbar */
.urlbar-go-button {
	height: 100% !important;
	width: auto !important;
	padding: 1.5% !important;
	border-radius: var(--shimmer-urlbar-inner-rounding) !important;
}


/*? rounded results */
.urlbarView-row {
	border-radius: var(--shimmer-urlbar-inner-rounding) !important;
}
/*? for some reason the results get clipped so adding some padding */
.urlbarView {
	padding: 0 5px !important;
}

.urlbarView-row:hover {
	background: var(--urlbar-box-hover-bgcolor) !important;
}

/*? small separator between results and search bar */
/* .urlbarView-body-outer {
	border-top: 1px rgba(0, 0, 0, 0.15) solid !important;
} */
.urlbarView-body-outer::before {
	content: '';
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	height: 1px;
	background: #aaa;
	opacity: 0.2;
	display: block;
	mix-blend-mode: difference;
}
.urlbarView-body-inner {
	border: 0 !important;
}

/*? increase padding in urlbar */
#urlbar-results {
	padding-bottom: 8px !important;
}

/*? seamless transition */
/* #sidebar-box {
	box-shadow: -10px -100px 0px 100px var(--toolbar-bgcolor),
	0 0px 20px 15px var(--lwt-accent-color);
} */
/*? hide the hiding box shadow */
/* #navigator-toolbox {
	z-index: 2 !important;
} */

/*? add margin to left of browser when sidebar hidden */
#sidebar-box[hidden="true"] ~ #tabbrowser-tabpanels {
	padding-left: 3px !important;
}

#tabbrowser-tabpanels, #sidebar-box {
	background: rgba(0, 0, 0, 0) !important;
}

/*! === floating statuspanel === */

/*? move statuspanel */
#statuspanel {
	bottom: 11px !important;
	left: 11px !important;
}
#statuspanel[mirror] {
	left: auto !important;
	right: 18px !important;
}

/*? round statuspanel */
#statuspanel-label {
	border-radius: 7px !important;
	box-shadow: 0 0 0px 1px var(--lwt-accent-color);
}

/*? border and alternative statuspanel padding */
#statuspanel-label {
	padding: 3px 8px !important;
	border: solid 1px var(--button-background-color-active) !important;
}

/*? color the statuspanel */
#statuspanel-label {
	background: var(--toolbar-bgcolor, var(--toolbar-non-lwt-bgcolor)) !important;
	color: var(--lwt-text-color) !important;
}

#statuspanel, #statuspanel[type="overLink"] {
	transition: opacity 75ms, visibility 75ms !important;
}

/*! === tabs === */

@media (-moz-bool-pref: "shimmer.remove-firefox-view-button") {
	#firefox-view-button {
		display: none !important;
	}
}

#alltabs-button {
	margin-right: 0.3rem !important;
}

/*? tab on titlebar that's not pinned */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]) {
	/*? min tab width */
	min-width: var(--shimmer-tab-min-width) !important;
	/*? max tab width */
	max-width: var(--shimmer-tab-max-width) !important;
}

/*? make tab background round and small */
.tab-background {
	min-height: 0 !important;
	border: solid 1px color-mix(in srgb, var(--tab-selected-bgcolor) 90%, #000);
	box-shadow: 0 0 0 #fff !important;
}

/*? show tab close buttons when hovering tab */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned]):hover .tab-close-button {
	display: block !important;
}

/*? hide shadow on tabbrowser (overflow already indicated by arrow clickable) */
spacer[part="overflow-end-indicator"], spacer[part="overflow-start-indicator"] {
	display: none !important;
}

/*? change tab background color */
.tab-background {
	background: color-mix(in srgb, var(--tab-selected-bgcolor) 20%, rgba(0, 0, 0, 0));
} 

/*? hide firefox view separator */
#tabbrowser-tabs {
	border: 0 !important;
}

/*? tab height and x button pos */
#tabbrowser-tabs[orient="vertical"] .tab-background {min-height: 28px !important;}

@media not (-moz-bool-pref: "shimmer.taller-tabs") {
	#tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab {
		min-height: 38px !important;
		height: 38px !important;
	}

	.tab-close-button {
		margin-inline-end: -3px !important;
		width: 20px !important;
		height: 20px !important;
		padding: 4px !important;
	}

	.tab-background {
		border-radius: var(--shimmer-tab-border-radius) !important;
	}
}
@media (-moz-bool-pref: "shimmer.taller-tabs") {
	#tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab {
		min-height: 45px !important;
		height: 45px !important;
	}

	.tab-close-button {
		margin-inline-end: -1px !important;
		width: 24px !important;
		height: 24px !important;
		padding: 6px !important;
	}

	.tab-background {
		border-radius: calc(var(--shimmer-tab-border-radius) * 1.2) !important;
	}
}

/*? make inner tab html occupy whole height (for some reason wouldn't happen to pinned tab) */
.tab-stack {
	height: 100% !important;
}

/*? don't change background behind tabs even when window inactive */
/* --lwt-accent-color not defined on linux install */
/* #navigator-toolbox, #navigator-toolox:-moz-window-inactive {
	background: var(--lwt-accent-color) !important;
} */

/*? rounded tab close button */
.tab-close-button {
	border-radius: calc(var(--shimmer-tab-border-radius) * 0.6) !important;
}

.tab-close-button, .tab-close-button:hover {
	transition: var(--shimmer-btn-anim) !important;
}

/*? minimal selected tab width */
@media not (-moz-bool-pref: "shimmer.dont-expand-selected-tab") {
	#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned])[selected] {
		min-width: var(--shimmer-tab-selected-width) !important;
	}
}

/*? fix for moving tabs looking weird */
#tabbrowser-tabs {
	&[orient="horizontal"] {
		&[movingtab] {
			padding-bottom: 0 !important;
			margin-bottom: 0 !important;
		}
	}
}

/*! === sidebar === */

/*? hide header, or give good color */
@media not (-moz-bool-pref: "shimmer.show-sidebar-header") {
	#sidebar-header {
		display: none !important;
	}
}
#sidebar-header {
	background: var(--lwt-accent-color) !important;
}

/*? remove ugly border below "tabs" text */
#sidebar-header {
	border-bottom: 0 !important;
}

@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox, :root:not([inDOMFullscreen]) #sidebar-main {
		margin-bottom: var(--shimmer-top-bottom-browser-margin) !important;
	}
}
@media not (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-box:not([hidden]), :root:not([inDOMFullscreen]) #sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
		margin-bottom: var(--shimmer-top-bottom-browser-margin) !important;
	}
}

#sidebar-splitter {
	--sidebar-splitter: var(--shimmer-sidebar-splitter-width) !important;
	width: var(--sidebar-splitter) !important;
	min-width: var(--sidebar-splitter) !important;
	background: rgba(0, 0, 0, 0) !important;
	border: 0 !important;
	margin: 0 !important;
}

@media not (-moz-bool-pref: "shimmer.show-sidebar-header-close-button") {
	#sidebar-close {
		display: none !important;
	}
}

#sidebar-close {
	margin-right: 10px !important;
}

/*? hide ugly border around tabbox */
#tabbrowser-tabbox * {
	border: 0 !important;
}

/*? rounded browser on left edge */
@media not (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
		border-radius: 0;
		clip-path: inset(0% 0% 0% 0% round var(--shimmer-browser-border-radius) 0 0 var(--shimmer-browser-border-radius));
		overflow: hidden !important;
	}
}
@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox {
		border-radius: 0;
		clip-path: inset(0% 0% 0% 0% round var(--shimmer-browser-border-radius) 0 0 var(--shimmer-browser-border-radius));
		overflow: hidden !important;
	}
}

/*? rounded sidebar on right edge */
:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-box {
	clip-path: inset(0% 0% 0% 0% round 0 var(--shimmer-browser-border-radius) var(--shimmer-browser-border-radius) 0);
	overflow: hidden !important;
}
@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
	:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-main {
		clip-path: inset(0% 0% 0% 0% round 0 var(--shimmer-browser-border-radius) var(--shimmer-browser-border-radius) 0);
	}
}

@media (-moz-bool-pref: "shimmer.sidebar-right-side") {
	/*? rounded browser on right edge */
	@media not (-moz-bool-pref: "shimmer.native-vertical-tabs") {
		:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
			border-radius: 0 !important;
			clip-path: inset(0% 0% 0% 0% round 0 var(--shimmer-browser-border-radius) var(--shimmer-browser-border-radius) 0);
		}
	}
	@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
		:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox {
			border-radius: 0 !important;
			clip-path: inset(0% 0% 0% 0% round 0 var(--shimmer-browser-border-radius) var(--shimmer-browser-border-radius) 0);
		}
	}

	/*? rounded sidebar on left edge */
	:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-box {
		border-radius: 0 !important;
		clip-path: inset(0% 0% 0% 0% round var(--shimmer-browser-border-radius) 0 0 var(--shimmer-browser-border-radius));
	}
	@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
		:root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-main {
			clip-path: inset(0% 0% 0% 0% round var(--shimmer-browser-border-radius) 0 0 var(--shimmer-browser-border-radius));
		}
	}
}

/*? native vertical tabs background color */
#sidebar-main {
	background: var(--lwt-accent-color) !important;
}

/*? collapsing sidebar */
@media not (-moz-bool-pref: "shimmer.disable-collapsing-sidebar") {
	#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
		/* position: absolute !important; */
		/*																					navbar height	 */
		/* height: calc(100% - var(--shimmer-top-bottom-browser-margin) - 50px) !important; */
		width: var(--shimmer-cbar-expanded-width) !important;
		transition: width 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
	}

	#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
		min-width: 0 !important;
		z-index: 999 !important;
	}

	#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not(:hover) {
		width: var(--shimmer-cbar-collapsed-width) !important;
		transition: width 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
	}

	#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not(:hover) ~ #tabbrowser-tabbox {
		transition: margin 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
	}

	#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] ~ #tabbrowser-tabbox {
		transition: margin 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
	}

	@media (-moz-bool-pref: "shimmer.sidebar-right-side") {
		#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] ~ #tabbrowser-tabbox {
			margin-right: calc(-1 * var(--shimmer-cbar-expanded-width) + var(--shimmer-cbar-collapsed-width)) !important;
		}

		#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not(:hover) ~ #tabbrowser-tabbox {
			margin-right: 0 !important;
		}
	}	

	@media not (-moz-bool-pref: "shimmer.sidebar-right-side") {
		#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] ~ #tabbrowser-tabbox {
			margin-left: calc(-1 * var(--shimmer-cbar-expanded-width) + var(--shimmer-cbar-collapsed-width)) !important;
		}

		#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not(:hover) ~ #tabbrowser-tabbox {
			margin-left: 0 !important;
		}
	}
}

/*! === menus === */
/*? consistent color for ctx menus */
.menupopup-arrowscrollbox, #searchmode-switcher-popup slot[part="content"] {
	background: var(--lwt-accent-color, var(--panel-background)) !important;
	border-radius: var(--arrowpanel-border-radius) !important;
	border: 0 !important;
	outline: solid 1px var(--lwt-tab-line-color) !important;
}

/*? round context menu items */
/* --panel-background */
menuitem, menu, .menu-iconic, #searchmode-switcher-popup tooblarbutton {
	border-radius: var(--arrowpanel-menuitem-border-radius) !important;
	/* margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; */
	padding: var(--arrowpanel-menuitem-padding) !important;
}
/*? better hover color */
/* menuitem:hover, menu:hover, .menu-iconic:hover, #searchmode-switcher-popup:hover tooblarbutton {
	background: var(--panel-item-hover-bgcolor) !important;
} */
menu, menuitem {
	&:where([_moz-menuactive]) {
		&:not([disabled="true"]) {
			background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 85%, var(--lwt-text-color, var(--panel-color))) !important;
		}
		background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 92.5%, var(--lwt-text-color, var(--panel-color))) !important;
	}
}

/*? fading backgrounds on buttons */
menuitem, toolbarbutton > stack, toolbaritem, toolbarbutton, toolbarbutton > image, .urlbarView-row, menu,
menuitem:hover, toolbarbutton:hover > stack, toolbaritem:hover, toolbarbutton:hover, toolbarbutton:hover > image, .urlbarView-row:hover, menu:hover,
.findbar-closebutton, .findbar-closebutton:hover
{
	transition: var(--shimmer-btn-anim) !important;
}

/*?  */
#context-navigation menuitem {
	padding: 2px !important;
}

/*? smaller manage extensions button */
#unified-extensions-manage-extensions {
	padding: 5px 8px !important;
	margin-bottom: 5px !important;
}

/*? larger titles in panels like extensions */
.panel-header {
	font-size: 1.35rem !important;
}

/*? panelui smaller margin */
.panel-subview-body {
	margin-bottom: 5px !important;
}

.panel-subview-body {
	padding: 5px 0 0 0 !important;
}

treecol {
	transition: var(--shimmer-btn-anim) !important;
}

/*? fix for unreadable dropdown text (#34) */
#ContentSelectDropdown * {
	color: var(--lwt-text-color) !important;
}

/*? fix for unreadable disabled dropdown text (#35) */
#ContentSelectDropdownPopup menuitem[disabled] {
	background: color-mix(in srgb, var(--lwt-accent-color) 60%, var(--lwt-text-color)) !important;
}

/*! === autoscroller === */

/* why no work */
/* #autoscroller slot[part="content"] {
	--panel-background: var(--lwt-accent-color) !important;

	background-color: var(--panel-background) !important;
	background-image: var(--autoscroll-background-image) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border-radius: 12px !important;
} */

/*! === compact, macos-like winctr buttons === */
@media not (-moz-bool-pref: "shimmer.disable-compact-winctr-buttons") {
	#toolbar-menubar .titlebar-buttonbox > toolbarbutton {
		&:hover > image {
			padding: 2px 0 !important;
		}
	}

	#TabsToolbar .titlebar-buttonbox > toolbarbutton {
		&:hover > image {
			padding: 4px 0 !important;
		}
	}

	.titlebar-buttonbox > toolbarbutton {
		background: rgba(0, 0, 0, 0) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	
		& > image {
			width: 14px !important;
			height: 14px !important;
			border-radius: 12px !important;
			transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
			list-style-image: none !important;
			box-sizing: content-box !important;
			padding: 0px !important;
			background: var(--toolbarbutton-hover-background) !important;
		}
	
		&:hover > image {
			transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
		}
	}
	.titlebar-close {
		/* background: hsl(355, 86%, 49%) url(chrome://browser/skin/window-controls/close.svg) no-repeat center !important; */
		&:hover > image {
			background: #fc5753 !important;
		}
		padding-right: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important;
		padding-left: var(--shimmer-winctr-gap) !important;
	}
	.titlebar-min {
		&:hover > image {
			background: #fdbc40 !important;
		}
		padding-left: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important;
		padding-right: var(--shimmer-winctr-gap) !important;
	}
	.titlebar-max, .titlebar-restore {
		&:hover > image {
			background: #33c748 !important;
		}
		padding: 0 var(--shimmer-winctr-gap) !important;
	}
	@media not (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
		#main-window[titlepreface="​"] #toolbar-menubar:not([inactive]) #PanelUI-menu-button {
			padding-right: 0 !important;
		}
		@media (-moz-bool-pref: "shimmer.native-vertical-tabs") {
			#toolbar-menubar:not([inactive]) #PanelUI-menu-button {
				padding-right: 0 !important;
			}
		}
	}
	/* .titlebar-buttonbox-container {
		margin: 0 var(--shimmer-winctr-margin) 0 0 !important;
	} */
}

@media (-moz-bool-pref: "shimmer.remove-winctr-buttons") {
	.titlebar-buttonbox, .titlebar-spacer[type="post-tabs"] {
		display: none !important;
	}
}

/*! === notif === */
#navigator-toolbox, #tab-notification-deck {
	z-index: 10 !important;
}

#tab-notification-deck > notification-message {
	position: fixed !important;
	z-index: 10 !important;
	top: 9rem !important;
	right: 0 !important;
	margin-right: 2rem !important;
	box-shadow: 0px 1px 3px 2px rgba(0,0,0,.15) !important;
}


/* review:	todo, change, fix */
/*TODO some of the usual buttons that appear on the right-click context menu are hidden. right now you can change them at the top of `userChrome.css`. i will maybe later introduce `about:config` variables for easier customization */
/*TODO autoscroller styles */
/*TODO pointer events on urlbar*/