@volter/world-console 2.0.0

package/dist/client/console.css

@@ -0,0 +1,113 @@
+/* The console's design system (punchlist 3.1–3.2) — the comparable is a plain modern developer
+   console: a ground, cards with one hairline, one action colour, danger only for danger, the brand's
+   type, monospace for addresses. Every colour and face is a role of the Volter brand (company
+   decision 0018): the shell links the brand's tokens (`base/brand/tokens.css`, fetched at build) before
+   this sheet, and the names below are this sheet's aliases for those roles; the pre-commit hook
+   refuses a literal colour here. The roles carry both themes (light-dark()); `color-scheme` picks one.
+   The portal's pages link this sheet; the site reads the same roles (apps/www/src/site.css). */
+:root {
+  color-scheme: light dark;
+  --ground: var(--volter-surface-page); --surface: var(--volter-surface-raised); --surface-2: var(--volter-surface-subtle);
+  --line: var(--volter-border-default); --line-strong: var(--volter-border-strong);
+  --ink: var(--volter-text-primary); --muted: var(--volter-text-muted); --faint: var(--volter-text-faint);
+  --accent: var(--volter-action-default); --accent-ink: var(--volter-text-on-strong); --accent-soft: var(--volter-action-soft);
+  --danger: var(--volter-status-danger-base); --danger-text: var(--volter-status-danger-text); --danger-soft: var(--volter-status-danger-soft);
+  --warn: var(--volter-status-attention-text); --warn-soft: var(--volter-status-attention-soft); --ok: var(--volter-status-healthy-text);
+  --mono: var(--volter-font-data);
+  --sans: var(--volter-font-ui);
+  --radius: 8px; --shadow: var(--volter-shadow-resting);
+}
+:root[data-theme="light"] { color-scheme: light; }
+:root[data-theme="dark"] { color-scheme: dark; }
+
+* { box-sizing: border-box; }
+html { background: var(--ground); }
+body { margin: 0; font: 14px/1.5 var(--sans); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
+main { max-width: 1120px; margin: 0 auto; padding: 20px 24px 72px; }
+/* a link is the action colour, which is the text colour in the brand: its underline, in the strong
+   rule, is what tells it from text (the brand's own pages mark links the same way) */
+a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
+a:hover { text-decoration-color: currentColor; }
+header a { text-decoration: none; }
+header a:hover { text-decoration: underline; }
+code { font: 12.5px/1.5 var(--mono); background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; color: var(--ink); }
+pre { margin: 0; font: 12px/1.45 var(--mono); white-space: pre-wrap; max-width: 640px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
+h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
+h1 { font-size: 17px; }
+h2 { font-size: 18px; margin: 28px 0 10px; }
+h3 { font-size: 15px; margin: 22px 0 8px; }
+h4 { font-size: 13px; margin: 18px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
+h5 { font-size: 13px; margin: 10px 0 4px; color: var(--danger-text); }
+p { margin: 6px 0; }
+ul, ol { margin: 6px 0; padding-left: 20px; }
+li { margin: 3px 0; }
+
+/* the top bar */
+header { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 16px; margin-bottom: 22px; }
+header h1 a { color: var(--ink); }
+header nav a { color: var(--muted); }
+header .mode { margin-left: auto; color: var(--muted); font-size: 12.5px; }
+header > a { color: var(--muted); font-size: 13px; }
+header button { padding: 5px 12px; }
+
+/* cards: every section that holds a thing */
+section, .billing, .members, .onboarding, .org-settings { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin: 14px 0; }
+section > h2:first-child, section > h3:first-child { margin-top: 0; }
+.billing, .members { margin: 10px 0 0; padding: 14px 16px; background: var(--surface-2); }
+.billing p:first-child { margin-top: 0; }
+.usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 16px; padding: 0; list-style: none; margin: 8px 0; }
+.usage li { margin: 0; color: var(--muted); }
+.plan-preview { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
+.plan-preview p { margin: 0 0 4px; }
+.onboarding { border-color: var(--accent); background: var(--accent-soft); }
+.onboarding ol { margin: 8px 0 12px; }
+.onboarding li[role="checkbox"] { list-style: none; margin-left: -20px; }
+.onboarding li[aria-checked="true"] { color: var(--muted); }
+details.org-settings { padding: 10px 16px; }
+details.org-settings summary { cursor: pointer; color: var(--muted); font-weight: 600; }
+details.org-settings[open] summary { margin-bottom: 8px; }
+.danger { margin-top: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); background: var(--danger-soft); border-radius: var(--radius); }
+.danger button { border-color: var(--danger); color: var(--danger-text); }
+.danger button:hover:not(:disabled) { background: var(--danger); color: var(--volter-text-on-strong); }
+.admin { margin-top: 24px; padding-top: 12px; border-top: 1px dashed var(--line); }
+
+/* tables */
+table { border-collapse: collapse; width: 100%; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
+th, td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
+th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
+tr:last-child td { border-bottom: 0; }
+td code { font-size: 12px; }
+
+/* usage by day (layer 6): a bar per day of the period */
+.bars { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; max-width: 520px; }
+.bars li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
+.bars .bar { display: block; height: 10px; background: var(--volter-data-base); border-radius: 3px; opacity: 0.8; }
+
+/* controls */
+button { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
+button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+button:disabled { opacity: 0.45; cursor: default; }
+button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+button[type="submit"]:hover:not(:disabled) { color: var(--accent-ink); filter: brightness(1.06); }
+button[role="tab"] { border-color: transparent; background: transparent; color: var(--muted); }
+button[role="tab"][aria-selected="true"] { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
+button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+form { display: grid; gap: 10px; max-width: 560px; margin-top: 8px; }
+form button[type="submit"] { justify-self: start; }
+label { display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
+label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
+input, select { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
+input::placeholder { color: var(--faint); }
+select { padding-right: 28px; }
+[role="alert"] { color: var(--danger-text); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: 6px; padding: 8px 10px; }
+[role="status"] { color: var(--muted); }
+.mode { color: var(--muted); font-size: 12.5px; }
+
+/* the portal's own pages share this sheet */
+body.portal { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
+body.portal .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 28px 30px; width: min(440px, 100%); text-align: center; }
+body.portal .card h1 { font-size: 22px; margin-bottom: 4px; }
+body.portal .card p { color: var(--muted); margin: 0 0 18px; }
+body.account main { max-width: 900px; }
+body.account #profile { margin-top: 12px; }
+@media (max-width: 720px) { main { padding: 14px 14px 60px; } header { flex-wrap: wrap; } header .mode { margin-left: 0; } }