feat: auth & admin
This commit is contained in:
@@ -0,0 +1,709 @@
|
||||
/* ============================================================
|
||||
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;
|
||||
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-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%;
|
||||
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);
|
||||
}
|
||||
.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%;
|
||||
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: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
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;
|
||||
}
|
||||
.qd-now {
|
||||
display: flex;
|
||||
gap: 11px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: var(--r-md);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(190, 242, 100, 0.13),
|
||||
rgba(190, 242, 100, 0.05)
|
||||
);
|
||||
border: 1px solid rgba(190, 242, 100, 0.2);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.qd-now .qt {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.qd-now .qt .t {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--fg-1);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.qd-now .qt .r {
|
||||
font-size: 11px;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.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 .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;
|
||||
}
|
||||
Reference in New Issue
Block a user