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

Contain recommendation details in glass cards

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-13 07:30:37 +08:00
parent 3c68e56b21
commit c600415ebb
29 changed files with 269 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/theme-glass.css
View File

@@ -384,3 +384,69 @@ html[data-layout="glass-stage"] .search-btn {
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(--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; }
}