L'électron rare
d058858b23
CI build oscope-of / build-check (push) Has been cancelled
One-BPM steps beside the tempo slider (fine adjustment is hard on a touch slider mid-performance) plus a live numeric readout; both paths share the same /launch/tempo send.
261 lines
16 KiB
CSS
261 lines
16 KiB
CSS
* { box-sizing: border-box; } body { margin: 0; background: #111; color: #eee;
|
|
font: 16px/1.3 -apple-system, system-ui, sans-serif; padding: 12px; }
|
|
header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 36px; }
|
|
h1 { font-size: 18px; margin: 4px 0; } h2 { font-size: 14px; color: #9af; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
|
|
#status { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
|
#status.on { background: #4c8; } #status.off { background: #c44; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
|
|
button { background: #222; color: #eee; border: 1px solid #333; border-radius: 10px;
|
|
padding: 18px 10px; font-size: 16px; cursor: pointer; width: 100%; }
|
|
button:active { background: #2a2a2a; } button.armed { background: #2b6; color: #061; border-color: #4d9; font-weight: 700; }
|
|
button.wide { width: 100%; margin: 8px 0; background: #422; border-color: #633; }
|
|
label { display: block; margin: 10px 0; } input[type=range] { width: 100%; height: 36px; }
|
|
.pat-cell { display: flex; flex-direction: column; gap: 4px; }
|
|
.pat-cell input[type=range] { height: 20px; accent-color: #4c8; }
|
|
button.sel { background: #246; border-color: #4af; color: #8cf; }
|
|
.seq-block { margin: 8px 0; }
|
|
.seq-block h3 { font-size: 13px; color: #9af; margin: 8px 0 4px; }
|
|
.seq-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
|
.seq-row button { min-width: 48px; padding: 12px 8px; font-size: 14px; }
|
|
|
|
/* --- Step editor --- */
|
|
.name-row { margin: 6px 0; }
|
|
.preset-name { background: #1a1a2e; color: #9af; border: 1px solid #335;
|
|
border-radius: 6px; padding: 6px 10px; font-size: 14px; width: 100%; }
|
|
.preset-name:focus { outline: none; border-color: #4af; }
|
|
|
|
.step-grid { margin: 8px 0; }
|
|
.step-row { display: flex; align-items: center; gap: 3px; margin: 3px 0; }
|
|
.step-row-label { width: 22px; font-size: 11px; color: #666; text-align: center;
|
|
flex-shrink: 0; font-weight: 700; letter-spacing: .04em; }
|
|
.step-cell { width: 38px; height: 38px; min-width: 38px; background: #1c1c1c;
|
|
border: 1px solid #333; border-radius: 4px; cursor: pointer; padding: 0;
|
|
flex-shrink: 0; transition: background 0.07s; }
|
|
.step-cell:active { opacity: 0.65; }
|
|
.step-cell.on { background: #2b6; border-color: #4d9; }
|
|
|
|
.mel-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
|
|
.mel-cell input[type=number] { width: 46px; height: 40px; background: #1c1c1c; color: #eee;
|
|
border: 1px solid #333; border-radius: 4px; text-align: center; font-size: 13px;
|
|
-moz-appearance: textfield; cursor: pointer; }
|
|
.mel-cell input[type=number]::-webkit-inner-spin-button,
|
|
.mel-cell input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
|
|
.mel-cell input[type=number]:focus { outline: none; border-color: #4af; background: #1a2030; }
|
|
|
|
/* --- Tab bar --- */
|
|
.tab-bar { display: flex; gap: 4px; margin: 10px 0 6px; }
|
|
.tab-btn { background: #1a1a1a; color: #888; border: 1px solid #333; border-radius: 8px;
|
|
padding: 10px 8px; font-size: 13px; cursor: pointer; flex: 1; text-transform: uppercase;
|
|
letter-spacing: .04em; width: auto; }
|
|
.tab-btn.active { background: #246; color: #8cf; border-color: #4af; font-weight: 700; }
|
|
.tab-btn:active { background: #1c2a40; }
|
|
.tab-panel { display: none; }
|
|
.tab-panel.active { display: block; }
|
|
|
|
/* --- Beat flash dot --- */
|
|
.beat-dot { width: 14px; height: 14px; border-radius: 50%; background: #333;
|
|
display: inline-block; flex-shrink: 0; }
|
|
.beat-dot.flash { background: #f90; }
|
|
|
|
/* --- Master VU meter --- */
|
|
.vu-wrap { flex: 1; max-width: 200px; height: 14px; background: #222;
|
|
border: 1px solid #333; border-radius: 4px; overflow: hidden; }
|
|
.vu-bar { height: 100%; width: 0%; background: linear-gradient(to right, #2b6, #9d4, #fa0);
|
|
border-radius: 4px; transition: width 0.08s linear; }
|
|
|
|
/* --- Quantize selector --- */
|
|
.quant-bar { display: flex; align-items: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
|
|
.quant-label { font-size: 13px; color: #888; flex-shrink: 0; }
|
|
.quant-btn { width: auto; padding: 8px 14px; font-size: 14px; flex-shrink: 0; }
|
|
.quant-btn.active { background: #246; color: #8cf; border-color: #4af; font-weight: 700; }
|
|
|
|
/* --- Queued state blink --- */
|
|
@keyframes queued-blink {
|
|
from { opacity: 1; }
|
|
to { opacity: 0.35; }
|
|
}
|
|
button.queued { animation: queued-blink 600ms ease-in-out infinite alternate; }
|
|
|
|
/* --- Sections tab --- */
|
|
.mode-bar { display: flex; align-items: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
|
|
.mode-label { font-size: 13px; color: #888; flex-shrink: 0; }
|
|
.mode-btn { width: auto; padding: 8px 14px; font-size: 14px; flex-shrink: 0; }
|
|
.mode-btn.active { background: #246; color: #8cf; border-color: #4af; font-weight: 700; }
|
|
|
|
.scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
|
|
.scene-slot { background: #1c1c1c; border: 2px solid #333; border-radius: 10px;
|
|
padding: 24px 10px; font-size: 22px; font-weight: 700; cursor: pointer; width: 100%; color: #666; }
|
|
.scene-slot.filled { background: #1a1a2e; border-color: #446; color: #8cf; }
|
|
.scene-slot.current { background: #2b6; border-color: #4d9; color: #061; font-weight: 900; }
|
|
.scene-slot.filled.current { background: #2b6; border-color: #4d9; color: #fff; }
|
|
|
|
.scene-nav { display: flex; gap: 8px; margin: 8px 0; }
|
|
.scene-nav button { flex: 1; font-size: 16px; padding: 16px; }
|
|
|
|
/* --- Matrix arranger (22x64) --- */
|
|
.matrix-transport { display: flex; gap: 8px; margin: 10px 0; }
|
|
.matrix-transport button { flex: 1; padding: 14px 10px; font-size: 14px; }
|
|
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
.mrow { display: flex; align-items: center; }
|
|
.mvoice-label { width: 54px; font-size: 10px; color: #888; text-align: right;
|
|
padding-right: 6px; flex-shrink: 0; white-space: nowrap; overflow: hidden;
|
|
text-overflow: ellipsis; cursor: pointer; }
|
|
.mbar-num { width: 22px; font-size: 9px; color: #555; text-align: center;
|
|
flex-shrink: 0; height: 14px; line-height: 14px; }
|
|
.mcell { width: 22px; height: 22px; min-width: 22px; border: 1px solid;
|
|
border-radius: 2px; cursor: pointer; padding: 0; flex-shrink: 0; }
|
|
.mcell:active { opacity: 0.65; }
|
|
.mcell.m0 { background: #1a1a1a; border-color: #2a2a2a; }
|
|
.mcell.m1 { background: var(--m1); border-color: color-mix(in srgb, var(--m1), white 30%); }
|
|
.mcell.m2 { background: var(--m2); border-color: color-mix(in srgb, var(--m2), white 30%); }
|
|
.mcell.m3 { background: var(--m3); border-color: color-mix(in srgb, var(--m3), white 30%); }
|
|
.mcell.m4 { background: var(--m4); border-color: color-mix(in srgb, var(--m4), white 30%); }
|
|
.mcell.m5 { background: var(--m5); border-color: color-mix(in srgb, var(--m5), white 30%); }
|
|
.mcell.m6 { background: var(--m6); border-color: color-mix(in srgb, var(--m6), white 30%); }
|
|
.mcell.playing { box-shadow: 0 0 0 2px rgba(255,255,255,0.28),
|
|
inset 0 0 0 1px rgba(255,255,255,0.40),
|
|
0 0 calc(var(--glow, 0) * 12px) calc(var(--glow, 0) * 4px)
|
|
rgba(255,255,255, calc(var(--glow, 0) * 0.7));
|
|
filter: brightness(calc(1 + var(--glow, 0) * 0.9)); }
|
|
|
|
/* --- Matrix persistence bar --- */
|
|
.matrix-persist { display: flex; align-items: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
|
|
.matrix-name-input { flex: 1; min-width: 100px; background: #1a1a2e; color: #9af;
|
|
border: 1px solid #335; border-radius: 6px; padding: 8px 10px; font-size: 14px; }
|
|
.matrix-name-input:focus { outline: none; border-color: #4af; }
|
|
.matrix-list-select { flex: 1; min-width: 100px; background: #1a1a2e; color: #9af;
|
|
border: 1px solid #335; border-radius: 6px; padding: 7px 6px; font-size: 14px;
|
|
cursor: pointer; -webkit-appearance: none; appearance: none; }
|
|
.mat-action-btn { width: auto; padding: 8px 14px; font-size: 14px; flex-shrink: 0; }
|
|
.mat-action-btn.armed { background: #2a4d2a; color: #9f9; border-color: #4a4;
|
|
animation: matArmedPulse 1s ease-in-out infinite; }
|
|
@keyframes matArmedPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
|
|
.mat-refresh-btn { width: auto; padding: 8px 12px; font-size: 16px; flex-shrink: 0;
|
|
background: #1a2a1a; border-color: #2a4a2a; color: #4d9; }
|
|
.mvoice-label { position: sticky; left: 0; z-index: 2; background: #111; }
|
|
.kit-btn { flex: 1; padding: 10px 4px; font-size: 11px; }
|
|
.minst-edit-head { width: 22px; flex-shrink: 0; }
|
|
.mat-loop-full-btn { width: auto; padding: 8px 14px; font-size: 13px; margin: 4px 0;
|
|
background: #1a1a2e; border-color: #335; color: #9af; }
|
|
|
|
/* --- Matrix timeline header --- */
|
|
.matrix-timeline { display: flex; gap: 1px; margin: 2px 0; touch-action: none; }
|
|
.tl-spacer { width: 154px; flex-shrink: 0; }
|
|
.tl-bar { width: 22px; min-width: 22px; height: 20px; flex-shrink: 0;
|
|
background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 2px;
|
|
cursor: pointer; font-size: 9px; color: #555; text-align: center;
|
|
line-height: 20px; user-select: none; -webkit-user-select: none; }
|
|
.tl-bar.in-loop { background: #1a2a1a; border-color: #2a5a2a; color: #4d9; }
|
|
.tl-bar.tl-head { background: #fa0; border-color: #fc0; color: #000; }
|
|
.tl-bar.tl-head.in-loop { background: #fa0; border-color: #fc0; color: #000; }
|
|
|
|
/* --- Matrix mixer: 16-strip volume + mute --- */
|
|
.matrix-mixer { display: flex; gap: 4px; margin: 12px 0; overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch; padding-bottom: 4px; }
|
|
.mix-strip { display: flex; flex-direction: column; align-items: center; gap: 4px;
|
|
min-width: 40px; flex-shrink: 0; }
|
|
.mix-fader { writing-mode: vertical-lr; direction: rtl; width: 28px; height: 110px;
|
|
accent-color: #4c8; cursor: pointer; -webkit-appearance: slider-vertical; appearance: slider-vertical; }
|
|
.mix-mute { width: auto; padding: 4px 6px; font-size: 11px; }
|
|
.mix-mute.on { background: #622; border-color: #c44; color: #f88; font-weight: 700; }
|
|
.mix-label { font-size: 10px; color: #9af; text-align: center; word-break: break-all; }
|
|
|
|
/* --- Inline voice editor (accordion) --- */
|
|
.minst { position:sticky; left:54px; z-index:2; width:78px; font-size:10px; background:#1a1a1a; color:#ccc; border:1px solid #333; flex-shrink:0; }
|
|
.minst-head { width:78px; flex-shrink:0; }
|
|
.voice-expand-btn { position: sticky; left: 132px; z-index: 2; width: 22px; font-size: 11px;
|
|
background: #222; color: #ccc; border: 1px solid #333; flex-shrink: 0; padding: 0; }
|
|
.voice-expand-btn.open { color: #4af; border-color: #4af; }
|
|
.voice-editor-row { background: #141414; border-left: 3px solid var(--m1); padding: 8px; }
|
|
.cd-colorsel { display:flex; gap:4px; margin:6px 0; }
|
|
.cd-colorsel button.on { outline:2px solid #fff; }
|
|
.cd-pattern { display:flex; flex-direction:column; gap:6px; }
|
|
.cd-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
|
|
.cd-aud.on { background: #2b6; color: #fff; }
|
|
.cd-row { display: flex; gap: 6px; align-items: center; padding: 4px; border-radius: 3px;
|
|
border-left: 4px solid; margin-bottom: 3px; }
|
|
.cd-field { font-size: 9px; color: #999; display: flex; flex-direction: column; }
|
|
.cd-row.m1 { border-left-color: var(--m1); }
|
|
.cd-row.m2 { border-left-color: var(--m2); }
|
|
.cd-row.m3 { border-left-color: var(--m3); }
|
|
.cd-row.m4 { border-left-color: var(--m4); }
|
|
.cd-row.m5 { border-left-color: var(--m5); }
|
|
.cd-row.m6 { border-left-color: var(--m6); }
|
|
.cd-tab-body { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
|
|
.seq-row { display:flex; gap:1px; margin-bottom:1px; }
|
|
.seq-cell { width:20px; height:20px; font-size:9px; background:#1a1a1a; color:#ccc; border:1px solid #333; padding:0; }
|
|
.seq-cell.on { background:#4c8; color:#000; }
|
|
.seq-row.m1 .seq-cell.on { background: var(--m1); color: #fff; }
|
|
.seq-row.m2 .seq-cell.on { background: var(--m2); color: #fff; }
|
|
.seq-row.m3 .seq-cell.on { background: var(--m3); color: #fff; }
|
|
.seq-row.m4 .seq-cell.on { background: var(--m4); color: #fff; }
|
|
.seq-row.m5 .seq-cell.on { background: var(--m5); color: #fff; }
|
|
.seq-row.m6 .seq-cell.on { background: var(--m6); color: #fff; }
|
|
|
|
/* --- Drum grid accent levels (soft / loud) --- */
|
|
.seq-cell.soft { background: color-mix(in srgb, var(--row-color, #4c8), transparent 50%);
|
|
border-color: var(--row-color, #4c8); }
|
|
.seq-cell.loud { background: var(--row-color, #4c8); color: #fff; }
|
|
|
|
/* --- Steps tab mode toggle --- */
|
|
.steps-mode-hdr { display:flex; gap:4px; margin-bottom:4px; }
|
|
.steps-mode-btn { width:auto; padding:4px 10px; font-size:11px; background:#1a1a1a;
|
|
color:#888; border:1px solid #333; border-radius:6px; }
|
|
.steps-mode-btn.active { background:#246; color:#8cf; border-color:#4af; font-weight:700; }
|
|
|
|
/* --- Piano-roll (pitch mode) --- */
|
|
.pianoroll { display:flex; flex-direction:column; gap:1px; max-height:240px; overflow-y:auto; }
|
|
.pr-row { display:flex; gap:1px; }
|
|
.pr-cell { width:20px; height:14px; background:#1c1c1c; border:none; cursor:pointer;
|
|
padding:0; flex-shrink:0; border-radius:1px; }
|
|
.pr-cell:active { opacity:0.65; }
|
|
.pr-cell.on { background: var(--pr-color, #4c8); }
|
|
|
|
/* --- Step playhead highlight --- */
|
|
.seq-cell.playhead { outline: 2px solid rgba(255,255,255,0.75); outline-offset: -1px; }
|
|
.pr-cell.playhead { background: rgba(255,255,255,0.14); outline: 1px solid rgba(255,255,255,0.55); outline-offset: -1px; }
|
|
.pr-cell.on.playhead { filter: brightness(1.45); outline: 1px solid #fff; outline-offset: -1px; }
|
|
|
|
/* --- Mod-source live meters --- */
|
|
.cd-meter { display:inline-block; width:42px; height:8px; border:1px solid #444;
|
|
border-radius:3px; vertical-align:middle; margin:0 4px; position:relative; background:#1b1b1b; }
|
|
.cd-meter::after { content:""; position:absolute; left:0; top:0; bottom:0;
|
|
width:calc(var(--v,0) * 100%); background:#1a8; border-radius:2px; }
|
|
|
|
/* --- Matrix evolve toggle --- */
|
|
.mat-evolve { padding: 2px 8px; flex: none; }
|
|
.mat-evolve.on { background: #1a8; color: #000; }
|
|
|
|
/* --- Morceau panel --- */
|
|
.morceau-panel { margin-top: 12px; padding: 8px; border-top: 1px solid #333;
|
|
background: #161616; border-radius: 6px; }
|
|
.morceau-title { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
|
|
color: #888; margin-bottom: 6px; }
|
|
.morceau-slots { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
|
|
grid-template-columns: 1fr 1fr; gap: 6px 12px; }
|
|
.morceau-slot { position: relative; display: flex; align-items: center; justify-content: space-between;
|
|
gap: 6px; font-size: 13px; color: #ccc; }
|
|
.morceau-slot-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 0%;
|
|
background: #8c8; transition: width 60ms linear; pointer-events: none; }
|
|
.morceau-slot-fill.fired { background: #cc2; height: 100%; opacity: 0.25; }
|
|
.morceau-slot select { flex: 0 0 auto; background: #222; color: #eee;
|
|
border: 1px solid #444; border-radius: 4px; padding: 2px 4px; }
|
|
|
|
/* --- Réglages group --- */
|
|
.morceau-settings { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
|
|
.morceau-set-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 6px; font-size: 12px; color: #ccc; }
|
|
.morceau-set-row output { min-width: 2.5em; text-align: right; color: #8c8; }
|
|
.morceau-keep { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font-size: 11px; color: #aaa; }
|
|
.morceau-keep > span { flex-basis: 100%; color: #888; }
|
|
.morceau-keep-box { display: inline-flex; align-items: center; gap: 2px; }
|
|
.morceau-global { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
|
|
.morceau-global .morceau-bpm { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #ccc; }
|
|
.morceau-global .morceau-bpm output { min-width: 2.5em; text-align: right; color: #8c8; }
|
|
.morceau-fists { display: flex; flex-direction: column; gap: 4px; }
|
|
.morceau-fist { position: relative; font-size: 12px; color: #ccc; padding: 2px 4px;
|
|
background: #1c1c1c; border-radius: 4px; }
|
|
|
|
/* Tempo -/+ steppers (1 BPM per tap) + live value */
|
|
.tempo-step { width: 44px; padding: 8px 0; font-size: 18px; flex-shrink: 0; }
|
|
#tempo-val { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
|