From 23da0d70b0743371f8a50cd7ed3c482dbb062102 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Sat, 2 Mar 2024 15:51:55 +0800
Subject: [PATCH] Implement Windows redesign for native elements (#3727)

---
 .eslintrc                                     |   1 +
 app/scripts/fetch_xulrunner                   |  14 +
 chrome/content/scaffold/load.js               |  20 +-
 chrome/content/scaffold/load.xhtml            |  18 +-
 chrome/content/scaffold/scaffold.xhtml        | 416 ++++++++++--------
 chrome/content/zotero-platform/mac/tab.css    |   4 -
 chrome/content/zotero/about.xhtml             |  11 +-
 chrome/content/zotero/customElements.js       |  53 ++-
 chrome/content/zotero/errorReport.xhtml       |   6 +-
 chrome/content/zotero/exportOptions.xhtml     |   6 +-
 .../content/zotero/import/importWizard.xhtml  |   3 +-
 chrome/content/zotero/longTagFixer.xhtml      |   1 -
 .../content/zotero/newCollectionDialog.xhtml  |   1 -
 chrome/content/zotero/rtfScan.xhtml           |   3 +-
 chrome/content/zotero/runJS.html              |   2 +-
 chrome/content/zotero/selectItemsDialog.xhtml |   3 +-
 .../zotero/standalone/basicViewer.xhtml       |   3 +-
 .../content/zotero/standalone/standalone.js   | 141 +-----
 chrome/content/zotero/titlebar.js             | 173 ++++++++
 chrome/content/zotero/tools/csledit.js        |   2 +-
 chrome/content/zotero/tools/csledit.xhtml     |   3 +-
 chrome/content/zotero/zoteroPane.xhtml        |   1 +
 chrome/skin/default/zotero/itemPane.css       |   6 -
 scss/_zotero.scss                             |   2 +
 scss/abstracts/_mixins.scss                   |  24 +-
 scss/base/_base.scss                          |  51 +--
 scss/components/_clicky.scss                  |   4 +-
 scss/components/_collection-tree.scss         |   1 +
 scss/components/_item-tree.scss               |   2 +
 scss/components/_itemPane.scss                |   1 +
 scss/components/_listheader.scss              |  56 +++
 scss/components/_mainWindow.scss              | 111 -----
 scss/components/_reader.scss                  |   7 +
 scss/components/_richlistbox.scss             |  20 +-
 scss/components/_search.scss                  |  17 +-
 scss/components/_tabsMenu.scss                |   6 +-
 scss/components/_tagSelector.scss             |   9 +-
 scss/components/_titleBar.scss                |  72 +++
 scss/components/_toolbar.scss                 |   5 -
 scss/components/_toolbarbutton.scss           |   2 +
 scss/components/_virtualized-table.scss       |  18 +-
 scss/components/_window.scss                  |  29 +-
 scss/dialog-win.scss                          |  28 ++
 scss/elements/_collapsibleSection.scss        |   1 -
 scss/elements/_editableText.scss              |  16 +-
 scss/elements/_itemBox.scss                   |   8 +-
 scss/elements/_paneHeader.scss                |   1 -
 scss/elements/_quickSearchTextbox.scss        |   6 +-
 .../errorReport.css => scss/errorReport.scss  |   4 -
 scss/linux/_errorReport.scss                  |   3 -
 scss/mac/_titleBar.scss                       |   6 +-
 scss/preferences.scss                         |   2 +
 scss/preferences/_cite.scss                   |   6 +
 scss/preferences/_general.scss                |   6 +
 scss/scaffold.scss                            |  72 +--
 scss/win/_menupopup.scss                      |   1 +
 scss/win/_titleBar.scss                       |   6 +-
 scss/win/abstracts/_mixins.scss               |  55 +++
 scss/win/components/_button.scss              |  31 ++
 scss/win/components/_input.scss               | 126 ++++++
 scss/win/components/_menulist.scss            |  24 +
 scss/win/components/_tabbox.scss              |  67 +++
 scss/win/elements/_editableText.scss          |  13 +
 scss/win/elements/_itemBox.scss               |   1 +
 scss/wizard-win.scss                          |  23 +
 scss/zotero-unix.scss                         |   1 -
 scss/zotero-win.scss                          |  10 +
 67 files changed, 1189 insertions(+), 656 deletions(-)
 delete mode 100644 chrome/content/zotero-platform/mac/tab.css
 create mode 100644 chrome/content/zotero/titlebar.js
 create mode 100644 scss/components/_listheader.scss
 create mode 100644 scss/components/_titleBar.scss
 create mode 100644 scss/dialog-win.scss
 rename chrome/skin/default/zotero/errorReport.css => scss/errorReport.scss (93%)
 delete mode 100644 scss/linux/_errorReport.scss
 create mode 100644 scss/win/abstracts/_mixins.scss
 create mode 100644 scss/win/components/_button.scss
 create mode 100644 scss/win/components/_input.scss
 create mode 100644 scss/win/components/_menulist.scss
 create mode 100644 scss/win/components/_tabbox.scss
 create mode 100644 scss/win/elements/_editableText.scss
 create mode 100644 scss/wizard-win.scss

diff --git a/.eslintrc b/.eslintrc
index 3bd6085705..0a9a253ce1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -18,6 +18,7 @@
 		"MozXULElement": false,
 		"PluralForm": false,
 		"Services": false,
+		"windowUtils": false,
 		"XPCOMUtils": false,
 		"XRegExp": false,
 		"XULElement": false,
diff --git a/app/scripts/fetch_xulrunner b/app/scripts/fetch_xulrunner
index 8b3d918fd0..1285e84118 100755
--- a/app/scripts/fetch_xulrunner
+++ b/app/scripts/fetch_xulrunner
@@ -297,6 +297,20 @@ function modify_omni {
 	replace_line 'window.sizeToContent\(\);' 'if (ui.infoIcon.complete) window.sizeToContent();' chrome/toolkit/content/global/commonDialog.js
 	replace_line 'ui.infoIcon.addEventListener' 'if (!ui.infoIcon.complete) ui.infoIcon.addEventListener' chrome/toolkit/content/global/commonDialog.js
 	
+	# Import style into built-in dialogs
+	replace_line '<window id=\"commonDialogWindow\"' \
+		'<window id=\"commonDialogWindow\" class=\"zotero-dialog\"' \
+		chrome/toolkit/content/global/commonDialog.xhtml
+	replace_line '<\?xml-stylesheet href=\"chrome:\/\/global\/skin\/commonDialog.css\" type=\"text\/css\"\?>' \
+		'<\?xml-stylesheet href=\"chrome:\/\/global\/skin\/commonDialog.css\" type=\"text\/css\"\?>
+		<\?xml-stylesheet href=\"chrome:\/\/zotero-platform\/content\/zotero.css\" type=\"text\/css\"\?>' \
+		chrome/toolkit/content/global/commonDialog.xhtml
+	replace_line '<script>' \
+		'<script>
+		Services.scriptloader.loadSubScript(\"chrome:\/\/zotero\/content\/include.js\", this);
+		Services.scriptloader.loadSubScript(\"chrome:\/\/zotero\/content\/customElements.js\", this);' \
+		chrome/toolkit/content/global/commonDialog.xhtml
+	
 	# Use native checkbox instead of Firefox-themed version in prompt dialogs
 	replace_line '<xul:checkbox' '<xul:checkbox native=\"true\"' chrome/toolkit/content/global/commonDialog.xhtml
 	
diff --git a/chrome/content/scaffold/load.js b/chrome/content/scaffold/load.js
index 6973e2eed8..352a0c0844 100644
--- a/chrome/content/scaffold/load.js
+++ b/chrome/content/scaffold/load.js
@@ -23,7 +23,11 @@
     ***** END LICENSE BLOCK *****
 */
 
-var Scaffold_Load = new function() {
+var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
+Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
+
+var Scaffold_Load = new function () {
 	this.onLoad = async function () {
 		document.addEventListener('dialogaccept', () => this.accept());
 
@@ -43,12 +47,12 @@ var Scaffold_Load = new function() {
 			}
 		});
 		
-		var translators = {};		
+		var translators = {};
 
-		// Get the matching translators		
+		// Get the matching translators
 		var translatorProvider = window.arguments[0].translatorProvider;
 		var url = window.arguments[0].url;
-		var rootUrl = window.arguments[0].rootUrl
+		var rootUrl = window.arguments[0].rootUrl;
 		url = Zotero.Proxies.proxyToProper(url);
 		translators["Matching Translators"] = (await translatorProvider.getWebTranslatorsForLocation(url, rootUrl))[0];
 		translators["Web Translators"] = (await translatorProvider.getAllForType("web"))
@@ -68,8 +72,8 @@ var Scaffold_Load = new function() {
 			listitem.style.MozUserInput = 'none';
 			listitem.append(set);
 			listbox.appendChild(listitem);
-			for (var j=0; j<translators[set].length; j++) {
-				var translator = translators[set][j];
+			for (var j = 0; j < translators[set].length; j++) {
+				translator = translators[set][j];
 				listitem = document.createXULElement("richlistitem");
 				// set search label for type-to-find functionality. This is not displayed.
 				listitem.searchLabel = translator.label;
@@ -96,5 +100,5 @@ var Scaffold_Load = new function() {
 		
 		Zotero.debug(translatorID);
 		window.arguments[0].dataOut = translator;
-	}
-}
+	};
+};
diff --git a/chrome/content/scaffold/load.xhtml b/chrome/content/scaffold/load.xhtml
index e768639276..cf562450c3 100644
--- a/chrome/content/scaffold/load.xhtml
+++ b/chrome/content/scaffold/load.xhtml
@@ -26,22 +26,22 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://scaffold/skin/scaffold.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
+<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
 
 <!DOCTYPE window SYSTEM "chrome://scaffold/locale/scaffold.dtd">
 <window
-    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-    title="&scaffold.load.title;" width="400" height="330"
-    onload="Scaffold_Load.onLoad()">
+	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	title="&scaffold.load.title;" width="400" height="330"
+	onload="Scaffold_Load.onLoad()"
+	class="zotero-dialog">
 <dialog buttons="cancel,accept"
 	id="scaffold-load">
-	
-	<script src="chrome://zotero/content/include.js"/>
 	<script src="load.js"/>
 	
-    <listheader>
-        <treecol flex="1" label="&scaffold.load.label.label;"/>
+	<listheader>
+		<treecol flex="1" label="&scaffold.load.label.label;"/>
 		<treecol width="130" label="&scaffold.load.creator.label;"/>
-    </listheader>
-	<richlistbox id="listbox" flex="1"/>
+	</listheader>
+	<richlistbox id="listbox" class="theme-listbox" flex="1"/>
 </dialog>
 </window>
diff --git a/chrome/content/scaffold/scaffold.xhtml b/chrome/content/scaffold/scaffold.xhtml
index 483d9aea49..3c3cefd5ad 100644
--- a/chrome/content/scaffold/scaffold.xhtml
+++ b/chrome/content/scaffold/scaffold.xhtml
@@ -24,11 +24,12 @@
 	***** END LICENSE BLOCK *****
 -->
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://zotero/skin/scaffold.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
 <?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
+<?xml-stylesheet href="chrome://zotero/skin/scaffold.css" type="text/css"?>
+
 
 <!DOCTYPE window [
 	<!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd"> %globalDTD;
@@ -43,10 +44,13 @@
 	title="Scaffold"
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	xmlns:html="http://www.w3.org/1999/xhtml"
-	style="display: flex;">
+	style="display: flex;"
+	drawintitlebar-platforms="win, linux">
 
 	<linkset>
 		<html:link rel="localization" href="browser/menubar.ftl"/>
+		<html:link rel="localization" href="toolkit/global/textActions.ftl"/>
+		<html:link rel="localization" href="zotero.ftl" />
 	</linkset>
 
 	<script>
@@ -55,6 +59,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
 		
 		Services.scriptloader.loadSubScript("resource://zotero/require.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/titlebar.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/platformKeys.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/editMenuOverlay.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/xpcom/translate/testTranslators/translatorTester.js", this);
@@ -70,6 +75,8 @@
 
 		// Custom elements
 		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
+
+		Services.scriptloader.loadSubScript("chrome://zotero/content/menuAccessKey.js", this);
 	</script>
 
 	<commandset id="mainCommandSet">
@@ -148,201 +155,236 @@
 		<broadcaster id="validate-tests"/>
 	</broadcasterset>
 
-	<vbox flex="1" id="scaffold-pane">
-		
-		<menubar id="mb">
-			<menu id="mb-file" label="&fileMenu.label;" accesskey="&fileMenu.accesskey;">
-				<menupopup id="mb-file-popup">
-					<menuitem id="mb-file-new" label="&scaffold.menu.new;" key="new" command="cmd_new"/>
-					<menuitem id="mb-file-load" label="&scaffold.menu.open;" key="load" command="cmd_load"/>
-					<menuitem id="mb-file-setTranslatorsDirectory" label="&scaffold.menu.setTranslatorsDirectory;" oncommand="Scaffold.promptForTranslatorsDirectory()"/>
-					<menuseparator/>
-					<menuitem id="mb-file-save" label="&scaffold.toolbar.save.label;" key="save" command="cmd_save"/>
-					<menuitem id="mb-file-saveToZotero" label="&scaffold.toolbar.saveToZotero.label;" key="save-to-zotero" command="cmd_save_to_zotero"/>
-					<menuseparator/>
-					<menuitem id="mb-file-runDetect" label="&scaffold.menu.runDetect;" key="detect-web" command="cmd_run_detect"/>
-					<menuitem id="mb-file-runDo" label="&scaffold.menu.runDo;" key="run-do-web" command="cmd_run_translator_or_tests"/>
-					<menuseparator/>
-					<menuitem id="menu_close" label="&closeCmd.label;" key="key_close" accesskey="&closeCmd.accesskey;" command="cmd_close"/>
-				</menupopup>
-			</menu>
-
-			<menu id="menu_edit" data-l10n-id="menu-edit">
-				<menupopup id="menu_EditPopup">
-					<menuitem id="menu_undo"
-							key="key_undo"
-							command="cmd_undo" data-l10n-id="text-action-undo"/>
-					<menuitem id="menu_redo"
-							key="key_redo"
-							command="cmd_redo" data-l10n-id="text-action-redo"/>
-					<menuseparator/>
-					<menuitem id="menu_cut"
-							key="key_cut"
-							command="cmd_cut" data-l10n-id="text-action-cut"/>
-					<menuitem id="menu_copy"
-							key="key_copy"
-							command="cmd_copy" data-l10n-id="text-action-copy"/>
-					<menuitem id="menu_paste"
-							key="key_paste"
-							command="cmd_paste" data-l10n-id="text-action-paste"/>
-					<menuitem id="menu_delete"
-							key="key_delete"
-							command="cmd_delete" data-l10n-id="text-action-delete"/>
-					<menuseparator/>
-					<menuitem id="menu_selectAll"
-							key="key_selectAll"
-							command="cmd_selectAll" data-l10n-id="text-action-select-all"/>
-					<menuseparator/>
-					<menuitem id="menu_find" label="&findCmd.label;"
-							key="key_find" accesskey="&findCmd.accesskey;"
-							command="cmd_find"/>
-					<!--
-					#ifdef XP_UNIX
-					#ifndef XP_MACOSX
-					<menuseparator/>
-					<menuitem id="menu_preferences"
-						oncommand="Zotero.Utilities.Internal.openPreferences()" data-l10n-id="menu-preferences"/>
-					#endif
-					#endif
-					-->
-				</menupopup>
-			</menu>
-
-			<menu id="mb-view" label="&viewMenu.label;">
-				<menupopup id="mb-view-popup">
-					<menu id="mb-font-size-fields" label="&fontSize.label;">
-						<menupopup id="mb-help-fields-popup">
-							<menuitem id="mb-view-biggerFont" label="&zotero.general.bigger;" key="increase-font-size" command="cmd_increase_font_size"/>
-							<menuitem id="mb-view-smallerFont" label="&zotero.general.smaller;" key="decrease-font-size" command="cmd_decrease_font_size"/>
+	<vbox id="titlebar">
+		<hbox class="titlebar-icon-container">
+			<image class="titlebar-icon" src="chrome://zotero/skin/z.svg"></image>
+		</hbox>
+		<!-- Menu -->
+		<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
+				defaultset="menubar-items"
+				mode="icons" iconsize="small" defaulticonsize="small" autohide="false"
+				context="toolbar-context-menu">
+			<toolbaritem id="menubar-items" align="center">
+				<menubar id="main-menubar">
+					<menu id="mb-file" label="&fileMenu.label;" accesskey="&fileMenu.accesskey;">
+						<menupopup id="mb-file-popup">
+							<menuitem id="mb-file-new" label="&scaffold.menu.new;" key="new" command="cmd_new"/>
+							<menuitem id="mb-file-load" label="&scaffold.menu.open;" key="load" command="cmd_load"/>
+							<menuitem id="mb-file-setTranslatorsDirectory" label="&scaffold.menu.setTranslatorsDirectory;" oncommand="Scaffold.promptForTranslatorsDirectory()"/>
 							<menuseparator/>
-							<menuitem id="mb-view-restoreFont" label="&zotero.general.reset;" key="restore-font-size" command="restore-font-size"/>
+							<menuitem id="mb-file-save" label="&scaffold.toolbar.save.label;" key="save" command="cmd_save"/>
+							<menuitem id="mb-file-saveToZotero" label="&scaffold.toolbar.saveToZotero.label;" key="save-to-zotero" command="cmd_save_to_zotero"/>
+							<menuseparator/>
+							<menuitem id="mb-file-runDetect" label="&scaffold.menu.runDetect;" key="detect-web" command="cmd_run_detect"/>
+							<menuitem id="mb-file-runDo" label="&scaffold.menu.runDo;" key="run-do-web" command="cmd_run_translator_or_tests"/>
+							<menuseparator/>
+							<menuitem id="menu_close" label="&closeCmd.label;" key="key_close" accesskey="&closeCmd.accesskey;" command="cmd_close"/>
 						</menupopup>
 					</menu>
-				</menupopup>
-			</menu>
-
-			<menu id="toolsMenu" label="&toolsMenu.label;" accesskey="&toolsMenu.accesskey;">
-				<menupopup id="menu_ToolsPopup">
-					<menu id="menu_template"
-							label="&scaffold.menu.template;"
-							observes="code-tab-only">
-						<menupopup>
-								<menuitem label="&scaffold.toolbar.template.newWeb.label;" oncommand="Scaffold.addTemplate('newWeb')"/>
-								<menu label="&scaffold.toolbar.template.scrape.label;">
-									<menupopup id="menu_template_scrapePopup">
-										<menuitem id="tb-template-scrape-em" label="Embedded Metadata" oncommand="Scaffold.addTemplate('scrapeEM')"/>
-										<menuitem id="tb-template-scrape-ris" label="RIS" oncommand="Scaffold.addTemplate('scrapeRIS')"/>
-										<menuitem id="tb-template-scrape-bibtex" label="BibTeX" oncommand="Scaffold.addTemplate('scrapeBibTeX')"/>
-										<menuitem id="tb-template-scrape-marc" label="MARC" oncommand="Scaffold.addTemplate('scrapeMARC')"/>
-									</menupopup>
-								</menu>
+		
+					<menu id="menu_edit" data-l10n-id="menu-edit">
+						<menupopup id="menu_EditPopup">
+							<menuitem id="menu_undo"
+									key="key_undo"
+									command="cmd_undo" data-l10n-id="text-action-undo"/>
+							<menuitem id="menu_redo"
+									key="key_redo"
+									command="cmd_redo" data-l10n-id="text-action-redo"/>
+							<menuseparator/>
+							<menuitem id="menu_cut"
+									key="key_cut"
+									command="cmd_cut" data-l10n-id="text-action-cut"/>
+							<menuitem id="menu_copy"
+									key="key_copy"
+									command="cmd_copy" data-l10n-id="text-action-copy"/>
+							<menuitem id="menu_paste"
+									key="key_paste"
+									command="cmd_paste" data-l10n-id="text-action-paste"/>
+							<menuitem id="menu_delete"
+									key="key_delete"
+									command="cmd_delete" data-l10n-id="text-action-delete"/>
+							<menuseparator/>
+							<menuitem id="menu_selectAll"
+									key="key_selectAll"
+									command="cmd_selectAll" data-l10n-id="text-action-select-all"/>
+							<menuseparator/>
+							<menuitem id="menu_find" label="&findCmd.label;"
+									key="key_find" accesskey="&findCmd.accesskey;"
+									command="cmd_find"/>
+							<!--
+							#ifdef XP_UNIX
+							#ifndef XP_MACOSX
+							<menuseparator/>
+							<menuitem id="menu_preferences"
+								oncommand="Zotero.Utilities.Internal.openPreferences()" data-l10n-id="menu-preferences"/>
+							#endif
+							#endif
+							-->
 						</menupopup>
 					</menu>
-					<menuseparator/>
-					<menu id="linter-menu"
-							label="&scaffold.menu.linter;"
-							onpopupshowing="Scaffold.populateLinterMenu()">
-						<menupopup>
-							<menuitem id="menu_eslintStatus" disabled="true"/>
-							<menuitem id="menu_toggleESLint" oncommand="Scaffold.toggleESLint()"/>
-						</menupopup>
-					</menu>
-				</menupopup>
-			</menu>
-
-			<commandset id="macCommandSet"> <!-- was mainCommandSet -->
-				<command id="minimizeWindow"
-						label="&minimizeWindow.label;"
-						oncommand="window.minimize();" />
-				<command id="zoomWindow"
-						label="&zoomWindow.label;"
-						oncommand="zoomWindow();" />
-			</commandset>
-
-			<keyset id="macKeyset">  <!-- was mainKeySet -->
-				<key id="key_minimizeWindow"
-						command="minimizeWindow"
-						key="&minimizeWindow.key;"
-						modifiers="accel"/>
-				<key id="key_quitApplication"
-						key="&quitApplicationCmdMac.key;"
-						command="cmd_quitApplication"
-						modifiers="accel"
-						internal="true"/>
-			</keyset>
-
-			<!-- nsMenuBarX hides these and uses them to build the Application menu. -->
-			<menupopup id="menu_FilePopup">
-				<menuitem id="menu_preferences"
-						label="&preferencesCmdMac.label;"
-						key="key_preferencesCmdMac"
-						oncommand="Zotero.Utilities.Internal.openPreferences()"/>
-				<menuitem id="menu_mac_services"
-						label="&servicesMenuMac.label;"/>
-				<menuitem id="menu_mac_hide_app"
-						label="&hideThisAppCmdMac.label;"
-						key="key_hideThisAppCmdMac"/>
-				<menuitem id="menu_mac_hide_others"
-						label="&hideOtherAppsCmdMac.label;"
-						key="key_hideOtherAppsCmdMac"/>
-				<menuitem id="menu_mac_show_all"
-						label="&showAllAppsCmdMac.label;"/>
-				<menuitem id="menu_FileQuitItem"
-						label="&quitApplicationCmdMac.label;"
-						key="key_quitApplication"
-						command="cmd_quitApplication"/>
-			</menupopup>
-
-			<menu id="windowMenu"
-					label="&windowMenu.label;"
-					datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"
-					onpopupshowing="macWindowMenuDidShow();"
-					onpopuphidden="macWindowMenuDidHide();"
-					hidden="false">
-				<template>
-					<rule>
-						<menupopup>
-							<menuitem uri="rdf:*"
-									label="rdf:http://home.netscape.com/NC-rdf#Name"
-									type="radio"
-									name="windowList"
-									oncommand="ShowWindowFromResource(event.target)"/>
-						</menupopup>
-					</rule>
-				</template>
-				<menupopup id="windowPopup">
-					<menuitem command="minimizeWindow" label="&minimizeWindow.label;" key="key_minimizeWindow"/>
-					<menuitem command="zoomWindow" label="&zoomWindow.label;"/>
-					<!-- decomment when "BringAllToFront" is implemented
-						<menuseparator/>
-						<menuitem label="&bringAllToFront.label;" disabled="true"/> -->
-					<menuseparator id="sep-window-list"/>
-				</menupopup>
-			</menu>
-			<!-- endif -->
-
-			<menu id="helpMenu" label="&helpMenu.label;" accesskey="&helpMenu.accesskey;">
-				<menupopup id="mb-help-popup">
-					<menuitem id="mb-help-types" label="&scaffold.toolbar.template.itemTypes.label;" oncommand="Scaffold.addTemplate('templateAllTypes')"/>
-					<menu id="mb-help-fields" label="&scaffold.toolbar.template.newItem.label;">
-						<menupopup id="mb-help-fields-popup">
-							<menuitem id="mb-help-fields-book" label="book" oncommand="Scaffold.addTemplate('templateNewItem', 'book')"/>
-							<menuitem id="mb-help-fields-booksection" label="bookSection" oncommand="Scaffold.addTemplate('templateNewItem', 'bookSection')"/>
-							<menuitem id="mb-help-fields-conferencepaper" label="conferencePaper" oncommand="Scaffold.addTemplate('templateNewItem', 'conferencePaper')"/>
-							<menuitem id="mb-help-fields-journalarticle" label="journalArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'journalArticle')"/>
-							<menuitem id="mb-help-fields-magazinearticle" label="magazineArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'magazineArticle')"/>
-							<menuitem id="mb-help-fields-newspaperarticle" label="newspaperArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'newspaperArticle')"/>
-							<menu id="mb-help-fields-more" label="&scaffold.toolbar.template.more.label;">
-								<menupopup id="mb-help-fields-more-popup">
-								<!-- This will be filled on load with all other item types -->
+		
+					<menu id="mb-view" label="&viewMenu.label;" accesskey="&viewMenu.accesskey;">
+						<menupopup id="mb-view-popup">
+							<menu id="mb-font-size-fields" label="&fontSize.label;">
+								<menupopup id="mb-help-fields-popup">
+									<menuitem id="mb-view-biggerFont" label="&zotero.general.bigger;" key="increase-font-size" command="cmd_increase_font_size"/>
+									<menuitem id="mb-view-smallerFont" label="&zotero.general.smaller;" key="decrease-font-size" command="cmd_decrease_font_size"/>
+									<menuseparator/>
+									<menuitem id="mb-view-restoreFont" label="&zotero.general.reset;" key="restore-font-size" command="restore-font-size"/>
 								</menupopup>
 							</menu>
 						</menupopup>
 					</menu>
-				</menupopup>
-			</menu>
-		</menubar>
+		
+					<menu id="toolsMenu" label="&toolsMenu.label;" accesskey="&toolsMenu.accesskey;">
+						<menupopup id="menu_ToolsPopup">
+							<menu id="menu_template"
+									label="&scaffold.menu.template;"
+									observes="code-tab-only">
+								<menupopup>
+										<menuitem label="&scaffold.toolbar.template.newWeb.label;" oncommand="Scaffold.addTemplate('newWeb')"/>
+										<menu label="&scaffold.toolbar.template.scrape.label;">
+											<menupopup id="menu_template_scrapePopup">
+												<menuitem id="tb-template-scrape-em" label="Embedded Metadata" oncommand="Scaffold.addTemplate('scrapeEM')"/>
+												<menuitem id="tb-template-scrape-ris" label="RIS" oncommand="Scaffold.addTemplate('scrapeRIS')"/>
+												<menuitem id="tb-template-scrape-bibtex" label="BibTeX" oncommand="Scaffold.addTemplate('scrapeBibTeX')"/>
+												<menuitem id="tb-template-scrape-marc" label="MARC" oncommand="Scaffold.addTemplate('scrapeMARC')"/>
+											</menupopup>
+										</menu>
+								</menupopup>
+							</menu>
+							<menuseparator/>
+							<menu id="linter-menu"
+									label="&scaffold.menu.linter;"
+									onpopupshowing="Scaffold.populateLinterMenu()">
+								<menupopup>
+									<menuitem id="menu_eslintStatus" disabled="true"/>
+									<menuitem id="menu_toggleESLint" oncommand="Scaffold.toggleESLint()"/>
+								</menupopup>
+							</menu>
+						</menupopup>
+					</menu>
+		
+					<commandset id="macCommandSet"> <!-- was mainCommandSet -->
+						<command id="minimizeWindow"
+								label="&minimizeWindow.label;"
+								oncommand="window.minimize();" />
+						<command id="zoomWindow"
+								label="&zoomWindow.label;"
+								oncommand="zoomWindow();" />
+					</commandset>
+		
+					<keyset id="macKeyset">  <!-- was mainKeySet -->
+						<key id="key_minimizeWindow"
+								command="minimizeWindow"
+								key="&minimizeWindow.key;"
+								modifiers="accel"/>
+						<key id="key_quitApplication"
+								key="&quitApplicationCmdMac.key;"
+								command="cmd_quitApplication"
+								modifiers="accel"
+								internal="true"/>
+					</keyset>
+		
+					<!-- nsMenuBarX hides these and uses them to build the Application menu. -->
+					<menupopup id="menu_FilePopup">
+						<menuitem id="menu_preferences"
+								label="&preferencesCmdMac.label;"
+								key="key_preferencesCmdMac"
+								oncommand="Zotero.Utilities.Internal.openPreferences()"/>
+						<menuitem id="menu_mac_services"
+								label="&servicesMenuMac.label;"/>
+						<menuitem id="menu_mac_hide_app"
+								label="&hideThisAppCmdMac.label;"
+								key="key_hideThisAppCmdMac"/>
+						<menuitem id="menu_mac_hide_others"
+								label="&hideOtherAppsCmdMac.label;"
+								key="key_hideOtherAppsCmdMac"/>
+						<menuitem id="menu_mac_show_all"
+								label="&showAllAppsCmdMac.label;"/>
+						<menuitem id="menu_FileQuitItem"
+								label="&quitApplicationCmdMac.label;"
+								key="key_quitApplication"
+								command="cmd_quitApplication"/>
+					</menupopup>
+		
+					<menu id="windowMenu"
+							label="&windowMenu.label;"
+							datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"
+							onpopupshowing="macWindowMenuDidShow();"
+							onpopuphidden="macWindowMenuDidHide();"
+							hidden="false">
+						<template>
+							<rule>
+								<menupopup>
+									<menuitem uri="rdf:*"
+											label="rdf:http://home.netscape.com/NC-rdf#Name"
+											type="radio"
+											name="windowList"
+											oncommand="ShowWindowFromResource(event.target)"/>
+								</menupopup>
+							</rule>
+						</template>
+						<menupopup id="windowPopup">
+							<menuitem command="minimizeWindow" label="&minimizeWindow.label;" key="key_minimizeWindow"/>
+							<menuitem command="zoomWindow" label="&zoomWindow.label;"/>
+							<!-- decomment when "BringAllToFront" is implemented
+								<menuseparator/>
+								<menuitem label="&bringAllToFront.label;" disabled="true"/> -->
+							<menuseparator id="sep-window-list"/>
+						</menupopup>
+					</menu>
+					<!-- endif -->
+		
+					<menu id="helpMenu" label="&helpMenu.label;" accesskey="&helpMenu.accesskey;">
+						<menupopup id="mb-help-popup">
+							<menuitem id="mb-help-types" label="&scaffold.toolbar.template.itemTypes.label;" oncommand="Scaffold.addTemplate('templateAllTypes')"/>
+							<menu id="mb-help-fields" label="&scaffold.toolbar.template.newItem.label;">
+								<menupopup id="mb-help-fields-popup">
+									<menuitem id="mb-help-fields-book" label="book" oncommand="Scaffold.addTemplate('templateNewItem', 'book')"/>
+									<menuitem id="mb-help-fields-booksection" label="bookSection" oncommand="Scaffold.addTemplate('templateNewItem', 'bookSection')"/>
+									<menuitem id="mb-help-fields-conferencepaper" label="conferencePaper" oncommand="Scaffold.addTemplate('templateNewItem', 'conferencePaper')"/>
+									<menuitem id="mb-help-fields-journalarticle" label="journalArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'journalArticle')"/>
+									<menuitem id="mb-help-fields-magazinearticle" label="magazineArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'magazineArticle')"/>
+									<menuitem id="mb-help-fields-newspaperarticle" label="newspaperArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'newspaperArticle')"/>
+									<menu id="mb-help-fields-more" label="&scaffold.toolbar.template.more.label;">
+										<menupopup id="mb-help-fields-more-popup">
+										<!-- This will be filled on load with all other item types -->
+										</menupopup>
+									</menu>
+								</menupopup>
+							</menu>
+						</menupopup>
+					</menu>
+				</menubar>
+			</toolbaritem>
+		</toolbar>
+		<hbox class="titlebar-buttonbox titlebar-color">
+			<!-- TODO: remove `titlebar-btn` when we are on FX115. See https://phabricator.services.mozilla.com/D162757 -->
+			<toolbarbutton class="titlebar-button titlebar-min"
+				titlebar-btn="min"
+				oncommand="window.minimize();"
+				data-l10n-id="browser-window-minimize-button"
+				/>
+			<toolbarbutton class="titlebar-button titlebar-max"
+				titlebar-btn="max"
+				oncommand="window.maximize();"
+				data-l10n-id="browser-window-maximize-button"
+				/>
+			<toolbarbutton class="titlebar-button titlebar-restore"
+				titlebar-btn="max"
+				oncommand="window.fullScreen ? BrowserFullScreen() : window.restore();"
+				data-l10n-id="browser-window-restore-down-button"
+				/>
+			<toolbarbutton class="titlebar-button titlebar-close"
+				titlebar-btn="close"
+				oncommand="window.close();"
+				data-l10n-id="browser-window-close-button"
+				/>
+		</hbox>
+	</vbox>
 
+	<vbox flex="1" id="scaffold-pane">
 		<toolbar id="zotero-toolbar" class="toolbar toolbar-primary">
 			<hbox id="scaffold-toolbar" align="center">
 				<toolbarbutton id="tb-load" tooltiptext="&scaffold.toolbar.load.label;" command="cmd_load" class="zotero-tb-button" />
diff --git a/chrome/content/zotero-platform/mac/tab.css b/chrome/content/zotero-platform/mac/tab.css
deleted file mode 100644
index 9d6de9b3a6..0000000000
--- a/chrome/content/zotero-platform/mac/tab.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#zotero-toolbar {
-	-moz-appearance: none !important;
-	background: url("chrome://zotero/skin/mac/toolbar-background.png") left center repeat-x;
-}
\ No newline at end of file
diff --git a/chrome/content/zotero/about.xhtml b/chrome/content/zotero/about.xhtml
index 41f4d049c3..515aea4a2e 100644
--- a/chrome/content/zotero/about.xhtml
+++ b/chrome/content/zotero/about.xhtml
@@ -8,8 +8,12 @@
 <window
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	onload="moveToAlertPosition(); sizeToContent(); document.getElementById('zotero-about').getButton('accept').focus();"
-	inwindowmenu="false"
-	class="zotero-window">
+	inwindowmenu="false">
+	<script>
+		var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+		Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
+	</script>
 <dialog
 		id="zotero-about"
 		class="zotero-window"
@@ -17,8 +21,6 @@
 		buttonlabelaccept="&zotero.about.close;"
 		ondialogaccept="return true;">
 	
-	<script src="include.js"/>
-	
 	<vbox id="aboutcontent" class="zotero-dialog">
 		<div xmlns="http://www.w3.org/1999/xhtml">
 			<img id="logo" src="chrome://zotero/skin/zotero.svg" alt="Zotero" />
@@ -28,7 +30,6 @@
 			<label id="changelog" class="zotero-text-link" value="&zotero.whatsNew;"/>
 		</hbox>
 		<script>
-			var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
 			var version = Zotero.version;
 			if (!Zotero.isMac) {
 				version += ` (${Services.appinfo.is64Bit ? '64' : '32'}-bit)`;
diff --git a/chrome/content/zotero/customElements.js b/chrome/content/zotero/customElements.js
index e93bb02dd9..43659de7d9 100644
--- a/chrome/content/zotero/customElements.js
+++ b/chrome/content/zotero/customElements.js
@@ -157,14 +157,49 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesC
 	}
 
 	// inject custom CSS into FF built-in custom elements (currently only <wizard>)
-	for (let element of ["wizard"]) {
-		let oldAttachShadow = customElements.get(element).prototype.attachShadow;
-		customElements.get(element).prototype.attachShadow = function () {
-			let shadowRoot = oldAttachShadow.apply(this, arguments);
-			shadowRoot.appendChild(MozXULElement.parseXULToFragment(
-				`<html:link rel="stylesheet" href="chrome://zotero/skin/${element}.css"/>`
-			));
-			return shadowRoot;
-		};
+	const InjectCSSConfig = {
+		global: ["wizard"],
+		win: [
+			"wizard",
+			{
+				element: "dialog",
+				// The `attachShadow` are cleared in <dialog>, we need to monkey-patch after `connectedCallback`.
+				patchee: "connectedCallback"
+			}
+		],
+		mac: [],
+		linux: [],
+	};
+	for (let [key, configs] of Object.entries(InjectCSSConfig)) {
+		if (key == "win" && !Zotero.isWin) continue;
+		if (key == "mac" && !Zotero.isMac) continue;
+		if (key == "linux" && !Zotero.isLinux) continue;
+		let prefix = "";
+		if (key == "global") {
+			prefix = "zotero/skin/";
+		}
+		else {
+			prefix = "zotero-platform/content/";
+		}
+		for (let config of configs) {
+			let element, patchee;
+			// By default, monkey-patch `attachShadow`
+			if (typeof config === "string") {
+				element = config;
+				patchee = "attachShadow";
+			}
+			else {
+				element = config.element;
+				patchee = config.patchee;
+			}
+			let oldFunc = customElements.get(element).prototype[patchee];
+			customElements.get(element).prototype[patchee] = function () {
+				let ret = oldFunc.apply(this, arguments);
+				this.shadowRoot.append(MozXULElement.parseXULToFragment(
+					`<html:link rel="stylesheet" href="chrome://${prefix}${element}.css"/>`
+				));
+				return ret;
+			};
+		}
 	}
 }
diff --git a/chrome/content/zotero/errorReport.xhtml b/chrome/content/zotero/errorReport.xhtml
index dcabc51745..95cce6d0f6 100644
--- a/chrome/content/zotero/errorReport.xhtml
+++ b/chrome/content/zotero/errorReport.xhtml
@@ -15,7 +15,11 @@
 	<html:link rel="localization" href="toolkit/global/wizard.ftl"/>
 </linkset>
 
-<script src="chrome://global/content/customElements.js"/>
+<script>
+	var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+	Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
+	Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
+</script>
 
 <wizard title="&zotero.errorReport.title;" width="550" height="450">
 	<script>
diff --git a/chrome/content/zotero/exportOptions.xhtml b/chrome/content/zotero/exportOptions.xhtml
index 6d4cbc3ce2..d90b2f42d9 100644
--- a/chrome/content/zotero/exportOptions.xhtml
+++ b/chrome/content/zotero/exportOptions.xhtml
@@ -15,7 +15,11 @@
 	buttons="cancel,accept"
 	id="zotero-export-options">
 	
-	<script src="include.js"/>
+	<script>
+		var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+		Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
+	</script>
 	<script src="charsetMenu.js"/>
 	<script src="exportOptions.js"/>
 	<script type="application/javascript">
diff --git a/chrome/content/zotero/import/importWizard.xhtml b/chrome/content/zotero/import/importWizard.xhtml
index 42b364261e..3d65a616d2 100644
--- a/chrome/content/zotero/import/importWizard.xhtml
+++ b/chrome/content/zotero/import/importWizard.xhtml
@@ -7,7 +7,6 @@
 
 <window data-l10n-id="import-window"
 		id="import-wizard-window"
-		class="zotero-window"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 		xmlns:html="http://www.w3.org/1999/xhtml"
 		onload="Zotero_Import_Wizard.init()"
@@ -23,7 +22,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 	</script>
 	
-	<wizard id="import-wizard" class="import-wizard zotero-window" width="600" height="400">
+	<wizard id="import-wizard" class="import-wizard" width="600" height="400">
 		<wizardpage pageid="page-start" data-header-label-id="import-where-from">
 			<radiogroup id="import-source-group" align="start">
 				<radio value="file" data-l10n-id="import-source-file" />
diff --git a/chrome/content/zotero/longTagFixer.xhtml b/chrome/content/zotero/longTagFixer.xhtml
index 9d7efc6c2a..0ece8650ad 100644
--- a/chrome/content/zotero/longTagFixer.xhtml
+++ b/chrome/content/zotero/longTagFixer.xhtml
@@ -14,7 +14,6 @@
 	onload="Zotero_Long_Tag_Fixer.init()">
 <dialog
 	id="zotero-long-tag-fixer"
-	class="zotero-dialog"
 	buttons="cancel,accept"
 >	
 	<html:div id="intro">
diff --git a/chrome/content/zotero/newCollectionDialog.xhtml b/chrome/content/zotero/newCollectionDialog.xhtml
index 3916d4a94b..09fc49ea17 100644
--- a/chrome/content/zotero/newCollectionDialog.xhtml
+++ b/chrome/content/zotero/newCollectionDialog.xhtml
@@ -53,7 +53,6 @@
 	</linkset>
 
 	<dialog
-		class="zotero-dialog"
 		buttons="cancel,accept"
 		data-l10n-id="new-collection-dialog"
 		data-l10n-attrs="buttonlabelaccept"
diff --git a/chrome/content/zotero/rtfScan.xhtml b/chrome/content/zotero/rtfScan.xhtml
index c0d0016241..10935b2486 100644
--- a/chrome/content/zotero/rtfScan.xhtml
+++ b/chrome/content/zotero/rtfScan.xhtml
@@ -8,7 +8,6 @@
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 		xmlns:html="http://www.w3.org/1999/xhtml"
 		id="rtfscan-wizard-window"
-		class="zotero-window"
 		onload="Zotero_RTFScan.init()"
 >
 	<linkset>
@@ -22,7 +21,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 	</script>
 	
-	<wizard id="rtfscan-wizard" class="rtfscan-wizard zotero-window" width="700" height="550" data-l10n-id="rtfScan-wizard">
+	<wizard id="rtfscan-wizard" class="rtfscan-wizard" width="700" height="550" data-l10n-id="rtfScan-wizard">
 		<wizardpage pageid="page-start" data-l10n-id="rtfScan-intro-page">
 			<div>
 				<span class="page-start-1" data-l10n-id="rtfScan-introPage-description" />
diff --git a/chrome/content/zotero/runJS.html b/chrome/content/zotero/runJS.html
index 7945818b18..5dc6935ab9 100644
--- a/chrome/content/zotero/runJS.html
+++ b/chrome/content/zotero/runJS.html
@@ -3,7 +3,7 @@
 		<title>Run JavaScript</title>
 		<link href="chrome://zotero-platform/content/zotero.css" rel="stylesheet"/>
 	</head>
-	<body class="zotero-window">
+	<body>
 		<nav>
 			<button onclick="run()">Run</button>
 			<span id="run-label"></span>
diff --git a/chrome/content/zotero/selectItemsDialog.xhtml b/chrome/content/zotero/selectItemsDialog.xhtml
index b050779cb4..1e3fac710e 100644
--- a/chrome/content/zotero/selectItemsDialog.xhtml
+++ b/chrome/content/zotero/selectItemsDialog.xhtml
@@ -42,11 +42,10 @@
 	height="450"
 	persist="screenX screenY width height"
 	style="display: flex"
-	class="zotero-window"
+	class="zotero-dialog"
 >
 <dialog
 	id="select-items-dialog"
-	class="zotero-window"
 	orient="vertical"
 	buttons="cancel,accept"
 >
diff --git a/chrome/content/zotero/standalone/basicViewer.xhtml b/chrome/content/zotero/standalone/basicViewer.xhtml
index f8eab84d0e..f1e5629c3d 100644
--- a/chrome/content/zotero/standalone/basicViewer.xhtml
+++ b/chrome/content/zotero/standalone/basicViewer.xhtml
@@ -27,6 +27,7 @@
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
+<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
 <?xul-overlay href="chrome://zotero/content/standalone/editMenuOverlay.xul"?>
 <?xul-overlay href="chrome://zotero-platform/content/standalone/menuOverlay.xul"?>
 
@@ -122,7 +123,7 @@
 		</menupopup>
 	</popupset>
 	
-	<toolbox id="navigator-toolbox" class="toolbox-top" mode="icons" defaultmode="icons">
+	<toolbox id="navigator-toolbox" class="toolbox-top menubar-container" mode="icons" defaultmode="icons">
 		<!-- Menu -->
 		<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
 				defaultset="menubar-items"
diff --git a/chrome/content/zotero/standalone/standalone.js b/chrome/content/zotero/standalone/standalone.js
index e1d824d9b0..dd47ac7ff4 100644
--- a/chrome/content/zotero/standalone/standalone.js
+++ b/chrome/content/zotero/standalone/standalone.js
@@ -52,146 +52,7 @@ const ZoteroStandalone = new function() {
 	/**
 	 * Run when standalone window first opens
 	 */
-	this.onLoad = function() {
-		// Fix window without menubar/titlebar when Zotero is closed in full-screen mode in OS X 10.11+
-		if (Zotero.isMac && window.document.documentElement.getAttribute('sizemode') == 'fullscreen') {
-			window.document.documentElement.setAttribute('sizemode', 'normal');
-		}
-		
-		// Create tab bar by default
-		document.documentElement.setAttribute('drawintitlebar', true);
-		document.documentElement.setAttribute('tabsintitlebar', true);
-		if (Zotero.isMac) {
-			document.documentElement.setAttribute('chromemargin', '0,-1,-1,-1');
-		}
-		else {
-			document.documentElement.setAttribute('chromemargin', '0,2,2,2');
-		}
-
-		if (Zotero.isWin) {
-			let windowIcon = document.querySelector(".titlebar-icon");
-			// Simulate Windows window control
-			windowIcon.addEventListener("dblclick", (ev) => {
-				if (ev.button !== 0) {
-					return;
-				}
-				window.close();
-			});
-			const DBLCLICK_INTERVAL = 300;
-			let leftClicked = false;
-			let simulatingClick = false;
-			windowIcon.addEventListener("click", (ev) => {
-				// If already/about to open, do nothing.
-				if (simulatingClick || leftClicked) {
-					return;
-				}
-				// Left-click: open at icon
-				if (ev.button === 0) {
-					leftClicked = true;
-					// Reset leftClicked flag to allow open again
-					const onWindowClick = (ev) => {
-						leftClicked = false;
-						window.removeEventListener("click", onWindowClick);
-					}
-					// Delay to allow dblclick happen
-					setTimeout(() => {
-						// Clicking inside image (36*36)
-						openWindowMenu(2, 35, ()=>{
-							setTimeout(()=>window.addEventListener("click", onWindowClick), 0);
-						});
-
-					}, DBLCLICK_INTERVAL);
-					return;
-				}
-
-				// Right-click: open at cursor
-				if (ev.button === 2) {
-					openWindowMenu();
-				}
-
-				/**
-				 * What we do here:
-				 * We want to open the window menu when clicking the window icon.
-				 * Why we do this way:
-				 * The window menu is a native menu, which is not accessible from JS.
-				 * Firefox didn't expose this to the JS level (they do at a C++ level),
-				 * which forces us to simulate a native right-click on a `-moz-window-drag: drag` element.
-				 * How we do this:
-				 * 1. temporarily change the -moz-window-drag of the icon after clicking,
-				 * 2. simulate a native right-click (which triggers the window menu),
-				 * 3. change the -moz-window-drag back to no-drag.
-				 * The function is to open window menu. If X or Y not given, use click position.
-				 */
-				function openWindowMenu(clientX = undefined, clientY = undefined, callback = undefined) {
-					simulatingClick = true;
-					windowIcon.style["-moz-window-dragging"] = "drag";
-	
-					const resolution = windowUtils.getResolution();
-					const scaleValue = window.devicePixelRatio;
-					const getX = (inputX) => {
-						let winInnerOffsetX
-							= window.top.mozInnerScreenX
-								+ (window.mozInnerScreenX - window.top.mozInnerScreenX) * resolution;
-						return (
-							(inputX * resolution + winInnerOffsetX)* scaleValue
-						);
-					};
-					const getY = (inputY) => {
-						let winInnerOffsetY
-							= window.top.mozInnerScreenY
-								+ (window.mozInnerScreenY - window.top.mozInnerScreenY) * resolution;
-						return (
-							(inputY * resolution + winInnerOffsetY) * scaleValue
-						);
-					};
-
-					const x = getX(clientX ?? ev.x);
-					const y = getY(clientY ?? ev.y);
-
-					// Following implementation from https://searchfox.org/mozilla-central/rev/ffdc4971dc18e1141cb2a90c2b0b776365650270/testing/mochitest/tests/SimpleTest/EventUtils.js#1323
-					windowUtils.sendNativeMouseEvent(
-						x,
-						y,
-						windowUtils.NATIVE_MOUSE_MESSAGE_BUTTON_DOWN,
-						2, // button
-						0, // modifierFlags
-						windowIcon,
-						function () {
-							windowUtils.sendNativeMouseEvent(
-								x,
-								y,
-								windowUtils.NATIVE_MOUSE_MESSAGE_BUTTON_UP,
-								2, // button
-								0, // modifierFlags
-								windowIcon,
-								{
-									observe: (_subject, topic, _data) => {
-										if (topic == "mouseevent") {
-											if (typeof clientX !== "undefined" || typeof clientY !== "undefined")
-											{
-												// Move mouse back if the click position is given
-												windowUtils.sendNativeMouseEvent(
-													getX(ev.x),
-													getY(ev.y),
-													windowUtils.NATIVE_MOUSE_MESSAGE_MOVE,
-													0, // button
-													0, // modifierFlags
-													windowIcon
-												);
-											}
-											windowIcon.style["-moz-window-dragging"] = "no-drag";
-											callback && callback();
-											simulatingClick = false;
-										}
-									},
-								},
-							);
-						}
-					);
-				}
-			});
-		}
-		
+	this.onLoad = function () {
 		this.switchMenuType('library');
 		this._notifierID = Zotero.Notifier.registerObserver(
 			{
diff --git a/chrome/content/zotero/titlebar.js b/chrome/content/zotero/titlebar.js
new file mode 100644
index 0000000000..fc2e62c23b
--- /dev/null
+++ b/chrome/content/zotero/titlebar.js
@@ -0,0 +1,173 @@
+/*
+	***** BEGIN LICENSE BLOCK *****
+	
+	Copyright © 2024 Center for History and New Media
+						  George Mason University, Fairfax, Virginia, USA
+						  http://zotero.org
+	
+	This file is part of Zotero.
+	
+	Zotero is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+	
+	Zotero is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+	
+	You should have received a copy of the GNU Affero General Public License
+	along with Zotero.  If not, see <http://www.gnu.org/licenses/>.
+	
+	***** END LICENSE BLOCK *****
+*/
+
+
+(() => {
+let platforms = document.querySelector("window")?.getAttribute("drawintitlebar-platforms");
+if (platforms) {
+	if (Zotero.isMac && !platforms.includes("mac")) return;
+	else if (Zotero.isWin && !platforms.includes("win")) return;
+	else if (Zotero.isLinux && !platforms.includes("linux")) return;
+}
+
+window.addEventListener("load", function () {
+	// Fix window without menubar/titlebar when Zotero is closed in full-screen mode in OS X 10.11+
+	if (Zotero.isMac && window.document.documentElement.getAttribute('sizemode') == 'fullscreen') {
+		window.document.documentElement.setAttribute('sizemode', 'normal');
+	}
+
+	// Create tab bar by default
+	document.documentElement.setAttribute('drawintitlebar', true);
+	document.documentElement.setAttribute('tabsintitlebar', true);
+	if (Zotero.isMac) {
+		document.documentElement.setAttribute('chromemargin', '0,-1,-1,-1');
+	}
+	else {
+		document.documentElement.setAttribute('chromemargin', '0,2,2,2');
+	}
+
+	if (Zotero.isWin) {
+		let windowIcon = document.querySelector(".titlebar-icon");
+		// Simulate Windows window control
+		windowIcon.addEventListener("dblclick", (ev) => {
+			if (ev.button !== 0) {
+				return;
+			}
+			window.close();
+		});
+		const DBLCLICK_INTERVAL = 300;
+		let leftClicked = false;
+		let simulatingClick = false;
+		windowIcon.addEventListener("click", (ev) => {
+			// If already/about to open, do nothing.
+			if (simulatingClick || leftClicked) {
+				return;
+			}
+			// Left-click: open at icon
+			if (ev.button === 0) {
+				leftClicked = true;
+				// Reset leftClicked flag to allow open again
+				const onWindowClick = () => {
+					leftClicked = false;
+					window.removeEventListener("click", onWindowClick);
+				};
+				// Delay to allow dblclick happen
+				setTimeout(() => {
+					// Clicking inside image (36*36)
+					openWindowMenu(2, 35, () => {
+						setTimeout(() => window.addEventListener("click", onWindowClick), 0);
+					});
+				}, DBLCLICK_INTERVAL);
+				return;
+			}
+
+			// Right-click: open at cursor
+			if (ev.button === 2) {
+				openWindowMenu();
+			}
+
+			/**
+			 * What we do here:
+			 * We want to open the window menu when clicking the window icon.
+			 * Why we do this way:
+			 * The window menu is a native menu, which is not accessible from JS.
+			 * Firefox didn't expose this to the JS level (they do at a C++ level),
+			 * which forces us to simulate a native right-click on a `-moz-window-drag: drag` element.
+			 * How we do this:
+			 * 1. temporarily change the -moz-window-drag of the icon after clicking,
+			 * 2. simulate a native right-click (which triggers the window menu),
+			 * 3. change the -moz-window-drag back to no-drag.
+			 * The function is to open window menu. If X or Y not given, use click position.
+			 */
+			function openWindowMenu(clientX = undefined, clientY = undefined, callback = undefined) {
+				simulatingClick = true;
+				windowIcon.style["-moz-window-dragging"] = "drag";
+
+				const resolution = windowUtils.getResolution();
+				const scaleValue = window.devicePixelRatio;
+				const getX = (inputX) => {
+					let winInnerOffsetX
+						= window.top.mozInnerScreenX
+							+ (window.mozInnerScreenX - window.top.mozInnerScreenX) * resolution;
+					return (
+						(inputX * resolution + winInnerOffsetX) * scaleValue
+					);
+				};
+				const getY = (inputY) => {
+					let winInnerOffsetY
+						= window.top.mozInnerScreenY
+							+ (window.mozInnerScreenY - window.top.mozInnerScreenY) * resolution;
+					return (
+						(inputY * resolution + winInnerOffsetY) * scaleValue
+					);
+				};
+
+				const x = getX(clientX ?? ev.x);
+				const y = getY(clientY ?? ev.y);
+
+				// Following implementation from https://searchfox.org/mozilla-central/rev/ffdc4971dc18e1141cb2a90c2b0b776365650270/testing/mochitest/tests/SimpleTest/EventUtils.js#1323
+				windowUtils.sendNativeMouseEvent(
+					x,
+					y,
+					windowUtils.NATIVE_MOUSE_MESSAGE_BUTTON_DOWN,
+					2, // button
+					0, // modifierFlags
+					windowIcon,
+					function () {
+						windowUtils.sendNativeMouseEvent(
+							x,
+							y,
+							windowUtils.NATIVE_MOUSE_MESSAGE_BUTTON_UP,
+							2, // button
+							0, // modifierFlags
+							windowIcon,
+							{
+								observe: (_subject, topic, _data) => {
+									if (topic == "mouseevent") {
+										if (typeof clientX !== "undefined" || typeof clientY !== "undefined") {
+											// Move mouse back if the click position is given
+											windowUtils.sendNativeMouseEvent(
+												getX(ev.x),
+												getY(ev.y),
+												windowUtils.NATIVE_MOUSE_MESSAGE_MOVE,
+												0, // button
+												0, // modifierFlags
+												windowIcon
+											);
+										}
+										windowIcon.style["-moz-window-dragging"] = "no-drag";
+										callback && callback();
+										simulatingClick = false;
+									}
+								},
+							},
+						);
+					}
+				);
+			}
+		});
+	}
+}, { once: true });
+})();
diff --git a/chrome/content/zotero/tools/csledit.js b/chrome/content/zotero/tools/csledit.js
index 5f4322f3d1..30bf09e0ea 100644
--- a/chrome/content/zotero/tools/csledit.js
+++ b/chrome/content/zotero/tools/csledit.js
@@ -279,7 +279,7 @@ var Zotero_CSL_Editor = new function () {
 				}
 			</style>
 		</head>
-		<body id="csl-edit-preview"><div class="${containerClass}">${content}</div></body>
+		<body id="csl-edit-preview"><div class="${containerClass} zotero-dialog">${content}</div></body>
 		</html>`;
 	};
 }();
diff --git a/chrome/content/zotero/tools/csledit.xhtml b/chrome/content/zotero/tools/csledit.xhtml
index 63fc23662d..739624023f 100644
--- a/chrome/content/zotero/tools/csledit.xhtml
+++ b/chrome/content/zotero/tools/csledit.xhtml
@@ -33,7 +33,6 @@
 
 <window
 	id="csl-edit"
-	class="zotero-window"
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	xmlns:html="http://www.w3.org/1999/xhtml"
 	onload="Zotero_CSL_Editor.init();"
@@ -42,7 +41,7 @@
 	<script src="chrome://zotero/content/include.js"/>
 	<script src="csledit.js"/>
 	
-	<vbox class="zotero-window" flex="1">
+	<vbox flex="1">
 		<vbox class="csl-edit-toolbars">
 			<hbox class="csl-edit-toolbar">
 				<button id="preview-refresh-button" label="&zotero.general.refresh;" oncommand="Zotero_CSL_Editor.refresh()"/>
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 644f1e810d..71988113cb 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -64,6 +64,7 @@
 		
 		Services.scriptloader.loadSubScript("resource://zotero/require.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/standalone/standalone.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/titlebar.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/platformKeys.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/editMenuOverlay.js", this);
 		
diff --git a/chrome/skin/default/zotero/itemPane.css b/chrome/skin/default/zotero/itemPane.css
index ea8144da2c..129cf222a4 100644
--- a/chrome/skin/default/zotero/itemPane.css
+++ b/chrome/skin/default/zotero/itemPane.css
@@ -55,12 +55,6 @@
 }
 
 /* Buttons in trash and feed views */
-.zotero-item-pane-top-buttons {
-	-moz-appearance: toolbar;
-	-moz-box-pack: center;
-	min-height: 3em;
-}
-
 .zotero-item-pane-top-buttons > button {
 	-moz-box-flex: 1
 }
diff --git a/scss/_zotero.scss b/scss/_zotero.scss
index ffa5d8bf5d..68aad79c68 100644
--- a/scss/_zotero.scss
+++ b/scss/_zotero.scss
@@ -34,6 +34,7 @@
 @import "components/icons";
 @import "components/import-wizard";
 @import "components/item-tree";
+@import "components/listheader";
 @import "components/longTagFixer";
 @import "components/mainWindow";
 @import "components/menu";
@@ -49,6 +50,7 @@
 @import "components/syncButtonTooltip";
 @import "components/tabBar";
 @import "components/tagSelector";
+@import "components/titleBar";
 @import "components/splitter";
 @import "components/textLink";
 @import "components/toolbar";
diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
index fbdf935a08..a2d5ff1fa3 100644
--- a/scss/abstracts/_mixins.scss
+++ b/scss/abstracts/_mixins.scss
@@ -236,10 +236,22 @@
 	components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS).
 	Box-shadow is used to be able to set the radius.
 */
-@mixin focus-ring {
-	&:focus-visible {
-	  outline: none;
-	  box-shadow: 0 0 0 var(--width-focus-border) -moz-accent-color;
-	  border-radius: var(--radius-focus-border);
+@mixin focus-ring($thin: false, $selector: focus-visible) {
+	&:#{$selector} {
+		@media (-moz-platform: windows) {
+			outline: var(--color-focus-outer-border) solid var(--width-focus-outer-border);
+			outline-offset: var(--width-focus-border);
+			box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
+		}
+
+		@media not (-moz-platform: windows) {
+			outline: none;
+			box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
+
+			@if $thin {
+				--width-focus-border: 1px;
+				--color-focus-border: var(--color-accent);
+			}
+		}
 	}
-  }
+}
diff --git a/scss/base/_base.scss b/scss/base/_base.scss
index 23de9c5a4b..a64fd713cd 100644
--- a/scss/base/_base.scss
+++ b/scss/base/_base.scss
@@ -1,30 +1,25 @@
 :root {
-    font-family: system-ui, -apple-system, sans-serif;
-    font-size: 13px;
-    font-style: normal;
-    line-height: 1.3333333333;
-    @media (-moz-platform: windows) {
-        --color-accent: var(--accent-blue);
-        @include light-dark(--color-focus-border, #000, #fff);
-        --width-focus-border: 2px;
-    }
-    @media (-moz-platform: macos) {
-        --color-accent: SelectedItem;
-        --color-focus-border: color-mix(in srgb, var(--color-accent) 50%, transparent);
-        --width-focus-border: 3px;
-    }
-    @media (-moz-platform: linux) {
-        --color-accent: SelectedItem;
-        --color-focus-border: var(--color-accent);
-        --width-focus-border: 2px;
-    }
-    --color-focus-search: color-mix(in srgb, var(--color-accent) 50%, transparent);
-}
-
-#zotero-collections-pane, #zotero-item-pane {
-    background: var(--material-sidepane);
-}
-
-#zotero-title-bar {
-    border-bottom: var(--material-panedivider);
+	font-family: system-ui, -apple-system, sans-serif;
+	font-size: 13px;
+	font-style: normal;
+	line-height: 1.3333333333;
+	@media (-moz-platform: windows) {
+		--color-accent: var(--accent-blue);
+		@include light-dark(--color-focus-outer-border, var(--fill-primary), var(--accent-white));
+		@include light-dark(--color-focus-border, var(--accent-white), #00000080);
+		--width-focus-outer-border: 2px;
+		--width-focus-border: 1px;
+	}
+	@media (-moz-platform: macos) {
+		--color-accent: SelectedItem;
+		--color-focus-border: color-mix(in srgb, var(--color-accent) 50%, transparent);
+		--width-focus-border: 3px;
+	}
+	@media (-moz-platform: linux) {
+		--color-accent: SelectedItem;
+		--color-focus-border: -moz-accent-color;
+		--width-focus-border: 2px;
+	}
+	// Only used on Windows
+	--color-form-element-base-background: var(--color-background);
 }
diff --git a/scss/components/_clicky.scss b/scss/components/_clicky.scss
index 91b4a0e8e9..dda9667325 100644
--- a/scss/components/_clicky.scss
+++ b/scss/components/_clicky.scss
@@ -4,11 +4,11 @@
 
 	&:not([disabled=true]) {
 		&:hover {
-			background-color: var(--fill-quinary) !important;
+			background: var(--fill-quinary) !important;
 		}
 
 		&:active {
-			background-color: var(--fill-quarternary) !important;
+			background: var(--fill-quarternary) !important;
 		}
 	}
 }
diff --git a/scss/components/_collection-tree.scss b/scss/components/_collection-tree.scss
index d389f5fa2a..317402ab93 100644
--- a/scss/components/_collection-tree.scss
+++ b/scss/components/_collection-tree.scss
@@ -14,6 +14,7 @@ $icons: (
 #zotero-collections-pane {
 	min-width: $min-width-collections-pane;
 	width: $min-width-collections-pane;
+	background: var(--material-sidepane);
 }
 
 #zotero-collections-tree-container {
diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss
index cf0d36d310..6472155160 100644
--- a/scss/components/_item-tree.scss
+++ b/scss/components/_item-tree.scss
@@ -32,6 +32,8 @@
 		}
 
 		.first-column {
+			padding-inline-start: 36px;
+
 			&::before {
 				content: "";
 				display: inline-block;
diff --git a/scss/components/_itemPane.scss b/scss/components/_itemPane.scss
index 2f31c9e39e..975a570744 100644
--- a/scss/components/_itemPane.scss
+++ b/scss/components/_itemPane.scss
@@ -3,4 +3,5 @@
 	min-width: $min-width-item-pane;
 	/* Need a min height to prevent layout issues in stacked mode */
 	min-height: 168px;
+	background: var(--material-sidepane);
 }
diff --git a/scss/components/_listheader.scss b/scss/components/_listheader.scss
new file mode 100644
index 0000000000..7879e464f5
--- /dev/null
+++ b/scss/components/_listheader.scss
@@ -0,0 +1,56 @@
+/* Adapted from Mozilla common-shared.css */
+/* https://searchfox.org/mozilla-central/rev/2f5ed7b7244172d46f538051250b14fb4d8f1a5f/toolkit/themes/shared/in-content/common-shared.css */
+
+select[size][multiple],
+listheader,
+richlistbox {
+	appearance: none;
+	margin-inline: 0;
+	background: var(--material-background);
+	border: var(--material-panedivider);
+}
+
+treecol {
+	appearance: none;
+	border: none;
+
+    background: transparent;
+
+    &:hover {
+        background: var(--material-mix-quinary);
+    }
+
+    &:hover:active {
+        background: var(--material-mix-quarternary);
+    }
+}
+
+listheader + richlistbox {
+	margin-top: 0;
+	border-top: none;
+}
+
+select[size][multiple] > option,
+treechildren::-moz-tree-row {
+	padding: 0.3em;
+	margin: 0;
+	border: none;
+	background-image: none;
+}
+
+richlistitem hbox {
+	overflow: hidden;
+}
+
+richlistitem[selected] menulist:focus-visible {
+	outline-offset: -2px;
+}
+
+richlistbox[disabled] {
+	opacity: 0.6;
+	pointer-events: none;
+}
+
+dialog richlistbox > richlistitem[disabled] {
+	font-weight: 600;
+}
\ No newline at end of file
diff --git a/scss/components/_mainWindow.scss b/scss/components/_mainWindow.scss
index 57204061cd..bfd41c1487 100644
--- a/scss/components/_mainWindow.scss
+++ b/scss/components/_mainWindow.scss
@@ -1,114 +1,3 @@
-// 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);
 }
diff --git a/scss/components/_reader.scss b/scss/components/_reader.scss
index 877b2eddcf..0ab71eedab 100644
--- a/scss/components/_reader.scss
+++ b/scss/components/_reader.scss
@@ -2,4 +2,11 @@ menupopup.tags-popup {
 	font: inherit;
 	min-width: 300px;
 	padding-inline: 8px;
+
+	@media (-moz-platform: windows) {
+		& > tags-box {
+			// padding-inline does not work on Windows
+			margin-inline: 8px;
+		}
+	}
 }
diff --git a/scss/components/_richlistbox.scss b/scss/components/_richlistbox.scss
index 809b89a699..fabfa2b3f8 100644
--- a/scss/components/_richlistbox.scss
+++ b/scss/components/_richlistbox.scss
@@ -1,12 +1,20 @@
-richlistbox {
+richlistbox.theme-listbox {
     background: var(--material-background);
     border: var(--material-panedivider);
 
     richlistitem {
-        color: var(--fill-primary);
-
-        &[selected=true] {
-            background: var(--color-accent);
-        }
+        --listitem-selectedBackground: var(--tag-gray);
+        --listitem-selectedFocusCurrentBackground: var(--color-accent);
+        --listitem-selectedTextColor: var(--accent-white);
+        --listitem-selectedBorder: transparent;
+        --listitem-selectedBottomBorder: transparent;
+        --listitem-selectedCurrentBorder: transparent;
+        --listitem-selectedFocusBorder: transparent;
+        --listitem-selectedFocusBottomBorder: transparent;
+        --listitem-selectedFocusCurrentBorder: transparent;
+        --listitem-selectedFocusBackground: var(--color-accent);
+        --listitem-selectedFocusColor: var(--accent-white);
+        --listitem-selectedColor: var(--accent-white);
+        --listitem-selectedFocusCurrentBottomBorder: transparent;
     }
 }
diff --git a/scss/components/_search.scss b/scss/components/_search.scss
index 3b6d1ebc57..b5f4321077 100644
--- a/scss/components/_search.scss
+++ b/scss/components/_search.scss
@@ -4,9 +4,10 @@
 	height: 36px;
 
 	input {
-		background: var(--material-background);
+		background-color: var(--material-background);
 		border-radius: 5px;
-		border: var(--material-border-quinary);
+		// Overwrite input style on Windows
+		border: var(--material-border-quinary) !important;
 		color: var(--fill-primary);
 		flex: 1 0;
 		margin: 6px 0px;
@@ -18,10 +19,8 @@
 			opacity: 1.0;
 		}
 	
-		&:focus {
-			outline: none;
-			border-color: var(--color-focus-search);
-			box-shadow: 0 0 0 calc(var(--width-focus-border) - 1px) var(--color-focus-search);
+		@media not (-moz-platform: windows) {
+			@include focus-ring;
 		}
 	}
 
@@ -54,10 +53,8 @@ search-textbox {
 		opacity: 1.0;
 	}
 
-	&:focus {
-		outline: none;
-		border-color: transparent;
-		box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-search);
+	@media not (-moz-platform: windows) {
+		@include focus-ring(false, focus);
 	}
 }
 
diff --git a/scss/components/_tabsMenu.scss b/scss/components/_tabsMenu.scss
index 7a279a7180..7233488cff 100644
--- a/scss/components/_tabsMenu.scss
+++ b/scss/components/_tabsMenu.scss
@@ -8,7 +8,6 @@
 	padding: 7px;
 	border-radius: 5px;
 	--width-focus-border: 3px;
-	--radius-focus-border: 5px;
 }
 
 #zotero-tabs-menu-filter {
@@ -17,7 +16,10 @@
 	border: 1px solid transparent;
 	padding-inline-start: 5px !important;
 	padding: 2px;
-	@include focus-ring;
+
+	@media not (-moz-platform: windows) {
+		@include focus-ring;
+	}
 }
 
 #zotero-tabs-menu-list {
diff --git a/scss/components/_tagSelector.scss b/scss/components/_tagSelector.scss
index d7d6b104c4..6131f9cfaa 100644
--- a/scss/components/_tagSelector.scss
+++ b/scss/components/_tagSelector.scss
@@ -92,10 +92,7 @@
 		background-color: var(--fill-quarternary);
 	}
 
-	&:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
-	}
+	@include focus-ring;
 
 	.icon-css {
 		fill: var(--fill-secondary);
@@ -117,9 +114,7 @@
 		padding: 2px 4px;
 	}
 
-	--width-focus-border: 1px;
-	--radius-focus-border: 5px;
-	@include focus-ring;
+	@include focus-ring(true);
 
 	&:hover {
 		background-color: var(--fill-quinary);
diff --git a/scss/components/_titleBar.scss b/scss/components/_titleBar.scss
new file mode 100644
index 0000000000..404aeafdde
--- /dev/null
+++ b/scss/components/_titleBar.scss
@@ -0,0 +1,72 @@
+// Styling for displaying tabs in the title bar
+:root:not([legacytoolbar="true"]) {
+	--tab-min-height: 36px;
+
+	& {
+		--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;
+}
+
+#zotero-title-bar {
+	border-bottom: var(--material-panedivider);
+}
+
+#titlebar {
+	display: flex;
+	align-items: center;
+	-moz-window-dragging: drag;
+	menu {
+		font-size: var(--zotero-font-size);
+	}
+}
diff --git a/scss/components/_toolbar.scss b/scss/components/_toolbar.scss
index a96907f882..6b9f74b1e1 100644
--- a/scss/components/_toolbar.scss
+++ b/scss/components/_toolbar.scss
@@ -42,11 +42,6 @@
 			min-width: 0;
 			width: 40px;
 		}
-
-		&:focus-visible {
-			outline: none;
-			box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
-		}
 	}
 }
 
diff --git a/scss/components/_toolbarbutton.scss b/scss/components/_toolbarbutton.scss
index 259d3e656f..3ee3b4309b 100644
--- a/scss/components/_toolbarbutton.scss
+++ b/scss/components/_toolbarbutton.scss
@@ -27,6 +27,8 @@ toolbarbutton {
 	&:active, &[selected] {
 		background-color: var(--fill-quarternary);
 	}
+
+	@include focus-ring;
 	
 	&:disabled,
 	&[disabled="true"] {
diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss
index e978d87817..92a7ea37c6 100644
--- a/scss/components/_virtualized-table.scss
+++ b/scss/components/_virtualized-table.scss
@@ -48,12 +48,8 @@
 		box-sizing: border-box;
 
 		&.label {
-			padding-inline-end: 4px;
-		}
-
-		&.label,
-		&.first-column {
 			padding-inline-start: 0;
+			padding-inline-end: 4px;
 		}
 
 		&.first-column,
@@ -225,6 +221,9 @@
 	height: 1.83333333em; // 22px @ 12px font size
 	overflow: hidden;
 	border-bottom: 1px solid var(--material-border-quarternary);
+	padding-inline: 8px;
+	box-sizing: border-box;
+	padding-inline-end: calc(8px + var(--scrollbar-width, 0px));
 
 	@include comfortable {
 		height: 2.33333333em; // 28px @ 12px font size
@@ -270,10 +269,6 @@
 			background: var(--material-mix-quarternary);
 		}
 
-		&.first-column {
-			padding-inline-start: 36px;
-		}
-
 		.resizer {
 			background: linear-gradient(var(--fill-quarternary), var(--fill-quarternary)) no-repeat center/1px 66.666667%; // 14px @ 12px font size
 			cursor: col-resize;
@@ -329,6 +324,7 @@
 	flex: 1 0;
 	max-width: 100%;
 	overflow: auto;
+	padding: 4px 8px 8px;
 
 	.cell {
 		text-overflow: ellipsis;
@@ -340,6 +336,10 @@
 		// pointer-events are enabled, and we need to rerender the rows for selection
 		// before dragging.
 		pointer-events: none;
+
+		&.first-column {
+			padding-inline-start: 0;
+		}
 	}
 }
 
diff --git a/scss/components/_window.scss b/scss/components/_window.scss
index 0e56fdc09f..0d393d3303 100644
--- a/scss/components/_window.scss
+++ b/scss/components/_window.scss
@@ -1,7 +1,28 @@
-.zotero-window {
-    background: var(--material-sidepane);
+@mixin zotero-window {
+	background: var(--material-sidepane);
+	--color-form-element-base-background: var(--material-sidepane);
 }
 
-.zotero-dialog {
-    background: var(--material-background);
+@mixin zotero-dialog {
+	background: var(--material-background);
+	--color-form-element-base-background: var(--material-background);
+}
+
+window:root,
+window:root > wizard,
+body {
+	@include zotero-window();
+}
+
+window:root > dialog {
+	@include zotero-dialog();
+}
+
+// Can overwrite default style
+window:root .zotero-window {
+	@include zotero-window();
+}
+
+window:root .zotero-dialog {
+	@include zotero-dialog();
 }
diff --git a/scss/dialog-win.scss b/scss/dialog-win.scss
new file mode 100644
index 0000000000..2ca9990817
--- /dev/null
+++ b/scss/dialog-win.scss
@@ -0,0 +1,28 @@
+// Override/enhance wizard styles
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+@import "abstracts/variables";
+@import "abstracts/functions";
+@import "abstracts/mixins";
+@import "abstracts/placeholders";
+@import "abstracts/utilities";
+@import "abstracts/split-button";
+@import "abstracts/svgicon";
+
+@import "themes/light";
+@import "themes/dark";
+
+// Base
+// --------------------------------------------------
+
+@import "base/base";
+
+@import "win/abstracts/mixins";
+
+@import "win/components/button";
+
+
+.dialog-button-box {
+	margin-top: 8px;
+}
diff --git a/scss/elements/_collapsibleSection.scss b/scss/elements/_collapsibleSection.scss
index cf9315feb7..aa0afa70e2 100644
--- a/scss/elements/_collapsibleSection.scss
+++ b/scss/elements/_collapsibleSection.scss
@@ -5,7 +5,6 @@ collapsible-section {
 	padding-block: 4px;
 
 	--width-focus-border: 2px;
-	--radius-focus-border: 5px;
 
 	:not(:last-child) > & {
 		border-bottom: 1px solid var(--fill-quinary);
diff --git a/scss/elements/_editableText.scss b/scss/elements/_editableText.scss
index 88a4895d3a..b86f52e318 100644
--- a/scss/elements/_editableText.scss
+++ b/scss/elements/_editableText.scss
@@ -68,14 +68,17 @@ editable-text {
 	}
 	
 	.input {
-		--width-focus-border: 1px;
-		--radius-focus-border: 5px;
+		border-radius: 5px;
 		
 		// No focus ring for read-only fields
 		&:read-only {
 			--width-focus-border: 0px;
+			--width-focus-outer-border: 0px;
+		}
+
+		@media not (-moz-platform: windows) {
+			@include focus-ring(true);
 		}
-		@include focus-ring;
 		// Necessary for consistent padding, even if it's actually an <input>
 		-moz-default-appearance: textarea;
 		
@@ -90,13 +93,12 @@ editable-text {
 	
 		&:read-only, &:not(:focus) {
 			appearance: none;
-			background: transparent;
+			background: transparent !important;
 		}
 		
 		&:hover:not(:read-only, :focus) {
-			border-radius: 5px;
-			background-color: var(--fill-quinary);
-			box-shadow: 0 0 0 1px var(--fill-quinary);	
+			background: var(--fill-quinary) !important;
+			box-shadow: 0 0 0 1px var(--fill-quinary);
 		}
 		
 		::placeholder {
diff --git a/scss/elements/_itemBox.scss b/scss/elements/_itemBox.scss
index b47d62b3e9..7e33f2d7b2 100644
--- a/scss/elements/_itemBox.scss
+++ b/scss/elements/_itemBox.scss
@@ -7,8 +7,6 @@ item-box {
 	&[hidden] {
 		display: none;
 	}
-	--width-focus-border: 1px;
-	--radius-focus-border: 5px;
 
 	#item-box {
 		width: 100%;
@@ -27,7 +25,7 @@ item-box {
 	}
 
 	#item-type-menu {
-		@include focus-ring;
+		@include focus-ring(true);
 		margin: 0;
 		margin-inline-end: 5px !important;
 		flex: 1;
@@ -57,7 +55,7 @@ item-box {
 	}
 
 	#item-type-menu:not(:hover):not(:active) {
-		background-color: transparent;
+		background: transparent !important;
 	}
 
 	#item-type-menu > .menulist-label-box {
@@ -91,7 +89,7 @@ item-box {
 
 	/* creator type menu */
 	.creator-type-label {
-		@include focus-ring;
+		@include focus-ring(true);
 		display: inline-block;
 		// undo the padding so that the name is pushed to the end
 		margin-inline-end: -4px;
diff --git a/scss/elements/_paneHeader.scss b/scss/elements/_paneHeader.scss
index 60f2b6fba8..6d52ff205e 100644
--- a/scss/elements/_paneHeader.scss
+++ b/scss/elements/_paneHeader.scss
@@ -32,7 +32,6 @@ pane-header {
 	
 	.menu-button toolbarbutton {
 		@include svgicon-menu("go-to", "universal", "20");
-		--radius-focus-border: 5px;
 		--width-focus-border: 2px;
 		@include focus-ring;
 	}
diff --git a/scss/elements/_quickSearchTextbox.scss b/scss/elements/_quickSearchTextbox.scss
index 30421babf3..839e90af65 100644
--- a/scss/elements/_quickSearchTextbox.scss
+++ b/scss/elements/_quickSearchTextbox.scss
@@ -32,6 +32,7 @@ quick-search-textbox {
 #zotero-tb-search-menu-button {
 	width: 36px;
 	height: 28px;
+	min-height: 28px;
 	// 6px padding + 16px icon width + 2px padding
 	padding-block: 0;
 	padding-inline: 24px 4px;
@@ -45,10 +46,7 @@ quick-search-textbox {
 	color: var(--fill-secondary);
 	background: transparent;
 
-	&:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
-	}
+	@include focus-ring;
 
 	.button-menu-dropmarker {
 		display: none; /* Hide automatic dropmarker */
diff --git a/chrome/skin/default/zotero/errorReport.css b/scss/errorReport.scss
similarity index 93%
rename from chrome/skin/default/zotero/errorReport.css
rename to scss/errorReport.scss
index e8f37131dd..3e2ab3bd6a 100644
--- a/chrome/skin/default/zotero/errorReport.css
+++ b/scss/errorReport.scss
@@ -3,10 +3,6 @@ description {
 }
 
 /* Intro pane */
-#zotero-error-message {
-	background: #FFF;
-}
-
 #report-start {
 	display: flex;
 	flex-direction: column;
diff --git a/scss/linux/_errorReport.scss b/scss/linux/_errorReport.scss
deleted file mode 100644
index 26767256bf..0000000000
--- a/scss/linux/_errorReport.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-#zotero-error-message {
-    color: #3d3d3d;
-}
diff --git a/scss/mac/_titleBar.scss b/scss/mac/_titleBar.scss
index 7b8df59c08..01f8073e8e 100644
--- a/scss/mac/_titleBar.scss
+++ b/scss/mac/_titleBar.scss
@@ -1,3 +1,7 @@
 #titlebar {
 	margin-bottom: calc(0px - var(--tab-min-height));
-}
\ No newline at end of file
+}
+
+.menubar-container {
+	border: none;
+}
diff --git a/scss/preferences.scss b/scss/preferences.scss
index 7959fee48d..9fcee95460 100644
--- a/scss/preferences.scss
+++ b/scss/preferences.scss
@@ -42,6 +42,8 @@
 	min-height: 0;
 	-moz-box-flex: 1;
 	background-color: var(--material-sidepane);
+	// See scss/win/abstracts/mixin
+	--color-form-element-base-background: var(--material-sidepane);
 	color: var(--fill-primary);
 }
 
diff --git a/scss/preferences/_cite.scss b/scss/preferences/_cite.scss
index 63dfd7063d..6e8b552e15 100644
--- a/scss/preferences/_cite.scss
+++ b/scss/preferences/_cite.scss
@@ -20,3 +20,9 @@
 {
 	width: 105px;
 }
+
+#styleManager-buttons {
+	button {
+		min-width: 0;
+	}
+}
diff --git a/scss/preferences/_general.scss b/scss/preferences/_general.scss
index dc672198b4..e8c69a70dc 100644
--- a/scss/preferences/_general.scss
+++ b/scss/preferences/_general.scss
@@ -17,3 +17,9 @@
 .fileHandler-menu .menulist-icon {
 	height: 16px;
 }
+
+@media (-moz-platform: windows) {
+	button, menulist, radio, checkbox, input {
+		margin-block: 4px;
+	}
+}
diff --git a/scss/scaffold.scss b/scss/scaffold.scss
index caee84362e..75a3f27f3d 100644
--- a/scss/scaffold.scss
+++ b/scss/scaffold.scss
@@ -29,7 +29,23 @@ $scaffold-toolbarbutton-icons: (
 	}
 };
 
+.menubar-container {
+	display: flex;
+	background: var(--material-sidepane);
+	border-bottom: var(--material-panedivider);
+
+	#main-menubar {
+		pointer-events: all;
+	}
+}
+
 #zotero-toolbar {
+	@media not (-moz-platform: macos) {
+		appearance: none;
+		background: var(--material-sidepane);
+	}
+	border-bottom: var(--material-panedivider);
+
 	toolbarbutton {
 		width: 28px;
 		height: 28px;
@@ -71,10 +87,6 @@ tab {
 	grid-template-columns: 1fr max-content;
 }
 
-#tabpanel-metadata input {
-	height: 1.5em;
-}
-
 #metadata-bottom-row {
 	display: flex;
 	align-items: center;
@@ -90,6 +102,7 @@ tab {
 
 #output {
 	height:200px;
+	background: var(--material-background);
 }
 
 richlistbox {
@@ -114,57 +127,6 @@ vbox > splitter {
 	cursor: row-rgb(4, 4, 4)e;
 }
 
-/* Adapted from Mozilla common-shared.css */
-/* https://searchfox.org/mozilla-central/rev/2f5ed7b7244172d46f538051250b14fb4d8f1a5f/toolkit/themes/shared/in-content/common-shared.css */
-
-select[size][multiple],
-listheader,
-richlistbox {
-	appearance: none;
-	margin-inline: 0;
-	background: var(--material-background);
-	border: var(--material-panedivider);
-}
-
-listheader {
-	padding-bottom: 1px;
-}
-
-treecol {
-	appearance: none;
-	border: none;
-}
-
-listheader + richlistbox {
-	margin-top: 0;
-	border-top: none;
-}
-
-select[size][multiple] > option,
-treechildren::-moz-tree-row {
-	padding: 0.3em;
-	margin: 0;
-	border: none;
-	background-image: none;
-}
-
-richlistitem hbox {
-	overflow: hidden;
-}
-
-richlistitem[selected] menulist:focus-visible {
-	outline-offset: -2px;
-}
-
-richlistbox[disabled] {
-	opacity: 0.6;
-	pointer-events: none;
-}
-
-dialog richlistbox > richlistitem[disabled] {
-	font-weight: 600;
-}
-
 #left-tabbox {
 	margin: 5px;
 }
diff --git a/scss/win/_menupopup.scss b/scss/win/_menupopup.scss
index 2ff7134a3a..f13a481fc8 100644
--- a/scss/win/_menupopup.scss
+++ b/scss/win/_menupopup.scss
@@ -8,6 +8,7 @@ menupopup, panel, #search-mode-popup {
 
 menupopup {
 	menu, menuitem {
+		appearance: none !important;
 		margin-left: 4px;
 		margin-right: 4px;
 		border-radius: 4px;
diff --git a/scss/win/_titleBar.scss b/scss/win/_titleBar.scss
index ae4dfa23a9..c572a5dfa6 100644
--- a/scss/win/_titleBar.scss
+++ b/scss/win/_titleBar.scss
@@ -1,4 +1,6 @@
 #toolbar-menubar {
+	// Need this to force show the menubar
+	display: initial;
 	// Allow right-click context menu on menubar
 	pointer-events: none;
 	visibility: visible;
@@ -14,7 +16,9 @@
 	pointer-events: all;
 }
 
-#titlebar {
+#titlebar,
+.menubar-container {
+	appearance: none;
 	height :var(--tab-min-height);
 	-moz-box-pack: center;
 	pointer-events: none;
diff --git a/scss/win/abstracts/_mixins.scss b/scss/win/abstracts/_mixins.scss
new file mode 100644
index 0000000000..18af74b266
--- /dev/null
+++ b/scss/win/abstracts/_mixins.scss
@@ -0,0 +1,55 @@
+@mixin windows-form-element-base {
+	appearance: none;
+	padding: 0;
+	border: solid 1px transparent;
+	border-radius: 3px;
+
+	background-origin: border-box;
+	background-clip: padding-box, padding-box, border-box;
+	// Overwrite default background color
+	background-color: unset;
+	// Simulate linear-gradient border with border-radius using background-image
+
+	@include light-dark(--color-form-element-background, var(--color-background70), var(--fill-quinary));
+	@include light-dark(--color-form-element-border,
+		linear-gradient(180deg, rgba(0, 0, 0, 0.0578) 90.58%, rgba(0, 0, 0, 0.1622) 100%),
+		linear-gradient(180deg, rgba(255, 255, 255, 0.093) 0%, rgba(255, 255, 255, 0.0698) 9.57%));
+
+	background-image:
+		linear-gradient(var(--color-form-element-background), var(--color-form-element-background)),
+		// Must be non-transparent color
+		linear-gradient(var(--color-form-element-base-background), var(--color-form-element-base-background)),
+		var(--color-form-element-border),
+}
+
+@mixin windows-form-element-hover {
+	@include light-dark(--color-form-element-background, var(--color-background50), var(--fill-quarternary));
+}
+
+@mixin windows-form-element-active {
+	@include light-dark(--color-form-element-background, rgba(255, 255, 255, 0.3), var(--fill-senary));
+	--color-form-element-border: linear-gradient(var(--fill-quinary), var(--fill-quinary));
+}
+
+@mixin windows-form-element {
+	height: 28px;
+
+	@include windows-form-element-base;
+
+	&:not([disabled]) {
+		&:hover {
+			@include windows-form-element-hover;
+		}
+	
+		&:active {
+			@include windows-form-element-active;
+		}
+	
+		@include focus-ring;
+	}
+
+	&:disabled,
+	&[disabled] {
+		@include windows-form-element-active;
+	}
+}
\ No newline at end of file
diff --git a/scss/win/components/_button.scss b/scss/win/components/_button.scss
new file mode 100644
index 0000000000..5c25d98556
--- /dev/null
+++ b/scss/win/components/_button.scss
@@ -0,0 +1,31 @@
+// skip React Button element
+button:not(.btn, [type=checkbox], [type=radio]),
+input:is([type=button], [type=submit]) {
+	@include windows-form-element;
+
+	padding: 4px 11px 6px 11px;
+	margin-top: 2px;
+
+	&[default] {
+		color: var(--accent-white);
+
+		&:not([disabled]) {
+			--color-form-element-background: var(--accent-blue);
+
+			&:hover {
+				--color-form-element-background: rgba(64, 114, 229, 0.9);
+			}
+
+			&:active {
+				--color-form-element-background: rgba(64, 114, 229, 0.8);
+			}
+
+			@include focus-ring;
+		}
+
+		&[disabled] {
+			@include light-dark(--color-form-element-background, var(--fill-tertiary), var(--fill-quaternary));
+			--color-form-element-border: linear-gradient(transparent, transparent);
+		}
+	}
+}
diff --git a/scss/win/components/_input.scss b/scss/win/components/_input.scss
new file mode 100644
index 0000000000..b3443116fc
--- /dev/null
+++ b/scss/win/components/_input.scss
@@ -0,0 +1,126 @@
+@mixin windows-input-hover {
+	@media (prefers-color-scheme: light) {
+		background-color: var(--color-background50);
+		background-image: none;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		background-color: var(--fill-quarternary);
+		background-image: none;
+	}
+}
+
+@mixin windows-input-active {
+	outline: none;
+	background-clip: border-box, padding-box;
+	@media (prefers-color-scheme: light) {
+		border: 1px solid var(--fill-quinary);
+		border-bottom-color: var(--accent-blue);
+		background-color: unset;
+		background-image:
+			linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
+			linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		border: 1px solid var(--fill-quinary);
+		border-bottom-color: var(--accent-blue);
+		background-color: unset;
+		background-image:
+			linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
+			linear-gradient(var(--fill-senary), var(--fill-senary));
+	}
+}
+
+@mixin windows-input-disabled {
+	@media (prefers-color-scheme: light) {
+		border: 1px solid var(--fill-quinary);
+		border-bottom-color: var(--fill-quinary);
+		background-color: var(--color-background70);
+		background-image: none;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		border: 1px solid var(--fill-quinary);
+		border-bottom-color: var(--fill-quinary);
+		background-color: var(--fill-senary);
+		background-image: none;
+	}
+}
+
+
+input:is([type=color], [type=date], [type=datetime-local], [type=email], [type=month],
+	[type=number], [type=password], [type=search], [type=tel], [type=text], [type=time],
+	[type=url], [type=week], [type=autocomplete]),
+input:not([type]),
+textbox,
+search-textbox,
+textarea {
+	appearance: none;
+	height: 26px;
+	padding: 0;
+	padding-inline-start: 5px;
+	border: solid 1px transparent;
+	border-radius: 3px;
+
+	background-origin: border-box;
+	background-clip: padding-box;
+	// Overwrite default background color
+	background-color: unset;
+	@media (prefers-color-scheme: light) {
+		border: 1px solid rgba(0, 0, 0, 0.0578);
+		border-bottom-color: rgba(0, 0, 0, 0.4458);
+		background-color: var(--color-background70);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		border-bottom-color: rgba(255, 255, 255, 0.5442);
+		background-color: var(--fill-quinary);
+	}
+
+	&:not([disabled]):not([readonly]) {
+		&::placeholder {
+			color: var(--fill-secondary);
+		}
+
+		&:hover {
+			@include windows-input-hover;
+		}
+	
+		&:active,
+		&:focus,
+		&:focus-visible {
+			@include windows-input-active;
+		}	
+
+		&::selection {
+			background-color: var(--accent-blue);
+			color: var(--accent-white);
+		}
+
+		&:-moz-window-inactive {
+			&::selection {
+				background-color: var(--tag-gray);
+			}
+		}
+	}
+
+	&:disabled,
+	&:read-only {
+		&::placeholder {
+			color: var(--fill-tertiary);
+		}
+
+		&::selection {
+			background-color: var(--tag-gray);
+			color: var(--accent-white);
+		}
+
+		@include windows-input-disabled;
+	}
+}
+
+textarea {
+	height: unset;
+}
diff --git a/scss/win/components/_menulist.scss b/scss/win/components/_menulist.scss
new file mode 100644
index 0000000000..cf143ce3a3
--- /dev/null
+++ b/scss/win/components/_menulist.scss
@@ -0,0 +1,24 @@
+menulist {
+	@include windows-form-element;
+
+	padding: 4px 11px 6px 11px;
+
+	&:focus-visible {
+		&::part(label-box) {
+			outline: none;
+		}
+	}
+
+	&[open] {
+		@include windows-form-element-active;
+
+		// Overwrite hover status
+		&:hover {
+			@include windows-form-element-active;
+		}
+	}
+
+	&::part(dropmarker) {
+		margin-top: 0;
+	}
+}
diff --git a/scss/win/components/_tabbox.scss b/scss/win/components/_tabbox.scss
new file mode 100644
index 0000000000..25a9a59605
--- /dev/null
+++ b/scss/win/components/_tabbox.scss
@@ -0,0 +1,67 @@
+tabbox {
+	--color-form-element-base-background: var(--color-sidepane);
+
+	tabs {
+		position: relative;
+		z-index: 1;
+		background: transparent;
+
+		spacer:first-of-type {
+			-moz-box-flex: 1;
+		}
+
+		tab {
+			appearance: none;
+			height: 28px;
+			margin-top: 0;
+			margin-bottom: -14px;
+			padding: 0;
+			// Since the tab with opacity is weird, we just use hard-coded colors
+			@include light-dark(--tabbox-tab-background, #ededed, #252525);
+			background: var(--tabbox-tab-background);
+			border-block: 1px solid var(--fill-quinary);
+			border-inline: 1px solid var(--tabbox-tab-background);
+
+			&:first-of-type {
+				border-top-left-radius: 4px;
+				border-bottom-left-radius: 4px;
+				border-left: 1px solid var(--fill-quinary);
+			}
+
+			&:last-of-type {
+				border-top-right-radius: 4px;
+				border-bottom-right-radius: 4px;
+				border-right: 1px solid var(--fill-quinary);
+			}
+
+			@include focus-ring;
+
+			.tab-middle {
+				outline: none !important;
+				padding: 4px 11px 5px 11px;
+			}
+
+			&[visuallyselected=true] {
+				tab {
+					border-radius: 4px;
+				}
+
+				.tab-middle {
+					@include windows-form-element-base;
+
+					padding: 4px 11px 5px 11px;
+					border-radius: 4px;
+				}
+			}
+		}
+	}
+	tabpanels {
+		appearance: none;
+		color-scheme: inherit;
+		background: var(--color-sidepane);
+		border: 1px solid var(--fill-quinary);
+		border-radius: 8px;
+		// 8 (original) + 14 (from tabs)
+		padding-top: 22px;
+	}
+}
\ No newline at end of file
diff --git a/scss/win/elements/_editableText.scss b/scss/win/elements/_editableText.scss
new file mode 100644
index 0000000000..ce429260c5
--- /dev/null
+++ b/scss/win/elements/_editableText.scss
@@ -0,0 +1,13 @@
+editable-text {
+	.input {
+		height: unset;
+		// Disable focus ring
+		outline: none;
+		padding-inline-start: unset;
+
+		&:not(:focus, :focus-visible),
+		&:read-only {
+			border: none !important;
+		}
+	}
+}
diff --git a/scss/win/elements/_itemBox.scss b/scss/win/elements/_itemBox.scss
index 017be80c12..894cca0790 100644
--- a/scss/win/elements/_itemBox.scss
+++ b/scss/win/elements/_itemBox.scss
@@ -23,5 +23,6 @@ item-box {
 		margin: 0 !important;
 		margin-inline-start: 1px !important;
 		margin-inline-end: 5px !important;
+		height: unset;
 	}
 }
diff --git a/scss/wizard-win.scss b/scss/wizard-win.scss
new file mode 100644
index 0000000000..c98e5f10ce
--- /dev/null
+++ b/scss/wizard-win.scss
@@ -0,0 +1,23 @@
+// Override/enhance wizard styles
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+@import "abstracts/variables";
+@import "abstracts/functions";
+@import "abstracts/mixins";
+@import "abstracts/placeholders";
+@import "abstracts/utilities";
+@import "abstracts/split-button";
+@import "abstracts/svgicon";
+
+@import "themes/light";
+@import "themes/dark";
+
+// Base
+// --------------------------------------------------
+
+@import "base/base";
+
+@import "win/abstracts/mixins";
+
+@import "win/components/button"
diff --git a/scss/zotero-unix.scss b/scss/zotero-unix.scss
index 2969579acd..c0ff465095 100644
--- a/scss/zotero-unix.scss
+++ b/scss/zotero-unix.scss
@@ -6,7 +6,6 @@
 
 @import "linux/createParent";
 @import "linux/editable";
-@import "linux/errorReport";
 @import "linux/feedSettings";
 @import "linux/menu";
 @import "linux/menupopup";
diff --git a/scss/zotero-win.scss b/scss/zotero-win.scss
index 83523da353..86a96eeca1 100644
--- a/scss/zotero-win.scss
+++ b/scss/zotero-win.scss
@@ -4,6 +4,8 @@
 // Windows specific
 // --------------------------------------------------
 
+@import "win/abstracts/mixins";
+
 @import "win/createParent";
 @import "win/tabBar";
 @import "win/titleBar";
@@ -12,3 +14,11 @@
 // Elements
 
 @import "win/elements/itemBox";
+@import "win/elements/editableText";
+
+// Components
+
+@import "win/components/button";
+@import "win/components/input";
+@import "win/components/menulist";
+@import "win/components/tabbox";