electron-rare/AV-Live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: single colour palette via css vars

Browse Source 
Install --m1..--m6 on :root from PALETTE in main.js at bootstrap.
Replace triplicated hex in mcell/cd-row/seq-row with var(--mN).
Remove local COLORS array from renderColorSel; use imported PALETTE.
matrix-state.js stays DOM-free.
This commit is contained in:
L'électron rare
2026-06-29 11:10:22 +02:00
parent b0357af715
commit 8615472589
2 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_realart/public/control/control.css
+18 -18
View File
@@ -106,12 +106,12 @@ button.queued { animation: queued-blink 600ms ease-in-out infinite alternate; }
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: #c22; border-color: #e44; }
.mcell.m2 { background: #1a8; border-color: #2da; }
.mcell.m3 { background: #25b; border-color: #46e; }
.mcell.m4 { background: #990; border-color: #cc0; }
.mcell.m5 { background: #c60; border-color: #e80; }
.mcell.m6 { background: #82a; border-color: #a4d; }
.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)
@@ -175,18 +175,18 @@ button.queued { animation: queued-blink 600ms ease-in-out infinite alternate; }
.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: #c22; }
.cd-row.m2 { border-left-color: #1a8; }
.cd-row.m3 { border-left-color: #25b; }
.cd-row.m4 { border-left-color: #990; }
.cd-row.m5 { border-left-color: #c60; }
.cd-row.m6 { border-left-color: #82a; }
.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); }
.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:#c22; color:#fff; }
.seq-row.m2 .seq-cell.on { background:#1a8; color:#fff; }
.seq-row.m3 .seq-cell.on { background:#25b; color:#fff; }
.seq-row.m4 .seq-cell.on { background:#990; color:#fff; }
.seq-row.m5 .seq-cell.on { background:#c60; color:#fff; }
.seq-row.m6 .seq-cell.on { background:#82a; color:#fff; }
.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; }
web_realart/public/control/js/main.js
+9 -3
View File
@@ -1,11 +1,17 @@
import { send, on, onOpen, onClose, onPrefix } from "./osc.js";
import {
PALETTE,
MATRIX_VOICES, MATRIX_BARS, MATRIX_INST_CHOICES,
MATRIX_MOD_SOURCES, MATRIX_MOD_TARGETS,
mkColor, matGrid, matInst, matColorDefs,
resetMatGrid, saveMatState, loadMatState,
} from "./matrix-state.js";
function installPaletteVars() {
const root = document.documentElement.style;
PALETTE.forEach((c, i) => root.setProperty(`--m${i + 1}`, c));
}
const dot = () => document.getElementById("status");
onOpen(() => { dot().className = "on"; send("/matrix/list"); });
onClose(() => { dot().className = "off"; });
@@ -365,12 +371,11 @@ function renderColorSel(vi) {
const sel = document.getElementById("cd-colorsel");
if (!sel) return;
sel.innerHTML = "";
const COLORS = ["#c22","#1a8","#25b","#990","#c60","#82a"];
for (let c = 1; c <= 6; c++) {
const btn = document.createElement("button");
btn.textContent = String(c);
btn.style.background = COLORS[c-1];
btn.style.borderColor = COLORS[c-1];
btn.style.background = PALETTE[c-1];
btn.style.borderColor = PALETTE[c-1];
btn.classList.toggle("on", c === cdColor);
btn.addEventListener("click", () => { cdColor = c; renderColorSel(vi); renderPattern(vi); });
sel.appendChild(btn);
@@ -886,6 +891,7 @@ function updateNameInputs() {
}
document.addEventListener("DOMContentLoaded", () => {
installPaletteVars();
loadState();
loadMatState();