:root { --bg: #0d1117; --bg-panel: #151b23; --bg-raised: #1c242e; --bg-input: #0b0f14; --border: #2a333f; --border-lt: #3a4553; --text: #e6edf3; --text-dim: #8b98a5; --text-mute: #5c6773; --accent: #3b82f6; --accent-dk: #1d4ed8; --green: #26a69a; --red: #ef5350; --amber: #f0b429; /* Text colours for the tinted notice/danger boxes below. Kept as their own tokens rather than reusing --green/--red/--amber: a notice's background is a low-alpha wash of the same hue, and the light-on-dark text that reads clearly on THAT wash is too pale to read on a plain page background — the two need to be free to diverge, and do, in the light theme below. */ --notice-info-text: #93c5fd; --notice-warn-text: #fcd34d; --notice-error-text: #fca5a5; --notice-danger-text: #ffb4b2; --radius: 6px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dark is this app's native theme — every colour above was chosen for it — so light is the opt-in override, applied by `js/theme.js` as an attribute on rather than a `prefers-color-scheme` media query. A trading screen people stare at for hours defaults to what it was designed for; the toggle exists for the room it's in, not the OS setting. */ :root[data-theme="light"] { --bg: #f3f5f8; --bg-panel: #ffffff; --bg-raised: #edf0f4; --bg-input: #ffffff; --border: #d7dce3; --border-lt: #c1c8d1; --text: #1a2027; --text-dim: #545e6a; --text-mute: #848d98; --accent: #2563eb; --accent-dk: #1d4ed8; --green: #0f8a75; --red: #d0342c; --amber: #9a6300; --notice-info-text: #1d4ed8; --notice-warn-text: #8a5a06; --notice-error-text: #b91c1c; --notice-danger-text: #b91c1c; } * { box-sizing: border-box; } /* Shared by both pages, so it lives here rather than in trade.css. */ .hidden { display: none !important; } /* Without this, 's background propagates up to paint the viewport canvas itself (a standard CSS quirk: the UA does this whenever has no background of its own) — and that propagated paint does not reliably follow 's own `transition: background-color`, so a theme toggle could flip every panel correctly while the page's own backdrop stayed stuck on the old colour. Giving the same background removes the propagation, and with it the whole class of bug. */ html { background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; } /* ── layout ───────────────────────────────────────────────────────────── */ header { display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 52px; background: var(--bg-panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } /* Two logo files, one per theme — swapped by hiding one and showing the other off the same `[data-theme]` attribute `theme.js` already sets on , so the swap is instant and needs no JS of its own. */ header .brand { display: flex; align-items: center; } header .brand .logo { height: 28px; width: auto; display: block; } header .brand .logo-light { display: none; } :root[data-theme="light"] header .brand .logo-dark { display: none; } :root[data-theme="light"] header .brand .logo-light { display: block; } header .spacer { flex: 1; } nav a { color: var(--text-dim); text-decoration: none; font-size: 13px; padding: 6px 10px; border-radius: var(--radius); } nav a:hover { color: var(--text); background: var(--bg-raised); } nav a.active { color: var(--text); background: var(--bg-raised); } nav a[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; } /* Hamburger toggle — hidden on desktop, where the nav fits on one line. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 34px; height: 34px; padding: 0; flex-shrink: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } .nav-toggle span { display: block; width: 16px; height: 2px; background: var(--text-dim); border-radius: 1px; } .nav-toggle:hover { background: var(--bg-raised); } .nav-toggle:hover span { background: var(--text); } /* ── mobile header ──────────────────────────────────────────────────────── Below this width the nav (6 links) plus whichever page's own status/bell/ account controls no longer fit one row, so those — never the mode badge or kill switch, which trade.css keeps "always visible... never behind a menu" on purpose — collapse behind the hamburger. Targeted by id/class so a new safety-critical header control stays visible by default; only what is explicitly listed here hides. */ @media (max-width: 860px) { header { flex-wrap: wrap; height: auto; min-height: 52px; row-gap: 8px; padding: 10px 14px; } header .brand .logo { height: 24px; } .nav-toggle { display: flex; } header nav, header .spacer, header #status-line, header #feed-state, header .bell-wrap, header #user-email, header #logout-btn { display: none; } header.nav-open nav, header.nav-open #status-line, header.nav-open #feed-state, header.nav-open .bell-wrap, header.nav-open #user-email, header.nav-open #logout-btn { display: flex; flex-basis: 100%; width: 100%; } header nav { flex-direction: column; gap: 2px; } header nav a { padding: 12px 14px; font-size: 15px; } /* A handful of panels (position filters, the pager) are inline-styled as a single flex row of controls, sized for a desktop-width panel — never forced back to a column, since `flex-wrap` alone still lets short rows (like the pager) stay on one line and only wraps the ones that don't fit. */ .panel-body { flex-wrap: wrap; } } .layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 16px; align-items: start; } @media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } } .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .panel > h2 { margin: 0; padding: 10px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); background: var(--bg-raised); border-bottom: 1px solid var(--border); } .panel-body { padding: 14px; } .sidebar { display: flex; flex-direction: column; gap: 16px; } .main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* ── forms ────────────────────────────────────────────────────────────── */ label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); margin-bottom: 4px; } input, select { width: 100%; padding: 7px 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font: 13px var(--sans); } input:focus, select:focus { outline: none; border-color: var(--accent); } input[type="checkbox"] { width: auto; accent-color: var(--accent); } .field { margin-bottom: 12px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .field-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .field-check label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-dim); } button { padding: 8px 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font: 600 13px var(--sans); cursor: pointer; } button:hover { background: var(--accent-dk); } button:disabled { opacity: 0.5; cursor: not-allowed; } button.secondary { background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--border); } button.secondary:hover { background: var(--border); color: var(--text); } button.wide { width: 100%; } details { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; } details > summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 10px; user-select: none; } details[open] > summary { color: var(--text); } .help { font-size: 11px; color: var(--text-mute); margin-top: 3px; line-height: 1.4; } /* ── metrics ──────────────────────────────────────────────────────────── */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--border); } .metric { background: var(--bg-panel); padding: 12px 14px; } .metric .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); margin-bottom: 4px; } .metric .v { font: 600 19px var(--mono); letter-spacing: -0.02em; } .pos { color: var(--green); } .neg { color: var(--red); } .warn { color: var(--amber); } /* ── tables ───────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; max-height: 460px; overflow-y: auto; } table { width: 100%; border-collapse: collapse; font: 12px var(--mono); } th { position: sticky; top: 0; background: var(--bg-raised); text-align: right; padding: 8px 12px; font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; } th:first-child, td:first-child { text-align: left; } td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } tbody tr:hover { background: var(--bg-raised); } .tag { display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--bg-raised); border: 1px solid var(--border); font-size: 11px; color: var(--text-dim); } .tag.long { color: var(--green); border-color: rgba(38,166,154,0.35); } .tag.short { color: var(--red); border-color: rgba(239,83,80,0.35); } .tag.paper { color: var(--accent); border-color: rgba(59,130,246,0.35); } .tag.live { color: var(--red); border-color: rgba(239,83,80,0.35); font-weight: 700; } .tag.open { color: var(--amber); border-color: rgba(240,180,41,0.35); } .tag.pending { color: var(--accent); border-color: rgba(59,130,246,0.35); font-style: italic; } .tag.closed { color: var(--text-dim); } .tag.rejected { color: var(--text-mute); text-decoration: line-through; } /* ── tabs ─────────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 2px; padding: 8px 8px 0; background: var(--bg-raised); border-bottom: 1px solid var(--border); } .tab { padding: 7px 13px; font-size: 12px; color: var(--text-dim); cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; user-select: none; } .tab:hover { color: var(--text); } .tab.active { color: var(--text); background: var(--bg-panel); } /* ── misc ─────────────────────────────────────────────────────────────── */ #chart { height: 300px; } #price-chart { height: 440px; } /* Legend doubles as the readout: hovering the chart writes the value at the crosshair into each swatch's row, the way a TradingView pane does. */ .chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 2px 8px; font-size: 11.5px; color: var(--text-mute); min-height: 18px; } .chart-legend .item { display: flex; align-items: center; gap: 6px; } .chart-legend .swatch { width: 14px; height: 0; border-top-width: 2px; border-top-style: solid; } .chart-legend .swatch.dotted { border-top-style: dotted; } .chart-legend .swatch.dashed { border-top-style: dashed; } .chart-legend .val { color: var(--text); font-variant-numeric: tabular-nums; } .chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; font-size: 11.5px; } .notice { padding: 10px 14px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; border: 1px solid; } .notice.info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: var(--notice-info-text); } .notice.warn { background: rgba(240,180,41,0.08); border-color: rgba(240,180,41,0.3); color: var(--notice-warn-text); } .notice.error { background: rgba(239,83,80,0.08); border-color: rgba(239,83,80,0.3); color: var(--notice-error-text); } .notice + .notice { margin-top: 8px; } .notice strong { color: inherit; } .empty { padding: 36px 20px; text-align: center; color: var(--text-mute); font-size: 13px; } .stack { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; gap: 8px; align-items: center; } .muted { color: var(--text-mute); font-size: 11px; } .spin { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -2px; } @keyframes spin { to { transform: rotate(360deg); } } /* ── scanner ──────────────────────────────────────────────────────────── */ /* The emitted Chartink clause. It is one long line and must stay copyable verbatim, so it wraps rather than scrolling and keeps its own whitespace. */ .clause { margin: 10px 0; padding: 10px 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; font: 12px/1.6 var(--mono); color: var(--text); white-space: pre-wrap; word-break: break-word; } th[data-sort]:hover { color: var(--text); } /* Fill-check verdicts. Green only for a level the market genuinely offered; everything else is a fill that needed an order already resting, or one that could not be checked at all. */ .verdict { font-size: 11px; white-space: nowrap; } .verdict.ok { color: var(--green); } .verdict.gap_through { color: var(--text-dim); } .verdict.thin_window, .verdict.opening_print { color: var(--amber); } .verdict.block_print, .verdict.no_touch { color: var(--red); } .verdict.unverified { color: var(--text-mute); } /* ── alerts ───────────────────────────────────────────────────────────── */ .alert-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .alert-row:last-child { border-bottom: none; } .alert-row .name { flex: 1; min-width: 0; } .alert-row .name strong { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; } .alert-row .name span.muted { display: block; margin-top: 2px; font: 11px var(--mono); color: var(--text-mute); } .alert-row .del { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; flex-shrink: 0; } .alert-row .del:hover { color: var(--red); } .alert-row.disabled .name { opacity: 0.45; } /* ── notifications ────────────────────────────────────────────────────── */ .bell-wrap { position: relative; } .bell { position: relative; background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--border); padding: 6px 11px; font-size: 15px; line-height: 1; } .bell:hover { background: var(--border); color: var(--text); } .bell-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font: 700 10px var(--mono); line-height: 16px; text-align: center; } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); z-index: 30; } .notif-panel > h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .notif-panel > h2 button { padding: 3px 9px; font-size: 10.5px; text-transform: none; letter-spacing: 0; } .notif-list { overflow-y: auto; flex: 1; } .notif-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; } .notif-item:last-child { border-bottom: none; } .notif-item .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .notif-item .head strong { font: 600 13px var(--mono); } .notif-item .meta { color: var(--text-mute); font-size: 11px; } .notif-item .dismiss { background: none; border: none; color: var(--text-mute); padding: 0 2px; font-size: 14px; cursor: pointer; line-height: 1; flex-shrink: 0; } .notif-item .dismiss:hover { color: var(--text); } /* ── theme toggle ─────────────────────────────────────────────────────── */ /* Applied broadly, not just to the handful of elements that actually change colour on a toggle: scoping this list precisely would mean maintaining it forever as new components are added, and a blanket transition on the properties a theme switch touches costs nothing on any element it doesn't. */ body, .panel, .panel > h2, input, select, button.secondary, table, th, td, .tag, .notice, .bell, .notif-panel { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .theme-toggle { background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--border); padding: 6px 10px; font-size: 15px; line-height: 1; } .theme-toggle:hover { background: var(--border); color: var(--text); }