Add window inactive opacity to toolbar and tabs

chrome/content/zotero/zoteroPane.xhtml

@@ -756,7 +756,7 @@
 	<!-- Keep in sync with Zotero.test conditional block in overlay.js -->
 	<hbox id="zotero-title-bar">
 		<div xmlns="http://www.w3.org/1999/xhtml" id="tab-bar-container" style="-moz-box-flex: 1;"/>
-		<hbox id="zotero-tabs-toolbar"  align="center">
+		<hbox id="zotero-tabs-toolbar" class="zotero-toolbar" align="center">
 			<toolbarbutton id="zotero-tb-opened-tabs" class="zotero-tb-button" tabindex="-1" data-l10n-id="zotero-toolbar-opened-tabs-menu" type="panel" />
 			<div xmlns="http://www.w3.org/1999/xhtml" class="zotero-tb-separator"></div>
 

scss/abstracts/_mixins.scss

@@ -125,3 +125,16 @@
 		}
 	}
 }
+
+@mixin macOS-inactive-opacity {
+	$selector: &;
+	@at-root {
+		@media (-moz-platform: macos) {
+			#{$selector} {
+				&:-moz-window-inactive {
+					opacity: 0.6;
+				}
+			}
+		}
+	}
+}

scss/components/_mainWindow.scss

@@ -124,30 +124,6 @@
 			display: none;
 		}
 	}
-	
-	#tab-bar-container {
-		background: var(--material-tabbar);
-		-moz-window-dragging: drag;
-	}
-
-	.zotero-toolbar {
-		-moz-appearance: none;
-		@media (-moz-platform: macos) {
-			-moz-window-dragging: drag;
-		}
-		@media not (-moz-platform: macos) {
-			-moz-window-dragging: no-drag;
-		}
-	}
-	
-	#zotero-layout-switcher .zotero-toolbar {
-		background: var(--material-tabbar);
-		border-bottom: var(--material-panedivider);
-	}
-
-	#zotero-tabs-toolbar {
-		background: var(--material-tabbar);
-	}
 }
 
 :root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,

scss/components/_tabBar.scss

@@ -4,7 +4,11 @@
 	--safe-area-end: 0;
 	--tab-border: .5px solid var(--tab-border);
 
+	background: var(--material-tabbar);
+	-moz-window-dragging: drag;
 	min-height: var(--tab-min-height);
+
+	@include macOS-inactive-opacity;
 	
 	&:not([hidden]) {
 		// display: flex overrides the hidden attribute
@@ -140,6 +144,7 @@
 	right: 0;
 	padding: 4px 1px;
 	column-gap: 4px;
+	-moz-window-dragging: drag;
 
 	.pinned-tabs & {
 		padding: 4px 0;
@@ -160,6 +165,9 @@
 	display: flex;
 	border-radius: 5px;
 	transition: background-color 0.1s ease-out;
+	-moz-window-dragging: no-drag;
+
+	@include macOS-inactive-opacity;
 
 	&.selected {
 		background: var(--material-button);

scss/components/_toolbar.scss

@@ -45,6 +45,8 @@
 	@media not (-moz-platform: macos) {
 		-moz-window-dragging: no-drag;
 	}
+
+	@include macOS-inactive-opacity;
 }
 
 #zotero-layout-switcher .zotero-toolbar {

scss/linux/_tabBar.scss

@@ -2,11 +2,3 @@
 	--safe-area-start: 30px;
 	--safe-area-end: 0px;
 }
-
-.tabs {
-	-moz-window-dragging: drag;
-}
-
-.tab {
-	-moz-window-dragging: no-drag;
-}

scss/mac/_tabBar.scss

@@ -3,18 +3,6 @@
 	--safe-area-end: 20px;
 }
 
-.tabs {
-	-moz-window-dragging: drag;
-}
-
-.tab {
-	-moz-window-dragging: no-drag;
-
-	&:-moz-window-inactive {
-		opacity: 0.6;
-	}
-}
-
 #navigator-toolbox {
 	border: 0;
 }

scss/win/_tabBar.scss

@@ -2,11 +2,3 @@
 	--safe-area-start: 30px;
 	--safe-area-end: 0px;
 }
-
-.tabs {
-	-moz-window-dragging: drag;
-}
-
-.tab {
-	-moz-window-dragging: no-drag;
-}