From 7e9d05c4ee7b1e454ff83f237ef9d3fcda22592c Mon Sep 17 00:00:00 2001
From: tommy gingras <tommy@studiowebux.com>
Date: Fri, 27 Feb 2026 23:46:36 -0500
Subject: [PATCH] fix: checkbox styling for consistent light/dark rendering

Custom checkbox with transparent background, text-tertiary border,
hover state, and proper checkmark positioning using border-width
trick. Adds -webkit-appearance prefix for Safari.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 css/styles.css | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 0e5bfc2..03f22b9 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -339,15 +339,22 @@ body {
 }
 
 .toggle-label input[type="checkbox"] {
+  -webkit-appearance: none;
   appearance: none;
-  width: 0.875rem;
-  height: 0.875rem;
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  background: var(--bg-editor);
+  width: 0.8125rem;
+  height: 0.8125rem;
+  border: 1px solid var(--text-tertiary);
+  border-radius: 2px;
+  background: transparent;
   margin: 0;
   cursor: pointer;
   position: relative;
+  flex-shrink: 0;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.toggle-label input[type="checkbox"]:hover {
+  border-color: var(--text-secondary);
 }
 
 .toggle-label input[type="checkbox"]:checked {
@@ -358,14 +365,13 @@ body {
 .toggle-label input[type="checkbox"]:checked::after {
   content: "";
   position: absolute;
-  inset: 1px;
-  border-bottom: 1.5px solid var(--bg);
-  border-right: 1.5px solid var(--bg);
+  left: 3px;
+  top: 0px;
   width: 4px;
-  height: 7px;
+  height: 8px;
+  border: solid var(--bg);
+  border-width: 0 1.5px 1.5px 0;
   transform: rotate(45deg);
-  top: 0;
-  left: 3px;
 }
 
 /* Output */