Add: Download Popup - Proton like Radio button

black7375 · Sep 24, 2021 · 137eb4f · 137eb4f
1 parent 48f4d33
commit 137eb4f
Showing 1 changed file with 69 additions and 0 deletions.
diff --git 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 **************************************************************/