AdminandClaude Sonnet 5
626283ba50
Sampling whatever's behind the button via backdrop-filter meant two secondary buttons could render differently depending on what happened to be nearby (e.g. dark album art bleeding into the blur), so "Explorar musica" and "Aleatorio" ended up visibly different colors despite being the same variant. Replace it with a fixed, hue-tied translucent tint (bg-accent-tint, the same token family accent already uses) so every secondary button computes to the identical color, ties into the same dynamic accent hue as the rest of the app, and reads as a softer sibling of the accent button instead of an unrelated gray. Hover now steps up to bg-accent-btn (same hue family, stronger) instead of a flat, hue-agnostic gray. Removed the now-unused --mf-btn-bg-hover/ --color-btn-hover tokens. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
99 lines
2.4 KiB
CSS
99 lines
2.4 KiB
CSS
:root {
|
|
--mf-liked-grad: linear-gradient(150deg, oklch(0.4 0.09 330), oklch(0.18 0.04 10));
|
|
--mf-accent-dim: color-mix(in oklch, var(--mf-accent) 22%, transparent);
|
|
--mf-tile-l: 0.34;
|
|
--mf-tile-c: 0.1;
|
|
--mf-tile-shade-l: 0.14;
|
|
--mf-tile-shade-c: 0.035;
|
|
|
|
--mf-text: #d9d8dc;
|
|
--mf-text-2: #8a8a8e;
|
|
--mf-text-3: #7d7d81;
|
|
--mf-text-4: #646468;
|
|
|
|
--mf-surface: rgba(255, 255, 255, 0.022);
|
|
--mf-surface-2: rgba(255, 255, 255, 0.045);
|
|
--mf-surface-hover: rgba(255, 255, 255, 0.06);
|
|
|
|
--mf-border: rgba(255, 255, 255, 0.04);
|
|
--mf-border-strong: rgba(255, 255, 255, 0.09);
|
|
--mf-track: rgba(255, 255, 255, 0.09);
|
|
|
|
--mf-scrim: #000000;
|
|
--mf-on-art: #fefdfb;
|
|
--mf-on-art-2: #cac8c3;
|
|
--mf-ink: #0a0a0d;
|
|
--mf-cta-strong-bg: #ffffff;
|
|
|
|
--mf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
|
|
--mf-sidebar-w: 254px;
|
|
--mf-queue-w: 304px;
|
|
--mf-nav-h: 66px;
|
|
--mf-player-h: 78px;
|
|
--mf-safe-b: env(safe-area-inset-bottom, 0px);
|
|
--mf-player-side-w: 16rem;
|
|
--mf-menu-w: 15rem;
|
|
--mf-submenu-w: 16rem;
|
|
--mf-range-h: 3.5px;
|
|
--mf-range-thumb: 11px;
|
|
--mf-volume-w: 84px;
|
|
|
|
--mf-scrollbar: rgba(255, 255, 255, 0.18);
|
|
--mf-scrollbar-hover: rgba(255, 255, 255, 0.32);
|
|
|
|
--z-raised: 10;
|
|
--z-sticky: 20;
|
|
--z-backdrop: 30;
|
|
--z-menu: 40;
|
|
--z-submenu: 50;
|
|
--z-modal: 60;
|
|
--z-grain: 80;
|
|
}
|
|
|
|
@media (width >= 40rem) {
|
|
:root {
|
|
--mf-player-h: 100px;
|
|
}
|
|
}
|
|
|
|
@media (width >= 64rem) {
|
|
:root {
|
|
--mf-nav-h: 0px;
|
|
}
|
|
}
|
|
|
|
@media (width < 73.75rem) {
|
|
:root {
|
|
--mf-queue-w: 258px;
|
|
}
|
|
}
|
|
|
|
:root[data-theme='light'] {
|
|
--mf-text: #17171a;
|
|
--mf-text-2: #4a4a4e;
|
|
--mf-text-3: #6b6b6f;
|
|
--mf-text-4: #8c8c90;
|
|
|
|
--mf-surface: rgba(0, 0, 0, 0.035);
|
|
--mf-surface-2: rgba(0, 0, 0, 0.06);
|
|
--mf-surface-hover: #e8eceb;
|
|
|
|
--mf-scrollbar: rgba(0, 0, 0, 0.18);
|
|
--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
|
|
|
|
--mf-border: rgba(0, 0, 0, 0.08);
|
|
--mf-border-strong: rgba(0, 0, 0, 0.14);
|
|
--mf-track: rgba(0, 0, 0, 0.12);
|
|
|
|
--mf-scrim: #ffffff;
|
|
--mf-ink: #ffffff;
|
|
--mf-cta-strong-bg: #17171a;
|
|
|
|
--mf-tile-l: 0.58;
|
|
--mf-tile-c: 0.085;
|
|
--mf-tile-shade-l: 0.42;
|
|
--mf-tile-shade-c: 0.05;
|
|
--mf-liked-grad: linear-gradient(150deg, oklch(0.62 0.12 330), oklch(0.46 0.08 10));
|
|
}
|