Add: Download Popup - Proton like Checkbox

black7375 · Sep 24, 2021 · 34d2558 · 34d2558
1 parent 137eb4f
commit 34d2558
Showing 1 changed file with 93 additions and 0 deletions.
diff --git a/userChrome.css b/userChrome.css
@@ -731,6 +731,99 @@
     xul|label[disabled="true"] {
       opacity: 0.5 !important;
     }
+
+    /*- Check Box ------------------------------------------------------------*/
+    /* From checkbox.css */
+    checkbox {
+      appearance: none !important;
+      -moz-box-align: center !important;
+      margin: 4px 2px !important;
+    }
+
+    .checkbox-icon[src] {
+      margin-inline-end: 2px !important;
+    }
+    .checkbox-label {
+      margin: 1px 0 !important;
+    }
+
+    checkbox[disabled="true"] {
+      opacity: 0.4 !important;
+    }
+
+    .checkbox-check {
+      appearance: none !important;
+      color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
+      background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
+      border: 1px solid currentColor !important;
+      border-radius: 2px !important;
+      margin-inline-end: 6px !important;
+    }
+
+    .checkbox-check {
+      height: 16px !important;
+      width: 16px !important;
+    }
+
+    checkbox:not([disabled="true"]):hover > .checkbox-check {
+      background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
+    }
+
+    checkbox:not([disabled="true"]):hover:active > .checkbox-check {
+      background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, -moz-accent-color 8%, Field)) !important;
+    }
+
+    .checkbox-check[checked] {
+      border-color: var(--checkbox-checked-border-color, transparent) !important;
+      background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
+      background-image: url("chrome://global/skin/icons/check.svg") !important;
+      background-position: center !important;
+      background-repeat: no-repeat !important;
+      -moz-context-properties: fill !important;
+      fill: currentColor !important;
+      color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+      /* Style the button also when printing with "Print Backgrounds" unchecked */
+      color-adjust: exact !important;
+    }
+
+    checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+      background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, -moz-accent-color)) !important;
+    }
+
+    checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
+      background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, -moz-accent-color)) !important;
+    }
+
+    checkbox:-moz-focusring > .checkbox-check {
+      outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+      outline-offset: var(--focus-outline-offset, 2px) !important;
+    }
+
+    @media (prefers-contrast) {
+      checkbox:not([disabled="true"]):hover > .checkbox-check {
+        /* color will set the border-color on the check due to how HCM works for in-content pages. */
+        color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
+      }
+
+      .checkbox-check[checked] {
+        color: var(--checkbox-checked-border-color, currentColor) !important;
+        fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+      }
+
+      checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
+      checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+        color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+        fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+      }
+    }
+
+    /* From common.css */
+    xul|*.checkbox-check {
+      margin-block: 2px !important;
+    }
+    xul|richlistitem > xul|*.checkbox-check {
+      margin: 3px 6px !important;
+    }
   }
 
   /** Decoration **************************************************************/