snxraven/holesail-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style: theme-aware custom checkboxes for bulk selection rows
CI / Build & Test (push) Successful in 3m3s
Details

Browse Source 
Replace native browser checkbox appearance on table row and select-all
checkboxes with fully custom styled controls using design system tokens,
with a white checkmark override for the light theme's darker cyan.
This commit is contained in:
Raven Scott
2026-03-01 22:17:19 -05:00
parent ad292958a8
commit 4210fd4f23
1 changed files with 65 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/dashboard/dashboard.css
+65
View File
@@ -51,6 +51,16 @@
--red-mid: rgba(225,29,72,.20);
}
/* Light theme: white checkmark on the darker cyan */
[data-theme="light"] input[type="checkbox"].vhost-row-cb:checked::after,
[data-theme="light"] input[type="checkbox"].server-row-cb:checked::after,
[data-theme="light"] input[type="checkbox"].svc-row-cb:checked::after,
[data-theme="light"] input[type="checkbox"]#vhostSelectAll:checked::after,
[data-theme="light"] input[type="checkbox"]#serverSelectAll:checked::after,
[data-theme="light"] input[type="checkbox"]#svcSelectAll:checked::after {
border-color: #ffffff;
}
html, body {
height: 100%;
background: var(--bg);
@@ -699,6 +709,61 @@
}
.checkbox-row label { font-size: 13px; color: var(--text2); cursor: pointer; }
/* ── Table row checkboxes (bulk selection) ──────── */
input[type="checkbox"].vhost-row-cb,
input[type="checkbox"].server-row-cb,
input[type="checkbox"].svc-row-cb,
input[type="checkbox"]#vhostSelectAll,
input[type="checkbox"]#serverSelectAll,
input[type="checkbox"]#svcSelectAll {
appearance: none;
-webkit-appearance: none;
width: 15px;
height: 15px;
min-width: 15px;
border: 1.5px solid var(--border2);
border-radius: 4px;
background: var(--elevated);
cursor: pointer;
position: relative;
transition: border-color var(--transition), background var(--transition);
vertical-align: middle;
}
input[type="checkbox"].vhost-row-cb:hover,
input[type="checkbox"].server-row-cb:hover,
input[type="checkbox"].svc-row-cb:hover,
input[type="checkbox"]#vhostSelectAll:hover,
input[type="checkbox"]#serverSelectAll:hover,
input[type="checkbox"]#svcSelectAll:hover {
border-color: var(--cyan);
}
input[type="checkbox"].vhost-row-cb:checked,
input[type="checkbox"].server-row-cb:checked,
input[type="checkbox"].svc-row-cb:checked,
input[type="checkbox"]#vhostSelectAll:checked,
input[type="checkbox"]#serverSelectAll:checked,
input[type="checkbox"]#svcSelectAll:checked {
background: var(--cyan);
border-color: var(--cyan);
}
input[type="checkbox"].vhost-row-cb:checked::after,
input[type="checkbox"].server-row-cb:checked::after,
input[type="checkbox"].svc-row-cb:checked::after,
input[type="checkbox"]#vhostSelectAll:checked::after,
input[type="checkbox"]#serverSelectAll:checked::after,
input[type="checkbox"]#svcSelectAll:checked::after {
content: '';
position: absolute;
left: 3px;
top: 1px;
width: 5px;
height: 9px;
border: 2px solid #09090b;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
/* ── Radio ──────────────────────────────────────── */
.radio-row {
display: flex;