fix(ui): editorial toolbar + sepia album art

Toolbar
- Strip the legacy dark capsule from .header-toolbar (background,
  border, border-radius, padding) — buttons now sit as individual
  ghost icons matching the mockup, with the per-button transparent
  border + copper hover that was already in place.

Album art
- Apply a warm sepia/saturate/contrast filter to #album-art inside
  the vinyl label so vibrant covers (e.g. Rammstein red) don't
  fight the copper palette and read consistent with the vinyl
  groove rendering. Eases back to near-natural color on .now-playing
  hover so the user can still see the real cover.
- Match the album-art-glow tint with the same hue-rotate so the
  bloom around the spinning label stays palette-aligned.
This commit is contained in:
2026-04-25 01:56:03 +03:00
parent e9e4165927
commit d157388a94
+31 -4
View File
@@ -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 */