Senko-san
8ae447e08d
Replace the labelled availability/metadata badges in track rows with small icon+tooltip indicators (cloud/hard-drives/warning/etc, derived from TrackAvailability and MetadataStatus). Add a `connection` slice fed by a single status poller (Sidebar) so other components can cheaply check backend reachability. TrackRow uses this plus the offline audio cache to show "Local" instead of a stale "On server" when the backend is down but the track is already cached.
1019 lines
20 KiB
CSS
1019 lines
20 KiB
CSS
/* ============================================================
|
|
App shell look — sidebar, queue drawer, player bar.
|
|
Transferred from the ModernSK Music design reference and layered on
|
|
top of modern-sk's tokens + component CSS. Only layout + product
|
|
classes live here; every colour/shadow/radius flows from modern-sk
|
|
tokens so the whole shell restyles from one place (and stays in sync
|
|
with a future Flutter client sharing the same tokens).
|
|
|
|
Icons are @phosphor-icons/react <svg> elements carrying className "ph";
|
|
they size to 1em, so font-size here controls them like the reference.
|
|
============================================================ */
|
|
|
|
.ph {
|
|
display: inline-block;
|
|
line-height: 0;
|
|
}
|
|
|
|
/* uppercase section label (not shipped by modern-sk) */
|
|
.msk-label {
|
|
font-family: var(--font-sans);
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--track-caps);
|
|
color: var(--fg-3);
|
|
}
|
|
|
|
/* ---- shell layout ---- */
|
|
.app-body {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
}
|
|
.app-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.app-screen {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
SIDEBAR
|
|
============================================================ */
|
|
.sidebar {
|
|
width: 236px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow-x: hidden;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22));
|
|
border-right: 1px solid var(--hair);
|
|
}
|
|
.sb-scroll {
|
|
flex: 1;
|
|
min-height: 0; /* allow scroll inside the column flex so .sb-foot stays pinned */
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: 14px 12px 6px;
|
|
}
|
|
.sb-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 4px 8px 14px;
|
|
font-family: var(--font-display, var(--font-sans));
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
letter-spacing: var(--track-snug);
|
|
color: var(--fg-1);
|
|
}
|
|
.sb-brand .ph {
|
|
color: var(--lime);
|
|
font-size: 20px;
|
|
}
|
|
.sb-sec {
|
|
margin-bottom: 18px;
|
|
}
|
|
.sb-sec .msk-label {
|
|
padding: 0 8px 7px;
|
|
display: block;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
padding: 8px 10px;
|
|
border-radius: var(--r-md);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--fg-2);
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
transition:
|
|
background var(--dur-quick) var(--ease-out),
|
|
color var(--dur-quick) var(--ease-out);
|
|
}
|
|
.nav-item .ph {
|
|
font-size: 18px;
|
|
color: var(--fg-3);
|
|
flex-shrink: 0;
|
|
}
|
|
.nav-item > span {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.nav-item:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--fg-1);
|
|
}
|
|
.nav-item:hover .ph {
|
|
color: var(--fg-2);
|
|
}
|
|
.nav-item.active {
|
|
color: var(--fg-1);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(190, 242, 100, 0.16),
|
|
rgba(190, 242, 100, 0.07)
|
|
);
|
|
border-color: rgba(190, 242, 100, 0.25);
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
|
|
}
|
|
.nav-item.active .ph {
|
|
color: var(--lime);
|
|
}
|
|
.nav-item .nav-badge {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--fg-on-ember, #fff);
|
|
background: var(--ember);
|
|
padding: 1px 6px;
|
|
border-radius: var(--r-pill);
|
|
}
|
|
.nav-item .nav-count {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--fg-3);
|
|
}
|
|
|
|
.pl-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
padding: 6px 10px;
|
|
border-radius: var(--r-md);
|
|
font-size: 13px;
|
|
color: var(--fg-2);
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
}
|
|
.pl-item .ph {
|
|
font-size: 15px;
|
|
color: var(--fg-3);
|
|
}
|
|
.pl-item .pl-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
.pl-item:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--fg-1);
|
|
}
|
|
.pl-item.active {
|
|
color: var(--fg-1);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: var(--hair);
|
|
}
|
|
.pl-item .sync-led {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
.sync-synced {
|
|
background: var(--lime);
|
|
box-shadow: 0 0 5px var(--lime);
|
|
}
|
|
.sync-pending {
|
|
background: var(--warning);
|
|
}
|
|
.sync-conflict {
|
|
background: var(--ember);
|
|
box-shadow: 0 0 5px var(--ember);
|
|
}
|
|
|
|
.sb-foot {
|
|
flex-shrink: 0;
|
|
border-top: 1px solid var(--hair);
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.user-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px;
|
|
border-radius: var(--r-md);
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
.user-chip:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.user-av {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--lime-ink);
|
|
background: linear-gradient(180deg, var(--lime-bright), var(--lime-deep));
|
|
}
|
|
.user-meta {
|
|
line-height: 1.2;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.user-meta .nm {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--fg-1);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.user-meta .rl {
|
|
font-size: 11px;
|
|
color: var(--fg-3);
|
|
}
|
|
.user-chip .uc-action {
|
|
margin-left: auto;
|
|
color: var(--fg-3);
|
|
font-size: 16px;
|
|
display: inline-flex;
|
|
}
|
|
.user-chip .uc-action:hover {
|
|
color: var(--fg-1);
|
|
}
|
|
|
|
/* connection status pill (used in sidebar foot) */
|
|
.conn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 5px 11px 5px 9px;
|
|
border-radius: var(--r-pill);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--fg-2);
|
|
cursor: default;
|
|
background: var(--steel-900);
|
|
border: 1px solid var(--hair);
|
|
box-shadow: var(--shadow-inset-well);
|
|
}
|
|
.conn .led {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 6px currentColor;
|
|
}
|
|
.conn.online .led {
|
|
background: var(--lime);
|
|
color: var(--lime);
|
|
}
|
|
.conn.offline .led {
|
|
background: var(--fg-3);
|
|
color: var(--fg-3);
|
|
box-shadow: none;
|
|
}
|
|
.conn.syncing .led {
|
|
background: var(--info);
|
|
color: var(--info);
|
|
animation: conn-pulse 1.2s var(--ease-out) infinite;
|
|
}
|
|
.conn.error .led {
|
|
background: var(--ember);
|
|
color: var(--ember);
|
|
}
|
|
@keyframes conn-pulse {
|
|
50% {
|
|
opacity: 0.35;
|
|
}
|
|
}
|
|
|
|
/* ---- shared icon button ---- */
|
|
.iconbtn {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--r-md);
|
|
border: 1px solid var(--hair-strong);
|
|
background: var(--grad-key);
|
|
box-shadow: var(--shadow-raised);
|
|
color: var(--fg-2);
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition:
|
|
background var(--dur-quick),
|
|
color var(--dur-quick),
|
|
box-shadow var(--dur-quick),
|
|
transform var(--dur-quick);
|
|
}
|
|
.iconbtn:hover {
|
|
background: var(--grad-key-hover);
|
|
color: var(--fg-1);
|
|
}
|
|
.iconbtn:active {
|
|
box-shadow: var(--shadow-pressed, var(--shadow-inset-well));
|
|
transform: translateY(1px);
|
|
}
|
|
.iconbtn.sm {
|
|
width: 26px;
|
|
height: 26px;
|
|
font-size: 14px;
|
|
}
|
|
.iconbtn.on {
|
|
color: var(--lime);
|
|
border-color: rgba(190, 242, 100, 0.3);
|
|
}
|
|
|
|
/* ---- art tile ---- */
|
|
.arttile {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
display: block;
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.4),
|
|
0 0 0 1px rgba(0, 0, 0, 0.25);
|
|
}
|
|
.arttile-sheen {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
155deg,
|
|
rgba(255, 255, 255, 0.32),
|
|
transparent 45%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
.arttile-initials {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-display, var(--font-sans));
|
|
color: rgba(255, 255, 255, 0.82);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ---- availability dot ---- */
|
|
.avail {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 14px;
|
|
}
|
|
.avail .avail-pct {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* ---- playing indicator ("hopping bars" equalizer, YTM-style) ---- */
|
|
.playing-bars {
|
|
display: inline-flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
width: 14px;
|
|
height: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
.playing-bars span {
|
|
display: block;
|
|
width: 3px;
|
|
background: var(--lime);
|
|
border-radius: 1px;
|
|
height: 30%;
|
|
animation: playing-bar-bounce 1s ease-in-out infinite;
|
|
}
|
|
.playing-bars span:nth-child(1) {
|
|
animation-delay: -0.9s;
|
|
}
|
|
.playing-bars span:nth-child(2) {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.playing-bars span:nth-child(3) {
|
|
animation-delay: -0.6s;
|
|
}
|
|
.playing-bars.paused span {
|
|
animation-play-state: paused;
|
|
height: 100%;
|
|
}
|
|
.spin {
|
|
animation: spin 1.2s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes playing-bar-bounce {
|
|
0%,
|
|
100% {
|
|
height: 30%;
|
|
}
|
|
50% {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
PLAYER BAR
|
|
============================================================ */
|
|
.player {
|
|
flex-shrink: 0;
|
|
height: 84px;
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 1fr) minmax(380px, 2fr) minmax(
|
|
220px,
|
|
1fr
|
|
);
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 0 18px;
|
|
border-top: 1px solid var(--hair-strong);
|
|
background: linear-gradient(180deg, var(--steel-800), var(--steel-900));
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
|
|
}
|
|
.player.empty {
|
|
justify-content: center;
|
|
color: var(--fg-3);
|
|
font-size: 13px;
|
|
display: flex;
|
|
}
|
|
.pl-now {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
min-width: 0;
|
|
}
|
|
.pl-now-tt {
|
|
min-width: 0;
|
|
}
|
|
.pl-now .t {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--fg-1);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.pl-now .a {
|
|
font-size: 12px;
|
|
color: var(--fg-3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.pl-srcbadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pl-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.pl-transport {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
.pl-tbtn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--fg-2);
|
|
cursor: pointer;
|
|
font-size: 19px;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: color var(--dur-quick);
|
|
}
|
|
.pl-tbtn:hover {
|
|
color: var(--fg-1);
|
|
}
|
|
.pl-tbtn.on {
|
|
color: var(--lime);
|
|
}
|
|
.pl-play {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
color: var(--lime-ink);
|
|
background: var(--grad-primary);
|
|
border: 1px solid var(--lime-deep);
|
|
box-shadow:
|
|
0 1px 0 rgba(255, 255, 255, 0.3) inset,
|
|
var(--glow-lime),
|
|
0 2px 4px rgba(0, 0, 0, 0.35);
|
|
cursor: pointer;
|
|
transition:
|
|
filter var(--dur-quick),
|
|
transform var(--dur-quick);
|
|
}
|
|
.pl-play:hover {
|
|
filter: brightness(1.05);
|
|
}
|
|
.pl-play:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.pl-seek {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
}
|
|
.pl-time {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--fg-3);
|
|
width: 36px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.pl-seek-slider {
|
|
flex: 1;
|
|
}
|
|
|
|
.pl-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
.pl-vol {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--fg-3);
|
|
}
|
|
.pl-vol-slider {
|
|
width: 84px;
|
|
}
|
|
|
|
/* ============================================================
|
|
QUEUE DRAWER (A11)
|
|
============================================================ */
|
|
/* Outer wrapper animates width 336px <-> 0 so the queue drawer slides in/out
|
|
smoothly; the fixed-width inner keeps content from reflowing while it moves. */
|
|
.qd {
|
|
width: 336px;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
border-left: 1px solid var(--hair);
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
|
|
transition:
|
|
width 0.24s var(--ease-out),
|
|
border-left-color 0.24s var(--ease-out);
|
|
}
|
|
.qd.closed {
|
|
width: 0;
|
|
border-left-color: transparent;
|
|
}
|
|
.qd-inner {
|
|
width: 336px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
.qd-head {
|
|
flex-shrink: 0;
|
|
padding: 16px 18px 12px;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.qd-head .row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.qd-head h3 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--fg-1);
|
|
}
|
|
.qd-src {
|
|
font-size: 12px;
|
|
color: var(--fg-3);
|
|
margin-top: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.qd-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 12px 12px 18px;
|
|
}
|
|
.qrow {
|
|
display: flex;
|
|
gap: 11px;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border-radius: var(--r-md);
|
|
cursor: grab;
|
|
border: none;
|
|
background: transparent;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
.qrow:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.qrow.current {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(190, 242, 100, 0.13),
|
|
rgba(190, 242, 100, 0.05)
|
|
);
|
|
box-shadow: 0 0 0 1px rgba(190, 242, 100, 0.35) inset;
|
|
}
|
|
.qrow.dragging {
|
|
z-index: 1;
|
|
cursor: grabbing;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.qrow.current .qt .t {
|
|
color: var(--lime);
|
|
font-weight: 600;
|
|
}
|
|
.qrow .grip {
|
|
color: var(--fg-3);
|
|
font-size: 15px;
|
|
cursor: grab;
|
|
display: inline-flex;
|
|
}
|
|
.qrow .qt {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.qrow .qt .t {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--fg-1);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.qrow .qt .r {
|
|
font-size: 11px;
|
|
color: var(--fg-3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.qrow .qt .r .ph {
|
|
color: var(--lime);
|
|
font-size: 11px;
|
|
}
|
|
.qd-radio {
|
|
margin-bottom: 14px;
|
|
padding: 12px;
|
|
border-radius: var(--r-md);
|
|
background: var(--steel-900);
|
|
border: 1px solid var(--hair);
|
|
box-shadow: var(--shadow-inset-well);
|
|
}
|
|
.qd-radio .row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.qd-radio .row .ph {
|
|
color: var(--lime);
|
|
}
|
|
.expl {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.expl .lab {
|
|
font-size: 11px;
|
|
color: var(--fg-3);
|
|
white-space: nowrap;
|
|
}
|
|
.expl-slider {
|
|
flex: 1;
|
|
}
|
|
.qd-empty {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--fg-3);
|
|
font-size: 13px;
|
|
}
|
|
.qd-loadmore {
|
|
text-align: center;
|
|
padding: 14px 0;
|
|
color: var(--fg-3);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ============================================================
|
|
TRACK INFO DRAWER (rightmost — sits right of the queue drawer)
|
|
============================================================ */
|
|
/* Same width-collapse pattern as .qd. Rendered after QueuePanel in AppShell so
|
|
when both are open this is the rightmost panel. */
|
|
.tid {
|
|
width: 360px;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
border-left: 1px solid var(--hair);
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.24));
|
|
transition:
|
|
width 0.24s var(--ease-out),
|
|
border-left-color 0.24s var(--ease-out);
|
|
}
|
|
.tid.closed {
|
|
width: 0;
|
|
border-left-color: transparent;
|
|
}
|
|
.tid-inner {
|
|
width: 360px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
.tid-head {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px 18px 12px;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.tid-head h3 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--fg-1);
|
|
}
|
|
.tid-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 18px;
|
|
}
|
|
.tid-cover {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
margin-bottom: 16px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: var(--steel-900);
|
|
box-shadow: var(--shadow-raised, 0 8px 24px rgba(0, 0, 0, 0.4));
|
|
}
|
|
.tid-cover img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.tid-title {
|
|
margin: 0 0 4px;
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
color: var(--fg-1);
|
|
line-height: 1.25;
|
|
}
|
|
.tid-sub {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: var(--fg-2);
|
|
text-decoration: none;
|
|
}
|
|
.tid-sub:hover {
|
|
color: var(--lime);
|
|
text-decoration: underline;
|
|
}
|
|
.tid-album {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 3px;
|
|
color: var(--fg-3);
|
|
}
|
|
.tid-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 16px 0 4px;
|
|
}
|
|
.tid-section {
|
|
margin-top: 18px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--hair);
|
|
}
|
|
.tid-section-label {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
.tid-status {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.tid-error {
|
|
margin: 8px 0 0;
|
|
font-size: 12px;
|
|
color: var(--ember, #e9572b);
|
|
}
|
|
.tid-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 5px 0;
|
|
font-size: 13px;
|
|
}
|
|
.tid-row-k {
|
|
flex-shrink: 0;
|
|
width: 96px;
|
|
color: var(--fg-3);
|
|
}
|
|
.tid-row-v {
|
|
min-width: 0;
|
|
flex: 1;
|
|
color: var(--fg-1);
|
|
text-align: right;
|
|
word-break: break-word;
|
|
}
|
|
.tid-row-v.mono {
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: 11px;
|
|
color: var(--fg-2);
|
|
}
|
|
|
|
/* On narrower viewports the drawer overlays the content instead of pushing it,
|
|
so the queue + info drawers don't squeeze the main screen. */
|
|
@media (max-width: 1180px) {
|
|
.app-body {
|
|
position: relative;
|
|
}
|
|
.tid {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 360px;
|
|
z-index: 30;
|
|
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.5);
|
|
transition: transform 0.24s var(--ease-out);
|
|
}
|
|
.tid.closed {
|
|
width: 360px;
|
|
transform: translateX(100%);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
PAGE HEADER + SECONDARY NAV (Settings, Admin)
|
|
============================================================ */
|
|
.page-title {
|
|
margin: 0;
|
|
font-family: var(--font-display, var(--font-sans));
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: var(--track-snug);
|
|
color: var(--fg-1);
|
|
}
|
|
|
|
.sub-nav {
|
|
display: flex;
|
|
gap: 4px;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.sub-nav-item {
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--fg-2);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition:
|
|
color 0.12s ease,
|
|
border-color 0.12s ease;
|
|
}
|
|
.sub-nav-item:hover {
|
|
color: var(--fg-1);
|
|
}
|
|
.sub-nav-item.active {
|
|
color: var(--fg-1);
|
|
border-bottom-color: var(--lime);
|
|
}
|
|
|
|
/* Sidebar section header that doubles as a link (Playlists) */
|
|
.sb-sec-link.active {
|
|
color: var(--fg-1);
|
|
}
|
|
|
|
/* ============================================================
|
|
TRACK ROW — cover art play overlay
|
|
============================================================ */
|
|
.track-art {
|
|
position: relative;
|
|
width: 36px;
|
|
height: 36px;
|
|
flex-shrink: 0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.track-art-play {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: var(--fg-1);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity var(--dur-quick);
|
|
}
|
|
.track-art:hover .track-art-play {
|
|
opacity: 1;
|
|
}
|
|
.track-art-play:hover {
|
|
color: var(--lime);
|
|
}
|
|
|
|
/* Now-playing overlay shown on a cover when its track is the active one
|
|
(track lists and the queue panel both use this). */
|
|
.cover-playing {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
}
|
|
.track-art:hover .cover-playing {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Queue row cover-art wrapper, sized to match the 36px ArtTile */
|
|
.qart {
|
|
position: relative;
|
|
width: 36px;
|
|
height: 36px;
|
|
flex-shrink: 0;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|