danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Track rows: drop the pill behind track-match-status (rendered behind the library status)

Browse source 
The status pill is a z-index:-1 ::before drawn behind the text. On the
download-status column it looks right, but on the track-match-status variants
(match-found/missing/checking) the -1 pill rendered behind the adjacent
library-status cell and looked broken (Boulder). Removed the pill from the
match-status variants — they keep their coloured text (--row-state-fg), no
pill — and dropped the now-orphan z-index:0 stacking context from the base
rule (position:relative stays for the hover tooltip). Download-status pills
untouched.
This commit is contained in:
BoulderBadgeDad 2026-06-07 16:39:35 -07:00
parent 4eae33270b
commit 4e3241bfad
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
webui/static/style.css
View file

@ -66371,20 +66371,20 @@ body.em-scroll-lock { overflow: hidden; }
.track-download-status.download-downloading, .track-download-status.download-downloading,
.track-download-status.download-complete, .track-download-status.download-complete,
.track-match-status { .track-match-status {
position: relative; position: relative; /* for the hover tooltip ::after — no pill anymore */
z-index: 0;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--row-state-fg, rgba(255, 255, 255, 0.65)); color: var(--row-state-fg, rgba(255, 255, 255, 0.65));
} }
/* Pill drawn behind the status text. ONLY the download-status column gets it —
the track-match-status variants rendered the z-index:-1 pill behind the
library-status cell and looked broken, so they keep just their coloured
text (--row-state-fg), no pill. */
.track-download-status[data-state]::before, .track-download-status[data-state]::before,
.track-download-status.download-downloading::before, .track-download-status.download-downloading::before,
.track-download-status.download-complete::before, .track-download-status.download-complete::before {
.track-match-status.match-found::before,
.track-match-status.match-missing::before,
.track-match-status.match-checking::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;