Preferences: Fix styling a bit (#3807)

- Don't import global Zotero SCSS
   - I think this was always a mistake - preferences have their own
     root SCSS file (preferences.scss) and don't need zotero.scss
- Don't add margins on radio or button labels
   - Like above - I don't think this was correct even before the latest
     button style tweaks!
- Don't add global margins
   - Otherwise we start an arms race with all the other elements in the
     pane - anything without a margin-inline-start will look like it's
     sticking out to the left. Apply specific margins instead.

chrome/content/zotero/preferences/preferences.xhtml

@@ -35,7 +35,6 @@
 <?xml-stylesheet href="chrome://zotero/skin/zotero.css"?>
 <?xml-stylesheet href="chrome://zotero-platform/content/overlay.css"?>
 <?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
-<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
 
 <!--
 	To add an observer for a preference change, add an appropriate case in

chrome/content/zotero/preferences/preferences_advanced.xhtml

@@ -89,7 +89,7 @@
 			<radiogroup id="data-dir"
 					preference="extensions.zotero.useDataDir">
 				<radio id="default-data-dir" label="&zotero.preferences.dataDir.useProfile;" value="false"/>
-				<hbox>
+				<hbox align="center">
 					<radio label="&zotero.preferences.dataDir.custom;" value="true"/>
 					<html:input type="text" id="data-dir-path" preference="extensions.zotero.dataDir"
 						readonly="true" style="flex: 1"/>
@@ -114,7 +114,7 @@
 		<groupbox>
 			<label><html:h2>&zotero.preferences.dbMaintenance;</html:h2></label>
 			
-			<hbox style="display: block">
+			<hbox id="db-maintenance-options">
 				<button label="&zotero.preferences.dbMaintenance.integrityCheck;"
 					oncommand="Zotero_Preferences.Advanced.runIntegrityCheck(this)"/>
 				<button id="reset-translators-button"

scss/preferences.scss

@@ -17,6 +17,21 @@
 
 @import "base/base";
 
+// Components
+// --------------------------------------------------
+
+@import "components/button";
+@import "components/icons";
+@import "components/listheader";
+@import "components/menu";
+@import "components/richlistbox";
+@import "components/search";
+@import "components/spinner";
+@import "components/titleBar";
+@import "components/textLink";
+@import "components/virtualized-table";
+@import "components/window";
+
 // Panes
 // --------------------------------------------------
 
@@ -96,6 +111,7 @@
 		padding: 1em;
 		border-radius: 5px;
 		align-items: center;
+		gap: 6px;
 		font-size: 1.1em;
 		transition: background-color 0.2s ease;
 		-moz-context-properties: fill, fill-opacity;
@@ -132,6 +148,10 @@
 	margin-inline-start: 20px;
 	@include svgicon-menu("chevron", "universal", "20");
 	rotate: 90deg;
+	
+	.toolbarbutton-text {
+		display: none;
+	}
 }
 
 #prefs-help-container {
@@ -140,7 +160,7 @@
 }
 
 h1 {
-	margin: 0 6px 12px 6px;
+	margin: 0 0 12px 0;
 	font-size: 17px;
 	font-weight: 400;
 }
@@ -226,10 +246,13 @@ window[windowtype="zotero:pref"] {
    min-width: 600px;
 }
 
-label:not([is=zotero-text-link]) {
-	/* Apply XUL label styles to all labels */
+label:not([is=zotero-text-link], .button-text, .checkbox-label, .radio-label) {
 	margin-block: 1px 2px;
-	margin-inline: 6px 5px;
+	margin-inline: 0 5px;
+}
+
+description {
+	 margin-inline: 0;
 }
 
 description, label, checkbox {
@@ -283,3 +306,11 @@ label[is=zotero-text-link] {
 button {
 	flex-shrink: 0;
 }
+
+radiogroup {
+	margin-bottom: 4px;
+}
+
+radio, checkbox {
+	margin-block: 4px;
+}

scss/preferences/_advanced.scss

@@ -69,3 +69,12 @@
 {
 	text-align: end;
 }
+
+#updateButton, #fulltext-clearIndex {
+	margin-inline-start: 6px;
+}
+
+#db-maintenance-options {
+	display: flex;
+	gap: 6px;
+}

scss/preferences/_cite.scss

@@ -21,3 +21,7 @@
 {
 	width: 105px;
 }
+
+#openCSLEdit, #styleManager-delete {
+	margin-inline-end: 6px;
+}

scss/preferences/_export.scss

@@ -16,6 +16,10 @@
 	min-height: 1.5em; /* Fix collapse on Windows */
 }
 
+#quickCopy-delete {
+	margin-inline-end: 6px;
+}
+
 #noteQuickCopy-wrapper {
 	margin-left: 30px;
 	@media (-moz-platform: windows) {

scss/preferences/_sync.scss

@@ -19,11 +19,6 @@
 	align-items: center;
 }
 
-#zotero-prefpane-sync .form-grid > hbox > label:first-child,
-#zotero-prefpane-sync .form-grid > hbox > menulist:first-child
-{
-	margin-inline: 0;
-}
 #zotero-prefpane-sync .form-grid > hbox > textbox
 {
 	margin-inline: 3px;

scss/preferences/_sync_reset.scss

@@ -27,6 +27,8 @@
 }
 
 #sync-reset-radiogroup > div {
+	display: flex;
+	flex-direction: column;
 	margin: 0;
 	padding: 0;
 	list-style: none;