#celllabel { opacity: .7; font-variant-numeric: tabular-nums; } #dirty { color: #e0a030; font-size: .85rem; } .chared .lab { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 12px 0 6px; } .chared .field { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .chared .field span { flex: 0 0 62px; opacity: .8; } /* flex: 1 alone leaves min-width at auto, which is what lets a range input refuse to shrink to its share and hang a pixel past the rail. */ .chared .field input[type=range] { flex: 1 1 0; min-width: 0; margin: 0; } .chared .field.checkbox span { flex: 1; } .chared .toolset { display: flex; flex-wrap: wrap; gap: 4px; } /* Fixed-size buttons rather than a grid, because the three toolsets hold four, four and one. Four at 40px with 4px gaps is 172, inside the rail's 189, so no toolset wraps. */ /* Scoped to the three icon strips, not to every .toolset. The cell clipboard shares the class with word-labelled buttons, and a 40px box clips "Paste flipped" to "Paste flipp" -- inside the rail, so neither the overflow guard nor the squeeze sweep sees it. A rule that sizes a button for a glyph has to name the strips that hold glyphs. */ #modes button, #tools button, #headtools button { width: 40px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; } /* Selection is a filled state rather than an outline. outline drew outside the button's box, which is part of what crowded the rail. map-editor.css uses a 14% wash plus color: var(--accent) on the glyph, but its --accent is a bright #ffb000 against a similarly light panel; this editor's --accent is a much darker #3e5a8e over a darker panel, and tried at 14% the pressed state read as barely distinguishable from unpressed -- worse, tinting the glyph itself lost the contrast the plain white icon had against the dark panel. 45% is heavier than map-editor.css's 14% on purpose, to stay legible on this panel; the glyph stays white rather than accent-tinted for the same reason. */ #modes button[aria-pressed="true"], #tools button[aria-pressed="true"] { border-color: var(--accent, #3e5a8e); background: color-mix(in srgb, var(--accent) 45%, transparent); } .chared button .ic { width: 15px; height: 15px; } /* Two lines. Seven controls do not fit one 181px line, which is the rail's 209 less its 10px padding each side and the row's own 4px each side -- the measure button and the coverage readout used to sit past the rail's right edge with no way to scroll to them. */ #parts .part { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; column-gap: 6px; row-gap: 3px; padding: 4px 4px 6px; border-radius: 6px; cursor: pointer; } #parts .part .swatch { grid-column: 1; grid-row: 1; } #parts .part .name { grid-column: 2; grid-row: 1; } #parts .part .cov { grid-column: 3; grid-row: 1; } /* Line two spans the name and coverage columns: three 22px buttons and a 68px anchor is 146 inside the 161 they have. */ #parts .part .ctl { grid-column: 2 / 4; grid-row: 2; display: flex; align-items: center; gap: 4px; } #parts .part .ctl .anchor { margin-left: auto; width: 68px; } #parts .part .ctl button { width: 22px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; } #parts .part .ctl button .ic { width: 13px; height: 13px; } /* Same 45% wash and the same reasoning as .toolset button[aria-pressed] above: this panel is darker than map-editor.css's and this --accent is muted, so its 14% read as barely-pressed here. */ #parts .part .ctl button[aria-pressed="true"] { border-color: var(--accent, #3e5a8e); background: color-mix(in srgb, var(--accent) 45%, transparent); } #parts .part.active { background: rgba(255,255,255,.08); } #parts .part.hidden { opacity: .35; } #parts .swatch { width: 14px; height: 14px; border-radius: 3px; } #parts .cov { font-size: .72rem; opacity: .55; font-variant-numeric: tabular-nums; } #tones { display: flex; flex-wrap: wrap; gap: 3px; } #tones .tone { width: 20px; height: 20px; border-radius: 3px; border: 1px solid rgba(0,0,0,.45); cursor: pointer; position: relative; } #tones .tone:hover { outline: 2px solid #fff; } #tones .tone .owner { position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border-radius: 2px; } #grid { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; touch-action: none; } #textpanel fieldset { border: 1px solid var(--line, #2a2e39); border-radius: 6px; margin: 0 0 12px; padding: 6px 10px 10px; } #textpanel legend { padding: 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; } /* .field is the rail's own label+control row (assets/css/character-editor.css above); reused here rather than a second layout rule for the identity and casting-brief fields, which are the same shape. */ #textpanel .field span { flex: 0 0 90px; } #textpanel .field input[type=text], #textpanel .field select { flex: 1 1 0; min-width: 0; } /* A story or voice row: the sentence, a Remove/Play button and a Move/Import button, all three sized to the row rather than to their own text -- the buttons are word-labelled, unlike the icon rail, since there is no icon set for "remove a sentence" and inventing one for two buttons is not worth it. */ .chared .story-row, .chared .voice-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; } .chared .story-row input, .chared .voice-row input { flex: 1 1 0; min-width: 0; } .chared .story-row button, .chared .voice-row button { flex: none; font-size: .78rem; padding: 3px 8px; } /* The reason a value would be refused on export (refuseReason) is the input's title; this is the only visual sign of it besides hovering for the tooltip. */ #textpanel input[aria-invalid="true"] { outline: 1px solid #c04040; outline-offset: -1px; } /* A reading replaced from an imported clip, so the line on screen and the audio on disk are known to disagree until the text catches up (Task 11). */ #textpanel input[data-imported="true"] { border-color: #e0a030; } #pv { width: 100%; image-rendering: pixelated; background: #0c0d11; border-radius: 8px; } #swatches .prow { display: flex; align-items: center; gap: 3px; margin: 4px 0; flex-wrap: wrap; } #swatches .prow .name { flex: 0 0 54px; opacity: .8; font-size: .8rem; } #swatches .sw { width: 16px; height: 16px; border-radius: 3px; cursor: pointer; border: 1px solid rgba(0,0,0,.4); } #swatches .sw.sel { outline: 2px solid #fff; } #shortcuts { position: fixed; right: 16px; bottom: 16px; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: .85rem; } #shortcuts ul { margin: 0; padding-left: 0; list-style: none; } #shortcuts li { margin: 3px 0; opacity: .85; } #shortcuts b { display: inline-block; min-width: 8.5em; opacity: 1; } .chared .lab button { float: right; font-size: .8rem; line-height: 1; padding: 1px 6px; } #tones .tone.sel { outline: 2px solid #fff; } /* A tone no pixel carries any more keeps its slot: the strip must not reflow under the pointer. It greys out to say so. */ #tones .tone.empty { opacity: .3; } #strength[disabled] { opacity: .35; } .chared .cellsize { display: flex; align-items: center; gap: 4px; font-size: .78rem; opacity: .8; } .chared .cellsize input { width: 52px; } #preview .none { font-size: .78rem; opacity: .55; margin: 6px 0; } #fringestat { font-size: .72rem; opacity: .6; margin: 4px 0; } #cliptarget, #clipstat { font-size: .72rem; opacity: .6; margin: 4px 0; } /* --- the rail's icons ---------------------------------------------------- The same idiom as assets/css/map-editor.css: a 12x12 crispEdges SVG in a data URI, applied as a mask over currentColor, so one definition serves light, dark and the pressed state with no image asset and no second colour. .ic itself is duplicated from map-editor.css rather than shared. A common file would mean editing a working editor for no gain to it. Every glyph below was checked at 44px and at 15px, which is the size a rail button actually wears. Four earlier drafts failed that second look and the comments say what they failed at. */ .chared .ic { display: inline-block; width: 1.5em; height: 1.5em; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } /* The masthead's mark: a front-facing sprite, the same glyph the landing page's Tools card wears for this editor. Kept identical to the .ic-figure in scripts/releasenotes.js so the card and the page it opens agree. */ .chared .ic-figure { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='4' height='3'/%3E%3Crect x='0' y='3' width='12' height='1'/%3E%3Crect x='0' y='4' width='2' height='3'/%3E%3Crect x='4' y='4' width='4' height='3'/%3E%3Crect x='10' y='4' width='2' height='3'/%3E%3Crect x='3' y='7' width='6' height='2'/%3E%3Crect x='3' y='9' width='2' height='3'/%3E%3Crect x='7' y='9' width='2' height='3'/%3E%3C/svg%3E"); } /* A filled plate with a hole knocked through it: what a mask is. */ .chared .ic-mask { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='10' height='3'/%3E%3Crect x='1' y='4' width='3' height='4'/%3E%3Crect x='8' y='4' width='3' height='4'/%3E%3Crect x='1' y='8' width='10' height='3'/%3E%3C/svg%3E"); } /* The sprite sheet: a framed 3x2 grid of cells. */ .chared .ic-sheet { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='0' y='1' width='12' height='1'/%3E%3Crect x='0' y='10' width='12' height='1'/%3E%3Crect x='0' y='1' width='1' height='10'/%3E%3Crect x='11' y='1' width='1' height='10'/%3E%3Crect x='4' y='1' width='1' height='10'/%3E%3Crect x='8' y='1' width='1' height='10'/%3E%3Crect x='0' y='5' width='12' height='1'/%3E%3C/svg%3E"); } /* A bust rather than a circle. The circle itself is what the place tool draws, and .ic-place has it. */ .chared .ic-head { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='4' y='1' width='4' height='1'/%3E%3Crect x='3' y='2' width='6' height='3'/%3E%3Crect x='4' y='5' width='4' height='1'/%3E%3Crect x='2' y='8' width='8' height='1'/%3E%3Crect x='1' y='9' width='10' height='3'/%3E%3C/svg%3E"); } /* Three lines of text, the last one short: a page of prose, not a list -- .ic-row/.ic-all already own the grid-of-cells look, so this stays lines. */ .chared .ic-text { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='10' height='2'/%3E%3Crect x='1' y='5' width='10' height='2'/%3E%3Crect x='1' y='9' width='6' height='2'/%3E%3C/svg%3E"); } /* Upright: narrow handle, ferrule band, blunt bristles. Drawn as a diagonal it was indistinguishable from .ic-pencil at 15px, which is the size that matters -- mask-paint and sheet-pencil are the pair a hand confuses. */ .chared .ic-brush { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='2' height='4'/%3E%3Crect x='3' y='4' width='6' height='2'/%3E%3Crect x='3' y='6' width='6' height='4'/%3E%3Crect x='4' y='10' width='4' height='2'/%3E%3C/svg%3E"); } /* map-editor.css's .ic-pen geometry verbatim: a proven diagonal. */ .chared .ic-pencil { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='0' y='11' width='1' height='1'/%3E%3Crect x='1' y='10' width='2' height='1'/%3E%3Crect x='2' y='9' width='2' height='1'/%3E%3Crect x='3' y='8' width='2' height='1'/%3E%3Crect x='4' y='7' width='2' height='1'/%3E%3Crect x='5' y='6' width='2' height='1'/%3E%3Crect x='6' y='5' width='2' height='1'/%3E%3Crect x='7' y='4' width='2' height='1'/%3E%3Crect x='8' y='3' width='2' height='1'/%3E%3Crect x='9' y='2' width='2' height='1'/%3E%3Crect x='9' y='1' width='2' height='1'/%3E%3C/svg%3E"); } /* Axis-aligned, not slanted: an outlined block with the rubber/ferrule split across it, resting on the surface it clears. Slanted, it read as one more diagonal smear beside the brush and the pencil. */ .chared .ic-erase { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='2' y='2' width='8' height='1'/%3E%3Crect x='2' y='8' width='8' height='1'/%3E%3Crect x='2' y='2' width='1' height='7'/%3E%3Crect x='9' y='2' width='1' height='7'/%3E%3Crect x='2' y='5' width='8' height='1'/%3E%3Crect x='0' y='11' width='12' height='1'/%3E%3C/svg%3E"); } /* A ramp of rising bars: how much, not what. */ .chared .ic-strength { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='0' y='8' width='2' height='4'/%3E%3Crect x='3' y='5' width='2' height='7'/%3E%3Crect x='6' y='2' width='2' height='10'/%3E%3Crect x='9' y='0' width='2' height='12'/%3E%3C/svg%3E"); } /* A drop falling into a solid pool: the flood, not the vessel. A pail with a handle arc turned to porridge at 15px, and the handle was what did it. Shared by the mask's bucket and the sheet's fill -- one gesture, and the mode says which surface it lands on. */ .chared .ic-bucket { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='5' y='1' width='2' height='1'/%3E%3Crect x='4' y='2' width='4' height='2'/%3E%3Crect x='5' y='4' width='2' height='1'/%3E%3Crect x='0' y='7' width='12' height='4'/%3E%3C/svg%3E"); } /* A pipette: a wide hollow bulb, not a solid tip, over a diagonal shaft. The first draft's bulb was a small solid 4x3 block whose silhouette read as just one more diagonal beside .ic-pencil at 15px -- the two share a strip three buttons apart. This bulb is a 6x5 ring, wider and squarer than the shaft it sits on, so the outline itself reads as "bulb" before the eye ever reaches the diagonal. */ .chared .ic-dropper { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='6' y='0' width='6' height='1'/%3E%3Crect x='6' y='1' width='1' height='3'/%3E%3Crect x='11' y='1' width='1' height='3'/%3E%3Crect x='6' y='4' width='6' height='1'/%3E%3Crect x='5' y='5' width='2' height='1'/%3E%3Crect x='4' y='6' width='2' height='1'/%3E%3Crect x='3' y='7' width='2' height='1'/%3E%3Crect x='2' y='8' width='2' height='1'/%3E%3Crect x='1' y='9' width='2' height='1'/%3E%3Crect x='0' y='10' width='2' height='2'/%3E%3C/svg%3E"); } /* The ring the tool places, with its centre marked. */ .chared .ic-place { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='4' y='1' width='4' height='1'/%3E%3Crect x='2' y='2' width='2' height='1'/%3E%3Crect x='8' y='2' width='2' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='9' y='3' width='1' height='1'/%3E%3Crect x='1' y='4' width='1' height='4'/%3E%3Crect x='10' y='4' width='1' height='4'/%3E%3Crect x='2' y='8' width='1' height='1'/%3E%3Crect x='9' y='8' width='1' height='1'/%3E%3Crect x='2' y='9' width='2' height='1'/%3E%3Crect x='8' y='9' width='2' height='1'/%3E%3Crect x='4' y='10' width='4' height='1'/%3E%3Crect x='5' y='5' width='2' height='2'/%3E%3C/svg%3E"); } /* One family, three states of the same 3x3 grid: a filled block is a cell that carries a circle, a lone dot is a cell that does not. */ .chared .ic-row { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='3'/%3E%3Crect x='4' y='0' width='3' height='3'/%3E%3Crect x='8' y='0' width='3' height='3'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3Crect x='9' y='5' width='1' height='1'/%3E%3Crect x='1' y='9' width='1' height='1'/%3E%3Crect x='5' y='9' width='1' height='1'/%3E%3Crect x='9' y='9' width='1' height='1'/%3E%3C/svg%3E"); } .chared .ic-all { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='3'/%3E%3Crect x='4' y='0' width='3' height='3'/%3E%3Crect x='8' y='0' width='3' height='3'/%3E%3Crect x='0' y='4' width='3' height='3'/%3E%3Crect x='4' y='4' width='3' height='3'/%3E%3Crect x='8' y='4' width='3' height='3'/%3E%3Crect x='0' y='8' width='3' height='3'/%3E%3Crect x='4' y='8' width='3' height='3'/%3E%3Crect x='8' y='8' width='3' height='3'/%3E%3C/svg%3E"); } .chared .ic-seed { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='3'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='9' y='1' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='4' y='4' width='3' height='3'/%3E%3Crect x='9' y='5' width='1' height='1'/%3E%3Crect x='1' y='9' width='1' height='1'/%3E%3Crect x='5' y='9' width='1' height='1'/%3E%3Crect x='8' y='8' width='3' height='3'/%3E%3C/svg%3E"); } /* One channel raised over its neighbours. */ .chared .ic-solo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='0' y='7' width='3' height='4'/%3E%3Crect x='4' y='1' width='4' height='10'/%3E%3Crect x='9' y='7' width='3' height='4'/%3E%3C/svg%3E"); } /* An almond eight rows tall, so the 4x4 pupil fills half of it rather than two thirds. At six rows the outline read as a dumbbell. */ .chared .ic-eye { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='4' y='2' width='4' height='1'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3Crect x='8' y='3' width='2' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='10' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='2'/%3E%3Crect x='11' y='5' width='1' height='2'/%3E%3Crect x='1' y='7' width='1' height='1'/%3E%3Crect x='10' y='7' width='1' height='1'/%3E%3Crect x='2' y='8' width='2' height='1'/%3E%3Crect x='8' y='8' width='2' height='1'/%3E%3Crect x='4' y='9' width='4' height='1'/%3E%3Crect x='4' y='4' width='4' height='4'/%3E%3C/svg%3E"); } /* A rule with its ticks: measure. */ .chared .ic-ruler { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='0' y='3' width='12' height='1'/%3E%3Crect x='0' y='8' width='12' height='1'/%3E%3Crect x='0' y='3' width='1' height='6'/%3E%3Crect x='11' y='3' width='1' height='6'/%3E%3Crect x='2' y='4' width='1' height='2'/%3E%3Crect x='4' y='4' width='1' height='3'/%3E%3Crect x='6' y='4' width='1' height='2'/%3E%3Crect x='8' y='4' width='1' height='3'/%3E%3C/svg%3E"); } /* The same eye with a slash, and the one definition here that leaves crispEdges off, exactly as map-editor.css's .ic-dead does: the slash runs diagonally and crisp edges would stair-step it. The rects keep their hard edges anyway, being integer aligned. */ .chared .ic-eyeoff { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='4' y='2' width='4' height='1'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3Crect x='8' y='3' width='2' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='10' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='2'/%3E%3Crect x='11' y='5' width='1' height='2'/%3E%3Crect x='1' y='7' width='1' height='1'/%3E%3Crect x='10' y='7' width='1' height='1'/%3E%3Crect x='2' y='8' width='2' height='1'/%3E%3Crect x='8' y='8' width='2' height='1'/%3E%3Crect x='4' y='9' width='4' height='1'/%3E%3Crect x='4' y='4' width='4' height='4'/%3E%3Cpath d='M1 10.2l9.2-9.2 .8 .8-9.2 9.2z'/%3E%3C/svg%3E"); } /* The Character Creator (#271): MASK's mode strip toggles mask and head circles; SHEET and STORY are slots of their own. */ #modes [data-mode="sheet"], #modes [data-mode="text"] { display: none; } /* The creator pads inputs 10px a side (character-editor.css); the old rail's fixed-width number fields (cell size, part anchors) need the browser's own 1px 2px or their values clip ("19" for 192). */ .chared input:not([type=range]):not([type=checkbox]):not([type=color]) { padding: 1px 2px; } /* The sheet slots in the model slots' look (#271): the same headings, ghost icon buttons and pressed state as character-editor.css, and the pane's own gap instead of the old rail's margins. */ .pane.chared .lab, #preview .lab, #textpanel .lab { display: block; margin: 6px 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; } .pane.chared .lab button { float: none; margin-left: 8px; vertical-align: middle; } .pane.chared .field { margin: 0; } #modes button, #tools button, #headtools button { width: 36px; height: 36px; border-radius: 6px; background: none; border-color: transparent; } #modes button:hover, #tools button:hover, #headtools button:hover { background: color-mix(in srgb, var(--text) 10%, transparent); } #modes button[aria-pressed="true"], #tools button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-color: var(--accent); box-shadow: none; } .chared button .ic { width: 18px; height: 18px; } #parts .part { border-radius: 6px; } #parts .part.active { background: color-mix(in srgb, var(--accent) 18%, transparent); } #textpanel fieldset { border-color: var(--line); border-radius: 8px; } #preview { gap: 10px; } #pv { border-radius: 6px; } /* A preset with no sheet yet (#427): SHEET shows its Generate pane only; the sheet behind it is the last document's, not this character's. */ .sheetless-only { display: none; } body.sheetless .sheetless-only { display: block; margin-top: 6px; } body.sheetless #rail .pane[data-pane~="sheet"]:not(#genpane), body.sheetless #sheetstage, body.sheetless #preview, body.sheetless #zoombar { display: none !important; }