/* * Cinegram runtime styles. * * Colours are defined as tokens on bare :root so the light palette always has * a value, then overridden for the dark theme. The runtime stamps * data-theme on , and prefers-color-scheme covers the untouched default. * * The type face is a token for the same reason the colours are: a surface that * wants the mainframe skin below has to be able to reset it without hunting * through the rules that draw the chrome. */ :root { --dgm-font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --dgm-bg: #ffffff; --dgm-panel: #f6f7f9; /* The panel colour with the diagram showing through it. Only the tool rail wants it — a control floating on the stage has to admit what it is covering — and it is a token rather than an rgba() in place because a panel and its translucent form must change together. */ --dgm-panel-soft: rgba(246, 247, 249, 0.72); --dgm-border: #dfe3e8; --dgm-fg: #1c2024; --dgm-muted: #6b7480; --dgm-accent: #2f6feb; --dgm-accent-soft: rgba(47, 111, 235, 0.14); /* What is written *on* the accent — Play, the active step's number. White against both blues, and a token because a skin is free to pick an accent white cannot be read on. Scheme-independent, so it is stated once. */ --dgm-on-accent: #ffffff; --dgm-busy: #d97706; --dgm-response: #16a34a; --dgm-fail: #dc2626; --dgm-warn-bg: #fff4e5; --dgm-warn-fg: #8a4b08; --dgm-shadow: rgba(16, 24, 40, 0.12); } :root[data-theme='dark'], :root:not([data-theme='light']) { --dgm-bg: #0f1216; --dgm-panel: #171b21; --dgm-panel-soft: rgba(23, 27, 33, 0.72); --dgm-border: #2a313a; --dgm-fg: #e6e9ee; --dgm-muted: #98a2b0; --dgm-accent: #6ea8fe; --dgm-accent-soft: rgba(110, 168, 254, 0.18); --dgm-busy: #fbbf24; --dgm-response: #4ade80; --dgm-fail: #f87171; --dgm-warn-bg: #3a2a12; --dgm-warn-fg: #f6c177; --dgm-shadow: rgba(0, 0, 0, 0.5); } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --dgm-bg: #ffffff; --dgm-panel: #f6f7f9; --dgm-panel-soft: rgba(246, 247, 249, 0.72); --dgm-border: #dfe3e8; --dgm-fg: #1c2024; --dgm-muted: #6b7480; --dgm-accent: #2f6feb; --dgm-accent-soft: rgba(47, 111, 235, 0.14); --dgm-busy: #d97706; --dgm-response: #16a34a; --dgm-fail: #dc2626; --dgm-warn-bg: #fff4e5; --dgm-warn-fg: #8a4b08; --dgm-shadow: rgba(16, 24, 40, 0.12); } } /* --- the mainframe skin ------------------------------------------------- * * * Cinegram's own theme, applied to the player's chrome. The palette's home is * www/assets/stylesheets/mainframe.css, which sets it as --cg-* for the * website and documents what every colour means: light is greenbar, the * fanfold paper a line printer banded pale green; dark is an IBM 3279 colour * display, blue-black glass with the seven-colour field palette it actually * had, where colour *was* the field attribute — green is a field you can act * on, turquoise is protected text you read, yellow is a literal, red went * wrong. So the mapping here is semantic rather than decorative: the accent is * the actionable green, a response is turquoise, waiting is yellow (ochre on * paper, where yellow is illegible), a failure is red. * * site/palette_test.go pins the hexes that must agree with mainframe.css, * because the palette now lives in two files that no build step connects. * * Opt-in, on the root element, and never the default: the whole stylesheet is * byte-synced into editors/vscode/media/, and a branded monospace player * inside someone's Markdown preview reads as a broken font. The surfaces that * ask for it are the ones cinegram owns end to end — the emitted page, the * pages `cinegram site` builds, the playground. * * The three blocks mirror the three above, and for the same reason: an * attribute selector already outranks bare :root, so the resolution order has * to come from position in the file, not from specificity. Light values first * so a skinned page always has a colour, the dark override second, and the * prefers-color-scheme guard last for the page whose theme nobody has stamped * yet. */ :root[data-dgm-skin='mainframe'] { /* One family, both schemes — a 3270 had one, and the roles separate by weight, case and colour instead. Ordered so a machine with IBM Plex Mono installed gets the face IBM drew looking at exactly these terminals, and every other machine still lands on a real monospace. No @font-face: a webfont this page cannot fetch is a silent fallback to something arbitrary, and the page has to work from the filesystem. */ --dgm-font: "IBM Plex Mono", "SF Mono", SFMono-Regular, "Berkeley Mono", ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; --dgm-bg: #f4f4ec; /* fanfold stock, warm off-white */ --dgm-panel: #dfe9d8; /* the printed band */ --dgm-panel-soft: rgba(223, 233, 216, 0.72); --dgm-border: #8b9c85; --dgm-fg: #17201c; /* never quite black; ribbon on paper */ --dgm-muted: #5a6a60; --dgm-accent: #14713d; --dgm-accent-soft: rgba(20, 113, 61, 0.12); /* A field the cursor has landed on inverts — that is what a 3270 does, and it is also the only legible answer for type on the dark scheme's phosphor green, which white would sit on at less than 2:1. var() rather than a literal so the one declaration follows the ground into both schemes. */ --dgm-on-accent: var(--dgm-bg); --dgm-busy: #8a6212; /* yellow is illegible on paper; ochre is its ink */ --dgm-response: #10666a; --dgm-fail: #a9261b; /* The warning banner is a recessed field with ochre type, not a coloured card: on paper the printer had one ribbon and severity was the wording. */ --dgm-warn-bg: #e9ebe0; --dgm-warn-fg: #8a6212; --dgm-shadow: rgba(23, 32, 28, 0.14); } :root[data-dgm-skin='mainframe'][data-theme='dark'], :root[data-dgm-skin='mainframe']:not([data-theme='light']) { /* Not #000: a CRT face in a lit room is a blue-black, and the whole palette is keyed off that cast so the greens do not read as neon. */ --dgm-bg: #080d0c; --dgm-panel: #0e1614; --dgm-panel-soft: rgba(14, 22, 20, 0.72); --dgm-border: #2a3e39; --dgm-fg: #c9d6ce; --dgm-muted: #6c918a; --dgm-accent: #34d96a; --dgm-accent-soft: rgba(52, 217, 106, 0.16); --dgm-busy: #e8b646; --dgm-response: #45c9c0; --dgm-fail: #f2604f; --dgm-warn-bg: #0e1614; --dgm-warn-fg: #e8b646; --dgm-shadow: rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: light) { :root[data-dgm-skin='mainframe']:not([data-theme='dark']) { --dgm-bg: #f4f4ec; --dgm-panel: #dfe9d8; --dgm-panel-soft: rgba(223, 233, 216, 0.72); --dgm-border: #8b9c85; --dgm-fg: #17201c; --dgm-muted: #5a6a60; --dgm-accent: #14713d; --dgm-accent-soft: rgba(20, 113, 61, 0.12); --dgm-busy: #8a6212; --dgm-response: #10666a; --dgm-fail: #a9261b; --dgm-warn-bg: #e9ebe0; --dgm-warn-fg: #8a6212; --dgm-shadow: rgba(23, 32, 28, 0.14); } } /* The diagram itself is deliberately not in scope. It renders through mermaid's own light and dark themes, and restyling nodes and edges to phosphor would mean a themeVariables set per skin plus design work on what the 3279's semantic colours mean in mermaid's class model. The skin recolours the chrome around the picture. */ /* Everything that claims the page is scoped to .dgm-standalone, which only the emitted page sets on . This stylesheet is also loaded whole into hosts that own the document around the diagram — the VS Code Markdown preview contributes it alongside the editor's own — and a bare `body` rule there would restyle the reader's prose to match the diagram. The tokens above are safe to share; laying out the page is not. */ body.dgm-standalone { margin: 0; background: var(--dgm-bg); color: var(--dgm-fg); font: 14px/1.5 var(--dgm-font); } .dgm { display: flex; flex-direction: column; padding: 16px; box-sizing: border-box; gap: 12px; /* Not inherited from the host: the runtime's own sizing is in px throughout, and an editor's prose font would leave the controls at the wrong scale. */ font: 14px/1.5 var(--dgm-font); color: var(--dgm-fg); } /* Filling the window is the standalone page's job, and filling it *exactly* is what keeps the narration on screen: a definite height is what the shell rules in the layout section need to divide up, so the caption and the transport stay put and the diagram scales into what is left rather than growing the page out from under them. Embedded, the diagram is one element among others and takes the height its content asks for. */ .dgm-standalone .dgm { height: 100vh; overflow: hidden; max-width: 1400px; margin: 0 auto; } /* --- chrome ------------------------------------------------------------- */ .dgm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dgm-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .dgm-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } /* The trail of views drilled through. Muted, because it is orientation rather than content. */ .dgm-crumb { font-size: 12px; color: var(--dgm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dgm-back { padding: 4px 10px; font-size: 12px; } .dgm-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dgm-btn, .dgm-select { appearance: none; border: 1px solid var(--dgm-border); background: var(--dgm-panel); color: var(--dgm-fg); border-radius: 7px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .dgm-btn:hover, .dgm-select:hover { border-color: var(--dgm-accent); } .dgm-btn-primary { background: var(--dgm-accent); border-color: var(--dgm-accent); color: var(--dgm-on-accent); min-width: 72px; font-weight: 600; } /* Embed mode. The stage, its narration and the transport survive; the page furniture does not, because the embedding page has its own. */ .dgm-embed { min-height: 0; padding: 8px; } .dgm-embed .dgm-bar, .dgm-embed .dgm-steps { display: none; } .dgm-embed .dgm-body { grid-template-columns: minmax(0, 1fr); } /* The storyboard is content rather than furniture, so it survives embedding — but with the step list gone it takes that column instead of a third one. */ .dgm-embed.dgm-has-board .dgm-body { grid-template-columns: minmax(0, 1fr) minmax(200px, 320px); } /* Inline mode: one diagram among the paragraphs of a document, rather than a page of its own. It builds on embed — the step list and the page furniture are already gone — and puts back only the two things a reader cannot do without: somewhere to press Play, and a way back out of a diagram they drilled into. Everything else in the bar belongs to authoring a diagram, not reading one. Selecting what stays, rather than what goes, is deliberate: a control added to the bar later should have to earn its place in a document explicitly. */ .dgm-inline { border: 1px solid var(--dgm-border); border-radius: 10px; background: var(--dgm-bg); padding: 10px 12px; gap: 8px; } .dgm-inline .dgm-bar { display: flex; } .dgm-inline .dgm-title { display: none; } .dgm-inline .dgm-controls > * { display: none; } .dgm-inline .dgm-controls > .dgm-play, .dgm-inline .dgm-controls > .dgm-select { display: inline-block; } /* Back and the scenario picker are left to the runtime, which already hides each until it has something to offer — Back until the reader has drilled into something, the picker until there is more than one scenario. Both do it by writing element.style, which beats the rules above, so a document shows them only when they mean something. The breadcrumb stays for the same reason: it renders empty until there is a trail to describe. */ .dgm-inline .dgm-stage { min-height: 180px; } /* Presenter mode. The room is looking at the stage and the presenter is doing the narrating, so the step list, the scrubber and most of the transport go away: what is left is the diagram, the storyboard beside it, and the current step's prose at a size that survives a projector. Following the .dgm-embed precedent above — strip chrome by class, never rebuild the page. */ .dgm-present .dgm-steps, .dgm-present .dgm-foot, .dgm-present .dgm-crumb { display: none; } .dgm-present .dgm-body { grid-template-columns: minmax(0, 1fr); } /* The storyboard survives, because a demo is exactly when someone wants to point at what the user sees. */ .dgm-present.dgm-has-board .dgm-body { grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); } /* Play, the speed cycle and Copy link are things you do while building a diagram, not while showing one; they carry .dgm-authoring so this rule names them rather than guessing from the shape of their other classes. Exit, Restart — taking a demo from the top is presenting, not building — the scenario picker and help stay. The set is the same now that most of it lives in the tool rail instead of the bar: the classes moved with the buttons, so this rule thins the rail rather than emptying it. Nothing in the rail section may state a `display` for a button, or this would stop being true — see the note there. */ .dgm-present .dgm-authoring { display: none; } /* Except in a document, where inline mode has already restored Play at `.dgm-inline .dgm-controls > .dgm-play` (0,3,0) and outranks the (0,2,0) rule above — leaving a continuous-run button in the one mode built to advance a beat at a time. Both rules are right on their own; this states which wins where they meet. */ .dgm-inline.dgm-present .dgm-controls > .dgm-authoring { display: none; } /* dgm-nofoot is the mirror image of dgm-authoring, and the pair is why both are classes rather than lists of buttons: authoring names what a presentation takes away, nofoot names what it has to put back. It is on exactly one control, Restart, and it says why that control exists — Home does the same thing, so does clicking step 1, and so does dragging the scrub to zero, which is what a reader actually reaches for. The two modes below are the two that hide `.dgm-foot`: with no scrub on screen there is no other way back to the start without a keyboard, and a presenter at a lectern has a pointer. (0,2,0) against the (0,1,0) default, so it wins wherever it applies whatever the order. It cannot collide with the authoring rule above at the same weight: Restart is deliberately not authoring, so no element carries both. The reel arm looks redundant and is not quite: `.dgm-reel .dgm-rail` hides the whole column further down, so nothing shows there today. The class states the reason rather than the mode, and a reel is a mode with no scrub; should the reel ever grow a rail, the button that belongs in it is this one. */ .dgm-nofoot { display: none; } .dgm-present .dgm-nofoot, .dgm-reel .dgm-nofoot { display: block; } /* No floor. This once had one, to make the stage big after the chrome went away; the shell now hands it everything the caption leaves, and a 60vh minimum could only overflow a short window. */ .dgm-present .dgm-stage { min-height: 0; } /* Long narration must not fight the stage for the window. The caption keeps its content height up to a third of the screen and scrolls internally past that; it is exempt from the shell's flex squeeze, because when someone is presenting, the words being said are the one thing that must never be clipped — the diagram scales, the text does not. */ .dgm-present .dgm-caption { min-height: 0; padding: 16px 20px; flex: 0 0 auto; max-height: 34vh; overflow-y: auto; } .dgm-present .dgm-caption-name { font-size: 18px; } .dgm-present .dgm-caption-desc { font-size: 1.45rem; line-height: 1.45; } /* Presenting into one pane of a split view is not presenting, so Present asks the browser for the screen — and puts this class on unconditionally, granted or refused. On the element that *is* the fullscreen element, position: fixed resolves against the viewport and z-index is inert in the top layer, so the box is identical either way; on a host that refused — a webview, an iframe without allowfullscreen, a mode entered with no user gesture behind it — the same rule pins the player to the window by hand, minus the browser chrome going away. One plain class rule on purpose: a pseudo-class spelling here (`:fullscreen`, `:-webkit-full-screen`) invalidates the whole selector list in any browser missing it, which is why this used to be three identical rules. Fullscreen's own backdrop is black, so the surface paints itself; the page's max-width and centring go, and the shell rules then divide the screen exactly as they divide a window. The z-index only has to beat the host's page: the help sheet (20) and the lightbox (30) are children of the root, so they stack inside it either way. */ .dgm.dgm-present-fill { background: var(--dgm-bg); height: 100%; width: 100%; max-width: none; margin: 0; box-sizing: border-box; overflow: hidden; position: fixed; inset: 0; z-index: 40; } /* Reel mode: the diagram as a vertical story. Entered by URL (`?reel`) like embed, never toggled in page; a tap plays exactly one step, the segmented bar above the stage says which beat this is, and the caption does the narrating at phone size. The chrome goes entirely — a reel is watched, not operated — and record --reel photographs this exact layout. */ .dgm-reel .dgm-bar, .dgm-reel .dgm-steps, .dgm-reel .dgm-foot, .dgm-reel .dgm-crumb { display: none; } /* One column, board or not — a 9:16 frame has no room for a side panel. The board keeps its place as content (below the stage, capped) rather than furniture. The three-class variant is what outranks the .dgm-has-board .dgm-body rule in the layout section, same trick as embed and present above. */ .dgm-reel .dgm-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1 1 0; min-height: 0; } .dgm-reel.dgm-has-board .dgm-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } /* Portrait page: cap the column at 9:16 against the viewport height and let the stage take every pixel the caption and bar leave. */ .dgm-standalone .dgm.dgm-reel { max-width: min(100vw, 56.25vh); height: 100vh; overflow: hidden; } .dgm-reel .dgm-stage { height: 100%; min-height: 0; box-sizing: border-box; } /* The holder's own height and the svg clamp that reads it used to live here. They are unscoped now, in the layout section: fitting the diagram to the room it has is what every host that bounds the player wants, and the reel was only the first one to need it. */ /* The caption is the reel's narration track, at a FIXED height — not a minimum. The reel column is viewport-sized, so a caption that grew with its text would resize the stage from step to step: notes would be placed against the previous step's geometry, the camera's cached keyframes would go stale, and a recording's stage would jump between frames. One constant allotment keeps every frame's layout identical. */ .dgm-reel .dgm-caption { flex: 0 0 auto; height: 22vh; min-height: 0; padding: 18px 20px; overflow: hidden; } .dgm-reel .dgm-caption-name { font-size: 22px; } .dgm-reel .dgm-caption-desc { font-size: 1.35rem; line-height: 1.4; } .dgm-reel .dgm-board-stack { max-height: 22vh; min-height: 120px; } /* The story bar. Hidden everywhere but the reel; the fill widths are inline styles the clock writes, deliberately with no transition — the bar has to photograph exactly at any paused millisecond. */ .dgm-reelbar { display: none; } .dgm-reel .dgm-reelbar { display: flex; gap: 4px; padding: 4px 2px; } .dgm-reelbar-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--dgm-border); overflow: hidden; } .dgm-reelbar-fill { height: 100%; width: 0; background: var(--dgm-fg); } /* Off-screen holding pen for the share link when the clipboard API is not available — a page opened from the filesystem is not a secure context. It has to be focusable and selectable, so it cannot be display:none. */ .dgm-linkbox { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .dgm-btn.is-on { border-color: var(--dgm-accent); color: var(--dgm-accent); } /* --- focus --------------------------------------------------------------- One visible ring for everything reachable by keyboard, including the SVG groups that only became focusable because the runtime said so. */ .dgm-btn:focus-visible, .dgm-select:focus-visible, .dgm-step:focus-visible, .dgm-chip:focus-visible, .dgm-scrub:focus-visible, .dgm-scrub-mark:focus-visible { outline: 2px solid var(--dgm-accent); outline-offset: 2px; } .dgm-clickable:focus-visible { outline: 2px solid var(--dgm-accent); outline-offset: 3px; } /* --- the settings and shortcuts sheet ------------------------------------ */ .dgm-help { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); padding: 16px; } .dgm-help-panel { background: var(--dgm-bg); color: var(--dgm-fg); border: 1px solid var(--dgm-border); border-radius: 12px; padding: 18px 20px; min-width: 300px; max-width: 440px; box-shadow: 0 20px 60px var(--dgm-shadow); } .dgm-help-title { font-weight: 600; margin-bottom: 10px; } .dgm-help-note { font-size: 12px; color: var(--dgm-muted); margin-bottom: 10px; line-height: 1.5; } /* The sheet holds two kinds of thing now, so each half is named: a title alone cannot say that the menu above the list is a setting and the list below it is documentation. Quiet and small — these are signposts between sections, not headings competing with the sheet's own. */ .dgm-help-section { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dgm-muted); /* No top margin: everything that can stand above this carries its own bottom one, so the spacing is owned in one direction throughout the panel. */ margin: 0 0 8px; } /* A