/* ============================================================================
Magic Sequencer — style
Dark / synthwave / IDM. Potard central, rings concentriques, accents cyan.
========================================================================== */
:root {
/* Palette */
--bg: #08080c;
--bg-elev: #12121a;
--bg-elev-2: #1a1a26;
--border: #1e1e2a;
--text: #e0e0f0;
--text-dim: #5a5a70;
--accent: #00f0ff;
--accent-dim: #005a66;
--magenta: #ff3aa5;
--magenta-dim:#6a1a4a;
/* Largeurs des 2 colonnes latérales — exposées ici (pas sur #app) pour
que le pre-master mixer modal (appended au body) puisse les lire. */
--col-left-w: 260px;
--col-right-w: 340px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
background:
radial-gradient(ellipse at 50% 40%, #14141f 0%, var(--bg) 70%),
var(--bg);
color: var(--text);
font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Consolas', monospace;
font-size: 13px;
letter-spacing: 0.04em;
overflow: hidden; /* Tout tient dans un écran — pas de scroll */
user-select: none;
}
#app {
display: grid;
/* Layout 3-col pleine hauteur : kit-browser | center-col | right-rack.
Kit-browser élargi à 260px pour accueillir le SEQ·NOTES sidebar-docked. */
grid-template-columns: var(--col-left-w) 1fr var(--col-right-w);
height: 100vh; /* Fixé à un viewport */
padding: 16px 20px;
gap: 12px;
/* Variables exposées pour positionner le pre-master mixer modal sans
chevaucher la colonne LFOs (LFO drag possible pendant l'ouverture). */
--col-left-w: 260px;
--col-right-w: 340px;
transition:
grid-template-columns 280ms cubic-bezier(0.65, 0.05, 0.36, 1),
padding-left 280ms cubic-bezier(0.65, 0.05, 0.36, 1),
padding-right 280ms cubic-bezier(0.65, 0.05, 0.36, 1);
}
/* Quand on contracte : retarde le shrink de la colonne pour que le contenu
slide à gauche avant que la place se referme. À l'expand, no delay → la
colonne s'élargit immédiatement pour faire room au contenu qui glisse in. */
#app.collapsing-left {
transition:
grid-template-columns 460ms cubic-bezier(0.65, 0.05, 0.36, 1) 580ms,
padding-left 460ms cubic-bezier(0.65, 0.05, 0.36, 1) 580ms;
}
/* État collapsed — la colonne gauche se réduit fortement (icon-only). */
#app.left-collapsed {
--col-left-w: 56px;
/* Réduit le padding-left du page-level pour que la sidebar colle
au bord gauche → plus d'espace mort entre l'écran et la col. */
padding-left: 0;
}
/* Collapsed à droite : FX knob big + chips FX + LFOs courbes + master VU/mixer */
#app.right-collapsed {
--col-right-w: 88px;
padding-right: 0;
}
/* Right collapse : rapide, sans delay → la col se ferme tout de suite et
les FX chips se replacent à leur taille d'origine (pas de resize). */
#app.collapsing-right {
transition:
grid-template-columns 260ms cubic-bezier(0.65, 0.05, 0.36, 1),
padding-right 260ms cubic-bezier(0.65, 0.05, 0.36, 1);
}
/* ============================================================
PRE-MASTER MIXER MODAL
============================================================ */
.master-mixer-modal[hidden] { display: none; }
.master-mixer-modal {
position: fixed;
/* Couvre uniquement la zone CENTRALE — laisse les colonnes left/right
visibles & interactives (LFO drag depuis la stack droite). */
top: 16px;
left: calc(20px + var(--col-left-w) + 12px);
right: calc(20px + var(--col-right-w) + 12px);
bottom: 16px;
z-index: 9999;
pointer-events: none; /* le panel re-active pointer-events; backdrop aussi */
}
.master-mixer-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 5, 14, 0.65);
backdrop-filter: blur(4px);
pointer-events: auto;
animation: mm-backdrop-fade 200ms ease;
}
@keyframes mm-backdrop-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.master-mixer-panel {
position: absolute;
inset: 0;
background: rgba(14, 10, 22, 0.96);
border: 1px solid #6a4a8a;
border-radius: 6px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6),
0 0 24px rgba(176, 122, 208, 0.25);
display: flex;
flex-direction: column;
pointer-events: auto;
animation: mm-panel-slide 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
@keyframes mm-panel-slide {
from { transform: translateY(20px) scale(0.985); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.master-mixer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid #2a2a3a;
background: linear-gradient(180deg, rgba(176, 122, 208, 0.08), transparent);
}
.master-mixer-title {
font-family: inherit;
font-size: 12px;
letter-spacing: 0.35em;
font-weight: 700;
color: #d8a8e8;
text-shadow: 0 0 8px rgba(176, 122, 208, 0.5);
}
.master-mixer-close {
background: transparent;
border: 1px solid #6a4a8a;
color: #b07ad0;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1;
width: 24px;
height: 24px;
border-radius: 3px;
cursor: pointer;
transition: all 120ms ease;
}
.master-mixer-close:hover {
background: rgba(176, 122, 208, 0.18);
color: #fff;
border-color: #d8a8e8;
box-shadow: 0 0 8px rgba(176, 122, 208, 0.5);
}
/* View switcher (PLANETS / CONSOLE / MATRIX) au centre du header */
.master-mixer-views {
display: flex;
gap: 4px;
margin: 0 auto;
}
.master-mixer-view-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text-dim);
font-family: inherit;
font-size: 9px;
letter-spacing: 0.25em;
font-weight: 700;
padding: 6px 12px;
border-radius: 3px;
cursor: pointer;
transition: all 120ms ease;
}
.master-mixer-view-btn:hover { border-color: var(--accent-dim); color: var(--accent-dim); }
.master-mixer-view-btn.active {
background: rgba(0, 240, 255, 0.16);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
}
.master-mixer-body {
flex: 1;
min-width: 0;
overflow-y: auto;
overflow-x: hidden; /* contraint la largeur du body → enfants doivent scroller eux-mêmes */
padding: 12px 14px 16px;
display: flex;
flex-direction: column;
gap: 14px;
box-sizing: border-box;
}
/* MASTER section title (gardé pour la section master-bus dans detail panel) */
.mm-section { display: flex; flex-direction: column; gap: 4px; }
.mm-section-title {
font-size: 9px;
letter-spacing: 0.3em;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
padding: 4px 0;
border-bottom: 1px solid #2a2a3a;
margin-bottom: 2px;
}
/* ============================================================
VISUALIZER — Canvas 2D audio-réactif (replace solar planets)
============================================================ */
.viz-wrap {
display: grid;
grid-template-columns: 1fr 240px;
gap: 12px;
height: 100%;
min-height: 0;
}
.viz-canvas-host {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
background: radial-gradient(circle at center, #0a0814 0%, #04020c 100%);
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--border);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.viz-canvas-host.viz-drag-over {
border-color: #b0a0e0;
box-shadow: inset 0 0 24px rgba(176, 160, 224, 0.4);
}
.viz-drop-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
font-size: 11px;
letter-spacing: 0.25em;
color: rgba(176, 160, 224, 0.65);
opacity: 0;
transition: opacity 140ms ease;
}
.viz-canvas-host.viz-drag-over .viz-drop-hint { opacity: 1; }
.viz-canvas {
display: block;
width: 100%;
height: 100%;
}
.viz-controls {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
background: rgba(12, 12, 20, 0.85);
border: 1px solid var(--border);
border-radius: 4px;
overflow-y: auto;
min-height: 0;
}
.viz-controls-header {
font-size: 10px;
letter-spacing: 0.3em;
font-weight: 700;
color: #b0a0e0;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.viz-modes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
}
.viz-modes-hint {
font-size: 7px;
letter-spacing: 0.15em;
color: rgba(176, 160, 224, 0.4);
text-align: center;
margin-top: 2px;
font-style: italic;
}
.viz-mode-pill {
background: transparent;
border: 1px solid rgba(176, 160, 224, 0.3);
color: rgba(176, 160, 224, 0.6);
font-family: inherit;
font-size: 8px;
letter-spacing: 0.12em;
font-weight: 700;
padding: 5px 0;
border-radius: 2px;
cursor: pointer;
transition: all 100ms ease;
}
.viz-mode-pill:hover {
border-color: #b0a0e0;
color: #b0a0e0;
}
.viz-mode-pill.active {
background: linear-gradient(180deg, rgba(176, 160, 224, 0.35), rgba(176, 160, 224, 0.18));
border-color: #b0a0e0;
color: #fff;
box-shadow: 0 0 8px rgba(176, 160, 224, 0.5), inset 0 0 4px rgba(176, 160, 224, 0.4);
}
.viz-sliders {
display: flex;
flex-direction: column;
gap: 4px;
}
.viz-slider-row {
display: grid;
grid-template-columns: 48px 1fr;
align-items: center;
gap: 6px;
}
.viz-slider-label {
font-size: 8px;
letter-spacing: 0.18em;
font-weight: 700;
color: rgba(176, 160, 224, 0.85);
}
.viz-slider { height: 14px; }
/* Quand un LFO est assigné à un slider viz, son fill change de couleur */
.viz-slider.viz-slider-lfo .fill {
background: linear-gradient(90deg, #ff7ad0, #b0a0e0) !important;
box-shadow: 0 0 4px rgba(255, 122, 208, 0.5);
}
.viz-section-label {
font-size: 8px;
letter-spacing: 0.25em;
font-weight: 700;
color: rgba(176, 160, 224, 0.5);
margin-top: 4px;
padding-bottom: 2px;
}
.viz-ws-pills {
display: flex;
flex-wrap: wrap;
gap: 3px;
}
.viz-ws-pill {
flex: 1 1 auto;
background: transparent;
border: 1px solid rgba(176, 160, 224, 0.25);
color: rgba(176, 160, 224, 0.55);
font-family: inherit;
font-size: 8px;
letter-spacing: 0.12em;
font-weight: 700;
padding: 4px 6px;
border-radius: 2px;
cursor: pointer;
transition: all 100ms ease;
}
.viz-ws-pill:hover { border-color: #b0a0e0; color: #b0a0e0; }
.viz-ws-pill.active {
background: rgba(176, 160, 224, 0.22);
border-color: #b0a0e0;
color: #fff;
box-shadow: 0 0 6px rgba(176, 160, 224, 0.4);
}
.viz-image-zone {
display: flex;
gap: 4px;
}
.viz-image-btn {
flex: 1;
background: transparent;
border: 1px dashed rgba(176, 160, 224, 0.45);
color: rgba(176, 160, 224, 0.85);
font-family: inherit;
font-size: 9px;
letter-spacing: 0.18em;
font-weight: 700;
padding: 6px 8px;
border-radius: 3px;
cursor: pointer;
transition: all 100ms ease;
}
.viz-image-btn:hover {
border-color: #b0a0e0;
background: rgba(176, 160, 224, 0.1);
color: #fff;
}
.viz-image-btn.viz-image-clear {
flex: 0 0 28px;
color: rgba(255, 80, 80, 0.85);
border-color: rgba(255, 80, 80, 0.45);
padding: 6px 4px;
}
.viz-image-btn.viz-image-clear:hover {
background: rgba(255, 80, 80, 0.12);
border-color: #ff5050;
}
.viz-image-btn.viz-image-reset {
flex: 0 0 auto;
color: rgba(255, 168, 74, 0.85);
border-color: rgba(255, 168, 74, 0.45);
border-style: solid;
}
.viz-switch-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
align-items: center;
}
.viz-switch-pills {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
}
.viz-switch-pill {
background: transparent;
border: 1px solid rgba(176, 160, 224, 0.3);
color: rgba(176, 160, 224, 0.6);
font-family: inherit;
font-size: 8px;
letter-spacing: 0.12em;
font-weight: 700;
padding: 4px 0;
border-radius: 2px;
cursor: pointer;
}
.viz-switch-pill:hover { border-color: #b0a0e0; color: #b0a0e0; }
.viz-switch-pill.active {
background: rgba(176, 160, 224, 0.25);
border-color: #b0a0e0;
color: #fff;
box-shadow: 0 0 6px rgba(176, 160, 224, 0.4);
}
.viz-switch-info {
font-size: 8px;
letter-spacing: 0.15em;
color: rgba(176, 160, 224, 0.7);
font-variant-numeric: tabular-nums;
min-width: 36px;
text-align: right;
}
.viz-layout-pills {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.viz-layout-pill {
background: transparent;
border: 1px solid rgba(95, 192, 128, 0.3);
color: rgba(95, 192, 128, 0.65);
font-family: inherit;
font-size: 8px;
letter-spacing: 0.12em;
font-weight: 700;
padding: 4px 0;
border-radius: 2px;
cursor: pointer;
}
.viz-layout-pill:hover { border-color: #5fc080; color: #5fc080; }
.viz-layout-pill.active {
background: rgba(95, 192, 128, 0.25);
border-color: #5fc080;
color: #fff;
box-shadow: 0 0 6px rgba(95, 192, 128, 0.4);
}
/* Chance sliders : couleur jaune/orange (dice / random) */
.viz-chance-sliders .viz-slider .fill {
background: linear-gradient(90deg, rgba(255, 168, 74, 0.85), rgba(224, 192, 80, 0.85)) !important;
}
.viz-chance-sliders .viz-slider-label {
color: rgba(255, 168, 74, 0.85);
}
.viz-chance-randomize-btn {
width: 100%;
background: rgba(255, 168, 74, 0.12) !important;
border: 1px dashed #ffa84a !important;
color: #ffa84a !important;
font-size: 9px;
letter-spacing: 0.25em;
}
.viz-chance-randomize-btn:hover {
background: rgba(255, 168, 74, 0.25) !important;
color: #fff !important;
}
.viz-image-btn.viz-image-reset:hover {
background: rgba(255, 168, 74, 0.12);
border-color: #ffa84a;
}
.viz-mirror-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.viz-mirror-btn {
background: transparent;
border: 1px solid rgba(176, 160, 224, 0.3);
color: rgba(176, 160, 224, 0.65);
font-family: inherit;
font-size: 9px;
letter-spacing: 0.18em;
font-weight: 700;
padding: 5px 0;
border-radius: 2px;
cursor: pointer;
transition: all 100ms ease;
}
.viz-mirror-btn:hover { border-color: #b0a0e0; color: #b0a0e0; }
.viz-mirror-btn.active {
background: rgba(176, 160, 224, 0.25);
border-color: #b0a0e0;
color: #fff;
box-shadow: 0 0 6px rgba(176, 160, 224, 0.4);
}
.viz-blend-pills {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
}
.viz-blend-pill {
background: transparent;
border: 1px solid rgba(176, 160, 224, 0.25);
color: rgba(176, 160, 224, 0.55);
font-family: inherit;
font-size: 7px;
letter-spacing: 0.1em;
font-weight: 700;
padding: 4px 0;
border-radius: 2px;
cursor: pointer;
transition: all 100ms ease;
}
.viz-blend-pill:hover { border-color: #b0a0e0; color: #b0a0e0; }
.viz-blend-pill.active {
background: rgba(176, 160, 224, 0.25);
border-color: #b0a0e0;
color: #fff;
box-shadow: 0 0 6px rgba(176, 160, 224, 0.4);
}
/* Cursor sur le canvas en mode IMAGE pour signaler le drag */
.viz-canvas-host { cursor: default; }
.viz-canvas-host:has(canvas) { cursor: default; }
.viz-controls-hint {
font-size: 8px;
letter-spacing: 0.15em;
color: rgba(176, 160, 224, 0.4);
text-align: center;
font-style: italic;
margin-top: auto;
padding-top: 6px;
}
/* ============================================================
SOLAR SYSTEM MIXER (legacy, sub-renderers still used by console)
============================================================ */
.solar-wrap {
display: grid;
grid-template-columns: 1fr 240px;
gap: 12px;
height: 100%;
min-height: 0;
}
.solar-svg {
width: 100%;
height: 100%;
background: radial-gradient(circle at center, #0a0814 0%, #04020c 100%);
border-radius: 4px;
}
.solar-star { pointer-events: none; }
.orbit-ring {
fill: none;
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 1;
stroke-dasharray: 2 4;
}
.solar-sun {
cursor: pointer;
transition: transform 80ms ease-out;
}
.sun-halo {
fill: #ffd84a;
opacity: 0.18;
filter: blur(8px);
}
.sun-core { filter: url(#solar-glow); }
.sun-label {
fill: #3a2300;
font-family: inherit;
font-size: 16px;
font-weight: 900;
text-anchor: middle;
pointer-events: none;
letter-spacing: 0.08em;
}
.solar-sun:hover .sun-halo { opacity: 0.34; }
.solar-planet {
cursor: pointer;
transition: opacity 220ms ease;
}
.planet-body { filter: url(#solar-glow); transition: r 60ms ease-out; }
.planet-halo {
stroke-width: 1;
pointer-events: none;
transition: r 60ms ease-out, opacity 220ms ease;
}
.planet-label {
fill: #fff;
font-family: inherit;
font-size: 7px;
font-weight: 700;
letter-spacing: 0.08em;
text-anchor: middle;
pointer-events: none;
}
.solar-planet.focused .planet-body { filter: url(#solar-glow) brightness(1.4); }
.solar-planet.focused .planet-halo { stroke-width: 2; opacity: 1 !important; }
.solar-planet.dimmed { opacity: 0.22; }
.solar-planet:hover .planet-body { filter: url(#solar-glow) brightness(1.2); }
.planet-moon {
pointer-events: none;
filter: drop-shadow(0 0 2px currentColor);
}
/* DETAIL PANEL (côté droit du système) */
.solar-detail {
background: rgba(14, 10, 22, 0.6);
border: 1px solid #2a2a3a;
border-radius: 4px;
padding: 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.solar-detail-hint {
color: var(--text-dim);
font-size: 9px;
letter-spacing: 0.18em;
text-align: center;
padding: 20px 8px;
font-style: italic;
}
.solar-detail-title {
font-size: 12px;
letter-spacing: 0.3em;
font-weight: 700;
color: var(--accent);
text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
padding-bottom: 6px;
border-bottom: 1px solid #2a2a3a;
}
.solar-detail-subtitle {
font-size: 8px;
letter-spacing: 0.25em;
color: var(--text-dim);
font-weight: 700;
padding: 6px 0 2px;
}
.solar-detail-row {
display: grid;
grid-template-columns: 60px 1fr 60px;
gap: 8px;
align-items: center;
}
.solar-detail-label {
font-size: 9px;
letter-spacing: 0.18em;
font-weight: 700;
color: var(--text-dim);
}
.solar-vol-slider { height: 16px; }
.solar-mute-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text-dim);
font-family: inherit;
font-size: 8px;
letter-spacing: 0.15em;
font-weight: 700;
padding: 4px 6px;
border-radius: 2px;
cursor: pointer;
transition: all 120ms ease;
}
.solar-mute-btn:hover { border-color: var(--magenta-dim); color: var(--magenta-dim); }
.solar-mute-btn.active {
background: rgba(255, 58, 165, 0.18);
border-color: var(--magenta);
color: var(--magenta);
}
.solar-fx-row {
display: grid;
grid-template-columns: 12px 50px 1fr;
gap: 6px;
align-items: center;
padding: 3px 0;
}
.solar-fx-dot {
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 6px currentColor;
}
.solar-fx-name {
font-size: 9px;
letter-spacing: 0.15em;
font-weight: 700;
color: var(--text);
}
.solar-fx-chance { height: 12px; }
/* ============================================================
CONSOLE VIEW — analog mixing console aesthetic
============================================================ */
.console-wrap {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
min-height: 0;
min-width: 0;
width: 100%;
padding: 10px;
background: var(--bg);
border-radius: 4px;
overflow: hidden; /* contraint horizontalement → enfants peuvent scroll */
box-sizing: border-box;
}
.console-strips-area {
flex: 1;
min-height: 0;
min-width: 0;
/* PAS width:0 (kill l'élément dans flex column où cross-axis ne grow pas).
align-self: stretch (défaut) suffit ; parent console-wrap a overflow:hidden
pour contraindre la largeur, et nous on scroll horizontalement à l'intérieur. */
align-self: stretch;
display: flex;
gap: 4px;
overflow-x: scroll; /* SCROLL forcé → scrollbar toujours visible */
overflow-y: hidden;
padding: 4px 2px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border);
border-radius: 3px;
box-sizing: border-box;
}
/* Scrollbar custom : plus visible et "touch friendly" pour la console mixer */
.console-strips-area::-webkit-scrollbar { height: 10px; }
.console-strips-area::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
}
.console-strips-area::-webkit-scrollbar-thumb {
background: rgba(176, 122, 208, 0.5);
border-radius: 4px;
border: 1px solid rgba(176, 122, 208, 0.3);
}
.console-strips-area::-webkit-scrollbar-thumb:hover {
background: rgba(176, 122, 208, 0.8);
}
.console-premaster-row {
flex: 0 0 auto;
display: flex;
gap: 8px;
align-items: stretch;
min-height: 140px;
max-height: 220px;
}
/* Pre-master modules : look identique aux bass-box / poly-box du site */
.premaster-module {
display: flex;
flex-direction: column;
background: rgba(12, 12, 20, 0.85);
border: 1px solid var(--border);
border-top: 2px solid currentColor;
border-radius: 4px;
min-width: 180px;
transition: opacity 140ms ease;
color: var(--text-dim);
}
.premaster-module.disabled { opacity: 0.45; }
.premaster-module.premaster-master {
border-top-color: #ffd84a;
min-width: 380px;
flex: 2;
color: #ffd84a;
}
.premaster-module.premaster-tape {
border-top-color: #ff7ad0;
flex: 1;
color: #ff7ad0;
}
.premaster-module.premaster-future {
border-top-color: var(--border);
flex: 1;
opacity: 0.55;
border-style: dashed;
color: var(--text-dim);
}
.premaster-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 8px;
border-bottom: 1px solid var(--border);
}
.premaster-name {
font-size: 9px;
letter-spacing: 0.3em;
font-weight: 700;
color: currentColor;
}
.premaster-on {
background: transparent;
border: 1px solid var(--border);
color: var(--text-dim);
font-family: inherit;
font-size: 8px;
letter-spacing: 0.18em;
font-weight: 700;
padding: 3px 8px;
border-radius: 2px;
cursor: pointer;
transition: all 120ms ease;
}
.premaster-on.always-on {
background: rgba(255, 216, 74, 0.15);
border-color: #ffd84a;
color: #ffd84a;
cursor: default;
}
/* Master toggle ON : highlighted yellow (color du master bus) */
.premaster-master .premaster-on.active {
background: rgba(255, 216, 74, 0.18);
border-color: #ffd84a;
color: #ffd84a;
box-shadow: 0 0 8px rgba(255, 216, 74, 0.35);
}
.premaster-master .premaster-on:not(.active) {
background: rgba(255, 80, 80, 0.12);
border-color: #ff5050;
color: #ff5050;
box-shadow: 0 0 8px rgba(255, 80, 80, 0.35);
}
.premaster-on:hover:not(.always-on) {
border-color: var(--accent-dim);
color: var(--accent-dim);
}
.premaster-module:not(.disabled) .premaster-on:not(.always-on) {
background: rgba(0, 240, 255, 0.14);
border-color: var(--accent);
color: var(--accent);
}
.premaster-body {
flex: 1;
padding: 8px;
overflow-y: auto;
min-height: 0;
}
.premaster-hint {
color: var(--text-dim);
font-size: 9px;
letter-spacing: 0.2em;
font-style: italic;
text-align: center;
padding: 12px 4px;
opacity: 0.7;
}
/* Le master section dans le premaster-master : grille 2 colonnes des sliders */
.premaster-master .mm-section-master {
background: transparent;
border-left: none;
padding: 0;
margin-left: 0;
width: auto;
}
.premaster-master .mm-section-master .mm-section-title { display: none; }
.premaster-master .master-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
gap: 4px;
}
/* ============================================================================
TAPE master FX UI : pills (STUDER/AMPEX/CRUSH) + horizontal sliders
============================================================================ */
.premaster-tape .premaster-on.active {
background: rgba(255, 122, 208, 0.18);
border-color: #ff7ad0;
color: #ff7ad0;
box-shadow: 0 0 8px rgba(255, 122, 208, 0.35);
}
.premaster-tape .premaster-on:not(.active) {
background: rgba(255, 80, 80, 0.08);
border-color: rgba(255, 80, 80, 0.5);
color: rgba(255, 80, 80, 0.85);
}
.premaster-tape .premaster-body {
padding: 6px;
display: flex;
flex-direction: column;
gap: 6px;
}
.tape-type-row {
display: flex;
gap: 3px;
justify-content: space-between;
}
.tape-type-pill {
flex: 1;
background: transparent;
border: 1px solid rgba(255, 122, 208, 0.35);
color: rgba(255, 122, 208, 0.6);
font-family: inherit;
font-size: 8px;
letter-spacing: 0.18em;
font-weight: 700;
padding: 4px 0;
border-radius: 2px;
cursor: pointer;
transition: all 100ms ease;
}
.tape-type-pill:hover {
border-color: #ff7ad0;
color: #ff7ad0;
}
.tape-type-pill.active {
background: linear-gradient(180deg, rgba(255, 122, 208, 0.35), rgba(255, 122, 208, 0.18));
border-color: #ff7ad0;
color: #fff;
box-shadow: 0 0 8px rgba(255, 122, 208, 0.5), inset 0 0 4px rgba(255, 122, 208, 0.4);
}
.tape-sliders {
display: flex;
flex-direction: column;
gap: 3px;
}
.tape-slider {
display: grid;
grid-template-columns: 48px 1fr 26px;
align-items: center;
gap: 6px;
}
.tape-slider-label {
font-size: 8px;
letter-spacing: 0.18em;
font-weight: 700;
color: rgba(255, 122, 208, 0.85);
}
.tape-slider input[type=range] {
-webkit-appearance: none;
appearance: none;
background: transparent;
width: 100%;
height: 14px;
cursor: pointer;
}
.tape-slider input[type=range]::-webkit-slider-runnable-track {
height: 3px;
background: linear-gradient(90deg, rgba(255, 122, 208, 0.5), rgba(255, 122, 208, 0.15));
border-radius: 2px;
}
.tape-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
margin-top: -3.5px;
background: #ff7ad0;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255, 122, 208, 0.7);
cursor: pointer;
}
.tape-slider input[type=range]::-moz-range-track {
height: 3px;
background: rgba(255, 122, 208, 0.35);
border-radius: 2px;
}
.tape-slider input[type=range]::-moz-range-thumb {
width: 10px;
height: 10px;
background: #ff7ad0;
border: none;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255, 122, 208, 0.7);
cursor: pointer;
}
.tape-slider-val {
font-size: 9px;
font-variant-numeric: tabular-nums;
color: rgba(255, 122, 208, 0.9);
text-align: right;
}
.premaster-tape.disabled .tape-type-pill,
.premaster-tape.disabled .tape-slider input[type=range] {
pointer-events: none;
}
.console-strip {
display: flex;
flex-direction: column;
align-items: stretch;
width: 78px;
flex-shrink: 0;
padding: 6px 4px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-top: 2px solid currentColor;
border-radius: 3px;
gap: 6px;
position: relative;
}
.console-strip.kind-lane { color: #5fc080; }
.console-strip.kind-mono { color: #00f0ff; }
.console-strip.kind-poly { color: #ff7ad0; }
.console-strip.kind-slicer { color: #ffa84a; }
.console-strip.kind-grain { color: #5fc0d8; }
.console-strip.kind-fm { color: #ff8a3a; }
.console-strip.kind-bouncer { color: #b07ad0; }
.console-strip.kind-ext { color: #ffa84a; }
/* Console strip = drop target pour FX chips depuis la palette droite */
.console-strip.drag-over-fx {
background: rgba(255, 168, 74, 0.10);
box-shadow: inset 0 0 0 2px #ffa84a, 0 0 12px rgba(255, 168, 74, 0.35);
transition: background 80ms ease, box-shadow 80ms ease;
}
.console-name {
font-size: 8px;
letter-spacing: 0.22em;
font-weight: 700;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 0 4px;
border-bottom: 1px solid var(--border);
color: currentColor;
}
/* GAIN — pre-fader input trim (0..2× = -∞..+6dB), affiché en dB */
.console-gain {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 3px 0 4px;
border-bottom: 1px solid var(--border);
}
.console-gain-label {
font-size: 7px;
letter-spacing: 0.2em;
font-weight: 700;
color: rgba(255, 255, 255, 0.45);
}
.console-gain-slider {
width: calc(100% - 6px);
height: 12px;
position: relative;
background: rgba(10, 10, 16, 0.7);
border: 1px solid var(--border);
border-radius: 2px;
cursor: ew-resize;
overflow: hidden;
}
.console-gain-slider .fill {
position: absolute;
inset: 0;
width: 50%;
background: linear-gradient(90deg, rgba(95, 192, 128, 0.6), rgba(255, 216, 74, 0.6) 50%, rgba(255, 80, 80, 0.6));
pointer-events: none;
}
.console-gain-slider .label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.console-gain-slider .val {
font-size: 7px;
font-weight: 700;
color: #fff;
text-shadow: 0 0 2px #000;
}
/* EQ KNOBS — 3 bandes par strip (HI / MID / LO) */
.console-eq {
display: flex;
flex-direction: column;
gap: 3px;
padding: 4px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg);
border-radius: 2px;
}
.eq-knob {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
cursor: ns-resize;
user-select: none;
}
.eq-knob-dial {
width: 26px;
height: 26px;
}
.eq-knob-bg {
fill: var(--bg-elev);
stroke: var(--border);
stroke-width: 1;
}
.eq-knob-arc {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
filter: drop-shadow(0 0 3px currentColor);
}
.eq-knob-pointer {
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
transform-origin: 0 0;
transform: rotate(var(--ang, 0deg));
opacity: 0.95;
}
.eq-knob:hover .eq-knob-arc { stroke-width: 2.5; }
.eq-knob:hover .eq-knob-bg { stroke: currentColor; }
.eq-knob-label {
font-size: 7px;
letter-spacing: 0.2em;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
}
.eq-knob:hover .eq-knob-label { color: currentColor; }
/* Fader-rail = un SEUL rail avec VU et handle superposés (style lane-VU) */
.console-fader {
flex: 1;
width: 22px;
align-self: center;
min-height: 140px;
background: rgba(12, 12, 20, 0.85);
border: 1px solid var(--border);
border-radius: 3px;
position: relative;
overflow: hidden;
cursor: ns-resize;
}
.console-vu-fill {
position: absolute;
inset: 0;
--vu-level: 0;
background: linear-gradient(to top,
#2a8a4a 0%, #5fc080 50%,
#ffd84a 75%, #ff8a3a 88%,
#ff3030 95%);
clip-path: inset(calc((100 - var(--vu-level)) * 1%) 0 0 0);
transition: clip-path 60ms ease-out;
pointer-events: none;
}
.console-fader-handle {
position: absolute;
left: -2px;
right: -2px;
height: 4px;
background: currentColor;
border-radius: 1px;
box-shadow: 0 0 6px currentColor;
bottom: 50%;
pointer-events: none;
z-index: 2;
}
.console-fader .label { display: none; }
.console-fader:hover { border-color: currentColor; }
.console-vol-num {
font-size: 9px;
font-weight: 700;
text-align: center;
color: var(--text-dim);
padding: 2px 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 2px;
letter-spacing: 0.08em;
}
/* Bouton mute aligné sur le style site (btn-mini) */
.console-mute {
background: transparent;
border: 1px solid var(--border);
color: var(--text-dim);
font-family: inherit;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
padding: 4px 0;
border-radius: 2px;
cursor: pointer;
transition: all 120ms ease;
}
.console-mute:hover { border-color: var(--magenta-dim); color: var(--magenta-dim); }
.console-mute.active {
background: rgba(255, 58, 165, 0.16);
border-color: var(--magenta);
color: var(--magenta);
box-shadow: 0 0 6px rgba(255, 58, 165, 0.35);
}
/* SOLO button (sous le mute) — jaune pour distinguer du mute rose */
.console-solo {
background: transparent;
border: 1px solid var(--border);
color: var(--text-dim);
font-family: inherit;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
padding: 4px 0;
border-radius: 2px;
cursor: pointer;
transition: all 120ms ease;
margin-top: 3px;
}
.console-solo:hover { border-color: #ffd84a; color: #ffd84a; }
.console-solo.active {
background: rgba(255, 216, 74, 0.18);
border-color: #ffd84a;
color: #ffd84a;
box-shadow: 0 0 6px rgba(255, 216, 74, 0.4);
}
.console-fx-section {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 2px;
padding: 4px 3px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 2px;
}
.console-fx-title {
font-size: 7px;
letter-spacing: 0.25em;
font-weight: 700;
color: var(--text-dim);
text-align: center;
padding: 1px 0 3px;
}
.console-fx {
display: flex;
flex-direction: column;
gap: 2px;
}
.console-fx-empty {
color: var(--text-dim);
font-size: 7px;
letter-spacing: 0.18em;
text-align: center;
padding: 3px 0;
font-style: italic;
opacity: 0.5;
}
.console-fx-chip {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 2px;
padding: 2px 4px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid currentColor;
border-radius: 2px;
overflow: hidden;
z-index: 1;
cursor: context-menu;
transition: background 120ms ease, transform 120ms ease;
}
.console-fx-chip:hover {
background: rgba(0, 0, 0, 0.6);
transform: translateY(-1px);
}
.console-fx-chip-name {
font-size: 7px;
letter-spacing: 0.12em;
font-weight: 700;
position: relative;
z-index: 2;
}
.console-fx-chip-pct {
font-size: 7px;
font-weight: 700;
color: var(--text);
position: relative;
z-index: 2;
letter-spacing: 0;
opacity: 0.85;
}
.console-fx-chip-bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
opacity: 0.22;
z-index: 0;
pointer-events: none;
}
/* Séparateur visuel entre instruments et FX buses */
.console-separator {
flex-shrink: 0;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 4px;
position: relative;
}
.console-separator::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 50%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
.console-separator span {
font-size: 7px;
letter-spacing: 0.3em;
font-weight: 700;
color: var(--text-dim);
writing-mode: vertical-rl;
transform: rotate(180deg);
background: var(--bg);
padding: 6px 2px;
z-index: 1;
}
/* FX bus strip — unique, plus large pour contenir la liste des FX */
.console-fx-strip {
display: flex;
flex-direction: column;
width: 78px;
flex-shrink: 0;
padding: 6px 4px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-top: 2px solid currentColor;
border-radius: 3px;
gap: 6px;
color: currentColor;
}
.console-fx-bus {
width: 160px;
/* Sticky à droite : reste visible même quand on scrolle, comme la pile
master sur une vraie console. Ça résout le "je vois pas le FX bus". */
position: sticky;
right: 0;
z-index: 2;
box-shadow: -8px 0 16px rgba(0, 0, 0, 0.55);
}
.console-fx-bus + *,
.console-separator + .console-fx-bus {
/* (séparateur juste avant le FX BUS) — pas de sticky sur le sep, juste
l'ombre du FX BUS suffit à le distinguer visuellement */
}
.console-fx-bus-fader {
flex: 0 0 auto;
height: 80px;
min-height: 80px;
}
.console-fx-bus-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.console-fx-strip .console-name {
color: currentColor;
}
.console-fx-sources {
display: flex;
flex-wrap: wrap;
gap: 3px;
justify-content: center;
align-items: center;
padding: 4px;
min-height: 24px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 2px;
}
.console-fx-source-dot {
width: 8px;
height: 8px;
border-radius: 50%;
cursor: help;
}
.console-fx-sources-empty {
font-size: 7px;
letter-spacing: 0.18em;
color: var(--text-dim);
font-style: italic;
opacity: 0.55;
}
.console-bypass.active {
background: rgba(90, 90, 112, 0.18);
border-color: var(--text-dim);
color: var(--text-dim);
box-shadow: none;
}
/* MASTER section (mm-section-master) — styles génériques */
/* ============================================================
MATRIX VIEW — instruments × FX heatmap
============================================================ */
.matrix-wrap {
height: 100%;
overflow: auto;
padding: 12px;
background: rgba(8, 6, 14, 0.6);
border-radius: 4px;
}
.matrix-table {
border-collapse: separate;
border-spacing: 2px;
width: 100%;
}
.matrix-table th,
.matrix-table td {
padding: 0;
text-align: center;
vertical-align: middle;
}
.matrix-corner {
font-size: 9px;
letter-spacing: 0.2em;
font-weight: 700;
color: var(--text-dim);
padding: 6px 8px !important;
width: 100px;
}
.matrix-fx-header {
width: 50px;
font-size: 9px;
letter-spacing: 0.12em;
font-weight: 800;
padding: 6px 4px !important;
background: rgba(255, 255, 255, 0.02);
border-radius: 2px;
cursor: pointer;
text-shadow: 0 0 4px currentColor;
}
.matrix-fx-header:hover { background: rgba(255, 255, 255, 0.06); }
.matrix-vol-header,
.matrix-mute-header {
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-dim);
font-weight: 700;
padding: 6px 4px !important;
}
.matrix-track {
font-size: 9px;
letter-spacing: 0.15em;
font-weight: 800;
text-align: left !important;
padding: 6px 8px !important;
background: rgba(255, 255, 255, 0.04);
border-radius: 2px;
text-shadow: 0 0 4px currentColor;
}
.matrix-cell {
width: 50px;
height: 28px;
background: rgba(255, 255, 255, 0.025);
border-radius: 3px;
cursor: ew-resize;
transition: filter 120ms ease, box-shadow 120ms ease, transform 100ms ease;
position: relative;
overflow: hidden;
user-select: none;
}
.matrix-cell:hover { filter: brightness(1.4); transform: scale(1.05); }
/* Jauge horizontale = wet level. Left = 0% wet, right = 100% wet. */
.matrix-cell-wet {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0.55) 100%);
pointer-events: none;
transition: width 60ms linear;
z-index: 1;
}
.matrix-cell.off .matrix-cell-wet { display: none; }
.matrix-cell.on::after {
content: attr(data-pct);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: 0;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
z-index: 2;
}
.matrix-cell.off::after {
content: '+';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #3a3a3a;
transition: color 120ms ease;
}
.matrix-cell.off:hover::after { color: #6a6a6a; }
.matrix-vol {
width: 100px;
padding: 0 6px !important;
}
.matrix-vol-slider { height: 14px; }
.matrix-mute {
width: 28px;
padding: 0 !important;
}
.matrix-mute-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text-dim);
font-family: inherit;
font-size: 9px;
font-weight: 700;
width: 22px;
height: 20px;
padding: 0;
border-radius: 2px;
cursor: pointer;
transition: all 120ms ease;
}
.matrix-mute-btn:hover { border-color: var(--magenta-dim); color: var(--magenta-dim); }
.matrix-mute-btn.active {
background: rgba(255, 58, 165, 0.18);
border-color: var(--magenta);
color: var(--magenta);
}
/* "+ DROP FX HERE" placeholder pour les zones FX vides */
.bass-strip-fx:empty,
.lane-strip-fx:empty {
position: relative;
}
.bass-strip-fx:empty::before,
.lane-strip-fx:empty::before {
content: '+ DROP FX HERE';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 168, 74, 0.7); /* + lisible (était 0.4) */
font-size: 8px;
letter-spacing: 0.25em;
font-weight: 700;
pointer-events: none;
text-transform: uppercase;
white-space: nowrap; /* empêche "HERE" de wrap sur 2 lignes */
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); /* contraste sur le fond sombre */
}
/* Hover indicator sur le master-box header pour signaler qu'il s'ouvre */
.master-box .master-box-header {
transition: background 140ms ease;
cursor: pointer;
}
.master-box .master-box-header:hover {
background: rgba(176, 122, 208, 0.10);
border-radius: 4px;
}
.master-box-mixer-btn {
/* Bouton MIXER clair et proéminent : gradient violet, plus gros, bordure brighter */
background: linear-gradient(135deg, rgba(176, 122, 208, 0.35), rgba(216, 168, 232, 0.45));
border: 1px solid #b07ad0;
color: #fff;
font-family: inherit;
font-size: 10px;
letter-spacing: 0.22em;
font-weight: 700;
padding: 5px 12px;
border-radius: 3px;
cursor: pointer;
transition: all 140ms ease;
flex-shrink: 0;
text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
box-shadow: 0 0 8px rgba(176, 122, 208, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.master-box-mixer-btn:hover {
background: linear-gradient(135deg, rgba(176, 122, 208, 0.55), rgba(216, 168, 232, 0.7));
color: #fff;
border-color: #d8a8e8;
box-shadow: 0 0 14px rgba(216, 168, 232, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.master-box-mixer-btn:active {
transform: translateY(0);
box-shadow: 0 0 6px rgba(176, 122, 208, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.center-col {
display: grid;
/* header / main(knobs) / bottom-row(1fr).
Le bottom-row prend tout l'espace vertical restant — c'est le canva
modulaire complet. Le DRUM RACK est lui-même un module dans ce canvas. */
grid-template-rows: auto auto 1fr;
/* 1 colonne, contrainte à la largeur disponible (= colonne #app 1fr).
Sans ça, le grid auto-column peut s'étendre au-delà → enfants débordent. */
grid-template-columns: minmax(0, 1fr);
gap: 8px;
min-height: 0;
min-width: 0;
/* PAS de overflow:hidden ici — le SVG patch-bay (position:fixed) doit
pouvoir s'étendre au viewport entier pour dessiner les câbles vers le
SEQ qui vit dans la colonne gauche. Le clip drum rack est géré par
bottom-row qui a déjà overflow:hidden. */
}
.center-col > header { grid-row: 1; }
.center-col > main { grid-row: 2; }
.center-col > .bottom-row { grid-row: 3; }
/* ---------- Header ---------- */
header {
display: flex;
align-items: center;
justify-content: space-between;
}
.title {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.4em;
color: var(--accent);
text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}
.controls {
display: flex;
gap: 20px;
align-items: center;
font-size: 10px;
letter-spacing: 0.25em;
color: var(--text-dim);
}
.meter-control, .kit-control {
display: flex;
gap: 8px;
align-items: center;
}
#meter-select {
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 11px;
letter-spacing: 0.08em;
padding: 6px 10px;
border-radius: 3px;
cursor: pointer;
}
#meter-select:hover, #meter-select:focus {
border-color: var(--accent-dim);
outline: none;
}
#kit-label {
color: var(--accent);
font-size: 11px;
letter-spacing: 0.1em;
}
/* BPM input dans le header */
.bpm-control {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--text-dim);
}
.bpm-control input {
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--accent);
font-family: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
padding: 5px 8px;
width: 64px;
border-radius: 3px;
text-align: center;
-moz-appearance: textfield;
}
.bpm-control input::-webkit-outer-spin-button,
.bpm-control input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.bpm-control input:hover,
.bpm-control input:focus {
border-color: var(--accent-dim);
outline: none;
box-shadow: 0 0 6px rgba(0, 240, 255, 0.2);
}
/* Swing slider dans le header */
.swing-control, .chaos-control {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--text-dim);
}
/* Stack SWING + CHAOS verticalement dans le header pour économiser la largeur */
.swing-chaos-stack {
display: flex;
flex-direction: column;
gap: 4px;
}
.swing-chaos-stack .swing-control,
.swing-chaos-stack .chaos-control {
font-size: 9px;
letter-spacing: 0.15em;
gap: 6px;
}
.swing-chaos-stack .swing-control > span,
.swing-chaos-stack .chaos-control > span {
min-width: 42px;
text-align: right;
}
.swing-chaos-stack .slider.swing,
.swing-chaos-stack .slider.chaos {
height: 11px;
}
.slider.swing {
width: 110px;
height: 14px;
}
.slider.swing .fill {
background: #ffa84a;
}
.slider.swing:hover .fill {
background: #ffc070;
box-shadow: 0 0 8px rgba(255, 168, 74, 0.4);
}
/* Tick visible au milieu = straight (50%) */
.slider.swing::before {
content: '';
position: absolute;
top: 2px;
bottom: 2px;
left: 50%;
width: 1px;
background: var(--text-dim);
opacity: 0.5;
pointer-events: none;
}
/* Chaos slider — rouge pour signaler le danger */
.slider.chaos {
width: 110px;
height: 14px;
}
.slider.chaos .fill {
background: #8a2020;
transition: background 140ms ease;
}
.slider.chaos:hover .fill {
background: #ff3030;
box-shadow: 0 0 12px rgba(255, 48, 48, 0.5);
}
/* ---------- Main : autrefois le stage des knobs, maintenant vide
(knobs déplacés dans les bandes latérales). On le cache. */
main { display: none; }
/* ============================================================================
DRUMB GATE — overlay plein écran avant l'app. Logo animé + password input.
Disparaît avec un fade quand le bon mot de passe est entré.
============================================================================ */
.drumb-gate {
position: fixed;
inset: 0;
z-index: 9999;
background:
radial-gradient(ellipse at 50% 30%, rgba(199, 255, 46, 0.08), transparent 60%),
radial-gradient(ellipse at 50% 80%, rgba(255, 58, 165, 0.06), transparent 60%),
#07070b;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
transition: opacity 600ms ease, visibility 600ms ease;
}
.drumb-gate.drumb-gate-fade {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.drumb-gate-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 36px;
padding: 48px 56px;
max-width: 90vw;
}
.drumb-gate-logo {
font-family: 'Evol', monospace;
font-size: 120px;
letter-spacing: 0.06em;
line-height: 0.9;
color: #c7ff2e;
text-shadow:
0 0 16px rgba(199, 255, 46, 0.55),
0 0 32px rgba(199, 255, 46, 0.25),
0 4px 0 rgba(0, 0, 0, 0.8);
user-select: none;
text-transform: uppercase;
white-space: nowrap;
}
.drumb-gate-logo > span {
display: inline-block;
font-family: inherit;
transition: font-family 200ms ease, transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.drumb-gate-logo > span.pop {
transform: translateY(-6px) scale(1.08);
}
.drumb-gate-form {
display: flex;
gap: 8px;
align-items: center;
position: relative;
}
.drumb-gate-input {
width: 280px;
height: 38px;
padding: 0 14px;
background: rgba(12, 12, 20, 0.85);
border: 1px solid rgba(199, 255, 46, 0.4);
border-radius: 3px;
color: #fff;
font-family: inherit;
font-size: 14px;
letter-spacing: 0.08em;
outline: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.drumb-gate-input:focus {
border-color: #c7ff2e;
box-shadow: 0 0 12px rgba(199, 255, 46, 0.35);
}
.drumb-gate-input::placeholder { color: rgba(199, 255, 46, 0.35); }
.drumb-gate-btn {
height: 38px;
padding: 0 18px;
background: rgba(199, 255, 46, 0.12);
border: 1px solid #c7ff2e;
color: #c7ff2e;
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3em;
border-radius: 3px;
cursor: pointer;
transition: all 160ms ease;
}
.drumb-gate-btn:hover {
background: #c7ff2e;
color: #000;
box-shadow: 0 0 12px rgba(199, 255, 46, 0.5);
}
.drumb-gate-error {
position: absolute;
left: 0;
right: 0;
bottom: -22px;
text-align: center;
font-size: 10px;
letter-spacing: 0.2em;
color: #ff5070;
text-transform: uppercase;
opacity: 0;
transition: opacity 200ms ease;
}
.drumb-gate-error.show { opacity: 1; }
.drumb-gate-shake { animation: drumb-gate-shake 380ms ease; }
@keyframes drumb-gate-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(2px); }
}
/* Custom font EVOL — utilisée pour le logo DRUMB (font par défaut).
font-display: block = block text render jusqu'à font ready (up to 3s).
Combiné au dans le head, Evol est dispo dès le 1er paint. */
@font-face {
font-family: 'Evol';
src: url('assets/fonts/evol/evol.ttf') format('truetype');
font-display: block;
font-weight: 400;
font-style: normal;
}
/* Pool de fonts random pour le swap aléatoire des lettres du logo (en PLAY) */
@font-face { font-family: 'CrackmanBack'; src: url('assets/fonts/archive/Crackman%20Back.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'CrackmanFront'; src: url('assets/fonts/archive/Crackman%20Front.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Crackman'; src: url('assets/fonts/archive/Crackman.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'ExtraBlur'; src: url('assets/fonts/archive/ExtraBlur.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'PacmaniaItalic';src: url('assets/fonts/archive/Pacmania%20Italic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Pacmania'; src: url('assets/fonts/archive/Pacmania.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Popstars'; src: url('assets/fonts/archive/POPSTARS.TTF') format('truetype'); font-display: swap; }
@font-face { font-family: 'QuakerShaker'; src: url('assets/fonts/archive/Quaker%20Shaker.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Rosethorns'; src: url('assets/fonts/archive/ROSETHORNS.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'SlimeExtra'; src: url('assets/fonts/archive/SLIME%20EXTRA%20PERSONAL%20USE.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Slime'; src: url('assets/fonts/archive/SLIME%20PERSONAL%20USE.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'UrbanOil'; src: url('assets/fonts/archive/Urban%20Oil%20Typeface(Personal%20Use).otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'WatchBreaker'; src: url('assets/fonts/archive/WatchBreaker.ttf') format('truetype'); font-display: swap; }
/* Logo DRUMB — texte rendu avec la font evol, ancré au-dessus des knobs X/Y/OCC.
Transit smooth entre expanded (~44px) et collapsed (~18px) : font-size,
letter-spacing et padding se rétractent ensemble pour donner l'effet d'un
logo qui "se ramasse" vers le haut de la mini-sidebar. */
.drumb-logo > span {
display: inline-block;
font-family: inherit;
transition: font-family 200ms ease;
}
.drumb-logo {
width: 100%;
text-align: center;
padding: 6px 4px 4px;
flex-shrink: 0;
font-family: 'Evol', monospace;
font-size: 44px;
line-height: 0.9;
letter-spacing: 0.06em;
color: #c7ff2e;
text-shadow: 0 0 8px rgba(199, 255, 46, 0.35), 0 2px 0 rgba(0, 0, 0, 0.8);
user-select: none;
pointer-events: none;
text-transform: uppercase;
overflow: hidden;
white-space: nowrap;
transition:
font-size 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
letter-spacing 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
padding 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
text-shadow 320ms ease;
}
/* En mode kit browser collapsed : logo réduit, lettres serrées, padding minimal.
Devient cliquable (= bouton d'expansion). */
.kit-browser.collapsed .drumb-logo {
font-size: 17px;
letter-spacing: 0.02em;
padding: 4px 2px 2px;
text-shadow: 0 0 4px rgba(199, 255, 46, 0.45), 0 1px 0 rgba(0, 0, 0, 0.8);
pointer-events: auto;
cursor: pointer;
}
.kit-browser.collapsed .drumb-logo:hover {
color: #d8ff66;
text-shadow: 0 0 10px rgba(199, 255, 46, 0.85), 0 1px 0 rgba(0, 0, 0, 0.8);
transform: scale(1.05);
}
/* ============================================================================
FILMSTRIP KNOBS — X / Y / OCC en haut de la colonne gauche.
PNG HISE 180×23040 = 128 frames de 180×180. background-size: 100% 12800%
pour que 1 frame remplisse exactement la div ; background-position-y déplace
le filmstrip selon la valeur (cf. setFilmstripKnob côté JS).
============================================================================ */
.session-knobs-xy {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
gap: 4px;
padding: 4px;
/* Override le style "session-knobs" générique : pas de fond/bordure pour
les knobs X/Y/OCC — juste les knobs flottants sur le fond du kit-browser. */
background: none !important;
border: none !important;
border-radius: 0 !important;
}
.filmstrip-knob-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex: 1 1 0;
min-width: 0;
}
.filmstrip-knob-top {
font-size: 11px;
letter-spacing: 0.22em;
color: #c7ff2e;
text-shadow: 0 0 4px rgba(199, 255, 46, 0.45);
text-transform: uppercase;
font-weight: 700;
}
.filmstrip-knob {
position: relative;
width: 64px;
height: 64px;
max-width: 100%;
/* Knob généré en CSS — pas de PNG. Style sombre métallique inspiré HISE :
1) gradient radial du centre clair vers bord sombre
2) gradient linéaire du haut clair vers bas sombre (lumière simulée)
3) inset shadow pour la profondeur (cuvette légère) */
background:
radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), transparent 50%),
linear-gradient(180deg, #2a2a30 0%, #0d0d12 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -2px 4px rgba(0, 0, 0, 0.6),
inset 0 0 0 1px rgba(0, 0, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.55);
cursor: ns-resize;
border-radius: 50%;
/* --knob-rot est mis à jour par setFilmstripKnob côté JS : -135deg (val=0)
→ +135deg (val=1), range 270deg = typique d'un potard rotatif. */
--knob-rot: -135deg;
transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
flex-shrink: 0;
}
/* Indicateur (le "petit pointeur" sur le knob) : trait fin sombre qui pointe
la position courante. Sous l'arc lime, donc on le voit en superposition. */
.filmstrip-knob::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 34%;
margin-left: -1px;
background: linear-gradient(180deg, #c7ff2e 0%, #8aa01a 100%);
border-radius: 1px;
transform-origin: 50% 100%;
transform: translate(0, -100%) rotate(var(--knob-rot));
box-shadow: 0 0 3px rgba(199, 255, 46, 0.7);
pointer-events: none;
z-index: 2;
}
/* Jauge SVG : arc lime-DRUMB qui se remplit autour du knob jusqu'à la
position courante. Comme les knobs FX/OCC/LFO en haut à droite. */
.filmstrip-knob-arc {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.filmstrip-knob-arc path {
fill: none;
stroke: #c7ff2e;
stroke-width: 3;
stroke-linecap: round;
filter: drop-shadow(0 0 4px rgba(199, 255, 46, 0.55));
transition: stroke 120ms ease;
}
.filmstrip-knob:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -2px 4px rgba(0, 0, 0, 0.6),
inset 0 0 0 1px rgba(199, 255, 46, 0.25),
0 2px 6px rgba(0, 0, 0, 0.6),
0 0 8px rgba(199, 255, 46, 0.2);
}
.filmstrip-knob:active {
cursor: grabbing;
transform: scale(0.97);
}
.filmstrip-knob:hover .filmstrip-knob-arc path {
filter: drop-shadow(0 0 6px rgba(199, 255, 46, 0.9));
}
/* État LFO-assigned : tout passe en couleur LFO (magenta). Le cursor reste à
la position BASE (cf. renderKnobs côté JS) pour ne pas jitter visuellement. */
.filmstrip-knob.lfo-assigned::after {
background: linear-gradient(180deg, #ff3aa5 0%, #a01a6a 100%);
box-shadow: 0 0 4px rgba(255, 58, 165, 0.75);
}
.filmstrip-knob.lfo-assigned .filmstrip-knob-arc path {
stroke: var(--magenta);
filter: drop-shadow(0 0 4px rgba(255, 58, 165, 0.55));
}
.filmstrip-knob.lfo-assigned:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -2px 4px rgba(0, 0, 0, 0.6),
inset 0 0 0 1px rgba(255, 58, 165, 0.4),
0 2px 6px rgba(0, 0, 0, 0.6),
0 0 8px rgba(255, 58, 165, 0.3);
}
.filmstrip-knob.lfo-assigned:hover .filmstrip-knob-arc path {
filter: drop-shadow(0 0 6px rgba(255, 58, 165, 0.9));
}
/* Top label X/Y/OCC passe aussi en magenta quand le knob est LFO-assigned.
:has() permet de styler le label (sibling AVANT) en fonction du .lfo-assigned. */
.filmstrip-knob-wrap:has(.filmstrip-knob.lfo-assigned) .filmstrip-knob-top {
color: var(--magenta);
text-shadow: 0 0 4px rgba(255, 58, 165, 0.55);
}
.filmstrip-knob:active {
cursor: grabbing;
transform: scale(0.97);
}
.filmstrip-knob.lfo-assigned {
filter: drop-shadow(0 0 6px rgba(255, 58, 165, 0.6));
}
.filmstrip-knob-value {
font-size: 11px;
font-weight: 700;
color: #ffffff;
font-variant-numeric: tabular-nums;
min-height: 12px;
}
/* COLLAPSED : stack vertical des 3 knobs. Parent fait ~195px de haut, donc on
distribue 3 knobs avec leur label top + value bottom dans cette zone. */
.kit-browser.collapsed .session-knobs-xy {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
gap: 4px;
width: 100%;
height: 100%;
padding: 2px 0;
box-sizing: border-box;
}
.kit-browser.collapsed .filmstrip-knob-wrap {
flex: 0 0 auto;
gap: 1px;
}
.kit-browser.collapsed .filmstrip-knob {
width: 44px;
height: 44px;
}
.kit-browser.collapsed .filmstrip-knob-top {
font-size: 7px;
letter-spacing: 0.2em;
}
.kit-browser.collapsed .filmstrip-knob-value {
font-size: 9px;
min-height: 10px;
}
/* Bloc knobs session — haut de la bande gauche (X/Y/OCC) et haut de la
bande droite (FX), au-dessus de la palette FX. */
.session-knobs {
width: 100%;
padding: 6px 4px;
background: rgba(12, 12, 20, 0.5);
border: 1px solid var(--border);
border-radius: 4px;
flex-shrink: 0;
}
.session-knobs svg {
display: block;
width: 100%;
height: auto;
max-height: 88px;
}
/* Stage FX + OCC : 2 SVGs séparés flex côte-à-côte (horizontal toujours,
même en mode collapsed) pour garantir l'absence de chevauchement. */
.session-knobs-fx {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
}
.session-knobs-fx > svg {
flex: 1 1 50%;
width: auto;
height: auto;
max-height: 80px;
min-width: 0;
}
.right-rack.collapsed .session-knobs-fx {
flex-direction: row;
gap: 4px;
}
.right-rack.collapsed .session-knobs-fx > svg {
max-height: 60px;
}
/* Right rack : bande latérale droite, pleine hauteur de la page. Empile FX
palette + LFO panel verticalement. Border-left = séparateur visuel du centre. */
.right-rack {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
overflow-y: auto;
border-left: 1px solid var(--border);
padding: 8px 0 8px 10px;
/* Stacking : au-dessus du patch-bay (z=5) pour masquer les câbles qui
traversent visuellement la colonne (e.g. modules dans le canvas vers
les LFOs encore attachés au rack). */
position: relative;
z-index: 7;
background: var(--bg);
}
/* ============================================================
RIGHT RACK — RETRACT / EXPAND
============================================================ */
.right-rack-toggle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text-dim);
font-size: 10px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 10;
transition: all 200ms ease;
}
.right-rack-toggle:hover {
border-color: var(--accent-dim);
color: var(--accent);
box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
transform: scale(1.15);
}
.right-rack-toggle-arrow {
display: inline-block;
transition: transform 380ms cubic-bezier(0.65, 0.05, 0.36, 1);
}
.right-rack.collapsed .right-rack-toggle-arrow {
transform: rotate(180deg);
}
.right-rack.collapsed {
padding: 8px 4px;
align-items: center;
gap: 6px;
overflow-y: auto;
overflow-x: hidden;
}
/* Knob FX en collapsed : big, prend toute la largeur de la col 88px */
.right-rack.collapsed .session-knobs {
margin-top: 22px;
padding: 0;
width: 100%;
height: 110px;
min-height: 110px;
max-height: 110px;
flex-shrink: 0;
flex-grow: 0;
background: none;
border: none;
box-shadow: none;
}
.right-rack.collapsed .session-knobs #stage-fx,
.right-rack.collapsed .session-knobs svg {
width: 100%;
height: 110px;
max-height: 110px;
display: block;
}
/* FX palette en collapsed : cellules en colonne, chip + chance + VU vertical */
.right-rack.collapsed .fx-palette-row {
flex-direction: column;
gap: 4px;
padding: 0 2px;
width: 100%;
align-items: center;
border: none;
}
.right-rack.collapsed .fx-palette-label {
display: none;
}
.right-rack.collapsed .fx-add-btn {
width: 100%;
margin: 2px 0;
}
.right-rack.collapsed .fx-add-menu {
/* Le menu reste positionné absolument et fonctionne normalement */
left: auto !important;
right: 100%;
margin-right: 4px;
}
.right-rack.collapsed .fx-cells-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
flex: 0 0 auto;
}
/* Chaque FX cell en collapsed : compact (chip + remove uniquement, sliders cachés) */
.right-rack.collapsed .fx-global-cell {
width: 100%;
min-width: 0;
}
.right-rack.collapsed .fx-cell-row-dense {
padding: 1px;
justify-content: center;
}
/* PAS de resize sur le chip → garde sa taille d'origine, juste replacé */
.right-rack.collapsed .fx-cell-row-dense .fx-all-btn,
.right-rack.collapsed .fx-cell-row-dense .slider.fxc,
.right-rack.collapsed .fx-cell-row-dense .slider.fxv,
.right-rack.collapsed .fx-cell-row-dense .fx-cell-vu-vert,
.right-rack.collapsed .fx-cell-row-dense .fx-cell-vu-spacer,
.right-rack.collapsed .fx-cell-row-dense .fx-cell-remove {
display: none;
}
/* ALT cell, params panels, et le bouton CLR LFO sont cachés en collapsed */
.right-rack.collapsed .fx-alt-cell,
.right-rack.collapsed .lfo-clear-all,
.right-rack.collapsed .fxp-slot {
display: none;
}
/* LFO stack en collapsed : chaque LFO réduit (chip + preview waveform compact) */
.right-rack.collapsed .lfo-stack {
width: 100%;
gap: 4px;
}
.right-rack.collapsed .lfo-stack .mod-section {
padding: 3px 2px;
}
.right-rack.collapsed .lfo-stack .lfo-header {
flex-direction: column;
align-items: center;
gap: 2px;
padding: 0;
}
/* Cache les selects + sliders détaillés des LFOs en collapsed — on garde le
chip drag (l'élément qu'on drop sur les params) et la preview waveform. */
.right-rack.collapsed .lfo-stack .mod-rows,
.right-rack.collapsed .lfo-stack .mod-line .mod-line-label,
.right-rack.collapsed .lfo-stack .lfo-toggle-btn,
.right-rack.collapsed .lfo-stack .lfo-detach-btn,
.right-rack.collapsed .lfo-stack .lfo-rate-select,
.right-rack.collapsed .lfo-stack .lfo-shape-select {
display: none;
}
.right-rack.collapsed .lfo-stack .lfo-preview {
width: 100%;
height: 22px;
}
.right-rack.collapsed .lfo-stack .fx-chip.lfo-source {
width: 100%;
font-size: 9px;
text-align: center;
padding: 3px 0;
}
/* Master bus en collapsed : VU vertical + bouton MIXER, reste caché */
.right-rack.collapsed .master-box {
width: 100%;
padding: 6px 4px;
flex-shrink: 0;
margin-top: auto;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 4px;
box-sizing: border-box;
/* + long verticalement pour bien afficher les VU */
min-height: 240px;
}
.right-rack.collapsed .master-box-header {
flex-direction: column;
gap: 4px;
padding: 0 0 4px;
border-bottom: 1px solid rgba(255,255,255,0.06);
margin-bottom: 4px;
}
.right-rack.collapsed .master-box-title {
font-size: 7px;
letter-spacing: 0.18em;
text-align: center;
color: var(--text-dim);
}
.right-rack.collapsed .master-box-mixer-btn {
width: 100%;
font-size: 8px;
padding: 4px 0;
letter-spacing: 0.15em;
}
.right-rack.collapsed .master-widget {
width: 100%;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
display: flex;
}
/* VU stéréo VERTICAL : 2 barres côte à côte, GROSSES et BIEN VISIBLES.
Hauteur ~ 170px pour qu'on voie l'évolution des niveaux clairement. */
.right-rack.collapsed .master-vu-stereo {
flex-direction: row;
gap: 6px;
width: 100%;
height: 170px;
align-items: stretch;
justify-content: center;
padding: 0 4px;
box-sizing: border-box;
}
.right-rack.collapsed .master-vu-stereo .master-vu-row {
flex-direction: column;
flex: 1;
height: 100%;
align-items: center;
gap: 3px;
max-width: 28px;
}
.right-rack.collapsed .master-vu-stereo .master-vu-label {
font-size: 8px;
margin-bottom: 0;
color: var(--text-dim);
letter-spacing: 0.1em;
font-weight: 700;
flex: 0 0 auto;
}
.right-rack.collapsed .master-vu-stereo .master-vu-track {
flex: 1;
width: 14px; /* plus large = mieux visible */
height: auto;
min-height: 140px;
position: relative;
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--border);
border-radius: 3px;
overflow: hidden;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}
/* master-vu-fill garde son inset:0 + clip-path basé sur --vu-level → bottom-up
automatiquement avec le clip top du système existant. Pas besoin d'override. */
.right-rack.collapsed .master-vol-host,
.right-rack.collapsed .master-box-body {
display: none;
}
.stage-wrap {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
#stage {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
/* ---------- KIT BROWSER (bande latérale gauche, pleine hauteur) ---------- */
.kit-browser {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 10px 8px 0;
border-right: 1px solid var(--border);
min-height: 0;
max-height: 100%;
overflow: hidden; /* colonne strictement bornée */
font-size: 10px;
letter-spacing: 0.08em;
/* Stacking : au-dessus du patch-bay (z=5) pour masquer les câbles qui
traversent visuellement la colonne (e.g. SEQ → synth dans le canvas). */
position: relative;
z-index: 7;
background: var(--bg);
}
/* ============================================================
COLONNE GAUCHE — RETRACT / EXPAND
============================================================ */
/* Bouton toggle : pastille discrète positionnée en haut à droite de la
colonne, qui retract/expand l'ensemble. Fixée pour qu'on puisse toujours
l'atteindre même en mode collapsed (56px). */
.kit-browser-toggle {
position: absolute;
/* Ancré sous le logo DRUMB pour ne plus le chevaucher. Top transit en sync
avec la rétractation du logo (44px expanded → 17px collapsed). */
top: 60px;
right: 4px;
width: 18px;
height: 18px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text-dim);
font-size: 10px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 10;
transition: top 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
right 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 200ms ease,
color 200ms ease,
box-shadow 200ms ease,
transform 200ms ease;
}
.kit-browser.collapsed .kit-browser-toggle {
/* Caché en mode collapsed : le logo lui-même devient le bouton d'expansion. */
display: none;
}
.kit-browser-toggle:hover {
border-color: var(--accent-dim);
color: var(--accent);
box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
transform: scale(1.15);
}
.kit-browser-toggle-arrow {
display: inline-block;
transition: transform 380ms cubic-bezier(0.65, 0.05, 0.36, 1);
}
.kit-browser.collapsed .kit-browser-toggle-arrow {
transform: rotate(180deg);
}
/* État COLLAPSED — animation de retrait fluide.
Stratégie : la grille (#app) anime grid-template-columns ; à l'intérieur
chaque enfant fade + slide légèrement vers la gauche. Les enfants masqués
sont retirés du flux avec display:none APRÈS la fin de la transition
(sinon ils sautent visuellement). */
.kit-browser.collapsed {
/* Padding HORIZONTAL uniforme : tous les enfants partagent les mêmes
marges de 6px de chaque côté → centrage parfait. */
padding: 8px 6px;
align-items: center;
gap: 6px;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
/* Tous les enfants visibles (sauf session-knobs qui escape via neg margin)
fillent la colonne pour éviter tout offset horizontal */
.kit-browser.collapsed > .sidebar-transport,
.kit-browser.collapsed > .seq-box-sidebar,
.kit-browser.collapsed > .transport-bottom {
width: 100%;
box-sizing: border-box;
margin-left: 0 !important;
margin-right: 0 !important;
flex-shrink: 0;
flex-grow: 0;
}
.kit-browser.collapsed > .session-knobs {
flex-shrink: 0;
flex-grow: 0;
}
/* Tue le flex-grow des éléments cachés pour qu'ils n'occupent aucune place
verticale (sinon le kit-list flex: 1 1 auto bouffe l'espace même collapse). */
.kit-browser.collapsed .kit-list,
.kit-browser.collapsed .kit-search,
.kit-browser.collapsed .kit-load-bar,
.kit-browser.collapsed .preset-row {
flex: 0 0 0 !important;
}
/* Enfants à cacher en mode mini : SLIDENT vers la gauche + fade + squeeze
vertical. Combiné, ça donne l'effet "ils se rangent vers la gauche jusqu'à
disparaître", pas juste un fade froid. */
.kit-browser.collapsed .kit-search,
.kit-browser.collapsed .kit-load-bar,
.kit-browser.collapsed .kit-list,
.kit-browser.collapsed .preset-row,
.kit-browser.collapsed .seq-box-body,
.kit-browser.collapsed .auto-btn,
.kit-browser.collapsed .melody-mode,
.kit-browser.collapsed .melody-enable,
.kit-browser.collapsed .dice-label,
.kit-browser.collapsed .transport-play-label,
.kit-browser.collapsed .transport-rec-label {
opacity: 0;
/* Pixel-based translate (pas % qui dépend de la width — qui change avec
la col en même temps). -300px garantit que l'élément sort entièrement à
gauche, peu importe sa largeur courante. */
transform: translateX(-300px);
pointer-events: none;
max-height: 0;
overflow: hidden;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-width: 0 !important;
/* Slide-out long et visible (600ms) avec opacity synchro. La squeeze
verticale (max-height) ne démarre qu'APRÈS la fin du slide (delay 600ms). */
transition:
opacity 600ms cubic-bezier(0.55, 0.0, 0.5, 1.0),
transform 600ms cubic-bezier(0.55, 0.0, 0.5, 1.0),
max-height 280ms cubic-bezier(0.65, 0.05, 0.36, 1) 600ms,
padding 280ms cubic-bezier(0.65, 0.05, 0.36, 1) 600ms,
margin 280ms cubic-bezier(0.65, 0.05, 0.36, 1) 600ms;
}
/* Réciproque : éléments visibles ré-apparaissent à l'expand → slident depuis
la gauche avec overshoot, max-height s'ouvre en premier puis fade-in. */
.kit-browser .kit-search,
.kit-browser .kit-load-bar,
.kit-browser .kit-list,
.kit-browser .preset-row,
.kit-browser .seq-box-body,
.kit-browser .auto-btn,
.kit-browser .melody-mode,
.kit-browser .melody-enable,
.kit-browser .dice-label,
.kit-browser .transport-play-label,
.kit-browser .transport-rec-label {
max-height: 999px;
transform: translateX(0);
transition:
opacity 300ms ease-in 220ms,
transform 540ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms,
max-height 460ms cubic-bezier(0.65, 0.05, 0.36, 1);
}
/* Stagger top→bottom : chaque ligne part avec un petit décalage pour donner
un effet "domino" quand on retracte. Format = opacity, transform, max-height,
padding, margin. La max-height a une base delay de 240ms (laisser le slide
se finir) + le stagger de l'élément. */
.kit-browser.collapsed .kit-search { transition-delay: 0ms, 0ms, 600ms, 600ms, 600ms; }
.kit-browser.collapsed .kit-load-bar { transition-delay: 50ms, 50ms, 650ms, 650ms, 650ms; }
.kit-browser.collapsed .kit-list { transition-delay: 100ms, 100ms, 700ms, 700ms, 700ms; }
.kit-browser.collapsed .seq-box-body { transition-delay: 150ms, 150ms, 750ms, 750ms, 750ms; }
.kit-browser.collapsed .preset-row { transition-delay: 200ms, 200ms, 800ms, 800ms, 800ms; }
.kit-browser.collapsed .auto-btn { transition-delay: 0ms, 0ms, 500ms, 500ms, 500ms; }
.kit-browser.collapsed .transport-play-label,
.kit-browser.collapsed .transport-rec-label {
transition-delay: 250ms, 250ms, 850ms, 850ms, 850ms;
}
/* Stagger inverse à l'expand : du bas vers le haut (les élements du bas
ré-apparaissent en premier pour révéler progressivement la sidebar). */
.kit-browser:not(.collapsed) .preset-row { transition-delay: 100ms, 100ms, 100ms; }
.kit-browser:not(.collapsed) .seq-box-body { transition-delay: 140ms, 140ms, 140ms; }
.kit-browser:not(.collapsed) .kit-list { transition-delay: 180ms, 180ms, 180ms; }
.kit-browser:not(.collapsed) .kit-load-bar { transition-delay: 220ms, 220ms, 220ms; }
.kit-browser:not(.collapsed) .kit-search { transition-delay: 260ms, 260ms, 260ms; }
/* === SESSION KNOBS (X / Y / OCC) en mode collapsed ===
SVG passe d'un format paysage (240×90) à portrait (64×220) via JS.
Encadré subtil cyan pour signaler qu'ils sont actifs. */
.kit-browser .session-knobs {
transition: max-height 480ms cubic-bezier(0.65, 0.05, 0.36, 1),
padding 380ms ease,
margin 380ms ease;
}
/* Knobs en collapsed : pas de container/cadre — juste le SVG nu, taille
identique à l'expanded (outerR=34, diamètre 68px). */
.kit-browser.collapsed .session-knobs {
margin-top: 22px; /* sous le bouton toggle */
margin-left: -6px; /* escape le padding horizontal du kit-browser */
margin-right: -6px; /* → SVG spanne la FULL col, pas réduite par padding */
padding: 0;
width: calc(100% + 12px);
height: 195px;
min-height: 195px;
max-height: 195px;
flex-shrink: 0; /* essentiel : kit-browser flex column shrinkrait sinon */
flex-grow: 0;
background: none;
border: none;
box-shadow: none;
position: relative;
overflow: visible;
}
.kit-browser.collapsed .session-knobs #stage-xy,
.kit-browser.collapsed .session-knobs svg {
width: 100%;
height: 100%;
max-height: 100%; /* override le cap 88px du selector global */
display: block;
overflow: visible;
}
/* === DICE/SMPL/KIT en mode collapsed : boutons carrés icon-only.
Les 3 dice-groups passent de 3-cols → 1-col (transition de grid-template-
columns native). Le label est caché → seul l'icône reste, bouton carré. */
.kit-browser .sidebar-transport {
transition: grid-template-columns 460ms cubic-bezier(0.65, 0.05, 0.36, 1);
}
.kit-browser.collapsed .sidebar-transport {
grid-template-columns: 1fr;
padding: 4px 0 2px; /* horizontal padding hérité du parent kit-browser */
width: 100%;
box-sizing: border-box;
}
.kit-browser.collapsed .sidebar-transport .dice-group {
width: 100%;
align-items: stretch; /* le bouton stretch sur toute la dice-group */
}
.kit-browser.collapsed .sidebar-transport .btn.big {
/* Stretché sur la col (56 - 6×2 = 44px), icône strictement centrée */
width: 100%;
height: 34px;
padding: 0 !important; /* override .sidebar-transport .btn.big padding */
margin: 0;
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0 !important;
position: relative;
text-align: center;
box-sizing: border-box;
}
.kit-browser.collapsed .sidebar-transport .btn.big .dice-icon {
font-size: 16px;
line-height: 1;
display: block;
margin: 0;
text-align: center;
}
/* Sort le label du flex flow → l'icône reste seul et centré dans le carré. */
.kit-browser.collapsed .sidebar-transport .btn.big .dice-label {
position: absolute;
left: 0;
top: 0;
margin: 0 !important;
}
/* SEQ NOTES en collapsed : box réduite mais style original conservé,
titre vertical pour gagner de la place, port-out toujours accessible. */
.kit-browser.collapsed .seq-box-sidebar {
padding: 4px;
width: 100%; /* margin horizontal hérité du kit-browser */
margin: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: 70px;
max-height: 100px;
box-sizing: border-box;
flex-shrink: 0;
}
/* En collapsed : seq-box-body reste visible mais on ne garde QUE les selects
ROOT et SCALE — le canvas, octave/len, et les boutons d'action sont cachés.
Les vrais