/* New Future, application layer. --------------------------------------------------------------------------- new-future.css is the designer's deliverable and ships exactly as it was handed over. This file sits on top of it and holds the rules that only the real pages need: the inner structure of a few components (the promotion block, the profile columns, the events ladder), table column widths, and the small utilities that replace the inline style="" attributes the old templates were full of. It uses the same custom properties, so there are no loose colour values in here. Load it AFTER new-future.css. --------------------------------------------------------------------------- */ /* ---------------------------------------------------------------- shell */ .nf-banner__img img { width: 100%; height: 100%; object-fit: cover; } /* How strongly the noir street behind the game is drawn. --------------------------------------------------------------------------- This is the ALPHA OF THE BLACK WASH over the illustration, so it runs the opposite way to the setting a player picks: 0.95 here is a backdrop shown at 5%. home.php does that one subtraction and prints the result as this property, from the account's ui_bg_opacity column (see app/ui.php). The value here is the fallback, and it has to exist: index.php and register.php load this stylesheet with nobody logged in, so there is no account to read a preference from. It matches the column's default. */ :root { --nf-bg-wash: 0.95; } /* ONE noir backdrop for the whole page. --------------------------------------------------------------------------- The street used to be painted twice: once on the body (the margins) and once as a z-index:-1 pseudo behind the middle column. The pseudo never actually showed - a negative-z child is painted BEFORE its parent's own background, so the column's opaque #0b0b0b covered it - and even if it had, two separately cropped copies never lined up. So there is now a single copy, fixed to the viewport on the body, and everything the game draws floats ON TOP of it at varying transparency. Margins, menu columns and content gaps then all show the same continuous scene. The stack, top layer first: - two soft fog banks rising from the bottom corners (pale, cool, barely there) so there is some drift and depth in the picture; - a black wash that knocks the already-dark #242424 silhouettes back to a ghost; - the illustration itself, sat on the base black. `fixed` on every layer pins the whole thing to the viewport so it spans the margins and holds still while the shell scrolls. */ body { background-color: var(--nf-bg); background-image: linear-gradient(rgba(0, 0, 0, var(--nf-bg-wash)), rgba(0, 0, 0, var(--nf-bg-wash))), url('images/noir-street.svg'); background-repeat: no-repeat, no-repeat; background-position: center, bottom center; background-size: cover, cover; background-attachment: fixed, fixed; } /* Let the backdrop through the shell. --------------------------------------------------------------------------- new-future.css gives each column and the middle a solid near-black fill. Made translucent here, the fixed backdrop above shows behind the menus you click, the stat column and the content gaps - which is the whole point. The tints are still dark enough to keep menu text and figures readable; the amber section bars and the panels below stay as their own anchors. Loaded after new-future.css, so these win without !important. */ .nf-shell__left, .nf-shell__right { background: rgba(9, 9, 9, 0.55); } .nf-shell__main { background: transparent; } .nf-ticker { background: rgba(15, 15, 15, 0.6); } /* ---------------------------------------------------------------- online strip Sits at the foot of the middle column, just clear of the chat bar, and FOLLOWS THE SCREEN as you scroll. sticky and not fixed. Fixed would lift it out of the flow permanently, so on a short page it would hang over the last line of content with nothing to scroll behind it. Sticky leaves it where it belongs at the bottom of the column and pins it there while the page scrolls past. FLUSH WITH THE CHAT BAR, no gap. `bottom` is where it pins while scrolling and there is no margin under it, so the strip's bottom edge meets the top of the bar exactly, whether it is pinned or resting. --nf-dock-h is the BAR's measured height, published by app.js - not the whole dock's. The dock also carries a row of chat windows above the bar, and that row is transparent and right-aligned: measuring it stopped everything 30px short of the visible edge and left a black band with nothing in it. Near-opaque, and that is not decoration: at 0.55 the street image behind it looked fine while the strip sat still, and turned the names to mush the moment body text began scrolling underneath it. z-index 50 is under the dock (60) and over the page - where they meet, the dock wins, which is right: it is the thing being typed into. */ .nf-online { position: sticky; bottom: var(--nf-dock-h); z-index: 50; background: rgba(9, 9, 9, 0.97); margin-bottom: 0; } /* SAME HEIGHT AS THE NEWS STRIP. It was 37px against the ticker's 31, which is what made it the heavier of the two sitting directly under it. The padding was already identical - the difference was line-height 1.9 here against the 18px the ticker inherits, and a second border I had added underneath. Both are matched to the ticker now rather than nudged by eye, so the two strips stay the same height if the type scale ever changes. */ .nf-online__list { padding: 6px 11px; line-height: 18px; } /* Staff, in their own bit at the front. A rule and a little air rather than a second heading: the names are already red and already carry the Admin badge, so the divider only has to say "these are separate", not say it twice. */ .nf-online__staff { padding-right: 10px; margin-right: 6px; border-right: 1px solid var(--nf-line-strong); } /* The panels that hold real content (the Home welcome box, every table and card) still need a solid-ish bed so text stays crisp over the backdrop. Same #0d0d0d as new-future.css, just 88% opaque, so the street shows through only faintly where a panel sits. */ .nf-panel { background: rgba(13, 13, 13, 0.88); } /* Logout as a form, not a link. --------------------------------------------------------------------------- logout.php is a POST now (so its CSRF token never touches the URL), which makes each logout control a one-button form. display:contents drops the
box out of the layout, so its