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 {
|
.header-toolbar {
|
||||||
grid-column: 3;
|
grid-column: 3;
|
||||||
justify-self: end;
|
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) {
|
@media (max-width: 720px) {
|
||||||
.header-toolbar { grid-column: 1; }
|
.header-toolbar { grid-column: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-toolbar {
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-btn,
|
.header-btn,
|
||||||
.header-btn-logout,
|
.header-btn-logout,
|
||||||
.header-link {
|
.header-link {
|
||||||
@@ -6552,6 +6556,29 @@ footer .separator { color: var(--ink-ghost); margin: 0 8px; }
|
|||||||
display: block;
|
display: block;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
z-index: 2;
|
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 */
|
/* Tonearm */
|
||||||
|
|||||||
Reference in New Issue
Block a user