/* layout.css — Persistent app shell: 640px app column, full-window tiled background, viewport, sidebar/nav, scroll container, custom scrollbar, footer/taskbar. */ /* ===== APP SHELL ===== No JS scaling — natural CSS pixels; the browser's own zoom is the only scaling. #cursor-layer is a full-window, NON-scrolling overlay/anchor layer: it holds the fixed chrome (scrollbar, footer, context menu, lightbox) and is the containing block that remote-cursor coordinates map against (see shared.js). #content-scroll (below) is the full-window SCROLL element; the 640px content column (#viewport) lives inside it, so scrolling and right-click work anywhere in the window and the nav scrolls with the page. */ #cursor-layer { position: fixed; inset: 0; cursor: default; } /* The 640px content column: centred, grows with its content (at least one screen tall). Bottom padding clears the fixed footer so the last content isn't hidden behind it. */ #viewport { width: var(--width); margin: 0 auto; min-height: 100vh; padding-bottom: var(--bar-height); /* clear the fixed footer so nothing hides behind it */ position: relative; /* origin for any in-column absolutely-positioned bits */ background: transparent; /* the tiled background lives on (full window) */ image-rendering: pixelated; cursor: inherit; } /* Tiled scrolling background across the ENTIRE browser window (behind and around the 640px column), so the page fills the screen at any width/height. */ body { background-color: #000; background-image: url('/img/background.png'); background-repeat: repeat; animation: backgroundScroll 51.2s steps(512) infinite; image-rendering: pixelated; } /* Rain/snow: darken the tiled background ~20% by overlaying a flat translucent black layer ON the background image only — page content stays at full brightness. Toggled by shared.js (setMode). */ body.weather-dim { background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('/img/background.png'); } @keyframes backgroundScroll { 0% { background-position: 0 0; } 100% { background-position: 0 -512px; } } /* Nav + content side by side, scrolling together with the page. */ /* Global top header: site logo (left) + local-time clock (right-aligned to the content column's right edge), on one line above the nav + content row. Shown on every page; sitting above #viewport-inner pushes the nav down. */ #site-logo { height: var(--bar-height); /* same navy bar height as the footer */ box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; /* Reserve the scrollbar width on the right so the header links clear it. */ margin-right: var(--scrollbar-width); background: #1a1a2e; } /* White page links pushed to the right of the header. */ .site-header-links { display: flex; align-items: center; gap: 8px; } .site-header-links .header-link { color: #fff; font-family: regular; font-size: var(--font-body); text-decoration: none; } .site-header-links .header-link:hover { text-decoration: underline; } .site-header-links .header-sep { color: #fff; } /* white dot between the links */ #site-logo .site-logo-link { line-height: 0; display: block; } #site-logo .site-title-img { width: auto; height: auto; /* render at the image's native size (dynamic) */ image-rendering: pixelated; -webkit-user-drag: none; display: block; } /* Clock sits flush to the right edge; drop the status-box-era right padding. */ #site-logo .site-clock { padding: 0; } /* ===== FOOTER (fixed navy taskbar, same height as the header) ===== */ #footer { position: fixed; bottom: 0; /* Match the header bar: left edge of the centred 800px column, same width (minus the scrollbar gap) — NOT the full browser width. */ left: calc(50% - var(--width) / 2); width: calc(var(--width) - var(--scrollbar-width)); height: var(--bar-height); box-sizing: border-box; z-index: 9000; /* above page content + the pen canvas */ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px; background: #1a1a2e; border-top: 1px solid #000; } .footer-left { display: flex; align-items: center; gap: 8px; } .footer-right { display: flex; align-items: center; } #footer .footer-btn { font-family: regular; font-size: var(--font-body); color: #fff; background: #2a2a4a; border: 1px solid #4a4a6a; padding: 1px 8px; cursor: pointer; } #footer .footer-btn:hover { background: #3a3a5a; } #footer .footer-btn.active { background: #ff6699; color: #1a1a2e; border-color: #ff6699; } #footer .footer-name { font-family: regular; font-size: var(--font-body); color: #fff; background: #12122a; border: 1px solid #4a4a6a; padding: 1px 6px; width: 128px; } #footer .footer-name::placeholder { color: #7a7a9a; } #footer .site-clock { padding: 0; } /* drop the header-era right padding */ #viewport-inner { display: flex; align-items: flex-start; /* the nav is a fixed-height block at the top-left */ } /* ===== SIDEBAR / NAVBAR ===== Fixed width so nav + content area = the 800px column exactly (200 + 600). Buttons stretch to fill it (align-items: stretch). */ #sidebar { flex: 0 0 auto; width: var(--nav-width); height: var(--height); /* fixed-height nav block (= design height); scrolls with the page */ background: transparent; display: flex; flex-direction: column; align-items: stretch; padding: 8px 6px 20px 6px; /* the global logo header provides the top spacing */ gap: 0; z-index: 100; } .sidebar-main { display: flex; flex-direction: column; align-items: stretch; gap: 2px; } .sidebar-spacer { flex: 0; } /* Divider between nav groups. Inset slightly so it doesn't run edge-to-edge. */ .sidebar-divider { border: none; border-top: 1px solid #808080; margin: 3px 4px; height: 0; } .sidebar-links { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: 4px; } .sidebar-btn { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 2px 6px; border: 1px solid transparent; background: none; cursor: pointer; font-family: regular; font-size: var(--font-body); color: #000; text-decoration: none; user-select: none; -webkit-user-select: none; } .sidebar-btn:hover { background: rgba(255,255,255,0.3); border-color: #808080; } .sidebar-btn.active { border: 1px dotted #000; background: rgba(255,255,255,0.3); } .sidebar-btn img { width: 24px; height: 24px; flex: 0 0 auto; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; } .sidebar-btn span { text-align: left; line-height: 1.1; white-space: nowrap; user-select: none; } /* Locked / disabled nav item (e.g. an unreleased section): greyed, not clickable, with a small lock badge in the top-right corner of the button. */ .sidebar-btn--locked { position: relative; pointer-events: none; cursor: default; } /* Grey out only the icon + label, not the lock badge, so the lock stays full colour. (Dimming the whole button would drag the badge down with it — a child can't be more opaque than its parent.) */ .sidebar-btn--locked > img:not(.nav-lock), .sidebar-btn--locked > span { opacity: 0.5; } .sidebar-btn img.nav-lock { position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; } /* Second line on the 3D Printers nav button: live status summary. Uses the regular nav font (inherits family + --font-body size). */ /* Toggle label: title over a collapsible status line, both vertically centered inside a fixed height so the button never changes height. When the dropdown opens the status line collapses (max-height + opacity) and the centered title smoothly slides down to line up with the icon. */ .printer-nav-label { min-width: 0; display: flex; flex-direction: column; justify-content: center; height: 2.2em; /* two 1.1-line-height lines; constant open/closed */ overflow: hidden; } .printer-nav-title { overflow: hidden; text-overflow: ellipsis; } .nav-printer-status { color: #808080; /* idle */ text-transform: uppercase; max-height: 1.1em; opacity: 1; overflow: hidden; transition: max-height 0.28s ease, opacity 0.2s ease; } .nav-printer-status.printing { color: #00aa00; } .nav-printer-status.heating { color: #ff8800; } .nav-printer-status.paused { color: #808080; } /* ----- 3D Printers nav dropdown (toggle + indented printer sub-list) ----- */ .sidebar-printers { display: flex; flex-direction: column; } .printer-nav-toggle { width: 100%; text-align: left; } .printer-nav-caret { flex: 0 0 auto; align-self: center; margin-left: auto; width: 0; height: 0; border-left: 5px solid #7a6a79; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.12s; } .sidebar-printers.open .printer-nav-caret { transform: rotate(90deg); } /* When open, collapse the summarized status line (each printer shows its own). The fixed-height label keeps the button height stable and re-centers the title, which slides smoothly to align with the icon. */ .sidebar-printers.open .nav-printer-status { max-height: 0; opacity: 0; } .printer-nav-list { display: none; flex-direction: column; gap: 2px; padding: 2px 0 4px 16px; } .sidebar-printers.open .printer-nav-list { display: flex; } .printer-nav-item { display: flex; align-items: center; gap: 6px; padding: 2px 5px; border: 1px solid transparent; /* reserve space so .active doesn't shift the row */ font-family: regular; font-size: var(--font-body); color: #000; text-decoration: none; user-select: none; overflow: hidden; } .printer-nav-item:hover { background: rgba(255,255,255,0.3); } .printer-nav-item.active { border: 1px dotted #000; background: rgba(255,255,255,0.3); } .pn-icon { flex: 0 0 auto; width: 18px; height: 18px; image-rendering: pixelated; } .pn-name { /* takes the slack; long names truncate */ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-status { flex: 0 0 auto; text-transform: uppercase; color: #808080; } /* Locked dropdown item (Prints / Models) — greyed with a lock badge, like the webcomic nav. */ .printer-nav-item--locked { position: relative; cursor: default; } .printer-nav-item--locked:hover { background: none; border-color: transparent; } .printer-nav-item--locked .pn-icon, .printer-nav-item--locked .pn-name { opacity: 0.45; } .printer-nav-item .pn-lock { position: absolute; right: 4px; top: 50%; margin-top: -6px; width: 12px; height: 12px; image-rendering: pixelated; } .pn-status.printing { color: #00aa00; } .pn-status.heating { color: #ff8800; } .pn-status.paused { color: #808080; } /* Text links in sidebar */ .sidebar-link { display: block; text-align: left; padding: 2px 6px; font-family: regular; font-size: var(--font-body); color: #000080; cursor: pointer; user-select: none; white-space: nowrap; } .sidebar-link:hover { background: rgba(255,255,255,0.3); } /* Underline the link text on hover. */ .sidebar-link:hover .sidebar-link-text { text-decoration: underline; } /* A link-nav item with no destination yet: looks present but isn't clickable. */ .sidebar-link--pending { cursor: default; } .sidebar-link--pending:hover { background: none; } .sidebar-link--pending:hover .sidebar-link-text { text-decoration: none; } /* ===== MAIN CONTENT ===== */ /* The content area beside the nav; the router appends page wrappers here. The 8px gutter that used to sit on #content-scroll now lives here. */ #main-content { flex: 1 1 auto; min-width: 0; padding: 8px; /* Reserve the scrollbar's width on the right so content never sits under it. */ margin-right: var(--scrollbar-width); position: relative; background: transparent; } /* The full-window SCROLL element: the whole page scrolls here, so scrolling works anywhere in the window and the nav scrolls with the content. Native bar hidden — the custom scrollbar drives it. */ #content-scroll { position: absolute; inset: 0; overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } #content-scroll::-webkit-scrollbar { display: none; } /* ===== CUSTOM SCROLLBAR (HTML element, sprite-based) ===== Pinned to the RIGHT EDGE OF THE BROWSER WINDOW (not the 640px column), running the FULL height of the page (top to bottom). The footer is shortened by the scrollbar's width on its right so the bar's bottom segment sits in that notch (classic L-shape). position:fixed takes it out of the column so it tracks the window edge. */ #scrollbar { position: fixed; top: 0; right: 0; bottom: 0; width: var(--scrollbar-width); display: flex; flex-direction: column; z-index: 50; } .scrollbar-arrow, .scrollbar-thumb-top, .scrollbar-thumb-bottom { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAfCAYAAAA89UfsAAAAeklEQVQ4je2SQQ7AIAgE14Z/ydf8mb6sPTQmDaCBmHqSI2EC7G4CcCNYVGsNAcwMAoCcswsopbybeqO15t52hW77BWLmGNSBEaggOWiBJBse3/apR/g47a10ArsAqURYsZFiqU1ywFLXPK8PjuwY/jTz7wR2ObBbfnoARVwxYErhog8AAAAASUVORK5CYII='); image-rendering: pixelated; } .scrollbar-arrow { width: 13px; cursor: pointer; display: block; background-repeat: no-repeat; } .scrollbar-arrow.up { height: 14px; background-position: 0 0; } .scrollbar-arrow.down { height: 13px; background-position: 0 -14px; } .scrollbar-track { flex: 1; position: relative; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAACCAYAAACDvVapAAAAHElEQVQImWM4cODA//////8nhWYgVcP/////AwBe9V4AtxHVIQAAAABJRU5ErkJggg=='); background-repeat: repeat-y; background-position: 0 -27px; } .scrollbar-thumb { position: absolute; width: 13px; left: 0; min-height: 30px; display: flex; flex-direction: column; cursor: grab; } .scrollbar-thumb:active { cursor: grabbing; } .scrollbar-thumb-top { width: 13px; height: 2px; background-repeat: no-repeat; background-position: 0 -27px; } .scrollbar-thumb-middle { flex: 1; width: 13px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAABCAYAAAAFKSQHAAAAIElEQVQImWM8cODAf3t7e4aDBw8yEAIHDhxgaGhoYAAAPDwKAXApyN4AAAAASUVORK5CYII='); background-repeat: repeat-y; min-height: 1px; } .scrollbar-thumb-bottom { width: 13px; height: 2px; background-repeat: no-repeat; background-position: 0 -29px; } /* Hide the pen overlay/canvas on the canvas page (its own drawing surface takes over). */ body.page-canvas #pen-overlay, body.page-canvas #pen-canvas { display: none !important; }