lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

audioplayer glass effect

Browse Source
This commit is contained in:
lelo 2026-01-23 20:31:15 +00:00
parent 77d1672efb
commit 4db1b8d927
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
static/audioplayer.css
View File

@ -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 */