/* ══════════════════════════════════════════════════════════════════════════ mcubed — editor chrome Neutral, monochrome, low-ceremony. The interface should disappear behind the model: no warm cast, no coloured accent competing with the material preview, and only enough contrast to separate a pane from its neighbour. Three themes, switched by [data-theme] on . Only the tokens change. ══════════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme='mono'] { --bg-app: #0f0f10; --bg-panel: #161617; --bg-raised: #1c1c1e; --bg-input: #212123; --bg-hover: #262628; --line: rgba(255, 255, 255, 0.075); --line-strong: rgba(255, 255, 255, 0.15); /* * Three steps, and every one of them readable. * * `--text-faint` used to be #66666b — 3.17:1 on the panel, below the 4.5:1 * that small text needs, and it is what section titles, counts, shortcuts, * the status line and every hint are set in. The whole interface read as * greyed out. The steps are now roughly 14:1 / 7.6:1 / 5.4:1 on the panel: * still a clear hierarchy, but the quietest of them is legible rather than * decorative. Every pair in all three themes is checked by * `tools/check-contrast.mjs`, which `npm run check` runs. */ --text: #e4e4e6; --text-dim: #a8a8ad; --text-faint: #8c8c90; /* Monochrome accent: selection reads as brightness, not hue. */ --accent: #e8e8ea; --accent-soft: rgba(255, 255, 255, 0.10); --accent-line: rgba(255, 255, 255, 0.45); --accent-fg: #0f0f10; --sel-r: 1; --sel-g: 1; --sel-b: 1; --hov-r: 0.35; --hov-g: 0.75; --hov-b: 1; --era-r: 0.85; --era-g: 0.35; --era-b: 0.28; /* * Lines in the viewport, by role rather than by one shared dimming factor. * * Three strengths that differ by a tenth of an alpha read as one grey: the * cage, the block grid and the sub-grid all landed on top of each other, and * an empty block was a wash of identical faint strokes. They are separated * here on purpose — the cage says where the block ends and is nearly solid, * the block lines are clearly readable, and the sub-grid is the only one that * stays quiet, because it is the one you are not measuring against. */ --grid-l: 0.78; --cage-a: 0.92; --grid-a: 0.46; --grid-minor-a: 0.17; --stage-1: #1a1a1c; --stage-2: #0d0d0e; /* * Two reds, because the colour does two jobs. * * `--danger` is a fill with white text on it — one red cannot be both dark * enough for that (3.59:1 before) and light enough to read as text on a dark * panel. `--danger-text` is the one for words and for the marks that have to * be seen against the panel. */ --danger: #b8503c; --danger-text: #d98872; --warn: #d3a95f; --ok: #7fae8e; } :root[data-theme='vscode'] { --bg-app: #1e1e1e; --bg-panel: #252526; --bg-raised: #2d2d30; --bg-input: #3c3c3c; --bg-hover: #37373d; --line: rgba(255, 255, 255, 0.08); --line-strong: #3c3c3c; /* VS Code's own greys, lifted one step each: this theme's input background is #3c3c3c, and against it the originals fell to 2.16:1. Kept in the same family, so it still reads as the editor it quotes. */ --text: #d4d4d4; --text-dim: #b8b8b8; --text-faint: #a8a8a8; --accent: #0e639c; --accent-soft: rgba(14, 99, 156, 0.30); --accent-line: #007acc; --accent-fg: #ffffff; --sel-r: 0.0; --sel-g: 0.48; --sel-b: 0.80; --hov-r: 0.30; --hov-g: 0.70; --hov-b: 1; --era-r: 0.95; --era-g: 0.30; --era-b: 0.30; --grid-l: 0.76; --cage-a: 0.92; --grid-a: 0.46; --grid-minor-a: 0.17; --stage-1: #232326; --stage-2: #161617; /* VS Code's own pair: #a1260d is what it fills a destructive button with, #f48771 what it writes an error in. */ --danger: #a1260d; --danger-text: #f48771; --warn: #cca700; --ok: #89d185; } :root[data-theme='light'] { --bg-app: #f4f4f5; --bg-panel: #fbfbfc; --bg-raised: #ffffff; --bg-input: #ffffff; --bg-hover: #eeeef0; --line: rgba(0, 0, 0, 0.09); --line-strong: rgba(0, 0, 0, 0.18); --text: #1b1b1d; --text-dim: #4a4a50; --text-faint: #6c6c71; --accent: #1b1b1d; --accent-soft: rgba(0, 0, 0, 0.07); --accent-line: rgba(0, 0, 0, 0.55); --accent-fg: #ffffff; --sel-r: 0.1; --sel-g: 0.1; --sel-b: 0.12; --hov-r: 0.05; --hov-g: 0.42; --hov-b: 0.85; --era-r: 0.70; --era-g: 0.16; --era-b: 0.10; /* Dark lines on a pale stage: strength is depth of ink, not brightness. */ --grid-l: 0.20; --cage-a: 0.80; --grid-a: 0.34; --grid-minor-a: 0.13; --stage-1: #e9e9ec; --stage-2: #d9d9de; /* Dark enough on white to read as text and to carry white text itself, so here the two roles are genuinely one colour. */ --danger: #b3281a; --danger-text: #b3281a; --warn: #8a6100; --ok: #2d6a44; } :root { --gutter: 10px; /* Room a menu keeps on its right for the chevron drawn under `select`. */ --select-arrow: 18px; /* Height reserved at the bottom of the stage for the tool island. */ --island-band: calc(52px * var(--ui-scale)); /* Nested radii: an outer corner equals the inner corner plus the padding between them, so concentric boxes stay visually parallel. */ --pad: 2px; --r-sm: 2px; --r: 4px; /* controls: --r-sm + --pad */ --r-lg: 6px; /* panels: --r + --pad */ /* Type scale. `--fs-base` is the body size in px and everything is a fixed step off it, so the setting reads as a real font size rather than a percent. `--ui-scale` follows it so control heights keep pace with the text. */ --fs-base: 13px; --ui-scale: 1; --fs-xs: calc(var(--fs-base) - 3px); --fs-sm: calc(var(--fs-base) - 2px); --fs-md: calc(var(--fs-base) - 1px); --fs-lg: var(--fs-base); --row: calc(25px * var(--ui-scale)); --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; --ui: var(--font-ui); /* * What the world is set in: the game's own lettering. * * Always this stack, and no setting. Standing in the world is a mode you * enter deliberately and leave deliberately, and everything on screen there * is the game's furniture — so the font is part of the mode rather than a * preference to go and find. Outside it nothing refers to `--hud`, so the * editor is untouched. * * The fallback is the interface font, not a generic. The atlases cover Latin, * Cyrillic, Greek and a good deal besides, but not everything — unifont, the * game's own fallback for the rest, is a separate 16 MB archive and is not * built in — and on a machine with no Minecraft the `@font-face` never * resolves at all. Either way the next family carries it. */ --hud: 'Minecraft', var(--font-ui); --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ease: cubic-bezier(0.32, 0.72, 0, 1); } /* * The game's own lettering, for the world's own HUD. * * Minecraft ships no vector font — its type is bitmap atlases inside the client * jar — so this file is assembled by the server from the copy already installed * on this machine and nothing is redistributed. On a machine with no game the * route 404s, the `@font-face` never resolves, and the next family in `--hud` * carries the world: no check to write and nothing to switch off. * * `font-display: block` rather than `swap`: the world's HUD is a few short * labels, and a chat line that arrives in one face and reflows into another a * moment later is worse than one that arrives a moment late. */ /* * And where the game is not installed: Monocraft, under the SIL Open Font * License. * * Minecraft ships **no vector font** — the letters are pixels in three PNG * atlases inside the jar, and `mcfont.ts` traces them into a `glyf` table on * the machine that owns the game. A host has no jar, so it has no letters to * trace, and putting the traced result on a public domain would be handing * Mojang's own artwork to strangers. * * Monocraft is drawn from scratch to look like it and may be redistributed, so * it is what the hosted editor wears. Not a replacement: where the real one can * be built it is built, because it is the game's own metrics to the pixel. * `bootstrap` says which host this is (`mcFont`) and the client points `--hud` * at one or the other. */ @font-face { font-family: 'Monocraft'; src: url('/font/monocraft.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'Minecraft'; src: url('/font/minecraft.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: block; } :root[data-font='inter'] { --font-ui: 'Inter', system-ui, sans-serif; } :root[data-font='golos'] { --font-ui: 'Golos Text', system-ui, sans-serif; } :root[data-font='plex'] { --font-ui: 'IBM Plex Sans', system-ui, sans-serif; } :root[data-font='system'] { --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; } /* * The fallback after 'Minecraft' is the interface font, not a generic. * * The atlases cover Latin, Cyrillic, Greek and a good deal besides, but they do * not cover everything — unifont, the game's own fallback for the rest, is a * separate 16 MB archive and is not built in. A codepoint the pixel font lacks * therefore falls to the next family in this stack, and the next family should * be whatever the rest of the editor is set in. */ /* * In the world, every text is the game's text. * * Done by pointing `--ui` and `--mono` at `--hud` rather than by listing the * elements: the world holds a chat, a hotbar, a held-item label, a hint, an * inventory and a chat field, and a list of them is a list that goes stale the * next time something is added. `body.in-world` is already the class that says * the whole window belongs to the world — see `updatePlayerChrome` — so the * typeface is simply part of what that means. * * **One size, which is the game's arrangement and not a shortcut.** Minecraft's * HUD has exactly one type size, so the four steps of the editor's scale * collapse to one here. Everything is counted in **game pixels** — `--hud-px` * is what one of them is worth in CSS, and `hudPixel()` picks it so that it * comes out a whole number of *device* pixels. That distinction is the whole * arithmetic: measured in CSS pixels the only sizes available are 8, 16 and 24, * and the HUD is then either shouting over the editor or unreadable, with * nothing in between; measured in device pixels a 2× display also has 12. * * **Smoothing off**, because antialiasing a shape already made of squares only * blurs its edges — the same argument as NEAREST magnification in `texArray`. */ body.in-world { --ui: var(--hud); --mono: var(--hud); --fs-base: calc(8 * var(--hud-px)); --fs-xs: var(--fs-base); --fs-sm: var(--fs-base); --fs-md: var(--fs-base); --fs-lg: var(--fs-base); -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; } /* * Nine pixels between lines, which is `Font.lineHeight`. * * Only on the two that are the game's own text. Everything else in here sets * its font with the `font` shorthand, which resets line-height to `normal` * whatever is inherited — so a rule on the body would reach exactly the * elements that have no opinion, and these two have one. */ body.in-world .chat__line { line-height: calc(var(--chat-line) * var(--hud-px)); } body.in-world .held-name { line-height: calc(9 * var(--hud-px)); } /* * The slot digit is the one thing that does not take the HUD's size. * * It is a corner mark on a 38-pixel square, and a full-size numeral fills it. * Six game pixels rather than eight — which is not a whole device pixel down * and does not need to be: a digit is five pixels tall and flat-sided, so it is * the one glyph in the HUD that shows nothing at a half-pixel edge. */ body.in-world .hotbar__num { font-size: calc(6 * var(--hud-px)); line-height: 1; } /* Held back until the interface has its text; see the inline script in the document head for why. */ html:not(.is-ready) body { visibility: hidden; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; overflow: hidden; } /* * The viewport a phone is actually showing. * * On iOS `100%` resolves against the layout viewport, which includes the strip * behind Safari's own bars — so the interface is laid out taller than the * screen, the bottom of it lives under the toolbar, and what is on screen is * everything shifted up with a band of nothing beneath. `dvh` is the viewport * as it stands right now, and it changes as those bars come and go. */ @supports (height: 100dvh) { html, body { height: 100dvh; } } body { display: grid; /* * Named rows, because a hidden bar is not in the flow. * * With auto-placement the three tracks are handed out in document order, so * taking either bar away slid everything after it up a row: hiding the status * line put nothing in the last track, which is harmless — and hiding the top * bar, which the world does on a phone, put the whole editor in the 40px row * meant for the bar and gave the 1fr to the status line. The stage was * squashed into a strip at the top with an empty screen under it. * * Each child says which row it is in, so removing any of them leaves the rest * where they are. The same fix as `.shell`'s columns, one axis over. */ grid-template-rows: auto 1fr auto; grid-template-areas: "bar" "main" "status"; background: var(--bg-app); color: var(--text); font: 400 var(--fs-lg)/1.45 var(--ui); -webkit-font-smoothing: antialiased; user-select: none; } /* Restrained section label — uppercase, but normal width and modest tracking. */ h2, h3, .lbl { font-family: var(--ui); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; font-size: var(--fs-xs); color: var(--text-faint); margin: 0; } kbd { font: 500 var(--fs-xs)/1 var(--mono); padding: 1px 4px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-input); color: var(--text-dim); white-space: nowrap; } /* ─────────────────────────────────────────────────────────── bars */ .bar { display: flex; align-items: center; /* The height is the bar's own now that the rows are `auto`; the grid used to be the only thing setting it. */ height: calc(40px * var(--ui-scale)); gap: calc(6px * var(--ui-scale)); padding: 0 10px; background: var(--bg-panel); border-bottom: 1px solid var(--line); /* Rather than wrap into a second row — which would shift the whole canvas — the bar scrolls when the controls no longer fit. */ overflow-x: auto; scrollbar-width: none; } .bar::-webkit-scrollbar { display: none; } .bar > * { flex: none; } .bar__spacer { flex: 1 1 auto; min-width: 4px; } .bar--top { grid-area: bar; } /* * Room for the window's own buttons. * * The desktop shell puts the traffic lights *inside* the top bar rather than on * a title bar above it — that is what stops the application looking like a web * page in a frame. They are drawn by the system on top of the page, though, so * without a reserved strip they land on whatever the bar starts with: in the * first build they sat squarely on the brand mark and the breadcrumb. * * **Every bar that can be the top one needs it.** There are two: the editor's * and the pack browser's, and the browser is what opens first — reserving the * strip on only one of them fixes the half you happen to be looking at. * * The inset is generous rather than exact. Three buttons from x=16 end near * 86px; a strip measured to the pixel leaves the brand touching the green one, * which reads as an overlap even when it is not. * * Declared on the class rather than on `:root`: the contrast check reads the * themes out of the `:root` blocks, and an extra one holding a length is a * theme with no colours in it as far as that check is concerned. */ .is-app { --titlebar-inset: 104px; } .is-app .bar--top, .is-app .home__bar { padding-left: var(--titlebar-inset); } /* * The bar is also the window's drag handle, the way it is in an editor with no * title bar. Everything you can actually press opts back out, or the press * starts dragging the window instead. */ .is-app .bar--top, .is-app .home__bar { -webkit-app-region: drag; } .is-app .bar--top button, .is-app .bar--top input, .is-app .bar--top select, .is-app .bar--top .split, .is-app .bar--top a, .is-app .home__bar button, .is-app .home__bar input, .is-app .home__bar select, .is-app .home__bar a { -webkit-app-region: no-drag; } .bar--status { grid-area: status; height: calc(24px * var(--ui-scale)); border-bottom: 0; border-top: 1px solid var(--line); gap: 0; background: var(--bg-app); } .brand { display: flex; align-items: center; gap: 7px; } /* * The mark is the application's own logo, not a glyph drawn in CSS. * * It used to be three stacked rules — a fine abstract mark, and one that had * nothing to do with the icon in the dock. The same object in both places is * what makes a window recognisable as an application's rather than as a page's. * * No plate behind it: the icon's black tile is right in a dock, where it sits * against a wallpaper, and wrong here, where it would be a hole punched in the * bar. `tools/icon.ts` renders that bare form separately. */ .brand__mark { /* Alone in the corner it carries the name, so it is sized to be read as a logo rather than as a bullet beside one. */ width: calc(21px * var(--ui-scale)); height: calc(21px * var(--ui-scale)); background: url('mark.png') center / contain no-repeat; } /* * Nothing in the bar shrinks. * * Letting items flex down looked tidy until the window got narrow: the name * collapsed to zero width while its input kept its intrinsic size and painted * straight over the save indicator. A fixed width plus an ellipsis is honest, * and the bar scrolls when the controls genuinely do not fit. */ .doc-name { flex: none; display: flex; align-items: center; } /* * The field is exactly as wide as its text, measured in `sizeNameField`. * A fixed width left a gap between the name and the save indicator that read as * a layout bug — and only revealed itself as an input on hover. */ .doc-name input { width: 0; min-width: calc(40px * var(--ui-scale)); max-width: calc(280px * var(--ui-scale)); text-overflow: ellipsis; background: transparent; border: 1px solid transparent; border-radius: var(--r); color: var(--text-dim); font: 400 var(--fs-md) var(--ui); padding: 3px 6px; outline: none; } /* * The underline is always there. * * A field that only becomes a field on hover is a field nobody finds: the name * read as a label, and renaming a block was a thing you had to be told about. * One rule is enough — the rest of the box still waits for the pointer. */ .doc-name input { border-bottom-color: var(--line-strong); border-radius: 0; } .doc-name input:hover { border-color: var(--line); border-bottom-color: var(--text-faint); border-radius: var(--r); } .doc-name input:focus { border-color: var(--accent-line); border-radius: var(--r); color: var(--text); background: var(--bg-input); } /* ─────────────────────────────────────────────────────────── tools */ /* * No `overflow: hidden` here. * * It was clipping the children to the group's rounded corners, and clipping the * tooltips along with them — every tool inside a group was silently muted while * the standalone eraser worked. The end buttons carry the radius themselves. */ .toolgroup { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r); } .toolgroup > :first-child { border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px); } .toolgroup > :last-child { border-radius: 0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0; } .toolgroup > :only-child { border-radius: calc(var(--r) - 1px); } .tool { display: flex; align-items: center; gap: 6px; height: var(--row); padding: 0 9px; background: transparent; border: 0; border-right: 1px solid var(--line); color: var(--text-dim); font: 400 var(--fs-sm) var(--ui); cursor: pointer; transition: color .1s var(--ease), background .1s var(--ease); } /* * Only inside a group. The separator between segments belongs to the group, and * `.tool:last-child` also caught a standalone toggle that happened to be last * in the island — which is what left the Animation button with three sides once * it moved to the end of the row. */ .toolgroup > .tool:last-child { border-right: 0; } /* * The shortcut is mono; the name is not. * * This used to be `.tool span`, written when the markup carried the key in a * ``. `applyIcon` replaced that markup with a `.tool__label` * span, so the selector kept matching and started dressing the *name* — every * docked tool in mono, two sizes down and faint, while the shape buttons, which * are `.board-mode` rather than `.tool`, kept the interface font. Naming the * part instead of the tag is what stops that happening again. */ .tool:hover { background: var(--bg-hover); color: var(--text); } .tool.is-active { color: var(--accent-fg); background: var(--accent); } .tool.is-active .tool__key { color: var(--accent-fg); opacity: .7; } .snap { display: flex; align-items: center; gap: 4px; flex: none; min-width: 0; } .snap select { padding: 0 var(--select-arrow) 0 4px; } /* The label gives the width up before the field does: the value is the part you read, and "СЕТКА" is the same word whether or not its last letters show. */ .snap .lbl { letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } select, .btn { height: var(--row); background: var(--bg-input); border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--text); font: 400 var(--fs-sm) var(--ui); padding: 0 7px; outline: none; cursor: pointer; } /* * The arrow is drawn here, and the room for it is real padding. * * A native menu keeps its arrow inside the box and lays the text straight under * it once the box is narrow — the grid field in a docked tools panel read * "32×32×32" through its own chevron. WebKit goes the other way and drops the * arrow entirely as soon as the background is styled, so the control stopped * saying it was a menu at all. Two gradients rather than an inline SVG, because * a `data:` URI cannot reach `--text-faint` and would fix one colour for both * themes. */ select { font-family: var(--mono); font-size: var(--fs-sm); appearance: none; -webkit-appearance: none; padding-right: var(--select-arrow); background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); background-position: right 10px center, right 6px center; background-size: 4px 4px; background-repeat: no-repeat; } select:focus, .btn:focus-visible { border-color: var(--accent-line); } .btn { padding: 0 11px; color: var(--text-dim); } .btn:hover { background: var(--bg-hover); color: var(--text); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 500; } .btn--primary:hover { background: var(--accent); color: var(--accent-fg); filter: brightness(1.12); } .btn--ghost { background: transparent; } .btn--icon { padding: 0 8px; font-family: var(--mono); font-size: var(--fs-sm); } /* A bar button that is an icon rather than a word: square, and the glyph sits on its optical centre rather than on a text baseline. */ .btn--glyph { width: var(--row); padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* Height, not width: the figure is twice as tall as it is wide, and forcing it into a square would squash it. */ .btn--glyph svg { width: auto; height: 20px; } .btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } /* ─────────────────────────────────────────────────────────── shell */ .shell { grid-area: main; position: relative; display: grid; /* Panels scale with the type so bigger text means more room, not tighter columns; clamped so they never eat the canvas on a small screen. */ /* A dragged width wins; until then the columns follow the type scale, so making the text bigger gives the panels room rather than squeezing them. */ /* Named so a panel can be taken out of the layout without restating the whole track list: an empty one collapses its column to nothing. */ --col-left: var(--left-w, clamp(200px, calc(228px * var(--ui-scale)), 34vw)); --col-right: var(--right-w, clamp(228px, calc(258px * var(--ui-scale)), 36vw)); grid-template-columns: auto var(--col-left) auto minmax(0, 1fr) auto var(--col-right) auto; /* * Named tracks, because a hidden panel is not in the flow. * * With auto-placement, taking one panel out of the grid slid everything after * it up a column: emptying the right-hand panel put the stage in the stage's * track and nothing in the last one, which is harmless — but emptying the * left put the stage in the *left* track, a fixed width, and handed the whole * 1fr to the panel next to it. Each child says which track it belongs to, so * removing any of them leaves the rest where they are. */ grid-template-areas: "edge-l left inner-l stage inner-r right edge-r"; min-height: 0; } /* * The outermost columns are the island's upright shelves. * * They are tracks of the shell, not of the stage, and they sit just inside the * panels: the shelf lands against the panel's own edge, so the panel keeps the * window's side and the tools stand next to it. With no panel on that side the * track is the window's edge by itself. An empty auto track collapses to * nothing, so the columns cost nothing while the island is elsewhere. */ .panel--left { grid-area: left; } .stage { grid-area: stage; } .panel--right { grid-area: right; } .shell.no-left { --col-left: 0px; } .shell.no-right { --col-right: 0px; } .panel { position: relative; display: flex; flex-direction: column; background: var(--bg-panel); min-height: 0; overflow: hidden; } /* * The panel's own handle: the strip above its first section. * * Free space, and not by accident — the first section has no sash, because * there is nothing above it to resize against. What is drawn is a line along * the very top when the pointer is on it; what is grabbed is seven pixels, the * same split between mark and catch the rail and the splitters make. */ .panel__grab { position: absolute; top: 0; left: 0; right: 0; height: 7px; z-index: 11; cursor: grab; } .panel__grab::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; transition: background 90ms ease-out; } .panel__grab:hover::after, .panel.is-moving .panel__grab::after { background: var(--accent); } .panel.is-moving { opacity: .6; } .panel.is-moving .panel__grab { cursor: grabbing; } .panel--left { border-right: 1px solid var(--line); } .panel--right { border-left: 1px solid var(--line); } /* * An empty panel takes no width. * * Move both sections out of one and what is left is a blank column with a * border and a splitter, holding width away from the model to show nothing. * `display: none` rather than zero width, so its border goes too; the edge it * stood on still accepts a drop and brings it back — `edgeAt` in app.js. */ .panel.is-empty { display: none; } .splitter.is-hidden { display: none; } /* Taken out of the bar by the scene menu, which carries the same controls. */ .is-off { display: none !important; } /* Where a section dropped on the edge would put the panel back. */ .stage.is-edge-left::before, .stage.is-edge-right::before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); z-index: 20; pointer-events: none; } .stage.is-edge-left::before { left: 0; } .stage.is-edge-right::before { right: 0; } /* Where an upright shelf would stand: the outermost edge of the window. */ .shell { position: relative; } .shell.is-edge-left::before, .shell.is-edge-right::before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); z-index: 20; pointer-events: none; } .shell.is-inner-left::before, .shell.is-inner-right::before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); z-index: 20; pointer-events: none; } /* Outside the panels, and inside them: the mark stands where the shelf will. */ .shell.is-edge-left::before { left: 0; } .shell.is-edge-right::before { right: 0; } .shell.is-inner-left::before { left: var(--left-edge, 0px); } .shell.is-inner-right::before { right: var(--right-edge, 0px); } /* * The handle is wider than the line it sits on. * * A 1px border is an impossible target and a 6px handle drawn as 6px of colour * is a bar through the interface; this is the same split the layer rail makes * between what is drawn and what is grabbed. */ .splitter { position: absolute; top: 0; bottom: 0; width: 9px; z-index: 8; cursor: col-resize; background: transparent; transition: background 90ms ease-out; } .splitter::after { content: ''; position: absolute; inset: 0 4px; background: transparent; transition: background 90ms ease-out; } /* `is-hot` is the far edge of a corner drag: the one you are not pointing at but are about to move anyway, lit so the corner reads as two edges. */ .splitter:hover::after, .splitter.is-dragging::after, .splitter.is-hot::after { background: var(--accent-line); } /* Where a horizontal edge meets a vertical one, the drag takes both. */ .splitter.is-corner, .acc__sash.is-corner { cursor: move; } .splitter--left { left: calc(var(--left-edge, 228px) - 4px); } .splitter--right { right: calc(var(--right-edge, 258px) - 4px); } .splitter--h { top: -4px; bottom: auto; left: 0; right: 0; width: auto; height: 9px; cursor: row-resize; } .splitter--h::after { inset: 4px 0; } .count { font: 400 var(--fs-xs) var(--mono); color: var(--text-faint); } /* View switch in the section header, tucked in before the count. The count is the last thing on the row, against the edge, because that is where every list in this interface puts its number — a control sitting outside it made the materials header the one place the eye had to hunt. */ /* * The header's own controls, as one strip. * * They were two absolutely positioned things a fixed distance apart, and the * distance was a guess about how wide the count would be — at a narrow panel * that guess left a hole between the switch and the number while the title * behind them ran out of room. One flex row, one gap. */ .acc__tail { position: absolute; top: 0; right: var(--gutter); display: flex; align-items: center; gap: calc(5px * var(--ui-scale)); height: calc(26px * var(--ui-scale)); /* Above the sash, which lies across the top of the section and would otherwise take the first few pixels of these buttons. */ z-index: 10; } .acc__views { display: flex; align-items: center; gap: 1px; } .acc__view { width: calc(20px * var(--ui-scale)); height: calc(18px * var(--ui-scale)); display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-faint); cursor: pointer; padding: 0; } .acc__view:hover { color: var(--text); background: var(--bg-hover); } .acc__view.is-active { color: var(--text); border-color: var(--line-strong); } .acc__view svg { width: 11px; height: 11px; fill: currentColor; } /* Room for the strip: two buttons, a gap and the count. */ .acc[data-acc='materials'] .acc__head { padding-right: calc(var(--gutter) + 62px * var(--ui-scale)); } .acc__tail .count { min-width: calc(14px * var(--ui-scale)); text-align: right; } /* * Folded, the view switch goes: it changes how a list is laid out, and there is * no list. The count stays — how much is in there is exactly what you want from * a section you have put away — and the title takes back the room. */ .acc.is-collapsed .acc__views { display: none; } .acc.is-collapsed[data-acc='materials'] .acc__head { padding-right: calc(var(--gutter) + 22px * var(--ui-scale)); } /* ─────────────────────────────────────────────────────────── accordion Sidebar sections behave like VS Code's: a header row that collapses its content. Exactly one section per panel carries `--grow`, so the panel always has something that fills the leftover height instead of floating mid-air. */ /* * Every expanded section shares the leftover height, so collapsing one hands * its space to its neighbours — the behaviour VS Code's sidebar has. A section * marked `--grow` simply takes a larger share of it. */ .acc { display: flex; flex-direction: column; min-height: 0; /* * The share, not the height. * * Sections are resized against each other by moving the boundary between two * of them, and the result has to survive the panel itself changing size — so * what a drag writes is each section's share of the column, in a custom * property rather than in `flex` outright: `.acc.is-collapsed` has to be able * to win, and an inline `flex` would outrank it. */ flex: var(--acc-grow, 1) 1 0; border-bottom: 1px solid var(--line); /* * Collapsing is animated, which needs both states to be numbers. * * `flex: 0 0 auto` cannot be interpolated from `1 1 0`, so a collapsed * section states its basis outright — the header's own height — and the * transition then has two ends to travel between. The body is clipped by the * section rather than switched off, because `display: none` has no middle. */ overflow: hidden; transition: flex-grow .17s var(--ease), flex-basis .17s var(--ease); } .acc--grow { --acc-grow: 2; } .acc.is-collapsed { flex: 0 0 calc(26px * var(--ui-scale)); } /* A drag has to track the pointer, and an eased flex lags a whole frame behind it — the boundary would arrive where the pointer had been. */ .panel.is-sizing .acc { transition: none; } /* * The boundary between two sections is a handle, as it is in VS Code. * * Without it the top pixels of a header were the only thing there, and the * header is a drag handle for reordering — so reaching for the edge between two * sections started carrying the lower one away instead of resizing the upper. * Drawn nowhere: the border already draws the line, and this is only the catch * around it, wider than the line the way every other handle here is. */ .acc__sash { position: absolute; left: 0; right: 0; top: 0; height: 7px; z-index: 9; cursor: row-resize; background: transparent; } .acc__sash::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: transparent; transition: background 90ms ease-out; } .acc__sash:hover::after, .acc__sash.is-dragging::after, .acc__sash.is-hot::after { background: var(--accent-line); } /* The first section in a panel has nothing above it to resize against, and a collapsed one has a height of its own that a drag must not argue with. */ .acc:first-child > .acc__sash, .acc.is-collapsed > .acc__sash { display: none; } /* * A closing section stops taking clicks at once, but only goes `hidden` after * it has finished sliding — hiding it on the first frame would make the content * vanish and leave an empty box shrinking, which is not the same gesture. */ .acc__body { transition: visibility 0s; } .acc.is-collapsed .acc__body { pointer-events: none; visibility: hidden; transition: visibility 0s linear .17s; } @media (prefers-reduced-motion: reduce) { .acc { transition: none; } } .acc__head { display: flex; align-items: center; gap: 6px; width: 100%; height: calc(26px * var(--ui-scale)); padding: 0 var(--gutter) 0 6px; background: none; border: 0; cursor: pointer; flex: none; } .acc__head:hover { background: var(--bg-hover); } /* * The title gives way first. * * A flex item refuses to shrink below its own text, so a long title in a narrow * panel simply grew past the header and ran under the controls pinned to its * right edge — the view switch printed over the middle of МАТЕРИАЛЫ. `min-width` * lets it shrink and the ellipsis says that it did. */ .acc__head h2 { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acc__head:hover h2 { color: var(--text-dim); } .acc__chev { width: 10px; height: 10px; flex: none; position: relative; transition: transform .13s var(--ease); } .acc__chev::before { content: ''; position: absolute; left: 2px; top: 1px; width: 5px; height: 5px; border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint); transform: rotate(45deg); } .acc.is-collapsed .acc__chev { transform: rotate(-90deg); } .library, .outliner { max-height: none; } .acc { position: relative; } .acc__body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; } .search { padding: 7px var(--gutter); border-bottom: 1px solid var(--line); flex: none; } .search input { width: 100%; background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); font: 400 var(--fs-sm) var(--ui); padding: 4px 7px; outline: none; } .search input::placeholder { color: var(--text-faint); } .search input:focus { border-color: var(--accent-line); } /* ─────────────────────────────────────────────────────────── material swatches */ /* Two densities: a grid when you are choosing by look, a list when you are choosing by name. Same markup, different layout. */ .swatches[data-view='list'] { display: flex; flex-direction: column; gap: 1px; } .swatches[data-view='list'] .swatch { flex-direction: row; align-items: center; gap: 8px; padding: 3px; } .swatches[data-view='list'] .swatch__chip { width: calc(22px * var(--ui-scale)); aspect-ratio: 1; flex: none; } .swatches[data-view='list'] .swatch__name { padding: 0; } .swatches[data-view='list'] .swatch__meta { display: block; margin-left: auto; padding: 0 4px 0 0; font: 400 var(--fs-xs) var(--mono); color: var(--text-faint); text-transform: uppercase; } /* The palette is a column of groups; the swatches inside each are the grid. */ .swatches { display: flex; flex-direction: column; gap: 2px; padding: var(--gutter); overflow-y: auto; flex: 1; } .matgroup__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-content: start; margin-bottom: 4px; } .swatches[data-view='list'] .matgroup__items { display: flex; flex-direction: column; gap: 1px; } .matnew { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; padding: 4px 6px; background: none; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--text-dim); font: 400 var(--fs-xs) var(--ui); text-align: left; cursor: pointer; } .matnew:hover { color: var(--text); border-color: var(--accent-line); background: var(--bg-hover); } .matnew__plus { font: 500 var(--fs-md) var(--ui); line-height: 1; } .matgroup { display: flex; align-items: center; gap: 6px; padding: 4px 2px; background: none; border: 0; border-radius: var(--r-sm); color: var(--text-dim); font: 500 var(--fs-xs) var(--ui); text-align: left; cursor: pointer; } .matgroup:hover { color: var(--text); background: var(--bg-hover); } .matgroup__count { margin-left: auto; font: 400 var(--fs-xs) var(--mono); color: var(--text-faint); } /* A triangle rather than a glyph: it turns, and a rotating character wobbles on its own baseline. */ .matgroup__chev { width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; transform: rotate(90deg); transition: transform 110ms ease-out; } .matgroup.is-folded .matgroup__chev { transform: rotate(0deg); } /* * A