/* global.css — shared styling for cli-serve pages. Dark, compact, terminal-ish. */ /* Thin monospace for the chart's marker + axis labels. Vendored locally (no CDN) by scripts/fetch_marker_font.dart. Only weight 300 is shipped, so a request for "Roboto Mono" resolves to the Light face — canvas text (markers) renders thin. */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/roboto-mono-300.woff2') format('woff2'); } /* ── Theme ───────────────────────────────────────────────────────────────────── ALL colors are CSS custom properties (--tokens), which pierce the shadow boundary so every component re-themes for free. There are NO color literals anywhere in the frontend except the ONE source of truth: js/themes.js (the palettes) → theme.js writes the tokens as inline styles on before first paint and stamps `data-theme`. To add/change a theme, edit js/themes.js only. This file defines just the non-color design tokens. */ :root { --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* EVERY text-entry control (input / textarea / select) must be exactly this size: iOS Safari zooms the whole page in when a focused control is under 16px and never zooms back out — the visitor is left on a page wider than the screen. Custom properties pierce shadow DOM, so components use `font-size: var(--input-font)` instead of each picking a rem value. */ --input-font: 16px; } /* Smooth the flip between palettes (only the theme-driven properties). */ body, .card { transition: background-color .2s ease, color .2s ease; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; } /* A phone must never scroll sideways. Wide content (tables, the chart) scrolls inside its OWN container; nothing widens the page. This is deliberately not `overflow-x: hidden` on the body — that hides the symptom (and silently clips content) instead of fixing the element that overflows. `scripts/shoot_pages.dart` asserts scrollWidth == viewport per page, so a regression is caught, not masked. Media is the one thing clamped outright: */ img, svg, canvas { max-width: 100%; } .container { max-width: 720px; margin: 0 auto; padding: 1rem; } /* The chart page needs more horizontal room than the default text column. */ .chart-container { max-width: 1100px; } /* Two-column page layout: a 12-column grid with a wide `.main-col` (8) and a narrow `.side-col` (4). Below the breakpoint both span the full width and stack in source order. Used by the chart page (chart + trade history / your trades) and the address page (balance + portfolios); pages add their own modifier class for width and padding. */ .split-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: .6rem; align-items: start; } .split-grid .main-col, .split-grid .side-col { min-width: 0; /* let the chart/tables shrink inside the column */ display: flex; flex-direction: column; gap: .6rem; } .split-grid .main-col { grid-column: span 8; } .split-grid .side-col { grid-column: span 4; } @media (max-width: 960px) { .split-grid .main-col, .split-grid .side-col { grid-column: 1 / -1; } } /* Monitor page: eight columns of stats (count + median/min/max for time AND size) do not fit the 720px text column — in it, everything past "Size med" sat off the right edge of its own scroll box. */ .monitor-main { max-width: 1400px; } /* Chart page: as much horizontal room as the viewport allows, and tighter cards so the tables have more of it. */ .chart-grid { max-width: min(96vw, 1920px); padding: .6rem; } .chart-grid .card { margin-bottom: 0; padding: .6rem .7rem; } /* Address page: main column matches the default `.container` text width, with the portfolios card beside it. */ .addr-grid { max-width: 1100px; padding: 1rem; } /* Home page: the pair list + oracle card, with the portfolio balance beside them. Same width as the default `.container` so the hero above it still lines up with the content. */ .home-grid { max-width: 1200px; padding: 1rem; } .home-grid .card { margin-bottom: 0; } /* 7/5 rather than the default 8/4: the balance card carries four columns (Asset / Amount / Value (ADA) / Weight) and a 4-span side column clipped the last one behind its own scrollbar. */ .home-grid .main-col { grid-column: span 7; } .home-grid .side-col { grid-column: span 5; } @media (max-width: 960px) { .home-grid .main-col, .home-grid .side-col { grid-column: 1 / -1; } } /* The headline shares the grid's width so it centres over the CONTENT, not over the default 720px text column. Width only — the horizontal centring is `.hero`'s `margin: … auto …`, which is declared later and would reset a margin set here. */ .home-head { max-width: 1200px; padding: 0 1rem; } .card { background: var(--panel); padding: .5rem .75rem; margin-bottom: 1rem; } h1 { font-size: 1.15rem; margin: 0 0 .5rem; } /* Home hero headline. `auto` (not 0) on the sides: this rule is declared after the page's width modifier (`.home-head`), so a `0` here would pin a capped headline to the left edge and `text-align: center` would only centre it inside that box. */ .hero { margin: .5rem auto 1.25rem; text-align: center; } .hero h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; color: var(--text); } h2 { font-size: .95rem; margin: 0 0 .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .hash-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .hash, code, .mono { font-family: var(--mono); } .hash { font-size: .8rem; word-break: break-all; color: var(--accent); flex: 1 1 auto; } /* Pill link styled to match (e.g. "cexplorer ↗" on the tx page). */ .btn-link { font-size: .8rem; color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-border); padding: .2rem .6rem; text-decoration: none; white-space: nowrap; } .btn-link:hover { border-color: var(--accent); color: var(--accent); } /* Section header row: a heading with an action (e.g. a link) beside it. */ .section-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; } .section-head h2 { margin: 0; } .muted { color: var(--muted); } .count { margin: 0 0 .75rem; color: var(--muted); } .count b { color: var(--text); } .error { color: var(--sell); } /* Trade-card visuals (.trade/.pill/.kind/.leg/.stat) live in the shared shadow stylesheet js/trade-card.js, adopted by and . */ /* tx page layout: a centered main column with a left-hand order-detail panel () that only takes space once a fill's order link is clicked. */ .tx-layout { display: flex; gap: 1rem; align-items: flex-start; justify-content: center; padding: 1rem; } .tx-layout .tx-main { max-width: 720px; width: 100%; min-width: 0; } /* handles its own show/hide + responsive rules via :host (shadow). */ @media (max-width: 960px) { .tx-layout { flex-direction: column-reverse; align-items: stretch; } } /* Phone: buy back the horizontal room the page gutters take. At 390px a 1rem gutter each side is 8% of the screen — the tables inside need it more. */ @media (max-width: 560px) { .container { padding: .75rem .55rem; } .addr-grid { padding: .6rem .55rem; } .chart-grid { max-width: 100vw; padding: .5rem .4rem; } .tx-layout { padding: .75rem .55rem; } .card { padding: .5rem .55rem; } h1 { font-size: 1.05rem; } }