xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

style: Custom dark-theme checkboxes on pipeline admin page

Browse source 
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>
This commit is contained in:
jlightner 2026-03-31 17:23:33 -05:00
parent 9bc253f2c9
commit 0817e6e957
1 changed files with 46 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/App.css
View file

@ -3442,11 +3442,54 @@ a.app-footer__repo:hover {
flex-shrink: 0; 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; width: 16px;
height: 16px; height: 16px;
border: 1.5px solid var(--color-text-muted);
border-radius: 3px;
background: transparent;
cursor: pointer; 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 ─────────────────────────────────────────────────────────── */ /* ── Bulk Toolbar ─────────────────────────────────────────────────────────── */
@ -3561,9 +3604,7 @@ a.app-footer__repo:hover {
white-space: nowrap; white-space: nowrap;
} }
.auto-refresh-toggle input { /* auto-refresh checkbox: styled via shared checkbox rules above */
accent-color: var(--color-accent);
}
/* ── Video row change highlight ───────────────────────────────────────────── */ /* ── Video row change highlight ───────────────────────────────────────────── */