fix(web): Rollbalken lief ueber die Player-Leiste
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
f083fad986
commit
d420123a44
2 files changed
+16
-4
No files matched your search
+8
-4
@@ -101,7 +101,11 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
|
||||
.nav-item svg{flex-shrink:0;width:15px;height:15px}
|
||||
|
||||
/* ── MAIN ── */
|
||||
.main{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--player-h);background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(232,160,32,.04) 0%,transparent 60%)}
|
||||
/* Der Rollbalken gehoert zum Scrollbereich und laeuft ueber dessen ganze Hoehe. Mit
|
||||
padding-bottom reichte .main bis an den Fensterboden, also bis UNTER die Player-Leiste —
|
||||
bei 4 px fiel das nicht auf, bei 12 px schon. Deshalb endet der Scrollbereich jetzt per
|
||||
margin-bottom ueber der Leiste; die Platzreserve fuer den Inhalt ist damit ohnehin ueberfluessig. */
|
||||
.main{flex:1;overflow-y:auto;overflow-x:hidden;margin-bottom:var(--player-h);padding-bottom:16px;background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(232,160,32,.04) 0%,transparent 60%)}
|
||||
.page{display:none;padding:24px 28px}
|
||||
.page.active{display:block}
|
||||
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px}
|
||||
@@ -608,9 +612,9 @@ button:focus{outline:none}
|
||||
.bottom-nav{display:flex;flex-direction:column;justify-content:flex-start}
|
||||
/* player sits above bottom nav */
|
||||
.player{bottom:80px}
|
||||
/* push content above player + bottom nav */
|
||||
.main{padding-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom) + 64px)}
|
||||
.page{padding-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom) + 96px)}
|
||||
/* Scrollbereich endet ueber Player UND unterer Leiste — siehe Kommentar bei .main */
|
||||
.main{margin-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom));padding-bottom:16px}
|
||||
.page{padding-bottom:24px}
|
||||
.queue-panel{bottom:calc(var(--player-h) + 80px)}
|
||||
.preview-bar{bottom:calc(var(--player-h) + 80px)}
|
||||
.toast-container{bottom:calc(var(--player-h) + 80px + 16px)}
|
||||
|
||||
Reference in new issue
Block a user