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 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 13:13:14 +01:00
1 parent 2cdfa45375
commit d11c156ed7
2 files changed
+9 -10

No files matched your search

+5 -6
View File
@@ -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 {