Tab bar: Update styling on macOS

chrome/content/zotero/components/tabBar.jsx

@@ -128,7 +128,7 @@ const TabBar = forwardRef(function (props, ref) {
 					className="tab-close"
 					onClick={(event) => handleTabClose(event, index)}
 				>
-					X
+					x
 				</div>
 			</div>
 		);
@@ -136,8 +136,12 @@ const TabBar = forwardRef(function (props, ref) {
 	
 	return (
 		<div className="tabs">
+			<div className="tabs-spacer-before"/>
+			<div className="tabs-holder">
 				{ tabs.map((tab, index) => renderTab(tab, index)) }
 			</div>
+			<div className="tabs-spacer-after"/>
+        </div>
 	);
 });
 

chrome/content/zotero/standalone/standalone.xul

@@ -124,7 +124,7 @@
 			</hbox>
 		</hbox>
 	</vbox>
-	<vbox id="tab-bar-container" style="-moz-window-dragging: drag"/>
+	<vbox id="tab-bar-container"/>
 	<toolbox id="navigator-toolbox" class="toolbox-top" mode="icons" defaultmode="icons">
 		<!-- Menu -->
 		<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"

chrome/skin/default/zotero/overlay.css

@@ -296,13 +296,11 @@
 	min-width: 560px;
 }
 
-#zotero-pane .toolbar
-{
+.toolbar {
 	height: 32px !important; /* Hard-code this to fix toolbar icon compression on Linux */
 	margin: 0;
 	padding: 0;
 	min-width: 1px;
-	-moz-appearance: toolbar;
 }
 
 #zotero-pane toolbarseparator {

scss/components/_mainWindow.scss

@@ -147,3 +147,23 @@ toolbarpaletteitem {
 #main-window[sizemode="fullscreen"] .titlebar-placeholder[type="caption-buttons"] {
   display: none;
 }
+
+
+
+#tab-bar-container {
+	-moz-window-dragging: drag;
+}
+
+#tab-bar-container .tab {
+	background: $transparent;
+}
+
+#tab-bar-container .tab.selected {
+	background: $toolbar-background-color;
+}
+
+#zotero-toolbar {
+	-moz-appearance: none;
+	background: $toolbar-background-color;
+	border-bottom: $toolbar-border;
+}

scss/components/_tabBar.scss

@@ -6,6 +6,10 @@
 	display: flex;
 }
 
+.tabs-holder {
+	display: flex;
+}
+
 .tab {
 	-moz-appearance: none;
 	width: 200px;
@@ -17,12 +21,12 @@
 	position: relative;
 	background: #f9f9f9;
 	border-top: 2px solid transparent;
-	border-left: 1px solid lightgray;
-	border-right: 1px solid lightgray;
-	border-bottom: 1px solid transparent;
-	margin-right: -1px;
 	color: #000;
 	
+	&:not(:last-child) {
+		border-right: $tab-border;
+	}
+	
 	&.selected {
 		border-top: 2px solid #CC2936;
 	}

scss/mac/_mainWindow.scss

@@ -0,0 +1,3 @@
+#titlebar {
+	-moz-appearance: -moz-mac-vibrant-titlebar-light;
+}

scss/mac/_tabBar.scss

@@ -1,9 +1,31 @@
 .tabs {
 	-moz-window-dragging: drag;
-	margin-left: 78px;
+}
+
+.tabs-spacer-before {
+	width: 78px;
+	border-bottom: $tab-border;
+	border-inline-end: $tab-border;
+}
+
+.tabs-spacer-after {
+	flex: 1;
+	border-inline-start: $tab-border;
+	border-bottom: $tab-border;
 }
 
 .tab {
 	-moz-window-dragging: no-drag;
-	
+}
+
+.tab:not(.selected) {
+	border-bottom: $tab-border;
+}
+
+.tab:first-child {
+	border-left: 0;
+}
+
+.tab:last-child {
+	border-right: 0;
 }

scss/themes/_light.scss

@@ -80,6 +80,14 @@ $clicky-active-color: $shade-0;
 // Components
 // --------------------------------------------------
 
+// Toolbar
+$toolbar-background-color: #f6f6f6;
+$toolbar-border-color: darkgray;
+$toolbar-border: .5px solid $toolbar-border-color;
+
+// Tab bar
+$tab-border: $toolbar-border;
+
 // Icon
 $icon-color: $secondary;
 $icon-active-color: $shade-9;

scss/zotero-react-client-mac.scss

@@ -7,6 +7,7 @@
 @import "mac/button";
 @import "mac/createParent";
 @import "mac/editable";
+@import "mac/mainWindow";
 @import "mac/search";
 @import "mac/tabBar";
 @import "mac/tag-selector";