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
67 lines
4.6 KiB
CSS
67 lines
4.6 KiB
CSS
.page{min-height:100vh;padding:0 28px 50px;color:var(--foreground);background:var(--background);font-family:var(--font-family-base)}
|
|
.topbar,.heading,.notice,.noticeError,.stats,.panel{width:min(1180px,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}
|
|
.heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:28px 0 20px}
|
|
.heading>div:first-child>span,.libraryName span{color:#66727e;font:500 .62rem/1 var(--font-family-monospace);letter-spacing:.12em}
|
|
.heading h1{margin:7px 0;font:600 2.1rem/1 var(--font-family-display)}
|
|
.heading p{max-width:730px;margin:0;color:var(--muted-foreground);font-size:.8rem;line-height:1.55}
|
|
.actions{display:flex;gap:8px;flex-wrap:wrap}
|
|
.notice,.noticeError{margin-bottom:12px;padding:9px 11px;border:1px solid #2f3a42;background:#121a1d;color:#9bcdd2;font-size:.72rem}
|
|
.noticeError{color:#f1a6bc;background:#1c1218;border-color:#49303a}
|
|
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);background:var(--card);margin-bottom:14px}
|
|
.stats div{padding:13px 14px;border-right:1px solid var(--border)}
|
|
.stats div:last-child{border-right:0}
|
|
.stats strong,.stats span{display:block}
|
|
.stats strong{font:600 1rem/1 var(--font-family-display)}
|
|
.stats span{margin-top:4px;color:#6d7884;font-size:.64rem}
|
|
.panel{border:1px solid var(--border);background:var(--card)}
|
|
.toolbar{min-height:64px;display:grid;grid-template-columns:1fr minmax(220px,340px) auto;align-items:center;gap:12px;padding:0 14px;background:#15181f;border-bottom:1px solid var(--border)}
|
|
.libraryName{display:flex;align-items:center;gap:9px;min-width:0}
|
|
.libraryName>svg{color:var(--primary)}
|
|
.libraryName strong{display:block;margin-top:4px;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.search{display:flex;align-items:center;gap:7px;color:#6e7985}
|
|
.search input{height:32px}
|
|
.progress{color:#72cbd4;font:.66rem/1 var(--font-family-monospace)}
|
|
.headerRow,.row{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(280px,1.5fr) minmax(130px,.65fr) minmax(160px,.8fr);gap:14px;align-items:center}
|
|
.headerRow{min-height:34px;padding:0 14px;color:#64707c;background:#0f1116;border-bottom:1px solid var(--border);font:500 .62rem/1 var(--font-family-monospace);text-transform:uppercase;letter-spacing:.08em}
|
|
.row{min-height:74px;padding:8px 14px;border-bottom:1px solid #242831}
|
|
.row:last-child{border-bottom:0}
|
|
.row:hover{background:#15181f}
|
|
.file,.meta,.audio,.issues{min-width:0}
|
|
.file strong,.file span,.meta strong,.meta span,.meta small,.audio strong,.audio span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.file strong,.meta strong,.audio strong{font-size:.76rem}
|
|
.file span,.meta span,.audio span{margin-top:3px;color:#697480;font-size:.65rem}
|
|
.meta small{margin-top:4px;color:#58636f;font:.6rem/1.3 var(--font-family-monospace)}
|
|
.issues{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#c9a56c;font-size:.64rem}
|
|
.issues span{display:inline-flex;align-items:center;gap:4px}
|
|
.duplicate{color:#e6a26f}
|
|
.clean{color:#65c9a2}
|
|
.empty{padding:38px 16px;color:#6c7783;text-align:center;font-size:.74rem}
|
|
@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}
|
|
.heading{align-items:flex-start;flex-direction:column;gap:12px;padding:18px 2px 14px}
|
|
.heading h1{font-size:1.75rem}.heading p{font-size:.74rem;line-height:1.5}
|
|
.actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button{width:100%}
|
|
.stats{grid-template-columns:repeat(2,1fr)}
|
|
.stats div:nth-child(2){border-right:0}
|
|
.stats div:nth-child(-n+2){border-bottom:1px solid var(--border)}
|
|
.stats div{padding:10px 11px}
|
|
.panel{border-left:0;border-right:0}
|
|
.toolbar{grid-template-columns:1fr;padding:10px}
|
|
.search input{height:40px}
|
|
.headerRow{display:none}
|
|
.row{grid-template-columns:1fr auto;gap:6px;padding:10px}
|
|
.file{grid-column:1}
|
|
.meta{grid-column:1}
|
|
.audio{grid-column:2;grid-row:1/3;text-align:right;align-self:center}
|
|
.issues{grid-column:1/-1;padding-top:4px}
|
|
.meta small{display:none}
|
|
}
|