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
122 lines
1.9 KiB
CSS
122 lines
1.9 KiB
CSS
.panel {
|
|
position: fixed;
|
|
right: 22px;
|
|
bottom: 104px;
|
|
z-index: 24;
|
|
width: min(390px, calc(100vw - 100px));
|
|
height: min(520px, calc(100vh - 150px));
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #111319;
|
|
border: 1px solid #2f3540;
|
|
box-shadow: 0 8px 28px rgba(0,0,0,.38);
|
|
}
|
|
|
|
.panel header {
|
|
min-height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 10px 12px 10px 14px;
|
|
background: #15181f;
|
|
border-bottom: 1px solid #2a2f39;
|
|
}
|
|
|
|
.panel header span,
|
|
.panel header strong,
|
|
.panel header small {
|
|
display: block;
|
|
}
|
|
|
|
.panel header span {
|
|
color: #667481;
|
|
font: 500 .58rem/1 var(--font-family-monospace);
|
|
letter-spacing: .12em;
|
|
}
|
|
|
|
.panel header strong {
|
|
margin-top: 4px;
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.panel header small {
|
|
margin-top: 2px;
|
|
color: #77828e;
|
|
font-size: .65rem;
|
|
}
|
|
|
|
.body {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 18px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.synced {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.synced p {
|
|
margin: 0;
|
|
padding: 8px 6px;
|
|
color: #707a85;
|
|
font-size: .94rem;
|
|
line-height: 1.45;
|
|
transition: color 140ms ease, transform 140ms ease;
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.synced p.active {
|
|
color: #f4f6f8;
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.plain {
|
|
white-space: pre-wrap;
|
|
color: #c7cdd4;
|
|
font-size: .82rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.empty,
|
|
.error {
|
|
min-height: 160px;
|
|
display: grid;
|
|
place-items: center;
|
|
align-content: center;
|
|
gap: 8px;
|
|
color: #6f7a86;
|
|
text-align: center;
|
|
font-size: .72rem;
|
|
}
|
|
|
|
.error {
|
|
color: #efa0b7;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.panel {
|
|
right: 8px;
|
|
left: 8px;
|
|
width: auto;
|
|
bottom: 142px;
|
|
height: min(430px, calc(100vh - 170px));
|
|
border-radius: 4px;
|
|
z-index: 40;
|
|
}
|
|
|
|
.panel header {
|
|
min-height: 56px;
|
|
}
|
|
|
|
.body {
|
|
padding: 14px;
|
|
}
|
|
|
|
.synced p {
|
|
padding: 7px 4px;
|
|
font-size: .88rem;
|
|
}
|
|
} |