From c247e1e9713d4245e4091c3fcae44b3e84fbcf56 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 29 Apr 2026 08:13:32 +0200 Subject: [PATCH] feat(person-mention): .person-mention global CSS for read-mode anchors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Underline-at-rest (WCAG AA) so the link affordance does not depend on colour alone. focus-visible uses a 2px box-shadow ring on --c-ink with a 2px border-radius — the same focus-ring shape as the comment .mention chip but rectangular instead of pill, since the anchor sits in flowing text. Lives next to the existing .mention rule because Svelte scoped styles do not reach the HTML injected by {@html …} in TranscriptionReadView. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/routes/layout.css | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css index e0335a34..5e693203 100644 --- a/frontend/src/routes/layout.css +++ b/frontend/src/routes/layout.css @@ -329,6 +329,34 @@ background-color: color-mix(in srgb, var(--c-accent) 25%, transparent); } +/* ─── 7b. Person mention link (transcription read mode) ────────────────────── */ +/* + Rendered by renderTranscriptionBody() via {@html ...} in TranscriptionReadView. + Underline at rest is required for WCAG AA — colour alone fails 8% of men + with red-green colour-blindness. Focus ring uses a box-shadow + border-radius + so the rectangle doesn't touch the glyphs. +*/ +.person-mention { + color: var(--c-ink); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 3px; + text-decoration-color: color-mix(in srgb, var(--c-accent) 60%, transparent); + cursor: pointer; + transition: text-decoration-color 0.15s ease; +} + +.person-mention:hover { + text-decoration-color: var(--c-accent); + text-decoration-thickness: 2px; +} + +.person-mention:focus-visible { + outline: none; + box-shadow: 0 0 0 2px var(--c-ink); + border-radius: 2px; +} + /* ─── 8. Base styles ───────────────────────────────────────────────────────── */ @layer base { html {