From a6bf7136b71c41ef84ef1249a0f1a223a596f770 Mon Sep 17 00:00:00 2001
From: iamdoubz <>
Date: Thu, 30 Jul 2026 10:40:08 -0500
Subject: [PATCH] Liquid glass fixes
---
assets/css/radio.css | 16 ++++++++++------
index.php | 2 +-
2 files changed, 11 insertions(+), 7 deletions(-)
diff --git a/assets/css/radio.css b/assets/css/radio.css
index eaf91ff..3ff6ee0 100644
--- a/assets/css/radio.css
+++ b/assets/css/radio.css
@@ -87,6 +87,7 @@ a:hover, a:focus { color: var(--text); text-decoration: underline; }
.art-ring[hidden] { display: none; }
.playpause {
+ position: relative;
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
border: none; border-radius: 50%;
@@ -258,6 +259,7 @@ audio[controls] { width: 100%; outline: 0; }
/* ----------------------------------------------------------------- menu */
.menu-wrap { position: fixed; top: 16px; right: 16px; z-index: 30; }
.menu-toggle {
+ position: relative;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: var(--accent); color: var(--accent-text);
@@ -308,19 +310,21 @@ audio[controls] { width: 100%; outline: 0; }
https://github.com/nikdelvin/liquid-glass (MIT) — see the liquid-glass
block in player.js for the SVG feDisplacementMap filter it builds.
.glass-fx gets its real backdrop-filter set there; the rule below is
- just the pre-JS / unsupported-browser fallback (plain blur). Placed
- after .playpause/.icon-btn/.lyrics-toggle/.menu-toggle on purpose so it
- wins the cascade at equal specificity and overrides their THEME_ACCENT
- fill without needing !important. */
+ just the pre-JS / unsupported-browser fallback (plain blur). The
+ [aria-pressed="true"] variant is needed to beat .lyrics-toggle's own
+ higher-specificity active-state accent fill (class+attribute selector).
+ position/z-index are NOT set here — .lyrics-toggle already needs its own
+ position: absolute for corner placement, so each button supplies its own
+ (see .playpause / .menu-toggle), keeping this class layout-neutral. */
.glass-btn,
.glass-btn:hover,
.glass-btn:focus,
-.glass-btn:active {
+.glass-btn:active,
+.glass-btn[aria-pressed="true"] {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.35);
}
.glass-btn {
- position: relative;
isolation: isolate; /* keeps .glass-fx's negative z-index scoped to this button */
overflow: hidden;
transition: transform .25s ease;
diff --git a/index.php b/index.php
index 5d26545..0c3e37a 100644
--- a/index.php
+++ b/index.php
@@ -80,7 +80,7 @@ $glassFx = $liquidGlass ? 'LIVE
-
+