diff --git a/styles.css b/styles.css index 61c03ab..a76c8ec 100644 --- a/styles.css +++ b/styles.css @@ -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} diff --git a/sw.js b/sw.js index b3084e2..3ffb357 100644 --- a/sw.js +++ b/sw.js @@ -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'];