From 3e520506b0c3529684a7e235bff093617ef5493b Mon Sep 17 00:00:00 2001
From: Aidan Cornelius-Bell <aidan@cornelius-bell.com>
Date: Mon, 13 Jan 2025 14:17:11 +1030
Subject: [PATCH] CSS: use default checkmark from browser

---
 app/assets/stylesheets/application.css | 39 +++++---------------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f1b0f26..014636b 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -101,12 +101,6 @@
 
     --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 */
@@ -138,12 +132,6 @@
 
         --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;
     }
 }
 
@@ -259,35 +247,22 @@ label {
 }
 
 input[type="checkbox"] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
     width: 16px;
     height: 16px;
-    border: 1px solid var(--checkbox-border);
+    border: 1px solid var(--accent-a);
     border-radius: 3px;
-    background-color: var(--checkbox-bg);
+    background-color: var(--standout-form-bg);
     cursor: pointer;
-    position: relative;
     vertical-align: middle;
     margin-right: 8px;
 }
 
 input[type="checkbox"]:checked {
-    background-color: var(--checkbox-checked-bg);
-    border-color: var(--checkbox-checked-border);
-}
-
-input[type="checkbox"]:checked::after {
-    content: "";
-    position: absolute;
-    left: 4px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
-    border: solid var(--checkbox-check);
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
+    background-color: var(--standout-form-bg);
+    border-color: var(--accent-a);
+    -webkit-appearance: checkbox;
+    -moz-appearance: checkbox;
+    appearance: checkbox;
 }
 
 /* Consolidated .reg-form styles */
-- 
2.39.5