Changeset d252ce8 in Klonkt

Timestamp:

06/20/2026 06:53:53 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

6c574b4

Parents:

08cfdaa

Message:

fix(epk): clear track checkboxes (accent + checked row highlighted)

Native checkboxes were invisible in dark mode. Now accent-color on the
checkbox + checked row gets an accent tint, border and a left bar.

Co-Authored-By: Claude <noreply@…>

File:

• src/views/pages/admin-epk.ejs (modified) (1 diff)

src/views/pages/admin-epk.ejs

@@ -70 +70 @@
   .admin-page .set-form .btn { align-self: flex-start; }
   .admin-page .epk-track-pick { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; border: 1px solid var(--rule); border-radius: 8px; padding: 4px; }
-  .admin-page .epk-pick-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: 6px; cursor: pointer; }
+  .admin-page .epk-pick-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
   .admin-page .epk-pick-item:hover { background: var(--paper); }
-  .admin-page .epk-pick-item input { width: auto; flex: 0 0 auto; }
+  .admin-page .epk-pick-item input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
+  /* Duidelijk aangevinkt: accent-tint + rand + balkje links. */
+  .admin-page .epk-pick-item:has(input:checked) {
+    background: color-mix(in srgb, var(--accent) 16%, transparent);
+    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+    box-shadow: inset 3px 0 0 var(--accent);
+  }
+  .admin-page .epk-pick-item input:disabled { opacity: .4; }
   .admin-page .epk-pick-title { font-weight: 600; }
   .admin-page .epk-pick-artist { color: var(--ink-muted, var(--ink-soft)); font-size: 0.85rem; }