josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish Bento scrolling and controls with full screen coverage

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-04 23:44:51 +08:00
parent 4e5b1584c6
commit 1754933f7e
9 changed files with 229 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/theme-bento-hub.css
View File

@@ -305,3 +305,59 @@ html[data-layout="bento-hub"] .body:has(.cards:is([data-view="search"],[data-vie
html[data-layout="bento-hub"] .settings-grid { grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr); gap:24px; }
html[data-layout="bento-hub"] .cards:is([data-view="search"],[data-view="channel"],[data-view="library"]) { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
}
/* Batched reference polish: one mobile scroller, generous controls, no clipping. */
html[data-layout="bento-hub"] { --bento-stacked:0; --ease-bento:cubic-bezier(.16,1,.3,1); }
html[data-layout="bento-hub"] button { min-width:44px; }
html[data-layout="bento-hub"] .switch { min-height:44px; }
html[data-layout="bento-hub"] .hero-title { background:none; -webkit-text-fill-color:var(--text); }
html[data-layout="bento-hub"] .ph-logo { width:56px; height:56px; border-radius:16px; color:var(--on-accent); animation:none; }
html[data-layout="bento-hub"] .player-pane.empty :is(#controls,#nowPlayingMeta,#notesPanel,.upnext) { display:none; }
html[data-layout="bento-hub"] .body:has(.cards[data-view="settings"]) #listFilterBar { display:none; }
html[data-layout="bento-hub"] #controls .deck-main .ctrl { border-radius:999px; }
html[data-layout="bento-hub"] #controls input[type="range"]::-webkit-slider-thumb { border:0; box-shadow:var(--shadow-sm); }
html[data-layout="bento-hub"] #nowPlayingMeta .np-actions :is(#addBtn,#saveBtn,#exportBtn,#serviceBtn) { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); color:var(--text); box-shadow:none; min-width:44px; }
html[data-layout="bento-hub"] #nowPlayingMeta .np-actions #saveBtn.done { color:var(--accent-sec); }
html[data-layout="bento-hub"] .stage-lyrics { background:#05070a; }
html[data-layout="bento-hub"] :is(.stage-lyrics,.service-lyrics) .sl-line.active { color:#00f5d4; background:rgba(0,245,212,.08); text-shadow:none; }
html[data-layout="bento-hub"] .svc-dock { flex-wrap:wrap; gap:8px; padding:8px; }
html[data-layout="bento-hub"] .svc-dock > :is(.svc-tile,.np-btn) { flex:1 0 96px; min-width:96px; min-height:56px; }
html[data-layout="bento-hub"] .svc-dock > .np-btn { background:#19202d; border-color:rgba(255,255,255,.09); color:#f1f5f9; }
html[data-layout="bento-hub"] .svc-font { flex:1 0 112px; justify-content:center; min-height:56px; }
html[data-layout="bento-hub"] .svc-label { white-space:nowrap; }
html[data-layout="bento-hub"] .shortcut-overlay { background:rgba(0,0,0,.75); backdrop-filter:blur(8px); }
html[data-layout="bento-hub"] .shortcut-panel { border:1px solid var(--line); border-radius:16px; background:var(--bg-1); }
html[data-layout="bento-hub"] .shortcut-key { border-radius:6px; background:var(--bg-2); color:var(--text); font:500 12px var(--mono); }
html[data-layout="bento-hub"] :is(.modal-list button,.mc-row,.export-actions .btn) { min-height:44px; border-radius:10px; background:var(--bg-2); color:var(--text); border-color:var(--line); }
html[data-layout="bento-hub"] .bento-search-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
html[data-layout="bento-hub"] .bento-search-icon { display:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
html[data-layout="bento-hub"] .saved-badge .glass-control-icon { width:14px; height:14px; }
html[data-layout="bento-hub"] .card.downloading .saved-badge::before { content:''; }
@media(max-width:1023px) {
html[data-layout="bento-hub"] .app { grid-template-columns:minmax(0,1fr); }
html[data-layout="bento-hub"] .sidebar { position:fixed; inset:0 auto 0 0; width:260px; max-width:calc(100vw - 48px); z-index:350; transform:translateX(-100%); transition:transform .25s var(--ease-bento); }
html[data-layout="bento-hub"] .app.sidebar-open .sidebar { transform:translateX(0); }
html[data-layout="bento-hub"] .app.sidebar-open .sidebar-backdrop { display:block; opacity:1; z-index:340; }
html[data-layout="bento-hub"] .sidebar-toggle { display:inline-flex; }
html[data-layout="bento-hub"] .mini-bar { left:12px; }
}
@media(max-width:860px) {
html[data-layout="bento-hub"] { --bento-stacked:1; }
html[data-layout="bento-hub"] .body { flex-direction:column; overflow-y:auto; overflow-x:hidden; min-height:0; }
html[data-layout="bento-hub"] .player-pane { flex:none; width:100%; overflow:visible; }
html[data-layout="bento-hub"] .list-pane { flex:none!important; min-height:100%; overflow:visible; padding-bottom:16px; }
html[data-layout="bento-hub"] .cards { flex:none; overflow:visible; }
html[data-layout="bento-hub"] .player-pane.empty.home-playlists .player-stage { max-height:none; }
html[data-layout="bento-hub"] .search-btn { display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; padding:0; border-radius:999px; }
html[data-layout="bento-hub"] .bento-search-icon { display:block; }
html[data-layout="bento-hub"] .search-form { min-width:0; flex:1; gap:8px; }
html[data-layout="bento-hub"] #searchInput { min-width:0; padding-inline:12px; }
html[data-layout="bento-hub"] .home-pl-grid { grid-template-columns:1fr; }
}
@media(min-width:861px) { html[data-layout="bento-hub"] .bento-search-label { position:static; width:auto; height:auto; margin:0; clip-path:none; overflow:visible; } }
/* Bound the scroll viewport above floating chrome, rather than painting rows
underneath it and relying only on extra padding at the end of the list. */
html[data-layout="bento-hub"] .main { padding-bottom:var(--bento-bottom-clearance,16px); min-height:0; }
html[data-layout="bento-hub"] :is(.body,.player-pane,.cards) { padding-bottom:16px; }
html[data-layout="bento-hub"] .modal-backdrop { z-index:600; }
html[data-layout="bento-hub"] .shortcut-overlay { z-index:600; }