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

Enhance 5 layout themes with structural CSS — topbar, nav accents, mini-bar, ambient layers

Browse Source
This commit is contained in:
Jonathan Sykes
2026-08-17 00:29:52 +00:00
parent 9c2146aef8
commit c08558cfb4
1 changed files with 201 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
frontend/styles.css
View File

@@ -2850,6 +2850,41 @@ html[data-layout="sanctuary-stage"] .main > *:last-child {
html[data-layout="sanctuary-stage"] .mini-bar {
bottom: calc(56px + env(safe-area-inset-bottom));
}
html[data-layout="sanctuary-stage"] .topbar {
background: rgba(9, 11, 16, 0.6);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid rgba(245, 158, 11, 0.12);
box-shadow: none;
}
html[data-layout="sanctuary-stage"] .player-stage {
position: relative;
}
html[data-layout="sanctuary-stage"] .player-stage::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(245, 158, 11, 0.07), transparent 70%);
z-index: 0;
}
html[data-layout="sanctuary-stage"] .bottom-nav {
background: rgba(9, 11, 16, 0.85);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-top: 1px solid rgba(245, 158, 11, 0.12);
}
html[data-layout="sanctuary-stage"] .bottom-nav-btn.active { color: #fbbf24; }
html[data-layout="sanctuary-stage"] .mini-bar-inner {
background: rgba(9, 11, 16, 0.85);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-top: 1px solid rgba(245, 158, 11, 0.12);
}
html[data-layout="sanctuary-stage"] .brand-mark {
background: linear-gradient(145deg, #fbbf24, #d97706);
box-shadow: 0 6px 18px -4px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* --- Liturgical Chronicle --------------------------------------------------
* Light parchment palette with burgundy accent and serif typography.
@@ -2928,6 +2963,43 @@ html[data-layout="living-hymnal"] body::before {
radial-gradient(900px 600px at 18% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
radial-gradient(700px 500px at 100% 110%, rgba(99, 102, 241, 0.04), transparent 55%);
}
html[data-layout="living-hymnal"] .sidebar {
background: linear-gradient(180deg, #0d0d10, #09090b);
border-right: 1px solid #27272a;
}
html[data-layout="living-hymnal"] .nav-item {
border-radius: 8px;
padding-left: 18px;
}
html[data-layout="living-hymnal"] .nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: #6366f1;
border-radius: 0 3px 3px 0;
}
html[data-layout="living-hymnal"] .topbar {
background: #0d0d10;
border-bottom: 1px solid #27272a;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html[data-layout="living-hymnal"] .mini-bar-inner {
background: linear-gradient(180deg, #18181b, #0d0d10);
border-top: 1px solid #27272a;
}
html[data-layout="living-hymnal"] .playlist-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
padding: 8px 10px;
}
html[data-layout="living-hymnal"] .brand-mark {
background: linear-gradient(145deg, #818cf8, #4f46e5);
box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* --- Sunday Broadcaster ----------------------------------------------------
* Near-black with crimson/rose accent for a live-broadcast feel.
@@ -2950,13 +3022,55 @@ html[data-layout="broadcaster"] body::before {
radial-gradient(900px 600px at 18% -10%, rgba(244, 63, 94, 0.09), transparent 60%),
radial-gradient(700px 500px at 100% 110%, rgba(244, 63, 94, 0.04), transparent 55%);
}
html[data-layout="broadcaster"] .sidebar {
background: linear-gradient(180deg, #0a0a0e, #050507);
}
html[data-layout="broadcaster"] .topbar {
border-bottom: 2px solid rgba(244, 63, 94, 0.25);
position: relative;
min-height: 58px;
background: linear-gradient(180deg, #0a0a0e 0%, #050507 100%);
border-bottom: 2px solid rgba(244, 63, 94, 0.3);
}
html[data-layout="broadcaster"] .topbar::after {
content: '● LIVE';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
font-weight: 800;
color: #f43f5e;
letter-spacing: 0.08em;
font-family: system-ui, sans-serif;
pointer-events: none;
}
html[data-layout="broadcaster"] .brand-mark {
background: linear-gradient(145deg, #fb7185, #e11d48);
box-shadow: 0 6px 18px -4px rgba(244, 63, 94, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
html[data-layout="broadcaster"] .nav-item.active {
background: rgba(244, 63, 94, 0.08);
color: #fb7185;
}
html[data-layout="broadcaster"] .nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: #f43f5e;
border-radius: 0 3px 3px 0;
}
html[data-layout="broadcaster"] .mini-bar-inner {
background: linear-gradient(180deg, #141418, #0a0a0e);
border-top: 1px solid rgba(244, 63, 94, 0.15);
}
html[data-layout="broadcaster"] .playlist-item.active {
background: rgba(244, 63, 94, 0.08);
border-left: 3px solid #f43f5e;
}
/* --- Contemplative Sanctuary ------------------------------------------------
* Deep blue-black with teal accent and serif typography. Sidebar collapses
@@ -2986,6 +3100,49 @@ html[data-layout="contemplative"] .bottom-nav { display: flex; }
html[data-layout="contemplative"] .mini-bar {
bottom: calc(56px + env(safe-area-inset-bottom));
}
html[data-layout="contemplative"] .topbar {
background: transparent;
border-bottom: 1px solid rgba(45, 212, 191, 0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html[data-layout="contemplative"] .brand,
html[data-layout="contemplative"] .topbar {
font-family: Georgia, 'Times New Roman', serif;
}
html[data-layout="contemplative"] .player-stage {
position: relative;
}
html[data-layout="contemplative"] .player-stage::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(45, 212, 191, 0.06), transparent 70%);
z-index: 0;
}
html[data-layout="contemplative"] .bottom-nav {
background: rgba(10, 14, 20, 0.9);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-top: 1px solid rgba(45, 212, 191, 0.1);
}
html[data-layout="contemplative"] .bottom-nav-btn.active { color: #5eead4; }
html[data-layout="contemplative"] .mini-bar-inner {
background: rgba(10, 14, 20, 0.9);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border-top: 1px solid rgba(45, 212, 191, 0.1);
}
html[data-layout="contemplative"] .playlist-item.active {
background: rgba(45, 212, 191, 0.06);
border-left: 2px solid #2dd4bf;
}
html[data-layout="contemplative"] .nav-item.active { color: #5eead4; }
html[data-layout="contemplative"] .brand-mark {
background: linear-gradient(145deg, #5eead4, #0d9488);
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
@@ -3018,10 +3175,51 @@ html[data-layout="bento-hub"] .brand-mark {
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 {
border-right-color: var(--line);
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 {
border-bottom-color: var(--line);
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