NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Make the glass button variant more transparent and soften accent text

Browse Source 
The secondary/glass Button variant used a flat, fairly opaque black or
white tint with no blur, so it didn't read as glass and clashed with
the hue-shifting hero background. Add a backdrop blur and a hairline
border (matching the app's existing glass-bar/glass-panel treatment)
and lower the tint opacity.

Wire up the already-computed but unused --mf-accent-muted token as
--color-accent-muted, and use it for the accent Button variant's text
instead of the higher-chroma --color-accent-soft, so it reads softer.
This commit is contained in:
Admin
2026-09-22 16:42:56 +02:00
parent 717e939038
commit a9bfcbbe2f
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/theme/theme.css
+4 -4
View File
@@ -16,8 +16,8 @@
--mf-surface-hover: rgba(255, 255, 255, 0.06);
--mf-btn-bg: var(--mf-surface-2);
--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-btn-secondary-bg: rgba(255, 255, 255, 0.03);
--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.05);
--mf-border: rgba(255, 255, 255, 0.04);
--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -84,8 +84,8 @@
--mf-surface-hover: #e8eceb;
--mf-btn-bg: var(--mf-surface-2);
--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-btn-secondary-bg: rgba(0, 0, 0, 0.055);
--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.09);
--mf-scrollbar: rgba(0, 0, 0, 0.18);
--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);