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

feat(person-mention): PR-B2 — read-mode rendering + hover card (issue #362) #371

Merged
marcel merged 18 commits from feat/person-mentions-issue-362-frontend-b2 into main 2026-04-29 13:37:06 +02:00
Conversation 16 Commits 18 Files Changed 16 +28
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c247e1e971 - Show all commits

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 {