/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #071810 #e6e9e8 #0b0e0f #2fa970 #3dd68c #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #0b0e0f; --surface: #232627; --surface-2: #171a1b; --border: #2d3031; --border-strong: #545657; --ink: #e6e9e8; --muted: #8e9191; --accent: #2fa970; --accent-hover: #4eb685; --accent-ink: #0b0e0f; --accent-text: #3dd68c; --accent-strong: #2fa970; --accent-soft: #133024; --accent-border: #1b543b; --success: #15803d; --success-ink: #ffffff; --success-soft: #0d2719; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #301d0e; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #311112; --danger-strong: #d16969;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #0b0e0f; --surface: #232627; --surface-2: #171a1b; --border: #2d3031; --border-strong: #545657; --ink: #e6e9e8; --muted: #8e9191; --accent: #2fa970; --accent-hover: #4eb685; --accent-ink: #0b0e0f; --accent-text: #3dd68c; --accent-strong: #2fa970; --accent-soft: #133024; --accent-border: #1b543b; --success: #15803d; --success-ink: #ffffff; --success-soft: #0d2719; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #301d0e; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #311112; --danger-strong: #d16969; } /* ==================================================================== * Blitzgent — dark ops-console for GTM operations. * Tight radii, hairline borders, monospace figures, a terminal-style * pipeline. Retunes the shared system, then adds the handful of * components design.css has no opinion about. * ==================================================================== */ :root { /* Sharper corners than the default — an ops console, not a consumer app. */ --radius-sm: 3px; --radius: 5px; --radius-lg: 8px; /* A touch tighter and quicker than the default — dense, scannable. */ --track-tight: -0.01em; --dur-1: 100ms; --dur-2: 160ms; } /* Every tabular-number figure in the app reads as terminal output. */ .nums { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .brand-mark { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em; } .page-title { font-family: var(--font-mono); } /* ---- Tag input --------------------------------------------------------- */ .tag-input { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); padding: var(--s-2); transition: border-color var(--dur-1) var(--ease); } .tag-input:focus-within { border-color: var(--accent); box-shadow: var(--ring); } .tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .tag-entry { flex: 1 1 140px; min-width: 140px; border: 0; background: transparent; color: var(--ink); font-size: var(--t-sm); padding: var(--s-1) var(--s-2); outline: none; } .tag-entry::placeholder { color: var(--muted); } .chip .x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1em; line-height: 1; padding: 0; margin-left: 2px; } /* ---- ICP review summary ------------------------------------------------ */ .review-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); } .review-row:last-child { border-bottom: 0; } .review-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-tight); color: var(--muted); padding-top: 2px; } .criteria-list li { display: flex; align-items: flex-start; gap: var(--s-2); } .criteria-list li .icon { margin-top: 3px; flex: 0 0 auto; } /* ---- Pipeline stepper -------------------------------------------------- * The one screen that makes this app itself: a vertical, terminal-style * run of stages with a connecting rail, coloured by state. * ------------------------------------------------------------------------ */ .pipeline { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .pipeline-stage { position: relative; display: flex; gap: var(--s-4); padding-bottom: var(--s-5); } .pipeline-stage:last-child { padding-bottom: 0; } .pipeline-dot { position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); } .pipeline-line { position: absolute; left: 14px; top: 30px; bottom: -2px; width: 1px; background: var(--border); } .pipeline-body { flex: 1 1 auto; min-width: 0; padding-top: 4px; } .pipeline-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .pipeline-label { font-weight: var(--fw-medium); font-size: var(--t-sm); } .pipeline-note { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--muted); max-width: 60ch; } .pipeline-completed .pipeline-dot { background: var(--success-soft); border-color: transparent; color: var(--success-strong); } .pipeline-completed .pipeline-line { background: var(--success-soft); } .pipeline-running .pipeline-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .pipeline-running .pipeline-label { color: var(--ink); } .pipeline-failed .pipeline-dot { background: var(--danger-soft); border-color: transparent; color: var(--danger-strong); } .pipeline-needs_review .pipeline-dot { background: var(--warning-soft); border-color: transparent; color: var(--warning-strong); } .pipeline-pending .pipeline-label { color: var(--muted); } @media (max-width: 640px) { .review-row { grid-template-columns: 1fr; gap: var(--s-1); } }