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:
1 parent
6e00b78219
commit
052846e458
2 files changed
+29
-14
No files matched your search
+28
-13
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user