110 lines
2.8 KiB
CSS
110 lines
2.8 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: #b1b0b5;
|
|
|
|
--mf-surface: rgba(255, 255, 255, 0.022);
|
|
--mf-surface-2: rgba(255, 255, 255, 0.055);
|
|
--mf-surface-hover: rgba(255, 255, 255, 0.06);
|
|
--mf-row-hover: rgba(255, 255, 255, 0.035);
|
|
--mf-btn-bg: rgba(255, 255, 255, 0.055);
|
|
--mf-btn-bg-hover: rgba(255, 255, 255, 0.09);
|
|
|
|
--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: #c6c4cb;
|
|
--mf-cta-strong-hover: #d8d7dc;
|
|
--mf-danger-fg: oklch(0.885 0.062 18.334);
|
|
|
|
--mf-motion-fast: 150ms;
|
|
--mf-motion-base: 200ms;
|
|
--mf-motion-slow: 300ms;
|
|
--mf-ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
|
--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: #17161c;
|
|
--mf-text-2: #5d5c66;
|
|
|
|
--mf-surface: rgba(0, 0, 0, 0.035);
|
|
--mf-surface-2: rgba(0, 0, 0, 0.06);
|
|
--mf-surface-hover: rgba(26, 24, 38, 0.06);
|
|
--mf-row-hover: rgba(26, 24, 38, 0.04);
|
|
--mf-btn-bg: rgba(255, 255, 255, 0.7);
|
|
--mf-btn-bg-hover: #ffffff;
|
|
|
|
--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: #f7f6f9;
|
|
--mf-cta-strong-bg: #1b1a20;
|
|
--mf-cta-strong-hover: #2e2d36;
|
|
--mf-danger-fg: oklch(0.5 0.16 25);
|
|
|
|
--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));
|
|
}
|