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
1008 lines
15 KiB
CSS
1008 lines
15 KiB
CSS
.appShell {
|
|
min-height: 100vh;
|
|
color: var(--foreground);
|
|
background: #0b0c10;
|
|
font-family: var(--font-family-base);
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
inset: 0 auto 0 0;
|
|
width: 238px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px 16px;
|
|
background: #111216;
|
|
border-right: 1px solid #252932;
|
|
box-shadow: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
.logoWrap {
|
|
padding: 2px 4px 22px;
|
|
border-bottom: 1px solid #252932;
|
|
}
|
|
|
|
.brandLogo {
|
|
display: block;
|
|
width: 100%;
|
|
max-height: 72px;
|
|
object-fit: contain;
|
|
object-position: left center;
|
|
filter: none;
|
|
}
|
|
|
|
.nav {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 18px 0;
|
|
}
|
|
|
|
.navItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 40px;
|
|
padding: 0 11px;
|
|
color: #8d96a1;
|
|
text-decoration: none;
|
|
border-left: 2px solid transparent;
|
|
font-size: .86rem;
|
|
transition: color 120ms, background 120ms, border-color 120ms;
|
|
}
|
|
|
|
.navItem:hover {
|
|
color: #dffbff;
|
|
background: #181b22;
|
|
}
|
|
|
|
.navActive {
|
|
color: #ffffff;
|
|
border-left-color: var(--aurora-cyan);
|
|
background: #1b2026;
|
|
}
|
|
|
|
.navActive svg {
|
|
color: var(--aurora-cyan);
|
|
filter: none;
|
|
}
|
|
|
|
.sidebarSection {
|
|
margin-top: 6px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid #252932;
|
|
}
|
|
|
|
.sidebarLabel,
|
|
.sectionKicker,
|
|
.libraryTitle span,
|
|
.sourceLabel span,
|
|
.progressCopy span {
|
|
display: block;
|
|
font: 500 .62rem/1.2 var(--font-family-monospace);
|
|
letter-spacing: .13em;
|
|
color: #657c95;
|
|
}
|
|
|
|
.outputPath {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 9px;
|
|
padding: 10px 9px;
|
|
text-align: left;
|
|
color: #b8c8d8;
|
|
background: #15181f;
|
|
border: 1px solid #2a2f39;
|
|
border-radius: 3px;
|
|
font: .71rem/1.35 var(--font-family-monospace);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.outputPath span {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.outputPath:hover {
|
|
border-color: #3b6670;
|
|
color: #e6fdff;
|
|
}
|
|
|
|
.sidebarFooter {
|
|
margin-top: auto;
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
color: #667b91;
|
|
font-size: .72rem;
|
|
}
|
|
|
|
.sidebarFooter svg {
|
|
color: var(--aurora-teal);
|
|
}
|
|
|
|
.main {
|
|
min-height: 100vh;
|
|
padding: 0 28px 128px;
|
|
}
|
|
|
|
.topbar {
|
|
min-height: 92px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #252932;
|
|
}
|
|
|
|
.mobileBrand {
|
|
display: none;
|
|
}
|
|
|
|
.topbar h1 {
|
|
margin: 4px 0 0;
|
|
font: 600 1.55rem/1 var(--font-family-display);
|
|
letter-spacing: -.025em;
|
|
}
|
|
|
|
.topbarActions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.account {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-right: 8px;
|
|
padding-right: 8px;
|
|
border-right: 1px solid #2a2f39;
|
|
}
|
|
|
|
.account img {
|
|
width: 28px;
|
|
height: 28px;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.account strong,
|
|
.account span {
|
|
display: block;
|
|
}
|
|
|
|
.account strong {
|
|
max-width: 150px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: .72rem;
|
|
}
|
|
|
|
.account span {
|
|
margin-top: 2px;
|
|
color: #747f8c;
|
|
font-size: .61rem;
|
|
}
|
|
|
|
.sourceStrip {
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(320px, 1fr) auto;
|
|
gap: 18px;
|
|
align-items: center;
|
|
min-height: 84px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid #252932;
|
|
}
|
|
|
|
.sourceLabel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sourceLabel > svg {
|
|
color: var(--aurora-cyan);
|
|
}
|
|
|
|
.sourceLabel strong,
|
|
.libraryTitle strong {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: .9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sourceInput {
|
|
display: grid;
|
|
grid-template-columns: minmax(150px, .55fr) minmax(260px, 1.45fr) auto;
|
|
gap: 7px;
|
|
}
|
|
|
|
.sourceMeta {
|
|
display: flex;
|
|
gap: 16px;
|
|
color: #6e8298;
|
|
font: .68rem/1 var(--font-family-monospace);
|
|
}
|
|
|
|
.notice,
|
|
.noticeError {
|
|
margin-top: 12px;
|
|
padding: 9px 11px;
|
|
border: 1px solid #2f3a42;
|
|
background: #121a1d;
|
|
color: #9bcdd2;
|
|
font-size: .75rem;
|
|
}
|
|
|
|
.noticeError {
|
|
color: #f1a6bc;
|
|
background: #1c1218;
|
|
border-color: #49303a;
|
|
}
|
|
|
|
.playlistHero {
|
|
display: grid;
|
|
grid-template-columns: 210px minmax(320px, 1fr) 280px;
|
|
gap: 26px;
|
|
align-items: stretch;
|
|
padding: 24px 0 14px;
|
|
}
|
|
|
|
.coverPanel {
|
|
position: relative;
|
|
min-height: 210px;
|
|
}
|
|
|
|
.coverCrop {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 210px;
|
|
height: 210px;
|
|
overflow: hidden;
|
|
border: 1px solid #2a2f39;
|
|
background: #101216;
|
|
box-shadow: 0 3px 10px rgba(0,0,0,.28);
|
|
}
|
|
|
|
.coverCrop img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
background: #191414;
|
|
transform: none;
|
|
filter: saturate(1.02) contrast(1.02);
|
|
}
|
|
|
|
.coverGlow {
|
|
display: none;
|
|
}
|
|
|
|
.playlistSummary {
|
|
align-self: center;
|
|
min-width: 0;
|
|
padding: 14px 0;
|
|
}
|
|
|
|
.playlistSummary h2 {
|
|
margin: 8px 0 8px;
|
|
font: 650 clamp(2rem, 4.2vw, 3.8rem)/.95 var(--font-family-display);
|
|
letter-spacing: -.045em;
|
|
color: #f6fbff;
|
|
}
|
|
|
|
.playlistSummary p {
|
|
max-width: 620px;
|
|
margin: 0;
|
|
color: #7f93a9;
|
|
font-size: .88rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.spotifyAttribution {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
color: #a8b1bb;
|
|
text-decoration: none;
|
|
font: 600 .62rem/1 var(--font-family-base);
|
|
letter-spacing: .03em;
|
|
}
|
|
|
|
.spotifyAttribution:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.waveform {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin: 22px 0 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.waveform span {
|
|
width: 3px;
|
|
min-height: 6px;
|
|
border-radius: 99px;
|
|
background: #18bfd0;
|
|
opacity: .75;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.playlistStats {
|
|
display: flex;
|
|
gap: 28px;
|
|
}
|
|
|
|
.playlistStats div {
|
|
min-width: 72px;
|
|
}
|
|
|
|
.playlistStats strong,
|
|
.playlistStats span {
|
|
display: block;
|
|
}
|
|
|
|
.playlistStats strong {
|
|
font: 600 1.15rem/1 var(--font-family-display);
|
|
}
|
|
|
|
.playlistStats span {
|
|
margin-top: 4px;
|
|
color: #61768d;
|
|
font-size: .66rem;
|
|
}
|
|
|
|
.quickPanel {
|
|
align-self: center;
|
|
border-left: 1px solid #252932;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.quickAction {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 30px 1fr;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-top: 7px;
|
|
padding: 10px 0;
|
|
color: #d8e5f1;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
background: transparent;
|
|
border: 0;
|
|
border-bottom: 1px solid #252932;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.quickAction > svg {
|
|
color: #65eff8;
|
|
}
|
|
|
|
.quickAction span,
|
|
.quickAction strong {
|
|
display: block;
|
|
}
|
|
|
|
.quickAction span {
|
|
color: #5f748b;
|
|
font-size: .64rem;
|
|
}
|
|
|
|
.quickAction strong {
|
|
margin-top: 3px;
|
|
font-size: .76rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.quickAction:hover strong {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.libraryPanel {
|
|
margin-top: 22px;
|
|
border: 1px solid #2a2f39;
|
|
background: #111319;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.libraryToolbar {
|
|
min-height: 78px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 18px;
|
|
border-bottom: 1px solid #2a2f39;
|
|
background: #15181f;
|
|
}
|
|
|
|
.libraryTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
}
|
|
|
|
.owner {
|
|
margin-top: 2px !important;
|
|
color: #66717e !important;
|
|
font-size: .62rem !important;
|
|
letter-spacing: 0 !important;
|
|
font-family: var(--font-family-base) !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.albumMark {
|
|
width: 42px;
|
|
height: 42px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #7ddbe5;
|
|
background: #1a1e26;
|
|
border: 1px solid #303641;
|
|
}
|
|
|
|
.libraryActions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.librarySearch {
|
|
width: 210px;
|
|
height: 32px;
|
|
font-size: .72rem;
|
|
}
|
|
|
|
.trackTable {
|
|
width: 100%;
|
|
}
|
|
|
|
.pagination {
|
|
min-height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
border-top: 1px solid #242831;
|
|
background: #0f1116;
|
|
}
|
|
|
|
.pagination > span {
|
|
color: #68737f;
|
|
font: .65rem/1 var(--font-family-monospace);
|
|
}
|
|
|
|
.noResults {
|
|
padding: 28px 16px;
|
|
color: #6f7b87;
|
|
text-align: center;
|
|
font-size: .72rem;
|
|
border-top: 1px solid #242831;
|
|
}
|
|
|
|
.tableHeader,
|
|
.trackRow {
|
|
display: grid;
|
|
grid-template-columns: 48px minmax(230px, 1.6fr) minmax(130px, 1fr) 68px 100px;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.tableHeader {
|
|
min-height: 34px;
|
|
padding: 0 15px;
|
|
color: #5e738b;
|
|
background: #0f1116;
|
|
border-bottom: 1px solid #2a2f39;
|
|
font: 500 .62rem/1 var(--font-family-monospace);
|
|
text-transform: uppercase;
|
|
letter-spacing: .09em;
|
|
}
|
|
|
|
.trackRow {
|
|
min-height: 64px;
|
|
padding: 0 15px;
|
|
border-bottom: 1px solid #242831;
|
|
background: #111319;
|
|
width: 100%;
|
|
color: inherit;
|
|
text-align: left;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.trackRow:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.trackRow:hover {
|
|
background: #181b22;
|
|
box-shadow: inset 2px 0 0 #18bfd0;
|
|
}
|
|
|
|
.trackNo,
|
|
.duration {
|
|
color: #64778d;
|
|
font: .71rem/1 var(--font-family-monospace);
|
|
}
|
|
|
|
.trackMain {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.trackThumb {
|
|
width: 34px;
|
|
height: 34px;
|
|
flex: 0 0 auto;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #78dbe5;
|
|
background: #1a1e26;
|
|
border: 1px solid #303641;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.trackThumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: contain;
|
|
background: #191414;
|
|
}
|
|
|
|
.trackMain strong,
|
|
.trackMain span {
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.trackMain strong {
|
|
font-size: .84rem;
|
|
}
|
|
|
|
.trackMain span,
|
|
.album {
|
|
margin-top: 2px;
|
|
color: #75899e;
|
|
font-size: .72rem;
|
|
}
|
|
|
|
.trackStatus {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: .7rem;
|
|
}
|
|
|
|
.rowEnd {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.rowEnd > a {
|
|
display: inline-flex;
|
|
color: #64717e;
|
|
}
|
|
|
|
.rowEnd > a:hover {
|
|
color: #aeb8c2;
|
|
}
|
|
|
|
.rowDownload {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
margin-left: auto;
|
|
padding: 0;
|
|
color: #78dbe5;
|
|
background: transparent;
|
|
border: 1px solid #303641;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rowDownload:hover:not(:disabled) {
|
|
color: #0f1318;
|
|
background: #78dbe5;
|
|
border-color: #78dbe5;
|
|
}
|
|
|
|
.rowDownload:disabled {
|
|
cursor: progress;
|
|
opacity: .7;
|
|
}
|
|
|
|
.spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.statusbar {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 18px;
|
|
margin-top: 8px;
|
|
color: #52667c;
|
|
font: .63rem/1.4 var(--font-family-monospace);
|
|
}
|
|
|
|
.statusbar span:nth-child(2) {
|
|
overflow: hidden;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.playerDock {
|
|
position: fixed;
|
|
left: var(--sidebar-width);
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 25;
|
|
padding: 0 22px 14px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.playerDock > * {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.sidebar {
|
|
width: 72px;
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
.brandLogo {
|
|
width: 52px;
|
|
object-fit: cover;
|
|
object-position: left;
|
|
}
|
|
|
|
.navItem {
|
|
justify-content: center;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
.navItem span,
|
|
.sidebarSection,
|
|
.sidebarFooter span {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.sourceStrip {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
padding-block: 16px;
|
|
}
|
|
|
|
.sourceMeta {
|
|
display: none;
|
|
}
|
|
|
|
.playlistHero {
|
|
grid-template-columns: 180px 1fr;
|
|
}
|
|
|
|
.coverPanel {
|
|
min-height: 180px;
|
|
}
|
|
|
|
.coverCrop {
|
|
width: 180px;
|
|
height: 180px;
|
|
}
|
|
|
|
.quickPanel {
|
|
grid-column: 1 / -1;
|
|
padding-left: 0;
|
|
border-left: 0;
|
|
border-top: 1px solid rgba(67, 96, 153, .24);
|
|
padding-top: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.appShell {
|
|
padding-bottom: 68px;
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.main {
|
|
margin-left: 0;
|
|
padding: 0 12px 188px;
|
|
}
|
|
|
|
.topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 18;
|
|
min-height: 66px;
|
|
gap: 9px;
|
|
background: rgba(11,12,16,.97);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.mobileBrand {
|
|
width: 104px;
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.mobileBrand img {
|
|
display: block;
|
|
width: 100%;
|
|
max-height: 42px;
|
|
object-fit: contain;
|
|
object-position: left center;
|
|
}
|
|
|
|
.topbar > div:first-of-type {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.topbar h1 {
|
|
margin: 0;
|
|
font-size: .92rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.topbar .sectionKicker {
|
|
display: none;
|
|
}
|
|
|
|
.topbarActions {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.account {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
.account > div,
|
|
.account img {
|
|
display: none;
|
|
}
|
|
|
|
.topbarActions > a,
|
|
.topbarActions > button:not(:last-child) {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.sourceStrip {
|
|
min-height: auto;
|
|
padding: 14px 0 16px;
|
|
gap: 9px;
|
|
}
|
|
|
|
.sourceLabel {
|
|
display: none;
|
|
}
|
|
|
|
.sourceInput {
|
|
grid-template-columns: 1fr auto;
|
|
gap: 7px;
|
|
}
|
|
|
|
.sourceInput > :first-child {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.sourceInput input {
|
|
min-height: 42px;
|
|
}
|
|
|
|
.sourceInput button {
|
|
min-height: 42px;
|
|
}
|
|
|
|
.notice,
|
|
.noticeError {
|
|
margin-top: 9px;
|
|
font-size: .7rem;
|
|
}
|
|
|
|
.playlistHero {
|
|
grid-template-columns: 92px minmax(0, 1fr);
|
|
gap: 13px;
|
|
padding: 16px 0 8px;
|
|
}
|
|
|
|
.coverPanel {
|
|
min-height: 92px;
|
|
}
|
|
|
|
.coverCrop {
|
|
width: 92px;
|
|
height: 92px;
|
|
}
|
|
|
|
.playlistSummary {
|
|
align-self: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.playlistSummary h2 {
|
|
margin: 4px 0 5px;
|
|
font-size: 1.45rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.playlistSummary p {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
font-size: .7rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.waveform {
|
|
display: none;
|
|
}
|
|
|
|
.playlistStats {
|
|
gap: 16px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.playlistStats strong {
|
|
font-size: .88rem;
|
|
}
|
|
|
|
.playlistStats span {
|
|
font-size: .56rem;
|
|
}
|
|
|
|
.spotifyAttribution {
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.quickPanel {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0,1fr));
|
|
gap: 1px;
|
|
margin-top: 5px;
|
|
padding: 0;
|
|
border: 1px solid #252932;
|
|
background: #252932;
|
|
}
|
|
|
|
.quickAction {
|
|
min-height: 54px;
|
|
margin: 0;
|
|
padding: 8px 9px;
|
|
background: #12151a;
|
|
border: 0;
|
|
}
|
|
|
|
.quickAction span {
|
|
display: none;
|
|
}
|
|
|
|
.quickAction strong {
|
|
font-size: .68rem;
|
|
}
|
|
|
|
.libraryPanel {
|
|
margin-top: 12px;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
.libraryToolbar {
|
|
min-height: auto;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.albumMark {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.libraryActions {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 7px;
|
|
}
|
|
|
|
.librarySearch {
|
|
width: 100%;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.tableHeader {
|
|
display: none;
|
|
}
|
|
|
|
.trackRow {
|
|
grid-template-columns: minmax(0,1fr) auto;
|
|
gap: 8px;
|
|
min-height: 68px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.trackNo,
|
|
.album,
|
|
.duration {
|
|
display: none;
|
|
}
|
|
|
|
.trackThumb {
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
|
|
.trackMain strong {
|
|
font-size: .78rem;
|
|
}
|
|
|
|
.trackMain span {
|
|
max-width: 210px;
|
|
font-size: .65rem;
|
|
}
|
|
|
|
.trackStatus {
|
|
font-size: .58rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.statusbar {
|
|
display: none;
|
|
}
|
|
|
|
.pagination {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.playerDock {
|
|
left: 0;
|
|
bottom: 68px;
|
|
padding: 6px 7px;
|
|
background: #0b0c10;
|
|
border-top: 1px solid #242831;
|
|
}
|
|
} |