/* * Chrome for the studio demos. * * The header bar itself is NOT defined here. It is the same .cwd-bar the other * demos use, styled by assets/demo/demo-shell.css, which each studio page loads * BEFORE its own stylesheet so the studio's tokens still win. The one token both * sides define is --accent, and letting each studio's own violet come through is * deliberate: the bar picks up the colour of the tool it sits above. * * What this file adds is the two things that bar needs in order to sit above a * full-viewport application: the reset control on its right, and the height the * apps have to give back. Two of the three studios size themselves to 100vh, so * a bar in front of them would push their own layout off the bottom of the * screen. Those overrides DO reach into studio selectors, which is otherwise * against the rules here, so each one is named and explained at its definition. * The reel's export controls need the same treatment: they are pinned to the * top right corner, which is now the bar's corner. * * --cws-bar is measured from the real bar by studio-demo.js and re-measured on * resize, because the bar wraps to two lines on a narrow screen. The fallback * only has to be close enough to avoid a jump on the first paint. */ :root { --cws-bar: 57px; } /* Mirrors .cwd-back on the opposite side of the bar. Everything a visitor does * to a project is real and persists in localStorage, so there has to be a way * to put the seeded work back. */ .cws-bar-reset { position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; padding: 0.4375rem 0.875rem; border: 1px solid var(--border-medium); border-radius: 999px; background: var(--card-bg); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); text-decoration: none; white-space: nowrap; cursor: pointer; } .cws-bar-reset:hover { border-color: var(--accent); color: var(--text-primary); } /* --- the three sanctioned reaches into studio selectors ------------------- */ /* Which studio this is comes from a class studio-demo.js puts on , so * none of this needs a markup change. It also keeps .wrap from matching the * carousel, which has a .wrap of its own that must not be touched. * * Reel studio: .wrap is height:100vh and the canvas caps itself against the * viewport, so both have to lose the bar's height or the stage runs off the * bottom. The -40px is the studio's own .wrap padding, kept as it wrote it. */ .cws-reel body:not(.render-mode) .wrap { height: calc(100vh - var(--cws-bar)); } .cws-reel body:not(.render-mode) .wrap canvas { max-height: calc(100vh - var(--cws-bar) - 40px); } /* DBM: #app is a 100vh grid. Same correction, nothing else touched. */ .cws-dbm #app { height: calc(100vh - var(--cws-bar)); } /* Reel studio again: its export controls are fixed to the top right corner of * the viewport, which is now where the bar is. Moved down by the bar's height, * keeping the studio's own 14px inset. Nothing else about them changes. */ .cws-reel #export-bar { top: calc(14px + var(--cws-bar)); } /* Carousel needs no correction: it is an ordinary scrolling document, so the * bar simply sits at the top of the flow and sticks there. */ /* Render mode pins the reel's stage to the viewport at full output size and * hides the studio's own chrome. The bar goes with it. */ body.render-mode .cwd-bar, body.render-mode .cws-bar-reset { display: none; } /* * Capture scrim. * * A studio in render mode pins its stage to the true output size, 1080 by 1920 * for a reel, and hides its own controls. That is correct for the headless * browser the real pipeline drives and unreadable on a laptop, where the stage * runs off three sides of the screen. This covers it while the canvas * underneath keeps painting and recording, since what a canvas captures has * nothing to do with what is on top of it. */ .cws-capture { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 8, 11, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; color: rgba(255, 255, 255, 0.82); text-align: center; } .cws-capture-inner { max-width: 34rem; } .cws-capture-title { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .cws-capture-count { margin-top: 10px; font-size: 26px; font-variant-numeric: tabular-nums; color: #fff; } .cws-capture-note { margin-top: 16px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); }