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

perfect target area thing

Browse source
This commit is contained in:
Your Name 2026-10-03 00:39:07 -04:00
parent 664252e0fc
commit 5bcf22e458
23 changed files with 668 additions and 432 deletions
Download patch file Download diff file Expand all files Collapse all files

48
static/arthur/app.css
View file

@ -40,21 +40,16 @@
--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.
/* A SECOND accent because selection and effective creation target are two
facts that are often true of one node at the same time.
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
Colour is not the only channel either — the target 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
is nothing about being a creation parent that you could drag. --target-stage is the
same hue lifted to read against --stage, which is the one dark surface. */
--aim: #8d4bd6;
--aim-stage: #c79bf2;
--target: #8d4bd6;
--target-stage: #c79bf2;
/* A THIRD, and the last. SELECTED IN THE TIMELINE had been --sel-bg, which is
#cfe0f5 against spans drawn in #dfe8f4: two pale blues a hair apart, in the
@ -62,13 +57,13 @@
is showing — an expanded lane opens exactly the selected clip. The fix is
not a stronger blue, which stays in the family the spans already own, but a
different hue entirely. Ochre: warm against every cool surface in the pane,
clear of --aim's violet, --live's green and the playhead's red, and dark
clear of --target's violet, --live's green and the playhead's red, and dark
enough at full strength to carry white type on a 21px block. */
--pick: #a85c00;
--pick-bg: #ffd9a0;
--pick-fg: #4a2800;
/* Auto-key is a recording state, distinct from selection and aiming. */
/* Auto-key is a recording state, distinct from selection and creation target. */
--live: #239447;
--live-bg: #e2f5e7;
@ -1085,10 +1080,18 @@ button.share-button:hover, button.share-button.on { filter: brightness(1.1); }
color: var(--pick-fg);
}
.tl-label.on .kind { color: var(--pick); }
.tl-label.aimed { box-shadow: inset 0 0 0 2px var(--aim); }
/* Both at once, and they must still be two readable facts: the aim's ring sits
.tl-label.target { box-shadow: inset 0 0 0 2px var(--target); }
/* Both at once, and they must still be two readable facts: the target ring sits
inside the pick's edge rather than replacing it. */
.tl-label.on.aimed { box-shadow: inset 3px 0 0 var(--pick), inset 0 0 0 2px var(--aim); }
.tl-label.on.target { box-shadow: inset 3px 0 0 var(--pick), inset 0 0 0 2px var(--target); }
.tl-track.target::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--target);
pointer-events: none;
z-index: 4;
}
.tl-label:hover:not(.on) { background: #fff; }
.tl-label .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-label .kind { color: var(--dim); }
@ -1213,6 +1216,7 @@ button.share-button:hover, button.share-button.on { filter: brightness(1.1); }
}
.tl-cel.on:hover:not(:disabled) { background: var(--pick); filter: brightness(1.12); }
.tl-span.on { background: var(--pick-bg); border-color: var(--pick); }
.tl-cel.target, .tl-span.target { outline: 2px solid var(--target); outline-offset: -2px; }
.tl-span.on.dense {
background: repeating-linear-gradient(
-45deg, var(--pick-bg) 0 3px, #f0bf77 3px 6px);
@ -1397,14 +1401,14 @@ button.share-button:hover, button.share-button.on { filter: brightness(1.1); }
.paint-overlay .handles .pivot { stroke: #fff1be; stroke-width: 0.6; pointer-events: none; }
.paint-overlay .marquee { fill: rgba(230, 202, 139, 0.12); stroke: #e6ca8b; stroke-width: 0.6; stroke-dasharray: 2 1; 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
/* The creation-target outline and its name tag. Solid, no handles, and a tag pinned just
outside the bottom-right corner — see `ui/stage/creation-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 {
.paint-overlay .creation-target { pointer-events: none; }
.paint-overlay .creation-target .creation-target-box { fill: none; stroke: var(--target-stage); stroke-width: 0.7; }
.paint-overlay .creation-target .creation-target-tag-bg { fill: var(--target-stage); }
.paint-overlay .creation-target .creation-target-tag {
fill: #1b1030;
font: 600 3.4px ui-sans-serif, system-ui, sans-serif;
letter-spacing: 0.04px;