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

Fix the track-row pills: <td>s must stay table-cells

Browse source 
The lock-in pass caught it before it shipped anywhere: the pill styling set
display:inline-flex on the status cells — which are <td>s — knocking them out
of table-cell layout and corrupting the row grid. The pill is now a centered
pseudo-element painted BEHIND the text (z-index -1 inside the cell's own
stacking context), so the cell's box model is untouched. State colors stay as
CSS vars on the td and cascade into the pseudo.

Also covers the secondary live-progress writer discovered in the same pass:
it stamps legacy download-downloading / download-complete classes instead of
data-state — both vocabularies now get the same pills (accent + breathe while
downloading, green when complete).
This commit is contained in:
BoulderBadgeDad 2026-06-06 18:35:45 -07:00
parent ab33d8cf2e
commit b58d7b4dad
1 changed files with 51 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
webui/static/style.css
View file

@ -66325,32 +66325,58 @@ body.em-scroll-lock { overflow: hidden; }
}
/* ── Modal revamp: live track-row states (animation == gauge, in the table) ──
The download-status cell carries data-state (set by the renderer); the row
carries .row-working while a track is actively searching/downloading/
processing. Badges are state-colored pills; only ACTIVE states breathe. */
The download-status cell carries data-state (set by the main renderer; a
secondary live-progress writer uses the legacy download-downloading /
download-complete classes — both vocabularies are styled). The row carries
.row-working while a track is actively searching/downloading/processing.
.track-download-status[data-state] {
display: inline-flex;
align-items: center;
padding: 3px 11px;
border-radius: 999px;
LAYOUT NOTE: these are <td>s — they must stay display:table-cell, so the
pill is a centered pseudo-element painted BEHIND the text, not a box model
change on the cell itself. State colors are CSS vars on the td; the pseudo
reads them. */
.track-download-status[data-state],
.track-download-status.download-downloading,
.track-download-status.download-complete,
.track-match-status {
position: relative;
z-index: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid var(--row-state-border, rgba(255, 255, 255, 0.1));
background: var(--row-state-bg, rgba(255, 255, 255, 0.04));
color: var(--row-state-fg, rgba(255, 255, 255, 0.65));
white-space: nowrap;
}
.track-download-status[data-state]::before,
.track-download-status.download-downloading::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: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 18px);
height: 26px;
border-radius: 999px;
background: var(--row-state-bg, rgba(255, 255, 255, 0.04));
border: 1px solid var(--row-state-border, rgba(255, 255, 255, 0.1));
z-index: -1;
pointer-events: none;
}
.track-download-status[data-state="pending"],
.track-download-status[data-state="cancelled"],
.track-download-status[data-state="cancelling"] {
.track-download-status[data-state="cancelling"],
.track-download-status[data-state="not_found"] {
--row-state-fg: rgba(255, 255, 255, 0.5);
}
.track-download-status[data-state="searching"],
.track-download-status[data-state="downloading"] {
.track-download-status[data-state="downloading"],
.track-download-status.download-downloading {
--row-state-border: rgba(var(--accent-rgb), 0.4);
--row-state-bg: rgba(var(--accent-rgb), 0.12);
--row-state-fg: rgb(var(--accent-light-rgb));
@ -66362,7 +66388,8 @@ body.em-scroll-lock { overflow: hidden; }
--row-state-fg: #fbbf24;
}
.track-download-status[data-state="completed"] {
.track-download-status[data-state="completed"],
.track-download-status.download-complete {
--row-state-border: rgba(74, 222, 128, 0.35);
--row-state-bg: rgba(74, 222, 128, 0.1);
--row-state-fg: #4ade80;
@ -66380,15 +66407,12 @@ body.em-scroll-lock { overflow: hidden; }
--row-state-fg: #fb923c;
}
.track-download-status[data-state="not_found"] {
--row-state-fg: rgba(255, 255, 255, 0.4);
}
/* Only states that are actually WORKING breathe */
.track-download-status[data-state="searching"],
.track-download-status[data-state="downloading"],
.track-download-status[data-state="post_processing"],
.track-download-status[data-state="cancelling"] {
.track-download-status[data-state="cancelling"],
.track-download-status.download-downloading {
animation: row-state-breathe 1.8s ease-in-out infinite;
}
@ -66397,33 +66421,21 @@ body.em-scroll-lock { overflow: hidden; }
50% { opacity: 0.55; }
}
/* Match-status cells get the same pill language (classes already existed) */
.track-match-status {
display: inline-flex;
align-items: center;
padding: 3px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
/* Match-status colors feed the same pill (classes already existed) */
.track-match-status.match-found {
border: 1px solid rgba(74, 222, 128, 0.35);
background: rgba(74, 222, 128, 0.1);
color: #4ade80;
--row-state-border: rgba(74, 222, 128, 0.35);
--row-state-bg: rgba(74, 222, 128, 0.1);
--row-state-fg: #4ade80;
}
.track-match-status.match-missing {
border: 1px solid rgba(251, 191, 36, 0.35);
background: rgba(251, 191, 36, 0.1);
color: #fbbf24;
--row-state-border: rgba(251, 191, 36, 0.35);
--row-state-bg: rgba(251, 191, 36, 0.1);
--row-state-fg: #fbbf24;
}
.track-match-status.match-checking {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.5);
--row-state-fg: rgba(255, 255, 255, 0.5);
}
/* The actively-working row carries a persistent accent presence — like the