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

Merge final UI batch into beta

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-13 08:12:25 +08:00
parent 09ed50d494 ecb028bbbf
commit ac7cd0555e
35 changed files with 499 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/styles.css
View File

@@ -23,6 +23,8 @@
--accent-bright: #ff6a52;
--accent-deep: #d4321d;
--accent-glow: rgba(255, 75, 50, 0.45);
--search-action-surface: #16161b;
--search-action-foreground: #f5f3f0;
--display: "Bricolage Grotesque", Georgia, serif;
--ui: "Hanken Grotesk", system-ui, sans-serif;
@@ -386,23 +388,6 @@ body::after {
background: var(--bg-1);
box-shadow: 0 0 0 4px rgba(255, 75, 50, 0.12);
}
.search-btn {
background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep));
color: #fff;
border: none;
padding: 0 24px;
border-radius: 11px;
font-family: var(--ui);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.01em;
cursor: pointer;
box-shadow: 0 8px 22px -8px var(--accent-glow);
transition: transform 0.16s var(--ease), box-shadow 0.16s;
}
.search-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--accent-glow); }
.search-btn:active { transform: translateY(0); }
.body { flex: 1; display: flex; overflow: hidden; }
/* ===================== Player pane ===================== */
@@ -1805,6 +1790,8 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
--text: #1b1a18;
--text-2: #4a4843;
--text-dim: #7c776e;
--search-action-surface: #efece6;
--search-action-foreground: #1b1a18;
--shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.25);
}
:root[data-theme="light"] body::after { opacity: 0.02; }
@@ -1830,6 +1817,8 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
--accent-bright: #ff8a6c;
--accent-deep: #ff5a3c;
--accent-glow: rgba(255, 90, 60, 0.85);
--search-action-surface: #0a0a0a;
--search-action-foreground: #ffffff;
}
:root[data-theme="contrast"] body::after { display: none; }
:root[data-theme="contrast"] body::before { display: none; }
@@ -3115,6 +3104,8 @@ html[data-layout="liturgical"] {
--accent-bright: #a83028;
--accent-deep: #6b1c14;
--accent-glow: rgba(139, 38, 29, 0.35);
--search-action-surface: var(--bg-2);
--search-action-foreground: var(--text);
--display: Georgia, 'Times New Roman', serif;
--ui: Georgia, 'Times New Roman', serif;
--shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.2);
@@ -4366,17 +4357,45 @@ html[data-layout="f7-swipe"] .media-shape-f7-swipe,
html[data-layout="glass-stage"] .media-shape-glass-stage,
html[data-layout="bento-hub"] .media-shape-bento-hub { display:inline; }
/* ===== Search button — one icon + label, restyled per layout and colour theme ===== */
.search-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Search action: token-backed surfaces, one accessible focus treatment. */
.search-btn {
display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px;
min-width: 76px; min-height: 44px; padding: 0 14px;
border: 1px solid color-mix(in srgb, var(--search-action-foreground) 45%, var(--accent-deep)); border-radius: 9px;
background: var(--search-action-surface); color: var(--search-action-foreground);
font: 700 14px/1 var(--ui); letter-spacing: .01em; white-space: nowrap;
box-shadow: none; cursor: pointer;
transition: background-color .14s ease, border-color .14s ease, transform .12s ease;
}
.search-btn::before {
content: ""; width: 17px; height: 17px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-btn { box-shadow: 0 8px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .28); }
.search-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
:where(:root[data-theme="light"]) .search-btn { background: var(--accent-deep); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
:where(:root[data-theme="light"]) .search-btn:hover { background: var(--accent); box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .4); }
:where(:root[data-theme="contrast"]) .search-btn { background: #fff; color: #000; border: 2px solid #fff; box-shadow: none; }
:where(:root[data-theme="contrast"]) .search-btn:hover { background: var(--accent-bright); border-color: var(--accent-bright); box-shadow: none; }
:where(:root[data-theme="contrast"]) .search-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.search-btn:hover { background: var(--bg-3); border-color: var(--accent); transform: none; }
.search-btn:active { transform: scale(.98); }
.search-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
html[data-layout] .search-btn:disabled { opacity: 1; background: var(--bg-1); border: 1px dashed var(--search-action-foreground); color: var(--search-action-foreground); cursor: not-allowed; }
.search-btn:disabled:hover { transform: none; }
html[data-layout="classic"] .search-btn { border-radius: 7px; background: transparent; border-width: 1.5px; }
html[data-layout="f7-swipe"] .search-btn { min-width: 64px; padding-inline: 10px; border-color: transparent; border-bottom-color: color-mix(in srgb, var(--search-action-foreground) 45%, var(--accent-deep)); border-radius: 5px 5px 2px 2px; background: transparent; font-size: 16px; font-weight: 600; }
html[data-layout="f7-swipe"] .search-btn::before { display: none; }
html[data-layout="glass-stage"] .search-btn { border-radius: 999px; background: color-mix(in srgb, var(--search-action-surface) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--search-action-foreground) 12%, transparent); }
html[data-layout="bento-hub"] .search-btn { min-width: 44px; border-radius: 999px; border-color: color-mix(in srgb, var(--search-action-foreground) 45%, var(--accent-deep)); background: var(--search-action-surface); color: var(--search-action-foreground); font: 700 13px/1 var(--ui); }
html[data-layout="bento-hub"] .search-btn:hover { background: var(--bg-3); border-color: var(--accent); transform: none; }
html[data-layout="bento-hub"] .search-btn::before { display: none; }
html[data-layout="sanctuary-stage"] .search-btn { border-radius: 4px; border-width: 1px 1px 2px; letter-spacing: .055em; text-transform: uppercase; }
html[data-layout="liturgical"] .search-btn { border-color: color-mix(in srgb, var(--search-action-foreground) 70%, var(--accent-deep)); border-radius: 3px; border-width: 1px 1px 2px; font-family: var(--display); font-weight: 700; letter-spacing: .02em; }
html[data-layout="liturgical"] .search-btn:hover { background: var(--bg-2); border-color: var(--accent); color: var(--search-action-foreground); }
html[data-layout="living-hymnal"] .search-btn { border-radius: 10px; border-width: 1px 1px 1px 3px; }
html[data-layout="broadcaster"] .search-btn { border-radius: 3px; border-width: 0 0 2px; letter-spacing: .06em; text-transform: uppercase; }
html[data-layout="contemplative"] .search-btn { border-color: var(--line); border-bottom-color: color-mix(in srgb, var(--search-action-foreground) 45%, var(--accent-deep)); border-radius: 3px; background: transparent; font-family: var(--display); font-weight: 600; }
html[data-layout="contemplative"] .search-btn:hover { background: var(--bg-3); border-color: var(--accent); color: var(--search-action-foreground); }
html[data-layout] .search-btn:active { transform: scale(.98); }
@media (max-width: 430px) {
.topbar { min-width: 0; gap: 6px; }
.search-form { min-width: 0; gap: 5px; }
.search-btn { min-width: 64px; padding-inline: 9px; gap: 5px; }
.search-btn::before { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .search-btn { transition: none; } }

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

@@ -51,7 +51,19 @@ html[data-layout="bento-hub"] .sidebar-footer { border-top:1px solid var(--line)
html[data-layout="bento-hub"] .topbar { background:var(--bg-1); border-bottom:1px solid var(--line); padding:12px 20px; gap:12px; backdrop-filter:none; }
html[data-layout="bento-hub"] .search-form { max-width:640px; gap:8px; }
html[data-layout="bento-hub"] #searchInput { border:1px solid var(--line); border-radius:999px; background:var(--bg-2); padding:12px 18px; font-size:14px; min-height:44px; box-shadow:none; }
html[data-layout="bento-hub"] .search-btn { border:0; border-radius:999px; min-height:44px; background:var(--accent); color:var(--on-accent); font:700 13px var(--ui); box-shadow:none; }
html[data-layout="bento-hub"] #searchForm .search-btn { width:auto; min-width:96px; min-height:44px; flex:0 1 auto; padding:0 13px; gap:8px; border:1px solid var(--accent); border-radius:12px; background:var(--accent); color:var(--on-accent); font:700 13px/1 var(--ui); box-shadow:var(--shadow-sm); }
html[data-layout="bento-hub"] #searchForm .search-btn:hover { background:var(--accent-bright); border-color:var(--accent-bright); color:var(--on-accent); transform:none; }
html[data-layout="bento-hub"] #searchForm .search-btn:active { transform:translateY(1px); box-shadow:none; }
html[data-layout="bento-hub"] #searchForm .search-btn:focus-visible { outline:2px solid var(--accent-sec); outline-offset:3px; }
html[data-layout="bento-hub"][data-theme="light"] #searchForm .search-btn { background:var(--accent-deep); border-color:var(--accent-deep); }
html[data-layout="bento-hub"][data-theme="light"] #searchForm .search-btn:hover { background:var(--bg-3); border-color:var(--accent-deep); color:var(--text); }
html[data-layout="bento-hub"] #searchForm .search-btn:disabled { background:var(--bg-2); border-color:var(--line-bright); color:var(--text-2); box-shadow:none; cursor:not-allowed; }
html[data-layout="bento-hub"] #searchForm .bento-search-icon { width:18px; height:18px; display:block; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
html[data-layout="bento-hub"] #searchForm .bento-search-label { display:inline; position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto; white-space:nowrap; }
@media(max-width:860px) {
html[data-layout="bento-hub"] #searchForm .search-btn { min-width:44px; width:44px; flex:0 0 44px; padding:0; border-radius:14px; }
html[data-layout="bento-hub"] #searchForm .bento-search-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
html[data-layout="bento-hub"] :is(.sidebar-toggle,.icon-btn,.update-icon-btn) { min-width:44px; width:44px; min-height:44px; border-radius:10px; background:var(--bg-2); color:var(--text-2); }
html[data-layout="bento-hub"] .bottom-nav { height:calc(64px + env(safe-area-inset-bottom)); background:var(--bg-glass); border-top:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:0 4px env(safe-area-inset-bottom); }
html[data-layout="bento-hub"] .bottom-nav-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 0; min-height:64px; color:var(--text-2); }
@@ -329,8 +341,8 @@ html[data-layout="bento-hub"] .shortcut-overlay { background:rgba(0,0,0,.75); ba
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"] .bento-search-label { position:static; width:auto; height:auto; padding:0; margin:0; clip-path:none; overflow:visible; white-space:nowrap; }
html[data-layout="bento-hub"] .bento-search-icon { display:block; width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; 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) {
@@ -348,8 +360,8 @@ html[data-layout="bento-hub"] .card.downloading .saved-badge::before { content:'
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-btn { display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; padding:0; border-radius:12px; }
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"] .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; }

24
frontend/theme-classic.css
View File

@@ -65,8 +65,6 @@ html[data-layout="classic"] .topbar {
}
html[data-layout="classic"] .search-form { width: 100%; min-width: 0; max-width: 860px; gap: 8px; }
html[data-layout="classic"] #searchInput { min-width: 0; font-size: 16px; padding: 11px 14px; min-height: 46px; border-radius: 8px; background: var(--bg-1); box-shadow: none; }
html[data-layout="classic"] .search-btn { min-height: 46px; padding: 0 22px; border-radius: 8px; background: var(--bg-3); color: var(--text); box-shadow: none; transform: none; }
html[data-layout="classic"] .search-btn:hover { background: var(--accent-deep); color: #fff; }
html[data-layout="classic"] .sidebar-toggle { min-width: 44px; min-height: 44px; border-radius: 8px; box-shadow: none; }
html[data-layout="classic"] .player-pane {
container-type: inline-size;
@@ -236,10 +234,18 @@ html[data-layout="classic"] .card:has(.card-note-btn) .card-menu { grid-column:
html[data-layout="classic"] .card:has(.card-note-btn) .card-del { grid-column: 4; grid-row: 2; }
html[data-layout="classic"] .card:has(.card-note-btn) { column-gap: 8px; }
/* Search button: outlined rectangle that fills with the accent on hover. */
html[data-layout="classic"] .search-btn { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; }
html[data-layout="classic"] .search-btn:hover { background: var(--accent); color: #fff; transform: none; box-shadow: none; }
html[data-layout="classic"][data-theme="contrast"] .search-btn { background: #fff; color: #000; border-color: #fff; }
html[data-layout="classic"][data-theme="contrast"] .search-btn:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #000; }
html[data-layout="classic"][data-theme="light"] .search-btn { color: var(--accent-deep); border-color: var(--accent-deep); }
html[data-layout="classic"][data-theme="light"] .search-btn:hover { background: var(--accent-deep); color: #fff; }
/* Restored from a22b8b4: the Classic action is an outlined accent button. */
html[data-layout="classic"] #searchForm .search-btn {
min-height:46px; padding:0 22px; border-radius:8px; border:1.5px solid var(--accent);
background:transparent; color:var(--accent); box-shadow:none; transform:none; gap:8px;
}
html[data-layout="classic"] #searchForm .search-btn::before {
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
}
html[data-layout="classic"] #searchForm .search-btn:hover { background:var(--accent); color:var(--bg); transform:none; box-shadow:none; }
html[data-layout="classic"][data-theme="contrast"] #searchForm .search-btn { background:transparent; color:var(--accent-bright); border-color:var(--accent-bright); }
html[data-layout="classic"][data-theme="contrast"] #searchForm .search-btn:hover { background:var(--accent-bright); border-color:var(--accent-bright); color:#000; }
html[data-layout="classic"][data-theme="light"] #searchForm .search-btn { color:var(--accent-deep); border-color:var(--accent-deep); }
html[data-layout="classic"][data-theme="light"] #searchForm .search-btn:hover { background:var(--accent-deep); color:#fff; }
html[data-layout="classic"] #searchForm .search-btn:disabled { background:var(--bg-1); color:var(--text-dim); border:1px dashed var(--accent-deep); cursor:not-allowed; }

12
frontend/theme-f7.css
View File

@@ -206,7 +206,17 @@ html[data-layout="f7-swipe"] #searchInput {
box-shadow: none; font: 400 17px/1.25 var(--ui, system-ui, sans-serif);
}
html[data-layout="f7-swipe"] .search-form::before { content: ''; position: absolute; left: 13px; top: 12px; z-index: 1; width: 18px; height: 18px; background: var(--text-dim); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; }
html[data-layout="f7-swipe"] .search-btn { min-height: 42px; padding: 0 8px; border: 0; background: transparent; color: var(--accent); font-size: 16px; font-weight: 500; box-shadow: none; }
html[data-layout="f7-swipe"] #searchForm .search-btn {
min-width:64px; min-height:44px; padding:0 10px; border:0; border-radius:9px;
background:transparent; color:var(--accent-bright); font:600 17px/1 var(--ui,system-ui,sans-serif);
box-shadow:none; transform:none; transition:background-color .14s ease,color .14s ease;
}
html[data-layout="f7-swipe"][data-theme="light"] #searchForm .search-btn { color:var(--accent-deep); }
html[data-layout="f7-swipe"] #searchForm .search-btn:hover { background:color-mix(in srgb,var(--accent) 12%,transparent); }
html[data-layout="f7-swipe"] #searchForm .search-btn:active { background:color-mix(in srgb,var(--accent) 20%,transparent); transform:none; }
html[data-layout="f7-swipe"] #searchForm .search-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
html[data-layout="f7-swipe"] #searchForm .search-btn:disabled { color:var(--text); background:var(--bg-2); border:0; cursor:not-allowed; }
@media (prefers-reduced-motion: reduce) { html[data-layout="f7-swipe"] #searchForm .search-btn { transition:none; } }
html[data-layout="f7-swipe"] #updateIconBtn { width: 40px; height: 40px; }
html[data-layout="f7-swipe"] .search-recent { top: calc(100% + 8px); border: 1px solid var(--f7-hairline); border-radius: 14px; background: var(--bg-1); box-shadow: 0 12px 36px rgb(0 0 0 / .22); overflow: hidden; }
html[data-layout="f7-swipe"] .search-recent > * { border-radius: 0; border: 0; border-bottom: 1px solid var(--f7-hairline); background: transparent; min-height: 48px; }

81
frontend/theme-glass.css
View File

@@ -376,14 +376,79 @@ html[data-layout="glass-stage"] #controls .ch-badge { cursor: pointer; font-fami
html[data-layout="glass-stage"] #controls .ch-badge:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent); }
html[data-layout="glass-stage"] #controls .ch-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Search button: frosted pill, accent-tinted, with a soft glow. */
/* Search action uses a frosted token surface; label contrast remains stable. */
html[data-layout="glass-stage"] .search-btn {
background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text);
border: 1px solid color-mix(in srgb, var(--accent-bright) 55%, transparent); border-radius: 999px;
background: color-mix(in srgb, var(--search-action-surface) 88%, transparent); color: var(--search-action-foreground);
border: 1px solid color-mix(in srgb, var(--search-action-foreground) 45%, var(--accent-deep)); border-radius: 999px;
-webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
box-shadow: 0 6px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
}
html[data-layout="glass-stage"] .search-btn:hover { background: color-mix(in srgb, var(--accent) 48%, transparent); transform: translateY(-1px); }
html[data-layout="glass-stage"][data-theme="contrast"] .search-btn { background: #fff; color: #000; border-color: #fff; }
html[data-layout="glass-stage"][data-theme="light"] .search-btn { background: color-mix(in srgb, var(--accent-deep) 88%, transparent); color: #fff; border-color: color-mix(in srgb, var(--accent-deep) 70%, #fff); }
html[data-layout="glass-stage"][data-theme="light"] .search-btn:hover { background: var(--accent-deep); }
html[data-layout="glass-stage"] .search-btn:hover { background: color-mix(in srgb, var(--search-action-surface) 94%, var(--accent)); border-color: var(--accent); color: var(--search-action-foreground); transform: none; }
/* Recommendation cards: one glass surface contains the complete interaction. */
html[data-layout="glass-stage"] .rec-grid { align-items: stretch; gap: 16px 14px; }
html[data-layout="glass-stage"] .rec-item {
display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden;
border: 1px solid color-mix(in srgb, var(--text) 45%, transparent); border-radius: 20px;
background: color-mix(in srgb, var(--bg-1) 92%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
box-shadow: var(--shadow);
}
html[data-layout="glass-stage"] .rec-play {
display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 0;
width: 100%; min-width: 0; overflow: hidden; padding: 0; border: 0; border-radius: 0;
background: transparent; box-shadow: none; color: var(--text); text-align: left;
}
html[data-layout="glass-stage"] .rec-play:hover { background: transparent; }
html[data-layout="glass-stage"] .rec-cover {
flex: none; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0;
background: var(--bg-2);
}
html[data-layout="glass-stage"] .rec-cover:has(img[src=""]) {
background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--accent) 30%, var(--bg-2)), var(--bg-2) 72%);
}
html[data-layout="glass-stage"] .rec-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html[data-layout="glass-stage"] .rec-cover img[src=""] { display: none; }
html[data-layout="glass-stage"] .rec-title {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
margin: 0; padding: 15px 14px 0; color: var(--text); font: 650 14px/1.4 var(--ui);
overflow-wrap: anywhere;
}
html[data-layout="glass-stage"] .rec-channel {
display: block; min-width: 0; padding: 5px 14px 0; color: var(--text-2);
font: 400 12px/1.45 var(--ui); overflow-wrap: anywhere;
}
html[data-layout="glass-stage"] .rec-reason {
align-self: flex-start; max-width: calc(100% - 28px); margin: 12px 14px 0; padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--text) 24%, transparent); border-radius: 12px;
background: color-mix(in srgb, var(--accent) 12%, var(--bg-1)); color: var(--text-2);
font: 500 11px/1.4 var(--ui); overflow-wrap: anywhere;
}
html[data-layout="glass-stage"] .rec-actions {
display: flex; flex: none; align-items: stretch; gap: 8px; width: 100%; margin-top: auto; padding: 12px 14px 14px;
}
html[data-layout="glass-stage"] .rec-actions button {
display: inline-flex; flex: none; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--text) 28%, transparent); border-radius: 14px;
background: var(--bg-2); color: var(--text); font: 600 13px/1.2 var(--ui); white-space: nowrap;
cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
html[data-layout="glass-stage"] .rec-actions button:first-child {
flex: 1 1 auto; min-width: 0; border-color: color-mix(in srgb, var(--accent) 32%, var(--bg-1));
background: color-mix(in srgb, var(--accent) 16%, var(--bg-1));
}
html[data-layout="glass-stage"] .rec-actions button:last-child { width: 44px; padding: 0; }
html[data-layout="glass-stage"] .rec-actions button:hover {
border-color: var(--accent-bright); background: color-mix(in srgb, var(--accent) 24%, var(--bg-1));
}
html[data-layout="glass-stage"] .rec-actions button:last-child:hover { background: var(--bg-3); }
html[data-layout="glass-stage"] .rec-play:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-bright); }
html[data-layout="glass-stage"] .rec-actions button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-bright); }
html[data-layout="glass-stage"] .rec-refresh:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
html[data-layout="glass-stage"] .rec-item :is(.rec-title,.rec-channel,.rec-reason) { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
html[data-layout="glass-stage"] .rec-actions button { transition: none; }
}
/* "NOW PLAYING" sits bottom-right of the card so it never covers the row's controls. */
html[data-layout="glass-stage"] .card.playing::after { top: auto; bottom: 12px; right: 18px; pointer-events: none; }