From 1721bad7d881422ebef63cbcb68e4aee07b20417 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 17 Feb 2022 03:26:20 +0300
Subject: [PATCH] reuse radio-wrapper for visual uniformity

---
 edit/settings.css                   |  7 +-----
 edit/settings.html                  |  6 ++---
 global.css                          |  8 +++++--
 install-usercss/install-usercss.css |  3 ---
 options.html                        | 37 +++++++++++------------------
 options/options.css                 |  5 ----
 6 files changed, 24 insertions(+), 42 deletions(-)

diff --git a/edit/settings.css b/edit/settings.css
index 1cfd7789..ffa9acf0 100644
--- a/edit/settings.css
+++ b/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] {
diff --git a/edit/settings.html b/edit/settings.html
index a83a958f..6d444be0 100644
--- a/edit/settings.html
+++ b/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>
diff --git a/global.css b/global.css
index a16802ee..dc737638 100644
--- a/global.css
+++ b/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,
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index 7219de42..740ca36f 100644
--- a/install-usercss/install-usercss.css
+++ b/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);
diff --git a/options.html b/options.html
index 92ab77ef..34f8f2d6 100644
--- a/options.html
+++ b/options.html
@@ -51,33 +51,24 @@
       <div class="block">
         <h1 i18n-text="stylePreferSchemeLabel"></h1>
         <div class="items no-stretch">
-          <label>
-            <span i18n-text-append="preferSchemeDark">
-              <input type="radio" value="dark" name="schemeSwitcher.enabled">
-            </span>
+          <label class="radio-wrapper" i18n-text-append="preferSchemeDark">
+            <input type="radio" value="dark" name="schemeSwitcher.enabled">
           </label>
-          <label>
-            <span i18n-text-append="preferSchemeLight">
-              <input type="radio" value="light" name="schemeSwitcher.enabled">
-            </span>
+          <label class="radio-wrapper" i18n-text-append="preferSchemeLight">
+            <input type="radio" value="light" name="schemeSwitcher.enabled">
           </label>
-          <label>
-            <span i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
-              <input type="radio" value="system" name="schemeSwitcher.enabled">
-            </span>
+          <label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
+            <input type="radio" value="system" name="schemeSwitcher.enabled">
           </label>
-          <label>
-            <span i18n-text-append="optionsAdvancedAutoSwitchSchemeByTime">
-              <input type="radio" value="time" name="schemeSwitcher.enabled">
-            </span>
+          <label class="radio-wrapper">
+            <input type="radio" value="time" name="schemeSwitcher.enabled">
+            <span i18n-text="optionsAdvancedAutoSwitchSchemeByTime"></span>
             <input type="time" required id="schemeSwitcher.nightStart">
             ~
             <input type="time" required id="schemeSwitcher.nightEnd">
           </label>
-          <label>
-            <span i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
-              <input type="radio" value="never" name="schemeSwitcher.enabled">
-            </span>
+          <label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
+            <input type="radio" value="never" name="schemeSwitcher.enabled">
           </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>
diff --git a/options/options.css b/options/options.css
index e47034de..32b52c8d 100644
--- a/options/options.css
+++ b/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;