simplify css/html in options

+ deduplicate "a"

Author: tophf

edit/edit.css

@@ -9,14 +9,6 @@ body {
   height: 100vh;
 }
 
-a {
-  color: var(--fg);
-  transition: color .5s;
-}
-a:hover {
-  color: #666;
-}
-
 #global-progress {
   position: fixed;
   height: 4px;

global.css

@@ -58,6 +58,13 @@ body:lang(zh-HK) {
   font-family: Arial, 'Microsoft JhengHei UI', 'Microsoft JhengHei', system-ui, sans-serif;
 }
 
+a {
+  color: var(--fg);
+  transition: color .15s;
+}
+a:hover {
+  color: var(--c40);
+}
 a.icon { text-decoration: none; }
 
 button {

install-usercss/install-usercss.css

@@ -4,15 +4,6 @@ body {
   height: 100vh;
 }
 
-a {
-  color: var(--fg);
-  transition: color .5s;
-}
-
-a:hover {
-  color: var(--c40);
-}
-
 img.icon {
   height: 1.4em;
   vertical-align: middle;

options.html

@@ -44,21 +44,18 @@
 
   <script src="options/options-sync.js"></script>
   <script src="js/themer.js"></script> <!-- must be last in HEAD to avoid FOUC -->
-<template data-id="body">
-  <div id="options-header">
-    <div id="options-title" i18n="+optionsHeading">
-      <div id="options-close-icon">
-        <i class=i-close></i>
-      </div>
-    </div>
-  </div>
+  <template data-id="body">
 
-  <div id="options">
+    <header>
+      <img src="/images/icon/128.png" width="32" height="32">
+      <h1 i18n="optionsHeading"></h1>
+      <i class=i-close tabindex="0"></i>
+    </header>
 
-    <div class="options-wrapper">
+    <main>
 
       <div class="block" id="updates">
-        <h1 i18n="optionsCustomizeUpdate"></h1>
+        <h2 i18n="optionsCustomizeUpdate"></h2>
         <div class="items swap">
           <label>
             <span i18n="optionsUpdateInterval" data-clickable="0"></span>
@@ -72,7 +69,7 @@ <h1 i18n="optionsCustomizeUpdate"></h1>
       </div>
 
       <div class="block sync-options">
-        <h1 i18n="optionsCustomizeSync"></h1>
+        <h2 i18n="optionsCustomizeSync"></h2>
         <div class="items swap">
           <label>
             <span class="sync-status"></span>
@@ -109,7 +106,7 @@ <h1 i18n="optionsCustomizeSync"></h1>
       </div>
 
       <div class="block">
-        <h1 i18n="stylePreferSchemeLabel"></h1>
+        <h2 i18n="stylePreferSchemeLabel"></h2>
         <div class="items no-stretch">
           <label class="radio-wrapper" i18n="+preferSchemeDark">
             <input type="radio" value="dark" name="schemeSwitcher.enabled">
@@ -134,7 +131,7 @@ <h1 i18n="stylePreferSchemeLabel"></h1>
       </div>
 
       <div class="block">
-        <h1 i18n="optionsCustomizeIcon"></h1>
+        <h2 i18n="optionsCustomizeIcon"></h2>
         <div class="items no-stretch">
           <label>
             <span class="radio-wrapper" i18n="+optionsIconAuto">
@@ -166,7 +163,7 @@ <h1 i18n="optionsCustomizeIcon"></h1>
       </div>
 
       <div class="block">
-        <h1 i18n="optionsCustomizeBadge"></h1>
+        <h2 i18n="optionsCustomizeBadge"></h2>
         <div class="items swap">
           <label>
             <span i18n="prefShowBadge"></span>
@@ -184,7 +181,7 @@ <h1 i18n="optionsCustomizeBadge"></h1>
       </div>
 
       <div class="block">
-        <h1 i18n="optionsCustomizePopup"></h1>
+        <h2 i18n="optionsCustomizePopup"></h2>
         <div class="items swap">
           <label>
             <span i18n="optionsPopupWidth"></span>
@@ -206,7 +203,7 @@ <h1 i18n="optionsCustomizePopup"></h1>
       </div>
 
       <div class="block">
-        <h1 i18n="styleEditor"></h1>
+        <h2 i18n="styleEditor"></h2>
         <div class="items swap">
           <label>
             <span i18n="popupOpenEditInWindow">
@@ -229,7 +226,7 @@ <h1 i18n="styleEditor"></h1>
       </div>
 
       <div class="block">
-        <h1 i18n="styleManager"></h1>
+        <h2 i18n="styleManager"></h2>
         <div class="items swap">
           <label>
             <span i18n="manageNewUI"></span>
@@ -260,7 +257,7 @@ <h1 i18n="styleManager"></h1>
       </div>
 
       <div class="block" id="advanced">
-        <h1 i18n="optionsAdvanced"></h1>
+        <h2 i18n="optionsAdvanced"></h2>
         <div class="items swap">
           <label>
             <span i18n="optionsAdvancedStyleViaXhr">
@@ -306,18 +303,19 @@ <h1 i18n="optionsAdvanced"></h1>
       </div>
 
       <div class="block">
-        <h1 i18n="cm_theme"></h1>
+        <h2 i18n="cm_theme"></h2>
         <div class="items no-stretch" i18n="optionsStylusThemes"></div>
       </div>
-    </div>
 
-    <div class="block" id="actions">
+    </main>
+
+    <footer>
       <button id="reset" i18n="optionsResetButton, title:optionsReset"></button>
       <button id="shortcuts" i18n="shortcuts, title:shortcutsNote"></button>
       <button id="manage" i18n="confirmClose"></button>
-    </div>
-  </div>
-</template>
+    </footer>
+
+  </template>
 </head>
 
 <body id="stylus-options">

options/options.css

@@ -1,9 +1,11 @@
-html {
+:root {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background: none;
+  --pad: 1rem;
+  --pad05: calc(.5 * var(--pad));
   --value-cell-w: 6ch;
 }
 
@@ -23,81 +25,32 @@ body.scaleout {
   animation: scaleout .25s ease-in-out;
 }
 
-#options {
+main {
   background: var(--bg);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-}
-
-.options-wrapper {
   overflow-y: auto;
 }
 
-a {
-  color: var(--fg);
-  transition: color .5s;
-}
-
-a:hover {
-  color: var(--c40);
-}
-
-a:hover i,
-i:hover {
-  color: var(--fg);
-}
-
 .clickable {
   text-decoration: underline dotted;
   cursor: pointer;
 }
 
-#options-close-icon i {
-  color: var(--c40);
-  transition: color .5s;
-}
-
-#options-close-icon:hover i {
-  color: var(--fg);
-}
-
-#options-close-icon {
-  display: inline-flex;
-  cursor: pointer;
-  position: absolute;
-  right: 6px;
-  top: 6px;
-}
-
-#options-close-icon i {
-  height: 20px;
-  width: 20px;
-}
-
-#options-title {
+header {
   font-weight: bold;
   background-color: var(--accent-3);
-  padding: .75rem 26px .75rem calc(30% + 4px);
-  font-size: 22px;
-  letter-spacing: .5px;
-  position: relative;
-  min-height: 42px;
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--c40);
+  padding: var(--pad);
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid hsla(0, 0%, 50%, .2);
 }
