/* * The console's own styles. Every rule is scoped to .console-page (the class the * console layout puts on ) or to a .console-* class, because * application.html.erb links stylesheets with `stylesheet_link_tag :app`, which * Propshaft expands to EVERY css file under app/assets — so a bare `body` or * `table` rule here would also restyle the sign-in and password pages. * * --------------------------------------------------------------------------- * The look, and why it is this one. * * This is read on a shop floor and at 2am, by somebody who is not an engineer * and who opened it because something is wrong. So it is built like service-bay * signage rather than like a dashboard: four colours that mean the same thing on * every page, numerals big enough to read across a desk, and nothing decorative * competing with them. * * go fine, nothing to do * caution a human has to decide something * stop it did not work, or doing this costs something you cannot undo * rest inert — retired, waiting, not applicable * * Colour is never the only carrier. Every badge says its meaning in words, so * the page survives greyscale printing and colour-blind readers. * * No web font. This page has to paint instantly on a bad connection during an * incident, and a font request that hangs is a fleet an operator cannot see. The * typographic idea is carried by a rule instead: anything you must copy or * repeat exactly — a store number, a command id, an agent version, a command * type — is monospaced; anything you must understand is not. */ .console-page { --floor: #f4f4f1; --panel: #ffffff; --ink: #14171a; --ink-2: #5c646d; --rule: #dcdcd6; --go: #14614a; --go-wash: #e7f1ec; --caution: #8f5100; --caution-wash: #fbf1e2; --stop: #a32316; --stop-wash: #fbeeec; --rest: #5f6771; --rest-wash: #eeeeeb; --tape: #e8b63a; /* Kept as aliases: earlier rules and any future ones can keep using the original two names without inventing a second red. */ --muted: var(--ink-2); --line: var(--rule); --warn: var(--stop); --wash: var(--stop-wash); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* * The same tokens, inverted. This console is opened in the middle of the night * more often than it is opened in daylight, and every colour above is a token, * so honouring the operator's own setting costs one block rather than a second * stylesheet. */ @media (prefers-color-scheme: dark) { .console-page { --floor: #14161a; --panel: #1b1e23; --ink: #e9eaec; --ink-2: #9aa2ac; --rule: #2e333b; --go: #74d3a0; --go-wash: #16261f; --caution: #f0b357; --caution-wash: #2a2113; --stop: #ff8d7e; --stop-wash: #2c1815; --rest: #969ea8; --rest-wash: #23262b; } } .console-page { font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--floor); margin: 0; -webkit-text-size-adjust: 100%; } .console-page main { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; } .console-page a { color: inherit; text-underline-offset: 2px; text-decoration-color: var(--rule); } .console-page a:hover { text-decoration-color: currentColor; } .console-page :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; } /* ------------------------------------------------------------------ heading */ .console-page h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 0.35rem; } .console-page h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.005em; margin: 2.25rem 0 0.6rem; } .console-page .eyebrow { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.3rem; } /* The one sentence that says what the page is for. Measured, not full width: a line an operator has to track back across 72rem is a line they skip. */ .console-page .lede { font-size: 1.02rem; color: var(--ink-2); max-width: 60ch; margin: 0 0 1.5rem; } .console-page .note { color: var(--ink-2); font-size: 0.92em; max-width: 68ch; margin: 0 0 1.25rem; } .console-page .muted { color: var(--ink-2); } /* ------------------------------------------------------------- head and nav */ .console-page .console-head { background: var(--panel); border-bottom: 1px solid var(--rule); } .console-page .console-head__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 72rem; margin: 0 auto; padding: 0.9rem 1.5rem 0.7rem; } .console-page .console-brand { display: block; text-decoration: none; } /* Beside the name of the application rather than in the nav: the nav is where the work is, and this is the page that says what the work is — wanted once by each new operator and then almost never. */ .console-page .console-head__help { font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; } .console-page .console-brand__name { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .console-page .console-brand__strap { display: block; font-size: 0.8rem; color: var(--ink-2); margin-top: 0.1rem; } .console-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.4rem; max-width: 72rem; margin: 0 auto; padding: 0 1.5rem 0.15rem; } .console-nav a { color: var(--ink); text-decoration: none; } .console-nav__spacer { flex: 1; } /* The current section is marked with a rule under the word rather than a colour swap, so "where am I" and "what needs doing" stay separate signals. */ .console-nav__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0; border-bottom: 2px solid transparent; font-size: 0.94rem; } .console-nav__link:hover { border-bottom-color: var(--rule); } .console-nav__link--on { border-bottom-color: var(--ink); font-weight: 600; } .console-nav__count { font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 0.2rem 0.4rem; border-radius: 999px; color: var(--caution); background: var(--caution-wash); } /* button_to puts `class:` on the BUTTON, not on the form it wraps it in, so this has to match both spellings — and it has to out-specify the generic button rule further down, which would otherwise make signing out the loudest control in the console. */ .console-page .console-nav__signout, .console-page .console-nav__signout button { font: inherit; font-size: 0.9rem; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; } .console-page .console-nav__signout:hover, .console-page .console-nav__signout button:hover { text-decoration: underline; background: none; opacity: 1; } /* ------------------------------------------------------------------- flashes */ .console-flash { max-width: 72rem; margin: 1rem auto 0; padding: 0 1.5rem; } .console-flash p { margin: 0 0 0.5rem; padding: 0.6rem 0.8rem; border-radius: 3px; border: 1px solid var(--rule); background: var(--panel); } .console-flash__tag { display: inline-block; margin-right: 0.55rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; vertical-align: 0.06em; } .console-flash__notice { border-color: var(--go); } .console-flash__notice .console-flash__tag { color: var(--go); } .console-flash__alert { border-color: var(--stop); background: var(--stop-wash); } .console-flash__alert .console-flash__tag { color: var(--stop); } /* --------------------------------------------------------------- the board */ /* * The one number an operator needs before any other: how many stores are not * talking to us. Finding that by counting rows in a 65-row table is how a page * gets read wrong at 2am, so it is counted for them, in numerals big enough to * read without leaning in. The colour rule at the top of the file starts here * and is carried down into the rows below. */ /* Dividers drawn as inset hairlines on the cells rather than as a 1px grid gap over a coloured container: when four cells wrap onto two rows the container colour shows through the empty tracks, which reads as two more panels with nothing in them. */ .console-page .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin: 0 0 1.5rem; } .console-page .board__cell { display: block; padding: 0.85rem 1rem 0.95rem; border-top: 3px solid var(--rest); box-shadow: inset -1px 0 0 var(--rule); text-decoration: none; } .console-page .board__num { display: block; font-size: 2.3rem; font-weight: 680; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .console-page .board__label { display: block; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.15rem; } .console-page .board__cell--go { border-top-color: var(--go); } .console-page .board__cell--go .board__num { color: var(--go); } .console-page .board__cell--stop { border-top-color: var(--stop); } .console-page .board__cell--stop .board__num { color: var(--stop); } .console-page .board__cell--caution { border-top-color: var(--caution); } .console-page .board__cell--caution .board__num { color: var(--caution); } .console-page .board__cell--rest .board__num { color: var(--rest); } a.board__cell:hover { background: var(--floor); } /* ------------------------------------------------------------------ badges */ .console-page .badge { display: inline-block; font-size: 0.76rem; font-weight: 640; line-height: 1.35; padding: 0.12rem 0.45rem; border-radius: 3px; white-space: nowrap; color: var(--rest); background: var(--rest-wash); } .console-page .badge--go { color: var(--go); background: var(--go-wash); } .console-page .badge--caution { color: var(--caution); background: var(--caution-wash); } .console-page .badge--stop { color: var(--stop); background: var(--stop-wash); } .console-page .badge--rest { color: var(--rest); background: var(--rest-wash); } /* ------------------------------------------------------------------ tables */ .console-page .table-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; margin: 0 0 1.25rem; } .console-page table { width: 100%; border-collapse: collapse; } .console-page th, .console-page td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--rule); vertical-align: baseline; } .console-page tbody tr:last-child td { border-bottom: 0; } .console-page th { font-weight: 650; color: var(--ink-2); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; background: var(--floor); } .console-page td.num, .console-page th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Machine identifiers: a thing to copy exactly rather than a thing to read. */ .console-page .machine, .console-page .machine-cell, .console-page .machine-link { font-family: var(--mono); font-size: 0.82em; } .console-page .machine { color: var(--ink-2); word-break: break-all; } .console-page .record-id { margin: 0 0 0.85rem; } .console-page .record-id .machine { font-size: 1rem; color: var(--ink); user-select: all; } .console-page .record-summary { margin: 0 0 1.75rem; } .console-page .record-summary__store { color: var(--ink-2); margin-left: 0.35rem; } /* -------------------------------------------------------------- fleet table */ .console-page .fleet__store a { text-decoration: none; } .console-page .fleet__store a:hover .fleet__label { text-decoration: underline; } .console-page .fleet__number { font-family: var(--mono); font-weight: 600; } .console-page .fleet__store { white-space: nowrap; } .console-page .fleet__label { color: var(--ink-2); margin-left: 0.35rem; } /* * The stripe. Same four colours as the board, run down the left edge of the row * so the shape of the fleet is legible before a single word is read. inset * box-shadow rather than a border, so turning it on and off never shifts the * column by 4px. */ .console-page .fleet tbody td:first-child { box-shadow: inset 4px 0 0 var(--go); } /* * Only a LIVE silence on a store that can still poll is an incident worth * washing the row for. A retired store answers silent? forever — its token is * revoked, so last_polled_at can never advance — and painting all of those red * would be 65 rows of noise on the page an operator opens to find the one that * matters. */ .console-page tr[data-silent="true"][data-token-revoked="false"] td { background: var(--stop-wash); } .console-page .fleet tr[data-silent="true"][data-token-revoked="false"] td:first-child { box-shadow: inset 4px 0 0 var(--stop); } .console-page tr[data-silent="true"][data-token-revoked="false"] .badge { background: var(--panel); } .console-page .fleet tr[data-token-revoked="true"] td:first-child { box-shadow: inset 4px 0 0 var(--rest); } .flag { font-size: 0.85em; } /* --------------------------------------------------------- alerts, in place */ .console-page .alerts { border: 1px solid var(--stop); border-radius: 3px; padding: 0.85rem 1rem 0.9rem; margin-bottom: 1.5rem; background: var(--panel); } .console-page .alerts h2 { font-size: 0.95rem; margin: 0 0 0.5rem; } .console-page .alerts ul { list-style: none; padding: 0; margin: 0; } .console-page .alerts li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; padding: 0.3rem 0; border-top: 1px solid var(--rule); } .console-page .alerts li:first-child { border-top: 0; } .console-page .alerts__since, .console-page .alerts time { color: var(--ink-2); } .console-page .alerts__more { margin: 0.7rem 0 0; font-size: 0.92em; } .console-page .alerts__what { font-weight: 600; } .console-page .alerts-table { margin: 0; } /* ------------------------------------------------------------- disclosures */ /* * The reasoning this console cannot delete and must not lead with. Each of these * answers a question an operator asks once and then knows; left open, it is a * paragraph that gets skipped along with the first rows of the table under it. */ .console-page .explain { border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: 3px; background: var(--panel); padding: 0 0.9rem; margin: 0 0 1.5rem; max-width: 74ch; } .console-page .explain > summary { cursor: pointer; padding: 0.6rem 0; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); } .console-page .explain[open] > summary { border-bottom: 1px solid var(--rule); margin-bottom: 0.7rem; } .console-page .explain p { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 0.9rem; } /* ---------------------------------------------------- definition list pages */ .console-page .command-detail, .console-page .store-detail { display: grid; grid-template-columns: 14rem 1fr; gap: 0 1rem; margin: 0 0 1.75rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: 0.35rem 1rem 0.5rem; } .console-page .command-detail dt, .console-page .store-detail dt { color: var(--ink-2); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.75rem; } .console-page .command-detail dd, .console-page .store-detail dd { margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); } .console-page .command-detail > dd:last-of-type, .console-page .store-detail > dd:last-of-type { border-bottom: 0; } .console-page .command-detail pre { margin: 0; font-family: var(--mono); font-size: 0.82em; overflow-x: auto; } .console-page .chain { padding-left: 1.1rem; margin: 0 0 1.25rem; } .console-page .chain li { margin-bottom: 0.3rem; } /* -------------------------------------------------------- boxed decisions */ /* * The indeterminate section is the one place on this page where an operator is * about to write the only record of what happened at a POS, so it is boxed and * washed rather than laid out like the read-only audit above it. The prose is * part of the affordance: it says why there is no retry button, and a page that * merely omitted one would leave an operator looking for it. */ .console-page .operator-decision { border: 1px solid var(--caution); border-radius: 3px; padding: 0.9rem 1.1rem 1.1rem; background: var(--caution-wash); margin: 0 0 1.5rem; } .console-page .operator-decision h2 { font-size: 1rem; margin: 0 0 0.5rem; } .console-page .operator-decision .note { color: var(--ink); max-width: 74ch; } .console-page .operator-decision__form { margin: 1rem 0 0; } .console-page .operator-decision__form label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.2rem; } .console-page .operator-decision__form textarea { width: 100%; max-width: 44rem; font: inherit; padding: 0.5rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--ink); } .console-page .operator-decision blockquote { margin: 0.6rem 0 0; padding: 0.2rem 0 0.2rem 0.85rem; border-left: 3px solid var(--rule); } .console-page .resolution { margin: 0.4rem 0 0; color: var(--ink-2); font-size: 0.92rem; } /* * The raw token exists in plaintext exactly once, and this box is that once. It * is the loudest thing on the page for the same reason the operator-decision box * is on the command page: leaving it costs something no later page can give back. */ .console-page .issued-token { border: 2px solid var(--stop); border-radius: 3px; padding: 0.9rem 1.1rem 1.1rem; margin: 0 0 1.75rem; background: var(--stop-wash); } .console-page .issued-token h2 { font-size: 1rem; margin: 0 0 0.5rem; } .console-page .issued-token p { max-width: 72ch; } .console-page .issued-token code { font-family: var(--mono); font-size: 1.05em; word-break: break-all; user-select: all; } /* * Two boxes, and the visual weight is the product requirement: the safe switch * looks ordinary, the irreversible one looks like what it is. An operator who * wants a store to stop working must reach the first and hesitate at the second. * * The hazard tape is the one loud thing in this console, and it is spent here * rather than anywhere else — it is the edge of the only controls on any page * that cost something no later page can give back. */ .console-page .stop-work { border: 1px solid var(--rule); border-radius: 3px; padding: 0.9rem 1.1rem 1.1rem; margin: 0 0 1rem; background: var(--panel); } .console-page .danger { border: 1px solid var(--stop); border-radius: 3px; padding: 0 1.1rem 1.1rem; margin: 0 0 1.75rem; background: var(--stop-wash); overflow: hidden; } .console-page .danger::before { content: ""; display: block; height: 7px; margin: 0 -1.1rem 0.9rem; background: repeating-linear-gradient(135deg, var(--stop) 0 10px, var(--tape) 10px 20px); } .console-page .stop-work h2, .console-page .danger h2 { font-size: 1rem; margin: 0 0 0.5rem; } .console-page .danger h2 { color: var(--stop); } .console-page .danger p, .console-page .stop-work p { max-width: 72ch; } .console-page .danger form { display: inline-block; margin: 0.6rem 0.5rem 0 0; } /* ------------------------------------------------------------------- forms */ .console-page .store-form label, .console-page .enqueue-form label { display: block; margin: 0 0 1.1rem; font-weight: 600; font-size: 0.94rem; } .console-page .field-hint { display: block; font-weight: 400; font-size: 0.88rem; color: var(--ink-2); max-width: 68ch; margin: 0.15rem 0 0.35rem; } .console-page .store-form input[type="text"], .console-page .store-form input[type="number"], .console-page .enqueue-form select, .console-page .enqueue-form input[type="text"], .console-page .enqueue-form textarea { font: inherit; display: block; padding: 0.45rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--ink); max-width: 40rem; width: 100%; } .console-page .enqueue-form textarea { font-family: var(--mono); font-size: 0.88em; } .console-page .enqueue-form label { margin-bottom: 0.3rem; } .console-page .enqueue-form select, .console-page .enqueue-form input[type="text"] { margin-bottom: 1.1rem; } .console-page .store-form label.check { font-weight: 600; } .console-page .store-form label.check input { margin-right: 0.35rem; } .console-page .form-errors { border: 1px solid var(--stop); border-radius: 3px; padding: 0.7rem 1rem; margin: 0 0 1.25rem; color: var(--stop); background: var(--stop-wash); } .console-page .form-errors p { margin: 0 0 0.3rem; } .console-page .form-errors ul { margin: 0; padding-left: 1.1rem; } .console-page .allow-list-intent { border: 1px solid var(--rule); border-radius: 3px; padding: 0.3rem 1rem 1rem; margin: 0 0 1.25rem; background: var(--panel); } .console-page .allow-list-intent legend { color: var(--ink-2); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 0.35rem; } .console-page .allow-list-intent__type { display: block; margin: 0.25rem 0; } .console-page .allow-list-intent__type input { margin-right: 0.35rem; } /* ----------------------------------------------------------------- buttons */ .console-page button, .console-page input[type="submit"], .console-page .button { font: inherit; font-size: 0.94rem; font-weight: 600; line-height: 1.2; display: inline-block; padding: 0.5rem 0.85rem; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--panel); text-decoration: none; cursor: pointer; } .console-page button:hover, .console-page input[type="submit"]:hover, .console-page .button:hover { opacity: 0.86; } /* Secondary: the ordinary navigation actions — enrol, edit, queue — are outline rather than solid, so the only filled buttons on a page are the ones that write something. */ .console-page .button { background: var(--panel); color: var(--ink); border-color: var(--rule); } /* The two irreversible controls wear the colour they cost. */ .console-page .danger button { background: var(--panel); color: var(--stop); border-color: var(--stop); } .console-page .alerts-table button { font-size: 0.85rem; padding: 0.35rem 0.6rem; white-space: nowrap; background: var(--panel); color: var(--ink); border-color: var(--rule); } .console-page .console-actions { margin: 0 0 1.75rem; } /* -------------------------------------------------------------- responsive */ @media (max-width: 46rem) { .console-page main { padding: 1.25rem 1rem 3rem; } .console-page .board { grid-template-columns: repeat(2, 1fr); } .console-page .console-head__bar, .console-nav, .console-flash { padding-left: 1rem; padding-right: 1rem; } .console-page .explains__row { grid-template-columns: 1fr; gap: 0.15rem; } .console-page .command-detail, .console-page .store-detail { grid-template-columns: 1fr; } .console-page .command-detail dt, .console-page .store-detail dt { padding-top: 0.7rem; } .console-page .command-detail dd, .console-page .store-detail dd { padding-top: 0.15rem; } /* Dropped rather than squeezed: at this width the store, its status and when it last checked in are the whole question, and a version string pushed off the right edge takes them with it. Still in the markup, so the columns come back the moment there is room. */ .console-page .col-optional { display: none; } } @media (prefers-reduced-motion: reduce) { .console-page * { transition: none !important; animation: none !important; } } /* ------------------------------------------------------ "How this works" */ /* * The loop diagram. Decorative — the numbered list beside it is the accessible * copy — so it is drawn in the page's own tokens and inherits the theme rather * than carrying colours of its own. */ .console-page .flow { display: block; width: 100%; max-width: 41rem; height: auto; margin: 0 0 1.25rem; } .console-page .flow rect { fill: var(--panel); stroke: var(--rule); stroke-width: 1; } .console-page .flow line, .console-page .flow path { stroke: var(--ink-2); stroke-width: 1.25; fill: none; } .console-page .flow .flow__head { fill: var(--ink-2); stroke: none; } .console-page .flow text { font-family: system-ui, sans-serif; } .console-page .flow .flow__name { fill: var(--ink); font-size: 14px; font-weight: 600; } .console-page .flow .flow__sub { fill: var(--ink-2); font-size: 12px; } .console-page .flow .flow__step { fill: var(--ink-2); font-size: 12px; } .console-page .loop { max-width: 70ch; margin: 0 0 1.25rem; padding-left: 1.3rem; } .console-page .loop li { margin-bottom: 0.6rem; } /* * Section name against what that section is for. A definition list rather than * prose because the question a reader arrives with is "what is THAT one", and a * list they can scan answers it without making them read the other four. */ .console-page .explains { margin: 0 0 1.75rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: 0.25rem 1rem; } .console-page .explains__row { display: grid; grid-template-columns: 12rem 1fr; gap: 0 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); } .console-page .explains__row:last-child { border-bottom: 0; } .console-page .explains dt { font-weight: 650; } .console-page .explains dd { margin: 0; } .console-page .explains p { margin: 0 0 0.4rem; max-width: 62ch; } .console-page .explains p:last-child { margin-bottom: 0; } .console-page .explains__question { color: var(--ink-2); } .console-page .explains--glossary .explains__row { padding: 0.6rem 0; } /* ------------------------------------------------- the enqueue form's help */ /* * [hidden] is honoured by browsers by default, but several rules in this file * set display on classes the enqueue controller hides, and a class selector * beats the UA sheet. Stated once, here, so hiding something actually hides it. */ .console-page [hidden] { display: none !important; } /* * What to put in Details, per action. Stimulus narrows this to the one that was * picked; with JavaScript off the whole list stays on screen, which is worse to * read and still correct. What it must never do is show one action's fields * under another action's name — which is exactly what the single hard-coded * oil-change example used to do for five of the six. */ .console-page .arg-help { border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); padding: 0.85rem 1rem; margin: 0 0 1.25rem; max-width: 44rem; } .console-page .arg-help__lead { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .console-page .arg-help__type + .arg-help__type { border-top: 1px solid var(--rule); padding-top: 0.85rem; margin-top: 0.85rem; } .console-page .arg-help__type h3 { font-size: 0.95rem; font-weight: 650; margin: 0 0 0.5rem; } .console-page .arg-help__type .note { margin: 0 0 0.6rem; } .console-page .arg-help__fields { display: grid; grid-template-columns: 11rem 1fr; gap: 0.3rem 1rem; margin: 0 0 0.7rem; } .console-page .arg-help__fields dt { font-size: 0.85em; } .console-page .arg-help__fields dd { margin: 0; color: var(--ink-2); font-size: 0.92em; } .console-page .arg-help pre { margin: 0; font-family: var(--mono); font-size: 0.82em; background: var(--floor); border: 1px solid var(--rule); border-radius: 3px; padding: 0.5rem 0.6rem; overflow-x: auto; } /* * Said before the submit, not after it. Amber rather than red: none of these * refuse the command — a store's real allow list is in its own config.json and a * stale belief here must not block real work — they only say what is likely to * happen to it. */ .console-page .field-warning { border: 1px solid var(--caution); border-left-width: 3px; border-radius: 3px; background: var(--caution-wash); color: var(--ink); padding: 0.55rem 0.75rem; margin: 0 0 1.1rem; max-width: 44rem; font-size: 0.92rem; } @media (max-width: 46rem) { .console-page .arg-help__fields { grid-template-columns: 1fr; gap: 0.1rem; } } /* ------------------------------------------- the enqueue form's own boxes */ /* * The boxes that write the JSON, for the actions whose shape this console knows. * Boxed and set against the panel colour so it reads as one instrument with the * textarea below it rather than as a rival form: they are a way to WRITE that * box, never a second place the command could come from. */ .console-page .arg-builder { border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); padding: 0.85rem 1rem 0.95rem; margin: 0 0 1.1rem; max-width: 44rem; } .console-page .arg-builder__lead { margin: 0 0 0.2rem; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .console-page .arg-builder .field-hint { margin-bottom: 0.9rem; } .console-page .arg-builder__fields { display: grid; gap: 0.9rem; } .console-page .enqueue-form .arg-builder__field { display: block; margin: 0; font-weight: 400; } .console-page .arg-builder__label { display: block; font-weight: 600; font-size: 0.94rem; margin-bottom: 0.2rem; } .console-page .arg-builder__field .field-hint { margin: 0.2rem 0 0; } /* Scoped through .enqueue-form so this beats the form's own `input[type="text"]` rule, whose attribute selector would otherwise leave the text boxes at 40rem and the number box at 22rem in the same little stack. */ .console-page .enqueue-form .arg-builder input { font: inherit; display: block; width: 100%; max-width: 22rem; padding: 0.45rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--ink); } /* Paused, not broken. The JSON below does not parse, so writing to it from here would delete whatever the operator is halfway through typing. */ .console-page .enqueue-form .arg-builder input:disabled { background: var(--rest-wash); color: var(--ink-2); cursor: not-allowed; } /* Whether the box parses, said while it is being typed rather than on submit. */ .console-page .json-state { border: 1px solid var(--caution); border-left-width: 3px; border-radius: 3px; background: var(--caution-wash); color: var(--ink); padding: 0.5rem 0.7rem; margin: 0.5rem 0 1.1rem; max-width: 44rem; font-size: 0.9rem; } /* Work that is queued and can never be handed over. */ .console-page .held-flag { display: block; font-size: 0.72rem; font-weight: 640; color: var(--caution); white-space: nowrap; } .console-page .held-work { border: 1px solid var(--caution); border-radius: 3px; background: var(--caution-wash); padding: 0.9rem 1.1rem 1rem; margin: 0 0 1.5rem; } .console-page .held-work h2 { font-size: 1rem; margin: 0 0 0.5rem; } .console-page .held-work p { max-width: 72ch; } .console-page .held-work .chain { margin-bottom: 0; }