CSS: fixed checkboxes for light mode

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 7b2e3e0dc5cbe88db48861c42cdf9ee2fd180a51..f1b0f269f763ed36430b29e246388554fa7bc58e 100644 (file)
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -101,6 +101,12 @@
 
     --danger-bg: #dc3545;
     --danger-text: #ffffff;
+
+    --checkbox-bg: var(--standout-form-bg);
+    --checkbox-border: var(--accent-a);
+    --checkbox-checked-bg: var(--filter-button-active);
+    --checkbox-checked-border: var(--filter-button-active);
+    --checkbox-check: #ffffff; /* The checkmark color */
 }
 
 /* Light mode, overwrites at the top of the CSS so it doesn't need to be repeated elsewhere */
@@ -132,6 +138,12 @@
 
         --danger-bg: #dc3545;
         --danger-text: #ffffff;
+
+        --checkbox-bg: #ffffff;
+        --checkbox-border: var(--accent-a);
+        --checkbox-checked-bg: var(--filter-button-active);
+        --checkbox-checked-border: var(--filter-button-active);
+        --checkbox-check: #ffffff;
     }
 }
 
@@ -252,9 +264,9 @@ input[type="checkbox"] {
     appearance: none;
     width: 16px;
     height: 16px;
-    border: 1px solid var(--accent-a);
+    border: 1px solid var(--checkbox-border);
     border-radius: 3px;
-    background-color: var(--standout-form-bg);
+    background-color: var(--checkbox-bg);
     cursor: pointer;
     position: relative;
     vertical-align: middle;
@@ -262,8 +274,8 @@ input[type="checkbox"] {
 }
 
 input[type="checkbox"]:checked {
-    background-color: var(--filter-button-active);
-    border-color: var(--filter-button-active);
+    background-color: var(--checkbox-checked-bg);
+    border-color: var(--checkbox-checked-border);
 }
 
 input[type="checkbox"]:checked::after {
@@ -273,7 +285,7 @@ input[type="checkbox"]:checked::after {
     top: 1px;
     width: 5px;
     height: 10px;
-    border: solid var(--standout-form-button-text);
+    border: solid var(--checkbox-check);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }