. */
user-select: none;
}
/* Floating save/load status pill centered near the top of the canvas. */
.canvas-notification {
position: absolute;
top: 1.2rem;
left: 50%;
transform: translateX(-50%);
background: rgba(24, 24, 28, 0.80);
color: #fff;
padding: 0.4rem 1.1rem;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
z-index: 50;
letter-spacing: 0.02em;
}
/* Blank-canvas message shown when no page is visible (all pages hidden, or the
single active page is hidden). Centred over the empty canvas. */
.canvas-empty-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #555555;
font-size: 1.25rem;
font-weight: 700;
pointer-events: none;
z-index: 40;
text-align: center;
}
#prototype-canvas-div {
position: absolute;
overflow-y: auto;
overflow-x: auto;
/* Anchor below the top toolbar (matches #canvas-div). Otherwise the
canvas extends behind the toolbar, and a frame stretched to fill the
canvas vertically tucks its top under the toolbar. */
top: var(--top-toolbar-height);
left: 0;
bottom: 0;
right: 0;
background-color: black;
}
/* When the page hides the prototype top toolbar, the canvas takes the
full viewport height (no toolbar offset to compensate for). Escape
stops playback in this mode. */
.prototype-no-toolbar #prototype-canvas-div {
top: 0;
}
.canvas,
.prototype-canvas {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
}
/* Frame-to-frame transition overlay: laid exactly over the playback canvas,
click-through, shown only while a transition tween is running. */
.prototype-transition-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
/* Focus indicator: shows when the editor canvas has keyboard focus so the user
knows that canvas-only shortcuts (arrow nudge, eyedropper Enter, etc.) will
fire. The prototype-canvas is excluded — during playback the canvas is the
"screen" the user is interacting with, and a focus ring around it reads as
a stray editor chrome leak. outline-offset: -2px keeps the ring inside the
canvas so layout doesn't shift. Color matches TColor.selection (paint.ts). */
.canvas:focus {
outline: 2px solid var(--editor-selected-blue);
outline-offset: -2px;
}
/* Hidden assets and custom cursor images used by the canvas. */
.selected-icon {
display: inline-block;
flex: 0 0 auto;
width: 16px;
height: 12px;
background-color: var(--selection-color, var(--editor-selected-blue, #1097e2));
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Layers-mode indicator: a selection-coloured VERTICAL line filling the row's
full height in the caret's 16px slot. Rows abut with no gap, so each row's
segment joins its neighbours into ONE continuous line down the whole list.
A direct flex child of .page-list-item (align-self stretch = full height). */
.selected-line {
flex: 0 0 auto;
align-self: stretch;
width: 16px;
position: relative;
cursor: pointer;
}
.selected-line::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
transform: translateX(-50%);
background-color: var(--selection-color, var(--editor-selected-blue, #1097e2));
transition: width 0.08s ease, filter 0.08s ease;
}
/* Hovering the line over a row highlights just that row's segment — the bar
brightens and thickens so you can see which layer you're pointing at. */
.selected-line:hover::before {
width: 4px;
filter: brightness(1.5);
}
#rotation-cursor {
position: relative;
left: -99999px;
height: 20px;
width: 20px;
}
#pen-cursor {
position: relative;
left: -99999px;
height: 25px;
width: 14px;
}
#eyedropper-cursor {
height: 25px;
user-select: none;
z-index: 750;
}
/* Page, fill, stroke, gradient, behavior, and ring add/remove controls.
The page add/delete divs are flex items of .page-header-row, centred on
its line — no float. The right-edge gap comes from the row's
padding-right; the plus (rightmost) needs no margin of its own. */
.page-add-div {
display: flex;
align-items: center;
margin: 0;
}
.fill-add-div,
.stroke-add-div,
.gradient-add-div {
display: inline-flex;
align-items: center;
margin: 0 var(--panel-control-gap) 0 0;
}
.add-fill-icon,
.add-palette-color-icon,
.add-stroke-icon,
.add-variable-icon,
.unify-paint-icon,
.add-trigger-icon {
opacity: var(--editor-icon-muted-opacity);
height: var(--editor-small-icon-size);
user-select: none;
vertical-align: middle;
}
.page-delete-div {
display: flex;
align-items: center;
margin: 0 5px 0 0;
}
/* Extra layer tools (Group, Add-folder) sit left of the delete/add (−/+) pair;
a right gap keeps them from reading as part of that pair. */
.layer-tool-div {
margin-right: 11px;
}
.fill-delete-div,
.stroke-delete-div,
.gradient-delete-div,
.delete-gradient-color-div,
.delete-behavior-div,
.delete-ring-div {
display: inline-flex;
align-items: center;
margin: 0 var(--panel-control-gap) 0 0;
}
.ring-shift-div {
display: inline-flex;
align-items: center;
/* Up/down arrows start 8px to the right of the "Ring N" name. */
margin: 0 var(--panel-control-gap) 0 8px;
}
/* The "Ring N" name sits right after the disclosure triangle, so it lands at level 1
(one --panel-indent from the left) like every other section heading — no extra shift. */
.details-header > .ring-heading {
margin-left: 0;
}
.add-behavior-div,
.variable-add-div,
.trigger-add-div {
display: inline-flex;
align-items: center;
margin: 0 var(--panel-control-gap) 0 0;
}
.delete-color-icon,
.delete-stroke-icon,
.delete-gradient-icon,
.delete-gradient-color-icon,
.delete-behavior-icon,
.delete-ring-icon,
.variables-delete-icon,
.delete-trigger-icon {
opacity: var(--editor-icon-muted-opacity);
height: var(--editor-small-icon-size);
user-select: none;
vertical-align: middle;
}
.add-behavior-icon {
opacity: var(--editor-icon-muted-opacity);
height: var(--editor-small-icon-size);
user-select: none;
vertical-align: middle;
}
/* Standard accent add/remove button: an inline +/- glyph stroked in the theme
accent (see AccentIcon.tsx) — only the glyph is coloured, not a box. Sized to
the standard small-icon box so all +/- buttons match; muted at rest and
brightened on hover, like the left-panel page-list +/- buttons. */
.accent-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--editor-small-icon-size);
height: var(--editor-small-icon-size);
border-radius: var(--corner-radius-sm);
cursor: pointer;
vertical-align: middle;
opacity: var(--editor-icon-muted-opacity);
}
/* Hover brightens the glyph itself (muted -> full), matching the left-panel
page-list +/- buttons — not a painted background behind it. */
.accent-icon-btn:hover { opacity: 1; background-color: transparent; }
/* The glyph fills the standard small-icon box, so themed +/- match the size of
the image-based add/remove icons everywhere. */
.accent-icon-btn > svg { display: block; width: var(--editor-small-icon-size); height: var(--editor-small-icon-size); }
/* Color, fill, stroke, line, and selection color controls. */
/* Color swatch that opens the color picker — sized and styled to match
the gradient color-stop swatches. */
.color-div {
height: 20px;
width: 28px;
margin: 0 var(--panel-checkbox-label-gap) 0 0;
display: inline-block;
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
flex: 0 0 auto;
cursor: pointer;
}
.fill-details-div label {
display: inline;
margin: 0px;
position: relative;
font-size: 14pt;
top: -10px;
user-select: none;
}
.color-text-input {
width: 72px;
box-sizing: border-box;
padding: 2px 4px;
margin: 0 var(--panel-checkbox-label-gap) 0 0;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
vertical-align: middle;
}
/* Opacity %. Styled and behaving like the scale / skew percentage
boxes — the "%" lives inside the box (no trailing label). */
.alpha-input {
width: 52px;
box-sizing: border-box;
padding: 2px 4px;
margin: 0 var(--panel-checkbox-label-gap) 0 0;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
vertical-align: middle;
}
.gradient-stop-position-input {
position: relative;
width: 25px;
margin: 0 3px;
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
}
/* Level-1 row: width is left auto so it fills the panel content area
live as the panel resizes, keeping the right-aligned sight controls
pinned to the panel's right edge. */
.color-details-div {
display: flex;
align-items: center;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
margin-left: var(--panel-indent);
position: relative;
}
/* The Selection Colors rows reuse .color-details-div, so they already inherit
the design-panel inter-row gap (--details-row-pad) — the same as the Fill /
Stroke colour rows. They are NOT treated as a dense name list (Pages /
Layers), so they honour the standard inter-line gap, not --list-row-gap. */
/* Token link/unlink indicator. Absolutely placed (out of flow) so the colour
swatch stays flush at panel-indent — lined up with the section heading text —
while the icon is horizontally centred in the indent gutter between the panel
edge and the swatch. High z-index so a slider handle never covers it.
Faint when unlinked. */
.token-link-icon {
position: absolute;
left: calc(var(--panel-indent) / -2 - 6px);
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
opacity: 0.3;
cursor: default;
z-index: 30;
}
.token-link-icon.linked {
opacity: 1;
cursor: pointer;
}
/* Generic Level-1 row wrapper: --details-row-height tall (min), flex with
align-items: center, indented to panel-indent. Use this for single-control
rows and for icon rows whose icons fill the row height (like the Text
align icons). The vertical padding adds breathing room above and below
the children, so a row of full-height icons reads with the same visual
spacing as a row of text + input. */
.section-row {
display: flex;
align-items: center;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
margin-left: var(--panel-indent);
}
.stroke-details-div,
.line-details-div,
.image-details-div {
display: flex;
align-items: center;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
margin-left: var(--panel-indent);
/* Right gutter so the width input (which now grows to fill the row)
stops short of the panel edge. */
margin-right: var(--panel-right-gutter);
}
.fill-details-div p {
width: 100%;
text-align: left;
}
.stroke-details-div p {
width: 100%;
text-align: left;
}
.line-width-icon,
.stroke-width-icon {
width: 16px;
height: 16px;
margin: 0 var(--panel-checkbox-label-gap) 0 0;
opacity: var(--editor-icon-muted-opacity);
vertical-align: middle;
}
.line-width-input,
.stroke-width-input {
position: relative;
/* Formula-capable — grow into spare row width but cap the growth so a
lone width field doesn't stretch across the whole panel. */
flex: 1 1 0;
width: auto;
min-width: 40px;
max-width: 150px;
margin: 0 var(--panel-control-gap) 0 0;
vertical-align: middle;
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
}
/* .line-width-triangle shares its layout rule with .corners-triangle above. */
.stroke-dashes-label,
.line-dashes-label {
display: inline-block;
width: auto;
/* Keep the "D, Gap (unit)" label on one line — it sat in a flex row that let
it shrink and wrap. The room it needs is taken off the input's left (see
the narrower .*-dashes-text-input width below). */
flex-shrink: 0;
white-space: nowrap;
font-size: var(--editor-control-font-size);
margin: 0 var(--panel-checkbox-label-gap) 0 0;
text-align: left;
vertical-align: middle;
}
/* Dash / gap row: small label→input gap, modest input→Auto gap, and
every item vertically centered. The shared is-auto-dashes rules add
stray top offsets, so re-flatten them within the dash rows. */
.stroke-details-div .is-auto-dashes-label,
.line-details-div .is-auto-dashes-label {
display: inline-flex;
align-items: center;
margin: 0 0 0 13px;
}
.stroke-details-div .is-auto-dashes-checkbox,
.line-details-div .is-auto-dashes-checkbox {
position: static;
top: 0;
margin: 0 4px 0 0;
}
.stroke-dashes-text-input,
.line-dashes-text-input {
position: relative;
/* Narrowed from 110px to give the "D, Gap (unit)" label a little more room on
its left so it never wraps; a dash/gap value is short and still fits. The
label holds its width (flex-shrink: 0 above), so if a row is ever tighter
still, this input yields rather than the label wrapping. */
width: 100px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
vertical-align: middle;
}
/* Match count + sight icon, pushed to the right edge of the color row.
Flex (not float) so the count and icon align on the row's centre line;
flex: none so the group keeps its natural width and never clips. */
.sight-div {
display: flex;
align-items: center;
/* Fill the row's free space (after the swatch + hex + alpha) so the count
inside can right-align against the icon instead of sitting content-width. */
flex: 1 1 auto;
/* No vertical padding: the enclosing .color-details-div row already supplies
the inter-row gap. Padding here made the sight-div the tallest child and
inflated every selection-colour row by an extra 2 × --details-row-pad. */
}
.sight-icon {
opacity: var(--editor-icon-muted-opacity);
height: 20px;
/* Keep a comfortable click target horizontally, but don't let the vertical
padding inflate the color row taller than the swatch/hex it sits beside. */
padding: 2px 7px;
user-select: none;
}
/* Clickable panel icons — the section plus / minus add & delete icons,
the selection-colors targeting icon, the path-operation icons, and the
pen-ring icons — get a top-toolbar-style hover background. It sits on
the icon element itself so it hugs the icon's own box and never shifts
the surrounding layout the way a padded toolbar button would. */
.add-fill-icon,
.add-palette-color-icon,
.add-stroke-icon,
.add-variable-icon,
.unify-paint-icon,
.add-trigger-icon,
.delete-color-icon,
.delete-gradient-color-icon,
.delete-gradient-icon,
.delete-ring-icon,
.delete-stroke-icon,
.variables-delete-icon,
.delete-trigger-icon,
.page-list-plus-icon,
.page-list-minus-icon,
.sight-icon,
.group-icon,
.union-icon,
.outline-icon,
.subtract-icon,
.exclude-icon,
.intersect-icon,
.mask-icon,
.pen-icon,
.ring-icon {
border-radius: var(--corner-radius-sm);
cursor: pointer;
}
.add-fill-icon:hover,
.add-palette-color-icon:hover,
.unify-paint-icon:hover,
.add-stroke-icon:hover,
.add-variable-icon:hover,
.add-trigger-icon:hover,
.delete-color-icon:hover,
.delete-gradient-color-icon:hover,
.delete-gradient-icon:hover,
.delete-ring-icon:hover,
.delete-stroke-icon:hover,
.variables-delete-icon:hover,
.delete-trigger-icon:hover,
.page-list-plus-icon:hover,
.page-list-minus-icon:hover,
.sight-icon:hover,
.group-icon:hover,
.union-icon:hover,
.outline-icon:hover,
.subtract-icon:hover,
.exclude-icon:hover,
.intersect-icon:hover,
.mask-icon:hover,
.pen-icon:hover,
.ring-icon:hover {
background-color: transparent;
opacity: 1;
}
/* Plus / minus add & delete icon-buttons: a slightly larger clickable area,
and a hover that brightens only the glyph rather than painting a background. */
.add-fill-icon,
.add-palette-color-icon,
.unify-paint-icon,
.add-stroke-icon,
.add-behavior-icon,
.add-variable-icon,
.add-trigger-icon,
.delete-color-icon,
.delete-stroke-icon,
.delete-gradient-icon,
.delete-gradient-color-icon,
.delete-behavior-icon,
.delete-ring-icon,
.variables-delete-icon,
.delete-trigger-icon,
.page-list-plus-icon,
.page-list-minus-icon,
.minus-variable-icon,
.remove-groups-icon {
box-sizing: content-box;
padding: 1px;
cursor: pointer;
}
.add-fill-icon:hover,
.add-palette-color-icon:hover,
.unify-paint-icon:hover,
.add-stroke-icon:hover,
.add-behavior-icon:hover,
.add-variable-icon:hover,
.add-trigger-icon:hover,
.delete-color-icon:hover,
.delete-stroke-icon:hover,
.delete-gradient-icon:hover,
.delete-gradient-color-icon:hover,
.delete-behavior-icon:hover,
.delete-ring-icon:hover,
.variables-delete-icon:hover,
.delete-trigger-icon:hover,
.page-list-plus-icon:hover,
.page-list-minus-icon:hover,
.minus-variable-icon:hover,
.remove-groups-icon:hover,
.ring-icon:hover,
.sight-icon:hover {
background-color: transparent;
opacity: 1;
}
.corner-count-icon {
opacity: var(--editor-icon-muted-opacity);
margin: 0 var(--panel-checkbox-label-gap) 0 0;
height: 14px;
user-select: none;
vertical-align: middle;
}
/* Angle dimension glyph — replaces the old "A" text label. */
.angle-icon {
opacity: var(--editor-icon-muted-opacity);
margin: 0 var(--panel-checkbox-label-gap) 0 0;
width: 14px;
height: 14px;
user-select: none;
vertical-align: middle;
}
.star-ratio-icon {
opacity: var(--editor-icon-muted-opacity);
margin: 0 var(--panel-checkbox-label-gap) 0 0;
height: 14px;
user-select: none;
vertical-align: middle;
}
/* Text, typography, media, alignment, and shape option controls. */
#text-area {
font-family: var(--editor-font-family);
position: absolute;
display: block;
border: none;
outline: none;
padding: 0;
background: transparent;
font-size: var(--editor-control-font-size);
font-weight: normal;
line-height: 1.25em;
resize: none;
color: black;
z-index: 100;
user-select: all;
overflow: hidden;
white-space: break-spaces;
overflow-wrap: normal;
}
.font-div {
display: flex;
align-items: center;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
margin-left: var(--panel-indent);
/* Leave the standard right gutter so a row's last control (the size-unit combo,
the Italic label, the Letter box) can't run to or past the panel edge. */
margin-right: var(--panel-right-gutter);
}
.font-div label {
margin: 0 var(--panel-checkbox-label-gap) 0 0;
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
}
.font-div input {
border: var(--editor-control-border);
outline-color: var(--editor-text-color);
color: var(--editor-text-color);
}
.font-div input.font-div-font {
margin-right: var(--panel-pair-gap);
}
.font-div input.font-div-size {
margin-right: var(--panel-control-gap);
}
/* Line / letter spacing row. The Line label sits at the full level-1 indent
(like the Font label), and the Letter label gets the same gap that separates
the Font and Size boxes (--panel-pair-gap), placed before it via the line
input's right margin. */
.text-spacing-div {
margin-left: var(--panel-indent);
}
/* Keep the two-word labels ("¶ Space", "Indent", "Letter") on one line — a flex
item shrinks to min-content by default, which broke "¶ Space" onto two lines. */
.text-spacing-div label {
white-space: nowrap;
flex: 0 0 auto;
}
.text-spacing-input {
width: 52px;
}
.text-spacing-div input.line-spacing-input {
margin-right: var(--panel-pair-gap);
}
/* The text alignment row's .section-row already provides the level-1 indent;
cancel the nested .align-div's own indent so the icons start at level 1
instead of stacking to level 2. The vertical-align group keeps its gap. */
.text-align-row > .align-div:first-child {
margin-left: 0;
}
/* Between-group gap to the vertical-align group — matches the Image section's
groups (was a full --panel-indent, which read as too large). */
.text-align-row > .align-div:last-child {
margin-left: 16px;
}
.is-vertex-up-checkbox,
.is-equilateral-checkbox,
.is-even-odd-checkbox,
.is-closed-checkbox,
.is-auto-dashes-checkbox {
position: relative;
top: 2px;
margin: 0 var(--panel-checkbox-label-gap) 0 0px;
}
.is-vertex-up-label,
.is-equilateral-label,
.is-even-odd-label,
.is-is-closed-label,
.is-auto-dashes-label {
font-family: var(--editor-font-family);
font-size: var(--editor-control-font-size);
margin: 0 0 0 3px;
color: var(--editor-muted-text-color);
user-select: none;
}
.is-italic-checkbox {
margin: 0 var(--panel-checkbox-label-gap) 0 0;
vertical-align: middle;
}
.is-radial-checkbox {
position: relative;
top: 2px;
margin: 0 var(--panel-checkbox-label-gap) 0 12px;
}
#is-italic-label,
#is-radial-label {
font-size: var(--editor-control-font-size);
margin: 0;
user-select: none;
vertical-align: middle;
}
.font-div-font {
width: 120px;
}
/* The font-family field fills its row (font names run long — "Franklin Gothic
Medium", "Segoe UI Historic"), with the size box fixed on the right. The row
leaves the standard right gutter, and the Style dropdown above fills to the
same edge so the two wide controls line up. */
.font-family-row {
margin-right: var(--panel-right-gutter);
}
.font-family-row .font-div-font {
flex: 1 1 0;
width: auto;
min-width: 0;
}
/* Size box sits at the row's right edge — drop its trailing gap so its right
edge lines up with the Style dropdown above (both at the gutter). Needs the
`input` to out-specify `.font-div input.font-div-size`. */
.font-family-row input.font-div-size {
margin-right: 0;
}
.font-div-size {
width: 50px;
/* flex-basis (not width) wins in the flex .font-div row, so the broad
`.details-scroll input { width: 100% }` override can't stretch the
size box off the panel edge. */
flex: 0 0 50px;
}
/* Size combo: the number field + a caret that opens the common-sizes dropdown. */
.sizepicker {
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
margin-right: var(--panel-control-gap);
}
/* No gap between the field and its caret — they read as one control. */
.font-div .sizepicker input.font-div-size {
margin-right: 0;
}
.sizepicker-caret {
flex: 0 0 auto;
width: 16px;
height: 22px;
margin-left: 2px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
background: var(--editor-input-bg);
color: var(--editor-text-color);
cursor: pointer;
font-size: 10px;
line-height: 1;
}
.sizepicker-caret:hover { color: var(--editor-selected-blue); }
/* Right-align the numbers so they line up with the field's value. */
.sizepicker-item {
justify-content: flex-end;
font-variant-numeric: tabular-nums;
}
.font-weight-types {
/* Fill the row and SHRINK if needed. flex-basis (in the shorthand) beats the
`.details-scroll select { width: 100% }` rule, which would otherwise make
this select 100% wide and push its row-mates (Italic, the decoration
buttons) off the panel edge. */
flex: 1 1 0;
min-width: 0;
margin-right: var(--panel-pair-gap);
border: var(--editor-control-border);
outline-color: var(--editor-text-color);
color: var(--editor-text-color);
vertical-align: middle;
}
/* Font-size unit combo — sits right after the size box on the Size line. Fixed width +
no-grow so a long unit name can't stretch the Size row past the panel gutter.
flex-basis (not `width`) pins it, since `.details-scroll select { width: 100% }`
out-specifies a plain width and would otherwise blow the size unit off the edge. */
.font-unit-types {
flex: 0 0 56px;
box-sizing: border-box;
min-width: 0;
border: var(--editor-control-border);
outline-color: var(--editor-text-color);
color: var(--editor-text-color);
vertical-align: middle;
}
/* ---- Measurement rows (Size / Line / Letter / ¶ Space / Indent) ----
Each measurement sits on its OWN line as a 3-column grid — label | value |
unit ("measurement type") — so the value fields and the unit controls line up
down the whole group. Size uses a dropdown (many units); the others use a
two-cell segmented toggle (like the Area/Point type switcher). Overrides the
.font-div flex layout for these rows only. */
.measure-row.font-div {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 62px;
align-items: center;
column-gap: var(--panel-control-gap, 8px);
}
.measure-row > label {
margin: 0;
white-space: nowrap;
justify-self: start;
}
.measure-row .measure-input {
width: 100%;
box-sizing: border-box;
margin: 0;
/* Numeric field — honour the Number-alignment preference (Customize) like the
other numeric edit boxes (the unit now lives in the toggle, so these hold a
bare number). */
text-align: var(--number-input-align, right);
}
select.measure-unit {
box-sizing: border-box;
width: 100%;
min-width: 0;
margin: 0;
border: var(--editor-control-border);
outline-color: var(--editor-text-color);
color: var(--editor-text-color);
vertical-align: middle;
}
/* Segmented unit toggle (× / % and px / em) — two equal cells filling the unit
column, reusing the align-cell selected highlight from the alignment icons. */
.measure-unit-seg {
display: flex;
width: 100%;
gap: 2px;
}
.measure-unit-cell.align-icon-cell {
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 1px 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
line-height: 1.4;
}
/* The Size row's FontSizePicker fills the value column like the plain inputs;
its inner number field grows to fill the picker, leaving room for the caret. */
.measure-row .sizepicker {
width: 100%;
margin: 0;
}
.measure-row .sizepicker input.font-div-size {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
/* ---- Font picker (replaces the old font-family datalist input) ---- */
/* Trigger looks like the other row controls and fills the family row, with the
current family previewed in its own typeface. */
.fontpicker-trigger {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
height: var(--editor-control-height, 24px);
padding: 0 6px;
background: var(--editor-panel-background-color);
border: var(--editor-control-border);
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
cursor: pointer;
text-align: left;
}
.fontpicker-trigger.mixed .fontpicker-trigger-label { color: var(--editor-muted-text-color); }
.fontpicker-trigger-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fontpicker-caret {
flex: 0 0 auto;
font-size: 10px;
color: var(--editor-muted-text-color);
}
/* Popover (portaled to , fixed-positioned to the trigger). */
.fontpicker-backdrop {
position: fixed;
inset: 0;
z-index: 999;
}
.fontpicker-pop {
z-index: 1000;
display: flex;
flex-direction: column;
max-height: 330px;
background: var(--editor-panel-background-color);
border: 1px solid var(--editor-panel-separator-color);
border-radius: 6px;
box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.fontpicker-search {
flex: 0 0 auto;
margin: 6px;
padding: 5px 8px;
border: var(--editor-control-border);
border-radius: 4px;
background: var(--editor-panel-background-color);
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
outline-color: var(--editor-selected-blue);
}
.fontpicker-list {
flex: 1 1 auto;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 0 0 6px;
}
.fontpicker-group { list-style: none; }
.fontpicker-group-label {
position: sticky;
top: 0;
padding: 5px 10px 3px;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--editor-muted-text-color);
background: var(--editor-panel-background-color);
}
.fontpicker-group-items { list-style: none; margin: 0; padding: 0; }
.fontpicker-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
cursor: pointer;
color: var(--editor-text-color);
font-size: 15px;
line-height: 1.25;
}
.fontpicker-item:hover { background: color-mix(in srgb, var(--editor-selected-blue) 18%, transparent); }
.fontpicker-item.selected { background: color-mix(in srgb, var(--editor-selected-blue) 30%, transparent); }
.fontpicker-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fontpicker-badge {
flex: 0 0 auto;
font-size: 9px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--editor-muted-text-color);
font-family: var(--editor-font-family);
}
.fontpicker-empty { padding: 12px; color: var(--editor-muted-text-color); font-size: var(--editor-control-font-size); }
.fontpicker-spin {
flex: 0 0 auto;
width: 10px;
height: 10px;
border: 1.5px solid var(--editor-muted-text-color);
border-top-color: transparent;
border-radius: 50%;
animation: fontpicker-spin 0.7s linear infinite;
}
.fontpicker-err { flex: 0 0 auto; color: #c0392b; font-weight: 700; }
.fontpicker-footer {
flex: 0 0 auto;
border-top: 1px solid var(--editor-panel-separator-color);
padding: 6px;
}
.fontpicker-upload {
width: 100%;
padding: 6px 8px;
background: transparent;
border: 1px dashed var(--editor-panel-separator-color);
border-radius: 4px;
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
font-family: var(--editor-font-family);
cursor: pointer;
}
.fontpicker-upload:hover:not(:disabled) { border-color: var(--editor-selected-blue); color: var(--editor-selected-blue); }
.fontpicker-upload:disabled { opacity: 0.6; cursor: default; }
@keyframes fontpicker-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fontpicker-spin { animation: none; } }
/* Variable-weight slider + OpenType (small caps / kerning / width) rows. */
.variable-weight-row { gap: 8px; }
.variable-weight-slider {
flex: 1 1 auto;
min-width: 0;
accent-color: var(--editor-selected-blue);
}
.variable-weight-value {
flex: 0 0 auto;
min-width: 28px;
text-align: right;
font-variant-numeric: tabular-nums;
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
}
.opentype-row .opentype-label {
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
user-select: none;
margin: 0 14px 0 3px;
}
/* Wraps a checkbox + its label so the pair can carry one data-help entry (the
Checkbox component itself drops unknown props). Inline-flex keeps the original
inline layout; inner margins (checkbox gap, label 14px trailing) are unchanged. */
.opentype-toggle {
display: inline-flex;
align-items: center;
}
.deco-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 8px;
border: var(--editor-control-border);
border-radius: 3px;
cursor: pointer;
font-size: 13px;
color: var(--editor-text-color);
user-select: none;
}
/* The B/I/U/S buttons are TOGGLES: a subtle resting state, and a clear filled
"engaged" state (blue fill + white glyph) so an active style reads at a glance
— the standard formatting-toggle convention. */
.deco-btn:hover:not(.deco-btn-on) {
border-color: var(--editor-selected-blue);
color: var(--editor-selected-blue);
}
.deco-btn-on {
border-color: var(--editor-selected-blue);
background: var(--editor-selected-blue);
color: #fff;
}
.deco-btn-b { font-weight: 800; }
/* Rich-text formatting toolbar (B / I / U / S) — the visible entry point for
styling text, or a selected range while editing on the canvas. */
.text-format-row { gap: 4px; }
.text-format-row .deco-btn { margin-left: 0; }
.text-rich-hint {
flex: 1 1 0;
min-width: 0;
margin-left: 8px;
font-size: 10.5px;
line-height: 1.25;
color: var(--editor-muted-text-color);
user-select: none;
}
.align-div {
display: inline-flex;
align-items: center;
margin: 0 0 0 var(--panel-indent);
}
.align-items-section {
padding: 6px 0;
}
/* Both align groups (horizontal / vertical) sit on ONE line at the standard row
height. A bit more space between the two groups than between their icons. */
.align-items-section .align-div {
display: inline-flex;
align-items: center;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
.align-items-section .align-div + .align-div {
margin-left: 8px;
}
.image-align-div {
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
/* The X/Y offset row follows directly below, so no extra bottom margin
is needed to separate the align icons from the next line. */
margin: 0 4px 0 var(--panel-indent);
display: block;
}
/* Frame Layout (prototype): give the align-icons row vertical breathing room,
and widen the Width/Height label column so the labels clear their sliders —
the flex-grow % edit box yields that width (so it shrinks). Scoped to the
frame layout so the shared design-panel scale/skew rows are untouched. */
.frame-align-div {
margin-top: 0;
margin-bottom: 0;
}
.frame-scale-row .scale-skew-label {
width: 52px;
margin-right: 6px;
}
/* Data panel — Database Schema. A wide, monospace SQL box (paste a schema.sql or a dump),
its buttons, and the notes underneath. The width override is deliberate: the panel's
`.details-scroll input { width: 100% }` rule doesn't reach a textarea, so this sets its own. */
.db-schema-body {
margin-left: var(--panel-indent);
padding-top: var(--details-row-pad);
padding-bottom: var(--details-row-pad);
padding-right: 6px;
}
.db-schema-input {
box-sizing: border-box;
width: 100%;
resize: vertical;
font-family: var(--editor-mono-font-family, monospace);
font-size: 11px;
line-height: 1.35;
padding: 5px 6px;
color: var(--editor-text-color);
background-color: var(--editor-input-bg, var(--button-bg));
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
white-space: pre;
overflow: auto;
}
.db-schema-migration {
margin-top: 6px;
}
.db-schema-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
.db-schema-btn {
flex: 0 0 auto;
padding: var(--editor-control-pad-y) 10px;
font-family: var(--editor-font-family);
font-size: var(--editor-control-font-size);
font-weight: 600;
line-height: var(--editor-control-line-height);
color: var(--button-text);
background-color: var(--button-bg);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
cursor: pointer;
}
.db-schema-btn:hover:not(:disabled),
.db-schema-btn:active:not(:disabled) {
background-color: var(--button-bg-hover);
}
.db-schema-btn:disabled {
opacity: 0.45;
cursor: default;
}
.db-schema-note {
margin-top: 5px;
font-size: 11px;
color: var(--editor-muted-text-color);
}
.db-schema-skip {
opacity: 0.85;
}
/* Prototype backdrop: one row per theme (light / dark). The label sits at the section's
level-1 indent and the swatch keeps its own .color-details-div indent under it. */
.proto-bg-row {
display: block;
}
.proto-bg-label {
display: block;
margin-left: var(--panel-indent);
padding-top: var(--details-row-pad);
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
/* "in use" marker on whichever theme the editor is currently viewing. */
.proto-bg-live {
color: var(--prototype-accent);
}
/* Frame alignment X/Y offset row (prototype Frame Layout). */
.frame-offset-row {
display: inline-flex;
align-items: center;
gap: 12px;
/* Standard inter-row gap (was a fixed 6px bottom margin, out of step with the
other prototype rows). */
margin: 0 4px 0 var(--panel-indent);
padding-top: var(--details-row-pad);
padding-bottom: var(--details-row-pad);
}
.frame-offset-field {
display: inline-flex;
align-items: center;
gap: 4px;
}
.frame-offset-label {
color: var(--editor-muted-text-color);
font-family: var(--editor-font-family);
font-size: var(--editor-control-font-size);
}
.frame-offset-input {
width: 52px;
/* flex-basis (not width) survives the `.details-scroll input { width:
100% }` override in the flex .frame-offset-field row. */
flex: 0 0 52px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
text-align: var(--number-input-align, right);
vertical-align: middle;
}
/* The Image section's align group sits inside .image-align-div, which
already provides the Level-1 indent — cancel the shared .align-div indent
here so the group starts at Level 1 rather than stacking to Level 2. */
.image-align-div .align-div {
margin-left: 0;
}
/* The picture X/Y offset row. Sits at Level-1 indent like the rest of the
Image section; labels and inputs use the panel's normal control font and
the Reset button matches the other panel buttons (.export-button). */
.image-offset-div {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 14px;
row-gap: 4px;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}
.image-offset-field {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
.image-offset-input {
width: 44px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
background-color: var(--editor-input-bg);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
vertical-align: middle;
}
.image-offset-reset,
.proto-bg-reset,
.angle-reset {
margin-left: auto;
flex: none;
/* Size to the same height as the edit fields: same line-height + vertical
padding + border, so the reset button and the number box line up. */
padding: var(--editor-control-pad-y) 12px;
font-family: var(--editor-font-family);
font-size: var(--editor-control-font-size);
font-weight: 600;
line-height: var(--editor-control-line-height);
text-align: center;
color: var(--button-text);
background-color: var(--button-bg);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
cursor: pointer;
user-select: none;
}
.image-offset-reset:hover,
.image-offset-reset:active,
.proto-bg-reset:hover:not(:disabled),
.proto-bg-reset:active:not(:disabled),
.angle-reset:hover:not(:disabled),
.angle-reset:active:not(:disabled) {
background-color: var(--button-bg-hover);
}
.angle-reset:disabled,
.proto-bg-reset:disabled {
opacity: 0.45;
cursor: default;
}
/* The backdrop rows put their swatch and Reset on one line; the swatch keeps its own
indent and Reset sits at the far end (margin-left: auto, from the shared rule). */
.proto-bg-row .color-details-div {
padding-right: 4px;
}
.offscreen-image {
position: relative;
left: -99999px;
}
.video {
position: absolute;
top: 100px;
left: 200px;
}
.arrow-types {
width: 86px;
vertical-align: middle;
}
.arrow-icon {
margin: 0 var(--panel-checkbox-label-gap) 0 0;
width: 10px;
opacity: var(--editor-icon-muted-opacity);
vertical-align: middle;
}
/* Line-end cap picker: three selectable icons (butt / round / square)
replacing the old cap dropdown. The selection outline lives on the
(unfiltered) cell so it shows the true selection colour — the icon
image itself carries the dark-mode invert filter. */
.cap-selector {
display: inline-flex;
align-items: center;
gap: 2px;
vertical-align: middle;
}
/* A cap picker for a line end that carries an adornment — the cap is
irrelevant there, so it is shown greyed-out and non-interactive. */
.cap-selector-disabled {
opacity: 0.35;
pointer-events: none;
}
.cap-icon-cell {
display: inline-flex;
padding: 1px;
border-radius: var(--corner-radius-sm);
cursor: pointer;
user-select: none;
outline: var(--selection-border-width) solid transparent;
outline-offset: calc(-1 * var(--selection-border-width));
}
.cap-icon-cell:hover {
outline-color: var(--editor-control-border-color);
}
.cap-icon-cell-selected:hover {
outline-color: var(--editor-selected-blue);
}
/* Selected cap: identical to a pressed left-toolbar tool — same active
background and same selection outline. The outline lives on this
(unfiltered) cell, so it shows the true selection colour in dark
mode rather than the brightened tint the icon filter produced. */
.cap-icon-cell-selected {
background-color: var(--tool-active-bg, #e3e8f2);
outline-color: var(--editor-selected-blue);
}
.cap-icon-img {
display: block;
width: 18px;
height: 18px;
opacity: var(--editor-icon-muted-opacity);
}
.cap-icon-cell-selected .cap-icon-img {
opacity: 1;
}
/* West-end caps: rotate the icon 180° so the end faces left. */
.cap-icon-west {
transform: rotate(180deg);
}
/* Link / unlink toggle between west and east cap selectors. */
.cap-link-toggle {
flex-shrink: 0;
width: 16px;
height: 16px;
margin: 0 4px;
opacity: var(--editor-icon-muted-opacity);
cursor: pointer;
user-select: none;
border-radius: var(--corner-radius-sm);
padding: 1px;
box-sizing: content-box;
}
.cap-link-toggle:hover {
background-color: transparent;
opacity: 1;
}
.cap-link-toggle-disabled {
opacity: 0.35;
pointer-events: none;
}
/* (icon + cap selector) pair. The second pair on a row is nudged right
so the two ends read as two distinct groups. */
.line-end-pair {
display: inline-flex;
align-items: center;
}
.line-end-pair ~ .line-end-pair {
margin-left: var(--panel-pair-gap);
}
/* Aligned two-column rows for the line section's west/east controls.
The first (west) column is a fixed width so every east control —
and its label / icon — starts at the same x. */
.line-pair-row {
display: flex;
align-items: center;
width: 100%;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
.adornment-autosize-label {
display: flex;
align-items: center;
gap: 6px;
margin: 0 var(--panel-right-gutter) 0 0;
/* Give the autosize toggle the standard inter-row gap; it had none. */
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
cursor: pointer;
user-select: none;
}
.line-pair-row > .line-pair-col {
display: flex;
align-items: center;
}
.line-pair-row > .line-pair-col:first-child {
width: 128px;
flex: none;
}
/* Cap row: two equal halves with the link/unlink toggle centred between them.
Unlike the other line-pair-rows, this row does not use a fixed-width first
column — both sides flex to equal width so the icon lands exactly between
the two CapSelector groups. */
.cap-link-row {
display: flex;
align-items: center;
width: 100%;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
.cap-link-row > .cap-link-west,
.cap-link-row > .cap-link-east {
flex: 1;
display: flex;
align-items: center;
}
/* In the line-end context only: inset matches arrow-icon (10px) +
gap so cap icons left-align with the selects and sliders below. */
.details-line-group .cap-link-west,
.details-line-group .cap-link-east {
padding-left: calc(10px + var(--panel-checkbox-label-gap));
}
/* Line style (solid / dashed) radio group, indented to level 1. */
.line-style-section {
margin-left: var(--panel-indent);
}
/* The orthogonal-routing toggle is a bare radio directly under the section
(unlike the Solid/Dashed pair, which sit in a padded .line-style-radios), so
it had no vertical gap — give it the standard inter-row gap. */
.line-style-section > .line-style-radio {
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
/* The dashes row nested under the (already level-1) line-style section
adds one more indent step so the dash / gap line sits at level 2. */
.line-style-section .line-details-div {
margin-left: var(--panel-indent);
}
.line-style-radios {
display: flex;
align-items: center;
gap: 1rem;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
.line-style-radio {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
user-select: none;
cursor: pointer;
}
/* Zero the browser-default margin on BOTH the radio and the checkbox that share
this class (Solid/Dashed radios + the Orthogonal-routing checkbox), so every
toggle control's left edge sits at the section's level-1 indent and lines up
with each other and the labels. `input[type="radio"]` alone left the checkbox
~4px to the right. */
.line-style-radio input {
margin: 0;
}
.stroke-cap,
.line-cap {
margin: 0 var(--panel-control-gap) 0 0;
vertical-align: middle;
}
.palette {
position: relative;
padding: 1px;
height: 12px;
width: var(--editor-swatch-size);
opacity: var(--editor-icon-muted-opacity);
}
/* ── Item-tree drag and drop ──────────────────────────────────────────
A blue line marks a sibling drop; a tinted, outlined row marks a drop
*into* a container; the row being dragged is dimmed. */
.tree-drop-line {
height: 2px;
margin-right: 6px;
background-color: var(--editor-selected-blue, #1097e2);
border-radius: 1px;
pointer-events: auto;
}
/* A small knob at the start of the insertion line for extra clarity. */
.tree-drop-line::before {
content: '';
display: block;
width: 6px;
height: 6px;
margin: -2px 0 0 -3px;
border-radius: 50%;
background-color: var(--editor-selected-blue, #1097e2);
}
.tree-drop-into {
background-color: rgba(16, 151, 226, 0.22) !important;
outline: 1px solid var(--editor-selected-blue, #1097e2);
outline-offset: -1px;
}
.tree-row-dragging {
opacity: 0.4;
}
/* ── Help mode panel ──────────────────────────────────────────────────
Shown in the left panel, in place of the layers tree, while help mode
is on. Describes whatever element the pointer is over. */
.help-panel {
flex: 1 1 auto;
overflow-y: auto;
padding: 12px 14px;
color: var(--editor-text-color);
}
/* Help mode is view-only: force the question-mark help cursor everywhere
so it's obvious the pointer describes things rather than operating them.
The help-mode toggle button is the one exception — it stays a pointer
so the user can click it to exit. */
body.help-mode,
body.help-mode * {
cursor: help !important;
}
body.help-mode .help-mode-icon,
body.help-mode .help-mode-icon * {
cursor: pointer !important;
}
/* "Help mode" header: a recessed band near the top of the panel, with a
light background and an even 7px gap above, below, and on either side.
The negative margins cancel the .help-panel padding (12px 14px) down to
that 7px inset — hence -5px top and -7px sides. */
.help-panel-badge {
display: block;
margin: -5px -7px 7px -7px;
padding: 8px 14px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
color: var(--editor-muted-text-color);
background-color: var(--editor-panel-separator-color);
}
.help-panel-title {
margin: 0 0 6px 0;
font-size: 14px;
font-weight: 600;
text-align: left;
color: var(--header-2-color);
}
/* Sub-heading inside the help panel — used for the "Customizable" block
that names where a field's default lives in Customize → Engine Defaults. */
.help-panel-subtitle {
margin: 10px 0 6px 0;
font-size: 14px;
font-weight: 600;
text-align: left;
color: var(--header-2-color);
}
/* The description is indented under the title, left-aligned, with a
selection-coloured accent line down its left edge. */
.help-panel-body {
margin: 0 0 10px 0;
padding-left: 12px;
border-left: 2px solid var(--editor-selected-blue, #1097e2);
font-size: 12.5px;
line-height: 1.5;
text-align: left;
opacity: 0.85;
}
/* Floating help tooltip that follows the cursor in help mode. Shows the
title and (when present) a body summary — the prototype canvas uses the
body to describe the hovered item's type and interactions. */
.help-tooltip {
position: fixed;
left: -9999px;
top: -9999px;
z-index: 10000;
max-width: 380px;
padding: 8px 12px;
font-size: 15px;
line-height: 1.4;
color: #ffffff;
background-color: rgba(20, 22, 28, 0.96);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--corner-radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
pointer-events: none;
white-space: normal;
overflow-wrap: anywhere;
}
.help-tooltip-title {
font-size: 16px;
font-weight: 600;
}
.help-tooltip-body {
margin-top: 5px;
font-size: 14px;
font-weight: 400;
opacity: 0.85;
white-space: pre-line;
}
/* Subhead inside the tooltip — used for "Customizable" before the
default-location sentence. Sits above its own body block. */
.help-tooltip-subtitle {
margin-top: 8px;
font-size: 16px;
font-weight: 600;
}
/* A second, distinct help entry below the first (e.g. an edit-badged tool
describes the tool AND the badge), set off by a divider. */
.help-tooltip-extra {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--panel-border-color, #b8b8b8);
}
.help-tooltip-hidden {
display: none;
}
.group-icon,
.union-icon,
.outline-icon,
.exclude-icon,
.intersect-icon,
.subtract-icon,
.mask-icon {
margin: 0 3px 0 0;
opacity: var(--editor-icon-muted-opacity);
height: var(--editor-small-icon-size);
vertical-align: middle;
}
/* Gap separating the regular group icon from the special-group icons,
and the special-group cluster (mask is its last icon) from the add/remove
icons. */
.group-icon {
margin-right: 7px;
}
.mask-icon {
margin-right: 7px;
}
.path-operations-div {
display: inline-flex;
align-items: center;
}
/* ── Grouping section (under Align): template / group / boolean / mask / ungroup.
Icon-buttons sized like the Align buttons, with a gap between the logical
clusters (template | group | boolean specials | ungroup). ── */
.grouping-div {
margin-left: var(--panel-indent); /* level-1 indent, like the other rows */
display: flex;
align-items: center;
flex-wrap: wrap;
}
/* Uniform 24px square boxes (a touch bigger, like the Align icons); the glyph
scales to fit while keeping its aspect, so every button is the same size. */
.grouping-icon {
width: 24px;
height: 24px;
padding: 1px;
margin: 0 4px 0 0;
opacity: 0.7;
cursor: pointer;
user-select: none;
box-sizing: border-box;
vertical-align: middle;
object-fit: contain;
}
/* Brighten the glyph (foreground) on hover — no background box. */
.grouping-icon:hover {
opacity: 1;
}
/* The black glyph icons invert for dark mode; the template diamond carries its
own accent colour, so it's excluded from the filter. */
[data-theme="dark"] .grouping-icon:not(.grouping-template) {
filter: invert(0.94) hue-rotate(180deg) brightness(1.02);
}
/* Gaps separating the clusters: template | group | boolean specials | ungroup. */
.grouping-template,
.grouping-icon-group,
.grouping-icon-mask {
margin-right: 12px;
}
/* Make-Template button: a purple diamond like the Layers tree's template badge
([[.tree-instance-badge]]), scaled up to the grouping-icon box. */
.grouping-template {
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
}
.grouping-template-diamond {
width: 14px;
height: 14px;
border: 2px solid var(--accent-color, #7a5cff);
transform: rotate(45deg);
box-sizing: border-box;
}
/* The diamond is already full-opacity, so brighten its foreground (the purple
border) on hover rather than the opacity. */
.grouping-template:hover .grouping-template-diamond {
border-color: #a58cff;
}
[data-theme="dark"] .grouping-template-diamond {
border-color: #b9a7ff;
}
[data-theme="dark"] .grouping-template:hover .grouping-template-diamond {
border-color: #d8ccff;
}
/* ── Type-header canvas-visibility (eye) toggle + Layers-tree hidden indicator ── */
.type-visibility-btn {
order: 2; /* pushed to the right of the header by the ::after spacer */
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
margin-left: 4px;
margin-right: var(--panel-control-gap); /* standard right gutter, like the header add/delete icons */
border: none;
background: transparent;
border-radius: var(--corner-radius-sm);
cursor: pointer;
opacity: 0.38; /* match the Layers-panel eyes' brightness */
}
.type-visibility-btn.hidden-on {
opacity: 0.8;
}
.type-visibility-btn:hover {
opacity: 1;
}
.type-visibility-icon {
width: 16px;
height: 16px;
display: block;
}
[data-theme="dark"] .type-visibility-icon {
filter: invert(1) brightness(1.2); /* match the Layers-panel eyes in dark mode */
}
/* The eye-closed glyph shown at the right of a hidden Layers-tree row. Scoped
under .item-tree-item so it beats the generic `.item-tree-item img { 6px }`
rule (same trick as .tree-type-icon) — otherwise it renders at 6px. Sized like
the type icon, vertically centred, full-contrast, with room from the row edge. */
/* Per-row visibility toggle: eye-open when shown (a quiet default), the slashed
eye-closed when hidden (prominent). Scoped under .item-tree-item so it beats
the generic `.item-tree-item img { 6px }` rule (like .tree-type-icon). */
.item-tree-item .tree-vis-eye {
flex: 0 0 auto;
display: block;
align-self: center;
margin-left: auto;
/* Nudged right again (14px → 13px → 12px). */
margin-right: 12px;
padding: 0;
width: 14px;
height: 14px;
opacity: 0.38;
cursor: pointer;
}
.item-tree-item .tree-vis-eye.hidden {
opacity: 0.8;
}
.item-tree-item .tree-vis-eye:hover {
opacity: 1;
}
/* Full invert to white for solid contrast against the dark tree rows. */
[data-theme="dark"] .item-tree-item .tree-vis-eye {
filter: invert(1) brightness(1.2);
}
/* Layer lock in the item tree — identical to the Layers-list lock
(.page-lock-eye): a slashed padlock when unlocked, a solid padlock when
locked. Its brightness tracks the tree eye — the slashed (unlocked) lock is
the same 0.38 as a shown layer's eye; the solid (locked) lock is full, like
the crossed-out eye. Sits just left of the tree eye; margin-left:auto
right-aligns the lock+eye pair. */
.item-tree-item .tree-lock-eye {
flex: 0 0 auto;
display: block;
align-self: center;
margin-left: auto;
margin-right: 8px;
padding: 0;
width: 13px;
height: 13px;
opacity: 0.38;
cursor: pointer;
}
.item-tree-item .tree-lock-eye.on {
opacity: 1;
}
.item-tree-item .tree-lock-eye:hover {
opacity: 1;
}
/* The lock's margin-left:auto already right-aligns the pair, so cancel the
eye's own margin-left:auto when it follows a lock (layer rows only). */
.item-tree-item .tree-lock-eye + .tree-vis-eye {
margin-left: 0;
}
[data-theme="dark"] .item-tree-item .tree-lock-eye {
filter: invert(1) brightness(1.2);
}
/* Section header group: disclosure triangle + title + (optional) descriptor
+ (optional) add/delete icon buttons. Everything lives on one row, full
width, vertically centered. The triangle, title, and descriptor sit on
the left at order 0; icon buttons (add/delete, ring shift, group ops)
are tagged order 2 so they're pushed to the right; a ::after spacer at
order 1 with flex: 1 absorbs all the free space in between. */
.details-header {
display: flex;
align-items: center;
width: 100%;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
.details-header::after {
content: '';
flex: 1 1 auto;
order: 1;
}
.details-header > [class*="-add-div"],
.details-header > [class*="-delete-div"],
.details-header > .delete-ring-div,
.details-header > .sight-div,
.details-header > .groups-add-remove-div {
order: 2;
/* Keep the section's +/- centred on the header line. */
align-self: center;
}
/* The Selection Colours target button moved from every colour row into the section
HEADER (one button, acting on the picked row), so it sits with the other header
icon-buttons instead of stretching to fill a row. */
.details-header > .sight-div {
flex: 0 0 auto;
}
.palette-options {
position: relative;
display: inline-block;
padding: 3px;
margin: 0 3px;
top: -9px;
opacity: var(--editor-icon-muted-opacity);
}
.palette-options-menu {
position: absolute;
transition: 0s visibility;
z-index: 50;
}
.palette-options-div {
position: absolute;
background-color: var(--top-toolbar-background-color);
color: #fff;
padding: 8px 12px;
border-radius: 3px;
width: 170px;
}
.palette-options-span {
display: block;
color: #fff;
font-size: var(--editor-control-font-size);
text-align: left;
border-radius: var(--corner-radius-sm);
padding: 1px 3px;
}
.inline-block {
display: inline-block;
}
.palette-options-span:hover {
color: #fff;
background-color: var(--editor-selected-blue);
}
.palette-options-menu .palette-options-div::after {
content: " ";
position: absolute;
bottom: 100%;
right: 26px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--top-toolbar-background-color) transparent;
}
/* Pen mode toolbar and canvas context menu. Block-level with no side
margin so the .separator bottom border spans the full panel width,
matching the other design-panel sections. */
.pen-mode-div {
display: block;
/* Standard section padding so the header isn't crowded against the divider
above it (matches .details-div-group). */
margin: 0;
padding: 10px 0;
}
/* Connector-insertion exit button: sits inline to the right of the section
title (the details-header centers it vertically). */
.connector-create-cancel {
margin-left: 8px;
}
.pen-mode-heading-div {
/* The DisclosureTriangle before it already supplies the panel-indent, so the
heading must NOT add another (it was double-indented vs other sections). */
margin: 0 0px 0 0px;
user-select: none;
display: block;
}
.pen-icons-div {
/* Flex row so the "Ring" name + prev/next triangles vertically center with
the sub-mode icon buttons; wraps gracefully on a very narrow panel. */
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}
/* Pen editing rides its Select / Insert / Curve / Exit buttons on the header line. Like the
standard +/- header slot, order 2 sits it AFTER the .details-header::after spacer, which
grows and pushes it to the panel's right edge — with an 8px gutter so it doesn't butt
against the edge. (margin-left:auto alone does NOT work: the flex-grow ::after eats the
free space first, so the group would sit left, right after the title.) */
.pen-mode-header-icons {
order: 2;
margin-right: 8px;
display: inline-flex;
align-items: center;
}
.connector-mode-help {
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
color: var(--editor-muted-text-color);
font-size: var(--editor-control-font-size);
line-height: 1.45;
}
.pen-icon {
display: block; /* drop the inline baseline gap so the wrapper's selection
border hugs the icon instead of leaving space below it */
width: 24px;
height: 24px;
padding: 2px;
opacity: 60%;
}
.pen-icon-disabled {
opacity: 20%;
pointer-events: none;
cursor: default;
}
.wrapper {
display: inline-block;
/* A transparent border on every button keeps the row from shifting when the
active button's blue selection border appears, and makes the selection box
snug and identical for every sub-mode icon. */
border: 1px solid transparent;
border-radius: var(--corner-radius-sm);
margin-right: 1px;
}
.canvas-context-menu-div {
position: absolute;
}
.canvas-context-menu-ul {
position: absolute;
background-color: var(--top-toolbar-background-color);
color: white;
border-radius: 4px;
width: 200px;
margin: 10px;
list-style: none;
padding: 5px;
z-index: 100;
/* No overflow/scroll on the top-level menu: setting overflow-y also coerces
overflow-x to `auto` (CSS spec), which would CLIP the flyout submenus that
sit at `left: 100%` — showing a scrollbar'd sliver instead of the submenu.
The menu itself is a short, bounded set of actions; the long LISTS live in
the flyouts, which scroll on their own (.canvas-context-menu-submenu). The
fixed position is already clamped to the viewport edges. */
}
.canvas-context-menu-li {
background: none;
height: 20px;
width: 190px;
margin: 0;
padding: 5px;
cursor: pointer;
z-index: 150;
font-size: 12pt;
}
.canvas-context-menu-li:hover {
background: var(--editor-selected-blue);
}
/* Flyout sub-menu (e.g. Add control ▸) — opens to the right on hover. */
.canvas-context-menu-li.has-submenu {
position: relative;
}
.canvas-context-menu-submenu {
position: absolute;
left: 100%;
top: 0;
margin: 0;
padding: 5px;
list-style: none;
background-color: var(--top-toolbar-background-color);
border-radius: 4px;
width: 200px;
display: none;
z-index: 200;
/* A long flyout (e.g. Add data with many entities) scrolls instead of
running off the bottom of the page. */
max-height: calc(100vh - 12px);
overflow-y: auto;
}
/* When the parent menu sits on the right half of the screen it carries
`submenu-left`, so its flyouts open to the LEFT and stay on-page. */
.canvas-context-menu-ul.submenu-left .canvas-context-menu-submenu {
left: auto;
right: 100%;
}
/* A row low on the screen carries `open-up` (set on hover in ContextMenu.tsx),
so its flyout is bottom-aligned to the row and grows upward instead of off the
bottom of the page. */
.canvas-context-menu-li.has-submenu.open-up > .canvas-context-menu-submenu {
top: auto;
bottom: 0;
}
.canvas-context-menu-li.has-submenu:hover > .canvas-context-menu-submenu {
display: block;
}
.add-gradient-span {
position: relative;
top: -10px;
font-size: var(--editor-control-font-size);
background-color: var(--editor-muted-text-color);
color: white;
border-radius: 3px;
padding: 0px 3px 1px;
margin: 0 9px;
}
/* Gradient, shadow, image, export, and tab controls. */
.gradient-colors-heading {
margin: 0 12px;
}
.gradient-color-div {
margin: 0;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
.color-picker-div {
position: fixed;
text-align: left;
padding: 6px 11px 8px;
border: 2px solid var(--editor-control-border-color);
border-radius: 9px;
background-color: var(--editor-panel-background-color);
width: 190px;
z-index: 1000;
user-select: none;
}
/* Thin drag-handle strip at the top of the floating picker.
Extends wall-to-wall inside the border by negating the parent's padding.
The ::before shows a row of dots so the user can see it is draggable. */
.color-picker-header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 -11px 0 -11px;
padding: 4px 6px;
border-radius: 7px 7px 0 0;
background-color: rgba(128, 128, 128, 0.1);
border-bottom: 1px solid var(--editor-control-border-color);
cursor: grab;
height: 18px;
box-sizing: content-box;
}
.color-picker-title {
font-size: var(--editor-control-font-size);
/* Match the Design/Prototype tab heading colour. */
color: var(--customize-tab-color-active, var(--editor-text-color));
user-select: none;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
/* Keep the title clear of the centered drag-handle dots. */
max-width: calc(50% - 26px);
padding-right: 6px;
}
.color-picker-header::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 36px;
height: 8px;
background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
background-size: 6px 4px;
opacity: 0.3;
pointer-events: none;
}
.color-picker-header:active {
cursor: grabbing;
}
/* Red × close button — styled like the Share toolbar button but in panel context. */
.color-picker-close {
background-color: transparent;
border: none;
border-radius: var(--corner-radius-sm);
padding: 1px 4px;
font-family: var(--editor-font-family);
font-size: 0.78rem;
font-weight: 600;
color: #e53935;
cursor: pointer;
user-select: none;
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
opacity: var(--editor-icon-muted-opacity);
}
.color-picker-close:hover {
background-color: transparent;
opacity: 1;
}
.color-picker-close:active {
background-color: rgba(128, 128, 128, 0.32);
opacity: 1;
}
.gradient-location-div {
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
#gradient-start-label,
#gradient-end-label {
display: inline-block;
font-size: var(--editor-control-font-size);
width: 30px;
margin: 0 0 0 12px;
user-select: none;
}
.gradient-offset-label {
display: inline-block;
font-size: var(--editor-control-font-size);
width: 14px;
margin: 0 6px 0 2px;
user-select: none;
}
.shadow-offset-label {
display: inline-block;
font-size: var(--editor-control-font-size);
margin: 0 var(--panel-checkbox-label-gap) 0 0;
user-select: none;
vertical-align: middle;
text-align: left;
}
/* The single-cell shadow rows (Blur and Type) get a fixed-width label so
their inputs line up at the same X. X/Y stay auto-width — they're
intentionally not aligned with Blur/Type. */
.shadow-offset-row > .shadow-offset-div:only-child > .shadow-offset-label {
width: 32px;
}
/* "Source" is a full word, so it keeps its natural width and gets the standard
label→control gap before the Fill / Stroke toggle (not the 32px column the
short X/Y/Blur labels use, which would crowd it). */
.shadow-type-row > .shadow-offset-label {
margin-right: var(--panel-checkbox-label-gap);
}
/* X and Y labels (the multi-cell shadow row) get the standard
--panel-checkbox-label-gap of right margin to their input — a bit wider
than the default --panel-control-gap so the short labels don't crowd
their fields. */
.shadow-offset-row > .shadow-offset-div:not(:only-child) > .shadow-offset-label {
margin-right: var(--panel-checkbox-label-gap);
}
/* Wrapper for one (label + input) pair in a shadow offset row. The wrapper
is --details-row-height tall and centers its children at their natural
height — neither the label nor the input is forced to a row height. */
.shadow-offset-div {
display: inline-flex;
align-items: center;
/* No vertical pad here — the enclosing .shadow-offset-row already supplies the
single inter-line gap. Padding both would double it on the X/Y and Blur rows
(they'd sit taller than the colour and Type rows). */
margin: 0;
/* Each offset cell shares the flex row so its formula input can grow. */
flex: 1 1 0;
min-width: 0;
}
.gradient-location-types {
font-size: var(--editor-control-font-size);
margin: 0 6px 0 6px;
border: var(--editor-control-border);
outline-color: var(--editor-text-color);
color: var(--editor-text-color);
}
.gradient-offset-input {
position: relative;
width: 25px;
font-size: var(--editor-control-font-size);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
margin: 0 3px 0 0;
}
.shadow-offset-input {
position: relative;
/* Formula-capable (Blur, and the X/Y offsets) — grow into spare row
width, capped so a lone Blur field doesn't span the whole panel. */
flex: 1 1 0;
width: auto;
min-width: 35px;
max-width: 150px;
font-size: var(--editor-control-font-size);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
margin: 0;
}
.image-div {
display: inline-block;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
/* Between-group gap separating the vertical-align group from the horizontal
one — clearly wider than the within-group spacing, but not a full indent. */
margin-left: 16px;
}
.export-div {
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
line-height: normal;
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}
/* The shadow X/Y + Blur rows live in this wrapper; it's just the indent — the
rows inside set their own height, so they stack with normal spacing. */
.shadow-div {
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}
/* Shadow tree — three levels (Shadows root → item → shadow leaf). Rows use the
customizable inter-row spacing (--details-row-pad); each level indents by 14px
(set inline); the selected row gets the selection blue. */
ul.shadow-tree {
list-style: none;
/* Indent the whole tree to level 1 (one --panel-indent), like other nested
panel content; per-row level nesting is added on top via inline paddingLeft. */
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
padding: 0;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
.shadow-tree-row {
display: flex;
align-items: center;
gap: 6px;
padding: var(--details-row-pad) 4px;
cursor: pointer;
}
.shadow-tree-row:hover {
background: color-mix(in srgb, var(--editor-selected-blue) 10%, transparent);
}
.shadow-tree-row.selected {
background: color-mix(in srgb, var(--editor-selected-blue) 16%, transparent);
box-shadow: inset 2px 0 0 var(--editor-selected-blue);
}
.shadow-tree-row.drop-before { box-shadow: inset 0 2px 0 var(--editor-selected-blue); }
.shadow-tree-row.drop-after { box-shadow: inset 0 -2px 0 var(--editor-selected-blue); }
/* Dropping a dragged shadow ONTO a whole row (an item, or the Shadows root) to copy it. */
.shadow-tree-row.drop-onto {
box-shadow: inset 0 0 0 2px var(--editor-selected-blue);
background: color-mix(in srgb, var(--editor-selected-blue) 12%, transparent);
}
.shadow-tree-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Per-row colour swatch (its background colour is set inline to the canvas colour
so a partially transparent shadow composites correctly). */
.shadow-row-swatch {
flex: 0 0 16px;
height: 16px;
border-radius: 3px;
border: var(--editor-control-border);
}
/* An IMAGE fill's swatch: a picture TYPE SYMBOL centred in the swatch box rather than a
colour. The glyph is an inner , so without an explicit size it falls back to the browser's big/bold default and reads
as a major heading. Only .trigger-group styled it before, leaving the Connections list big. */
font-size: var(--editor-control-font-size);
font-weight: 600;
color: var(--header-3-color);
}
/* Trigger item-name heading: same structural role as the connection
start→end heading, but a level dimmer so it doesn't visually compete
with the parent "Triggers" section heading. Carry the standard row
padding so the heading sits one inter-line gap above its behaviour rows
(the shared .interaction-start-end-heading has no vertical rhythm). */
.trigger-group .interaction-start-end-heading {
font-size: var(--editor-control-font-size);
font-weight: 600;
color: var(--header-3-color);
padding-top: var(--details-row-pad);
padding-bottom: var(--details-row-pad);
}
/* In a trigger row, the activation-types select sits flush with the
row's left edge — no need for the connection rows' 12px indent to
line up under a separate start→end heading. */
.trigger-group .activation-types {
margin-left: 0;
}
/* Heading text + arrow as one flex item; takes the available width so
the add-behavior control is pushed to the right edge of the panel. */
.interaction-title {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
}
/* Connector arrow between the start and end item names. */
.interaction-arrow {
flex: none;
width: 22px;
height: 8px;
margin: 0 6px;
fill: none;
stroke: var(--editor-muted-text-color, #8e8c9e);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Add-behavior (+) and delete-connection (-) controls: grouped at the
right edge of the connection heading, vertically centered. */
.connection-controls {
display: inline-flex;
align-items: center;
gap: var(--panel-control-gap);
margin-left: auto;
margin-right: var(--panel-control-gap);
}
.connection-controls .routing-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--header-2-color);
cursor: pointer;
white-space: nowrap;
}
.connection-controls .routing-toggle input {
margin: 0;
cursor: pointer;
}
/* Section-wide routing toggle at the end of the Connections list —
flips every selected connection between orthogonal and straight. */
.connections-routing-all {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--header-2-color);
cursor: pointer;
white-space: nowrap;
margin-top: 0;
padding-top: 8px;
border-top: 1px solid var(--panel-border-color, rgba(128, 128, 128, 0.2));
}
.connections-routing-all input {
margin: 0;
cursor: pointer;
}
/* Behavior row: activation + action selects, with the delete (-)
control pushed to the right edge and vertically centered. */
.interaction-behavior-row {
display: flex;
align-items: center;
/* Standard gap between the row's controls (activation select, action
select/label, delete) so a trigger's two adjacent selects aren't flush. */
column-gap: var(--panel-control-gap);
/* Same inter-row gap the other prototype rows use, so the activation/action row
lines up with the property rows below it. */
padding-top: var(--details-row-pad);
padding-bottom: var(--details-row-pad);
}
/* The activation / action selects must shrink (not overflow) in a narrow panel. */
.interaction-behavior-row > select {
min-width: 0;
max-width: 100%;
}
.interaction-behavior-row .delete-behavior-div {
margin-left: auto;
flex: 0 0 auto;
}
.miter-limit-text-input {
width: 40px;
margin: 0;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
vertical-align: middle;
}
.miter-limit-label,
.stroke-join-label {
display: inline-block;
width: 74px;
font-size: var(--editor-control-font-size);
margin: 0 var(--panel-checkbox-label-gap) 0 0;
text-align: left;
vertical-align: middle;
}
#stroke-join {
margin: 0;
vertical-align: middle;
}
p.file-name-p {
display: block;
line-height: normal;
margin: 0 0 0 6px;
text-align: left;
word-wrap: normal;
width: 140px;
}
/* Detailed color editor and constraint controls. */
/* Row that holds R/G/B inputs on the left and the palette area on the right. */
/* Stack the picker's lower sections vertically: RGB row, then the palette,
then the colour tokens. Tight gap so the RGB sits close to the palette. */
.color-picker-bottom-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
margin-top: 0;
}
.color-picker-palette-area {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* RGB across, centred, with breathing room on the left and right of the line. */
.color-parts-div {
display: flex;
flex-direction: row;
justify-content: center;
gap: 10px;
padding: 0 10px;
}
/* Colour-tokens section at the bottom of the picker. The swatch grid wraps to
only as many rows as needed. The margin-top adds room between the palette
(colours) line above and this section's divider. */
.color-picker-tokens {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 0;
border-top: 1px solid var(--editor-panel-separator-color, var(--editor-control-border-color));
padding-top: 6px;
}
.color-picker-tokens-label {
font-size: var(--editor-control-font-size);
opacity: 0.7;
}
.color-picker-token-link {
display: flex;
align-items: center;
gap: 6px;
}
.color-part-div {
display: flex;
align-items: center;
gap: 6px;
}
.color-part-label {
flex-shrink: 0;
width: 12px;
text-align: right;
font-size: var(--editor-control-font-size);
}
.color-part-percentage-label {
flex-shrink: 0;
font-size: var(--editor-control-font-size);
}
.color-part-input {
width: 30px;
flex-shrink: 0;
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
}
.color-picker-div .add-palette-color-icon {
height: 12px;
}
/* Palette swatches are a uniform 14px swatch size across the picker. */
.palette-color-div {
height: 14px;
width: 14px;
flex-shrink: 0;
border: 2px solid var(--editor-control-border-color);
border-radius: 2px;
}
.palette-colors-div {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px;
position: relative;
margin: 0;
width: 100%;
}
.missing-triangle-div {
display: inline-block;
height: 10px;
width: 8px;
}
.constraints-div {
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
display: flex;
align-items: center;
gap: 12px;
}
/* Layout / Override chooser shown when the selected item is inside an auto-layout
frame — sits above the constraint grid, spanning the panel width. */
.constraints-layout-note {
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}
.constraints-mode-radio {
display: flex;
align-items: center;
gap: 16px;
}
.constraints-radio {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
white-space: nowrap;
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
}
.constraints-radio input {
margin: 0;
}
/* Scoped past the panel-wide `.details-div p` rule (0,1,1), which forces every panel
to a 14px inline-block glyph label — that collapsed this caption to one word per line. */
.constraints-layout-note .constraints-note-text {
display: block;
width: auto;
margin: 0 0 0 0;
color: var(--editor-muted-text-color);
font-size: var(--editor-control-font-size);
line-height: 1.35;
text-align: left;
}
/* Per-child auto-layout sizing (Fill/Stretch + Fill limits), under the Layout/Override
radio. Wide gap BETWEEN the two field groups; tight gap between each label + control. */
.layout-child-sizing-row {
display: flex;
align-items: center;
gap: 22px;
margin-top: 0;
}
.layout-child-field {
display: flex;
align-items: center;
gap: 5px;
}
.layout-child-field label {
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
white-space: nowrap;
}
.layout-child-sizing-row .layout-input {
width: 48px;
}
/* 3×3 grid: corner cells empty, edge cells hold the constraint handles,
center cell holds the inner bordered box. */
.constraints-outer-box {
flex-shrink: 0;
box-sizing: border-box;
width: 60px;
height: 57px;
border: 2px solid var(--editor-control-border-color);
display: grid;
grid-template-columns: 1fr 32px 1fr;
grid-template-rows: 1fr 31px 1fr;
}
.constraints-top-box {
grid-column: 2;
grid-row: 1;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 1px;
cursor: pointer;
}
.constraints-top {
width: 3px;
height: 9px;
background-color: var(--editor-constraint-line-color);
}
.constraints-bottom-box {
grid-column: 2;
grid-row: 3;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 1px;
cursor: pointer;
}
.constraints-bottom {
width: 3px;
height: 9px;
background-color: var(--editor-constraint-line-color);
}
.constraints-left-box {
grid-column: 1;
grid-row: 2;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 1px;
cursor: pointer;
}
.constraints-left {
height: 3px;
width: 9px;
background-color: var(--editor-constraint-line-color);
}
.constraints-right-box {
grid-column: 3;
grid-row: 2;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 1px;
cursor: pointer;
}
.constraints-right {
height: 3px;
width: 9px;
background-color: var(--editor-constraint-line-color);
}
.constraints-inner-box {
grid-column: 2;
grid-row: 2;
box-sizing: border-box;
border: 2px solid var(--editor-control-border-color);
position: relative;
}
/* Vertical and horizontal center handles overlap inside the inner box.
Each is absolutely positioned to occupy its own axis-centered strip,
with a shared 3px bar in the middle rendered by the inner element. */
.vertical-center-box {
position: absolute;
inset: 0 35% 0 35%;
display: flex;
justify-content: center;
cursor: pointer;
}
.vertical-center {
width: 3px;
background-color: var(--editor-constraint-line-color);
}
.horizontal-center-box {
position: absolute;
inset: 35% 0 35% 0;
display: flex;
align-items: center;
cursor: pointer;
}
.horizontal-center {
width: 100%;
height: 3px;
background-color: var(--editor-constraint-line-color);
}
/* Label + select pairs laid out as a two-column grid. */
.constraints-details-div {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 4px 6px;
}
.constraints-label {
font-family: var(--editor-font-family);
color: var(--editor-muted-text-color);
font-size: var(--editor-control-font-size);
}
#horizontal-constraint,
#vertical-constraint {
color: var(--editor-text-color);
width: 106px;
}
/* Eyedropper and color-picker mode controls. */
.eyedropper {
height: 20px;
display: block;
}
.color-picker-mode-cancel-icon {
position: relative;
top: -2px;
height: 25px;
}
.color-picker-eyedropper-btn {
background: none;
border: none;
cursor: pointer;
border-radius: var(--corner-radius-sm);
padding: 3px 5px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: var(--editor-icon-muted-opacity);
margin: 0 0 3px;
}
.color-picker-eyedropper-btn:hover {
background-color: transparent;
opacity: 1;
}
.color-picker-eyedropper-active {
background-color: var(--tool-active-bg, #e3e8f2);
outline: var(--selection-border-width) solid var(--editor-selected-blue);
outline-offset: calc(-1 * var(--selection-border-width));
opacity: 1;
}
/* Interaction targets, modifiers, variables, and conditional fields.
Labels in this group baseline-align with their adjacent text input via
`vertical-align: middle` (the inputs already use it from the shared
text-input rule), so the label text sits centered to the input box. */
.drop-target-label,
.scroll-target-label,
.delay-label,
.set-to-label {
vertical-align: middle;
font-size: var(--editor-control-font-size);
margin: 0 6px 0 12px;
}
.drop-targets,
.scroll-targets {
font-size: var(--editor-control-font-size);
}
.snap-back-label,
.select-target-label,
.show-toolbar-label,
.allow-zoom-label,
.allow-scroll-label {
position: relative;
top: -2px;
font-size: var(--editor-control-font-size);
}
.snap-back-checkbox,
.select-target-checkbox,
.show-toolbar-checkbox,
.allow-zoom-checkbox,
.allow-scroll-checkbox {
margin: 0 var(--panel-checkbox-label-gap) 0 12px;
}
.hovering-select-checkbox,
.ctrl-checkbox {
position: relative;
top: 1px;
margin: 0 var(--panel-checkbox-label-gap) 0 12px;
}
.ctrl-checkbox,
.shift-checkbox,
.alt-checkbox,
.caps-lock-checkbox,
.num-lock-checkbox {
position: relative;
top: 1px;
margin: 0 var(--panel-checkbox-label-gap) 0 12px;
}
/* When a checkbox starts a new group on the same row, widen its left margin
so adjacent [checkbox][label] pairs read as visually separated groups
rather than a continuous strip. The first checkbox in each row keeps its
smaller leading indent (above). */
.ctrl-checkbox,
.alt-checkbox,
.num-lock-checkbox,
.select-target-checkbox {
margin-left: var(--panel-pair-gap);
}
.additional-ib-properties,
.additional-var-properties {
/* Indent the rows to level 1, under the section heading, and space them on
the shared inter-row gap (was a fixed 3px bottom margin). A flex row so a
wide text field fills the remaining width and shrinks instead of running off
the panel; wrap keeps multi-checkbox rows tidy when the panel is narrow. */
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 2px;
margin: 0 var(--panel-right-gutter, 12px) 0 var(--panel-indent);
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
}
/* The single wide field in a property row (a URL, an expression, a target select)
fills the space left of the label and shrinks with the panel — no overflow. */
.additional-ib-properties > .link-input,
.additional-ib-properties > .set-to-text-input,
.additional-ib-properties > .if-condition,
.additional-ib-properties > .then-statement,
.additional-ib-properties > .else-statement,
.additional-ib-properties > .drop-targets,
.additional-ib-properties > .scroll-targets {
flex: 1 1 90px;
min-width: 0;
width: auto;
box-sizing: border-box;
}
/* Shared visual styling for editable text inputs in the prototype panel —
matches the design-panel text inputs (color hex, stroke width, etc.).
Width and margin remain per-instance since they're content-specific. */
.delay-input,
.key-down-input,
.playback-zoom-input,
.user-variable-name-input,
.user-variable-initial-value-input,
.link-input,
.set-to-text-input,
.if-condition,
.then-statement,
.else-statement {
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
vertical-align: middle;
font-size: var(--editor-control-font-size);
}
.delay-input {
position: relative;
top: -1px;
width: 40px;
/* flex-basis pins the width against the `.details-scroll input { width:
100% }` override in the flex .additional-ib-properties row. */
flex: 0 0 40px;
}
.star-depth-slider {
display: inline-block;
position: relative;
margin: 0 var(--panel-control-gap) 0 0;
width: 100px;
vertical-align: middle;
}
.hovering-select-label {
font-size: var(--editor-control-font-size);
}
/* Match the variable-name label column (fixed width, inline-block) so the
key input lines up under the variable inputs above it. */
.key-down-label {
display: inline-block;
margin: 0 3px 0 12px;
width: 42px;
font-size: var(--editor-control-font-size);
}
/* Playback "Zoom %" label — wider than the standard 42px column and
no-wrap so the input doesn't get pushed to a second line. */
.playback-zoom-label {
display: inline-block;
margin: 0 3px 0 12px;
width: 60px;
white-space: nowrap;
font-size: var(--editor-control-font-size);
}
.key-down-input,
.playback-zoom-input {
margin: 0 3px;
width: 70px;
/* flex-basis pins the width against the `.details-scroll input { width:
100% }` override in the flex .additional-ib-properties row. */
flex: 0 0 70px;
box-sizing: border-box;
}
.ctrl-label,
.shift-label,
.alt-label,
.caps-lock-label,
.num-lock-label {
font-size: var(--editor-control-font-size);
}
/* Frame-transition sub-group (navigate / back behaviors). Selects are fluid so
the `.details-scroll select { width: 100% }` override can't push them off the
panel; the duration box pins a small flex-basis (flex-basis beats width). */
.transition-label {
margin: 0 3px 0 12px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
.transition-type-select,
.transition-dir-select,
.transition-easing-select {
flex: 1 1 90px;
min-width: 0;
max-width: 100%;
}
.transition-duration-input {
flex: 0 0 56px;
width: 56px;
box-sizing: border-box;
}
.transition-ms-label {
margin: 0 3px;
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
}
/* Animate action (property animation) controls. Numeric boxes pin a small
flex-basis so the width override can't stretch them; the easing select is
fluid. */
.animate-check {
flex: 0 0 auto;
margin: 0 2px 0 12px;
}
/* Track label after a checkbox (Fade to / Move to / …): standard gap to its
control on the right; small gap after the checkbox on the left. */
.animate-label {
margin: 0 var(--panel-control-gap) 0 4px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
/* A leading label with no checkbox (Duration / Easing) lines up with the
checkbox column above it rather than the row's left edge. */
.animate-lead-label {
margin-left: 12px;
}
.animate-axis-label {
margin: 0 2px;
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
}
.animate-num-input {
flex: 0 0 48px;
width: 48px;
box-sizing: border-box;
text-align: var(--number-input-align, right);
}
.animate-easing-select {
flex: 1 1 90px;
min-width: 0;
max-width: 100%;
}
/* Move-to coordinates: x and y each on their own line, indented one level
under the "Move to" checkbox. */
.animate-subrow {
margin-left: calc(var(--panel-indent) * 2);
}
.animate-sub-label {
margin-right: var(--panel-control-gap);
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
}
/* Coordinate box holds a value WITH its unit as part of the control
(e.g. "120 mm"), so it's wider; honors the number-alignment preference. */
.animate-move-input {
flex: 0 0 96px;
width: 96px;
box-sizing: border-box;
text-align: var(--number-input-align, right);
}
/* Preview progress: a temporary status bar shown only while a preview plays. */
.animate-preview-status {
align-items: center;
}
.animate-preview-track {
flex: 1 1 auto;
min-width: 0;
height: 6px;
margin-left: 12px;
background: var(--editor-input-bg);
border: 1px solid var(--editor-control-border-color);
border-radius: 3px;
overflow: hidden;
}
.animate-preview-fill {
height: 100%;
background: var(--prototype-accent);
transition: width 0.05s linear;
}
.animate-preview-status-label {
flex: 0 0 auto;
margin: 0 12px 0 8px;
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
}
/* Preview button: plays the animation once in the editor. Sits at the row's
left edge under the animate tracks. */
.animate-preview-btn {
flex: 0 0 auto;
margin-left: 12px;
padding: 2px 10px;
font-size: var(--editor-control-font-size);
color: var(--prototype-accent);
background: transparent;
border: 1px solid var(--prototype-accent);
border-radius: var(--corner-radius-sm);
cursor: pointer;
}
.animate-preview-btn:hover {
background: color-mix(in srgb, var(--prototype-accent) 12%, transparent);
}
.link-label {
margin: 0 var(--panel-control-gap) 0 12px;
font-size: var(--editor-control-font-size);
}
.link-input {
position: relative;
margin: 0 3px;
width: 180px;
}
.user-variable-list,
.user-variable-type-list {
max-width: 160px;
margin: 0 3px;
font-size: var(--editor-control-font-size);
}
.user-variable-name-label,
.user-variable-list-label,
.user-variable-type-label,
.user-variable-initial-value-label {
display: inline-block;
margin: 0 3px 0 12px;
width: 42px;
font-size: var(--editor-control-font-size);
}
.user-variable-name-input {
margin: 0 3px;
width: 140px;
}
.user-variable-initial-value-input {
margin: 0 3px;
width: 140px;
}
/* ── Variables section (prototype panel) ─────────────────────────────────
Row-per-variable layout. The header has a "+" button to add; each row
carries inputs for name, type, initial value, and a delete button. */
.variables-empty {
margin: 0 0 0 var(--panel-indent);
margin-right: 12px;
font-size: var(--editor-control-font-size);
line-height: 1.35;
opacity: 0.7;
}
.variables-table {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 12px 0 var(--panel-indent);
}
.variables-row {
display: grid;
/* Fixed delete column (icon box = 18px + 1px padding) so the header row's
empty delete cell and the data rows' minus button share the same width —
otherwise the `auto` column is 0 in the header and the columns don't line
up with the inputs below. */
grid-template-columns: 1fr 84px 1fr 20px;
column-gap: 6px;
align-items: center;
}
.variables-row > .variables-delete-icon {
justify-self: end;
}
.variables-header-row {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--editor-muted-text-color);
text-transform: uppercase;
margin-bottom: 0;
}
.variables-name-input,
.variables-value-input {
width: 100%;
min-width: 0;
padding: 1px 4px;
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
box-sizing: border-box;
}
.variables-type-select {
width: 100%;
min-width: 0;
font-size: var(--editor-control-font-size);
box-sizing: border-box;
}
.set-to-text-input {
width: 180px;
}
.conditional-label {
display: inline-block;
width: 32px;
margin: 0 var(--panel-control-gap) 0 12px;
font-size: var(--editor-control-font-size);
}
.if-condition,
.then-statement,
.else-statement {
width: 170px;
}
.vi-textarea-text {
display: block;
box-sizing: border-box;
width: calc(100% - var(--panel-indent) - var(--panel-right-gutter));
font-family: var(--editor-font-family);
font-size: var(--editor-control-font-size);
/* Carry the half inter-row gap top/bottom so the text box isn't cramped
against the align row above and the next section below. */
margin: var(--details-row-pad) var(--panel-right-gutter) var(--details-row-pad) var(--panel-indent);
}
/* The Text panel's rich-text editing area: a contentEditable that renders the
item's styled runs so you can select a range and restyle just that part. */
.vi-rich-text {
display: block;
box-sizing: border-box;
width: calc(100% - var(--panel-indent) - var(--panel-right-gutter));
min-height: 3.5em;
max-height: 220px;
overflow-y: auto;
padding: 6px 8px;
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
/* Fallback; the component sets the exact canvas colour inline (ge.vc.backgroundColor). */
background: var(--canvas-background-color);
white-space: pre-wrap;
word-break: break-word;
outline: none;
margin: var(--details-row-pad) var(--panel-right-gutter) var(--details-row-pad) var(--panel-indent);
}
.vi-rich-text:focus {
border-color: var(--editor-selected-blue);
}
/* Placeholder for an empty editor (contentEditable has no native placeholder). */
.vi-rich-text:empty::before {
content: attr(data-placeholder);
color: var(--editor-text-muted-color, #888);
pointer-events: none;
}
/* Pen ring controls and generic rotation helpers. */
.clearfix::after {
content: "";
display: table;
clear: both;
}
.rings-div {
/* Relative flow (not absolutely nudged) so the prev/next triangles line up
inline with the ring name and the rest of the pen-mode row. */
display: inline-flex;
align-items: center;
margin-left: 5px;
}
.ring-descr-div {
display: inline-flex;
align-items: center;
/* Prev/next triangles sit well clear of the "Ring" label. */
margin-right: 18px;
}
#ring-p {
font-size: 12px;
font-weight: bold;
margin: 0;
}
.ring-icon {
display: inline-block;
width: var(--editor-small-icon-size);
/* Dim at rest, brighten on hover — same as the plus/minus icon-buttons
(the :hover rule already sets opacity:1). */
opacity: var(--editor-icon-muted-opacity);
}
.rotate-90 {
transform: rotate(90deg);
}
.rotate-180 {
transform: rotate(180deg);
}
.rotate-270 {
transform: rotate(270deg);
}
.stroke-align-select {
margin-left: 0;
vertical-align: middle;
}
p.sides-p {
width: 35px;
}
.sides-dim {
width: 100px;
}
/* Dark theme overrides. Colors come from CSS variables that the
PreferencesProvider sets on :root. The non-color tweaks here adjust
the few hard-coded swatches, borders, and form-control surfaces that
wouldn't track those variables on their own. */
[data-theme="dark"] {
color-scheme: dark;
--canvas-background-color: #0c0e12;
--panel-border-color: #2a2c33;
--code-accent: #4ec78e;
--data-accent: #e05cc0;
--prototype-accent: #f0a35e;
/* Buttons use a MUTED green here (not the bright text accent above) with white
text, so a filled code button doesn't glare on the dark canvas. */
--code-accent-btn: #1a805a;
--code-accent-fg: #fff;
/* Darker amber fill so white text passes contrast on the dark canvas
(the light --prototype-accent above stays for accent text/lines). */
--prototype-accent-btn: #bd5a12;
--prototype-accent-fg: #fff;
--editor-border-color: #2a2c33;
/* Code-editor pane syntax-highlight palette (dark theme). */
--syn-comment: #6a9955;
--syn-keyword: #569cd6;
--syn-string: #ce9178;
--syn-number: #b5cea8;
--syn-boolean: #569cd6;
--syn-tag: #569cd6;
--syn-attr: #9cdcfe;
--syn-prop: #9cdcfe;
--syn-punct: #b8b8c0;
/* Form-control surface and a section-title color that sits midway
between the bright body text and the muted labels so titles read
as a quieter "structural" element instead of glare. */
--editor-input-bg: #15171c;
--editor-input-bg-disabled: #1f2126;
--editor-input-text-color: #b9b7c5;
--header-1-color: #d9d8e3;
--header-2-color: #c9c7d6;
--header-3-color: #8f8d9e;
--tree-list-bg: #0e1014;
--tool-active-bg: #383b44;
--tool-button-bg: #34373f;
--tree-selection-bg: rgba(16, 151, 226, 0.30);
/* Focused-control ring. Sits clearly above the input-bg / panel
surfaces but well below body text, so the focus state reads as
"marked" without the bright white glare the browser default
produces on top of the dark panels. */
--input-focus-outline: #4a4d57;
/* Dark-mode action-button surface. */
--button-bg: #23252b;
--button-bg-hover: #2e3038;
--button-text: var(--editor-text-color);
}
[data-theme="dark"] .tools-group {
border-color: #2f323a;
}
[data-theme="dark"] .tools button {
background: var(--tool-button-bg);
}
[data-theme="dark"] .tool {
background: #ffffff08;
}
[data-theme="dark"] #text-area {
color: #e8e8ee;
}
[data-theme="dark"] .hdr {
color: #6c707b;
opacity: 1;
}
/* Tree panel reads as the darkest "structural" surface so its content
stands out from the brighter details panel. */
[data-theme="dark"] .tree-div {
background-color: var(--tree-list-bg);
}
/* Tool/details/tree icons ship as dark glyphs on a light surface. On
dark theme, invert their luminance so the strokes become near-white
against the now-dark panels, with a hue-rotate to keep colored
accents roughly where they were. Top-toolbar icons (play, share,
user, notifications, zoom-plus/minus, etc.) are NOT inverted —
they're already drawn as light glyphs and the top toolbar stays
dark in both themes. */
[data-theme="dark"] .tool-icon,
[data-theme="dark"] .pen-icon,
[data-theme="dark"] .align-icon,
[data-theme="dark"] .arrow-icon,
[data-theme="dark"] .cap-icon-img,
[data-theme="dark"] .corners-icon,
[data-theme="dark"] .corner-count-icon,
[data-theme="dark"] .angle-icon,
[data-theme="dark"] .star-ratio-icon,
[data-theme="dark"] .line-width-icon,
[data-theme="dark"] .stroke-width-icon,
[data-theme="dark"] .add-fill-icon,
[data-theme="dark"] .unify-paint-icon,
[data-theme="dark"] .paint-row-none,
[data-theme="dark"] .add-palette-color-icon,
[data-theme="dark"] .add-stroke-icon,
[data-theme="dark"] .add-behavior-icon,
[data-theme="dark"] .add-variable-icon,
[data-theme="dark"] .add-trigger-icon,
[data-theme="dark"] .add-group-icon,
[data-theme="dark"] .remove-groups-icon,
[data-theme="dark"] .delete-color-icon,
[data-theme="dark"] .delete-stroke-icon,
[data-theme="dark"] .delete-gradient-icon,
[data-theme="dark"] .delete-gradient-color-icon,
[data-theme="dark"] .delete-behavior-icon,
[data-theme="dark"] .delete-ring-icon,
[data-theme="dark"] .variables-delete-icon,
[data-theme="dark"] .delete-trigger-icon,
[data-theme="dark"] .page-list-plus-icon,
[data-theme="dark"] .page-list-minus-icon,
[data-theme="dark"] .templates-add-icon,
[data-theme="dark"] .templates-delete-icon,
[data-theme="dark"] .minus-variable-icon,
[data-theme="dark"] .page-triangle-img,
[data-theme="dark"] .section-triangle-img,
[data-theme="dark"] .dim-subtriangle,
[data-theme="dark"] .tree-triangle-img,
[data-theme="dark"] .tree-type-icon,
[data-theme="dark"] .corners-triangle,
[data-theme="dark"] .line-width-triangle,
[data-theme="dark"] .sight-icon,
[data-theme="dark"] .eyedropper,
[data-theme="dark"] .color-picker-mode-cancel-icon,
[data-theme="dark"] .ring-icon,
[data-theme="dark"] .group-icon,
[data-theme="dark"] .union-icon,
[data-theme="dark"] .outline-icon,
[data-theme="dark"] .exclude-icon,
[data-theme="dark"] .intersect-icon,
[data-theme="dark"] .subtract-icon,
[data-theme="dark"] .mask-icon,
[data-theme="dark"] .palette,
[data-theme="dark"] .selected-icon,
[data-theme="dark"] .scale-skew-icon,
[data-theme="dark"] .cap-link-toggle,
[data-theme="dark"] .token-link-icon {
filter: invert(0.94) hue-rotate(180deg) brightness(1.02);
}
/* ── Standard control sizing (Design + Prototype panels) ───────────────────
Every edit box (text/number) and drop-down in the right-hand panels shares
ONE height and ONE text size, so rows read as a consistent grid. Widths are
deliberately left per-control (a font name needs more room than a px value),
so this rule never touches `width` or `box-sizing` — height is pinned by
font-size + line-height + vertical padding + border, which lands at the same
outer height whether a control was content-box or border-box. Selects that
were unstyled (native) also pick up the shared border/radius here. Excludes
checkbox/radio/color/range (not listed) and textarea (multi-line). */
.details-scroll input[type="text"],
.details-scroll input[type="number"],
.details-scroll input[type="search"],
.details-scroll input:not([type]),
.details-scroll select,
/* Left-panel edit boxes that need the SAME flat control look (the flat border/
radius is otherwise scoped to .details-scroll, so these fell back to the
browser's inset 3-D input) — e.g. the flow inspector's node / branch labels. */
.flow-node-label,
.flow-conn-label,
.flow-condition {
/* Fill the inspector's width (leaving its padding as the right gutter) instead
of the browser's intrinsic input width — matching every other panel field. */
box-sizing: border-box;
width: 100%;
font-size: var(--editor-control-font-size);
line-height: var(--editor-control-line-height);
padding-top: var(--editor-control-pad-y);
padding-bottom: var(--editor-control-pad-y);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
}
/* The Diagrams-mode FlowNode inspector renders real paragraph captions (condition
hints, variable lists, validation notes). Exempt them from the panel-wide
`.details-div p` rule (0,1,1) that forces every panel
into a 14px inline-block
glyph-label box — that collapsed these captions to one word per line. The two-class
selector (0,2,1) beats it; each
keeps its own inline margin. */
.details-div .flow-node-section p {
display: block;
width: auto;
}
/* Segmented Manual / Automatic layout toggle in the diagram inspector (right panel). */
.flow-layout-toggle {
display: flex;
width: fit-content;
border: 1px solid var(--editor-border-color);
border-radius: 5px;
overflow: hidden;
}
.flow-layout-btn {
padding: 3px 12px;
border: none;
cursor: pointer;
font-size: 12px;
font-weight: 600;
background: transparent;
color: var(--editor-text-color);
}
.flow-layout-btn.active {
background: var(--code-accent-btn);
color: var(--code-accent-fg);
}
/* Give EVERY left-panel (.tree-div) edit box the app's flat control border — the
.details-scroll flat style above is right-panel-scoped, so left-panel inputs
otherwise fall back to the browser's inset 3-D input. Border/radius only (no
width or size assumptions), so it just flattens without reshaping any field. */
.tree-div input[type="text"],
.tree-div input[type="number"],
.tree-div input[type="search"],
.tree-div input:not([type]) {
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
}
/* Native combo boxes render a hair taller than a text input with the
same line-height/padding (UA min-block-size + dropdown metrics). Pin them to
the exact standard control height so every edit box and combo box in the
panel is the same size. Height = line-height + 2·pad-y + 2·1px border. */
.details-scroll select {
box-sizing: border-box;
height: calc(var(--editor-control-line-height) + 2 * var(--editor-control-pad-y) + 2px);
}
/* Form-control surface: every editable text/number input and select
inside the editor uses the panel-input variable for a dark
background. Input text is a touch dimmer than body text so the
labels (which use --editor-muted-text-color) and section titles
read with a clean hierarchy. Range sliders are excluded — the
browser's color-scheme: dark on :root re-skins them automatically. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input:not([type]),
[data-theme="dark"] textarea,
[data-theme="dark"] .flow-node-label,
[data-theme="dark"] .flow-conn-label,
[data-theme="dark"] .flow-condition,
[data-theme="dark"] select {
background-color: var(--editor-input-bg);
color: var(--editor-input-text-color);
border-color: var(--editor-control-border-color);
}
[data-theme="dark"] input[type="text"]:disabled,
[data-theme="dark"] input[type="number"]:disabled,
[data-theme="dark"] input:not([type]):disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled {
background-color: var(--editor-input-bg-disabled);
color: var(--editor-muted-text-color);
}
/* Color swatch borders need to read against the dark panel. */
[data-theme="dark"] .color-div,
[data-theme="dark"] .palette-color-div,
[data-theme="dark"] .constraints-outer-box,
[data-theme="dark"] .constraints-inner-box {
border-color: #4a4d57;
}
/* Item-tree row text & file-name text — explicit color so it sits
correctly on the darker tree panel surface. */
[data-theme="dark"] .item-tree-item p,
[data-theme="dark"] p.file-name-p {
color: var(--editor-text-color);
}
/* Project-image placeholder background on home page. */
[data-theme="dark"] .project-img-placeholder {
background-color: rgba(255, 255, 255, 0.03);
}
/* Top-toolbar glyphs ship in near-white (#DEDEDE) and read as overly
loud against the very dark toolbar. Dim them a touch in dark mode
so they sit at roughly the same visual weight as the rest of the
chrome. The standard-top-toolbar-icon class is the umbrella used by
most of these icons, so this single rule covers the bulk of them. */
[data-theme="dark"] .standard-top-toolbar-icon,
[data-theme="dark"] .tt-zoom-icon,
[data-theme="dark"] .logo-icon {
opacity: 0.85;
}
/* Disclosure triangles originally use --editor-icon-muted-opacity (0.6);
combined with the dark-theme invert filter that's too faint, so push
them up to stay readable. The page-list add/remove icons deliberately
stay at the muted 0.6 (via .page-list-plus-icon/.page-list-minus-icon)
so they recede like the design-panel section icons and titles. */
[data-theme="dark"] .page-triangle-img,
[data-theme="dark"] .section-triangle-img,
[data-theme="dark"] .corners-triangle,
[data-theme="dark"] .line-width-triangle,
[data-theme="dark"] .minus-variable-icon {
opacity: 0.9;
}
/* Zoom percentage reads as toolbar text by default — very bright in
dark mode. Match the design-panel input text color so it doesn't
draw the eye as much as the rest of the toolbar chrome. */
[data-theme="dark"] .zoom-percentage,
[data-theme="dark"] .zoom-percentage-textbox {
color: var(--editor-input-text-color);
}
/* Focused-control outline. Default browser behavior renders a bright
ring; the editor's per-input rules also set outline-color to the
bright editor-text-color. In dark mode, swap both to a softer
mid-gray that reads as "focused" without glaring. Buttons get the
same treatment so the focus ring across the Home / Customize /
Login / Signup / Images pages stays consistent. */
[data-theme="dark"] input:focus,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] select:focus,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] button:focus-visible {
outline: 2px solid var(--input-focus-outline);
outline-offset: -1px;
border-color: var(--input-focus-outline);
}
/* Page-level surface. The .App element already paints the panel
background across the whole viewport, but if any page is ever
sized smaller than the window, html/body fall back to the same
surface so the user never sees the browser's default white. */
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: var(--editor-panel-background-color);
}
html[data-theme="light"],
html[data-theme="light"] body {
background-color: var(--editor-panel-background-color);
}
/* ============================================================
Fill / stroke gradient editor
============================================================ */
.gradient-editor {
margin: 0 var(--panel-right-gutter, 12px) 0 var(--panel-indent);
/* Carry the half-gap like a row so it sits a full inter-row gap from its
neighbours (graphic blocks otherwise only get the neighbour's half). */
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
display: flex;
flex-direction: column;
gap: var(--details-row-gap);
}
/* Fill-type combo box, sat at the end of the color line. */
.gradient-type-select {
/* flex-basis (max-content) pins the width to the combo's own content so the
global `.details-scroll select { width: 100% }` rule can't stretch it to the
full panel width (which pushed it off the edge). All four fill controls —
swatch, hex, alpha, type — then fit on one line. */
flex: 0 0 max-content;
margin-left: auto;
margin-right: 8px;
padding: 2px 4px;
border: 1px solid var(--editor-control-border-color);
border-radius: var(--corner-radius-sm);
background-color: var(--editor-input-bg, var(--editor-panel-background-color));
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
}
/* Image-fill editor (Fill section, when the fill type is Image): a fit-mode row and a
"Select image" button that opens the gallery. A block below the colour line. */
.image-fill-editor {
margin: 0 var(--panel-right-gutter, 12px) 0 var(--panel-indent);
/* Carry the half-gap like a row (see .gradient-editor). */
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.image-fill-fit-row {
display: flex;
align-items: center;
gap: 8px;
align-self: stretch;
}
.image-fill-fit-row label {
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
.image-fill-fit {
flex: 1 1 0;
min-width: 0;
padding: 2px 4px;
border: 1px solid var(--editor-control-border-color);
border-radius: var(--corner-radius-sm);
background-color: var(--editor-input-bg, var(--editor-panel-background-color));
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
}
.image-fill-select { margin: 0; }
/* Custom / Tile manual scale + offset controls. Scale rows reuse .scale-skew-* styles. */
.image-fill-xform {
display: flex;
flex-direction: column;
gap: 5px;
align-self: stretch;
}
.image-fill-offset-row {
display: flex;
align-items: center;
gap: 6px;
}
.image-fill-offset-label {
flex: 0 0 auto;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
.image-fill-offset-axis {
flex: 0 0 auto;
font-size: var(--editor-control-font-size);
color: var(--editor-text-muted-color, #888);
}
.image-fill-offset-in {
flex: 1 1 0;
min-width: 0;
width: auto;
padding: 2px 4px;
border: 1px solid var(--editor-control-border-color);
border-radius: var(--corner-radius-sm);
background-color: var(--editor-input-bg, var(--editor-panel-background-color));
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
text-align: right;
}
/* Preview bar + draggable stop markers. */
.gradient-bar {
display: flex;
flex-direction: column;
/* Separate the ramp from the marker strip via flex gap — a margin here gets
zeroed by the panel's blanket margin reset, so the markers would ride up
onto the ramp. */
gap: 3px;
}
/* Preview bar: a checkerboard backdrop with the live gradient on top so
stop transparency reads correctly. */
.gradient-preview {
position: relative;
height: 18px;
overflow: hidden;
border: 1px solid var(--editor-control-border-color);
border-radius: var(--corner-radius-sm);
background-color: #ffffff;
background-image:
linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%),
linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
}
.gradient-preview-fill {
position: absolute;
inset: 0;
}
/* Strip below the preview bar holding the draggable stop markers. Height hugs
the 12px marker so no dead space opens up before the first color row (the
ramp↔marker gap lives on .gradient-bar). */
.gradient-marker-track {
position: relative;
height: 12px;
}
.gradient-marker {
position: absolute;
top: 0;
width: 12px;
height: 12px;
margin-left: -6px;
box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
cursor: ew-resize;
}
/* Indicator line spanning the full preview bar at each stop's location.
Rendered inside .gradient-preview (which clips it) so it covers the
whole bar height. */
.gradient-stop-indicator {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background-color: #ffffff;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
.gradient-stops {
display: flex;
flex-direction: column;
/* Stack the stop rows on the one inter-row gap (was a one-off 4px). */
gap: var(--details-row-gap);
}
.gradient-stop-row {
display: flex;
align-items: center;
gap: var(--panel-checkbox-label-gap);
}
/* The hex box carries a right margin for the non-flex solid color line; in
the flex stop row that margin stacks on top of the gap, so zero it here. */
.gradient-stop-row .color-text-input {
margin: 0;
}
.gradient-stop-color {
flex: none;
width: 28px;
height: 20px;
padding: 0;
border: 1px solid var(--editor-control-border-color);
border-radius: var(--corner-radius-sm);
background: none;
cursor: pointer;
}
.gradient-stop-alpha {
/* flex-basis (not width) so `.details-scroll input { width: 100% }` can't
stretch it across the row. */
flex: 0 0 52px;
box-sizing: border-box;
padding: 2px 4px;
border: 1px solid var(--editor-control-border-color);
border-radius: var(--corner-radius-sm);
background-color: var(--editor-input-bg, var(--editor-panel-background-color));
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
}
.gradient-stop-range {
flex: 1 1 auto;
min-width: 0;
}
/* The hex field in a gradient stop row: pin its basis so it (like the alpha
field) isn't stretched to 100% by `.details-scroll input`; the slider
(flex 1 1) then takes the remaining width. */
.gradient-stop-row .color-text-input {
flex: 0 0 64px;
width: 64px;
}
.gradient-stop-pos {
flex: none;
width: 34px;
text-align: right;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
/* Same bare-glyph look/feel as the other delete (minus) icons via the
.delete-color-icon class, at the standard small-icon size. */
.gradient-stop-remove {
flex: none;
height: var(--editor-small-icon-size);
}
.gradient-add-stop {
align-self: flex-start;
cursor: pointer;
}
.gradient-add-stop:hover {
opacity: 1;
}
/* Numeric start/end endpoint controls (the panel twin of the on-canvas handles).
Standard inter-row spacing: one --details-row-pad each side per row, plus one
before the whole block so it's a full row gap from the add-stop button above. */
/* The Start / End rows sit as two children of the .gradient-editor flex column,
which already puts one --details-row-gap between every block. So NO margin-top
here (that stacked on the parent gap → extra space above Start) and NO per-row
vertical padding (that stacked below End); the block's own `gap` spaces the two
rows by the same single inter-row gap. */
.gradient-endpoints {
display: flex;
flex-direction: column;
gap: var(--details-row-gap);
}
/* Proximity: the wide --panel-pair-gap separates the row's groups (the Start/End
label and the two X | Y pairs), while each axis label hugs its own input with
the tighter --panel-checkbox-label-gap below. Mirrors the .dim-row X/Y row. */
.gradient-endpoint-row {
display: flex;
align-items: center;
gap: var(--panel-pair-gap);
}
.gradient-endpoint-label {
flex: 0 0 40px;
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
}
/* One (axis label + input) pair. Each cell shares the row equally and grows,
so the two fields fill the extra width — mirrors the shadow X/Y offset row. */
.gradient-endpoint-cell {
display: inline-flex;
align-items: center;
flex: 1 1 0;
min-width: 0;
}
.gradient-endpoint-axis {
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
margin-right: var(--panel-checkbox-label-gap);
user-select: none;
}
/* Grow into the spare row width (flex-basis 0 + grow), beating
`.details-scroll input { width: 100% }` via flex. */
.gradient-endpoint-input {
flex: 1 1 0;
width: auto;
min-width: 0;
box-sizing: border-box;
padding: 2px 4px;
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
/* The gradient endpoint handles are drawn directly on the canvas by the
renderer (see render.ts drawGradientHandles) — no CSS overlay. */
/* ============================================================
Color-picker eyedropper overlay & magnifier loupe
============================================================ */
/* Transparent layer shown while the color picker is in eyedropper
mode. It covers only the canvas region (matching #canvas-div) so the
toolbars and panels stay usable; sits below the toolbar dropdown
menus (z-index 55–60) so those still open over it. */
.eyedropper-overlay {
position: fixed;
top: var(--top-toolbar-height);
left: calc(var(--left-toolbar-width) + var(--tree-width));
right: var(--details-width);
bottom: 0;
z-index: 50;
background: transparent;
cursor: crosshair;
}
/* The magnifier loupe — a zoomed view of the canvas pixels around the
cursor. Positioned (in viewport coords) in a canvas corner; round or
square per prefs. */
.eyedropper-loupe {
position: fixed;
box-sizing: content-box;
border: 3px solid #ffffff;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(0, 0, 0, 0.4);
overflow: hidden;
pointer-events: none;
background: #7a7a82;
}
.eyedropper-loupe.round {
border-radius: 50%;
}
.eyedropper-loupe.square {
border-radius: 10px;
}
.eyedropper-loupe canvas {
display: block;
}
/* ---- Components section (composition layer) ---- */
.templates-actions {
display: flex;
flex-wrap: wrap;
gap: var(--panel-control-gap);
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}
.templates-btn {
font-size: var(--editor-control-font-size);
padding: 3px 10px;
border: 1px solid var(--editor-border-color, rgba(128, 128, 128, 0.4));
border-radius: 4px;
background: transparent;
color: inherit;
cursor: pointer;
}
.templates-btn:disabled {
opacity: 0.4;
cursor: default;
}
.templates-instance-label {
margin: 0 0 0 var(--panel-indent);
font-size: var(--editor-control-font-size);
opacity: 0.85;
}
.templates-list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0 12px 0 var(--panel-indent);
}
.templates-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
column-gap: 8px;
align-items: center;
}
.templates-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.templates-count {
opacity: 0.6;
font-size: var(--editor-control-font-size);
}
.templates-delete-icon {
opacity: var(--editor-icon-muted-opacity);
height: var(--editor-small-icon-size);
cursor: pointer;
user-select: none;
}
/* Highlight the delete (−) on hover so it reads as an interactive button, across every
library section (colours / text styles / layouts). */
.templates-delete-icon:hover {
opacity: 1;
}
/* Component-instance badge (tree rows + library) */
/* Component/instance marker — a hollow diamond drawn as a rotated square so
it centers exactly (a ◇ text glyph sits off its optical center). */
.tree-instance-badge {
flex: 0 0 auto;
width: 7px;
height: 7px;
margin-right: 6px;
border: 1.5px solid var(--accent-color, #7a5cff);
transform: rotate(45deg);
box-sizing: border-box;
user-select: none;
}
/* In the tree, the diamond sits in a slot the same size as a type icon so
every row's text lines up regardless of icon vs. diamond. */
.item-tree-item .tree-instance-slot {
height: 16px;
width: 16px;
padding: 0 5px 0 0;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
}
.item-tree-item .tree-instance-slot .tree-instance-badge {
margin: 0;
}
/* The mid-purple is muddy against the near-black dark panels; lighten it
so the marker keeps clear contrast. */
[data-theme="dark"] .tree-instance-badge {
border-color: #b9a7ff;
}
/* A code-owned component (data node / UI control) uses the same diamond but in the
code green (the data-binding green), not the template accent — lightened for dark. */
.tree-instance-badge.tree-component-badge {
border-color: #15825a;
}
[data-theme="dark"] .tree-instance-badge.tree-component-badge {
border-color: #4ec78e;
}
/* A non-data (UI) component: a FILLED purple diamond — the standard glyph for
that component type (a template instance is the same purple, but outlined). */
.tree-instance-badge.tree-ui-component-badge {
border: none;
background-color: #7a5cff;
}
[data-theme="dark"] .tree-instance-badge.tree-ui-component-badge {
background-color: #b9a7ff;
}
/* Components library — left panel section (between Pages and the tree) */
.templates-panel-div {
padding: 8px 0;
}
.templates-panel-header {
display: flex;
align-items: center;
}
.templates-panel-heading {
margin: 0;
user-select: none;
display: inline-block;
vertical-align: middle;
color: var(--header-2-color);
}
.templates-add-div {
margin-left: auto;
/* Match the Pages header's right-edge gap (`.page-header-row` padding-right)
so the Templates "+" lines up horizontally with the Pages "+" — both sit in
the same tree panel, so a different gap left them visibly misaligned. */
margin-right: 10px;
display: inline-flex;
align-items: center;
}
.templates-add-icon {
opacity: var(--editor-icon-muted-opacity);
height: var(--editor-small-icon-size);
cursor: pointer;
user-select: none;
}
.templates-add-icon.disabled {
opacity: 0.25;
cursor: default;
}
/* Highlight the add (+) on hover so it reads as an interactive button — across every library
section (components / colours / text styles / layouts). Skips the disabled state. */
.templates-add-icon:not(.disabled):hover {
opacity: 1;
}
.templates-empty {
margin: 0 0 0 var(--panel-indent);
font-size: var(--editor-control-font-size);
opacity: 0.7;
}
.templates-panel-ul {
list-style: none;
/* Right margin matches the section "+" gap (.templates-add-div, 10px) so the
row "−" lines up under the "+" — and with every other assets section. */
margin: 0 10px 0 var(--panel-indent);
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.templates-panel-row {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
column-gap: 8px;
align-items: center;
/* Space the asset rows on the list / tree-view gap. */
padding-top: var(--list-row-pad); padding-bottom: var(--list-row-pad);
}
/* Template rows read as clickable links — highlight the whole row on hover. */
.template-link-row {
border-radius: var(--corner-radius-sm);
}
.template-link-row:hover {
background-color: var(--editor-hover-bg, rgba(127, 127, 127, 0.15));
}
/* In the library grid the column-gap already spaces the badge from the name,
so drop the badge's tree-row margin to tighten that gap. */
.templates-panel-row .tree-instance-badge {
margin-right: 0;
}
/* Colour-token rows: swatch | name | alpha | delete — so the minus sits at the
row's end like the other panels. The list's right gap matches the header's
"+" gap (14px) so the row "−" lines up vertically with the section "+"; the
name column (1fr) gives up the space. */
.color-tokens-ul {
margin-right: 10px;
}
/* Colour-mode switcher row above the token list: [Mode] [select ▾] [name] [+] [−]. */
.color-mode-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 10px 6px calc(var(--panel-indent) - 3px);
font-size: var(--editor-control-font-size);
}
.color-mode-label {
flex: 0 0 auto;
opacity: 0.7;
}
.color-mode-select {
flex: 0 0 auto;
min-width: 56px;
max-width: 120px;
box-sizing: border-box;
padding: 2px 4px;
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
background: var(--editor-input-bg, transparent);
}
.color-mode-name {
flex: 1 1 auto;
min-width: 0;
box-sizing: border-box;
padding: 2px 4px;
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
background: var(--editor-input-bg, transparent);
}
.templates-panel-row.color-token-row {
grid-template-columns: auto 1fr auto auto;
}
/* Opacity %. Matches the standard .alpha-input box (Fill/Stroke). */
.color-token-alpha {
width: 44px;
box-sizing: border-box;
padding: 2px 4px;
text-align: right;
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
background: var(--editor-input-bg, transparent);
vertical-align: middle;
}
/* Colour swatch. Matches the standard .color-div swatch (Fill/Stroke). */
.color-token-swatch {
width: 28px;
height: 20px;
padding: 0;
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
background: none;
cursor: pointer;
}
.color-token-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-token-swatch::-webkit-color-swatch { border: none; border-radius: 2px; }
.color-token-name {
background: none;
border: none;
color: inherit;
font: inherit;
min-width: 0;
padding: 0;
}
/* ── Spacing/size token library rows ── */
.spacing-tokens-ul {
margin-right: 10px;
}
/* Name | value | delete. Name and value are both flexible so a panel resize
splits 55/45 between them (11fr : 9fr); the delete icon stays fixed. */
.templates-panel-row.spacing-token-row {
grid-template-columns: 11fr 9fr auto;
}
.spacing-token-name {
background: none;
border: none;
color: inherit;
font: inherit;
min-width: 0;
padding: 0;
}
/* Value box. Fills its flexible grid track (so it grows/shrinks with the panel),
with a floor wide enough to keep a value plus its unit suffix (e.g. "0.5 in"). */
.spacing-token-value {
width: 100%;
min-width: 68px;
box-sizing: border-box;
padding: 2px 4px;
text-align: right;
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
background: var(--editor-input-bg, transparent);
vertical-align: middle;
}
/* ── Spacing-token link control (design-panel numeric fields) ── */
/* A compact button that collapses to a link glyph; opens a portalled, viewport-
clamped menu on click. Turns blue when bound, matching the other token UIs. */
/* ── Shared asset-link control (colour / text-style / spacing tokens) ──
One button + portalled menu used by every token binding. See TokenLink.tsx. */
.token-link {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
}
/* Link-to-assets control: just the link glyph / token name — NO box (no border,
no background fill). Follows the icon-button rule: the glyph is muted at rest
and brightens on hover (opacity, so it lifts the 🔗 emoji and text alike). */
.token-link-btn {
max-width: 84px;
box-sizing: border-box;
margin-left: 4px;
padding: 1px 3px;
text-align: center;
color: var(--editor-muted-text-color);
font-size: var(--editor-control-font-size);
border: none;
background: transparent;
cursor: pointer;
vertical-align: middle;
line-height: 1.4;
opacity: 0.72;
transition: opacity 0.1s ease;
}
.token-link-btn .token-link-label {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Linked to a token: show its name in the accent colour. */
.token-link-btn.linked {
color: var(--selection-color, #1097e2);
}
/* Hover brightens the glyph itself (foreground) — no background box. */
.token-link-btn:hover {
opacity: 1;
}
/* A token-link sitting in a section header: standard horizontal spacing from
the title, vertically centred (the header is already a centered flex row). */
.details-header > .token-link {
margin-left: 6px;
}
.details-header > .token-link .token-link-btn {
margin-left: 0;
}
/* Portalled menu (position:fixed set inline; clamped to the viewport in JS). */
.token-link-menu {
position: fixed;
z-index: 10000;
min-width: 176px;
max-height: 260px;
overflow-y: auto;
margin: 0;
padding: 4px;
list-style: none;
background: var(--editor-panel-bg, var(--editor-input-bg, #fff));
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
}
.token-link-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 4px 8px;
border-radius: var(--corner-radius-sm);
cursor: pointer;
white-space: nowrap;
}
.token-link-menu-item:hover {
background: var(--editor-hover-bg, rgba(127, 127, 127, 0.18));
}
.token-link-menu-item.active {
color: var(--selection-color, #1097e2);
font-weight: 600;
}
.token-link-menu-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.token-link-menu-meta {
flex: 0 0 auto;
color: var(--editor-muted-text-color);
}
/* Colour-token swatch shown as a menu row's trailing meta. */
.token-link-swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid var(--editor-control-border-color, rgba(127, 127, 127, 0.5));
}
.token-link-menu-new,
.token-link-menu-unlink {
margin-top: 0;
border-top: var(--editor-control-border);
border-radius: 0;
}
.token-link-menu-empty {
padding: 4px 8px;
color: var(--editor-muted-text-color);
}
/* ── Text styles library rows ── */
.text-styles-ul {
margin-right: 10px;
}
.templates-panel-row.text-style-row {
grid-template-columns: auto 1fr auto auto;
align-items: center;
}
/* "Ag" preview rendered in the style's own font; click applies to selected text. */
.text-style-preview {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 20px;
padding: 0 5px;
font-size: 13px;
line-height: 1;
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
background: var(--editor-input-bg, transparent);
cursor: pointer;
user-select: none;
overflow: hidden;
}
.text-style-name {
background: none;
border: none;
color: inherit;
font: inherit;
min-width: 0;
padding: 0;
}
/* Update-this-style-from-the-selected-text button (⟳). */
.text-style-update {
background: none;
border: none;
color: var(--editor-text-color);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0 2px;
opacity: 0.7;
}
.text-style-update:hover {
opacity: 1;
}
/* Layout presets ("Layouts" assets section): built-in one-click chips + saved-preset rows. */
.layout-preset-builtins {
display: flex;
flex-wrap: wrap;
column-gap: 5px;
row-gap: var(--list-row-gap);
padding: var(--list-row-pad) var(--panel-right-gutter, 12px) var(--list-row-pad) var(--panel-indent);
}
.layout-preset-chip {
padding: 3px 9px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
background: var(--button-bg);
border: var(--editor-control-border);
border-radius: 10px;
cursor: pointer;
white-space: nowrap;
}
.layout-preset-chip:hover {
border-color: var(--editor-selected-blue);
}
/* The built-in preset buttons live in the right-panel Layout section, indented to level 1. */
.layout-presets-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0 var(--panel-right-gutter, 12px) 0 var(--panel-indent);
}
/* The button matching the frame's current layout is highlighted. */
.layout-preset-chip.active {
border-color: var(--editor-selected-blue);
color: var(--editor-selected-blue);
font-weight: 600;
}
/* Saved layout preset rows: name (1fr) | delete (auto) — the minus sits at the row end like
the colour/text-style rows, and the list's right gap lines the "−" up with the others. */
.layout-presets-ul {
margin-right: 10px;
}
.templates-panel-row.layout-preset-row {
grid-template-columns: 1fr auto;
}
/* Normal-styled (bordered) rename box, filling its grid cell. */
.layout-preset-name {
min-width: 0;
width: 100%;
box-sizing: border-box;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
background: var(--editor-input-bg, var(--button-bg));
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
padding: 2px 6px;
}
.layout-preset-apply {
background: none;
border: none;
color: var(--editor-text-color);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0 4px 0 0;
opacity: 0.7;
}
.layout-preset-apply:hover {
opacity: 1;
}
/* Mask-mode picker (alpha / luminance / clip) shown for a selected mask group.
Height/font/border come from the shared .details-scroll select rule. */
.mask-mode-row {
margin-left: var(--panel-indent);
}
.mask-mode-select {
width: 110px;
}
.blend-mode-row {
margin-left: var(--panel-indent);
}
.blend-mode-select {
width: 110px;
}
/* Auto-layout (stacks) panel section. Control height/font/border come from the
shared .details-scroll select rule; these just lay the rows out. */
.layout-div {
/* The `.font-div` rows inside ALREADY carry the level-1 indent (margin-left:
--panel-indent), so this wrapper must NOT add another (that made it level-2 / too deep).
Only add the right gutter so the flexed controls stop short of the panel edge. */
margin-right: var(--panel-right-gutter, 12px);
}
.layout-row {
display: flex;
align-items: center;
gap: 5px;
/* No extra row margin — the standard .font-div row (30px, --details-row-height) already
spaces itself; an added margin made the section looser than every other panel section. */
}
.layout-row label {
flex: 0 0 76px; /* fixed label column so every select/input lines up + equal width */
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
/* The padding row's "Padding" label spans its own line, so it opts out of the fixed column. */
.layout-pad-row label {
flex-basis: 100%;
}
.layout-select {
flex: 1 1 0;
min-width: 0;
}
/* Flex the padding/gap boxes so a row of four shares the width instead of overflowing. */
.layout-input {
flex: 1 1 0;
min-width: 0;
width: auto;
padding: 2px 4px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
background: var(--editor-input-bg, transparent);
text-align: right;
}
/* Padding row: 4 inputs (Top, Right, Bottom, Left). Put the label on its own line and let the
inputs WRAP so each keeps enough width to show its value/formula instead of being squeezed
onto one cramped line — 4-across when wide, 2×2 when the panel is narrow. */
.layout-pad-row {
flex-wrap: wrap;
height: auto; /* override .font-div's fixed height so wrapped inputs show */
row-gap: 4px;
}
.layout-pad-row label {
flex: 0 0 100%; /* "Padding" on its own line; the 4 fields form a grid below */
margin: 0; /* the row-gap spaces the label from the inputs — no extra */
line-height: 1.3;
}
/* Header line = the "Padding" label + its token-link, spanning the full row width so the
four padding inputs still wrap 4-across BELOW it (the link doesn't steal a field's slot). */
.layout-pad-header {
flex: 0 0 100%;
display: flex;
align-items: center;
gap: 6px;
}
.layout-pad-row .layout-pad-header label {
flex: 0 1 auto; /* not the full-width label rule — sits inline with the link */
}
/* Standard checkbox row (e.g. Wrap): box + label inline. */
.layout-checkbox {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
}
.layout-checkbox input {
margin: 0;
}
/* Each padding field = a side icon (top/right/bottom/left) + its input. Real data width →
4-across when wide, 2×2 when narrow. */
.layout-pad-field {
display: flex;
align-items: center;
gap: 3px;
flex: 1 1 0;
min-width: 62px;
}
.layout-pad-field .layout-input {
flex: 1 1 auto;
min-width: 0;
}
.layout-pad-glyph {
flex: 0 0 auto;
color: var(--editor-muted-text-color); /* the box + edge use currentColor — themes itself */
}
/* Control inspector (Design panel): one label + control per row, at the standard
panel control font size, with the normal inline checkbox format for booleans. */
.control-prop-row {
display: flex;
align-items: center;
gap: 6px;
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
/* Right gutter keeps flex-filled selects/inputs off the panel's right edge,
matching the standard panel rows. */
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}
.control-prop-row > .control-prop-label {
flex: 0 0 76px; /* fixed label column so every control lines up */
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
.control-prop-row > .layout-select,
.control-prop-row > .control-prop-input {
flex: 1 1 0;
min-width: 0;
}
.control-prop-input {
min-width: 0;
padding: 1px 4px;
color: var(--editor-text-color);
border: var(--editor-control-border);
border-radius: var(--corner-radius-sm);
outline-color: var(--editor-text-color);
font-size: var(--editor-control-font-size);
box-sizing: border-box;
}
/* Normal checkbox format: box then label, inline (matches .layout-checkbox). */
.control-prop-checkbox {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
margin-left: var(--panel-indent);
padding-top: var(--details-row-pad); padding-bottom: var(--details-row-pad);
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
.control-prop-checkbox input {
margin: 0;
}
/* Data tab (left panel, Data mode): a tree of data stores + their fields. */
.data-tree { padding: 4px 0; }
.data-tree-ul, .data-tree-fields { list-style: none; margin: 0; padding: 0; }
.data-tree-store {
display: flex;
align-items: center;
gap: 6px;
padding: var(--list-row-pad) 10px var(--list-row-pad) 8px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
cursor: pointer;
}
.data-tree-store:hover { background: var(--tree-selection-bg, rgba(127, 127, 127, 0.12)); }
.data-tree-store.selected { background: var(--tree-selection-bg, rgba(127, 127, 127, 0.2)); }
.data-tree-triangle {
flex: 0 0 auto;
width: 11px;
height: 11px;
opacity: var(--editor-icon-muted-opacity, 0.7);
cursor: pointer;
}
[data-theme="dark"] .data-tree-triangle { filter: invert(1); }
/* Filled diamond glyph in the data accent — the data-store marker. */
.data-tree-badge {
flex: 0 0 auto;
width: 9px;
height: 9px;
transform: rotate(45deg);
background-color: var(--data-accent);
}
/* Intent action nodes read as actions, not stores — a round badge in the Data
accent, matching the intent node's canvas title bar. */
.data-tree-badge.intent {
border-radius: 50%;
transform: none;
background-color: var(--data-accent);
}
.data-tree-store-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-tree-field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: var(--list-row-pad) 10px var(--list-row-pad) 34px; /* indented under the store */
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
cursor: pointer;
}
.data-tree-field:hover { background: var(--tree-selection-bg, rgba(127, 127, 127, 0.1)); }
.data-tree-field.selected {
background: var(--tree-selection-bg, rgba(127, 127, 127, 0.2));
box-shadow: inset 2px 0 0 var(--data-accent);
}
.data-tree-field-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-tree-field-type { flex: 0 0 auto; font-size: 11px; color: var(--editor-muted-text-color); }
.data-tree-empty {
padding: 8px 12px;
font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color);
line-height: 1.4;
}
/* Data bindings (connections) list, below the stores. */
.data-tree-bindings { margin-top: 6px; border-top: 1px solid var(--editor-border-color); }
.data-tree-bindings-header {
padding: 5px 10px 3px 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--data-accent);
}
.data-tree-binding {
display: flex;
align-items: center;
gap: 5px;
padding: var(--list-row-pad) 10px var(--list-row-pad) 12px;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
cursor: pointer;
}
.data-tree-binding:hover { background: var(--tree-selection-bg, rgba(127, 127, 127, 0.1)); }
.data-tree-binding.selected {
background: var(--tree-selection-bg, rgba(127, 127, 127, 0.2));
box-shadow: inset 2px 0 0 var(--data-accent);
}
.data-tree-binding-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-tree-binding-arrow { flex: 0 0 auto; color: var(--data-accent); }
/* Diagrams tab (left panel): the flow diagrams TREE — a nested list mirroring the
Data tree's look (SVG disclosure triangle, indentation, hover/selected states) with
＋ (add sub-diagram) / − (delete) icon buttons to the side, in the code accent. */
/* "Generate with AI" — describe a diagram in words, AI builds the flowchart.
Sits at the top of the Diagrams list; collapsed to a single accent toggle. */
/* No left padding: the ✨ Generate-with-AI toggle is a section header, so its caret must
line up with the sibling .details-header caret (which sits at the panel's content edge). */
.flow-ai-gen { padding: 4px 10px 8px 0; border-bottom: 1px solid var(--editor-border-color); margin-bottom: 6px; }
.flow-ai-toggle {
/* Caret + label geometry matches .details-header (caret then title, no gap, no left
padding) so the two section headers line up exactly. */
display: flex; align-items: center; gap: 0; width: 100%;
padding: 4px 0; border: none; background: transparent; cursor: pointer;
font-size: var(--editor-control-font-size); font-weight: 700; color: var(--code-accent); text-align: left;
}
.flow-ai-caret { width: 14px; display: inline-block; }
.flow-ai-body { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.flow-ai-modes { display: inline-flex; border: 1px solid var(--editor-border-color); border-radius: var(--corner-radius-sm); overflow: hidden; width: fit-content; }
.flow-ai-mode {
padding: 3px 10px; border: none; background: transparent; cursor: pointer;
font-size: 12px; font-weight: 600; color: var(--editor-text-color);
}
.flow-ai-mode + .flow-ai-mode { border-left: 1px solid var(--editor-border-color); }
.flow-ai-mode.active { background: var(--code-accent-btn); color: var(--code-accent-fg); }
.flow-ai-input {
width: 100%; box-sizing: border-box; resize: vertical; min-height: 48px;
padding: 6px 8px; border: 1px solid var(--editor-control-border, var(--editor-border-color));
border-radius: var(--corner-radius-sm); background: var(--editor-input-bg);
color: var(--editor-text-color); font: inherit; font-size: 12.5px; line-height: 1.4;
}
.flow-ai-input:focus { outline: none; border-color: var(--code-accent); }
.flow-ai-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow-ai-run {
display: inline-flex; align-items: center;
padding: 4px 12px; border: 1px solid var(--code-accent); border-radius: var(--corner-radius-sm);
background: var(--code-accent-btn); color: var(--code-accent-fg);
font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.flow-ai-run:disabled { opacity: 0.5; cursor: default; }
/* While generating the button is disabled but stays fully opaque so its spinner
reads clearly (matches the CodeDesigner / GenerateSection AI buttons). */
.flow-ai-run.working:disabled { opacity: 1; }
.flow-ai-status { font-size: 11.5px; color: var(--editor-muted-text-color); flex: 1 1 auto; min-width: 0; }
.flow-tree-ul { list-style: none; margin: 0; padding: 0; }
.flow-tree-li { margin: 0; }
.flow-tree-row {
display: flex;
align-items: center;
gap: 6px;
padding: var(--list-row-pad) 6px var(--list-row-pad) 8px; /* left padding overridden inline per depth */
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
cursor: pointer;
}
.flow-tree-row:hover { background: color-mix(in srgb, var(--code-accent) 10%, transparent); }
.flow-tree-row.selected {
background: color-mix(in srgb, var(--code-accent) 16%, transparent);
box-shadow: inset 2px 0 0 var(--code-accent);
}
.flow-tree-triangle {
flex: 0 0 auto;
width: 11px;
height: 11px;
opacity: var(--editor-icon-muted-opacity, 0.7);
cursor: pointer;
}
[data-theme="dark"] .flow-tree-triangle { filter: invert(1); }
/* Filled diamond in the code accent — the diagram marker (matches the data badge). */
.flow-tree-badge {
flex: 0 0 auto;
width: 9px;
height: 9px;
transform: rotate(45deg);
background-color: var(--code-accent);
}
.flow-tree-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-tree-name.placeholder { color: var(--editor-muted-text-color); font-style: italic; }
/* Kind glyph on a shape (outline) row — muted, fixed width so labels line up. */
.flow-tree-glyph { flex: 0 0 auto; width: 12px; text-align: center; color: var(--editor-muted-text-color); font-size: 11px; }
/* Flow Variables tab: a variable row (name input + type/entity selects + delete). */
.flow-var-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.flow-var-name { flex: 1 1 auto; min-width: 40px; box-sizing: border-box; font-size: 12px; padding: 2px 5px; border: var(--editor-control-border); border-radius: var(--corner-radius-sm); }
.flow-var-type, .flow-var-ref { flex: 0 0 auto; max-width: 96px; font-size: 11px; }
.flow-var-add { border: none; background: none; cursor: pointer; color: var(--code-accent); font-size: 14px; line-height: 1; padding: 0; }
.flow-var-del { border: none; background: none; cursor: pointer; color: inherit; opacity: 0.55; font-size: 12px; padding: 0 2px; margin-left: auto; }
.flow-var-del:hover { opacity: 1; color: #c0442e; }
/* Generated-code preview for a flow — a compact read-only monospace block. */
.flow-code-pre {
margin: 0;
padding: 6px 8px;
max-height: 260px;
overflow: auto;
font-family: var(--editor-mono-font-family, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 11px;
line-height: 1.45;
white-space: pre;
color: var(--editor-text-color);
background: color-mix(in srgb, var(--code-accent) 7%, transparent);
border: 1px solid var(--editor-border-color);
border-radius: 5px;
}
/* The diagram-row kind marker (▭ process / ◇ decision) in the code accent. */
.flow-tree-diagram-glyph { color: var(--code-accent); font-size: 12px; }
/* Drag-drop drop-zone cues for diagram rows: an accent line before/after a sibling,
a filled highlight when dropping INSIDE (nest as a sub-diagram). */
.flow-tree-row.drop-before { box-shadow: inset 0 2px 0 var(--code-accent); }
.flow-tree-row.drop-after { box-shadow: inset 0 -2px 0 var(--code-accent); }
.flow-tree-row.drop-inside { background: color-mix(in srgb, var(--code-accent) 22%, transparent); outline: 1px dashed var(--code-accent); outline-offset: -1px; }
.flow-tree-row .flow-rename { flex: 1 1 auto; min-width: 0; }
/* A clickable validation issue in the Checks section (one that points at a shape). */
.flow-check.clickable:hover { background: color-mix(in srgb, var(--code-accent) 10%, transparent); }
/* The ＋ / − actions on the Diagrams section header reuse the standard page-list
+/- icons (page-add-div / page-delete-div + page-list-plus/minus-icon), so they
get the app's standard icon size, hover highlight, order, and positioning for
free (the .details-header > [class*="-add-div"]/[class*="-delete-div"] rule).
The rightmost icon (the ＋) carries the tree panels' standard 10px right-edge
gap the SAME way .templates-add-div does — a margin on the icon div, NOT
padding-right on the header: .details-header is width:100% content-box, so
header padding-right overflows past the visible edge and the icons still sit
flush. The margin lives inside the flex content box, so it actually shows. */
.flow-diagrams .page-add-div { margin-right: 10px; }
/* Sequences header (now a .details-header like Flow Diagrams): give its add (＋)
the same 10px right-edge gap so the two peer headers align. */
.seq-header-add { margin-right: 10px; }
/* Group the two ADD icons (＋Process, ＋Decision) as a pair, and set the Delete
(−) apart from them — otherwise the delete reads as grouped with the first add.
Tight gap within the add pair; a wider gap separates the delete; the last add
keeps the 10px right-edge gap (rule above). */
.flow-diagrams .page-add-div:not(:last-child) { margin-right: 4px; }
.flow-diagrams .page-delete-div { margin-right: 11px; }
/* Empty-state message on the blank Diagrams canvas — theme-adaptive colors with
real contrast (a deep green on the light canvas; the accent green reads fine on
the dark canvas), and body copy in the standard text colour, not a faint grey. */
.diagrams-empty-title { color: #0e5f3f; }
.diagrams-empty-body { color: var(--editor-text-color); }
[data-theme="dark"] .diagrams-empty-title { color: var(--code-accent); }
/* Prototype tab (left panel): connections + triggers lists. */
.proto-tree { padding: 4px 0; }
.proto-tree-section { margin-bottom: 2px; }
.proto-tree-ul { list-style: none; margin: 0; padding: 0; }
.proto-tree-header {
padding: 5px 10px 3px 10px;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--editor-selected-blue);
}
.proto-tree-row {
display: flex; align-items: center; gap: 5px;
padding: var(--list-row-pad) 10px var(--list-row-pad) 12px;
font-size: var(--editor-control-font-size); color: var(--editor-text-color); cursor: pointer;
}
.proto-tree-row:hover { background: var(--tree-selection-bg, rgba(127, 127, 127, 0.1)); }
.proto-tree-row.selected {
background: var(--tree-selection-bg, rgba(127, 127, 127, 0.2));
box-shadow: inset 2px 0 0 var(--editor-selected-blue);
}
.proto-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On a trigger row the name GROWS to fill the row, so the count badge lands in a
fixed column just left of the eye (aligned across rows) instead of floating
right after the name — its old margin-left:auto fought the eye's own for the
free space, so the badge's spot depended on the name's length. */
.proto-tree-name-fill { flex: 1 1 auto; min-width: 0; }
.proto-tree-arrow { flex: 0 0 auto; color: var(--editor-selected-blue); }
.proto-tree-count {
flex: 0 0 auto;
/* A centred pill: inline-flex + fixed height so the number sits on the row's
midline (not floating high) and single digits read as a neat circle. */
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 16px; box-sizing: border-box;
font-size: 11px; line-height: 1; padding: 0 5px; border-radius: 8px;
color: var(--editor-muted-text-color); background: var(--tree-selection-bg, rgba(127, 127, 127, 0.15));
}
.proto-tree-empty {
padding: 8px 12px; font-size: var(--editor-control-font-size);
color: var(--editor-muted-text-color); line-height: 1.4;
}
/* Customize → Theme → Data/Code accent-colour picker row. */
.accent-color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.accent-color-row input[type="color"] {
width: 44px; height: 30px; padding: 0; cursor: pointer; background: none;
border: 1px solid var(--editor-control-border-color); border-radius: 6px;
}
.accent-color-row input[type="text"] {
width: 150px; padding: 6px 8px; font-size: 13px; color: var(--editor-text-color);
border: 1px solid var(--editor-control-border-color); border-radius: 6px;
background: var(--editor-input-bg, #fff);
}
/* Read-only value (e.g. the store a button's connection points to). */
.control-prop-static {
flex: 1 1 0;
min-width: 0;
font-size: var(--editor-control-font-size);
color: var(--editor-text-color);
}
/* Guidance line (draw-a-connection prompt, row-verb note). */
.control-prop-hint {
margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
font-size: var(--editor-control-font-size);
line-height: 1.4;
color: var(--editor-muted-text-color);
}
/* Master name in the library is clickable to open the component for editing. */
.templates-name-edit {
cursor: pointer;
}
.templates-name-edit:hover {
text-decoration: underline;
}
/* On-canvas banner shown while editing a component master. Spans the canvas
region (left/right set inline); sits just below the top toolbar. */
.template-edit-banner {
position: fixed;
top: var(--top-toolbar-height);
z-index: 35;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 12px;
background: var(--accent-color, #7a5cff);
color: #ffffff;
font-size: var(--editor-control-font-size);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.template-edit-banner-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.template-edit-banner-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.template-edit-banner-btn {
font-size: var(--editor-control-font-size);
padding: 2px 12px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 4px;
background: transparent;
color: #ffffff;
cursor: pointer;
}
.template-edit-banner-btn.done {
background: #ffffff;
color: var(--accent-color, #7a5cff);
border-color: #ffffff;
font-weight: 600;
}
/* Subtle bottom-center hint for in-place editing (pen / line). Spans the canvas
region (left/right inline); the wrap is click-through so it never blocks the
canvas. */
.edit-hint-wrap {
position: fixed;
bottom: calc(var(--status-bar-height, 0px) + 12px);
z-index: 35;
display: flex;
justify-content: center;
pointer-events: none;
}
.edit-hint-pill {
background: rgba(20, 20, 24, 0.85);
color: #ffffff;
font-size: var(--editor-control-font-size);
padding: 4px 12px;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
user-select: none;
}
.edit-hint-key {
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 3px;
padding: 0 5px;
margin: 0 1px;
font-size: 0.9em;
}
/* Master-edit panel: the component name row. */
.component-name-row {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
align-items: center;
margin: 0 12px 0 var(--panel-indent);
}
.component-name-label {
font-size: var(--editor-control-font-size);
opacity: 0.7;
}
.component-bind-heading {
margin: 0 0 0 var(--panel-indent);
font-size: var(--editor-control-font-size);
opacity: 0.7;
}
/* Instance panel: a parameter name, its binding value, and (when overridden)
a reset control. */
.cparam-bind-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
column-gap: 6px;
align-items: center;
margin: 0 12px 0 var(--panel-indent);
}
.cparam-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--editor-control-font-size);
}
/* Overridden parameter: accent name + a leading dot, with a reset button. */
.cparam-overridden {
color: var(--accent-color, #7a5cff);
}
[data-theme="dark"] .cparam-overridden {
color: #b9a7ff;
}
/* General override indicator for a design-panel control (instance differs
from master). Clickable: reverts that property to the component default. */
.override-badge {
display: inline-block;
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--accent-color, #7a5cff);
vertical-align: middle;
margin: 0 4px;
flex: 0 0 auto;
cursor: pointer;
}
[data-theme="dark"] .override-badge {
background: #b9a7ff;
}
.override-badge:hover {
outline: 2px solid color-mix(in srgb, var(--accent-color, #7a5cff) 40%, transparent);
}
/* Override-report dialog: which section properties differ from the template,
with Reset / Cancel. Matches the app's modal house style. */
.override-backdrop {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 18, 24, 0.55);
padding: 24px;
}
.override-modal {
width: 100%;
max-width: 480px;
background: var(--editor-panel-background-color, #fff);
color: var(--editor-text-color, #1a1a1f);
border: 1px solid var(--panel-border-color, rgba(0, 0, 0, 0.15));
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
padding: 22px 24px;
box-sizing: border-box;
}
.override-title {
margin: 0 0 4px;
font-size: 1.1rem;
font-weight: 700;
}
.override-subtitle {
margin: 0 0 14px;
font-size: 0.82rem;
opacity: 0.7;
}
/* The report is an indented tree mirroring the item hierarchy: each component's
name, its overridden properties, then its overridden descendants one level
deeper. No dividers — indentation carries the structure. */
.override-tree {
list-style: none;
margin: 0;
padding: 0;
}
.override-tree-root {
margin: 0 0 18px;
padding: 10px 0;
max-height: 320px;
overflow-y: auto;
border-top: 1px solid var(--panel-border-color, rgba(0, 0, 0, 0.12));
border-bottom: 1px solid var(--panel-border-color, rgba(0, 0, 0, 0.12));
}
/* Each nested level steps in; the root list itself is flush. */
.override-tree-node .override-tree {
padding-left: 14px;
}
.override-tree-node {
margin-top: 6px;
}
.override-tree-root > .override-tree-node:first-child {
margin-top: 0;
}
.override-node-name {
font-weight: 700;
font-size: 0.85rem;
margin-bottom: 2px;
}
.override-diff-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 2px 0 2px 14px;
font-size: 0.85rem;
}
.override-diff-label {
font-weight: 500;
min-width: 0;
opacity: 0.85;
}
.override-diff-values {
display: inline-flex;
align-items: baseline;
gap: 6px;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.override-diff-current {
font-weight: 600;
}
.override-arrow {
opacity: 0.5;
}
.override-diff-master {
opacity: 0.6;
}
.override-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.override-cancel,
.override-reset {
padding: 0.45rem 0.85rem;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--panel-border-color, rgba(0, 0, 0, 0.18));
}
.override-cancel {
background: transparent;
color: inherit;
}
.override-reset {
background: var(--accent-color, #7a5cff);
border-color: transparent;
color: #fff;
}
.override-cancel:hover { filter: brightness(0.97); }
.override-reset:hover { filter: brightness(1.06); }
/* Override dot on a design-panel dimension field (W/H/angle on an instance).
Clickable: reverts that field to the component default. */
.vi-dim-override-dot {
display: inline-block;
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--accent-color, #7a5cff);
vertical-align: middle;
margin-right: 3px;
flex: 0 0 auto;
cursor: pointer;
}
.vi-dim-override-dot:hover {
outline: 2px solid color-mix(in srgb, var(--accent-color, #7a5cff) 40%, transparent);
}
[data-theme="dark"] .vi-dim-override-dot {
background: #b9a7ff;
}
.cparam-override-dot {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 5px;
border-radius: 50%;
background: currentColor;
vertical-align: middle;
}
.cparam-reset {
border: none;
background: transparent;
color: inherit;
opacity: 0.7;
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 0 4px;
}
.cparam-reset:hover {
opacity: 1;
}
/* Tree rows: align the disclosure triangle, type icon, badge, and name on
one centered line. */
.item-tree-row {
display: flex;
align-items: center;
/* Vertical padding is set inline (paddingV in VisualItemTree / CodeFileTree)
because it also compensates for the 1px hover border to avoid row jitter. */
}
/* Disclosure triangle — override the generic 6px `.item-tree-item img` size
(which has higher specificity than a single class) so groups get a
properly sized, clickable triangle. Use a FIXED width (not `auto`) so the
non-square collapsed/expanded SVGs render at the same 12×12 box the design-
panel section triangles use, instead of the expanded glyph spreading wider. */
.item-tree-item .tree-triangle-img {
height: var(--panel-triangle-size);
width: var(--panel-triangle-size);
box-sizing: content-box;
padding: 0 4px 0 0;
cursor: pointer;
}
/* Per-item type icon (rectangle, text, group, …) in front of each row.
Opacity matches the toolbar's .tool-icon (0.9) so the dark-mode invert
reads with the same contrast; 16px so the icons with internal padding
don't look undersized at tree scale. */
.item-tree-item .tree-type-icon {
height: 16px;
width: 16px;
padding: 0 5px 0 0;
flex: 0 0 auto;
opacity: 0.9;
}
/* Text items use a crisp glyph instead of the tiny "T" in text.svg (which
floats in a large viewBox). Sized to the icon column; inherits the themed
text color, so it stays high-contrast in both light and dark. */
.item-tree-item .tree-type-glyph {
width: 16px;
padding-right: 5px;
flex: 0 0 auto;
font-weight: 700;
font-size: 13px;
line-height: 1;
text-align: center;
opacity: 0.9;
user-select: none;
}
/* ── UML Sequence diagrams (Sequences tab, Data mode) ─────────────────────── */
.seq-panel { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
/* The Generate-with-AI block already carries its own border + padding, so the panel's
flex gap on top of its margin left too much air both ABOVE it (below the Sequences
header) and below it (before the list). Drop the margin and keep only the small panel
gap. */
.seq-panel .flow-ai-gen { margin-bottom: 0; }
.seq-empty { font-size: 12px; color: var(--editor-muted-text-color); padding: 2px; }
.seq-new-btn { align-self: flex-start; padding: 4px 10px; border: 1px solid var(--data-accent); color: var(--data-accent); background: transparent; border-radius: var(--corner-radius-sm); cursor: pointer; font-size: 12.5px; font-weight: 600; }
.seq-picker { display: flex; align-items: center; gap: 6px; }
.seq-picker select { flex: 1 1 auto; min-width: 0; }
.seq-name { width: 100%; box-sizing: border-box; font-size: 13.5px; font-weight: 600; padding: 4px 6px; border: var(--editor-control-border); border-radius: var(--corner-radius-sm); background: var(--editor-input-bg); color: var(--editor-text-color); }
.seq-canvas { overflow: auto; border: 1px solid var(--editor-border-color); border-radius: var(--corner-radius-sm); background: var(--editor-input-bg); max-height: 320px; padding: 4px; }
.seq-svg { display: block; max-width: none; }
.seq-section { display: flex; flex-direction: column; gap: 3px; }
.seq-section-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--code-accent); text-transform: uppercase; letter-spacing: .04em; }
/* Right-aligned action cluster in a section header — holds the delete (−) then add (＋)
icon-buttons in that order, so the minus always sits LEFT of the plus. */
.seq-head-actions { margin-left: auto; display: flex; align-items: center; }
.seq-row { display: flex; align-items: center; gap: 4px; }
.seq-row select { flex: 0 0 auto; max-width: 92px; font-size: 11px; }
.seq-inline-name { flex: 1 1 auto; min-width: 40px; box-sizing: border-box; font-size: 12px; padding: 2px 5px; border: var(--editor-control-border); border-radius: var(--corner-radius-sm); background: var(--editor-input-bg); color: var(--editor-text-color); }
.seq-arrow { flex: 0 0 auto; color: var(--editor-muted-text-color); font-size: 12px; }
.seq-mini { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; border: 1px solid var(--editor-border-color); background: transparent; border-radius: 4px; cursor: pointer; font-size: 10px; color: var(--editor-text-color); line-height: 1; }
.seq-mini:disabled { opacity: 0.35; cursor: default; }
.seq-hint { font-size: 11px; color: var(--editor-muted-text-color); }
/* Sequence inspector — the RIGHT-panel section (a standard .flow-node-section, so it
needs its own padding + column layout since that class carries none). */
.seq-inspector { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 14px; }
/* Lifeline rows stay on ONE line (name + kind + −); cap the kind select so the row
fits the narrow panel without wrapping. */
.seq-inspector .seq-row select { max-width: 84px; }
/* Messages are a compact master-detail: a one-line-per-message LIST (summary + drag
handle + delete) and a detail editor below for the SELECTED message. */
.seq-msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.seq-msg-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; cursor: pointer; font-size: 12px; color: var(--editor-text-color); border-radius: 3px; }
.seq-msg-row:hover { background: color-mix(in srgb, var(--code-accent) 10%, transparent); }
.seq-msg-row.selected { background: color-mix(in srgb, var(--code-accent) 16%, transparent); box-shadow: inset 2px 0 0 var(--code-accent); }
.seq-msg-idx { flex: 0 0 auto; color: var(--editor-muted-text-color); font-variant-numeric: tabular-nums; }
.seq-msg-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-ll-kind { color: var(--editor-muted-text-color); font-size: 11px; }
.seq-msg-detail { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; padding: 8px; border: 1px solid var(--editor-border-color); border-radius: var(--corner-radius-sm); background: color-mix(in srgb, var(--code-accent) 5%, transparent); }
.seq-detail-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.seq-detail-label { flex: 0 0 auto; font-size: 11px; color: var(--editor-muted-text-color); min-width: 28px; }
/* A second label in a detail row (e.g. "To" after From's control) starts a new
field-group — give it extra left space so it doesn't read as part of the one before. */
.seq-detail-row .seq-detail-label ~ .seq-detail-label { margin-left: 12px; }
/* Detail-row selects fill to the panel's right edge (like the label/name inputs), so
a lone From/To/Kind control hugs the right the same as everything else. */
.seq-detail-row select { flex: 1 1 60px; min-width: 0; }
.seq-detail-row .seq-inline-name { flex: 1 1 auto; }
/* …except a select that SHARES its row with a guard input (an alt operand's "at"
picker) stays compact so it doesn't crowd the guard. */
.seq-detail-row .seq-op-select { flex: 0 1 auto; max-width: 96px; }
/* Line the row action icons up in one right-hand column: the shared .page-delete-div
carries a 5px right margin that pushed the − left of the section-head ＋; zero it
(and the add) inside the inspector so − and ＋ share the same right edge — even a
lone icon. */
.seq-inspector .page-delete-div,
.seq-inspector .page-add-div { margin: 0; }
/* Drag-to-reorder lifeline rows. */
.seq-drag-row { cursor: default; }
.seq-drag-handle { flex: 0 0 auto; width: 12px; text-align: center; color: var(--editor-muted-text-color); cursor: grab; font-size: 12px; user-select: none; }
.seq-drag-row.drop-before { box-shadow: inset 0 2px 0 var(--code-accent); }
.seq-drag-row.drop-after { box-shadow: inset 0 -2px 0 var(--code-accent); }
/* ── Pen edit mode: unified Appearance master/detail list (reuses .shadow-tree) ── */
/* The − / + ride the standard header slot (order 2, pushed right by .details-header::after);
an 8px right gutter keeps them off the panel edge (matching the pen sub-mode buttons).
box-sizing: border-box is required — .details-header is width:100%, so a content-box
padding-right would push 100%+8px wide (the padding hanging off-screen) instead of
insetting the buttons. */
.pen-appearance .details-header {
box-sizing: border-box;
padding-right: 8px;
}
/* The ring rows line up with the "Rings" header title (one --panel-indent from the left):
the shared .shadow-tree adds another level's worth on top, so pull the base back by the
per-row level-0 pad (treeRowPad(0) = 10px) to cancel it. Deeper levels still nest. */
.pen-appearance-tree {
margin-left: calc(var(--panel-indent) - 10px);
}
/* A ring / All-rings group heading — bold, standard selection when picked. */
.pen-appearance-group .shadow-tree-label { font-weight: 700; }
/* No separation line between the list and the detail editor; hide the reused
section's own header/separator (the tree row is the header now). */
.pen-appearance-detail {
margin-top: var(--details-row-pad);
}
.pen-appearance-detail .details-div-group {
border: none;
}
.pen-appearance-detail .details-header {
display: none;
}