From d11c156ed770d7dfb6fcc6fdbe6a211ec4578459 Mon Sep 17 00:00:00 2001 From: Sandro Date: Mon, 2 Nov 2026 13:13:14 +0100 Subject: [PATCH] style(ui): solid counters without the dark ring The accent counter was a 10-16 % tint, so on the phone nav bar the icon showed through; it now lies on an opaque panel. The ring in the page colour looked like a black shadow in dark themes and is gone; text counters overlap the word by 2 px instead. Co-Authored-By: Claude Opus 5.5 --- Doku/ui-patterns.md | 8 ++++---- frontend/src/index.css | 11 +++++------ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/Doku/ui-patterns.md b/Doku/ui-patterns.md index a2a3494..6aed6d4 100644 --- a/Doku/ui-patterns.md +++ b/Doku/ui-patterns.md @@ -59,14 +59,14 @@ Komponente: [FormSheet.tsx](../frontend/src/components/FormSheet.tsx), Tastatur- Komponente: [CountBadge.tsx](../frontend/src/components/CountBadge.tsx), CSS-Klassen `count-badge*` in [index.css](../frontend/src/index.css). Es gibt keine anderen Zähler-Stile mehr. -- **Form:** runder Kreis, mindestens 16 px, ab 100 als „99+“ (der Screenreader liest die echte Zahl). Bei 0 ausgeblendet, außer mit `showZero` (z. B. Mitgliederzahl, mobiles Menü). +- **Form:** runder, gefüllter Kreis mit dünnem Rand, ohne Schatten oder Ring, mindestens 16 px, ab 100 als „99+“ (der Screenreader liest die echte Zahl). Bei 0 ausgeblendet, außer mit `showZero` (z. B. Mitgliederzahl, mobiles Menü). - **Farbe (`variant`):** - `accent`: Hier wartet etwas auf dich. Navigationsleiste: Triage (Inbox), Aufgaben (offene Aufgaben), Listen (offene Einträge aller eigenen und geteilten Listen). Workspace hat keinen Zähler. - `muted` (Standard): reine Anzahl. Tabs der Aufgabenlisten und Listen, Organisationen, mobiles Menü. - - Beide kommen aus den Theme-Variablen (`--accent-primary`/`--text-on-accent` bzw. `--text-muted`/`--bg-panel`) und passen sich damit jedem Theme an. + - Beide kommen aus den Theme-Variablen (`--accent-primary`/`--text-on-accent` bzw. `--text-muted`/`--bg-panel`) und passen sich damit jedem Theme an. Der Akzent liegt auf einer deckenden Panel-Fläche, damit am Handy das Icon darunter nicht durchscheint. - **Position (`position`):** - - `text`: an Beschriftungen (Navigation, Reiter der Aufgabenlisten und Listen, Workspace-Kopf). Der Zähler steht im Textfluss direkt hinter dem Wort, leicht angehoben, und schließt direkt an; nur sein Ring in Seitenfarbe hängt 2 px über den letzten Buchstaben, egal wie viele Stellen die Zahl hat; breitere Zahlen machen den Reiter breiter. Der Text steht dafür in einem `inline-flex items-center`-Span. - - `corner`: Benachrichtigungs-Badge oben rechts am nächsten `relative` Elternelement, mit Ring in der Seitenfarbe; für Icons, z. B. in der mobilen Leiste (`-top-1.5 -right-2.5`). + - `text`: an Beschriftungen (Navigation, Reiter der Aufgabenlisten und Listen, Workspace-Kopf). Der Zähler steht im Textfluss direkt hinter dem Wort, leicht angehoben, und hängt immer 2 px über den letzten Buchstaben, egal wie viele Stellen die Zahl hat; breitere Zahlen machen den Reiter breiter. Der Text steht dafür in einem `inline-flex items-center`-Span. + - `corner`: Benachrichtigungs-Badge oben rechts am nächsten `relative` Elternelement; für Icons, z. B. in der mobilen Leiste (`-top-1.5 -right-2.5`). - `inline`: im Textfluss. - Zahlen im mobilen Menü (`MobileActionContext`, `badge: number`) werden automatisch als `CountBadge` gezeigt; Text-Badges wie „2 aktiv“ bleiben Textmarken. - **Wichtig für neue Klassen:** Tailwind entfernt Klassen aus `@layer components`, die nicht wörtlich im Code stehen. Klassennamen deshalb nie zusammensetzen (`count-badge-${variant}`), sondern ausschreiben. diff --git a/frontend/src/index.css b/frontend/src/index.css index 7d2f5d0..bd1671e 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -322,7 +322,8 @@ body { pointer-events: none; } .count-badge-accent { - background: var(--accent-dim); + /* The tint on an opaque panel: the badge stays solid on top of icons (phone nav bar) */ + background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--bg-panel); color: var(--accent-primary); border: 1px solid var(--accent-border); } @@ -336,16 +337,14 @@ body { top: -0.5rem; right: -0.5rem; z-index: 1; - /* ring in the page colour keeps the badge readable on top of borders */ - box-shadow: 0 0 0 2px var(--bg-app); } - /* In the text flow right after a label: only the ring hangs over the last letter (2 px), however many - digits; wider numbers make the tab wider instead of covering more of the word */ + /* In the text flow right after a label: hangs 2 px over the last letter, however many digits; wider + numbers make the tab wider instead of covering more of the word */ .count-badge-text { position: relative; top: -0.375rem; + margin-left: -2px; z-index: 1; - box-shadow: 0 0 0 2px var(--bg-app); } .badge-ok {