Round vinyl cover in player bar + larger mobile player

- player-art: border-radius 50% (circle), vinyl ring shadow, centre dot appears while spinning
- Mobile player height: 62px -> 74px, cover: 36px -> 46px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-25 17:43:20 +02:00
1 parent 6e00b78219
commit 052846e458
2 files changed
+29 -14

No files matched your search

+28 -13
View File
@@ -176,10 +176,13 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
/* ── PLAYER ── */
.player{position:fixed;bottom:0;left:0;right:0;height:var(--player-h);background:rgba(8,8,20,.93);backdrop-filter:blur(28px);border-top:1px solid var(--border2);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;padding:0 20px;z-index:100}
.player-track{min-width:0;display:flex;align-items:center;gap:10px;overflow:hidden}
.player-art{width:52px;height:52px;border-radius:8px;background:var(--surface2);flex-shrink:0;overflow:hidden;position:relative}
.player-art img{width:100%;height:100%;object-fit:cover}
.player-art{width:52px;height:52px;border-radius:50%;background:var(--surface2);flex-shrink:0;overflow:hidden;position:relative;box-shadow:0 0 0 2px var(--surface2),0 0 0 4px rgba(255,255,255,.08)}
.player-art img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.player-art .no-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text3)}
.player-art.spinning img{animation:spin 8s linear infinite}
/* Vinyl centre dot */
.player-art::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px rgba(255,255,255,.15);pointer-events:none;opacity:0;transition:opacity .3s}
.player-art.spinning::after{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.player-info{min-width:0}
.player-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
@@ -365,17 +368,29 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-inner{
display:flex;flex-direction:column;align-items:stretch;
display:flex;flex-direction:row;align-items:stretch;
height:100%;width:100%;
}
.bnav-item{
flex:1;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:6px 4px;border-radius:10px;cursor:pointer;
font-size:10px;font-weight:600;color:var(--text3);
letter-spacing:.3px;text-align:center;min-width:0;
flex:1 1 0; /* ← sorgt für gleich breite Buttons */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:6px 4px;
border-radius:10px;
cursor:pointer;
font-size:10px;
font-weight:600;
color:var(--text3);
letter-spacing:.3px;
text-align:center;
min-width:0;
transition:color .15s,background .15s;
border:none;background:none;font-family:var(--font);
border:none;
background:none;
font-family:var(--font);
-webkit-tap-highlight-color:transparent;
}
.bnav-item.active{color:var(--accent)}
@@ -655,17 +670,17 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
}
.mobile-menu-btn{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:8px}
@media(max-width:768px){
:root{--player-h:62px}
:root{--player-h:74px}
/* Single-row compact player: [art][info+star][prev][play][next] + thin progress strip */
.player{
display:grid!important;
grid-template-columns:1fr auto!important;
grid-template-rows:1fr!important;
padding:0 10px 14px;
gap:0 8px;
padding:0 12px 14px;
gap:0 10px;
align-items:center;
}
.player .player-art{width:36px!important;height:36px!important;border-radius:6px;flex-shrink:0}
.player .player-art{width:46px!important;height:46px!important;border-radius:50%!important;flex-shrink:0}
.player-track{max-width:none!important;width:100%!important;gap:8px}
.player-info{flex:1;min-width:0;position:relative}
.player-info>div:first-child{justify-content:flex-start!important;padding-right:24px}
+1 -1
View File
@@ -1,4 +1,4 @@
const CACHE = 'ns-v18';
const CACHE = 'ns-v19';
const PRECACHE = ['/', 'index.html', 'styles.css', 'app.js', 'sw.js', 'manifest.json', 'icon.svg'];
const SKIP_URLS = ['/rest/stream', '/rest/download', '/config.js'];