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

Dashboard: round Last.fm avatar, invert dark-mark logos (Tidal/Qobuz/Discogs/Amazon)

Browse source 
Last.fm ships a square Twitter avatar; clip it to a circle so the
disc reads as a uniform chip. Tidal / Qobuz / Discogs / Amazon
ship dark-foreground marks that disappear against the dark glass
avatar backdrop — invert to a white silhouette so the logo
actually reads. The per-service accent drop-shadow still applies
so the brand color cue is preserved as a glow around the white
silhouette.
This commit is contained in:
Broque Thomas 2026-05-27 19:32:32 -07:00
parent 79465580ab
commit a315192e9a
2 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
webui/static/api-monitor.js
View file

@ -201,6 +201,7 @@ function _renderEqualizerBars(grid, data) {
bar.type = 'button';
bar.className = 'rate-eq';
bar.id = `rate-eq-${svc}`;
bar.dataset.svc = svc;
bar.style.setProperty('--eq-accent', accent);
bar.setAttribute('aria-label', `${label} rate detail`);
bar.onclick = () => _openRateModal(svc);

26
webui/static/style.css
View file

@ -62331,6 +62331,32 @@ body.reduce-effects .dash-card::after {
drop-shadow(0 0 4px color-mix(in srgb, var(--eq-accent) 35%, transparent));
}
/* Per-service logo tweaks — brand assets vary in shape + foreground
* contrast; these overrides normalise their presentation in the
* dark-glass avatar disc.
*
* - Last.fm ships a square Twitter avatar PNG; clip it to a circle
* so it matches the rounded chip aesthetic and fills the disc.
* - Tidal / Qobuz / Discogs / Amazon ship dark-foreground marks
* that disappear on the dark disc — invert to white silhouette
* so the logo reads. ``brightness(0) invert(1)`` is the canonical
* recipe for "render this image as pure white"; the per-service
* accent drop-shadow (inherited above) keeps the color cue. */
.rate-eq[data-svc="lastfm"] .rate-eq-avatar-logo {
width: 100%;
height: 100%;
border-radius: 50%;
}
.rate-eq[data-svc="tidal"] .rate-eq-avatar-logo,
.rate-eq[data-svc="qobuz"] .rate-eq-avatar-logo,
.rate-eq[data-svc="discogs"] .rate-eq-avatar-logo,
.rate-eq[data-svc="amazon"] .rate-eq-avatar-logo {
filter: brightness(0) invert(1)
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 4px color-mix(in srgb, var(--eq-accent) 60%, transparent));
}
/* Fallback variant — restores the original accent-gradient disc +
* initial-letter glyph when the brand logo URL fails to load. */
.rate-eq-avatar--fallback {