56 lines
2.3 KiB
CSS
56 lines
2.3 KiB
CSS
|
/* Navidrome-like dark theme variables */
|
||
|
|
:root {
|
||
|
|
--app-bg: #0f1113;
|
||
|
|
--surface: #151617;
|
||
|
|
--muted: rgba(255,255,255,0.6);
|
||
|
|
--accent: #1db954;
|
||
|
|
--sidebar-width: 240px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
font-family: Roboto, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||
|
|
background: var(--app-bg);
|
||
|
|
color: #e6eef3;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root { height: 100vh }
|
||
|
|
|
||
|
|
/* Sidebar */
|
||
|
|
.sidebar {
|
||
|
|
width: var(--sidebar-width);
|
||
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
|
||
|
|
border-right: 1px solid rgba(255,255,255,0.03);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Library grid (album/artist style) */
|
||
|
|
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 12px; }
|
||
|
|
.card-media { position: relative; overflow: hidden; border-radius: 6px; background: #0b0b0b; }
|
||
|
|
.card-media img { width: 100%; height: 160px; object-fit: cover; display: block; }
|
||
|
|
.card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 120ms ease-in-out; background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.32)); }
|
||
|
|
.card-media:hover .card-overlay,
|
||
|
|
.card-media:focus-within .card-overlay { opacity: 1; }
|
||
|
|
.card-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.5); color: #fff; padding: 2px 6px; border-radius: 12px; font-size: 12px; }
|
||
|
|
|
||
|
|
/* Play icon in overlay */
|
||
|
|
.card-overlay .play-button { background: rgba(0,0,0,0.6); border-radius: 999px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
|
||
|
|
|
||
|
|
/* card server badge variant */
|
||
|
|
.card-badge.server-badge { left: auto; right: 8px; background: rgba(255,255,255,0.04); }
|
||
|
|
|
||
|
|
/* Touch-friendly helpers and mobile layout */
|
||
|
|
.touch-target { min-height: 48px; min-width: 48px; padding: 8px 12px; }
|
||
|
|
|
||
|
|
@media (max-width:600px) {
|
||
|
|
.app-content { padding: 4px !important; }
|
||
|
|
.touch-target { min-height: 56px; padding: 10px 16px; font-size: 1rem; }
|
||
|
|
.library-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; padding: 8px 0; }
|
||
|
|
.card-media img { height: 140px; object-fit: cover; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (hover: none), (pointer: coarse) {
|
||
|
|
.card-overlay { opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.38)); }
|
||
|
|
.card-overlay .play-button { width: 52px; height: 52px; }
|
||
|
|
}
|
||
|
|
|