diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte index 3217b15..d25f4e1 100644 --- a/web-player/src/lib/components/ui/primitives/Button.svelte +++ b/web-player/src/lib/components/ui/primitives/Button.svelte @@ -36,7 +36,7 @@ const variants = { primary: 'bg-cta-strong text-ink hover:brightness-95', - secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg', + secondary: 'bg-btn backdrop-blur-md text-fg-2 hover:bg-btn-hover hover:text-fg', accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover', danger: 'bg-danger text-on-art hover:brightness-110' }; diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css index ec2380d..07e79ec 100644 --- a/web-player/src/lib/theme/theme.css +++ b/web-player/src/lib/theme/theme.css @@ -14,10 +14,8 @@ --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-btn-bg: var(--mf-surface-2); + --mf-btn-bg: rgba(255, 255, 255, 0.06); --mf-btn-bg-hover: var(--mf-surface-hover); - --mf-btn-secondary-bg: rgba(255, 255, 255, 0.045); - --mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.07); --mf-border: rgba(255, 255, 255, 0.04); --mf-border-strong: rgba(255, 255, 255, 0.09); @@ -82,10 +80,8 @@ --mf-surface: rgba(0, 0, 0, 0.035); --mf-surface-2: rgba(0, 0, 0, 0.06); --mf-surface-hover: #e8eceb; - --mf-btn-bg: var(--mf-surface-2); + --mf-btn-bg: rgba(0, 0, 0, 0.07); --mf-btn-bg-hover: var(--mf-surface-hover); - --mf-btn-secondary-bg: rgba(0, 0, 0, 0.09); - --mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.14); --mf-scrollbar: rgba(0, 0, 0, 0.18); --mf-scrollbar-hover: rgba(0, 0, 0, 0.32); diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css index 8c8ee99..425fe11 100644 --- a/web-player/src/routes/layout.css +++ b/web-player/src/routes/layout.css @@ -32,8 +32,6 @@ --color-danger-fg: oklch(88.5% 0.062 18.334); --color-btn: var(--mf-btn-bg); --color-btn-hover: var(--mf-btn-bg-hover); - --color-btn-glass: var(--mf-btn-secondary-bg); - --color-btn-glass-hover: var(--mf-btn-secondary-bg-hover); --radius-tag: 0.25rem; --radius-thumb: 0.5rem;