/*
* Grainworks — panel styling.
*
* UXP supports no pseudo-elements, so every visual part is a real element; layout
* is flexbox only, and sizes are in px because UXP does not resolve `rem`.
*/
:root {
/*
* A panel grey, not black.
*
* Pure black read as a hole cut in Photoshop's own chrome, which is grey all
* around it — the plugin looked like it was missing rather than docked. This
* sits near Adobe's dark UI theme, so the panel belongs to the application
* it is inside; the app gets the same value and looks like a tool rather
* than a terminal.
*
* Everything below is relative to it: a recessed control is darker, a raised
* one lighter, and the values were moved together rather than one at a time.
*/
--gw-bg: #262626;
--gw-bg-raised: #303030;
--gw-hairline: #383838;
--gw-row: #2f2f2f;
--gw-row-disabled: #242424;
--gw-pill: #3b3b3b;
--gw-pill-disabled: #262626;
--gw-field: #1c1c1c;
--gw-field-border: #4d4d4d;
--gw-track: #535353;
--gw-fill: #b2bdca;
--gw-outline: #4a4a4a;
--gw-text: #d5d5d6;
--gw-text-dim: #a19ca7;
--gw-text-off: #5f5f63;
--gw-tool: #333333;
--gw-tool-on: var(--gw-accent);
/*
* The accent, and it is the icon's orange rather than a new colour.
*
* `#e2842f` is the mid ink in mac/bake-icon.mjs, so the app, the Dock icon
* and the wordmark behind the words are all the same orange — which is the
* point of having one. The two dimmer variants are for a fill on a dark
* track and for a hairline, neither of which can take the full chroma
* without shouting over the image the panel exists to show.
*/
--gw-accent: #e2842f;
--gw-accent-dim: #a45f22;
--gw-accent-quiet: #3a2a18;
/*
* Two stacks, because the panel has two jobs for type.
*
* Everything that is language — labels, section titles, buttons — is the
* system UI face. It was all Courier New, which is a typewriter: wide,
* low-contrast at 10 px, and the single loudest reason the panel read as a
* hobby project rather than a tool sitting next to Photoshop's own panels.
*
* Numbers keep a monospace, and only numbers. A value that changes width as
* it counts 9 -> 10 -> 100 makes a column of twenty jitter while you drag,
* so the figures need to be tabular. SF Mono is the macOS system monospace
* and is what both hosts land on here.
*/
--gw-ui: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
--gw-num: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background: var(--gw-bg);
color: var(--gw-text);
/* "Adobe Clean" first: inside Photoshop that is the face its own panels
use, so the plugin sits in the application rather than beside it. The app
falls through to the system UI face, which is the same stack as --gw-ui. */
font-family: "Adobe Clean", var(--gw-ui);
font-size: 11px;
overflow-x: hidden;
}
.gw-root {
padding: 8px 10px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
/*
* Scrolling, for the pages where the panel *is* the whole document.
*
* The standalone frame puts #gw-root inside #gw-panel, which is a flex child
* with `overflow-y: auto` — so that page scrolls because the frame gives it
* somewhere to scroll. The plugin page has no frame: #gw-root sits directly in
* , and a UXP panel does not scroll the document implicitly the way a
* browser does. With every section open the panel is around 1200px of content,
* so the RENDER footer was simply unreachable in Photoshop.
*
* Fixed with the same shape the standalone already proves: a real element with
* a definite height and its own overflow. `min-height: 0` is what lets a flex
* child actually shrink below its content and scroll rather than stretching
* its parent.
*
* Scoped to `body.gw-plugin` so the standalone frame is untouched — its body
* keeps `overflow: hidden` and #gw-panel keeps doing the scrolling.
*/
html { height: 100%; }
body.gw-plugin {
height: 100%;
display: flex;
flex-direction: column;
}
body.gw-plugin #gw-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
/* ------------------------------------------------------------- wordmark */
/*
* The wordmark, with the icon's halftone sphere behind it.
*
* `position: relative` here and `absolute` on the art, rather than a CSS
* `background-image` with a data URI — whether a UXP panel resolves one of
* those is not known, and an absolutely positioned child of a relative box is
* ordinary layout it certainly handles. (`sticky` is the one that is unusable
* in UXP: it drops out of flow and collapses to content width.)
*
* This replaced a dithered tonal ramp sitting under the type. The ramp was
* honest about what the tool does, but it was a second, unrelated picture
* stacked under the first — and now the same sphere is the app icon, so the
* header, the Dock and the accent are one mark instead of three.
*/
/*
* Tall enough to contain the 76 px sphere outright.
*
* With 11 px of padding the circle was clipped top and bottom and spilled
* over the Open image / Export row below, so it read as a stain bleeding out
* of the header rather than as a mark inside it. 30 px leaves the whole disc
* inside with a few pixels to spare, and `overflow: hidden` is then a
* backstop rather than the thing doing the cropping.
*/
.gw-header {
padding: 4px 2px 2px;
}
/*
* The sphere is centred on *this*, which holds only the type — not on the
* header, which also holds the shell's Open image / Export row.
*
* Tall enough for the 96 px disc, so `overflow: hidden` is a backstop rather
* than the thing doing the cropping.
*/
.gw-wordmark-lockup {
position: relative;
/* Holds the 132px disc. */
height: 140px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/*
* The sphere sits behind the type and has to lose to it.
*
* No `opacity` here, deliberately. It was 0.34, and seen side by side the
* plugin's sphere was far brighter than the app's — UXP does not honour
* element opacity the way WKWebView does, so the panel painted the full-chroma
* inks while the app dimmed them. The dimming is in the fill colours now (see
* `spherePaths`), which renders the same in all three engines.
*
* `z-index: 0` is not decorative. Without a stacking context of its own the
* order is down to document order alone, and the art can end up painting over
* the wordmark — which is what it did.
*/
.gw-header-art {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
/*
* Light type over the dot field.
*
* Two other arrangements were tried and both are recorded because the reasons
* outlast them. Painting the word in the *background* colour reads as a hole
* without being one — the dots are still there, covered — and cutting the
* letters out of the dots for real (js/wordmark-mask.js, still used by
* `spherePaths`) loses its last letter at the limb and stops looking like
* grain at small sizes.
*
* So the word is ink again, over a dimmed screen. 19px at 600 with the
* original tracking: heavier and wider was needed when the letters were a
* hole and had no contrast of their own, and reads as shouting now that they
* do.
*/
.gw-wordmark {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
font-family: var(--gw-ui);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.2px;
color: #e9e9ea;
user-select: none;
}
/*
* The gleam: the mark raised off the end of the word, not set into it.
*
* `align-self: flex-start` rather than a negative margin, because the
* wordmark is a centred flex row — a margin would move the whole line's
* baseline instead of just this glyph. The small left pull tucks it into the
* y's shoulder; without it the gap reads as a space and the mark looks like a
* separate object sitting next to the word.
*
* No plate behind it. The filled square it once had read as a logo container.
*/
/*
* The gleam stays *ink*, while the word became a hole.
*
* It is the one part of the mark that is not a knockout: a glint knocked out
* of the dots would be a gap in a gap, which reads as nothing. Its own fill is
* set where it is drawn, so it does not inherit the word's background colour.
*/
.gw-wordmark-gleam {
display: flex;
align-self: flex-start;
width: 13px;
height: 13px;
margin-left: -1px;
margin-top: -1px;
}
/* -------------------------------------------------------------- section */
.gw-section { display: block; }
/*
* A left-aligned disclosure row with a hairline under it. The centred rounded
* pill it replaces drew a border and a fill around every one of ten sections,
* which is more chrome than the controls inside them.
*/
.gw-section-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
height: 24px;
margin: 12px 0 7px;
padding: 0 2px;
background: transparent;
border: none;
border-bottom: 1px solid var(--gw-hairline);
border-radius: 0;
cursor: pointer;
user-select: none;
}
.gw-section-head:hover .gw-section-title { color: var(--gw-text); }
/* The triangle itself is an SVG — see `_drawChevron`. This only positions and
colours it, since UXP cannot draw the CSS border version. */
.gw-section-chevron {
display: flex;
align-items: center;
flex: 0 0 auto;
width: 9px;
height: 9px;
color: var(--gw-text-off);
}
.gw-section-head:hover .gw-section-chevron { color: var(--gw-text); }
.gw-section-title {
font-family: var(--gw-ui);
font-size: 10px;
font-weight: 600;
/* 0.8, not 2.4. Wide tracking on a 10 px uppercase label is a poster
device; at this size it just makes the word hard to read. */
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--gw-text-dim);
}
.gw-section-glyph {
font-size: 14px;
color: var(--gw-text);
line-height: 1;
}
.gw-section.is-collapsed .gw-section-title { color: var(--gw-text-dim); }
/* A section's own reset, pushed to the far end of its header. Quiet until the
header is hovered, and quieter still when there is nothing to reset. */
.gw-section-reset {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-left: auto;
color: var(--gw-text-off);
cursor: pointer;
}
.gw-section-reset svg { transition: transform 0.45s ease; }
.gw-section-head:hover .gw-section-reset { color: var(--gw-text-dim); }
.gw-section-reset:hover { color: var(--gw-text); }
.gw-section-reset.is-off,
.gw-section-head:hover .gw-section-reset.is-off { color: var(--gw-hairline); cursor: default; }
.gw-section-body {
display: flex;
flex-direction: column;
gap: 2px;
}
/* ------------------------------------------------------------------ row */
/*
* A develop-panel row: label, then the track, then the number.
*
* The rows used to be cards — a filled pill for the label inside a filled
* rounded row — which at nine sections and 320-odd controls reads as a wall of
* boxes. A dense develop panel gets there by removing almost all of it:
* the row is not drawn at all, the label is plain text on the left, the track
* runs through the middle, and the value sits right-aligned at the end with no
* box until you touch it. The chrome that is left is the track and the handle,
* which are the parts that carry information.
*/
/*
* 28px tall with a 12px gap, up from 26 and 10.
*
* The panel is a column of forty of these, so the two numbers are the whole
* feel of it — and at 26/10 the slider's handle at full travel sat against
* the value box with about four pixels between them, which reads as one
* jammed control rather than two.
*/
.gw-row {
display: flex;
align-items: center;
gap: 12px;
height: 28px;
padding: 0 5px 0 3px;
background: transparent;
border-radius: 0;
overflow: hidden;
}
.gw-row + .gw-row { margin-top: 3px; }
/* The whole row lights up on hover, which is the only row background left. */
.gw-row:hover { background: var(--gw-bg-raised); border-radius: 4px; }
/* Dimmed, not filled. With the rows no longer drawn, a disabled background
reads as a card that survived the restyle rather than as "not available". */
.gw-row.is-disabled { background: transparent; }
.gw-row.is-disabled:hover { background: transparent; }
.gw-label {
flex: 0 0 31%;
min-width: 66px;
max-width: 120px;
/* Follows .gw-row's height; a shorter label stops centring against it. */
height: 28px;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-start;
background: transparent;
border-radius: 0;
color: var(--gw-text-dim);
font-size: 10.5px;
white-space: nowrap;
overflow: hidden;
/* Double-click resets the control, so the label is a target, not prose. */
cursor: default;
user-select: none;
}
.gw-row:hover .gw-label { color: var(--gw-text); }
.gw-label-wide { flex-basis: 38%; }
.gw-row.is-disabled .gw-label {
background: transparent;
color: var(--gw-text-off);
}
.gw-row-controls {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
/* ---------------------------------------------------------- number field */
.gw-field {
/*
* 52px, not 40.
*
* At 40 the plugin clipped three digits: Spread at 100 rendered as "10C",
* with the last glyph cut in half. The app was fine at the same width,
* which is what made it a plugin bug rather than an arithmetic one — UXP
* does not render `` as an HTML input, it maps it to its own text
* field with its own internal chrome, so the usable width inside the same
* 40px box is smaller there than here.
*
* 52 is not a guess. The plugin's panel is 332px; after the scrollbar, the
* section padding and the row padding, a row has 292px to spend. A 31%
* label caps at 91px, so 52px of field and two 12px gaps still leave 125px
* of slider — three times the 40px floor `.gw-slider` sets. Four digits and
* a minus sign fit, which Hue at -180 needs.
*/
flex: 0 0 52px;
height: 18px;
/*
* The value keeps a quiet box, in both surfaces, because in one of them it
* has no choice.
*
* A borderless number at rest was the intent and it works in the app. It
* cannot work in the plugin: UXP does not render `` as an HTML input,
* it maps it to its own text field with its own chrome, and neither
* `border: none` on the input nor a transparent border on the container
* removes it. Both `transparent` and `rgba(0,0,0,0)` were tried, and the
* installed stylesheet was confirmed byte-identical to this file each time,
* which is what narrowed it to UXP's own widget rather than a CSS mistake.
*
* So the choice was a nicer app or two surfaces that look the same, and this
* panel's whole discipline is that they look the same. The box is dark and
* thin enough to stay quiet in a column of twenty.
*/
background: var(--gw-field);
border: 1px solid var(--gw-field-border);
border-radius: 3px;
display: flex;
align-items: center;
cursor: ew-resize;
}
/*
* The box appears only when the number is in play. At rest it is just a
* number, which is what makes a column of them scannable.
*
* Two separate rules, and `is-editing` set from JS rather than
* `:focus-within`. Grouped as one selector list with `:focus-within` in it,
* UXP matched the whole rule unconditionally and every value in the Photoshop
* panel drew its box permanently while the app drew none — the two surfaces
* looked different, which is the one thing they may not do.
*/
/* Brighter while it is being typed into. UXP draws its own focus ring on the
widget, so both surfaces indicate focus even though they draw it
differently. */
.gw-field.is-editing { border-color: #7d7d7d; }
/* A value typed past the slider's range: legal, and worth saying so. */
.gw-field.is-extended {
border-color: #b8893a;
}
.gw-field.is-disabled {
border-color: #333;
background: #141414;
}
.gw-field-input {
font-family: var(--gw-num);
width: 100%;
height: 100%;
padding: 0 5px;
border: none;
background: transparent;
color: var(--gw-text);
font-size: 10.5px;
text-align: right;
cursor: text;
}
.gw-field.is-disabled .gw-field-input { color: var(--gw-text-off); }
/* --------------------------------------------------------------- slider */
.gw-slider {
position: relative;
flex: 1 1 auto;
min-width: 40px;
height: 18px;
display: flex;
align-items: center;
cursor: pointer;
}
/*
* Inset by the handle's radius at both ends, which is what stops the handle
* leaving its own box.
*
* The handle is 9px across and positioned by a percentage of this element, so
* at 0 and 100 its centre sits on this element's ends. With the track running
* the full width of the slider, those ends were the slider's ends, and 4.5px
* of ring hung outside — over the value box on the right, which is what made
* the plugin's rows look jammed together. `left`/`right` of 5px pulls the
* travel in by just over that radius, so the handle's outer edge lands flush
* with the slider instead of past it.
*
* `Slider._fromPointer` measures *this* element, so the pointer mapping
* follows the inset for free: it was always the track that defined the range.
*/
.gw-track {
position: absolute;
left: 5px;
right: 5px;
height: 2px;
background: var(--gw-track);
border-radius: 1px;
}
.gw-fill {
position: absolute;
left: 0;
top: 0;
height: 2px;
background: var(--gw-fill);
border-radius: 1px;
}
/*
* Open ring handle, centred on its position — and now a child of the 2px
* track, so it needs its own vertical centring. As a sibling of the track it
* inherited the slider's flex centring; inside a 2px box it would otherwise
* sit against the top.
*/
.gw-handle {
position: absolute;
top: 50%;
width: 9px;
height: 9px;
margin-left: -4.5px;
margin-top: -4.5px;
border: 1px solid #e9e9ea;
border-radius: 50%;
background: #e9e9ea;
}
.gw-slider.is-disabled .gw-handle { background: transparent; }
.gw-slider.is-active .gw-handle,
.gw-slider:hover .gw-handle { background: rgba(233, 233, 234, 0.22); }
.gw-slider.is-disabled { cursor: default; }
.gw-slider.is-disabled .gw-track { background: #333; }
.gw-slider.is-disabled .gw-fill { background: transparent; }
.gw-slider.is-disabled .gw-handle { border-color: #4a4a4a; background: transparent; }
/* ----------------------------------------------------------- levels row */
.gw-row-levels { height: 30px; }
.gw-levels {
position: relative;
flex: 1 1 auto;
height: 20px;
display: flex;
align-items: center;
}
.gw-levels .gw-track { background: var(--gw-track); }
.gw-levels .gw-fill { background: var(--gw-fill); }
.gw-levels .gw-handle { cursor: ew-resize; }
.gw-handle-gamma {
width: 9px;
height: 9px;
margin-left: -4.5px;
border-radius: 2px;
transform: rotate(45deg);
}
/* --------------------------------------------------------------- picker */
.gw-picker {
flex: 1 1 auto;
min-width: 0;
--spectrum-picker-min-width: 60px;
}
sp-picker { width: 100%; }
/* --------------------------------------------------------------- swatch */
.gw-swatch {
flex: 0 0 44px;
height: 18px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.22);
cursor: pointer;
}
.gw-swatch-grid {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 3px 1px 5px;
}
.gw-swatch-grid-item {
flex: 0 0 22px;
height: 16px;
border-radius: 3px;
}
/* The palette's fold (`renderSwatchGrid`): the tops of the next row, cut by
the bar's own height and faded by mixing each chip's colour with the
ground (`peekHex`) — UXP honours neither a transparent colour nor
`opacity` here. Open, it is a thin bar to fold the bank again. */
.gw-swatch-peek {
flex: 1 0 100%;
display: flex;
gap: 3px;
height: 6px;
margin-top: -1px;
overflow: hidden;
cursor: pointer;
}
/* Outlined, opaquely, so a dark ink still shows where it is: faded toward a
dark ground, a near-black one was the ground (a gradient's first twenty
inks all read about (31, 33, 36) on (38, 38, 38)). */
.gw-swatch-peek-chip {
flex: 0 0 22px;
height: 16px;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #5a5a5a;
}
/* Nothing to fold: the peek's own height, blank, so the folded strip is one
height whatever it holds (§79). */
.gw-swatch-peek.is-spacer { cursor: default; }
.gw-swatch-peek.is-open {
height: 4px;
margin-top: 2px;
border-radius: 2px;
background: var(--gw-outline);
}
.gw-swatch-add {
flex: 0 0 22px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #5a5a5a;
background: transparent;
color: var(--gw-text-dim);
font-size: 12px;
line-height: 1;
}
/* ------------------------------------------------------------- toolbar */
.gw-toolbar {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 0 1px;
flex-wrap: wrap;
}
.gw-tool {
flex: 0 0 auto;
width: 26px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gw-tool);
border-radius: 4px;
color: var(--gw-text);
cursor: pointer;
}
.gw-tool:hover { background: #363636; }
/* A tool with nothing to act on — undo at the bottom of the stack. */
.gw-tool.is-off { color: var(--gw-text-off); cursor: default; }
.gw-tool.is-off:hover { background: var(--gw-tool); }
/* An engaged toggle stays legible without dominating the row, a quiet strip
of near-identical dark buttons. */
.gw-tool.is-on { background: #5c6470; color: #f2f4f7; }
/* BETA (§85): a word rather than a glyph, so as wide as it needs; in the
accent while beta features are hidden and something uses one. */
.gw-tool[data-tool="beta"] { width: auto; padding: 0 6px; }
.gw-tool-beta { font-family: var(--gw-ui); font-size: 8.5px; font-weight: 700; letter-spacing: 0.8px; }
.gw-tool[data-tool="beta"].is-set { color: var(--gw-accent); box-shadow: inset 0 0 0 1px var(--gw-accent); }
.gw-tool-group {
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
background: var(--gw-tool);
border-radius: 4px;
}
.gw-tool-group .gw-tool { background: #cfd3d8; color: #111; width: 20px; height: 18px; }
.gw-tool-group .gw-tool.is-on { background: #f2a01e; }
.gw-tool-swatch {
flex: 0 0 20px;
width: 20px;
height: 18px;
border-radius: 2px;
border: 1px solid #555;
cursor: pointer;
}
/* Transparent background: show a checker so the state is unmistakable. */
.gw-tool-swatch.is-transparent {
background-color: #8c8c8c;
background-image: linear-gradient(45deg, #5a5a5a 25%, transparent 25%, transparent 75%, #5a5a5a 75%);
background-size: 8px 8px;
}
.gw-tool-a {
font-family: var(--gw-ui);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.gw-tool-tile {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #cfd3d8;
border-radius: 2px;
}
.gw-tool-m {
font-family: var(--gw-ui);
font-size: 10px;
font-weight: 700;
color: #111;
line-height: 1;
}
.gw-tool.is-on .gw-tool-tile { background: #111; }
.gw-tool.is-on .gw-tool-m { color: #cfd3d8; }
/* -------------------------------------------------------- palette tools */
.gw-row-palette { padding-left: 4px; }
.gw-palette-tools { display: flex; gap: 3px; flex: 0 0 auto; }
.gw-palette-tools .gw-tool { width: 22px; height: 18px; }
.gw-picker-palette { margin-left: 6px; }
/* --------------------------------------------------------------- footer */
/*
* The commit bar: first thing under the logo.
*
* It used to sit last, under nine sections, which in the plugin's 332x835
* window is a long scroll from the top — and RENDER is the control reached
* first and most often.
*
* In flow, deliberately. `position: sticky` was tried first and UXP renders it
* wrongly: on a flex column child it drops out of flow and collapses to
* content width, so RENDER came out as a small box overlapping the wordmark.
* Pinning it properly would mean mounting it outside the scrolling element,
* and the two host pages use different ones — `#gw-scroll` in the plugin,
* `#gw-panel` in the app — so that would buy a pinned bar at the cost of the
* two surfaces no longer having the same structure, which is the property
* `dev/surface-parity.js` exists to hold.
*/
.gw-footer { padding: 2px 0 4px; }
.gw-btn {
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #1e1e1e;
border: 1px solid var(--gw-outline);
border-radius: 6px;
color: var(--gw-text);
font-family: var(--gw-ui);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.9px;
cursor: pointer;
user-select: none;
}
.gw-btn:hover { background: #161616; }
.gw-btn.is-busy { color: var(--gw-text-dim); cursor: progress; }
.gw-commit { display: flex; gap: 8px; }
.gw-commit .gw-btn { flex: 1 1 50%; }
/* -------------------------------------------------------------- popover */
.gw-popover {
position: fixed;
z-index: 40;
width: 210px;
padding: 8px;
background: #1c1c1c;
border: 1px solid #4a4a4a;
border-radius: 6px;
}
.gw-popover-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gw-popover-x {
flex: 0 0 18px;
width: 18px;
height: 22px;
box-sizing: border-box;
line-height: 20px;
text-align: center;
font-size: 15px;
color: var(--gw-text-dim);
border: 1px solid var(--gw-field-border);
border-radius: 3px;
cursor: pointer;
}
.gw-popover-x:hover { color: var(--gw-text); border-color: #6a6a6a; }
/* The eyedropper: the close button's box, lit while a pick is waiting. */
.gw-popover-pick {
flex: 0 0 22px;
width: 22px;
height: 22px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
color: var(--gw-text-dim);
border: 1px solid var(--gw-field-border);
border-radius: 3px;
cursor: pointer;
}
.gw-popover-pick:hover { color: var(--gw-text); border-color: #6a6a6a; }
.gw-popover-pick.is-on { color: #161616; background: var(--gw-accent); border-color: var(--gw-accent); }
.gw-popover-preview {
flex: 0 0 34px;
height: 22px;
border-radius: 3px;
border: 1px solid #555;
}
/*
* A fixed width, not `flex: 1 1 auto`.
*
* UXP maps `` to Adobe's own text field, chrome and all, and a flex
* item's `min-width` defaults to `auto` — so the field refused to shrink below
* its intrinsic width and ran off the right-hand edge of a 210px popover.
* `flex-basis: auto` made it worse by starting the calculation from that same
* intrinsic width.
*
* 128px, measured rather than derived: 210 - 16 padding - 34 preview - 18
* close - 12 of two gaps comes to 130, and at 130 the close button's right
* edge landed 1px outside the content box. 128 leaves the row 2px of slack.
*/
.gw-popover-hex {
flex: 0 0 128px;
width: 128px;
min-width: 0;
box-sizing: border-box;
height: 22px;
padding: 0 6px;
background: var(--gw-field);
border: 1px solid var(--gw-field-border);
border-radius: 3px;
color: var(--gw-text);
font-family: var(--gw-ui);
font-size: 11px;
}
/* With the eyedropper in the row the field gives up its box and a gap, 28px,
by the same arithmetic: "#rrggbb" at 11px wants about 50. */
.gw-popover.has-pick .gw-popover-hex { flex-basis: 100px; width: 100px; }
/*
* The two gradient stops. Whichever is selected takes the sliders, the hex
* field and the chip strip below, so the tiles need to say which one that is
* loudly enough to be read at 22 px: the selected one gets a light border and
* the other a dim one.
*
* The empty stop is drawn as diagonal stripes rather than as a transparent
* tile, because UXP does not honour `transparent` as a border or background
* colour — the borderless value field and the CSS chevron were both lost to
* that, and a stop that renders as a plain dark square would read as black
* ink rather than as no ink.
*/
.gw-popover-stops {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 7px;
padding-bottom: 7px;
border-bottom: 1px solid var(--gw-hairline);
}
/*
* The gradient strip, and its stops.
*
* The strip is tall enough to be a pointer target on its own — clicking it
* adds a stop — and the markers hang *below* the ink so a marker never covers
* the colour it is pointing at. `overflow: visible` on the strip is therefore
* load-bearing.
*
* Every colour here is an opaque hex or a CSS gradient of them. No
* `transparent`, for the reason the spectrum field's comment gives at length:
* UXP does not honour it, and a marker that rendered as a black square would
* be indistinguishable from a stop holding black.
*/
.gw-grad-strip {
position: relative;
height: 18px;
margin-bottom: 9px;
cursor: copy;
}
.gw-grad-ink {
height: 18px;
border: 1px solid var(--gw-field-border);
border-radius: 3px;
}
/*
* A marker is a square rotated to a diamond, which reads as a pointer rather
* than as a swatch and cannot be confused with the chips in the strip below.
* Its own colour is inside it, so the list can be read at a glance.
*/
.gw-grad-stop {
position: absolute;
top: 17px;
width: 9px;
height: 9px;
margin-left: -4.5px;
border: 1px solid #14171b;
transform: rotate(45deg);
cursor: ew-resize;
}
.gw-grad-stop.is-on { border-color: #f2f2f2; }
/* The ink's own stop cannot move or be removed — it is the swatch. A round
marker says so without a tooltip. */
.gw-grad-stop.is-fixed {
border-radius: 50%;
transform: none;
cursor: default;
}
.gw-grad-actions { display: flex; gap: 5px; }
/* Its own row, below the chips, so a destructive button is nowhere near the
colours you click to choose one. */
.gw-popover-delrow { display: flex; margin-top: 6px; }
.gw-popover-del {
flex: 1 1 auto;
height: 22px;
line-height: 22px;
box-sizing: border-box;
text-align: center;
font-size: 9px;
letter-spacing: 0.08em;
color: var(--gw-text-dim);
background: #241c1c;
border: 1px solid #5a3a3a;
border-radius: 3px;
cursor: pointer;
}
.gw-popover-del:hover { color: #f2d0d0; border-color: #8a4a4a; background: #3a2222; }
.gw-popover-stop {
flex: 0 0 30px;
height: 22px;
border-radius: 3px;
border: 1px solid #4a4a4a;
cursor: pointer;
}
.gw-popover-stop.is-on { border-color: #cfcfcf; }
.gw-popover-stop.is-empty {
background-color: #2a2a2a;
background-image: repeating-linear-gradient(
45deg, #3c3c3c 0, #3c3c3c 2px, #242424 2px, #242424 4px);
}
.gw-popover-fade {
flex: 1 1 auto;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 3px;
border: 1px solid var(--gw-field-border);
background: var(--gw-field);
color: var(--gw-text-dim);
font-family: var(--gw-ui);
font-size: 9px;
letter-spacing: 0.08em;
cursor: pointer;
}
.gw-popover-fade.is-on { color: var(--gw-text); border-color: #6a6a6a; }
/*
* The saturation/value field and the hue strip, which replaced three H/S/V
* sliders.
*
* Every colour here is an opaque hex. There is no `transparent`, no `rgba()`
* and no canvas, and all three are constraints rather than preferences — see
* the long comment on `ColorPopover` in js/ui.js. `dev/host-parity.mjs` reads
* all nine of the rules below back as text and fails the build if a zero-alpha
* colour appears in any of them, or if one of them goes missing.
*
* The border sits on the container and the geometry on an inner element, so
* the 1 px frame cannot shift the mapping from pointer position to colour:
* `ColorPopover._frac` measures `.gw-sv-rows` and `.gw-hue-ramp`, and the
* markers' percentages resolve against the same padding box.
*
* Square, not rounded. A radius needs `overflow: hidden` to clip the rows,
* and that would eat the half of the marker ring that hangs outside the field
* whenever saturation or value is at an end — which is exactly where it is
* most useful to see where you are.
*/
.gw-popover-sv {
position: relative;
margin-bottom: 7px;
border: 1px solid var(--gw-field-border);
cursor: crosshair;
}
/* 120 rows of 1 px. The count is `SV_ROWS` in js/ui.js and the two must
agree: a row taller than a pixel bands visibly down the grey edge. */
.gw-sv-rows { height: 120px; }
.gw-sv-row { height: 1px; }
/*
* A two-tone ring: a dark 1 px frame around a light 2 px one. A single-tone
* marker vanishes at one corner of this field or another — white at the white
* corner, dark along the black edge — and the live colour sits inside it so
* the ring reads as a sample rather than as a cursor.
*/
.gw-sv-ring {
position: absolute;
width: 14px;
height: 14px;
margin-left: -7px;
margin-top: -7px;
border: 1px solid #14171b;
border-radius: 50%;
background-color: #14171b;
}
.gw-sv-dot {
position: absolute;
left: 1px;
top: 1px;
width: 8px;
height: 8px;
border: 2px solid #f2f2f2;
border-radius: 50%;
/* A placeholder `_placeMarkers` overwrites on every move. It has to be some
colour rather than none: UXP would not honour `transparent` here either. */
background-color: #808080;
}
.gw-popover-hue {
position: relative;
margin-bottom: 8px;
border: 1px solid var(--gw-field-border);
cursor: ew-resize;
}
/* Six two-stop gradients rather than one seven-stop one; hue is piecewise
linear in RGB, so the six segments are exact. */
.gw-hue-ramp { display: flex; height: 14px; }
.gw-hue-seg { flex: 1 1 0; }
.gw-hue-ring {
position: absolute;
top: -2px;
width: 7px;
height: 18px;
margin-left: -3.5px;
border: 1px solid #14171b;
border-radius: 2px;
background-color: #f2f2f2;
}
.gw-popover-strip {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 8px;
}
/* A colour still to be chosen: the empty stop's stripes. */
.gw-popover-preview.is-empty {
background-color: #2a2a2a;
background-image: repeating-linear-gradient(
45deg, #3c3c3c 0, #3c3c3c 2px, #242424 2px, #242424 4px);
}
/* H, S and L under the chips. */
.gw-popover-hsl { margin-top: 8px; }
.gw-hsl-row {
display: flex;
align-items: center;
gap: 6px;
height: 18px;
}
.gw-hsl-name {
flex: 0 0 10px;
font-size: 9px;
color: var(--gw-text-dim);
}
.gw-hsl-row .gw-slider { flex: 1 1 auto; }
.gw-hsl-value {
flex: 0 0 24px;
font-size: 9px;
color: var(--gw-text);
text-align: right;
font-variant-numeric: tabular-nums;
}
.gw-popover-chip {
width: 21px;
height: 14px;
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.18);
cursor: pointer;
}
/* ---------------------------------------------------------------- toast */
.gw-toast {
position: fixed;
left: 8px;
right: 8px;
bottom: 8px;
z-index: 50;
padding: 7px 9px;
background: #1f1f1f;
border: 1px solid #4a4a4a;
border-radius: 5px;
color: var(--gw-text);
font-size: 10.5px;
display: none;
}
.gw-toast.is-visible { display: block; }
.gw-toast.is-error { border-color: #a8342b; color: #ffb9b3; }
/* ----------------------------------------------------------------- help */
/*
* The help panel, and the chrome About and Unfreeze's question share with it.
*
* Help itself is two panes wherever it has 560 px (§90): the rules for that
* hang off `.gw-help-book`, the class `buildHelp` adds, so the two dialogs
* that also carry `.gw-help` stay the one column they are. In Photoshop a
* modal dialog is a window of its own rather than a box in the panel, which
* is why Help can be wider there than the panel that opens it; see
* `showHelp` in js/main.js. The examples are the reason to want the width —
* a 336 px figure shows the dot structure, and the dot structure is the thing
* the tool is about.
*/
/*
* No `vw`/`vh` in this file. UXP resolves a viewport unit to ~0 rather than
* dropping it, and the difference matters: a dropped `max-width: 94vw` would
* have left the 368px below, but a `max-width` of 0 collapsed this dialog to
* its min-content width — about 50px, one character per line, down the left
* edge of the panel. The size is set in px from a measured `clientWidth`
* instead; see `showHelp` in js/main.js. `dev/host-parity.mjs` keeps them out.
*/
.gw-help {
display: block;
width: 368px;
box-sizing: border-box;
overflow-y: auto;
padding: 14px;
background: #1a1a1a;
border: 1px solid #4a4a4a;
border-radius: 8px;
color: var(--gw-text);
font-size: 11px;
line-height: 1.5;
}
/*
* Nothing in here may shrink.
*
* The panel lays this dialog out as a flex column whatever `display` says, and
* a flex child's default `flex-shrink: 1` means a definite height gets shared
* out rather than scrolled. The arithmetic is the symptom: the children add up
* to 1,607px inside a 744px box, a 54% squeeze, and what the panel drew was
* every paragraph overlapping the next by about half its lines. Each block
* keeps its content height now, and the definite height plus `overflow-y`
* above scrolls it — the same arrangement as `#gw-scroll`, which is the one
* scroll container known to work here.
*
* Both declarations are inert in a browser: the dialog is already a block
* there, so `flex-shrink` on its children means nothing, and the app measures
* 0 overlapping pairs before and after.
*/
.gw-help > * { flex-shrink: 0; }
.gw-help h3 {
margin: 0 0 8px;
font-family: var(--gw-ui);
font-weight: 600;
letter-spacing: 0.4px;
font-size: 13px;
}
.gw-help p { margin: 0 0 8px; }
.gw-help code { font-family: var(--gw-num); color: var(--gw-fill); }
/* The update line. `word-break` because the release URL is 78 characters and
the docked panel is 320 wide — without it the panel grows a horizontal
scrollbar and the sentence runs off the edge of it. */
.gw-help-update {
margin-top: 6px;
min-height: 15px;
word-break: break-word;
}
/* ------------------------------------------------------------- tone ramp */
.gw-tone-host {
display: flex;
flex-direction: column;
gap: 5px;
}
.gw-note {
padding: 7px 10px;
background: var(--gw-row);
border-radius: 6px;
color: var(--gw-text-dim);
font-size: 10.5px;
line-height: 1.4;
}
/* ------------------------------------------------------------ palette menu */
.gw-palette-btn {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
height: 19px;
padding: 0 5px;
background: var(--gw-field);
border: 1px solid var(--gw-field-border);
border-radius: 3px;
color: var(--gw-text);
font-size: 10.5px;
cursor: pointer;
overflow: hidden;
}
.gw-palette-btn:hover { border-color: #6a6a6a; }
.gw-palette-btn.is-off { color: var(--gw-text-off); border-color: #333; background: #141414; cursor: default; }
.gw-palette-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-palette-btn-caret { flex: 0 0 auto; color: var(--gw-text-dim); }
.gw-palette-menu {
position: fixed;
z-index: 70;
width: 244px;
/* Height set in px from a measured innerHeight in `show()`, for the reason
given above `.gw-help`. */
overflow-y: auto;
background: #2a2a2a;
border: 1px solid #555;
border-radius: 4px;
padding: 3px 0;
}
.gw-palette-group {
padding: 6px 10px 2px;
color: #9a9a9a;
font-size: 9px;
letter-spacing: .7px;
text-transform: uppercase;
}
.gw-palette-item {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
color: #e4e4e4;
font-size: 10.5px;
cursor: pointer;
white-space: nowrap;
}
.gw-palette-item:hover { background: #3d3d3d; }
.gw-palette-item.is-sel { background: #444a52; }
.gw-palette-item-label { flex: 0 0 auto; max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
.gw-palette-item-note { flex: 0 0 auto; color: var(--gw-text-off); font-size: 9.5px; }
/* The chips sit right-aligned so the eye can run down them like a strip. */
.gw-palette-item-chips { flex: 1 1 auto; display: flex; justify-content: flex-end; gap: 1px; }
.gw-palette-chip {
width: 8px;
height: 12px;
border-radius: 1px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
/* ---------------------------------------------------------- inline action */
.gw-row-action {
padding: 0;
background: transparent;
}
.gw-btn-inline {
flex: 1 1 auto;
height: 24px;
font-size: 11px;
letter-spacing: 1.2px;
}
/* A button with nothing to act on: visibly inert, still laid out. */
.gw-btn.is-off {
color: var(--gw-text-off);
border-color: #333;
cursor: default;
}
.gw-btn.is-off:hover { background: transparent; }
.gw-preset-host { display: block; }
/* Several buttons sharing one action row. *//* Several buttons sharing one action row. */
.gw-row-action.gw-row-split {
display: flex;
gap: 4px;
}
/* A free-text field fills the row instead of sitting at a number's width. */
.gw-field-text {
flex: 1 1 auto;
cursor: text;
}
.gw-field-input-text {
text-align: left;
padding: 0 6px;
}
.gw-field-input-text::placeholder { color: var(--gw-text-off); }.gw-btn-inline {
flex: 1 1 auto;
height: 24px;
font-size: 11px;
letter-spacing: 1.2px;
}
/* ==================================================================== curves */
.gw-curve {
display: flex;
flex-direction: column;
gap: 5px;
background: var(--gw-row);
border-radius: 9px;
padding: 7px 8px 8px;
}
.gw-curve.is-disabled { background: var(--gw-row-disabled); }
.gw-curve.is-disabled .gw-curve-plot { opacity: 0.4; }
.gw-curve-head {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Matched to `.gw-section-title` — it is the same kind of label and was the
last thing still set in poster tracking. */
.gw-curve-title {
color: var(--gw-text-dim);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.gw-curve-chans { display: flex; gap: 3px; }
.gw-curve-chan {
min-width: 26px;
padding: 2px 5px;
border-radius: 5px;
background: var(--gw-pill);
color: var(--gw-text-off);
font-size: 9px;
letter-spacing: 0.6px;
text-align: center;
user-select: none;
}
.gw-curve-chan.is-on { background: var(--gw-fill); color: #14171b; }
/* A channel that has been shaped, so a curve hiding on another tab is visible
from the one you are looking at. */
.gw-curve-chan.is-set { color: var(--gw-text); }
.gw-curve-chan-r.is-set { color: #ff6b6b; }
.gw-curve-chan-g.is-set { color: #63d471; }
.gw-curve-chan-b.is-set { color: #6aa9ff; }
.gw-curve-chan.is-on.is-set { color: #14171b; }
/* The width/height here are a browser fallback only — UXP is sized by the
attributes CurveRow sets, because it resolves a CSS height on a viewBox'd