diff --git a/public/css/main.css b/public/css/main.css index 4c929cc..9f7b784 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -4368,4 +4368,180 @@ kbd { font-size: 12px; margin-right: 8px; } +} + +/* ===================================================== + Home Dashboard Styles + ===================================================== */ + +#page-home { + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.dashboard-content { + padding: 24px; + max-width: 1400px; + margin: 0 auto; +} + +.dashboard-section { + margin-bottom: 40px; +} + +.dashboard-section.hidden { + display: none; +} + +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; +} + +.section-header h2 { + font-family: 'Outfit', sans-serif; + font-size: 1.5rem; + color: var(--color-text-bright); +} + +.horizontal-scroll { + display: flex; + gap: 20px; + overflow-x: auto; + padding-bottom: 12px; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; +} + +/* Hide scrollbar by default, show on hover */ +.horizontal-scroll::-webkit-scrollbar { + height: 6px; +} + +.horizontal-scroll::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + border-radius: 3px; +} + +.horizontal-scroll:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); +} + +.dashboard-card { + flex: 0 0 calc(50% - 10px); + /* 2 per view on small screens */ + max-width: 240px; + background: var(--color-surface); + border-radius: var(--radius-lg); + overflow: hidden; + cursor: pointer; + transition: transform var(--transition-fast), box-shadow var(--transition-fast); + scroll-snap-align: start; + border: 1px solid rgba(255, 255, 255, 0.05); +} + +/* 4 per view on medium screens */ +@media (min-width: 768px) { + .dashboard-card { + flex: 0 0 calc(25% - 15px); + } +} + +/* 6 per view on large screens */ +@media (min-width: 1200px) { + .dashboard-card { + flex: 0 0 calc(16.66% - 17px); + } +} + +.dashboard-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); + border-color: var(--color-accent-dim); +} + +.card-image { + position: relative; + aspect-ratio: 2/3; + overflow: hidden; +} + +.card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.dashboard-card:hover .card-image img { + transform: scale(1.05); +} + +.progress-bar-container { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background: rgba(0, 0, 0, 0.5); +} + +.progress-bar { + height: 100%; + background: var(--color-accent); + box-shadow: 0 0 10px var(--color-accent); +} + +.play-icon-overlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.4); + opacity: 0; + transition: opacity var(--transition-fast); +} + +.play-icon-overlay svg { + width: 48px; + height: 48px; + color: white; + filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); +} + +.dashboard-card:hover .play-icon-overlay { + opacity: 1; +} + +.card-info { + padding: 12px; +} + +.card-title { + font-weight: 600; + font-size: 0.95rem; + color: var(--color-text-bright); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 4px; +} + +.card-subtitle { + font-size: 0.8rem; + color: var(--color-text-muted); +} + +.loading-state, +.empty-state { + padding: 40px; + text-align: center; + color: var(--color-text-muted); + width: 100%; + background: rgba(255, 255, 255, 0.02); + border-radius: var(--radius-lg); + border: 1px dashed rgba(255, 255, 255, 0.1); } \ No newline at end of file diff --git a/public/index.html b/public/index.html index 11a3e13..6d2542c 100644 --- a/public/index.html +++ b/public/index.html @@ -45,6 +45,13 @@