root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add MP3 URL import and analytics widgets

Browse source
This commit is contained in:
Bot 2026-03-01 18:56:37 +01:00
parent e200087a73
commit 5a41b6a622
5 changed files with 380 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

164
web/src/styles.css
View file

@ -497,6 +497,66 @@ input, select {
flex: 1;
}
/* ── URL Import ── */
.url-import-wrap {
display: flex;
align-items: center;
gap: 6px;
min-width: 240px;
max-width: 460px;
flex: 1;
padding: 4px 6px 4px 8px;
border-radius: 20px;
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, .08);
}
.url-import-icon {
font-size: 15px;
color: var(--text-faint);
flex-shrink: 0;
}
.url-import-input {
flex: 1;
min-width: 0;
height: 26px;
border: none;
background: transparent;
color: var(--text-normal);
font-size: 12px;
font-family: var(--font);
outline: none;
}
.url-import-input::placeholder {
color: var(--text-faint);
}
.url-import-btn {
height: 24px;
padding: 0 10px;
border-radius: 14px;
border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .45);
background: rgba(var(--accent-rgb, 88, 101, 242), .12);
color: var(--accent);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
transition: all var(--transition);
}
.url-import-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--white);
}
.url-import-btn:disabled {
opacity: .5;
pointer-events: none;
}
/* ── Toolbar Buttons ── */
.tb-btn {
display: flex;
@ -649,6 +709,90 @@ input, select {
box-shadow: 0 0 6px rgba(255, 255, 255, .3);
}
/* ── Analytics Strip ── */
.analytics-strip {
display: flex;
align-items: stretch;
gap: 8px;
padding: 8px 20px;
background: var(--bg-primary);
border-bottom: 1px solid rgba(0, 0, 0, .12);
flex-shrink: 0;
}
.analytics-card {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 12px;
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, .08);
}
.analytics-card.analytics-wide {
flex: 1;
min-width: 0;
}
.analytics-icon {
font-size: 18px;
color: var(--accent);
flex-shrink: 0;
}
.analytics-copy {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.analytics-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-faint);
}
.analytics-value {
font-size: 18px;
line-height: 1;
font-weight: 800;
color: var(--text-normal);
}
.analytics-top-list {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.analytics-top-list::-webkit-scrollbar {
display: none;
}
.analytics-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(var(--accent-rgb, 88, 101, 242), .15);
color: var(--accent);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.analytics-muted {
color: var(--text-muted);
font-size: 12px;
}
/* ────────────────────────────────────────────
Category / Folder Strip
──────────────────────────────────────────── */
@ -1544,6 +1688,12 @@ input, select {
order: -1;
}
.url-import-wrap {
max-width: 100%;
min-width: 100%;
order: -1;
}
.size-control,
.theme-selector {
display: none;
@ -1576,6 +1726,16 @@ input, select {
display: none;
}
.analytics-strip {
padding: 8px 12px;
flex-direction: column;
gap: 6px;
}
.analytics-card.analytics-wide {
width: 100%;
}
.admin-panel {
width: 96%;
padding: 16px;
@ -1612,6 +1772,10 @@ input, select {
.toolbar .tb-btn {
padding: 6px 8px;
}
.url-import-btn {
padding: 0 8px;
}
}
/* ────────────────────────────────────────────