From f641e1969ad26bcdc5e189f8f4f08c30e9332f75 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sun, 5 Dec 2021 22:57:31 +0900
Subject: [PATCH] Add: Library - Contents' checkbox #236

---
 userContent.css | 102 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/userContent.css b/userContent.css
index 81500dd..118a89b 100644
--- a/userContent.css
+++ b/userContent.css
@@ -2178,5 +2178,107 @@
     menuitem[type="checkbox"][disabled="true"] {
       opacity: 0.5 !important;
     }
+
+    /*- Check Box ------------------------------------------------------------*/
+    /* From checkbox.css */
+    menuitem[type="checkbox"] {
+      appearance: none !important;
+      -moz-box-align: center !important;
+      margin: 4px 2px !important;
+    }
+
+    menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
+      margin-inline-end: 2px !important;
+    }
+    menuitem[type="checkbox"] > .menu-iconic-text {
+      margin: 1px 0 !important;
+    }
+
+    menuitem[type="checkbox"][disabled="true"] {
+      opacity: 0.4 !important;
+    }
+
+    menuitem[type="checkbox"] > .menu-iconic-left {
+      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;
+    }
+
+    menuitem[type="checkbox"] > .menu-iconic-left {
+      height: 16px !important;
+      width: 16px !important;
+    }
+
+    menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left {
+      background-color: var(
+        --checkbox-unchecked-hover-bgcolor,
+        color-mix(in srgb, -moz-accent-color 4%, Field)
+      ) !important;
+    }
+
+    menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left {
+      background-color: var(
+        --checkbox-unchecked-active-bgcolor,
+        color-mix(in srgb, -moz-accent-color 8%, Field)
+      ) !important;
+    }
+
+    menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
+      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;
+    }
+
+    menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] {
+      background-color: var(
+        --checkbox-checked-hover-bgcolor,
+        color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
+      ) !important;
+    }
+
+    menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left[checked="true"]{
+      background-color: var(
+        --checkbox-checked-active-bgcolor,
+        color-mix(in srgb, currentColor 25%, -moz-accent-color)
+      ) !important;
+    }
+
+    menuitem[type="checkbox"]:focus > .menu-iconic-left {
+      outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+      outline-offset: var(--focus-outline-offset, 2px) !important;
+    }
+
+    @media (prefers-contrast) {
+      menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left {
+        /* 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;
+      }
+
+      menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
+        color: var(--checkbox-checked-border-color, currentColor) !important;
+        fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+      }
+
+      menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left[checked="true"],
+      menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] {
+        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 */
+    menuitem[type="checkbox"] > .menu-iconic-left {
+      margin-block: 2px !important;
+    }
   }
 }