From 0817e6e95782a95e7e8b60184b9481554c7c2e8e Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@ub01.a.xpltd.co>
Date: Tue, 31 Mar 2026 17:23:33 -0500
Subject: [PATCH] style: Custom dark-theme checkboxes on pipeline admin page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace default browser checkboxes with custom styled versions that blend
with the dark UI — transparent background, muted border, cyan accent on check.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.css | 51 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index eb5d1fc..a6c739f 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3442,11 +3442,54 @@ a.app-footer__repo:hover {
   flex-shrink: 0;
 }
 
-.pipeline-video__checkbox input[type="checkbox"] {
+.pipeline-video__checkbox input[type="checkbox"],
+.auto-refresh-toggle input[type="checkbox"],
+.admin-pipeline__select-all input[type="checkbox"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
   width: 16px;
   height: 16px;
+  border: 1.5px solid var(--color-text-muted);
+  border-radius: 3px;
+  background: transparent;
   cursor: pointer;
-  accent-color: var(--color-accent);
+  position: relative;
+  flex-shrink: 0;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.pipeline-video__checkbox input[type="checkbox"]:hover,
+.auto-refresh-toggle input[type="checkbox"]:hover,
+.admin-pipeline__select-all input[type="checkbox"]:hover {
+  border-color: var(--color-accent);
+}
+
+.pipeline-video__checkbox input[type="checkbox"]:checked,
+.auto-refresh-toggle input[type="checkbox"]:checked,
+.admin-pipeline__select-all input[type="checkbox"]:checked {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.pipeline-video__checkbox input[type="checkbox"]:checked::after,
+.auto-refresh-toggle input[type="checkbox"]:checked::after,
+.admin-pipeline__select-all input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--color-bg-page);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.pipeline-video__checkbox input[type="checkbox"]:disabled,
+.admin-pipeline__select-all input[type="checkbox"]:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 /* ── Bulk Toolbar ─────────────────────────────────────────────────────────── */
@@ -3561,9 +3604,7 @@ a.app-footer__repo:hover {
   white-space: nowrap;
 }
 
-.auto-refresh-toggle input {
-  accent-color: var(--color-accent);
-}
+/* auto-refresh checkbox: styled via shared checkbox rules above */
 
 /* ── Video row change highlight ───────────────────────────────────────────── */