R3ap3r
3178b8f4f7
- Spotify playlist, library, album and artist browsing with in-app playback - Song, playlist and album downloads via spotdl with YouTube and Bandcamp fallbacks - Electron desktop app (castLabs Widevine) with a permanent sidebar layout - Linux and Windows packaging scripts
46 lines
3.4 KiB
CSS
46 lines
3.4 KiB
CSS
.page{min-height:100vh;padding:0 28px 50px;color:var(--foreground);background:var(--background);font-family:var(--font-family-base)}
|
|
.topbar,.noticeError,.artistHeader,.grid,.loading,.loadMore{width:min(1120px,100%);margin-inline:auto}
|
|
.topbar{min-height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--border)}
|
|
.topbar img{width:230px;max-height:60px;object-fit:contain}
|
|
.topbar>span{justify-self:end;color:var(--muted-foreground);font:.68rem/1 var(--font-family-monospace)}
|
|
.backLink{display:inline-flex;align-items:center;gap:7px;color:var(--muted-foreground);text-decoration:none;font-size:.78rem}
|
|
.noticeError{margin-top:14px;padding:9px 11px;color:#f1a6bc;background:#1c1218;border:1px solid #49303a;font-size:.72rem}
|
|
.artistHeader{display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:center;padding:28px 0 22px;border-bottom:1px solid var(--border)}
|
|
.artistImage{width:170px;height:170px;display:grid;place-items:center;overflow:hidden;color:#71c9d2;background:#171a20;border:1px solid #303641}
|
|
.artistImage img{width:100%;height:100%;object-fit:contain;background:#191414}
|
|
.artistHeader>div:last-child>span{color:#66727e;font:500 .62rem/1 var(--font-family-monospace);letter-spacing:.12em}
|
|
.artistHeader h1{margin:7px 0 7px;font:600 clamp(2rem,4vw,3.3rem)/.98 var(--font-family-display);letter-spacing:-.035em}
|
|
.artistHeader p{margin:0;color:var(--muted-foreground);font-size:.78rem}
|
|
.spotifyLink{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:#a8b1bb;text-decoration:none;font-size:.68rem}
|
|
.spotifyLink:hover{color:#fff}
|
|
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:18px;background:#242831;border:1px solid #242831}
|
|
.card{display:flex;flex-direction:column;min-width:0;padding:12px;background:#111319}
|
|
.cover{aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;color:#6fcbd4;background:#1a1e26;border:1px solid #303641}
|
|
.cover img{width:100%;height:100%;object-fit:contain;background:#191414}
|
|
.cardBody{min-height:92px;padding:10px 0}
|
|
.type{display:block;color:#67737f;font:500 .58rem/1 var(--font-family-monospace);letter-spacing:.09em}
|
|
.cardBody strong,.cardBody small{display:block}
|
|
.cardBody strong{margin-top:5px;font-size:.79rem;line-height:1.25}
|
|
.cardBody small{margin-top:5px;color:#697480;font-size:.64rem}
|
|
.cardActions{display:flex;gap:6px;flex-wrap:wrap}
|
|
.loading,.loadMore{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;color:#6f7a86;font-size:.72rem}
|
|
.loading svg{animation:spin .9s linear infinite}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
@media(max-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
|
@media(max-width:900px){
|
|
.page{padding:0 10px 84px}
|
|
.topbar{position:sticky;top:0;z-index:20;min-height:58px;grid-template-columns:auto 1fr;background:rgba(11,12,16,.97)}
|
|
.topbar img{width:132px;justify-self:end}.topbar>span{display:none}
|
|
.backLink{font-size:0}.backLink svg{width:20px;height:20px}
|
|
.artistHeader{grid-template-columns:92px 1fr;gap:12px;padding:16px 2px}
|
|
.artistImage{width:92px;height:92px}
|
|
.artistHeader h1{font-size:1.65rem;line-height:1}
|
|
.artistHeader p{font-size:.66rem}
|
|
.spotifyLink{margin-top:8px;font-size:.62rem}
|
|
.grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
|
|
.card{padding:8px}
|
|
.cardBody{min-height:70px;padding:8px 0}
|
|
.cardBody strong{font-size:.73rem}
|
|
.cardActions{display:grid;grid-template-columns:1fr;gap:5px}
|
|
}
|