LOOP_PLAY_STYLEconstant
Scoped native Loop board and player CSS.
Import it
import { LOOP_PLAY_STYLE } from "@johnmorrisdotca/kazu/loop/play";Definition
const LOOP_PLAY_STYLE: "\n.sl-root{color:var(--sl-ink,#1f2320);font:16px/1.5 var(--font,system-ui,sans-serif);max-width:760px;margin:auto}\n.sl-board{display:grid;position:relative;gap:0;width:100%;min-width:240px;touch-action:manipulation;user-select:none}\n.sl-cell{position:relative;grid-column:span 2;grid-row:span 2;display:grid;place-items:center;min-width:0;min-height:0;border:0;background:transparent;padding:0;color:var(--sl-ink,#1f2320);font:700 clamp(14px,2vw,22px)/1 system-ui,sans-serif}\n.sl-dot{z-index:2;grid-column:span 1;grid-row:span 1;justify-self:center;align-self:center;width:8px;height:8px;border-radius:50%;background:var(--sl-ink,#1f2320);pointer-events:none}\n.sl-edge{position:relative;z-index:1;grid-column:span 2;grid-row:span 1;min-width:0;min-height:0;border:0;padding:0;background:transparent;cursor:pointer;touch-action:manipulation}\n.sl-edge.vertical{grid-column:span 1;grid-row:span 2}\n.sl-edge::after{content:\"\";position:absolute;background:var(--kz-grid,#cfc6b2);transition:background .12s ease}\n.sl-edge.horizontal::after{left:0;right:0;top:50%;height:5px;transform:translateY(-50%)}\n.sl-edge.vertical::after{top:0;bottom:0;left:50%;width:5px;transform:translateX(-50%)}\n.sl-edge.on::after{background:var(--sl-ink,#1f2320)}\n.sl-edge.error::after{background:var(--kz-bad,#b5452c)}\n.sl-edge:focus-visible{outline:3px solid var(--accent,#b5452c);outline-offset:-2px;border-radius:4px}\n.sl-tools{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}\n.sl-tools button,.sl-close{font:inherit;border:1px solid var(--sl-rule,#ddd6c6);border-radius:999px;min-height:44px;padding:0 14px;background:var(--sl-surface,#fbf8f1);color:var(--sl-ink,#1f2320);cursor:pointer}\n.sl-tools button:disabled{opacity:.45;cursor:default}.sl-status{min-height:1.5em}.sl-help{font-size:14px;opacity:.8}\n.sl-dialog{border:0;border-radius:14px;padding:24px;width:min(86vw,820px);max-height:90vh;overflow:auto;background:var(--surface,#fbf8f1);--sl-ink:var(--ink,#1f2320);--sl-surface:var(--surface,#fbf8f1);--sl-rule:var(--rule,#ddd6c6)}.sl-dialog::backdrop{background:#172c28bb}.sl-close{float:right;margin-bottom:10px}.sl-dialog .sl-root{clear:both}\n"Examples
import { LOOP_PLAY_STYLE } from "@johnmorrisdotca/kazu/loop/play";
console.log(LOOP_PLAY_STYLE.length);2130What it prints (run when this page was built)