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:
1 parent
2cdfa45375
commit
d11c156ed7
2 files changed
+9
-10
No files matched your search
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user