marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(person-mention): .person-mention global CSS for read-mode anchors

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-29 08:13:32 +02:00
parent eb6e21f032
commit c247e1e971
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/routes/layout.css
View File

@@ -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 {