nate/hub
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish: card hover lift, fade-in posters, skeleton loading, snap rows, glowing progress, stronger detail backdrop, lyrics glow

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-10-23 09:22:02 -04:00
1 parent c49693bac6
commit 2de5e343b2
3 files changed
+31 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/style.css
+28
View File
@@ -759,3 +759,31 @@ body.nav-mini .ngrp span { display: none; }
.vunw { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; } .vunw input { width: 18px; height: 18px; }
.vmark { position: absolute; right: 16px; bottom: 96px; z-index: 6; background: rgba(0, 0, 0, .7); color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.vdeckc .vcard.wide { width: 250px; }
/* Movies & TV polish */
.vimg { box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: transform .18s ease, box-shadow .18s ease; }
.vimg img { animation: vfade .35s ease both; }
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) {
.vcard:hover .vimg, .vcard:focus-visible .vimg { transform: translateY(-3px) scale(1.025); box-shadow: 0 10px 24px rgba(0, 0, 0, .32); }
.vcard.wide .vimg::after, .vcard .vimg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .45)); opacity: 0; transition: opacity .18s; pointer-events: none; }
.vcard:hover .vimg::after { opacity: 1; }
.vx { opacity: 0; transition: opacity .15s; } .vdeckc:hover .vx, .vx:focus-visible { opacity: .95; }
}
.vrow { scroll-snap-type: x proximity; padding: 4px 2px 10px; margin: 0 -2px; }
.vrow > * { scroll-snap-align: start; }
.vcard b { font-weight: 650; letter-spacing: -.005em; }
.vprog { height: 5px; border-radius: 0 3px 3px 0; overflow: hidden; } .vprog b { border-radius: 0 3px 3px 0; box-shadow: 0 0 6px var(--accent); }
#view h2 { letter-spacing: -.01em; }
.vclear { vertical-align: middle; font-size: 13px; }
.vfilt select { border-radius: 10px; border: 1px solid var(--line); background: var(--panel); padding: 0 10px; color: var(--text); }
.vsk { aspect-ratio: 2/3; border-radius: 10px; background: linear-gradient(100deg, var(--panel2) 30%, var(--panel) 50%, var(--panel2) 70%); background-size: 300% 100%; animation: vshim 1.3s linear infinite; }
@keyframes vshim { from { background-position: 100% 0; } to { background-position: 0 0; } }
.vhero .vbg { opacity: .3; height: 300px; filter: saturate(1.2); }
.vpost { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border-radius: 12px; }
.vsum { font-size: 15.5px; }
.vmark { border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: vfade .25s ease both; font-weight: 650; }
/* Lyrics polish */
.ll { text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 70%, transparent); }
.ll.on { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 35%, transparent); }
.lyrart { box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }