reuse radio-wrapper for visual uniformity

edit/settings.css

@@ -20,9 +20,6 @@
 .style-settings > :last-child {
   margin-bottom: 0;
 }
-.style-settings input[type=radio] {
-  margin: 0 .3em 0 0;
-}
 .style-settings input:disabled ~ label {
   opacity: .5;
 }
@@ -44,10 +41,8 @@
 .style-settings textarea:not(:placeholder-shown) {
   min-width: 50vw;
 }
-.ss-radio {
+.style-settings .radio-wrapper {
   display: inline-flex;
-  align-items: center;
-  line-height: 2;
   padding: 0 .8em 0 0;
 }
 a[data-cmd=note] {

edit/settings.html

@@ -10,13 +10,13 @@
       <div i18n-text="preferScheme">
         <div><small id="ss-scheme-off" i18n-text="preferSchemeAlways" hidden></small></div>
       </div>
-      <label i18n-text-append="preferSchemeNone" class="ss-radio">
+      <label i18n-text-append="preferSchemeNone" class="radio-wrapper">
         <input name="ss-scheme" type="radio" value="none">
       </label>
-      <label i18n-text-append="preferSchemeDark" class="ss-radio">
+      <label i18n-text-append="preferSchemeDark" class="radio-wrapper">
         <input name="ss-scheme" type="radio" value="dark">
       </label>
-      <label i18n-text-append="preferSchemeLight" class="ss-radio">
+      <label i18n-text-append="preferSchemeLight" class="radio-wrapper">
         <input name="ss-scheme" type="radio" value="light">
       </label>
     </div>

global.css

@@ -237,8 +237,8 @@ input[type="radio"] {
   height: 13px;
   width: 13px;
   position: relative;
+  margin: 0 4px 1px 0;
 }
-
 input[type="radio"]:after {
   content: '';
   background-color: transparent;
@@ -252,11 +252,15 @@ input[type="radio"]:after {
   top: 2px;
   position: absolute;
 }
-
 input[type="radio"]:checked:after {
   background-color: var(--c30);
   transform: scale(1);
 }
+.radio-wrapper {
+  display: flex;
+  align-items: center;
+  line-height: 1.5;
+}
 
 /* restore disabled state dimming */
 button:disabled,

install-usercss/install-usercss.css

@@ -382,9 +382,6 @@ li {
   #header {
     height: 100% !important; /* overrides user resize */
   }
-  #ss-scheme > label {
-    display: block;
-  }
   .w100-full {
     width: 100%;
     margin-top: var(--child-gap);

options.html

@@ -51,33 +51,24 @@
       <div class="block">
         <h1 i18n-text="stylePreferSchemeLabel"></h1>
         <div class="items no-stretch">
-          <label>
+          <label class="radio-wrapper" i18n-text-append="preferSchemeDark">
-            <span i18n-text-append="preferSchemeDark">
+            <input type="radio" value="dark" name="schemeSwitcher.enabled">
-              <input type="radio" value="dark" name="schemeSwitcher.enabled">
-            </span>
           </label>
-          <label>
+          <label class="radio-wrapper" i18n-text-append="preferSchemeLight">
-            <span i18n-text-append="preferSchemeLight">
+            <input type="radio" value="light" name="schemeSwitcher.enabled">
-              <input type="radio" value="light" name="schemeSwitcher.enabled">
-            </span>
           </label>
-          <label>
+          <label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
-            <span i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
+            <input type="radio" value="system" name="schemeSwitcher.enabled">
-              <input type="radio" value="system" name="schemeSwitcher.enabled">
-            </span>
           </label>
-          <label>
+          <label class="radio-wrapper">
-            <span i18n-text-append="optionsAdvancedAutoSwitchSchemeByTime">
+            <input type="radio" value="time" name="schemeSwitcher.enabled">
-              <input type="radio" value="time" name="schemeSwitcher.enabled">
+            <span i18n-text="optionsAdvancedAutoSwitchSchemeByTime"></span>
-            </span>
             <input type="time" required id="schemeSwitcher.nightStart">
             ~
             <input type="time" required id="schemeSwitcher.nightEnd">
           </label>
-          <label>
+          <label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
-            <span i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
+            <input type="radio" value="never" name="schemeSwitcher.enabled">
-              <input type="radio" value="never" name="schemeSwitcher.enabled">
-            </span>
           </label>
         </div>
       </div>
@@ -86,12 +77,12 @@
         <h1 i18n-text="optionsCustomizeIcon"></h1>
         <div class="items">
           <label>
-            <span i18n-text-append="optionsIconAuto">
+            <span class="radio-wrapper" i18n-text-append="optionsIconAuto">
               <input type="radio" name="iconset" value="-1" data-value-type="number">
             </span>
           </label>
           <label>
-            <span i18n-text-append="optionsIconDark">
+            <span class="radio-wrapper" i18n-text-append="optionsIconDark">
               <input type="radio" name="iconset" value="0" data-value-type="number">
             </span>
             <span>
@@ -101,7 +92,7 @@
             </span>
           </label>
           <label>
-            <span i18n-text-append="optionsIconLight">
+            <span class="radio-wrapper" i18n-text-append="optionsIconLight">
               <input type="radio" name="iconset" value="1" data-value-type="number">
             </span>
             <span>

options/options.css

@@ -200,11 +200,6 @@ input[type=time] {
   max-width: 7em; /* TODO: remove when strict_min_version >= 57 */
 }
 
-input[type=radio] {
-  margin-top: 0;
-  vertical-align: text-top;
-}
-
 #actions {
   justify-content: space-around;
   align-items: stretch;