From 4db1b8d9271c952536982aabb64c341167e10e2e Mon Sep 17 00:00:00 2001
From: lelo <leonid.firus@outlook.com>
Date: Fri, 23 Jan 2026 20:31:15 +0000
Subject: [PATCH] audioplayer glass effect

---
 static/audioplayer.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/static/audioplayer.css b/static/audioplayer.css
index e4684a9..44bc120 100644
--- a/static/audioplayer.css
+++ b/static/audioplayer.css
@@ -1,14 +1,22 @@
 .audio-player-container {
-  background: linear-gradient(135deg, #f9fbff, #eef4ff);
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
+  backdrop-filter: blur(10px) saturate(135%);
+  -webkit-backdrop-filter: blur(10px) saturate(135%);
   border-radius: 14px;
-  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
-  border: 8px solid #0b1220;
+  box-shadow:
+    0 12px 30px rgba(15, 23, 42, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.24);
+  border: 2px solid rgba(255, 255, 255, 0.55);
+  outline: 1px solid rgba(12, 18, 32, 0.18); /* slightly stronger edge so front/back separate */
+  outline-offset: -1px;
+  background-clip: padding-box; /* keep border separate from glass */
   padding: 12px 12px;
   width: min(600px, 100%);
   display: none;
   color: #1f2937;
   margin-left: 8px;
   margin-right: 8px;
+  overflow: hidden; /* keep the glass blur clean at the edges */
 }
 
 /* Now Playing Info */