zotero/scss/win/_titleBar.scss

#toolbar-menubar {
	// Need this to force show the menubar
	display: initial;
	// Allow right-click context menu on menubar
	visibility: visible;
	flex: 1;
}

#menubar-items {
	pointer-events: all;
	-moz-window-dragging: drag;
}

.titlebar-buttonbox {
	height: 100%;
	pointer-events: all;
}

#titlebar,
.menubar-container {
	appearance: none;
	flex-direction: row;
	height :var(--tab-min-height);
	-moz-box-pack: center;
	border-bottom: var(--material-border);
	background: var(--material-tabbar);
	toolbar {
		appearance: none;
	}
	menubar {
		height :var(--tab-min-height);
		padding: 5px 1px 5px 1px !important;
	}
	menu {
		border-radius: 4px;
	}
	#main-menubar {
		align-self: flex-start;
	}
	#main-menubar > menu {
		height: 100%;
		padding: 0px 4px 0px 4px;
	}
	#main-menubar > menu > menupopup {
        // Align with menu bar bottom
        margin-top: 0px;
    }
}

.titlebar-icon {
	background-image: url(chrome://zotero/skin/z.svg);
	width: 16px;
	height: 16px;
	z-index: 2;
	-moz-window-dragging: no-drag;
	pointer-events: all;
	// to make the icon 36*36
	margin: 10px;
}


// Following rules from https://searchfox.org/mozilla-central/source/browser/themes/windows/browser.css
:root {
	--sidebar-border-color: ThreeDLightShadow;
}

#menubar-items {
	flex-direction: column; /* for flex hack */
	justify-content: normal; /* align the menubar to the top also in customize mode */
}

#main-menubar > menu {
	appearance: none;
	color: inherit;

	&[_moz-menuactive] {
	// background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
	@include light-dark(background-color, hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
	color: inherit;

	@media (prefers-contrast) {
		background-color: -moz-menuhover;
		color: -moz-menuhovertext;
	}
	}
}

@media (-moz-windows-accent-color-in-titlebar) {
	:root[tabsintitlebar] {
	/* stylelint-disable-next-line media-query-no-invalid */
	@media (-moz-bool-pref: "browser.theme.windows.accent-color-in-tabs.enabled") {
		--toolbox-non-lwt-bgcolor: ActiveCaption;
		--toolbox-non-lwt-textcolor: CaptionText;
		--toolbox-non-lwt-bgcolor-inactive: InactiveCaption;
		--toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;

		#TabsToolbar:not(:-moz-lwtheme) {
		/* These colors match the Linux/HCM default button colors. We need to
		 * override these on the tabs toolbar because the accent color is
		 * arbitrary, so the hardcoded colors from browser-custom-colors might
		 * not provide sufficient contrast. */
		--toolbarbutton-icon-fill: currentColor;
		--toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent);
		--toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent);
		}
	}

	&[sizemode="normal"] #titlebar {
		border-top: .5px solid ActiveBorder;
		&:-moz-window-inactive {
		border-top-color: InactiveBorder;
		}
	}
	}
}

/* Titlebar */

.titlebar-buttonbox {
	inset-inline-end: 0px;
	position: absolute;
	height: var(--tab-min-height);
	appearance: none;
	/* The button box must appear on top of the navigator-toolbox in order for
	 * click and hover mouse events to work properly for the button in the restored
	 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
	 * can swallow those events. It will also place the buttons above the fog on
	 * Windows 7 with Aero Glass.
	 */
	z-index: 1;
}

/* Window control buttons */

.titlebar-button {
	appearance: none;
	border: none;
	margin: 0;
	padding: 8px 17px;
	-moz-context-properties: stroke;
	stroke: currentColor;

	:root[tabletmode] & {
	display: none;
	}

	> .toolbarbutton-icon {
	width: 12px;
	height: 12px;

	&:-moz-locale-dir(rtl) {
		transform: scaleX(-1);
	}
	}
}

.titlebar-min {
	/* Even though we use appearance: none, -moz-default-appearance is necessary
	 * for Windows 11's "snap layouts" feature, see
	 * DealWithWindowsAppearanceHacks */
	-moz-default-appearance: -moz-window-button-minimize;
	list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
}

.titlebar-max {
	-moz-default-appearance: -moz-window-button-maximize;
	list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
}

.titlebar-restore {
	-moz-default-appearance: -moz-window-button-restore;
	list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
}

.titlebar-close {
	-moz-default-appearance: -moz-window-button-close;
	list-style-image: url(chrome://browser/skin/window-controls/close.svg);
}

:root[lwtheme-image] {
	.titlebar-button {
	-moz-context-properties: unset;
	}
	.titlebar-min {
	list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
	}
	.titlebar-max {
	list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
	}
	.titlebar-restore {
	list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
	}
	.titlebar-close {
	list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
	}
}

/* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
 * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
@media (1.20dppx <= resolution <= 1.45dppx) {
	.titlebar-button > .toolbarbutton-icon {
	width: 11.5px;
	height: 11.5px;
	}
}

/* 175% dpi should result in the same device pixel sizes as 150% dpi. */
@media (1.70dppx <= resolution <= 1.95dppx) {
	.titlebar-button {
	padding-inline: 14.1px;

	> .toolbarbutton-icon {
		width: 10.8px;
		height: 10.8px;
	}
	}
}

/* 225% dpi should result in the same device pixel sizes as 200% dpi. */
@media (2.20dppx <= resolution <= 2.45dppx) {
	.titlebar-button {
	padding-inline: 15.3333px;

	> .toolbarbutton-icon {
		width: 10.8px;
		height: 10.8px;
	}
	}
}

/* 275% dpi should result in the same device pixel sizes as 250% dpi. */
@media (2.70dppx <= resolution <= 2.95dppx) {
	/* NB: todo: this should also change padding on the buttons
	 * themselves, but without a device to test this on, it's
	 * impossible to know by how much. */
	.titlebar-button > .toolbarbutton-icon {
	width: 10.8px;
	height: 10.8px;
	}
}

// End of browser.css

#main-menubar > menu[_moz-menuactive="true"],
	.titlebar-button:hover {
		@include light-dark(background-color, hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
	}
	.titlebar-button:hover:active {
		@include light-dark(background-color, hsla(0,0%,0%,.22), hsla(0,0%,100%,.32));
}

.titlebar-close:hover {
	stroke: white;
	background-color: hsl(355,86%,49%);
}
.titlebar-close:hover:active {
	background-color: hsl(355,82%,69%);
}

.titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
	opacity: 0.5;
}