Restore Bento theme integration lost during recovery
This commit is contained in:
Jonathan Sykes
@@ -8669,6 +8669,7 @@ function renderSidebar() {
|
||||
// the fallback so a first-time visitor still gets the landing.
|
||||
// Driven from renderSidebar() so every playlist mutation refreshes both.
|
||||
function renderHomePlaylists() {
|
||||
if (window.BentoHub) BentoHub.playlists = () => data.playlists || [];
|
||||
const wrap = document.getElementById('homePlaylists');
|
||||
const hero = document.querySelector('#playerPlaceholder .hero');
|
||||
const grid = document.getElementById('homePlGrid');
|
||||
@@ -8818,6 +8819,8 @@ function resetListHeaderExtras() {
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
// Theme composition follows the real view without changing its controls.
|
||||
els.cards.dataset.view = view.type;
|
||||
resetListHeaderExtras();
|
||||
{ const ls = $('listSub'); if (ls) ls.textContent = ''; const ps = $('p2pStrip'); if (ps) ps.classList.add('hidden'); }
|
||||
if (view.type !== 'search') { const sm = $('searchMeta'); if (sm) sm.classList.add('hidden'); }
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* Draw legacy control glyphs only in Glass; restore them on theme changes. */
|
||||
/* Draw legacy control glyphs in Glass and Bento; restore them on theme changes. */
|
||||
(function(root) {
|
||||
'use strict';
|
||||
const paths = {
|
||||
@@ -45,10 +45,11 @@
|
||||
}
|
||||
function paint() {
|
||||
scheduled=false;observer.disconnect();
|
||||
const active=doc.documentElement.dataset.layout==='glass-stage';
|
||||
const bento=doc.documentElement.dataset.layout==='bento-hub';
|
||||
const active=bento || doc.documentElement.dataset.layout==='glass-stage';
|
||||
for(const [parent,record] of tabLabels)if(!active || !parent.isConnected){restoreTab(parent,record);tabLabels.delete(parent);}
|
||||
for(const record of decorations)if(!active || !record.svg.isConnected){restore(record);decorations.delete(record);}
|
||||
if(active) for(const parent of doc.querySelectorAll(selector)) {
|
||||
if(active) for(const parent of doc.querySelectorAll(selector+(bento?', .service-btn, .np-btn, .ctrl, .empty-icon, .dl-saved-cta, .brand-mark, .upnext-head button':''))) {
|
||||
// Existing SVGs already express the action; only legacy glyphs change.
|
||||
if(parent.querySelector('svg:not(.glass-control-icon),.legacy-nav-icon'))continue;
|
||||
for(const node of [...parent.childNodes]) {
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
<link rel="stylesheet" href="fullscreen-orientation.css" />
|
||||
<link rel="stylesheet" href="related-videos.css" />
|
||||
<link rel="stylesheet" href="download-actions.css" />
|
||||
<link rel="stylesheet" href="theme-bento-hub.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
@@ -678,6 +679,7 @@
|
||||
<script src="saved-page.js"></script>
|
||||
<script src="server-backfill.js"></script>
|
||||
<script src="glass-controls.js"></script>
|
||||
<script src="bento-hub.js"></script>
|
||||
<script src="glass-panel-layout.js"></script>
|
||||
<script src="party-dj.js"></script>
|
||||
<script src="lyrics-window.js"></script>
|
||||
|
||||
@@ -3345,84 +3345,6 @@ html[data-layout="contemplative"] .brand-mark {
|
||||
box-shadow: 0 6px 18px -4px rgba(45, 212, 191, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
/* --- Bento Hub -------------------------------------------------------------
|
||||
* GitHub-dark-ish with honey-gold accent. Tighter borders give a
|
||||
* "dashboard card" feel throughout.
|
||||
* ------------------------------------------------------------------------- */
|
||||
html[data-layout="bento-hub"] {
|
||||
--bg: #0d1117;
|
||||
--bg-1: #13181f;
|
||||
--bg-2: #1c2333;
|
||||
--bg-3: #252d3d;
|
||||
--line: #30363d;
|
||||
--line-soft: #21262d;
|
||||
--text: #e6edf3;
|
||||
--text-2: #8b949e;
|
||||
--text-dim: #484f58;
|
||||
--accent: #eab308;
|
||||
--accent-bright: #fbbf24;
|
||||
--accent-deep: #ca8a04;
|
||||
--accent-glow: rgba(234, 179, 8, 0.4);
|
||||
--radius: 10px;
|
||||
--radius-sm: 6px;
|
||||
}
|
||||
html[data-layout="bento-hub"] body::before {
|
||||
background:
|
||||
radial-gradient(900px 600px at 18% -10%, rgba(234, 179, 8, 0.06), transparent 60%),
|
||||
radial-gradient(700px 500px at 100% 110%, rgba(234, 179, 8, 0.03), transparent 55%);
|
||||
}
|
||||
html[data-layout="bento-hub"] .brand-mark {
|
||||
background: linear-gradient(145deg, #fbbf24, #ca8a04);
|
||||
box-shadow: 0 6px 18px -4px rgba(234, 179, 8, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
|
||||
}
|
||||
html[data-layout="bento-hub"] .sidebar {
|
||||
background: #13181f;
|
||||
border-right: 1px solid #30363d;
|
||||
}
|
||||
html[data-layout="bento-hub"] .brand {
|
||||
border-bottom: 1px solid #21262d;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
html[data-layout="bento-hub"] .nav-item {
|
||||
border-radius: 6px;
|
||||
}
|
||||
html[data-layout="bento-hub"] .nav-item.active {
|
||||
background: rgba(234, 179, 8, 0.08);
|
||||
color: #fbbf24;
|
||||
}
|
||||
html[data-layout="bento-hub"] .nav-item.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 60%;
|
||||
background: #eab308;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
html[data-layout="bento-hub"] .playlist-item {
|
||||
background: #0d1117;
|
||||
border: 1px solid #21262d;
|
||||
border-radius: 8px;
|
||||
margin: 3px 0;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
html[data-layout="bento-hub"] .playlist-item.active {
|
||||
border-color: #eab308;
|
||||
background: rgba(234, 179, 8, 0.05);
|
||||
}
|
||||
html[data-layout="bento-hub"] .topbar {
|
||||
background: #13181f;
|
||||
border-bottom: 2px solid #21262d;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
html[data-layout="bento-hub"] .mini-bar-inner {
|
||||
background: linear-gradient(180deg, #1c2333, #13181f);
|
||||
border-top: 1px solid #30363d;
|
||||
}
|
||||
|
||||
/* Grid-column overrides only apply on screens wide enough for an inline sidebar
|
||||
(≥861px). Below that the sidebar is position:fixed (out of grid flow) so
|
||||
a two-column grid would leave .main stranded in the narrow first column. */
|
||||
|
||||
@@ -59,6 +59,9 @@ const SHELL = [
|
||||
'/service-ui.css',
|
||||
'/refresh.css',
|
||||
'/theme-glass.css',
|
||||
'/theme-bento-hub.css',
|
||||
'/fonts/PlusJakartaSans-latin.woff2',
|
||||
'/fonts/PlusJakartaSans-latin-ext.woff2',
|
||||
'/theme-glass-panel.css',
|
||||
'/glass-panel-layout.js',
|
||||
'/theme-classic.css',
|
||||
@@ -105,6 +108,7 @@ const SHELL = [
|
||||
'/saved-page.js',
|
||||
'/server-backfill.js',
|
||||
'/glass-controls.js',
|
||||
'/bento-hub.js',
|
||||
'/theme-glass-controls.css',
|
||||
'/saved-page.css',
|
||||
'/party-dj.js',
|
||||
|
||||
Reference in New Issue
Block a user