Fix Scaffold for redesign

chrome/content/scaffold/scaffold.xhtml

@@ -371,7 +371,7 @@
 				</toolbarbutton>
 			</hbox>
 		</toolbar>
-		<hbox flex="1">
+		<hbox id="appcontent" flex="1">
 			<tabbox id="left-tabbox" flex="2" width="300">
 				<tabs id="tabs">
 					<tab id="tab-metadata" label="&scaffold.tabs.metadata.label;"/>
@@ -496,7 +496,7 @@
 					</tabpanel>
 				</tabpanels>
 			</tabbox>
-			<splitter resizeafter="farthest" />
+			<splitter id="pane-splitter" resizeafter="farthest" />
 
 			<vbox id="right-pane" flex="1">
 				<html:textarea style="-moz-box-flex: 1" id="output" readonly="true"/>

scss/components/_button.scss

@@ -31,3 +31,9 @@
 	}
 }
 
+button {
+	@media (-moz-platform: macos) {
+		// Prevent ugly non-native button styles on macOS
+		max-height: 25px;
+	}
+}

scss/mac/_tabbox.scss

@@ -0,0 +1,76 @@
+tabbox {
+	tabs {
+		tab {
+			appearance: none;
+			// Since the tab with opacity is weird, we just use hard-coded colors
+			@include light-dark(background, #ededed, #343434);
+			box-shadow:
+				0px 2px 2px -2px var(--fill-quarternary) inset,
+				0px -2px 2px -2px var(--fill-quarternary) inset,
+				0px 4px 4px -4px var(--fill-quinary) inset,
+				0px -4px 4px -4px var(--fill-quinary) inset;
+
+			&::before {
+				content: "";
+				position: absolute;
+				height: 14px;
+				top: 5px;
+				border-left: 1px solid var(--fill-quarternary);
+			}
+
+			&:first-of-type {
+				border-top-left-radius: 5px;
+				border-bottom-left-radius: 5px;
+				box-shadow:
+					0px 2px 2px -2px var(--fill-quarternary) inset,
+					0px -2px 2px -2px var(--fill-quarternary) inset,
+					0px 4px 4px -4px var(--fill-quinary) inset,
+					0px -4px 4px -4px var(--fill-quinary) inset,
+					2px 0px 2px -2px var(--fill-quarternary) inset,
+					4px 0px 4px -4px var(--fill-quinary) inset;
+				&::before {
+					display: none;
+				}
+			}
+
+			&:last-of-type {
+				border-top-right-radius: 5px;
+				border-bottom-right-radius: 5px;
+				box-shadow:
+					0px 2px 2px -2px var(--fill-quarternary) inset,
+					0px -2px 2px -2px var(--fill-quarternary) inset,
+					0px 4px 4px -4px var(--fill-quinary) inset,
+					0px -4px 4px -4px var(--fill-quinary) inset,
+					-2px 0px 2px -2px var(--fill-quarternary) inset,
+					-4px 0px 4px -4px var(--fill-quinary) inset;
+			}
+
+			&[visuallyselected=true] {
+				& + tab {
+					&::before {
+						display: none;
+					}
+				}
+
+				&::before {
+					display: none;
+				}
+
+				.tab-middle {
+					border-radius: 5px;
+					background: var(--material-button);
+					box-shadow:
+						0px 1px 0.75px 0px var(--fill-quinary),
+						0px 0.25px 0.25px 0px var(--color-border);;
+					border: 0.5px solid var(--fill-senary);
+				}
+			}
+		}
+	}
+	tabpanels {
+		appearance: none;
+		background: var(--color-sidepane);
+		border: 1px solid var(--fill-quinary);
+		border-radius: 5px;
+	}
+}

scss/scaffold.scss

@@ -96,20 +96,22 @@ richlistbox {
 	min-width:200px;
 }
 
-#zotero-toolbar {
-	margin-bottom: 3px;
-}
-
 #zotero-toolbar toolbarseparator {
 	height: 18px;
 }
 
-browser {
+browser,
-	background: white;
+#appcontent
+{
+	background: var(--material-toolbar);
+}
+
+#appcontent {
+	padding: 16px;
 }
 
 vbox > splitter {
-	cursor: row-resize;
+	cursor: row-rgb(4, 4, 4)e;
 }
 
 /* Adapted from Mozilla common-shared.css */
@@ -120,8 +122,8 @@ listheader,
 richlistbox {
 	appearance: none;
 	margin-inline: 0;
-	background-color: #fff;
+	background: var(--material-background);
-	border: 1px solid #ccc;
+	border: var(--material-panedivider);
 }
 
 listheader {
@@ -164,7 +166,7 @@ dialog richlistbox > richlistitem[disabled] {
 }
 
 #left-tabbox {
-	margin-top: 5px;
+	margin: 5px;
 }
 
 #checkboxes-translatorType checkbox {
@@ -176,7 +178,16 @@ dialog richlistbox > richlistitem[disabled] {
 	text-align: right;
 }
 
-#right-pane textarea {
+#pane-splitter {
-	margin-right: 5px;
+	// 16px (padding of tabbox container) - 9px
-	margin-bottom: 5px;
+	margin-left: 7px;
+}
+
+#right-pane {
+	margin: -16px -16px -16px 0px;
+	border-left: var(--material-panedivider);
+	textarea {
+		outline: none;
+		border: 0;
+	}
 }

scss/zotero-mac.scss

@@ -7,6 +7,7 @@
 @import "mac/createParent";
 @import "mac/editable";
 @import "mac/tabBar";
+@import "mac/tabbox";
 @import "mac/menupopup";
 
 // Elements