diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css index 86148f0..aeaf8f9 100644 --- a/media_server/static/css/styles.css +++ b/media_server/static/css/styles.css @@ -4223,16 +4223,20 @@ header .brand-sub { .header-toolbar { grid-column: 3; justify-self: end; + /* Strip the legacy dark capsule */ + background: transparent !important; + border: 0 !important; + border-radius: 0 !important; + padding: 0 !important; + gap: 6px; + display: flex; + align-items: center; } @media (max-width: 720px) { .header-toolbar { grid-column: 1; } } -.header-toolbar { - gap: 4px; -} - .header-btn, .header-btn-logout, .header-link { @@ -6552,6 +6556,29 @@ footer .separator { color: var(--ink-ghost); margin: 0 8px; } display: block; border-radius: 50%; z-index: 2; + /* Vinyl-consistent tint: warm sepia + slight sharpen + subtle contrast. + Saturate pushed down so vibrant covers don't fight the copper palette. */ + filter: + sepia(0.35) + saturate(0.85) + contrast(1.08) + brightness(0.95) + hue-rotate(-6deg); + transition: filter 320ms var(--ease); +} +.now-playing:hover .vinyl-label #album-art { + /* On hover, ease back toward natural color so users can see the real art */ + filter: + sepia(0.18) + saturate(0.95) + contrast(1.05) + brightness(1) + hue-rotate(-3deg); +} + +/* Match the glow tint to the album art treatment */ +.now-playing .vinyl-label #album-art-glow { + filter: blur(22px) saturate(1.2) sepia(0.35) hue-rotate(-6deg); } /* Tonearm */