/* Color variables now live in /theme.css (light default + :root[data-theme="dark"] CyberPunk overrides), linked from index.html's before this file — everything below is layout only, already written against var(--...). */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--page-plane); color: var(--text-primary); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: hidden; } #hud { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border); /* Pinned so title/ticker-select/range-buttons stay visible while scrolling through chart panels below — was plain document flow, fine when everything fit in one screen, not once there are enough panels to exceed it. Needs its own background (already has one above) and a z-index so scrolled-past charts don't show through. 25, not 20 — #hud-telemetry-window already uses 20 (bottom-docked, never actually overlaps this top-docked header, but picking a distinct value avoids implying they're stacking-related). */ position: sticky; top: 0; z-index: 25; } #hud-title-row { display: flex; align-items: baseline; gap: 12px; } #hud-title { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.02em; white-space: nowrap; overflow-x: auto; min-width: 0; /* let this shrink/scroll before it pushes hud-latest-bar off */ } #hud-latest-bar { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 11px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; margin-left: auto; } /* Dropdown menu, replaces the old standalone Logout button — same Home/About/Documentation/Profile/Log Out set as the landing/about/ documentation/profile pages' .site-menu, just laid out inline at the end of #hud-title-row instead of position:fixed (this page already has a fixed-position element, #hud-telemetry-window, docked lower-left — keeping this one inline avoids any risk of the two overlapping). */ .hud-menu { position: relative; flex-shrink: 0; } .hud-menu-trigger { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 3px 8px; cursor: pointer; } .hud-menu-trigger:hover { color: var(--text-primary); border-color: var(--text-secondary); } .hud-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; min-width: 140px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 16px rgba(11, 11, 11, 0.12); padding: 6px; display: flex; flex-direction: column; z-index: 30; /* above the telemetry window's z-index:20 in case they ever overlap */ } .hud-menu-panel[hidden] { display: none; } .hud-menu-panel a { display: block; padding: 6px 10px; font-size: 12px; color: var(--text-primary); text-decoration: none; border-radius: 3px; white-space: nowrap; text-align: left; } .hud-menu-panel a:hover { background: var(--page-plane); } #hud-subtitle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-secondary); } #hud-welcome { font-size: 11px; color: var(--text-secondary); display: none; } #hud-welcome.visible { display: block; } .hud-inline-link { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 2px 7px; margin-left: 10px; cursor: pointer; } .hud-inline-link:hover { color: var(--text-primary); border-color: var(--text-secondary); } .hud-inline-select { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 3px; padding: 2px 4px; margin-left: 10px; cursor: pointer; } .hud-inline-select:hover { color: var(--text-primary); border-color: var(--text-secondary); } /* Day/Week/Month/Year chart-range buttons — each one is a .hud-inline-link box (same bordered-box style as Edit Tickers/the ticker-select dropdown next to it), just with an added active state. */ #hud-range-selector { display: flex; flex-shrink: 0; } #hud-range-selector button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* Draw Trendline button while awaiting its 2 clicks (Tier 2) — same active-state treatment as the range selector above. */ #trendline-draw-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* Refresh-cadence indicator ("⟳ 3m"/"⟳ 5m") — reflects whatever interval_ms tick.php actually returned for the active range (see app.js's renderRefreshIndicator()), not a hardcoded label, so it can't drift out of sync if the cadence for a range ever changes. Plain text, not a .hud-inline-link box — it's informational, not clickable. */ .hud-refresh-indicator { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--text-secondary); margin-left: 10px; white-space: nowrap; display: inline-flex; align-items: center; } /* The refresh glyph itself reads as too small at the surrounding 10px text size — bumped up on its own so it's actually recognizable as a refresh icon, while "Xm" stays matched to the rest of the HUD's small text. */ .hud-refresh-icon { font-size: 15px; line-height: 1; margin-right: 3px; } /* Generic editable-table modal (see index.html's comment) — styled once, reusable for any future table wired through the same mechanism. */ .modal-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(11, 11, 11, 0.45); display: flex; align-items: center; justify-content: center; } .modal-overlay[hidden] { display: none; } .modal-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 40px rgba(11, 11, 11, 0.25); width: 100%; max-width: 320px; padding: 16px; font-size: 13px; } .modal-header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .modal-header button { background: none; border: none; font-size: 18px; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 0; } .modal-header button:hover { color: var(--text-primary); } #basket-modal-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; } #basket-modal-list li { display: flex; justify-content: space-between; align-items: center; background: var(--page-plane); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } #basket-modal-list button { background: none; border: none; color: var(--status-critical); cursor: pointer; font-size: 12px; padding: 0; } #basket-modal-add-form { display: flex; gap: 6px; } #basket-modal-add-form input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 13px; background: var(--surface-2); color: var(--text-primary); } #basket-modal-add-form button { border: 1px solid var(--border); border-radius: 4px; background: var(--accent); color: var(--accent-ink); padding: 6px 12px; cursor: pointer; font-size: 12px; } #basket-modal-message { margin-top: 8px; font-size: 11.5px; color: var(--status-critical); min-height: 1em; } #basket-modal-message.info { color: var(--status-good); } #charts { display: flex; flex-direction: column; gap: 2px; /* dataviz: 2px surface gap between stacked chart segments */ padding: 2px 16px 16px; } .chart-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; position: relative; } #still-collecting-banner { background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--status-good); border-radius: 4px; padding: 10px 14px; margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); } .chart-empty-state { display: none; position: absolute; inset: 24px 8px 8px; z-index: 5; /* Lightweight Charts' internal canvases otherwise paint over this */ align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--text-muted); pointer-events: none; } .chart-empty-state.visible { display: flex; } .chart-card .chart-label { font-size: 10px; color: var(--text-secondary); padding: 4px 8px 0; } .chart-sublabel { color: var(--text-muted); font-weight: 400; margin-left: 6px; } .chart-price { height: 340px; } .chart-sub { height: 120px; } #hint { padding: 6px 16px 14px; font-size: 10px; color: var(--text-muted); } /* Floating HUD telemetry window — detached from the chart flow (fixed, not inside #charts), draggable by its titlebar. Ported from hud_telemetry.py's render_telemetry_matrix(), which drew this as a translucent box overlaid directly on the price chart's Matplotlib figure; a floating window is the DOM equivalent of "detached" that a fixed overlay div inside the price chart-card wouldn't give. */ #hud-telemetry-window { position: fixed; bottom: 36px; /* 24px original inset + 24px (0.25in) up - 12px (0.125in) back down, per request */ left: 144px; /* 24px original inset + 48px collapsed sidebar rail (sidebar.css) + 96px (1in) right - 24px (0.25in) back left, per request */ width: 260px; z-index: 20; background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(11, 11, 11, 0.18); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 10.5px; } #hud-telemetry-titlebar { padding: 6px 8px; background: var(--page-plane); border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; color: var(--text-primary); font-weight: 700; font-size: 10px; letter-spacing: 0.02em; cursor: move; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; } #hud-telemetry-body { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 2px; } .hud-line { display: flex; flex-direction: column; padding: 1px 0; } .hud-line-top { display: flex; justify-content: space-between; gap: 8px; } .hud-line-label { color: var(--text-secondary); flex-shrink: 0; } .hud-line-state { font-weight: 700; flex-shrink: 0; } .hud-line-detail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; }