From 137eb4f9abceb462d79d4ff07d11d9341437775c Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 24 Sep 2021 17:24:44 +0900
Subject: [PATCH] Add: Download Popup - Proton like Radio button

---
 userChrome.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/userChrome.css b/userChrome.css
index 407e692..49869be 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -568,6 +568,7 @@
       background-color: var(--in-content-page-background) !important;
     }
 
+    /*- Button ---------------------------------------------------------------*/
     button {
       -moz-appearance: none !important;
       color: var(--in-content-button-text-color) !important;
@@ -662,6 +663,74 @@
         color: var(--in-content-primary-button-text-color) !important;
       }
     }
+
+    /*- Radio Button ---------------------------------------------------------*/
+    xul|radio {
+      margin-inline-start: 0 !important;
+      appearance: none !important;
+    }
+
+    xul|*.radio-check {
+      appearance: none !important;
+      width: 16px !important;
+      height: 16px !important;
+      padding: 0 !important;
+      border: 1px solid var(--in-content-box-border-color) !important;
+      border-radius: 100% !important;
+      margin-block: 2px !important; /* extend the vertical clicktarget */
+      margin-inline: 0 6px !important;
+      background-color: var(--in-content-button-background) !important;
+      background-position: center !important;
+      flex-shrink: 0 !important; /* avoid shrinking inside flex container */
+    }
+
+    xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
+      background-color: var(--in-content-button-background-hover) !important;
+      color: var(--in-content-button-text-color-hover) !important;
+    }
+
+    xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
+      background-color: var(--in-content-button-background-active) !important;
+    }
+
+    xul|*.radio-check[selected] {
+      -moz-context-properties: fill !important;
+      fill: currentColor !important;
+      color: var(--in-content-primary-button-text-color) !important;
+      background-color: var(--in-content-primary-button-background) !important;
+      background-image: url("chrome://global/skin/icons/radio.svg") !important;
+      border-color: transparent !important;
+
+      /* Style the button also when printing with "Print Backgrounds" unchecked */
+      color-adjust: exact !important;
+    }
+
+    xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
+      background-color: var(--in-content-primary-button-background-hover) !important;
+      color: var(--in-content-primary-button-text-color-hover) !important;
+    }
+
+    xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
+      background-color: var(--in-content-primary-button-background-active) !important;
+    }
+
+    xul|*.radio-label-box {
+      margin-inline: 0 8px !important;
+      padding-inline-start: 0 !important;
+    }
+
+    /* Disabled checkboxes, radios and labels */
+    xul|checkbox[disabled="true"],
+    xul|radio[disabled="true"],
+    xul|label[disabled="true"] {
+      color: inherit !important;
+    }
+
+    xul|checkbox[disabled="true"],
+    xul|radio[disabled="true"],
+    xul|label[disabled="true"] {
+      opacity: 0.5 !important;
+    }
   }
 
   /** Decoration **************************************************************/