-
-#options-title::before {
-  content: "";
-  width: 0;
-  height: 0;
-  padding: 0 32px 32px 0;
-  background: url(/images/icon/32.png);
-  position: absolute;
-  left: 26px;
-  top: 0;
-  bottom: 0;
-  margin: auto;
+header h1 {
+  flex: 1 0;
+  margin: 0 var(--pad05);
+}
+header i:hover {
+  color: var(--accent-1);
 }
 
 .firefox .chromium-only,
@@ -113,18 +66,14 @@ label.chromium-only > :first-child::after {
 .block {
   display: flex;
   align-items: center;
-  margin: 1em 0;
-  border-bottom: 1px dotted var(--c80);
-  padding: 0 16px .75em;
+  padding: var(--pad05) var(--pad);
   position: relative;
 }
-
-.options-wrapper .block:last-child {
-  margin-bottom: 0;
-  border-bottom: none;
+.block:nth-last-child(n + 2) {
+  border-bottom: 1px dotted var(--c80);
 }
 
-h1 {
+h2 {
   flex: 0 0 8em;
   margin: 0;
   font-size: 120%;
@@ -213,17 +162,18 @@ label.disabled,
   opacity: .5;
 }
 
-#actions {
+footer {
   justify-content: center;
-  padding: .5em 1em 1em;
-  background-color: rgba(0, 0, 0, .05);
+  padding: var(--pad05) var(--pad);
+  background-color: var(--c90);
   margin: 0;
   border-top: 1px solid var(--c60);
   border-bottom: none;
+  display: flex;
 }
 
-#actions button {
-  margin: .5em 1em 0 0;
+footer button {
+  margin: 0 .25em;
 }
 
 [data-cmd="check-updates"] button {

options/options.js

@@ -25,7 +25,7 @@ if (FIREFOX && 'update' in (chrome.commands || {})) {
   $('#shortcuts').classList.remove('chromium-only');
 }
 // actions
-$('#options-close-icon').onclick = () => {
+$('header i').onclick = () => {
   top.dispatchEvent(new CustomEvent('closeOptions'));
 };
 $('#manage').onclick = () => {

popup/popup.css

@@ -78,15 +78,6 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   height: auto;
 }
 
-a {
-  color: var(--fg);
-  transition: color .1s;
-}
-
-a:hover {
-  color: var(--c40);
-}
-
 #installed {
   max-height: 445px;
   overflow-y: auto;