/* CrunchyUI — all CSS. Linked with in the so it works on file://. * * --css-build is checked by index.html. Bump BOTH whenever the stylesheet gains rules a new * feature needs: without the check a stale stylesheet is invisible — every script fresh, every * control working, the layout silently wrong. Browsers cache file:// siblings separately from the * page, so a plain reload really can pair a fresh index.html with a stale styles.css. */ :root { --css-build: 89; /* THE PAGE IS DARK, AND THIS IS THE ONLY THING THAT TELLS THE PLATFORM SO. It governs the native parts CSS cannot reach: an open keeps clear on its right for the caret drawn as a background image: 9px of arrow, inset 7px, plus air. ONE TOKEN because three rules need the same number, and BGM's own note records that a per-rule literal is how its four came to disagree. */ --caret-gap: 22px; /* Set from CHECKER in ui.js at startup — these are only the fallback. */ --chk-a: #ff00ff; --chk-b: #a000a0; --bg: #12141a; --panel: #1a1d26; --panel2: #21252f; --line: #2e333f; --ink: #dfe3ee; --dim: #8b94a8; --accent: #7ea6ff; --good: #7fe0a0; --bad: #ff8f97; /* ALIASES for the suite's shared token names, which the portable `suite-*` block below (copied unchanged from CrunchyTile) reads. This app spells muted text `--dim` and has one accent. */ --muted: var(--dim); --accent2: var(--accent); } * { box-sizing: border-box; } /* [hidden] LOSES TO ANY AUTHOR `display` RULE. The UA sheet says [hidden]{display:none}, but * `img.art { display:block }` is more specific, so hiding does nothing and the element sits there * showing its alt text. This companion is not optional the moment any rule sets `display` — and * an assertion on visibility must read getComputedStyle(...).display, never the `hidden` property, * which is `true` the whole time the thing is on screen. Inherited from CrunchyVFX, and hit here * on the very first dialog-free page. */ [hidden] { display: none !important; } html, body { height: 100%; } /* A COLUMN, so adding a bar between the header and the app does not mean hand-maintaining a `calc(100% - 46px)` that is wrong the moment anything above it changes height. */ body { display: flex; flex-direction: column; } body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; } code, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; } /* ---- chrome ------------------------------------------------------------------------------- */ header { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); } header h1 { font-size: 15px; margin: 0; letter-spacing: .2px; white-space: nowrap; } header h1 b { color: var(--accent); } header .tag { color: var(--dim); font-size: 12px; } /* THE TARGET SWITCH. Deliberately the largest control in the bar: §1's split between the two renderers is the thing this whole app is built around, and it had been two ordinary buttons in a row. A segmented pair rather than a toggle, because both states are NAMED — a switch that only says "SVG" leaves you guessing what the other position is. */ .tswitch { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .tswitch button { border: 0; border-radius: 0; padding: 7px 16px; font-size: 13px; font-weight: 600; background: var(--panel2); color: var(--dim); cursor: pointer; letter-spacing: .3px; } .tswitch button + button { border-left: 1px solid var(--line); } .tswitch button:hover { color: var(--fg); } .tswitch button.on { background: var(--accent); color: #10131a; } /* THE HEADER DOES NOT WRAP, or the buttons jump to a second row and back as the window moves. The build-stamp readout used to be the thing that gave way — it was the least important item in the bar and it ellipsised — and it is gone (2026-08-20); `.spacer` is what absorbs the slack now, and it shrinks to nothing before anything else has to. */ header { flex-wrap: nowrap; } header .fields, .hgroup { flex: none; } header .spacer { flex: 1; } /* Header groups, after the siblings. Undo/Redo get their OWN group with a rule down the left, because they are not generation — Randomize and Breed act on the KIT, these act on the WORK, and reading them as one row of eight buttons loses that. CrunchyBGM makes the same split. */ .hgroup { display: flex; gap: 4px; padding-left: 12px; border-left: 1px solid var(--line); } .hgroup button { padding: 4px 8px; } header .fields { display: flex; gap: 6px; } button.accent { border-color: #3b4a72; color: #cfe0ff; background: #222c44; } button.accent:hover { border-color: var(--accent); } /* ---- overlays ------------------------------------------------------------------------------ GENERIC. Every `.modal` gets Escape and a backdrop press from one place (index.html), never wired per dialog — CrunchyBGM's §39, learned after its second overlay duplicated the first's handlers. The backdrop IS the modal element; the box inside stops the press reaching it. `[hidden]` is handled by the global rule at the top of this file. It has to be: `.modal` sets `display: flex`, which beats the UA's `[hidden] { display: none }` outright. */ .modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(8, 9, 14, .74); } .modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); max-width: min(94vw, 880px); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } .modal-head, .modal-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); } .modal-foot { border-bottom: 0; border-top: 1px solid var(--line); } .modal-head h2 { font-size: 14px; margin: 0; } .modal-body { padding: 14px; overflow: auto; } .modal .spacer { flex: 1; } /* the breed grid */ .brood { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .brood .tile { border: 1px solid var(--line); border-radius: 7px; padding: 8px; cursor: pointer; background: var(--panel2); text-align: center; } .brood .tile:hover { border-color: var(--accent); } .brood .tile.parent { border-color: var(--good); } .brood .tile .row2 { display: flex; gap: 6px; justify-content: center; align-items: flex-end; } .brood .tile .cap { font-size: 10px; color: var(--dim); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #deps { display: none; padding: 10px 16px; background: #4d1418; color: #ffd9db; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; } #deps.show { display: block; } #app { display: flex; align-items: flex-start; gap: 0; flex: 1; min-height: 0; } /* ---- the roster ---------------------------------------------------------------------------- Tabs, not a dropdown: the set of elements IS the product, and a IN THE APP, NOT JUST THE ONES IN THE SIDEBAR (2026-08-24, ported from CrunchyBGM §61 at the maintainer's ask). This rule used to be `.ctl select`, which is the sidebar's control grid — so the app had TWO CLASSES OF SELECT and only one of them was styled. The other four (the PNG scale, the icon modal's scale, the SVG mode in the header) fell through to the native widget and came out as a WHITE BOX in a dark app. That is most of why the SVG mode "seemed hidden": it did not look like part of the application. BGM'S TWO HALVES, AND THEY FIX DIFFERENT WIDGETS. A `` is a real GTK combo box that IGNORES these colours, so on a system whose GTK theme disagrees with the app the dropdowns come out pale-on-pale and cannot be read. This app ships a Tauri build too, so it had the same latent bug on every select. BGM PINS DARK AND SFX PINS LIGHT; dark is right here for BGM's reason — these selects already look correct on the web and light popups in a dark editor would be a visible regression traded for an invisible one. */ select { appearance: none; -webkit-appearance: none; background-color: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 12px; padding: 3px var(--caret-gap) 3px 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%238b94a8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; } /* Several engines honour this even when the popup is native, and where they do not it costs nothing — the `color-scheme` above is what actually carries that case. */ select option { background: var(--panel2); color: var(--ink); } .ctl select, .ctl input[type="number"], .ctl input[type="text"] { grid-column: 2 / span 2; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font: inherit; font-size: 12px; appearance: none; } /* ...and the select keeps the caret gap the bare rule gave it, which the line above just reset. */ .ctl select { padding-right: var(--caret-gap); } .ctl input[type="range"] { width: 100%; accent-color: var(--accent); } /* The ramp, editable. `input[type=color]` is a browser-supplied picker: no library, no licence. The vendor pseudo-elements are what let it read as a flat swatch rather than a chunky control. */ .swatches { display: flex; gap: 2px; margin: 4px 0 8px; } input.sw { flex: 1; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: none; cursor: pointer; min-width: 0; } /* The swatch and its marker share a cell so the star can sit ON the colour without the colour input losing its own hit area — `pointer-events: none` keeps the star from eating the click. */ .swcell { position: relative; flex: 1; min-width: 0; display: flex; } .swmark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; pointer-events: none; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 0 #000, 0 -1px 0 #000; } input.sw::-webkit-color-swatch-wrapper { padding: 0; } input.sw::-webkit-color-swatch { border: 0; border-radius: 2px; } input.sw::-moz-color-swatch { border: 0; border-radius: 2px; } /* A ROLE IS A SWATCH ROW, NOT A NUMBER. These pick an index into the ramp, and a slider reading "2" says nothing about the colour until after you have moved it. */ .ctl.swatchrow { grid-template-columns: 88px 1fr; align-items: center; } .picks { display: flex; gap: 2px; } .picks .pick { flex: 1; height: 18px; padding: 0; min-width: 0; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; } .picks .pick.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* A note INSIDE a control group, explaining what is missing and why. Smaller and dimmer than a stage note: it is a footnote to the controls above it, not a heading for what follows. */ .note.tight { margin: 2px 0 6px; font-size: 11px; line-height: 1.45; color: var(--dim); } /* ---- the theme picker (§8.1.19) --------------------------------------------------------------- A theme IS its ramp, so the control shows ramps rather than names. Capped and scrolled for the same reason the icon grid is: sixteen strips is taller than the group below it deserves. */ .themepick { max-height: 246px; overflow-y: auto; padding-right: 2px; margin: 2px 0 4px; } .tpick { display: block; width: 100%; text-align: left; padding: 4px 5px 3px; margin-bottom: 3px; background: var(--panel2); border: 1px solid transparent; border-radius: 4px; } .tpick .tramp { display: flex; gap: 0; height: 14px; border-radius: 2px; overflow: hidden; } .tpick .tramp i { flex: 1; display: block; } .tpick .tname { display: block; font-size: 11px; color: var(--dim); margin-top: 3px; } .tpick:hover { border-color: var(--line); } .tpick.on { border-color: var(--accent); } .tpick.on .tname { color: var(--accent); } /* ---- the icon sheet (§8.1.12) ---------------------------------------------------------------- The roster in the MAIN column, because coherence is a property of the SET and 83 chips could be shown in a 300px sidebar but not read there. */ #sheet { margin: 4px 0 10px; } /* EIGHT FIXED COLUMNS, not auto-fill. A count that changes with the window makes the sheet a different picture at every size, and the sheet's job is to be ONE readable set — the same argument that moved it out of the sidebar. Fixed also gives each cell real room, so the art can be drawn large rather than at the smallest size that fitted everywhere. */ .sgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 4px 0 14px; } /* ...with one fallback, because eight columns below about 1100px squeezes a cell narrower than the art inside it, and a fixed count that clips is not a layout. */ @media (max-width: 1180px) { .sgrid { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 860px) { .sgrid { grid-template-columns: repeat(4, 1fr); } } .scell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 7px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; } .scell .art { display: flex; align-items: center; justify-content: center; height: 72px; } .scell canvas { display: block; image-rendering: pixelated; } /* A VECTOR CELL IS AN , so it needs the canvas's own layout rule — and it must NOT inherit the canvas's `image-rendering`. Resolving a curve smoothly is the whole difference the render switch exists to show, and pixelating it here would draw the raster's staircase over the vector. */ .scell img { display: block; } /* THE DROP AFFORDANCE. A dashed accent frame while a file is over the window, and a line saying what will happen — without it the only feedback that a drop is live is that the page did NOT navigate away, which is not feedback. `content` here is app chrome, the same as every label; §13 is about what lands in an EXPORT. */ body.dropping #app { outline: 2px dashed var(--accent); outline-offset: -6px; } body.dropping::after { content: "Drop an SVG or PNG to import it as an icon"; position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 8px 16px; border-radius: 8px; pointer-events: none; z-index: 9999; background: var(--panel2); color: var(--ink); border: 1px solid var(--accent); font-size: 13px; } .scell img.vector { image-rendering: auto; } .scell .cap { font-size: 11px; color: var(--dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scell:hover { border-color: var(--accent); } .scell.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .scell.on .cap { color: var(--accent); } /* One icon's detail. Two columns so the picture and the numbers are read together rather than scrolled between — the modal is small enough that stacking them would hide one. */ .idetail { display: flex; gap: 18px; align-items: flex-start; } .ipreview { flex: none; } .iside { flex: 1; min-width: 220px; } .iside .group { margin: 0 0 10px; } /* A param with four or fewer stops renders as buttons instead of a slider, so every value is readable without moving anything. It spans the value column too — the label IS the value. */ .segs { display: flex; gap: 3px; grid-column: 2 / span 2; } .segs .seg { flex: 1; padding: 3px 0; min-width: 0; font-size: 11px; font-family: ui-monospace, Menlo, Consolas, monospace; } .segs .seg.on { border-color: var(--accent); color: var(--accent); background: var(--panel); } button { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; } button:hover { border-color: var(--accent); } button[disabled] { opacity: .4; cursor: default; border-color: var(--line); } button.on { border-color: var(--accent); color: var(--accent); } input.seed { width: 92px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font: inherit; font-size: 12px; } .seedlab { color: var(--dim); font-size: 11px; } label.chk { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); font-size: 12px; cursor: pointer; } label.chk input { accent-color: var(--accent); } #dlScale { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 12px; } .catlab { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--dim); margin: 8px 0 3px; } .kits { display: flex; flex-wrap: wrap; gap: 4px; } button.kit { padding: 3px 7px; font-size: 11px; } /* The transparency key. `i.chk` reuses the same --chk vars the canvases do, so the swatch and the thing it explains can never drift apart — a legend showing the wrong colour is worse than none. */ .legend { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11px; } .legend i.chk { width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--line); background-color: var(--chk-a); background-image: linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%), linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; } /* WHAT GOES IN THE ARCHIVE. A long list most sessions never open, so it is a
and the summary carries the two numbers that decide whether anyone needs to. The items are a dense grid rather than a column: 151 names down the page would push Export off the screen entirely, and the point of the control is that it stays cheap to ignore. */ #exPick { margin: 6px 0 10px; font-size: 12px; } #exPick > summary { cursor: pointer; color: var(--dim); padding: 3px 0; } #exPick > summary:hover { color: var(--ink); } #exPick > summary b { color: var(--ink); font-weight: 600; } #exGroups { margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); max-height: 320px; overflow-y: auto; } /* THE EXPORT PACKS. A row per pack: name, how many defs, how big, and the button. Laid out as a grid rather than a flex row so the SIZES line up in a column — the whole point of the tab is comparing them, and a ragged column of numbers is the one thing that stops you doing that. */ .packrow { display: grid; grid-template-columns: 1fr auto 92px auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; } .packrow + .packrow { margin-top: 4px; } .packrow:nth-child(odd) { background: var(--panel2, rgba(255,255,255,.02)); } /* THE DEFAULT READS AS THE DEFAULT. A rule above it and a brighter name, because "Kit" is the one most people want and it sits BELOW the five it is made of — which is the honest order (the parts, then the combinations) and would otherwise bury the recommendation at the bottom. */ .packrow.lead { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; padding-top: 11px; } .packrow.lead .packname b { color: var(--hi, var(--ink)); } /* THE REASON ARRIVES BEFORE THE NUMBERS. Boxed rather than a plain note, because it is explaining a figure that would otherwise look like a bug — and a paragraph of grey text above a list of sizes is a paragraph nobody reads. */ .movenote { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2, rgba(255,255,255,.02)); } .movenote b { color: var(--ink); } .packname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .packn { color: var(--dim); font-variant-numeric: tabular-nums; } .packsize { text-align: right; font-variant-numeric: tabular-nums; } /* ---- stage -------------------------------------------------------------------------------- */ h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); margin: 18px 0 8px; } h3:first-child { margin-top: 0; } /* THE PREVIEW'S TAB STRIP — Export and Live, one box. Deliberately NOT `.tswitch`, which is the header's segmented control: that shape says "two settings of one thing" (which renderer), and this says "two views of one thing" (the sprite, and the sprite working). A segmented pill sitting above a pane would read as a second target switch. THE SELECTED TAB MERGES INTO ITS PANE, which is the same trick the `tab` element does in the engine and it earns its keep for the same reason: shading alone leaves two boxes where one happens to be lighter, and breaking the line between the tab and the panel is what says "this is the page you are on". Here it is `margin-bottom: -1px` over the pane's own border, so the active tab's bottom edge is covered by the pane rather than drawn — a repaint, not an erase, exactly as in `frameOps`. Keep the two `-1px`s in step: they are the join. */ .vtabs { display: flex; gap: 3px; margin: 0 0 -1px 2px; position: relative; z-index: 1; } .vtabs button { font: inherit; font-size: 12px; padding: 5px 14px; cursor: pointer; color: var(--dim); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; } .vtabs button:hover { color: var(--ink); } .vtabs button.on { color: var(--ink); background: var(--panel); border-color: var(--line); /* The seam. The pane paints over this row, so the tab has no bottom edge where the two meet. */ padding-bottom: 6px; } .vpane { border: 1px solid var(--line); border-radius: 0 7px 7px 7px; background: var(--panel); padding: 12px; } .vpane > :first-child { margin-top: 0; } /* THE KIT SHEET'S SCENE TABS ARE SPRITES, not `.vtabs`. Everything here is layout only — no colours, no borders, no radius — because every pixel you can see is the kit's, drawn by the engine. A CSS box around a sprite tab would be the app disagreeing with the element about where the tab ends. The button is a bare hit target with the label sitting ON the sprite, exactly as the kit sheet's own lettering sits on its scenes: §13 says no export ever contains text, and the cheapest way to keep that true is for the words to live where a PNG encoder cannot reach them. */ /* THREE LAYERS, AND THE MIDDLE ONE IS THE BAR. The strip used to be lifted as a whole, which put every tab in front of the bar — so an UNSELECTED tab's bottom edge sat on top of the thing it is supposed to be tucked behind, and the two states differed only in shade. Half the cue was missing: a tab you are not on goes BEHIND the panel, and that is as much of the metaphor as the open edge is. selected tab z 2 its open bottom paints over the bar's top border — the seam the bar z 1 covers the closed tabs' bottom edges, tucking them behind it other tabs z 0 `.ktabs` must NOT carry a z-index of its own: that makes it a stacking context and traps the selected tab's `z: 2` inside it, so the bar (a sibling, later in the DOM) wins and paints over every tab including the selected one. Which is the bug this comment is here to stop recurring. */ .ktabs { display: flex; align-items: flex-end; padding-left: 12px; } .ktab { position: relative; z-index: 0; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; } .ktab.on { z-index: 2; } /* The last-resort tab: no sprite could be built, so the label needs a box of its own or two of them pile up in the corner and the strip reads as broken CSS rather than as a kit the engine could not draw. Deliberately plain — it is a fault indicator, not a style. */ .ktab.bare { padding: 4px 12px; border: 1px dashed var(--line); border-radius: 5px 5px 0 0; line-height: 1.4; } .ktab.bare .klab { position: static; } /* Either target: a canvas of real pixels, or the same description as vector. `pixelated` belongs to the raster one only — a vector tab is smooth by definition and that difference is the point of there being two (§1). `.kitpart` is positioned absolutely INSIDE a scene; out here it is an ordinary block, which the scoped rule below already leaves alone. */ .ktab canvas, .ktab img { display: block; } .ktab canvas { image-rendering: pixelated; } .ktab img { image-rendering: auto; } .ktab .klab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 1; pointer-events: none; /* Colour and halo are set per tab in index.html, derived from the pixel actually behind the label — a fixed pair is readable on most kits and invisible on the light ones, and "most kits" is not a standard the page people judge a kit on gets to use. These are the fallback. */ color: var(--ink); text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000; } .ktab:not(.on) .klab { opacity: .72; } /* Positioned so it can sit between the two tab layers above. */ .ktabband { position: relative; z-index: 1; } canvas.ktabband { display: block; image-rendering: pixelated; } img.ktabband { display: block; image-rendering: auto; } #kitwrap .kitpane { width: max-content; max-width: 100%; } /* A checkerboard, never a flat colour: a near-black ramp entry on a near-black page reads as a hole, and "transparent" and "very dark" must never look the same in a preview you trust. */ .checker, canvas.art, img.art { background-color: var(--chk-a); background-image: linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%), linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; } canvas.art, img.art { image-rendering: pixelated; display: block; } /* The SVG preview must NOT be pixelated — showing it scale smoothly beside the raster is the entire point of having two targets. */ img.art.vector { image-rendering: auto; } /* The verdict is the only thing coloured: a table of numbers where one row is red reads faster than a legend, and the two failing levels are deliberately different — "faint" is a judgement call and "invisible" is not. */ .facts tr.lg-faint td:last-child { color: #e0b055; } .facts tr.lg-lost td { color: #e8697d; } .facts tr.lg-lost td:last-child { font-weight: 600; } .frame { display: inline-block; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); } .thumbs { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; } .thumb { text-align: center; } .thumb .cap { font-size: 11px; color: var(--dim); margin-top: 4px; } table.facts { border-collapse: collapse; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; } table.facts td { padding: 2px 14px 2px 0; } table.facts td:first-child { color: var(--dim); } table.facts b { color: var(--good); font-weight: 600; } .note { color: var(--dim); font-size: 12px; max-width: 62ch; } .warn { color: var(--bad); } /* ---- the theme picker (§8.1.24). Three columns because the cell has to be big enough that a drift and a glow are legible in it; below about 70px wide they turn into fringe. */ .ctl.stack { display: block; } .ctl.stack > label { display: block; width: auto; margin-bottom: 3px; } .themegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; } .tcell { overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; background: #171b26; border: 1px solid #2a3040; border-radius: 3px; cursor: pointer; overflow: hidden; } .tcell:hover { border-color: #47506a; } .tcell.on { border-color: #6ea8ff; background: #1d2434; } .tcell canvas { image-rendering: pixelated; max-width: 100%; height: auto; } .tcell .tname { font-size: 9px; color: #9aa4bd; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tcell.on .tname { color: #cfe0ff; } .themepage { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 5px; } .pgbtn { padding: 1px 9px; font-size: 13px; line-height: 1.3; } .pgbtn:disabled { opacity: 0.35; cursor: default; } .pgnum { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; } /* ---- the kit sheet (§8.2). The canvas is the sprites; the spans are placeholder lettering that never enters an export (§13). */ /* STACKED AND LEFT-ALIGNED. Side by side, the two screens competed for the same eye and the pair drifted to the middle of a wide stage with a gulf beside the sidebar — so comparing a control to its effect meant crossing empty space. Stacking puts one screen under the other at the same left edge, which is also the order they are read in, and `flex-start` anchors that edge to the panel the controls live in. The gap is the only thing separating them now that neither sits on a backdrop, so it has to be bigger than a border. */ /* GAP ZERO, and that is load-bearing now. It was 18px to separate two stacked scenes; the children are a tab strip, the bar it sits on and the scene under that, and any gap at all breaks the seam the tabs exist to demonstrate. The scenes no longer stack, so nothing wants the space. */ #kitwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 0 10px 12px; } /* The picture pickers. Same shape as the theme grid on purpose — a grid of pictures means "pick a thing by looking at it", and two controls that do the same job should not look different. Three across rather than the theme grid's three-wide-by-four: these live inside a group among other controls, so the page has to be short enough not to bury what follows it. */ /* THE PICKER'S FILTER. On every picker, not only the long ones: a box that appears once a list passes some length is a control that moves under you as the roster grows, and the roster only grows. Sits between the header and the grid, full width, so the eye goes header -> filter -> results in reading order. */ .pickfind { display: flex; align-items: center; gap: 6px; margin: 4px 0 5px; width: 100%; } .pickfindin { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 4px 7px; border-radius: 4px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); } .pickfindin:focus { outline: none; border-color: var(--accent); } .pickfindin::placeholder { color: var(--dim); } /* Only drawn while a query is live — without it a short result set and a short list look the same, which is the one thing a narrowed grid cannot say for itself. */ .pfound { font-size: 11px; color: var(--dim); white-space: nowrap; } /* The download's own filename, under the pack's name. Monospace because it is a FILENAME and the hyphens and the extension are the part that matters; dim because it is an answer to a question nobody asked until they had already read the row above it. */ .packfile { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--dim); } /* The sheet reuses `.pickfindin`, so there is one filter box in the app rather than two that drift. It only needs a width here: in the sidebar the input fills a 300px column, and over the sheet it would otherwise stretch the whole eight-column grid. */ #sheetFindRow { align-items: center; gap: 8px; } #sheetFind { max-width: 320px; } /* A native colour input, sized like the other element controls. `appearance:none` for the same reason every