wehub-resource-sync
8f10353f0c
CI / lint (push) Has been cancelled
CI / js-syntax (push) Successful in 10m24s
CI / deps-audit (push) Has been cancelled
CI / test (push) Failing after 24m55s
CI / sast-bandit (push) Failing after 11m13s
CI / trivy (push) Failing after 9m32s
Docker Publish / build-and-push (push) Failing after 34m3s
1610 lines
40 KiB
CSS
1610 lines
40 KiB
CSS
/* ──────────────────────────────────────────────
|
|
widgets.css — New layout + collapsible widgets + horizontal mixer
|
|
Loaded last; overrides base.css / appbar.css / mixer.css where needed.
|
|
────────────────────────────────────────────── */
|
|
|
|
/* ─── 1. App shell: 2-column grid (catalog + main) ─── */
|
|
.app {
|
|
display: grid !important;
|
|
grid-template-columns: var(--cat-w, 370px) 1fr !important;
|
|
grid-template-rows: 74px minmax(0, 1fr) !important;
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
height: 100vh !important;
|
|
min-height: 0 !important;
|
|
padding: 12px !important;
|
|
gap: 12px !important;
|
|
overflow: hidden !important;
|
|
margin: 0 !important;
|
|
transition: grid-template-columns 240ms ease;
|
|
}
|
|
.app.cat-collapsed { --cat-w: 78px; }
|
|
|
|
.app > .topbar.appbar {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.app > .catalog {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.app > #lanes {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
|
|
/* ─── 2. Main area (#lanes) ─── */
|
|
#lanes {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
gap: 10px !important;
|
|
padding-bottom: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
/* Remove the studio-dashboard layout */
|
|
}
|
|
|
|
#lanes.library-drop-target {
|
|
outline: 1px solid rgba(216, 168, 74, 0.54);
|
|
outline-offset: -4px;
|
|
}
|
|
|
|
#lanes.library-drop-target::after {
|
|
content: "Drop to load track";
|
|
position: fixed;
|
|
right: 28px;
|
|
top: 28px;
|
|
z-index: 30;
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(216, 168, 74, 0.44);
|
|
border-radius: 8px;
|
|
background: rgba(15, 23, 31, 0.92);
|
|
color: var(--gold);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
/* Suppress the old studio-dashboard nested flex that conflicts */
|
|
#lanes > .studio-dashboard {
|
|
display: contents;
|
|
}
|
|
|
|
/* ─── 3. Topbar: 2-col (brand + form) ─── */
|
|
.topbar.appbar {
|
|
min-height: 70px !important;
|
|
height: 70px !important;
|
|
gap: 0 !important;
|
|
padding: 10px 22px !important;
|
|
flex-shrink: 0;
|
|
align-items: center !important;
|
|
border-radius: 12px !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.app.appbar-collapsed .topbar.appbar {
|
|
min-height: 70px !important;
|
|
height: 70px !important;
|
|
padding: 10px 22px !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.topbar .appbar-body {
|
|
display: block !important;
|
|
width: 100%;
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
.topbar .appbar-body-inner {
|
|
display: grid !important;
|
|
grid-template-columns: 270px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 18px;
|
|
width: 100%;
|
|
}
|
|
|
|
.app-menu-btn {
|
|
width: 56px;
|
|
height: 56px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--glass-line);
|
|
border-radius: 12px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.035), transparent),
|
|
rgba(17, 27, 36, 0.78);
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.app-menu-btn:hover {
|
|
background-color: rgba(31,43,52,0.78);
|
|
}
|
|
|
|
.topbar .brand-group {
|
|
padding: 0 !important;
|
|
gap: 0;
|
|
}
|
|
|
|
.topbar .brand-row {
|
|
gap: 14px;
|
|
}
|
|
|
|
.topbar .brand {
|
|
font-size: 23px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.topbar .brand-logo {
|
|
width: 190px;
|
|
}
|
|
|
|
.topbar .beta-badge {
|
|
height: 20px;
|
|
border-radius: 5px;
|
|
padding: 0 6px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.topbar .brand-sub,
|
|
.topbar .brand-version {
|
|
display: none !important;
|
|
}
|
|
|
|
.topbar .brand-version.has-update a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: #78dc84;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.topbar .brand-version.has-update a::before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
box-shadow: 0 0 10px rgba(120, 220, 132, 0.55);
|
|
}
|
|
|
|
.topbar .brand-version.has-update a:hover {
|
|
color: #9af0a4;
|
|
}
|
|
|
|
.app.appbar-collapsed .appbar-body {
|
|
display: block !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.app.appbar-collapsed .appbar-icon-strip {
|
|
display: none !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 100% !important;
|
|
height: 40px !important;
|
|
min-height: 40px !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.app.appbar-collapsed .appbar-strip-inner {
|
|
height: 40px !important;
|
|
min-height: 40px !important;
|
|
align-items: center !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.topbar .appbar-import-panel {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 1fr) minmax(0, auto) auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topbar .import-input-row {
|
|
display: contents;
|
|
}
|
|
|
|
.topbar .appbar-import-panel .url-wrap {
|
|
min-height: 44px !important;
|
|
height: 44px !important;
|
|
padding: 0 14px !important;
|
|
border-radius: 9px !important;
|
|
}
|
|
|
|
.topbar .appbar-import-panel input[type="url"] {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.topbar .appbar-import-panel .btn-primary {
|
|
height: 44px !important;
|
|
min-width: 132px !important;
|
|
border-radius: 9px !important;
|
|
font-size: 14px !important;
|
|
padding: 0 16px !important;
|
|
order: 3;
|
|
}
|
|
|
|
.topbar .stem-choice-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(74px, 1fr));
|
|
gap: 6px;
|
|
padding: 0;
|
|
order: 2;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topbar .stem-choice-row > span { display: none; }
|
|
|
|
.topbar .stem-choice {
|
|
min-height: 44px;
|
|
height: 44px;
|
|
min-width: 0;
|
|
padding: 0 10px;
|
|
border-radius: 9px;
|
|
font-size: 11.5px;
|
|
gap: 6px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.025), transparent),
|
|
rgba(8, 15, 22, 0.38);
|
|
}
|
|
|
|
.topbar .stem-choice svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.topbar .stem-choice.other {
|
|
color: #c492ff;
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (max-width: 1250px) {
|
|
.topbar .appbar-body-inner {
|
|
grid-template-columns: 236px minmax(0, 1fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.topbar .brand {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.topbar .brand-logo {
|
|
width: 170px;
|
|
}
|
|
|
|
.topbar .beta-badge {
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.topbar .appbar-import-panel {
|
|
grid-template-columns: minmax(210px, 1fr) minmax(0, auto) auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.topbar .appbar-import-panel .url-wrap {
|
|
min-height: 40px !important;
|
|
height: 40px !important;
|
|
padding: 0 12px !important;
|
|
}
|
|
|
|
.topbar .appbar-import-panel input[type="url"] {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.topbar .stem-choice-row {
|
|
grid-template-columns: repeat(6, 42px);
|
|
gap: 5px;
|
|
}
|
|
|
|
.topbar .stem-choice {
|
|
width: 42px;
|
|
height: 40px;
|
|
min-height: 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
.topbar .stem-choice span {
|
|
display: none;
|
|
}
|
|
|
|
.topbar .stem-choice svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.topbar .appbar-import-panel .btn-primary {
|
|
height: 40px !important;
|
|
min-width: 118px !important;
|
|
padding: 0 14px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
}
|
|
|
|
/* ─── Reference-style library sidebar with icon rail ─── */
|
|
.catalog {
|
|
display: grid !important;
|
|
grid-template-columns: 72px minmax(0, 1fr);
|
|
grid-template-rows: 1fr;
|
|
align-items: stretch !important;
|
|
height: 100% !important;
|
|
min-height: 0 !important;
|
|
gap: 0 !important;
|
|
padding: 0 !important;
|
|
border-radius: 12px !important;
|
|
overflow: hidden !important;
|
|
transition: grid-template-columns 240ms ease;
|
|
}
|
|
|
|
.catalog-rail {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
padding: 18px 8px 16px;
|
|
border-right: 1px solid rgba(157,170,182,0.12);
|
|
background:
|
|
radial-gradient(circle at 100% 0%, rgba(216,168,74,0.08), transparent 16rem),
|
|
rgba(8, 17, 24, 0.42);
|
|
}
|
|
|
|
.rail-menu-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 14px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--glass-line);
|
|
border-radius: 11px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.035), transparent),
|
|
rgba(17, 27, 36, 0.78);
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.rail-menu-btn:hover {
|
|
background-color: rgba(31,43,52,0.78);
|
|
}
|
|
|
|
.rail-btn {
|
|
min-height: 58px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--ink-faint);
|
|
display: grid;
|
|
grid-template-rows: 24px auto;
|
|
place-items: center;
|
|
gap: 4px;
|
|
padding: 7px 3px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.rail-btn:hover {
|
|
color: var(--ink);
|
|
background: rgba(255,255,255,0.035);
|
|
}
|
|
|
|
.rail-btn.drop-target {
|
|
color: var(--danger);
|
|
background: rgba(232, 95, 111, 0.12);
|
|
box-shadow: inset 0 0 0 1px rgba(232, 95, 111, 0.36);
|
|
}
|
|
|
|
.rail-btn.active {
|
|
color: var(--gold);
|
|
background: rgba(216,168,74,0.08);
|
|
}
|
|
|
|
.rail-btn.active::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -7px;
|
|
top: 9px;
|
|
bottom: 9px;
|
|
width: 2px;
|
|
border-radius: 999px;
|
|
background: var(--gold);
|
|
}
|
|
|
|
.rail-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.catalog-main {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 12px 14px 14px;
|
|
}
|
|
|
|
.catalog-head {
|
|
display: none !important;
|
|
}
|
|
|
|
.catalog-search {
|
|
min-height: 40px;
|
|
padding: 0 12px !important;
|
|
border-radius: 9px !important;
|
|
}
|
|
|
|
.catalog.trash-view .catalog-search {
|
|
color: var(--ink-faint);
|
|
border-style: dashed;
|
|
}
|
|
|
|
.catalog.trash-view .new-folder-btn {
|
|
display: none !important;
|
|
}
|
|
|
|
.catalog.trash-view .cat-item {
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.trash-empty {
|
|
padding: 10px 12px !important;
|
|
}
|
|
|
|
.about-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(3, 8, 13, 0.48);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.about-backdrop.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.about-card {
|
|
width: min(400px, calc(100vw - 32px));
|
|
position: relative;
|
|
padding: 24px;
|
|
border: 1px solid var(--glass-line);
|
|
border-radius: 12px;
|
|
background: linear-gradient(180deg, rgba(28,39,48,0.98), rgba(13,21,29,0.98));
|
|
box-shadow: var(--shadow-panel);
|
|
color: var(--ink);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.about-card h2 {
|
|
margin: 0;
|
|
font-size: 26px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.about-version {
|
|
margin: 8px 0 18px;
|
|
color: var(--gold);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.about-link {
|
|
color: var(--ink);
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
text-decoration: none;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.about-link:hover {
|
|
color: var(--gold);
|
|
}
|
|
|
|
.about-close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 26px;
|
|
height: 26px;
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--ink-faint);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.about-close:hover {
|
|
background: rgba(21,31,39,0.8);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.new-folder-btn {
|
|
min-height: 40px;
|
|
padding: 0 12px !important;
|
|
border-radius: 9px !important;
|
|
}
|
|
|
|
.catalog-list {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.app.cat-collapsed .catalog {
|
|
grid-template-columns: 72px !important;
|
|
}
|
|
|
|
.catalog-main {
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.app.cat-collapsed .catalog-main {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ─── 4. File drop pill ─── */
|
|
.url-wrap { position: relative; }
|
|
|
|
.file-pill {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 6px 3px 10px;
|
|
border: 1px solid rgba(95, 188, 86, 0.45);
|
|
background: rgba(95, 188, 86, 0.08);
|
|
border-radius: 7px;
|
|
font-size: 11.5px;
|
|
color: #5fbc56;
|
|
max-width: 100%;
|
|
}
|
|
.file-pill:not(.hidden) { display: inline-flex; }
|
|
.file-pill .file-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 180px;
|
|
}
|
|
.file-pill .file-size { color: var(--ink-faint); font-size: 10.5px; }
|
|
.file-pill .file-clear {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--ink-dim);
|
|
cursor: pointer;
|
|
padding: 2px 4px;
|
|
line-height: 1;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
font-family: inherit;
|
|
}
|
|
.file-pill .file-clear:hover { background: var(--panel-2, rgba(21,31,39,0.82)); color: var(--ink); }
|
|
|
|
/* When a file is loaded, hide the text input and icon */
|
|
.url-wrap.has-file .url-prefix,
|
|
.url-wrap.has-file input[type="url"],
|
|
.url-wrap.has-file input[type="text"] { display: none; }
|
|
|
|
.url-wrap.drag-over {
|
|
border-color: rgba(216, 168, 74, 0.56) !important;
|
|
background-color: rgba(216, 168, 74, 0.04) !important;
|
|
}
|
|
|
|
/* ─── 5. Job progress: fix always-hidden CSS bug ─── */
|
|
.job:not(.hidden) {
|
|
display: block !important;
|
|
}
|
|
|
|
/* ─── 6. Grafana-style collapsible widget ─── */
|
|
.widget {
|
|
flex-shrink: 0;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--glass-line);
|
|
background: linear-gradient(180deg, rgba(28,39,48,0.82), rgba(15,23,31,0.86));
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), var(--shadow-panel);
|
|
}
|
|
|
|
.widget-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 16px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border-bottom: 1px solid var(--glass-line);
|
|
transition: background var(--t-fast, 120ms) ease;
|
|
}
|
|
.widget-head:hover { background: rgba(31,43,52,0.55); }
|
|
|
|
.widget-head .title-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.widget-head h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
}
|
|
.widget-head .chevron {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--ink-faint);
|
|
transition: transform 180ms ease;
|
|
flex-shrink: 0;
|
|
}
|
|
.widget-head .widget-hint {
|
|
color: var(--ink-faint);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.widget-body {
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
transition: grid-template-rows 220ms ease, opacity 180ms ease;
|
|
}
|
|
.widget-body > .body-inner {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.widget.collapsed .widget-body {
|
|
grid-template-rows: 0fr;
|
|
opacity: 0;
|
|
}
|
|
.widget.collapsed .widget-head {
|
|
border-bottom-color: transparent;
|
|
}
|
|
.widget.collapsed .widget-head .chevron {
|
|
transform: rotate(-90deg);
|
|
}
|
|
/* Collapsed widgets must not hold onto flex-grow or min-height */
|
|
.widget.collapsed {
|
|
flex: 0 0 auto !important;
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
/* ─── 7. Information widget: override now-playing layout ─── */
|
|
.widget .now-playing {
|
|
display: grid !important;
|
|
grid-template-columns: 82px minmax(150px, 1.15fr) minmax(145px, 1fr) repeat(3, minmax(58px, 0.55fr)) !important;
|
|
gap: 12px 16px !important;
|
|
min-height: 0 !important;
|
|
padding: 9px 16px 10px !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border-radius: 0 !important;
|
|
align-items: start !important;
|
|
}
|
|
|
|
/* Override transport.css responsive rules that break widget layout */
|
|
@media (max-width: 1100px) {
|
|
.widget .now-playing {
|
|
grid-template-columns: 72px minmax(120px, 1fr) minmax(120px, 1fr) repeat(3, minmax(50px, 0.5fr)) !important;
|
|
grid-template-areas: none !important;
|
|
gap: 9px 10px !important;
|
|
}
|
|
.widget .now-playing .key-card {
|
|
grid-column: auto !important;
|
|
grid-row: auto !important;
|
|
}
|
|
.widget .now-playing .loudness-card,
|
|
.widget .now-playing .beat-card {
|
|
grid-column: auto !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.widget .now-playing {
|
|
grid-template-columns: 72px 1fr 1fr !important;
|
|
}
|
|
}
|
|
|
|
/* np-art stays as-is inside widget */
|
|
.widget .np-art {
|
|
grid-area: unset !important;
|
|
width: 82px !important;
|
|
height: 82px !important;
|
|
align-self: center !important;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.widget .np-art {
|
|
width: 72px !important;
|
|
height: 72px !important;
|
|
}
|
|
}
|
|
|
|
/* np-info → track info column */
|
|
.widget .np-info {
|
|
grid-area: unset !important;
|
|
gap: 8px !important;
|
|
padding: 0 14px 0 12px !important;
|
|
}
|
|
|
|
.widget .np-title {
|
|
font-size: 16px !important;
|
|
line-height: 1.15 !important;
|
|
-webkit-line-clamp: 1 !important;
|
|
}
|
|
|
|
.widget .chip {
|
|
min-height: 26px !important;
|
|
padding: 3px 8px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.widget .np-play-row {
|
|
gap: 10px !important;
|
|
margin-top: 0 !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.widget .stem-energy,
|
|
.widget .analysis-card {
|
|
min-height: 82px !important;
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
.widget .stem-energy h3,
|
|
.widget .analysis-card h3 {
|
|
margin-bottom: 7px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.widget .energy-row {
|
|
grid-template-columns: 62px 1fr 32px !important;
|
|
gap: 7px !important;
|
|
margin: 2px 0 !important;
|
|
font-size: 10.5px !important;
|
|
}
|
|
.widget .energy-row[data-stem="original"] { display: none !important; }
|
|
|
|
.widget .energy-row b {
|
|
height: 8px !important;
|
|
}
|
|
|
|
.widget .analysis-card {
|
|
gap: 5px !important;
|
|
}
|
|
|
|
.widget .analysis-card strong {
|
|
font-size: 17px !important;
|
|
}
|
|
|
|
.widget .analysis-card small {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.widget .confidence-ring {
|
|
width: 46px !important;
|
|
height: 46px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.widget[data-widget="mixer"] {
|
|
}
|
|
|
|
/* ─── 8. Waveform widget: give wave-editor flex space ─── */
|
|
.widget .studio-wave-grid {
|
|
display: grid !important;
|
|
grid-template-columns: var(--header-w, 320px) 1fr !important;
|
|
gap: 0 !important;
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
.widget .stems-panel {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.widget .wave-editor {
|
|
position: relative;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.wave-loading-overlay {
|
|
position: absolute;
|
|
inset: var(--wave-widget-ruler-h, 35px) 0 0 0;
|
|
z-index: 9;
|
|
overflow: hidden;
|
|
border-top: 1px solid rgba(148, 163, 184, 0.10);
|
|
background:
|
|
linear-gradient(90deg, rgba(7, 13, 19, 0.42), rgba(14, 25, 34, 0.50), rgba(7, 13, 19, 0.42));
|
|
backdrop-filter: blur(2px);
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
transition: opacity 180ms ease;
|
|
}
|
|
|
|
.wave-loading-overlay.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.wave-loading-msg {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 16px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
color: rgba(148, 163, 184, 0.6);
|
|
letter-spacing: 0.04em;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.wave-loading-overlay.stalled .wave-loading-msg {
|
|
display: block;
|
|
}
|
|
|
|
.wave-loading-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 18% 32%, rgba(255, 64, 72, 0.10), transparent 18rem),
|
|
radial-gradient(circle at 52% 54%, rgba(216, 168, 74, 0.09), transparent 22rem),
|
|
radial-gradient(circle at 84% 42%, rgba(80, 160, 255, 0.08), transparent 18rem);
|
|
filter: blur(16px);
|
|
opacity: 0.72;
|
|
animation: waveLoadGlow 4.2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.wave-loading-lines {
|
|
position: absolute;
|
|
inset: 10px 14px 14px 14px;
|
|
display: grid;
|
|
grid-template-rows: repeat(6, 1fr);
|
|
gap: 1px;
|
|
opacity: 0.54;
|
|
}
|
|
|
|
.wave-loading-lines i {
|
|
display: block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 2px;
|
|
opacity: 0.70;
|
|
background:
|
|
linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 28%, transparent), transparent),
|
|
linear-gradient(0deg, transparent calc(50% - 1px), currentColor 50%, transparent calc(50% + 1px));
|
|
animation: waveLoadLane 2.7s ease-in-out infinite;
|
|
}
|
|
|
|
.wave-loading-lines i::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 9% 0;
|
|
background:
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
currentColor 0 3px,
|
|
transparent 3px 9px
|
|
);
|
|
opacity: 0.82;
|
|
filter: blur(0.45px);
|
|
transform-origin: center;
|
|
mask-image:
|
|
radial-gradient(ellipse 11% 48% at 12% 50%, #000 0 44%, transparent 70%),
|
|
radial-gradient(ellipse 18% 70% at 32% 50%, #000 0 48%, transparent 74%),
|
|
radial-gradient(ellipse 15% 54% at 55% 50%, #000 0 45%, transparent 72%),
|
|
radial-gradient(ellipse 21% 78% at 78% 50%, #000 0 50%, transparent 76%),
|
|
radial-gradient(ellipse 10% 42% at 94% 50%, #000 0 42%, transparent 70%);
|
|
animation: waveLoadBars 1.95s ease-in-out infinite;
|
|
}
|
|
|
|
.wave-loading-lines i::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
transform: translateX(-55%);
|
|
background:
|
|
linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
color-mix(in srgb, currentColor 10%, transparent) 38%,
|
|
rgba(255, 255, 255, 0.34) 50%,
|
|
color-mix(in srgb, currentColor 14%, transparent) 62%,
|
|
transparent 100%
|
|
);
|
|
filter: blur(9px);
|
|
animation: waveLoadTravel 1.85s cubic-bezier(0.42, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
.wave-loading-lines i:nth-child(1) { color: #a9b5c6; animation-delay: -0.05s; }
|
|
.wave-loading-lines i:nth-child(2) { color: #ff4f62; animation-delay: -0.18s; }
|
|
.wave-loading-lines i:nth-child(3) { color: #ff8b2d; animation-delay: -0.31s; }
|
|
.wave-loading-lines i:nth-child(4) { color: #ffd04d; animation-delay: -0.44s; }
|
|
.wave-loading-lines i:nth-child(5) { color: #4fd06a; animation-delay: -0.57s; }
|
|
.wave-loading-lines i:nth-child(6) { color: #9a6dff; animation-delay: -0.70s; }
|
|
|
|
.wave-loading-lines i:nth-child(1)::before { animation-delay: -0.05s; }
|
|
.wave-loading-lines i:nth-child(2)::before { animation-delay: -0.18s; }
|
|
.wave-loading-lines i:nth-child(3)::before { animation-delay: -0.31s; }
|
|
.wave-loading-lines i:nth-child(4)::before { animation-delay: -0.44s; }
|
|
.wave-loading-lines i:nth-child(5)::before { animation-delay: -0.57s; }
|
|
.wave-loading-lines i:nth-child(6)::before { animation-delay: -0.70s; }
|
|
|
|
.wave-loading-lines i:nth-child(1)::after { animation-delay: -0.05s; }
|
|
.wave-loading-lines i:nth-child(2)::after { animation-delay: -0.18s; }
|
|
.wave-loading-lines i:nth-child(3)::after { animation-delay: -0.31s; }
|
|
.wave-loading-lines i:nth-child(4)::after { animation-delay: -0.44s; }
|
|
.wave-loading-lines i:nth-child(5)::after { animation-delay: -0.57s; }
|
|
.wave-loading-lines i:nth-child(6)::after { animation-delay: -0.70s; }
|
|
|
|
@keyframes waveLoadLane {
|
|
0%, 100% { opacity: 0.44; }
|
|
50% { opacity: 0.70; }
|
|
}
|
|
|
|
@keyframes waveLoadBars {
|
|
0%, 100% {
|
|
transform: translateX(-1.2%) scaleY(0.56);
|
|
opacity: 0.54;
|
|
}
|
|
45% {
|
|
transform: translateX(1.2%) scaleY(0.95);
|
|
opacity: 0.86;
|
|
}
|
|
}
|
|
|
|
@keyframes waveLoadTravel {
|
|
from { transform: translateX(-58%); opacity: 0; }
|
|
18% { opacity: 0.78; }
|
|
72% { opacity: 0.78; }
|
|
to { transform: translateX(112%); opacity: 0; }
|
|
}
|
|
|
|
@keyframes waveLoadGlow {
|
|
from { transform: translateX(-2%) scale(1); opacity: 0.74; }
|
|
to { transform: translateX(2%) scale(1.04); opacity: 1; }
|
|
}
|
|
|
|
/* ─── 8b. Waveform widget: height + override waves.css .app:not(.is-import) rules ─── */
|
|
|
|
/* Waveform widget: natural height from WaveSurfer content.
|
|
CSS vars used by stem-list alignment rules below:
|
|
lane-h = WaveSurfer height(100px) + trackBorderColor(1px)
|
|
margin = wave-editor padding-top(6) + toolbar(30) + toolbar-margin-bottom(2)
|
|
+ wave-scroll border-top(1) + ruler(34) = 73px */
|
|
.widget[data-widget="waveform"] {
|
|
flex: 0 0 auto;
|
|
height: auto;
|
|
min-height: 0;
|
|
--wave-widget-lane-h: 101px;
|
|
--wave-widget-separator-h: 0px;
|
|
--wave-widget-editor-top-offset: 6px;
|
|
--wave-widget-toolbar-h: 32px;
|
|
--wave-widget-ruler-h: 35px;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .widget-body,
|
|
.widget[data-widget="waveform"] .widget-body > .body-inner {
|
|
min-height: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* stems-panel in old layout was a 48px overlay (grid-column:2 = same cell as wave-editor,
|
|
width:48px, pointer-events:none, margin-top:72px). Reset all of that. */
|
|
.widget .stems-panel {
|
|
grid-column: unset !important;
|
|
grid-row: unset !important;
|
|
width: unset !important;
|
|
min-height: 326px !important;
|
|
pointer-events: auto !important;
|
|
margin: 0 !important;
|
|
z-index: auto !important;
|
|
overflow: auto !important;
|
|
padding: 16px 18px !important;
|
|
border: 1px solid var(--glass-line) !important;
|
|
background: rgba(21,31,39,0.6) !important;
|
|
align-self: stretch !important;
|
|
height: auto !important;
|
|
}
|
|
.widget .stems-panel .panel-title { display: block !important; }
|
|
|
|
.widget .stem-list {
|
|
height: auto !important;
|
|
margin-top: 46px;
|
|
gap: 1px !important;
|
|
}
|
|
|
|
/* ─── Waveform: slim icon-only column (matches design's 32px icon | waveform layout) ─── */
|
|
|
|
/* Override the 2-col wave grid to use a slim 36px icon column */
|
|
.widget[data-widget="waveform"] .studio-wave-grid {
|
|
grid-template-columns: 36px 1fr !important;
|
|
min-height: var(--wave-widget-content-h) !important;
|
|
}
|
|
|
|
/* Slim the stems-panel to an icon-only strip.
|
|
padding-top mirrors original waves.css offset:
|
|
wave-editor padding(6) + toolbar(30+2) + ruler(34) = 72px */
|
|
.widget[data-widget="waveform"] .stems-panel {
|
|
width: 36px !important;
|
|
min-width: 36px !important;
|
|
min-height: 0 !important;
|
|
padding: 72px 0 0 0 !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border-radius: 0 !important;
|
|
overflow: hidden !important;
|
|
align-self: stretch !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* Hide panel title and interactive controls — M/S/monitor are in the mixer */
|
|
.widget[data-widget="waveform"] .panel-title,
|
|
.widget[data-widget="waveform"] .drag-handle,
|
|
.widget[data-widget="waveform"] .stem-mute,
|
|
.widget[data-widget="waveform"] .stem-solo,
|
|
.widget[data-widget="waveform"] .stem-monitor,
|
|
.widget[data-widget="waveform"] .mini-meter { display: none !important; }
|
|
|
|
/* stem-list fills the stems-panel content area (below the 72px offset).
|
|
flex: 1 1 0 on spans auto-distributes height — same as original non-import layout. */
|
|
.widget[data-widget="waveform"] .stem-list {
|
|
margin-top: 0 !important;
|
|
gap: 0 !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
height: 100% !important;
|
|
}
|
|
.widget[data-widget="waveform"] .stem-list span {
|
|
flex: 1 1 0 !important;
|
|
height: auto !important;
|
|
min-height: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .stem-list span.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* em contains both the SVG icon and the text label — zero font-size hides the text */
|
|
.widget[data-widget="waveform"] .stem-list em {
|
|
font-size: 0 !important;
|
|
line-height: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
.widget[data-widget="waveform"] .stem-list .stem-icon {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
}
|
|
|
|
/* ─── Waveform widget: expose WaveSurfer bar canvases ─── */
|
|
|
|
/* non-import mode hides multitrack canvases (opacity:0) and uses SVG overlays.
|
|
In the widget we want the real WaveSurfer bar rendering, so undo that. */
|
|
.widget[data-widget="waveform"] #multitrack-container {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
position: static !important;
|
|
inset: unset !important;
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
/* Allow each track div to show its WaveSurfer trackBackground color */
|
|
.widget[data-widget="waveform"] #multitrack-container > div {
|
|
background: transparent !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Remove the 48px left gutter (stems-panel is in its own column, not overlapping) */
|
|
.widget[data-widget="waveform"] .waves-column {
|
|
height: auto !important;
|
|
min-height: 0 !important;
|
|
overflow: visible !important;
|
|
padding-left: 0 !important;
|
|
--wave-gutter: 0px !important;
|
|
}
|
|
.widget[data-widget="waveform"] .waves-grid {
|
|
left: 0 !important;
|
|
}
|
|
.widget[data-widget="waveform"] .lanes-ruler {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
/* Let wave-scroll grow vertically with its content */
|
|
.widget[data-widget="waveform"] .wave-scroll {
|
|
height: calc(var(--wave-widget-ruler-h) + var(--wave-widget-track-stack-h, 394px)) !important;
|
|
overflow-y: visible !important;
|
|
border: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
.widget[data-widget="waveform"] .wave-canvas {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .wave-toolbar {
|
|
min-height: 46px !important;
|
|
height: 46px !important;
|
|
margin: 0 !important;
|
|
padding: 12px 24px 8px 0 !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .zoom-tools {
|
|
gap: 8px !important;
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .zoom-tools > svg {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .zoom-slider {
|
|
width: 104px !important;
|
|
height: 16px !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .zoom-slider::-webkit-slider-thumb {
|
|
width: 12px !important;
|
|
height: 12px !important;
|
|
margin-top: -4px !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .zoom-slider::-moz-range-thumb {
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .zoom-tools button {
|
|
min-width: 28px !important;
|
|
min-height: 28px !important;
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .zoom-tools #zoom-out,
|
|
.widget[data-widget="waveform"] .zoom-tools #zoom-in {
|
|
width: 28px !important;
|
|
font-size: 19px !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .lanes-ruler {
|
|
height: var(--wave-widget-ruler-h) !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .lanes-ruler-time {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .tick {
|
|
align-items: center !important;
|
|
border-left-color: transparent !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .tick-label {
|
|
color: rgba(156, 163, 178, 0.68) !important;
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .waves-grid .grid-line {
|
|
display: none !important;
|
|
}
|
|
|
|
.widget[data-widget="waveform"] .waves-column [style*="height: 2px"] {
|
|
background-color: rgba(148, 163, 184, 0.08) !important;
|
|
}
|
|
|
|
/* Hide SVG overlay — WaveSurfer canvas is the visual source in widget mode */
|
|
.widget[data-widget="waveform"] .stem-waveform-layer {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ─── 9. Horizontal mixer ─── */
|
|
|
|
/* Hide waveform + mixer widgets when no track is loaded */
|
|
.app.no-track .widget[data-widget="waveform"],
|
|
.app.no-track .widget[data-widget="mixer"] { display: none !important; }
|
|
|
|
/* preview-mixer-body: old layout had 2-col grid (mixer | 94px master fader).
|
|
Flatten to single block so the mixer-column fills the full width. */
|
|
.widget .preview-mixer-body {
|
|
display: block !important;
|
|
height: auto !important;
|
|
overflow: visible !important;
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
/* Mixer column: 2-up grid of rows — matches design's .mixer-grid */
|
|
.widget .mixer-column {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
column-gap: 22px !important;
|
|
row-gap: 10px !important;
|
|
padding: 14px 18px 16px !important;
|
|
width: 100% !important;
|
|
min-width: 0 !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.widget .mixer-column { grid-template-columns: 1fr !important; }
|
|
}
|
|
|
|
/* Horizontal mixer row — exact design column widths:
|
|
icon(24) | name(60) | fader(1fr) | VU(90) | val(50) | M(28) | S(28) | dl(28) */
|
|
.widget .lane-header.mx-row {
|
|
display: grid !important;
|
|
grid-template-columns: 24px 60px 1fr 90px 50px 28px 28px 28px !important;
|
|
grid-template-rows: auto !important;
|
|
gap: 10px !important;
|
|
align-items: center !important;
|
|
justify-items: stretch !important;
|
|
padding: 7px 4px !important;
|
|
border: none !important;
|
|
border-bottom: 1px solid transparent !important;
|
|
background: transparent !important;
|
|
flex-direction: unset !important;
|
|
min-height: unset !important;
|
|
height: auto !important;
|
|
width: 100% !important;
|
|
overflow: visible !important;
|
|
}
|
|
/* all borders transparent — row-gap provides the spacing */
|
|
|
|
/* Remove the old stripe */
|
|
.widget .lane-header.mx-row .lane-stripe { display: none !important; }
|
|
|
|
/* Explicitly show the download link — mixer.css sets display:none and
|
|
.app:not(.is-import) .lane-dl uses display:grid with absolute positioning.
|
|
Both must be defeated. */
|
|
.widget .lane-header.mx-row .lane-dl {
|
|
display: flex !important;
|
|
position: static !important;
|
|
left: unset !important;
|
|
right: unset !important;
|
|
bottom: unset !important;
|
|
top: unset !important;
|
|
width: 26px !important;
|
|
height: 26px !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
/* Icon — 16px to match design */
|
|
.mx-icon { display: flex; align-items: center; justify-content: center; }
|
|
.mx-icon svg { width: 16px; height: 16px; }
|
|
|
|
/* Name — 12.5px matching design */
|
|
.mx-name {
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Horizontal fader */
|
|
.lane-knob.mx-fader {
|
|
position: relative !important;
|
|
height: 20px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
cursor: ew-resize !important;
|
|
width: 100% !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
justify-self: stretch !important;
|
|
min-height: 0 !important;
|
|
grid-column: auto !important;
|
|
grid-row: auto !important;
|
|
}
|
|
.lane-knob.mx-fader::before { display: none !important; }
|
|
.lane-knob.mx-fader .lane-knob-indicator { display: none !important; }
|
|
|
|
/* Fader track: 4px height, matching design */
|
|
.mx-fader-track {
|
|
width: 100%;
|
|
height: 4px;
|
|
background: var(--line, rgba(35,42,55,1));
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
.mx-fader-fill {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: calc(var(--lane-pos, 0.5) * 100%);
|
|
border-radius: 2px;
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
}
|
|
/* Fader knob: 14px, stem-colored, translate(-50%,-50%) centers it on the fill end */
|
|
.mx-fader-knob {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(var(--lane-pos, 0.5) * 100%);
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(0,0,0,0.4);
|
|
box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
transition: left 80ms ease;
|
|
}
|
|
.lane-knob.mx-fader.dragging .mx-fader-knob { transition: none; }
|
|
.lane-knob.mx-fader.dragging { cursor: ew-resize !important; }
|
|
.lane-knob.mx-fader.disabled { opacity: 0.4; pointer-events: none; }
|
|
|
|
/* VU meter: 8px tall, design gradient (#4a8c44 → #b8a83b 65% → #d65a4a 100%) */
|
|
.lane-vu.mx-meter {
|
|
display: block !important;
|
|
height: 8px !important;
|
|
width: 100% !important;
|
|
border-radius: 2px !important;
|
|
background: var(--line-soft, #1a2030) !important;
|
|
overflow: hidden !important;
|
|
position: relative !important;
|
|
top: unset !important;
|
|
right: unset !important;
|
|
left: unset !important;
|
|
bottom: unset !important;
|
|
transform: none !important;
|
|
flex-direction: unset !important;
|
|
gap: unset !important;
|
|
padding: 0 !important;
|
|
}
|
|
.mx-meter .lane-vu-bar.mx-meter-fill {
|
|
position: absolute !important;
|
|
left: 0 !important; top: 0 !important;
|
|
height: 100% !important;
|
|
width: var(--vu-level, 0%) !important;
|
|
background: linear-gradient(90deg, #4a8c44 0%, #b8a83b 65%, #d65a4a 100%) !important;
|
|
border-radius: 2px !important;
|
|
transition: width 60ms linear !important;
|
|
}
|
|
.mx-meter .lane-vu-bar:not(.mx-meter-fill) { display: none !important; }
|
|
.lane-vu.mx-meter::before,
|
|
.lane-vu.mx-meter::after { content: none !important; }
|
|
|
|
/* Value */
|
|
.mx-val {
|
|
color: var(--ink-faint);
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* M / S / download buttons — 26px matching design */
|
|
.mx-btn {
|
|
width: 26px !important;
|
|
height: 26px !important;
|
|
border: 1px solid var(--line, #232a37) !important;
|
|
border-radius: 6px !important;
|
|
background: transparent !important;
|
|
color: var(--ink-dim) !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: 10px !important;
|
|
font-weight: 600 !important;
|
|
cursor: pointer !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
transition: background 120ms, border-color 120ms, color 120ms !important;
|
|
padding: 0 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
.mx-btn:hover { background: rgba(31,43,52,0.88) !important; border-color: rgba(157,170,182,0.38) !important; }
|
|
|
|
/* Muted: M turns red */
|
|
.lane-header.muted .lane-icon-toggle.mx-btn {
|
|
color: #e85d4f !important;
|
|
border-color: rgba(232,93,79,0.5) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.lane-icon-toggle.mx-btn.active { color: var(--ink-dim) !important; }
|
|
|
|
/* Solo active: gold */
|
|
.mx-btn.solo.active {
|
|
color: var(--gold, #d8a84a) !important;
|
|
border-color: rgba(216,168,74,0.5) !important;
|
|
background: rgba(216,168,74,0.12) !important;
|
|
}
|
|
|
|
/* Download: stem-colored — matches STEM_COLORS in constants.js */
|
|
.lane-header[data-stem="vocals"] .lane-dl.mx-btn { color: #e85f6f !important; border-color: rgba(232,95,111,0.45) !important; }
|
|
.lane-header[data-stem="drums"] .lane-dl.mx-btn { color: #e89048 !important; border-color: rgba(232,144,72,0.45) !important; }
|
|
.lane-header[data-stem="bass"] .lane-dl.mx-btn { color: #e8b848 !important; border-color: rgba(232,184,72,0.45) !important; }
|
|
.lane-header[data-stem="guitar"] .lane-dl.mx-btn { color: #88d878 !important; border-color: rgba(136,216,120,0.45) !important; }
|
|
.lane-header[data-stem="piano"] .lane-dl.mx-btn { color: #b88fe8 !important; border-color: rgba(184,143,232,0.45) !important; }
|
|
.lane-header[data-stem="other"] .lane-dl.mx-btn { color: #88a8c8 !important; border-color: rgba(136,168,200,0.45) !important; }
|
|
.lane-header[data-stem="original"] .lane-dl.mx-btn { color: #a8b0bd !important; border-color: rgba(168,176,189,0.45) !important; }
|
|
|
|
.lane-dl.mx-btn svg { width: 13px !important; height: 13px !important; }
|
|
.lane-dl.mx-btn.disabled { opacity: 0.3 !important; pointer-events: none !important; }
|
|
|
|
/* Unavailable rows are stems not produced for this extraction. Keep them
|
|
visible for orientation, but remove interaction and live meter emphasis. */
|
|
.widget .lane-header.unavailable {
|
|
opacity: 0.34;
|
|
filter: grayscale(0.85);
|
|
}
|
|
|
|
.widget .lane-header.unavailable .mx-name,
|
|
.widget .lane-header.unavailable .mx-val {
|
|
color: var(--ink-faint) !important;
|
|
}
|
|
|
|
.widget .lane-header.unavailable .mx-fader-fill,
|
|
.widget .lane-header.unavailable .mx-fader-knob,
|
|
.widget .lane-header.unavailable .mx-meter .mx-meter-fill {
|
|
background: rgba(148, 163, 184, 0.36) !important;
|
|
}
|
|
|
|
.widget .lane-header.unavailable .mx-btn,
|
|
.widget .lane-header.unavailable .lane-knob {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.widget .energy-row.unavailable {
|
|
opacity: 0.32;
|
|
filter: grayscale(0.85);
|
|
}
|
|
|
|
.widget .energy-row.unavailable b {
|
|
background: rgba(148, 163, 184, 0.14) !important;
|
|
}
|
|
|
|
.widget .energy-row.unavailable em {
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* Muted row */
|
|
.widget .lane-header.muted { opacity: 0.55; }
|
|
.widget .lane-header.muted .mx-name { text-decoration: line-through; text-decoration-thickness: 1px; }
|
|
|
|
/* ─── 10. Transport footer stays at bottom ─── */
|
|
.app:not(.is-import) .transport-footer,
|
|
.transport-footer {
|
|
flex: 0 0 96px;
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
height: 96px;
|
|
min-height: 96px;
|
|
padding: 16px 18px !important;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--glass-line);
|
|
background:
|
|
radial-gradient(circle at 58% 0%, rgba(216, 168, 74, 0.055), transparent 24rem),
|
|
linear-gradient(180deg, rgba(28, 39, 48, 0.82), rgba(15, 23, 31, 0.86));
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), var(--shadow-panel);
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
align-items: center;
|
|
justify-items: stretch;
|
|
gap: 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app:not(.is-import) .transport-footer .np-transport,
|
|
.transport-footer .np-transport {
|
|
grid-column: 2;
|
|
justify-self: center;
|
|
flex: 0 0 auto;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
align-items: center;
|
|
line-height: 1;
|
|
min-width: max-content;
|
|
}
|
|
|
|
.app:not(.is-import) .transport-footer .np-transport > span,
|
|
.transport-footer .np-transport > span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 58px;
|
|
}
|
|
|
|
.app:not(.is-import) .transport-footer .np-transport-row,
|
|
.transport-footer .np-transport-row {
|
|
align-items: center;
|
|
height: 58px;
|
|
}
|
|
|
|
.app:not(.is-import) .transport-footer .btn-transport,
|
|
.transport-footer .btn-transport {
|
|
flex: 0 0 58px;
|
|
width: 58px;
|
|
height: 58px;
|
|
min-width: 58px;
|
|
min-height: 58px;
|
|
align-self: center;
|
|
}
|
|
|
|
.app:not(.is-import) .transport-footer .footer-actions,
|
|
.transport-footer .footer-actions {
|
|
grid-column: 3;
|
|
justify-self: end;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.app:not(.is-import) .transport-footer,
|
|
.transport-footer {
|
|
flex-basis: 88px;
|
|
height: 88px;
|
|
min-height: 88px;
|
|
padding: 14px 18px !important;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
}
|
|
|
|
.app:not(.is-import) .transport-footer .footer-actions,
|
|
.transport-footer .footer-actions {
|
|
display: none;
|
|
}
|
|
|
|
.app:not(.is-import) .transport-footer .np-transport,
|
|
.transport-footer .np-transport {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* ─── 11. Responsive: compact layout below 960px ─── */
|
|
@media (max-width: 960px) {
|
|
.app {
|
|
grid-template-columns: var(--cat-w, 240px) 1fr !important;
|
|
}
|
|
.topbar .stem-choice span { display: none; }
|
|
.widget .lane-header.mx-row {
|
|
/* drop val col at narrow width: icon(24) name(55) fader(1fr) VU(70) M S dl */
|
|
grid-template-columns: 24px 55px 1fr 70px 26px 26px 26px !important;
|
|
}
|
|
.mx-val { display: none; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.app {
|
|
grid-template-columns: 52px 1fr !important;
|
|
--cat-w: 52px;
|
|
}
|
|
}
|