diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-06-12 14:05:57 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-06-12 14:05:57 +0000 |
| commit | 997a8e86d90132bc424c55d5be670b45571471ae (patch) | |
| tree | 41a4871879f5f791559f5194c38e0c0e649fb8dc /public/css/style.css | |
| parent | cfb814470864785565f33e4bebd2aca7e67c16ae (diff) | |
Fix face selection: move checkbox below thumbnail, remove pointer-events hack
The overlaid checkbox had pointer-events:none so clicks fell through to
the photo link. Replaced with a real <input type=checkbox> rendered
below each face crop. Checkbox change events drive selection state;
clicking anywhere on the card except the photo link also toggles it.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'public/css/style.css')
| -rw-r--r-- | public/css/style.css | 38 |
1 files changed, 16 insertions, 22 deletions
diff --git a/public/css/style.css b/public/css/style.css index a549143..b907f0e 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -571,35 +571,29 @@ tr.delete-marked td { background: rgba(192,57,43,.08); } .person-detail-main, .person-page-main { flex: 1; min-width: 0; } -/* Selectable cards (photo grid and face grid) */ -.selectable-card, -.selectable-face { cursor: pointer; position: relative; } -.selectable-card .thumb-wrap, -.selectable-face .face-detail-thumb { position: relative; } +/* Selectable photo cards (public person page) */ +.selectable-card { cursor: pointer; position: relative; } +.selectable-card .thumb-wrap { position: relative; } .select-checkbox { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 4px; - border: 2px solid rgba(255,255,255,.7); - background: rgba(0,0,0,.35); - display: flex; align-items: center; justify-content: center; - opacity: 0; transition: opacity .12s; - pointer-events: none; + border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.35); + opacity: 0; transition: opacity .12s; pointer-events: none; } -.selectable-card:hover .select-checkbox, -.selectable-face:hover .select-checkbox { opacity: 1; } -.selectable-card.selected .select-checkbox, -.selectable-face.selected .select-checkbox { +.selectable-card:hover .select-checkbox { opacity: 1; } +.selectable-card.selected .select-checkbox { opacity: 1; background: var(--accent); border-color: var(--accent); } -.selectable-card.selected .select-checkbox::after { - content: ''; display: block; - width: 5px; height: 9px; - border: 2px solid #fff; border-top: none; border-left: none; - transform: rotate(45deg) translate(-1px, -1px); +.selectable-card.selected .thumb-wrap img { opacity: .75; } +.selectable-card.selected { outline: 2px solid var(--accent); outline-offset: -2px; } + +/* Selectable face cards (admin cluster detail) */ +.selectable-face { cursor: pointer; } +.face-cb { + display: block; margin: 5px auto 0; width: 16px; height: 16px; + cursor: pointer; accent-color: var(--accent); } -.selectable-card.selected .thumb-wrap img, -.selectable-face.selected .face-detail-thumb img { opacity: .75; } -.selectable-card.selected, +.selectable-face.selected .face-detail-thumb img { opacity: .72; } .selectable-face.selected { outline: 2px solid var(--accent); outline-offset: -2px; } /* ── Admin upload ──────────────────────────────────────────────────────── */ |