/* ~~ codemap ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * @title Console Styles * @category ui * @plane control * @description The console's entire presentation layer: the Material 3 * token set every screen reads, the two self-hosted faces, the * icon rules, and one block per component. Nothing in `app/` * writes a colour or a size in JS -- the one styling rule, * stated in full below. * @links app/ui/static/dashboard.html * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ============================================================================ THE SYSTEM, IN ONE PLACE Read this before adding a component. Everything below picks from these ladders; a new thing that needs a value not on one of them is either mis-measured or an argument for adding a rung, and adding a rung is a decision made here rather than a literal written at the call site. Each ladder is documented where it is declared, in `:root`. This is the index. TYPE --text-1 .. --text-13 thirteen steps, 10px to 24px no `font-size` in this file is anything else INK --on --on-variant --outline one ramp, brightest first, and --dim --faint --fainter every glyph is on it SURFACE --surface --surface-low what a thing sits on, plus the --surface-cont --surface-high three shell columns --surface-est (--surface-rail/-nav/-pane) LINES --hairline --edge --rule shell columns / round a group / between rows in a group SPACE --space-1 .. --space-6 gaps between things: 4 8 12 16 24 32 PANE --pane-x --pane-y a shell column's own inset, --pane-x-side which is not a gap ROWS --row-y --row-x one inset for every row of every --row-y-block bordered group CONTROLS --control-h-sm/-h/-h-lg 26 / 32 / 38, with the matching --control-x-sm/-x/-x-lg 10 / 14 / 18 FIELDS --field --field-border a control you type into: it has --field-border-hover an inside, so it is brighter --field-y --field-x than any line CHIPS --chip-y/-x a word with a box round it, --chip-y-sm/-x-sm ordinary and tiny RADIUS --radius-sm/--radius 8 / 12 / 16 / pill --radius-lg/--radius-pill MOTION --motion-short --motion-long 120ms for a thumb, 260ms for --easing something entering the page TWO VOCABULARIES, AND WHICH ONE TO REACH FOR The console's layout rule is that **the main column is where a thing is changed and the right pane is where it is read**. That is not a convention about columns; it is what the two component families mean: `.field-row` + `.field-rows` a settings row: a label, one line on `C.sectionHead` `C.fieldRows` why, and the control that changes it, inside a bordered group under a head. `.side-label` `.side-stat` the information vocabulary: a small-caps `.side-quote` heading, a key and its value, and a `C.sideLabel` `C.sideStat` quotation of prose this console did not `C.sideQuote` write. They look like duplicates of each other and are not. `.field-row` holds a control; `.side-stat` holds a fact. The names say "side" for historical reasons -- the information vocabulary grew in the right pane -- but it is the *job* that picks one, not the column: a client's Identity section is `sideStat` rows inside `.field-row`s in the main column, because it is information, and that is correct. The one thing neither family does is put a control in the right pane. A switch there is a second copy of one that is already on the row the pane is about, and the pane is the half of the screen a reader is not expected to be careful in. ============================================================================ */ /* Self-hosted, latin subset, one variable file per family. Same origin because the alternative degrades badly: a console that reaches fonts.googleapis.com renders in a fallback face on a locked-down network, and the icon font it used to pull alongside these degraded to the literal word `handyman` in place of every glyph. The icons are inline SVG now (console-icons.js) and the text is these two files. Flat in static/ rather than in a fonts/ subdirectory: router.py serves one path segment out of an explicit allowlist, and a subdirectory needs {filename:path}, which re-opens the traversal class that allowlist closed. Same reasoning the console-*.js files are flat for. */ @font-face { font-family: "DM Sans"; src: url("/dashboard/static/dm-sans.woff2") format("woff2"); font-weight: 100 1000; /* one variable file covers the range */ font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/dashboard/static/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* The one line that makes every *native* control agree with the palette: a select's dropdown, a date picker, a number spinner, the text caret. It is not a token -- it is a declaration about the document -- but it belongs with them, because without it the browser draws those parts in its light default and the only dark-looking bits of a select are the ones this stylesheet reaches. */ color-scheme: dark; /* ------------------------------------------------------------ surfaces -- Material 3 dark, brown. Five steps rather than the three the old theme had, because the redesign stacks a rail on a page on a card on a row and three greys cannot keep those apart. The ramp is built around one brand colour rather than tinted towards it: `--surface-cont` **is** the dark brown, and the four steps either side of it are the same hue lifted and dropped. A card is therefore the brand colour and everything else is its own shade, which is what stops a warm theme reading as a grey theme somebody has held a filter over. `--surface-est` is the exception and the only cool value in the ramp: the brand's dark teal, used at the top of the stack for hovers, the scrollbar thumb and the one-off bordered box. It is a step up in lightness like the others, so the ordering still reads correctly, and being the one place the ramp turns cool is what makes a hover legible without a second border. */ --surface: #171614; --surface-low: #1d1b19; --surface-cont: #242322; --surface-high: #2e2c29; --surface-est: #2f3f31; /* ------------------------------------------------------ shell surfaces -- The four columns of every screen, darkest on the outside. The rail is nearly black so the page beside it reads as lit; the sub-nav sits just under the content it filters; the right pane sits just over it, because it is the thing being looked at. The content pane is one surface at every depth. It carried a lighter `--surface-deep` once you had drilled in, on the argument that a settings level should say it replaced the list -- but the level's own head, the breadcrumb and the sub-nav all say that already, and the tint only made two pages of the same screen look like two different screens. */ --surface-rail: #0e0d0c; --surface-nav: #131211; --surface-pane: #1a1917; /* ---------------------------------------------------------------- lines -- Three, and nothing else draws a line. All much darker than a border usually is: at this brightness a divider separates two surfaces without drawing a box round either, which is what lets four columns sit side by side without the screen reading as a grid of cards. Pick by *what the line separates*, never by how dark it should look: `--hairline` between the columns of the shell -- and nothing else. Six uses, all of them the rail, the sub-nav, the right pane or the header. A component reaching for this is claiming to be part of the shell. `--edge` round a group. A card, a list, a bordered box, a banner, a tile -- anything with an inside. `--rule` between two rows inside one group, and under a group's own head. It never closes; it only divides. There were four. `--hairline-soft` sat half a step between `--edge` and `--rule` and was used for both jobs, which meant the answer to "which line do I draw" depended on which file you had read last. Its uses went to whichever of the two they were already doing. */ --hairline: #201e1b; --edge: #322e29; --rule: #26231f; /* --------------------------------------------------------------- fields -- A control you can type into has to look like it has an inside, and that means a border brighter than any of the three lines above. Its own tokens rather than reusing `--edge`: a divider separates two surfaces, and a field is a hole in one. `--edge` got darker when the layout became four columns, and every text field that had taken it disappeared into the pane behind it. */ --field: #141312; --field-border: #4a4339; --field-border-hover: #665d4f; --field-y: 8px; --field-x: 10px; /* ----------------------------------------------------------------- ink -- One ramp, six steps, brightest first. Every colour a glyph is ever drawn in is on it, and a component picks a step by how loudly the thing should speak rather than by naming a new colour: `--on` the thing you came to read `--on-variant` a label beside it `--outline` quoted prose, a monospaced value, a switch's track `--dim` a hint, a count, an aside -- still meant to be read `--faint` a slug under a name, a unit after a figure `--fainter` the quietest thing on the screen that is still text Below `--fainter` is decoration, and decoration takes a line or a surface colour, not an ink. */ --on: #f7f2ea; --on-variant: #ece4d8; --outline: #cfc4b3; --dim: #ad9f8c; --faint: #9c8e7b; --fainter: #7d7163; /* ------------------------------------------------------------- primary -- `--primary` is the switch, the active rail item, the focus ring. Change this one line and every screen follows, which is the one styling rule stated as a test. Orange, two tones above the brand's own, and that gap is deliberate rather than a drift. `--primary` is ink as often as it is a fill -- a live pill, a quoted label, the focus ring -- and the brand orange comes to 3.4:1 on `--surface-cont`, which is enough for a switch track and not enough for a word. The surface it has to clear is `--surface-cont` and not `--surface`, and that is the whole reason this value is where it is. A card is the busiest surface in the console and the lightest of the three a row ever sits on, so it is the one that decides: #d0603a passes on the page (4.66:1) and fails on a card (4.05:1), which is the kind of near-miss that gets shipped because the first place you look at it is fine. #d86a44 clears 4.5:1 on all three. The brand value itself is not lost: it is `--primary-cont`, the filled plate behind the brand mark and the selection highlight, where light text sits on top of it -- and `--on-primary-cont` is nearly white rather than a tinted cream for the same reason, since #ffdccc on that orange was 3.98:1. `--secondary-cont` is the brand's dark green. It is the quieter of the two containers -- an on chip, a badge -- and being a different hue rather than a darker orange is what keeps "this is on" from reading as "this is the primary action, but dimmer". */ --primary: #d86a44; --on-primary: #2a0e04; --primary-cont: #b74d2e; --on-primary-cont: #fff2ec; --secondary-cont: #45451e; --on-secondary-cont: #e4e4b6; /* ------------------------------------------------------------- accent-2 A second hue, because one is not a palette. The brand's blue against the orange is the far side of the wheel, which is as different as two colours get and reads as a different *kind* of thing rather than a cooler orange. It carries one meaning, consistently: **this is the thing you are looking at or editing.** Orange stays "this is on, this is the primary action". Keeping the two jobs apart is the whole reason for adding a colour -- a second accent used decoratively would just be more noise. Its container is a dark blue and not one of the brand's other values, which is the one place a brand colour was passed over on purpose: the container is the *thumb* of a switch sitting on an `--accent-2` track, so it has to be the same hue several steps down or the control turns to mud. The brand's green and teal both have homes above. */ --accent-2: #7bb1f6; --accent-2-cont: #24384f; --on-accent-2-cont: #d3e3fb; /* --------------------------------------------------------------- state -- Three, not four: there is no "success" here. A thing that worked says so by looking ordinary. */ --info: #8fb6d8; --error: #f0a8a0; --warn: #e6b36a; /* ------------------------------------------------------------- metrics */ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ------------------------------------------------------------ type scale -- Thirteen steps, and nothing off them. Every `font-size` in this file is one of these, so a new panel picks a step rather than inventing 13.5px because it looked right that afternoon -- which is how the console came to have seventeen sizes, four of them used once each. What lands where, so a new thing can be placed without measuring: 1 10px small-caps group labels, the kind mark on a row 2 10.5px the quietest real text: section counts, a sub-slug 3 11px hints, slugs, chips, counted asides 4 11.5px secondary body -- a stat, a quoted paragraph, a row's blurb 5 12px controls: buttons, nav items, banners, a tool's name 6 12.5px a row's own label, and every form control 7 13px names you scan a list by, and text inputs 8 14px the document default, and a pane's title 9 15px a crumb, a card's heading 10 16px the head of a pane or a section of a level 11 17px the title of a drilled-in level 12 19px the screen's name in the header 13 24px a figure on the Dashboard, which is read across the room Steps 1-4 are half-point apart on purpose: they are the four weights of "quieter than the body text", and the console leans on all four. */ --text-1: 10px; --text-2: 10.5px; --text-3: 11px; --text-4: 11.5px; --text-5: 12px; --text-6: 12.5px; --text-7: 13px; --text-8: 14px; --text-9: 15px; --text-10: 16px; --text-11: 17px; --text-12: 19px; --text-13: 24px; /* --------------------------------------------------------- row metrics -- One inset for every row of every bordered group, and one for the taller rows that hold a block rather than a line. These exist because "a row in a list" is the single most repeated thing in this console -- a tool, a module, a client, a seat, a setting, a memory, an account -- and they had drifted to 9px/10px/11px/12px/16px of vertical inset with four different horizontal ones, which is exactly the difference a reader notices between two screens without being able to name it. */ --row-y: 10px; --row-x: 14px; --row-y-block: 14px; /* ------------------------------------------------------------ controls -- Three sizes of clickable thing, each a height and a horizontal inset, and every button in the console is one of them. Heights rather than vertical padding, because the defect these fix is two buttons of different classes sitting on one bar at different heights -- which is a thing you see immediately and cannot fix by choosing a padding, since the type inside them differs too. sm 26px an escape hatch beside a control: `Inherit`, `Open these` md 32px the ordinary button, the sub-nav item, the quiet icon lg 38px a page's own action: Save, the right pane's way out Six pixels apart, so two rungs are never mistaken for one rung and a rendering difference. The type step goes with the size -- --text-3 on sm, --text-5 on md, --text-6 on lg -- and is written on each rule rather than tokenised, because a button's font is one declaration and a token for it would only be read once. */ --control-h-sm: 26px; --control-h: 32px; --control-h-lg: 38px; --control-x-sm: 10px; --control-x: 14px; --control-x-lg: 18px; /* --------------------------------------------------------------- chips -- A chip is a word with a box round it and it is never clicked to mean something -- a tag, a state, a scope, a kind. Two densities, because the console genuinely has two: an ordinary chip beside a name, and the tiny uppercase mark that labels a row without competing with it. There were seven insets across nine rules that all drew the same object. If a tenth is needed it is one of these two. */ --chip-y: 3px; --chip-x: 10px; --chip-y-sm: 2px; --chip-x-sm: 8px; /* ---------------------------------------------------------- pane inset -- What a column of the shell holds its contents in from its own edges. Not a `--space-*` step: those are gaps *between* things and this is the margin of the page itself, which is wider than any gap on it and would drag the gap scale up with it if they shared a number. The right pane is tighter than the content pane because it is narrower -- the same inset on a 300px column reads as a wide empty border. */ --pane-x: 20px; --pane-y: 16px; --pane-x-side: 16px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* M3 motion: the short one is for state a finger is holding (a switch thumb), the long one for something entering or leaving the page. */ --motion-short: 120ms; --motion-long: 260ms; --easing: cubic-bezier(.2, 0, 0, 1); --icon-size: 20px; --icon-size-sm: 16px; --icon-size-lg: 24px; --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; /* ---------------------------------------------------------- categories -- codeweb.js reads these off the document so the graph and the legend can never drift apart. The mockup names seven; the other eight are real categories in this repo's codemap that it never drew. They are derived in the same hue family rather than left at the old blue-green, because half a graph in each palette is worse than either palette. Which family that is, is the brand's four: orange for the code that runs, blue for what it exposes, green and teal for what it stores, and a warm grey for the rest. Fifteen values off four hues rather than fifteen hues, so the graph reads as one drawing and a node's colour narrows what it is without anybody memorising a legend. */ --cat-entrypoint: #f7f2ea; --cat-core: #d0603a; --cat-module: #e08a5e; --cat-tool: #7bb1f6; --cat-support: #e6b36a; --cat-ui: #dd93a4; --cat-table: #8fa98f; --cat-tooling: #9fc6a8; --cat-config: #a89a86; --cat-docs: #8c8172; --cat-legacy: #6f6558; --cat-unmapped: #4a443c; --cat-schema: #7fa48a; --cat-database: #6fa9a0; --cat-service: #f0a8a0; /* Plane colours. Deliberately unlike the categories above: a plane is a region of the web, not a kind of node, and the two groupings have to stay tellable apart on one canvas. Kept cooler and flatter for that reason. */ --plane-control: #8fb6d8; --plane-data: #7fa48a; --plane-shared: #ab9d8c; /* Direction colours for the satellites in services mode: who calls whom. */ --dir-inbound: #8fb6d8; --dir-outbound: #d0603a; --dir-bidirectional: #e6b36a; /* ---------------------------------------------------------------- tags -- A tag's colour is its meaning, so it is named for the meaning. `money` and `destructive` are the two worth stopping on. */ --tag-money: #e6b36a; --tag-destructive: #f0a8a0; --tag-pii: #7bb1f6; --tag-beta: #dd93a4; --tag-bulk: #ab9d8c; /* Roles, in the ordering the old stylesheet already encoded. */ --role-admin: var(--warn); --role-operator: var(--primary); --role-reader: var(--outline); } /* --------------------------------------------------------------- icons -- The complete set the library needs; everything else is per-component. `console-icons.js` returns an with no size, no colour and no style attribute, so size comes from here and colour from `currentColor` -- an icon follows the text beside it through every hover and state class without one extra rule. */ .icon { width: var(--icon-size); height: var(--icon-size); flex: 0 0 auto; /* never squashed by a flex row */ display: block; /* no inline baseline gap */ } /* The three sizes the console actually uses. A fourth is a smell -- check whether the component beside it should be resizing instead. */ .icon-sm { --icon-size: var(--icon-size-sm); } .icon-lg { --icon-size: var(--icon-size-lg); } /* Icons carrying a state colour rather than inheriting one. */ .icon-danger { color: var(--error); } .icon-warn { color: var(--warn); } .icon-dim { color: var(--dim); } /* Motion is a preference, not a decoration. Honoured globally so no component has to remember it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } * { box-sizing: border-box; } /* `hidden` is semantic, and every `display` in this file outranks it -- which is not a nuisance, it is a security bug waiting to happen. The console hides what a principal may not use rather than showing a control that always 403s, and it does that by setting this attribute; a component rule with `display: flex` silently un-hides it. It cost an empty snackbar sitting on every screen, and then a reader seeing four rail items that would refuse them. `!important` is right here for the reason it is usually wrong: nothing should ever out-rank this. */ [hidden] { display: none !important; } ::selection { background: var(--primary-cont); color: var(--on); } body { margin: 0; background: var(--surface); color: var(--on); font-family: var(--font); font-size: var(--text-8); line-height: 1.55; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Four columns means up to four scroll containers side by side, and a browser's default bar is a bright band down each of the seams. Thin and in the palette instead -- still visible, still draggable, no longer the loudest vertical line on the screen. */ * { scrollbar-width: thin; scrollbar-color: var(--surface-est) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-est); border: 3px solid transparent; background-clip: content-box; border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--surface-est) 60%, var(--dim)); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: var(--text-9); } h2 { font-size: var(--text-11); } h3 { font-size: var(--text-10); } p { margin: 0 0 10px; } code { font-family: var(--mono); font-size: 0.92em; color: var(--outline); } .muted { color: var(--dim); } .small { font-size: var(--text-5); } /* ---------------------------------------------------------------- shell -- */ .shell { flex: 1 1 auto; min-height: 0; display: grid; /* The rail is a fixed column because its contents are fixed: eight screens and the two controls under them. Everything that grows lives in the page beside it. Narrow, because it holds a glyph and one word -- the column that holds this screen's own filters is the next one along, and it belongs to the screen rather than to the shell. */ grid-template-columns: 72px minmax(0, 1fr); } .shell-page { min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* ----------------------------------------------------------------- rail -- */ .rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) 0 var(--space-3); background: var(--surface-rail); border-right: 1px solid var(--hairline); overflow-y: auto; overflow-x: hidden; } /* The mark alone. The deployment's own name used to sit under it, cut to two lines; at 72px there is no width for a sentence, and the name is on the sign-in page, in the tab title and in the Dashboard's right pane -- three places that can hold it whole. The `title` carries it here. */ .rail-brand { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; margin-bottom: 14px; border-radius: var(--radius); background: var(--primary-cont); color: var(--on-primary-cont); } .rail-brand-mark { display: grid; place-items: center; } /* A deployment's own mark, when it set one. The plate underneath keeps the brand orange rather than going transparent: the rail is the darkest column on the screen and a logo floating on it reads as a stray image, where the same logo on the orange square reads as the thing this server is. `object-fit: contain` and not a fixed height, because a logo's aspect ratio is the one thing about it this stylesheet cannot know -- a wordmark and a monogram both have to sit inside the same square without either being cropped or stretched. The inset is what keeps it off the corners. */ .brand-logo { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .rail-brand .brand-logo { width: 26px; height: 26px; } /* Two marks are declared and one is shown. The glyph stays in the markup so that a deployment with no logo -- and this repository's own default is none -- still has one, and `:has()` is what picks between them without the server having to render two different pages. */ .rail-brand:has(.brand-logo) .rail-brand-mark { display: none; } .rail-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 60px; flex: 0 0 auto; padding: 4px 0 2px; background: transparent; border: 0; color: var(--dim); font: inherit; font-size: var(--text-2); line-height: 1.2; text-align: center; cursor: pointer; transition: color var(--motion-short) var(--easing); } .rail-item:hover { color: var(--on); } .rail-item:hover .rail-pill { background: var(--surface-cont); color: var(--on-variant); } .rail-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius); } /* The active screen is a filled pill behind the glyph, the way M3 marks a navigation destination -- not a border, which would shift the label. */ .rail-pill { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--radius-pill); color: var(--dim); transition: background var(--motion-short) var(--easing), color var(--motion-short) var(--easing); } .rail-glyph { display: grid; place-items: center; } .rail-item.is-active { color: var(--on); font-weight: 500; } .rail-item.is-active .rail-pill { background: var(--primary-cont); color: var(--on-primary-cont); } .rail-label { display: block; white-space: nowrap; } .rail-foot { margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .rail-action { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: var(--surface-cont); color: var(--on-variant); cursor: pointer; transition: background var(--motion-short) var(--easing); } .rail-action:hover { background: var(--surface-high); } .rail-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Who is signed in, as one letter. The whole string -- principal and role -- is the `title`, and the Dashboard's right pane says it in full. */ .rail-avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-pill); background: var(--surface-est); color: var(--on); font: inherit; font-size: var(--text-5); font-weight: 500; cursor: pointer; text-transform: uppercase; } .rail-avatar.is-static { cursor: default; } .rail-avatar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* --------------------------------------------------------------- topbar -- */ /* One row, fixed height, on every screen. The left half says where you are and how you got there; the right half is the save cluster, which holds its slot whether or not there is anything to save -- so the place a change is committed never moves from screen to screen. */ .topbar { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 60px; padding: 0 var(--pane-x) 0 24px; border-bottom: 1px solid var(--hairline); } .topbar h1 { margin: 0; flex: 0 0 auto; font-size: var(--text-12); font-weight: 500; letter-spacing: -.015em; } /* The trail into a screen. The screen's own name stays in the

on the left and the crumbs append to it, so the way back out is always the leftmost thing rather than something that moved. */ .crumbs { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .crumbs:empty { display: none; } .crumb-sep { display: grid; place-items: center; color: var(--fainter); } .crumb { background: transparent; border: 0; padding: 0; font: inherit; font-size: var(--text-9); color: var(--dim); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumb { transition: color var(--motion-short) var(--easing); } .crumb:hover { color: var(--on); } .crumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* The last crumb is where you are, so it carries the colour that means "this is the thing you are looking at" and is not a button. */ .crumb.is-current { color: var(--accent-2); cursor: default; } .screen-meta { flex: 0 1 auto; font-family: var(--mono); font-size: var(--text-3); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex: 0 0 auto; } /* Quiet when nothing is pending, which is most of the time -- switches apply on click with an undo snackbar, and only the forms that stage edits ever light this up. */ .save-state { font-size: var(--text-4); color: var(--faint); white-space: nowrap; } .save-state.is-dirty { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); } .save-state.is-dirty::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--warn); } .save-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-lg); padding: 0 var(--control-x-lg); border: 0; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font: inherit; font-size: var(--text-6); font-weight: 500; cursor: pointer; } .save-btn:disabled { background: var(--surface-cont); color: var(--fainter); cursor: default; } .save-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .save-btn [data-icon] { display: grid; place-items: center; } .pill { font-family: var(--mono); font-size: var(--text-5); color: var(--dim); background: var(--surface-cont); border: 1px solid var(--edge); border-radius: var(--radius-pill); padding: var(--chip-y) var(--chip-x); } /* Widened from `button.ghost` when the Context screen needed one of these to be an anchor: its export endpoint sets its own filename, and an ordinary navigation carries the session cookie, so a link is the honest element for it. A second near-identical block for `a.ghost` is exactly the duplication the one styling rule exists to prevent -- the two would drift, and the one that drifted would be the one nobody was looking at. */ .ghost { background: transparent; /* An anchor is inline and would sit on the text baseline beside the buttons; the buttons are already inline-flex boxes. */ display: inline-flex; align-items: center; text-decoration: none; border: 1px solid var(--edge); color: var(--dim); border-radius: var(--radius-pill); height: var(--control-h); padding: 0 var(--control-x); font: inherit; font-size: var(--text-5); cursor: pointer; transition: color var(--motion-short) var(--easing), border-color var(--motion-short) var(--easing); } .ghost:hover { color: var(--on); border-color: var(--surface-est); } .ghost:disabled { opacity: .5; cursor: default; } .ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* --------------------------------------------------------------- panels -- */ main { flex: 1 1 auto; min-height: 0; display: flex; } /* Every screen is the same three columns: what to show, the thing itself, and the one row you picked. A screen differs from its neighbour in what it puts in those columns and never in whether it has them -- which is what lets a reader who has learned one screen navigate all eight. */ .panel { display: none; flex: 1 1 auto; min-width: 0; } .panel.is-active { display: flex; } /* ------------------------------------------------------------- sub-nav -- */ /* The permanent second column. On a list screen it holds that list's filters and sorting; drilled into a row it holds that row's setting sections with the way back at its top. It is never a bar above the list, because a bar takes width from the thing it filters and moves every time the filters change shape. */ .subnav { flex: 0 0 228px; min-width: 0; display: flex; flex-direction: column; background: var(--surface-nav); border-right: 1px solid var(--hairline); } .subnav:empty { display: none; } .subnav-head { flex: 0 0 auto; padding: var(--space-3); /* One control's worth, whether or not it holds one -- see `subnav` in console-core.js for why an empty head is the right answer on the one screen that has nothing to put in it. The `1px` is the border below: `box-sizing` is border-box everywhere, so a min-height that left it out would come up exactly one pixel short of a head that has a control in it, and the column under it would sit a pixel high on that one screen. */ min-height: calc(var(--control-h) + var(--space-3) * 2 + 1px); border-bottom: 1px solid var(--hairline); } .subnav-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-2) 10px var(--space-4); } .subnav-foot { padding: 12px 11px 0; } .subnav-search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--control-x); background: var(--surface-cont); border-radius: var(--radius-pill); color: var(--faint); } .subnav-search [data-icon] { display: grid; place-items: center; flex: 0 0 auto; } .subnav-search [data-icon] svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .subnav-search input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; padding: 0; font-family: var(--mono); font-size: var(--text-3); color: var(--on); } .subnav-search input::placeholder { color: var(--fainter); } .subnav-search input:focus { outline: none; } .subnav-search:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; } .subnav-title { padding: 9px var(--control-x) 5px; font-size: var(--text-1); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--fainter); } .subnav-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--control-h); padding: 0 var(--control-x); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--dim); font: inherit; font-size: var(--text-5); text-align: left; cursor: pointer; transition: background var(--motion-short) var(--easing), color var(--motion-short) var(--easing); } .subnav-item > .subnav-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subnav-item:hover { color: var(--on); background: var(--surface-cont); } /* A row that leaves this screen rather than narrowing it. The chevron is the only thing that says so, so it is what moves on hover. */ .subnav-item.is-go > [data-icon] { display: grid; place-items: center; flex: 0 0 auto; margin-left: 2px; margin-right: -2px; color: var(--fainter); transition: transform var(--motion-short) var(--easing), color var(--motion-short) var(--easing); } .subnav-item.is-go > [data-icon] svg { width: 14px; height: 14px; } .subnav-item.is-go:hover > [data-icon] { color: var(--dim); transform: translateX(2px); } .subnav-item.is-on { background: var(--secondary-cont); color: var(--on-secondary-cont); font-weight: 500; } .subnav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .subnav-n { flex: 0 0 auto; font-family: var(--mono); font-size: var(--text-1); color: var(--fainter); } .subnav-item.is-on .subnav-n { color: var(--on-secondary-cont); } /* A filter row that carries its own control. The row is a