noe/arthur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The cel sheet creates the place a polygon needs

Browse source
This commit is contained in:
Your Name 2026-10-01 12:17:35 -04:00
parent 6443366748
commit 3879d76d57
12 changed files with 1180 additions and 441 deletions
Download patch file Download diff file Expand all files Collapse all files

49
static/arthur/app.css
View file

@ -40,6 +40,22 @@
--sel: #2f6fc0;
--sel-bg: #cfe0f5;
/* A SECOND accent, and the one exception to the rule above — stated here
because SELECTED and AIMED are two different facts that are often true of
one node at the same time, and one accent cannot say both.
Selected is what you are LOOKING at: the inspector's subject, the thing
with handles on it. Aimed is where a new drawing or symbol would GO. They
used to be the same state, which is how drawing a polygon ended up in
whatever you had last clicked on the stage.
Violet rather than another blue: in the chrome it has to be told apart
from --sel, and on the stage from the warm gold the handles are drawn in.
Colour is not the only channel either — the aim outline is SOLID where the
selection's box is dashed, and it carries no handles at all, because there
is nothing about being aimed at that you could drag. --aim-stage is the
same hue lifted to read against --stage, which is the one dark surface. */
--aim: #8d4bd6;
--aim-stage: #c79bf2;
/* A keyframe is a dot and a dot is ink. Flash draws them black and so does
this; the frames a node exists over are a pale tint behind them. */
--key: #1f1f1f;
@ -1161,6 +1177,26 @@ button.share-button:hover, button.share-button.on { filter: brightness(1.1); }
.cs-cell:hover { background: var(--sel-bg); }
.cs-cell.selected { background: var(--sel-bg); color: var(--sel); font-weight: 600; }
.cs-head.selected { background: var(--sel-bg); color: var(--sel); }
/* AIMED COMPOSES WITH SELECTED rather than replacing it: the ring is the aim,
the tint is the selection, and a row that is both wears both. No name tag in
the chrome — the thing the ring is around is already the name. */
.tl-label.aimed,
.cs-head.aimed { box-shadow: inset 0 0 0 2px var(--aim); }
.cs-head.aimed { color: var(--aim); }
.cs-empty {
display: grid;
justify-items: center;
align-content: center;
gap: 6px;
padding: 28px 16px;
background: var(--pane);
text-align: center;
}
.cs-empty p { margin: 0; }
.cs-empty .dim { color: var(--dim); font-size: 11px; }
.cs-empty button { margin-top: 4px; }
.cel-sheet { user-select: none; touch-action: none; }
.cs-cell { position: relative; }
.cs-cell:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
@ -1254,4 +1290,17 @@ button.share-button:hover, button.share-button.on { filter: brightness(1.1); }
.paint-overlay .handles .knob { fill: #161820; stroke: #fff1be; stroke-width: 0.6; cursor: grab; }
.paint-overlay .handles .corner { fill: #fff1be; stroke: #161820; stroke-width: 0.5; cursor: nwse-resize; }
.paint-overlay .handles .pivot { stroke: #fff1be; stroke-width: 0.6; pointer-events: none; }
/* The aim outline and its name tag. Solid, no handles, and a tag pinned just
outside the bottom-right corner — see `ui/stage/aim-box` for why the box
rotates with the node and the tag does not. Sizes are in user units because
this SVG's viewBox is the stage's 320x200 scaled by `zoom`. */
.paint-overlay .aim { pointer-events: none; }
.paint-overlay .aim .aim-box { fill: none; stroke: var(--aim-stage); stroke-width: 0.7; }
.paint-overlay .aim .aim-tag-bg { fill: var(--aim-stage); }
.paint-overlay .aim .aim-tag {
fill: #1b1030;
font: 600 3.4px ui-sans-serif, system-ui, sans-serif;
letter-spacing: 0.04px;
}
.paint-overlay:focus { outline: none; }