/* IMG UI kit v1.2: the v1.1 file below, unchanged except one fix, plus "v1.2 · Console parts" at the end (eight parts the IMG Console needed, WS2, made general). Load order: img-tokens-v1.0.css, then this file only. Fix: .img-panel__title balances its line wrapping, like .img-h3. WS10, issue 179. */ /* IMG UI kit v1.1 — component styles built only on --img-* tokens (img-tokens-v1.0.css). Load order: img-tokens-v1.0.css, then this file. Class names are stable API for every front end, including the Rust/Leptos apps: use them as plain class strings. WS10, #179. v1.1 = v1.0 unchanged, plus "Cards and data components" at the end (taken from the IMG Console, WS2). */ /* ---------- Base ---------- */ .img-app { background: var(--img-color-bg); color: var(--img-color-text); font: var(--img-weight-regular) var(--img-text-md) / var(--img-leading-body) var(--img-font-body); font-variation-settings: "wdth" var(--img-width-body); } /* Paper finish: add to any surface that should feel like a sheet. Not for charts or dense tables. */ .img-paper { position: relative; isolation: isolate; } .img-paper::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background-image: var(--img-grain-image); background-size: var(--img-grain-size); opacity: var(--img-effect-grain-opacity); mix-blend-mode: var(--img-effect-grain-blend); } .img-paper > * { position: relative; z-index: 2; } /* ---------- Type ---------- */ .img-display { font-family: var(--img-font-display); font-weight: var(--img-weight-display); font-variation-settings: "wdth" var(--img-width-display); text-transform: uppercase; letter-spacing: var(--img-tracking-display); line-height: var(--img-leading-tight); text-wrap: balance; margin: 0; } .img-h1, .img-h2, .img-h3 { font-family: var(--img-font-body); font-weight: var(--img-weight-bold); line-height: var(--img-leading-snug); text-wrap: balance; margin: 0; } .img-h1 { font-size: var(--img-text-3xl); letter-spacing: -0.01em; } .img-h2 { font-size: var(--img-text-2xl); } .img-h3 { font-size: var(--img-text-lg); } .img-lede { font-size: var(--img-text-lg); color: var(--img-color-muted); max-width: 60ch; margin: 0; } .img-eyebrow { font: var(--img-weight-medium) var(--img-text-2xs) / 1.3 var(--img-font-mono); letter-spacing: var(--img-tracking-label); text-transform: uppercase; color: var(--img-color-muted); } .img-eyebrow--signal { color: var(--img-color-signal-text); } .img-num { font-family: var(--img-font-mono); font-variant-numeric: tabular-nums; } /* ---------- Buttons ---------- */ .img-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--img-space-2); min-height: 40px; padding: 0 var(--img-space-4); border-radius: var(--img-radius-sm); border: 1px solid var(--img-color-line-strong); background: transparent; color: var(--img-color-text); font: var(--img-weight-semibold) var(--img-text-sm) / 1 var(--img-font-body); text-decoration: none; cursor: pointer; transition: background var(--img-motion-fast) var(--img-motion-ease), border-color var(--img-motion-fast) var(--img-motion-ease), transform var(--img-motion-fast) var(--img-motion-ease); } .img-btn:hover { background: var(--img-color-raised); } .img-btn:active { transform: translateY(1px); } .img-btn:focus-visible, .img-input:focus-visible, .img-select:focus-visible, .img-tab:focus-visible, .img-toggle input:focus-visible + span { outline: 2px solid var(--img-color-focus); outline-offset: 2px; } .img-btn--primary { background: var(--img-color-signal); border-color: var(--img-color-signal); color: var(--img-color-on-signal); } .img-btn--primary:hover { background: var(--img-amber-300); border-color: var(--img-amber-300); } .img-btn--ghost { border-color: transparent; } .img-btn--sm { min-height: 32px; padding: 0 var(--img-space-3); font-size: var(--img-text-xs); } .img-btn[disabled], .img-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* ---------- Form controls ---------- */ .img-field { display: grid; gap: var(--img-space-2); } .img-label { font-size: var(--img-text-sm); font-weight: var(--img-weight-semibold); } .img-hint { font-size: var(--img-text-xs); color: var(--img-color-muted); } .img-input, .img-select { min-height: 40px; padding: 0 var(--img-space-3); border-radius: var(--img-radius-sm); border: 1px solid var(--img-color-line-strong); background: var(--img-color-raised); color: var(--img-color-text); font: var(--img-text-sm) var(--img-font-body); width: 100%; box-sizing: border-box; } .img-input--num { font-family: var(--img-font-mono); font-variant-numeric: tabular-nums; } .img-toggle { display: inline-flex; align-items: center; gap: var(--img-space-2); cursor: pointer; font-size: var(--img-text-sm); } .img-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .img-toggle span { width: 36px; height: 20px; border-radius: var(--img-radius-pill); background: var(--img-color-line-strong); position: relative; transition: background var(--img-motion-base) var(--img-motion-ease); flex: none; } .img-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--img-color-text); transition: transform var(--img-motion-base) var(--img-motion-ease); } .img-toggle input:checked + span { background: var(--img-color-signal); } .img-toggle input:checked + span::after { transform: translateX(16px); background: var(--img-color-on-signal); } /* ---------- Tabs ---------- */ .img-tabs { display: flex; gap: var(--img-space-1); border-bottom: 1px solid var(--img-color-line); } .img-tab { padding: var(--img-space-2) var(--img-space-3); border: 0; background: none; color: var(--img-color-muted); font: var(--img-weight-semibold) var(--img-text-sm) var(--img-font-body); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .img-tab[aria-selected="true"] { color: var(--img-color-text); border-bottom-color: var(--img-color-signal); } /* ---------- Result chips (AJ's results colour rule) ---------- */ .img-chip { display: inline-flex; align-items: center; padding: 2px var(--img-space-2); border-radius: var(--img-radius-sm); font: var(--img-weight-semibold) var(--img-text-xs) / 1.6 var(--img-font-mono); font-variant-numeric: tabular-nums; background: var(--img-result-neutral-bg); color: var(--img-result-neutral-fg); white-space: nowrap; } .img-chip--good { background: var(--img-result-good-bg); color: var(--img-result-good-fg); } .img-chip--caution { background: var(--img-result-caution-bg); color: var(--img-result-caution-fg); } .img-chip--warn { background: var(--img-result-warn-bg); color: var(--img-result-warn-fg); } .img-chip--bad { background: var(--img-result-bad-bg); color: var(--img-result-bad-fg); } /* ---------- Tier badge: level ticks plus name, so tiers never rely on colour alone ---------- */ .img-tier { display: inline-flex; align-items: center; gap: var(--img-space-2); padding: 3px var(--img-space-2) 3px var(--img-space-2); border: 1px solid var(--img-color-line-strong); border-radius: var(--img-radius-sm); font: var(--img-weight-semibold) var(--img-text-2xs) / 1.4 var(--img-font-mono); letter-spacing: var(--img-tracking-label); text-transform: uppercase; } .img-tier i { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; } .img-tier b { display: block; width: 3px; background: var(--img-color-line-strong); } .img-tier b:nth-child(1) { height: 4px; } .img-tier b:nth-child(2) { height: 6px; } .img-tier b:nth-child(3) { height: 8px; } .img-tier b:nth-child(4) { height: 10px; } .img-tier[data-level="1"] b:nth-child(-n+1), .img-tier[data-level="2"] b:nth-child(-n+2), .img-tier[data-level="3"] b:nth-child(-n+3), .img-tier[data-level="4"] b { background: currentColor; } .img-tier[data-level="4"] { background: var(--img-color-signal); border-color: var(--img-color-signal); color: var(--img-color-on-signal); } /* ---------- Surfaces ---------- */ .img-card { background: var(--img-color-surface); border: 1px solid var(--img-color-line); border-radius: var(--img-radius-md); box-shadow: var(--img-effect-sheet); padding: var(--img-space-6); } .img-notice { display: grid; grid-template-columns: auto 1fr; gap: var(--img-space-3); align-items: start; padding: var(--img-space-4); border-radius: var(--img-radius-md); border: 1px solid var(--img-color-line); border-left: 3px solid var(--img-color-signal); background: var(--img-color-surface); font-size: var(--img-text-sm); } .img-notice--bad { border-left-color: var(--img-result-bad-fg); } /* ---------- Data table ---------- */ .img-table { width: 100%; border-collapse: collapse; font-size: var(--img-text-sm); } .img-table th { text-align: left; padding: var(--img-space-2) var(--img-space-3); border-bottom: 1px solid var(--img-color-line-strong); font: var(--img-weight-medium) var(--img-text-2xs) var(--img-font-mono); letter-spacing: var(--img-tracking-label); text-transform: uppercase; color: var(--img-color-muted); } .img-table td { padding: var(--img-space-2) var(--img-space-3); border-bottom: 1px solid var(--img-color-line); } .img-table td.img-num, .img-table th.img-num { text-align: right; } .img-table tbody tr:hover { background: var(--img-color-raised); } /* ---------- Status island: in-place progress for running jobs (Optimizer, Console) ---------- */ .img-island { display: inline-flex; align-items: center; gap: var(--img-space-3); padding: var(--img-space-2) var(--img-space-4) var(--img-space-2) var(--img-space-2); border-radius: var(--img-radius-pill); background: var(--img-stone-950); color: var(--img-stone-ink); border: 1px solid var(--img-stone-700); font: var(--img-weight-semibold) var(--img-text-xs) var(--img-font-body); box-shadow: var(--img-effect-sheet); } .img-island .img-num { color: var(--img-brand-amber); } /* The "level sweep": a price level drawn left to right, repeating while work runs */ .img-sweep { width: 28px; height: 28px; border-radius: 50%; background: var(--img-stone-900); position: relative; overflow: hidden; flex: none; } .img-sweep::before { content: ""; position: absolute; left: 6px; right: 6px; top: 13px; height: 2px; background: var(--img-stone-700); } .img-sweep::after { content: ""; position: absolute; left: 6px; top: 13px; height: 2px; width: 16px; background: var(--img-brand-amber); transform-origin: left; animation: img-sweep 1.4s var(--img-motion-ease) infinite; } @keyframes img-sweep { 0% { transform: scaleX(0); } 70% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .img-sweep::after { animation: none; transform: scaleX(.6); } } /* ---------- Navigation ---------- */ .img-nav { display: flex; align-items: center; gap: var(--img-space-6); padding: var(--img-space-3) 0; } .img-nav__logo { height: 24px; width: auto; display: block; } .img-nav__links { display: flex; gap: var(--img-space-5); margin-left: auto; font-size: var(--img-text-sm); } .img-nav__links a { color: var(--img-color-muted); text-decoration: none; } .img-nav__links a:hover, .img-nav__links a[aria-current="page"] { color: var(--img-color-text); } /* ========================================================================== v1.1 · Cards and data components Numbers first, then colour and shape, then a few words. Build every card on .img-card. Values scale to their card (container units), so a figure never truncates. ========================================================================== */ /* ---------- Tone: colour a value by meaning (never brand amber) ---------- */ .img-tone--good { color: var(--img-result-good-fg); } .img-tone--caution { color: var(--img-result-caution-fg); } .img-tone--warn { color: var(--img-result-warn-fg); } .img-tone--bad { color: var(--img-result-bad-fg); } /* ---------- Health dot: filled when collected, hollow ring when not connected ---------- */ .img-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--img-color-muted); } .img-dot--good { background: var(--img-result-good-fg); } .img-dot--warn { background: var(--img-result-warn-fg); } .img-dot--bad { background: var(--img-result-bad-fg); box-shadow: 0 0 0 3px var(--img-result-bad-bg); animation: img-dot-alert 2.4s var(--img-motion-ease) infinite; } .img-dot--idle { background: var(--img-color-muted); } .img-dot--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--img-color-line-strong); } @keyframes img-dot-alert { 50% { box-shadow: 0 0 0 6px transparent; } } /* ---------- Sparkline: an inline SVG (viewBox 0 0 100 32, preserveAspectRatio="none") with three paths: __area (closed to the baseline), __line, and __point (a zero-length path at the latest value, e.g. "M100 8h0"). Drawn left to right like the level sweep. ---------- */ .img-spark { display: block; width: 100%; height: 34px; overflow: visible; clip-path: inset(-6px -8px -6px 0); animation: img-spark-in 900ms var(--img-motion-ease) both; } .img-spark__line { fill: none; stroke: var(--img-color-text); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; } .img-spark__area { fill: var(--img-color-signal); opacity: .09; } .img-spark__point { stroke: var(--img-color-signal); stroke-width: 7px; stroke-linecap: round; vector-effect: non-scaling-stroke; } @keyframes img-spark-in { from { clip-path: inset(-6px 100% -6px 0); } } /* ---------- Stat card: label, big mono value, delta, sub line, chips; sparkline at the foot ---------- */ .img-stat { display: flex; flex-direction: column; gap: var(--img-space-1); min-height: 184px; padding: var(--img-space-5); container-type: inline-size; min-width: 0; } .img-stat__label { font: var(--img-weight-medium) var(--img-text-2xs) / 1.3 var(--img-font-mono); letter-spacing: var(--img-tracking-label); text-transform: uppercase; color: var(--img-color-muted); text-wrap: balance; } .img-stat__value { margin-top: var(--img-space-2); font: var(--img-weight-semibold) min(42px, 20cqi) / 1.05 var(--img-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; white-space: nowrap; } .img-stat__delta { font: var(--img-weight-semibold) var(--img-text-xs) var(--img-font-mono); color: var(--img-color-muted); } .img-stat__delta--up { color: var(--img-color-chart-up); } .img-stat__delta--down { color: var(--img-color-chart-down); } .img-stat__sub { font: var(--img-text-xs) var(--img-font-mono); color: var(--img-color-muted); } .img-stat__chips { display: flex; flex-wrap: wrap; gap: var(--img-space-2); margin-top: auto; padding-top: var(--img-space-3); } .img-stat .img-spark { order: 9; height: 48px; margin-top: auto; padding-top: var(--img-space-3); box-sizing: content-box; } .img-stat:has(.img-spark) .img-stat__chips { margin-top: 0; padding-top: var(--img-space-2); } .img-stat--compact { min-height: 148px; } .img-stat--compact .img-stat__value { font-size: min(var(--img-text-2xl), 20cqi); } /* ---------- Health card: the count big, the word under it, one segment per thing watched ---------- */ .img-health__word { font: var(--img-weight-semibold) var(--img-text-sm) / 1.2 var(--img-font-body); } .img-health__segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-top: auto; padding-top: var(--img-space-3); } .img-health__segments > i { height: 10px; border-radius: 2px; background: var(--img-color-muted); } .img-health__segments > .img-health__seg--good { background: var(--img-result-good-fg); } .img-health__segments > .img-health__seg--warn { background: var(--img-result-warn-fg); } .img-health__segments > .img-health__seg--bad { background: var(--img-result-bad-fg); } .img-health__segments > .img-health__seg--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--img-color-line-strong); } /* ---------- Glance tile: a whole-card link to a detail page ---------- */ .img-tile { display: flex; flex-direction: column; gap: var(--img-space-1); min-height: 176px; padding: var(--img-space-4) var(--img-space-5); container-type: inline-size; min-width: 0; color: inherit; text-decoration: none; transition: transform var(--img-motion-base) var(--img-motion-ease), border-color var(--img-motion-base) var(--img-motion-ease); } .img-tile:hover { transform: translateY(-2px); border-color: var(--img-color-line-strong); } .img-tile:active { transform: translateY(0) scale(.99); } .img-tile:focus-visible { outline: 2px solid var(--img-color-focus); outline-offset: 2px; } .img-tile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--img-space-2); } .img-tile__title { font: var(--img-weight-bold) var(--img-text-sm) var(--img-font-body); } .img-tile__value { margin-top: var(--img-space-3); font: var(--img-weight-semibold) min(var(--img-text-3xl), 20cqi) / 1.05 var(--img-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; white-space: nowrap; } .img-tile__label { font: var(--img-weight-medium) var(--img-text-2xs) / 1.3 var(--img-font-mono); letter-spacing: var(--img-tracking-label); text-transform: uppercase; color: var(--img-color-muted); } .img-tile .img-spark { height: 28px; margin-top: auto; padding-top: var(--img-space-3); box-sizing: content-box; } .img-tile__summary { margin-top: var(--img-space-2); font-size: var(--img-text-xs); color: var(--img-color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Not connected yet: dashed edge, muted value. Also for any card that is a placeholder. */ .img-card--slot { border-style: dashed; box-shadow: none; } .img-card--slot .img-tile__value, .img-card--slot .img-stat__value { color: var(--img-color-muted); } /* ---------- Panel card: title and count, then a table, list or note body ---------- */ .img-panel { padding: var(--img-space-5); min-width: 0; } .img-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--img-space-3); margin-bottom: var(--img-space-4); } .img-panel__title { margin: 0; font: var(--img-weight-bold) var(--img-text-lg) / var(--img-leading-snug) var(--img-font-body); text-wrap: balance; } .img-panel__count { font: var(--img-weight-semibold) var(--img-text-xs) var(--img-font-mono); color: var(--img-color-muted); } /* Tables scroll sideways inside the card on phones instead of squashing. */ .img-panel__scroll { overflow-x: auto; margin: 0 calc(-1 * var(--img-space-5)); padding: 0 var(--img-space-5); -webkit-overflow-scrolling: touch; } .img-panel__scroll .img-table th, .img-panel__scroll .img-table td { white-space: nowrap; } .img-panel__list { list-style: none; margin: 0; padding: 0; } .img-panel__list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--img-space-3); padding: var(--img-space-2) 0; border-top: 1px solid var(--img-color-line); font-size: var(--img-text-sm); } .img-panel__list li:first-child { border-top: 0; padding-top: 0; } .img-panel__list a { color: inherit; text-decoration-color: var(--img-color-line-strong); text-underline-offset: 3px; } .img-panel__list a:hover { text-decoration-color: var(--img-color-signal); } .img-panel__note { margin: 0; color: var(--img-color-muted); font-size: var(--img-text-sm); line-height: 1.5; } .img-panel__empty { display: flex; align-items: center; gap: var(--img-space-2); margin: 0; color: var(--img-color-muted); font-size: var(--img-text-sm); } .img-panel__empty::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--img-color-line-strong); } /* ---------- Source pill: where a number came from and how fresh it is ---------- */ .img-pill { display: inline-flex; align-items: center; gap: var(--img-space-2); max-width: 100%; padding: 5px var(--img-space-3); border: 1px solid var(--img-color-line); border-radius: var(--img-radius-pill); background: var(--img-color-surface); font-size: var(--img-text-xs); } .img-pill__name { font-weight: var(--img-weight-semibold); white-space: nowrap; } .img-pill__detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--img-text-2xs) var(--img-font-mono); color: var(--img-color-muted); } .img-pill__detail--error { color: var(--img-result-bad-fg); } .img-pill .img-dot { animation: none; } @media (max-width: 640px) { .img-stat { min-height: 152px; padding: var(--img-space-4); } .img-stat__value { font-size: min(var(--img-text-2xl), 20cqi); } .img-tile { min-height: 156px; padding: var(--img-space-4); } .img-tile__value { font-size: min(var(--img-text-2xl), 20cqi); } .img-panel { padding: var(--img-space-4); } .img-panel__scroll { margin: 0 calc(-1 * var(--img-space-4)); padding: 0 var(--img-space-4); } } @media (prefers-reduced-motion: reduce) { .img-spark, .img-dot--bad { animation: none; } .img-tile, .img-tile:hover, .img-tile:active { transition: none; transform: none; } } /* ========================================================================== v1.2 · Console parts Eight parts the IMG Console needed, made general for any IMG front end. Explanations open in place, under the thing tapped, never in a side drawer and never on hover only. State always pairs colour with a word or a shape. Amber marks actions, never a state. ========================================================================== */ /* ---------- Touch: small controls grow an invisible hit area to 44 px ---------- */ @media (pointer: coarse) { .img-pill--button::before, .img-source--button::before, .img-icon-btn::before, .img-chip--button::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); } .img-legend__head .img-btn, .img-notice--status .img-btn, .img-confirm__actions .img-btn { min-height: 44px; } } /* ---------- 1 · Tappable source pill: