57 lines
3.3 KiB
CSS
57 lines
3.3 KiB
CSS
/* In-flow section shortcuts cannot cover a heading, filter or list row. */
|
|
html[data-layout="glass-stage"] #listPane > .sec-rail {
|
|
position:static; inset:auto; transform:none; display:flex !important;
|
|
align-self:flex-start; flex:none; flex-direction:row; flex-wrap:nowrap;
|
|
width:max-content; max-width:100%; margin:0 0 12px; z-index:auto;
|
|
}
|
|
html[data-layout="glass-stage"] #listPane > .sec-rail.hidden { display:none !important; }
|
|
html[data-layout="glass-stage"] #listPane > .sec-rail .sec-rail-btn { flex:none; }
|
|
html[data-layout="glass-stage"] #listPane > .sec-rail .sec-rail-label { z-index:1; }
|
|
/* Keep the progress strip inside the same rounded card as the controls. */
|
|
html[data-layout="glass-stage"] .mini-bar {
|
|
bottom:calc(var(--glass-nav-height, 66px + env(safe-area-inset-bottom)) + 8px);
|
|
border-radius:18px; overflow:hidden; border:1px solid var(--glass-line);
|
|
background:var(--glass); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
|
|
}
|
|
html[data-layout="glass-stage"] .mini-bar-inner {
|
|
border:0; border-radius:0; background:transparent; box-shadow:none;
|
|
-webkit-backdrop-filter:none; backdrop-filter:none;
|
|
}
|
|
html[data-layout="glass-stage"] .mini-progress { margin:0; height:3px; overflow:hidden; }
|
|
html[data-layout="glass-stage"] .player-pane {
|
|
padding-bottom:var(--glass-bottom-clearance, 32px);
|
|
scroll-padding-bottom:var(--glass-bottom-clearance, 32px);
|
|
}
|
|
html[data-layout="glass-stage"] #listPane {
|
|
padding-bottom:var(--glass-bottom-clearance, 32px) !important;
|
|
scroll-padding-bottom:var(--glass-bottom-clearance, 32px);
|
|
}
|
|
@media (max-width:860px) {
|
|
/* Portrait uses one shared scroller: reserve chrome once, at its tail. */
|
|
html[data-layout="glass-stage"] .body {
|
|
padding-bottom:var(--glass-bottom-clearance, calc(82px + env(safe-area-inset-bottom)));
|
|
scroll-padding-bottom:var(--glass-bottom-clearance, calc(82px + env(safe-area-inset-bottom)));
|
|
}
|
|
html[data-layout="glass-stage"] .player-pane { padding-bottom:14px; }
|
|
html[data-layout="glass-stage"] #listPane { padding-bottom:16px !important; }
|
|
}
|
|
|
|
/* Keep the notes toolbar one row, even when the player is a narrow desktop pane. */
|
|
html[data-layout="glass-stage"] #notesPanel { container-type:inline-size; container-name:glass-notes; min-width:0; }
|
|
html[data-layout="glass-stage"] .notes-tabs { flex-wrap:nowrap; min-width:0; align-items:center; }
|
|
html[data-layout="glass-stage"] .notes-tab { flex:0 1 auto; min-width:44px; min-height:44px; white-space:nowrap; letter-spacing:.04em; }
|
|
html[data-layout="glass-stage"] .glass-tab-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
html[data-layout="glass-stage"] .notes-status { flex:1 1 0; min-width:0; margin-left:0; font-size:11px; }
|
|
html[data-layout="glass-stage"] .notes-count { flex:none; margin-left:0; }
|
|
html[data-layout="glass-stage"] .notes-fold { flex:none; width:44px; height:44px; margin-left:auto; }
|
|
@container glass-notes (max-width:560px) {
|
|
html[data-layout="glass-stage"] .notes-tabs { gap:4px; padding:6px; }
|
|
html[data-layout="glass-stage"] .notes-tab { padding:8px; letter-spacing:0; font-size:11px; }
|
|
}
|
|
@container glass-notes (max-width:440px) {
|
|
html[data-layout="glass-stage"] .notes-tab[data-tab="markers"] .glass-tab-label { display:none; }
|
|
}
|
|
@container glass-notes (max-width:340px) {
|
|
html[data-layout="glass-stage"] .notes-tab .glass-tab-label { display:none; }
|
|
}
|