zotero/scss/components/_mainWindow.scss

// Styling for displaying tabs in the title bar
:root:not([legacytoolbar="true"]) {
	& {
	  --tab-min-height: 36px;
	  --tabs-border-color: rgba(0,0,0,.3);
	  --tabline-color: #0a84ff;
	
	  --toolbar-non-lwt-bgcolor: #f9f9fa;
	  --toolbar-non-lwt-textcolor: #0c0c0d;
	  --toolbar-non-lwt-bgimage: none;
	  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
	  --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
	  --chrome-content-separator-color: hsl(0, 0%, 60%);
	
	  --toolbarbutton-border-radius: 3px;
	  --toolbarbutton-icon-fill-opacity: .85;
	  --toolbarbutton-hover-background: hsla(0, 0%, 100%, .1)
										linear-gradient(hsla(0, 0%, 100%, .3),
										hsla(0, 0%, 100%, .1)) no-repeat;
	  --toolbarbutton-hover-bordercolor: hsla(0, 0%, 0%, .2);
	  --toolbarbutton-header-bordercolor: hsla(0, 0%, 0%, .2);
	  --toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0, 0%, 100%, .5),
									   0 1px 0 hsla(0, 0%, 100%, .5) inset;
	
	  --toolbarbutton-active-background: hsla(0, 0%, 0%, .02)
										 linear-gradient(hsla(0, 0%, 0%, .12),
										 transparent) border-box;
	  --toolbarbutton-active-bordercolor: hsla(0, 0%, 0%, .3);
	  --toolbarbutton-active-boxshadow: 0 1px 0 hsla(0, 0%, 100%, .5),
										0 1px 0 hsla(0, 0%, 0%, .05) inset,
										0 1px 1px hsla(0, 0%, 0%, .2) inset;
	  --toolbarbutton-inactive-bordercolor: rgba(0, 0, 0, 0.1);
	  --toolbarbutton-inactive-boxshadow: 0 1px 0 hsla(0, 0%, 0%, .05) inset;
	  --toolbarbutton-checkedhover-backgroundcolor: hsla(0, 0%, 0%, .09);
	  --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
	
	  --lwt-header-image: none;
	  --row-grouped-header-bg-color: #d5d5d5;
	  --row-grouped-header-bg-color-selected: #3874d1;
	  --panel-separator-color: hsla(210, 4%, 10%, .14);
	  --arrowpanel-dimmed: hsla(0, 0%, 80%, .3);
	  --arrowpanel-dimmed-further: hsla(0, 0%, 80%, .45);
	  --splitter-color: #bdbdbd;
	  --urlbar-popup-url-color: hsl(210, 77%, 47%);
	  --urlbar-popup-action-color: hsl(178, 100%, 28%);
	  
	  --autocomplete-popup-background: -moz-field;
	  --autocomplete-popup-color: -moz-fieldtext;
	  --autocomplete-popup-border-color: ThreeDShadow;
	  --autocomplete-popup-highlight-background: Highlight;
	  --autocomplete-popup-highlight-color: HighlightText;
	  /* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
	  --space-above-tabbar: 0px;
	}
	
	&:-moz-window-inactive {
	  --toolbar-bgcolor: -moz-mac-chrome-inactive;
	}
	
	
	/* ::::: Tabs in Titlebar :::::: */
	
	&:not([chromemargin]) > #titlebar {
	  display: none;
	}
	
	/**
	 * For tabs in titlebar on OS X, we stretch the titlebar down so that the
	 * tabstrip can overlap it.
	 */
	&[tabsintitlebar] > #titlebar {
	  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
	}
	
	&:not([tabsintitlebar]) .titlebar-placeholder {
	  visibility: collapse;
	}
	
	@media (-moz-platform: macos) {
		/* NB: these would be margin-inline-start/end if it wasn't for the fact that OS X
		* doesn't reverse the order of the items in the titlebar in RTL mode. */
		.titlebar-placeholder[type="caption-buttons"],
		.titlebar-buttonbox {
			margin-right: 12px;
			margin-left: 12px;
		}
		
		.titlebar-buttonbox {
			-moz-appearance: -moz-window-button-box;
		}

		.titlebar-icon {
			display: none;
		}
	}
}

:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,
:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max {
	display: none;
}

#titlebar {
	display: flex;
	align-items: center;
	-moz-window-dragging: drag;
	menu {
		font-size: var(--zotero-font-size);
	}
}

:is(panel)::part(content) {
	--panel-background: var(--material-toolbar);
}

#main-window {
	min-width: $min-width-collections-pane + $min-width-items-pane + $min-width-item-pane + $width-sidenav;
	min-height: 300px;
}

#zotero-pane-stack > hbox {
	// Let window chrome, tabs, and toolbar shrink even when sidebars overflow
	min-width: 0;
}