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:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user