diff --git a/src/cambiare/index.mjs b/src/cambiare/index.mjs index 85d5e4e..fd9c5da 100644 --- a/src/cambiare/index.mjs +++ b/src/cambiare/index.mjs @@ -526,6 +526,8 @@ let Cambiare = class extends RootDisplay { let upThis = this; upThis.#style = value; upThis.#redrawNotesInternal(upThis.render(upThis.#clockSource?.currentTime || 0)); + classOff(upThis.#canvas, [`cambiare-style-block`, `cambiare-style-comb`, `cambiare-style-piano`, `cambiare-style-line`]); + classOn(upThis.#canvas, [`cambiare-style-${value}`]); }; setClockSource(clockSource) { this.#clockSource = clockSource; @@ -605,7 +607,7 @@ let Cambiare = class extends RootDisplay { attachElement.appendChild(containerElement); upThis.#container = containerElement; // Insert the canvas - let canvasElement = createElement("div", ["cambiare-canvas", "cambiare-port1", "cambiare-start0"]); + let canvasElement = createElement("div", ["cambiare-canvas", "cambiare-port1", "cambiare-start0", "cambiare-style-block"]); containerElement.appendChild(canvasElement); upThis.#canvas = canvasElement; // Start the resizer diff --git a/test/css/cambiare.css b/test/css/cambiare.css index 73f6f6e..0d3cb78 100644 --- a/test/css/cambiare.css +++ b/test/css/cambiare.css @@ -211,6 +211,8 @@ div.cambiare-canvas > div.sect-part div.part-keyboard { height: 100%; width: calc(100% * 128 / 176); margin: 0 calc(100% * 24 / 176); +} +div.cambiare-canvas:not(div.cambiare-style-line) > div.sect-part div.part-keyboard { transition: 0.05s transform; } div.cambiare-canvas.cambiare-port4 > div.sect-part div.part-info-minor {