/* nle — the shell's own regions, header, clock and reload pill. One section of the old nle.css. The pieces load in filename order and that order is the cascade, so do not rearrange them. */ /* ---------- the shell's own regions ---------- */ .nle-region { display: none; } /* off unless the shell is on */ html.desktop.nle-on .nle-region { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); overflow: hidden; } /* The version and the clock, now in the app header beside the profile chip. Big enough to read from where you sit, quiet enough not to be the first thing you look at. */ /* NO PILL. It was a bordered, tinted, fully rounded chip — the loudest shape in the header — sitting next to the reload pill, which needs to BE the loudest thing there because missing it costs an evening. Two pills side by side and neither reads as urgent. The version is the brand colour and nothing else now; hover brightens it rather than filling a box. */ html.desktop.nle-on #nle-ver { font-size: 13px; font-weight: 800; letter-spacing: .4px; color: var(--accent); background: none; border: none; border-radius: 0; padding: 3px 2px; cursor: pointer; user-select: text; } html.desktop.nle-on #nle-ver:hover { color: #fff; } /* The reload pill — see watchDrift() in js/nle.js. Louder than the version chip on purpose: it is the one element in the header that means "what you are testing is not what you think it is", and the cost of missing it is an evening. */ html.desktop.nle-on #nle-reload-pill { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 4px 12px; cursor: pointer; animation: nle-pill-pulse 1.6s ease-in-out infinite; } @keyframes nle-pill-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 50% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } } html.desktop.nle-on #nle-loaded { font-size: 10.5px; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-left: 2px; user-select: text; } /* ---------- THE HEADER IS THE APPLICATION'S ---------- The logo, the project picker, the bell, the profile chip and the version all describe the app, not the generation column — so they go across the top of the window, above everything, with the rail down the left. Together those two make the frame: rail on the left, header on the top, the work between. IT IS A GRID CELL, NOT A FIXED BAR. The panel's own stylesheet has it `position: fixed; left: 46px` and gives #app a matching `padding-top` to hold the space it floats over — correct for a panel that owns the window and wrong for a header that owns the top row of a grid. Both are undone here; the row sizes to the header and nothing has to be kept in step with anything. --hdr-h is still measured off it by main.js and nodes.js, and is still right: it is the header's height, whatever positions it. The rooms open below it exactly as before. */ html.desktop.nle-on #header { grid-area: top; position: static; z-index: var(--z-drawer); } html.desktop.nle-on #app { padding-top: 0; } html.desktop.nle-on #nle-bin { grid-area: bin; } html.desktop.nle-on #nle-viewer { grid-area: viewer; background: #0a0a0c; } html.desktop.nle-on #nle-timeline { grid-area: tl; } /* THE GALLERY IS A GRID CELL NOW, not a pane inside the middle column — see the long note in 01-grid.css. It cannot be one from where it sits in the markup (nested in #app > #layout, beside #main), so nleedit.js's mount() MOVES it to be a child of and puts it back on the way out, the same trick adoptGallery/returnGallery in nodes.js already use to lend this exact element to the node space. One element, borrowed by whoever is on screen, rather than three galleries kept in step. */ html.desktop.nle-on #gallery-pane { grid-area: gal; /* Its old home gave it a width and a flex basis; here the cell decides both, and the pane fills it. */ width: auto; max-width: none; min-width: 0; /* THE USUAL DARK GREY, SAID OUT LOUD. Simon: "we need the gallery space to be the usual dark grey background". It had no background of its own here, so what showed through was 's — and body's background is var(--border), the colour of the 1px grid lines (01-grid.css: "the gap IS the grid line"). A whole pane painted in the colour of a border reads as a hole in the layout rather than as a panel, and it was the one cell in the window that did not match the others. --bg is what every other surface in the app sits on. */ background: var(--bg); } /* AND THE NODE SPACE'S OWN GALLERY COLUMN IS GONE. Simon: "...and sit under viewer in make and node view." The graph used to borrow #gallery-pane into #nd-galdock, a column down the right of the canvas; it does not any more (nodes.js adoptGallery). The dock element and its resizer stay in the markup so the canvas's own fold/resize wiring has something to hold on to, but they must not take a 260px slice of the graph to stand an empty box in — which is exactly what an unhidden empty dock did, and exactly what Simon reported as the layout being broken. !important because the rule it overrides is injected into from nodes.js at runtime, which beats a stylesheet on order. */ html #nd-galdock, html #nd-galrz { display: none !important; } /* The vertical seam between the controls and the gallery has nothing left to drag: they are not neighbours any more. The horizontal seam under the viewer replaces it — #nle-grip-gal, built from LAYOUT in js/nle.js exactly like the timeline's. */ html.desktop.nle-on #gallery-resizer { display: none; } /* No #nle-inspector rule here — it is nested inside #nle-bin now, not a grid item of its own; see 01-grid.css and 13-inspector.css. */ /* ---------- the window's bottom edge ---------- Simon: "Can we also add a bottom edge to the app? At the moment it just expands past the window bar at the bottom. We need a bottom edge there." Every other boundary in this layout is drawn: the grid's 1px gaps ARE the line (the body's background is --border showing through), the rail closes the left, the header closes the top. The bottom had nothing - the last row simply stopped where the window did, so a timeline cut off mid-track read as content continuing past the frame rather than as the end of the app. Drawn rather than reserved, and that is deliberate. A border-bottom on the grid would be one pixel taken out of the row heights, which is a pixel fitFixedColumns and every seam measurement would have to know about; a fixed 1px line over the last row is the same picture and costs the layout nothing. pointer-events: none so it cannot swallow a press on the timeline's last row, and below the drawers and modals, which are surfaces with edges of their own. Not in the popped-out viewer window: that one is a picture on black with no chrome, and a line across the bottom of it is a scratch on the print. */ html.desktop:not(.viewer-win) body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); z-index: var(--z-rail); pointer-events: none; }