From 997a8e86d90132bc424c55d5be670b45571471ae Mon Sep 17 00:00:00 2001 From: Ken D'Ambrosio Date: Fri, 12 Jun 2026 14:05:57 +0000 Subject: 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 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 --- public/css/style.css | 38 ++++++++++++++++---------------------- 1 file changed, 16 insertions(+), 22 deletions(-) (limited to 'public/css/style.css') 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 ──────────────────────────────────────────────────────── */ -- cgit v1.2.3