/* nle — a room taking the window, and the 3D scene viewer. One section of the old nle.css. The pieces load in filename order and that order is the cascade, so do not rearrange them. */ /* ---------- A ROOM TAKES THE WINDOW, AND TAKES THE CHROME WITH IT ---------- The node space, the batch table and the two crop rooms are whole workspaces, not panel content. A node graph in a 500px column is not a node graph. So when one opens it covers the window — and because it covers the window, the panel's header and rail have to go back to the window with it, or the way out ends up underneath the thing you are trying to get out of. WHICH IS EXACTLY WHAT HAPPENED. The first version of this file tried to confine the rooms to the column with `position: absolute`, and that did nothing at all: #ndmod is a SIBLING of #app, so absolute resolved against the page and the room covered the whole window anyway — at z-index 150, over a rail sitting at 60 inside #app on the far right. Opening Nodes buried the only three buttons that could leave it, and `covert_view` is remembered, so the next launch opened straight back into it. An app you cannot get out of, that stays that way after a restart. Two rules stop that happening again whatever a room does: - the rail is above every room, always, under the shell; - while a room is open, the rail and header are re-anchored to the window, which is where every room's `left: 46px` gutter expects the rail to be. `.nle-room` is put on by js/nle.js, which watches the rooms rather than trusting anybody to announce themselves. */ /* Above every room. 150 is the node space, and this is the escape hatch. */ html.desktop.nle-on #railnav { z-index: var(--z-menu); } /* Nothing to re-anchor for a room any more — the rail is already on the window and stays exactly where it is whatever opens over the shell, which is the whole point of having moved it. */ html.desktop.nle-on.nle-room #header { position: fixed; left: 46px; right: 0; top: 0; } /* And the shell itself gets out of the way — a timeline visible down the side of a full-window node graph is not information, it is a distraction with a scrollbar. */ html.desktop.nle-on.nle-room .nle-region, html.desktop.nle-on.nle-room .nle-grip { display: none; } html.desktop.nle-on.nle-room #app { position: fixed; inset: 0; padding: 0 0 0 46px; overflow: hidden; } /* The grid's own gutter goes with it — #app is fixed to the window while a room is open, so a padding meant to clear the rail would be applied twice. */ html.desktop.nle-on.nle-room body { padding-left: 0; } /* ---------- THE 3D SCENE VIEWER, WHICH IS A ROOM FROM THE INSIDE ---------- Every other room is a sibling of #app that covers the window. This one is a CHILD of #layout, inserted next to the gallery, because it was written for a panel that owned the window and wanted to sit beside the references you drag into it. Its own stylesheet asks for `position: sticky` and `height: calc(100vh - 56px)`. Under the shell #app is one grid cell, roughly 500px wide, that scrolls. A child demanding the full window height inside it is a black column taller than the cell that holds it, drawn over the panel, with its close button off the bottom of the screen. That was "clicking create 3D turns the panel black and breaks it". It is named in ROOMS now, so opening it puts .nle-room on and #app goes full-window — which gives the viewer back the room it was written for. All that is left is to stop it fighting the flex row it is in: no sticky, no viewport height, just stretch to the row like the gallery beside it. */ html.desktop.nle-on.nle-room #app { padding-top: var(--hdr-h, 44px); } html.desktop.nle-on.nle-room #app > #layout { height: 100%; align-items: stretch; } html.desktop.nle-on #s3dpane { position: static; height: auto; max-height: none; min-height: 0; align-self: stretch; }