/* Matches the native macOS app's look, restyled toward the browser's own rounded dark chrome. Two full themes: dark (default) and light, switched by the browser's preference or an explicit choice in Settings (data-theme="dark"/"light" stamped on wins over the media query). */ :root { --bg: #1e2023; --bg-elevated: #2a2c30; --bg-fill: rgba(255, 255, 255, 0.07); --bg-fill-strong: rgba(255, 255, 255, 0.14); --border: rgba(255, 255, 255, 0.1); --text-primary: #f2f2f3; --text-secondary: #9a9a9e; --text-secondary-faint: rgba(154, 154, 158, 0.6); --accent-blue: #4c8dff; --accent-orange: #f5a623; --accent-yellow: #ffd60a; --accent-red: #e35347; /* Selected/active toolbar icon: a darker grey than the resting --text-secondary, rather than a filled black pill. */ --icon-active: #3a3a3e; --up: #26ad9c; --down: #ef534f; --gold: #f9c241; /* identity accent (logo arrow) — labels only, never semantic */ --pill-selected-bg: #ffffff; --pill-selected-fg: #000000; --scrollbar-thumb: rgba(255, 255, 255, 0.14); --chart-bg: #1c1c1f; --chart-grid: rgba(255, 255, 255, 0.08); --chart-axis-label: rgba(255, 255, 255, 0.45); --chart-annotation: #ffffff; --font-nav-title: 700 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-title: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-header: 600 11px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: 400 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-button: 600 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-caption: 400 9px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-label: 600 9px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono-value: 600 11px/1.3 "SF Mono", ui-monospace, Menlo, Consolas, monospace; --font-stat-value: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-big-value: 700 18px/1.2 "SF Mono", ui-monospace, Menlo, Consolas, monospace; --font-chart-label: 400 8px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } @media (prefers-color-scheme: light) { :root { --bg: #ffffff; --bg-elevated: #ffffff; --bg-fill: rgba(0, 0, 0, 0.05); --bg-fill-strong: rgba(0, 0, 0, 0.1); --border: rgba(0, 0, 0, 0.12); --text-primary: #1d1d1f; --text-secondary: #6e6e73; --text-secondary-faint: rgba(110, 110, 115, 0.6); --gold: #b8860b; /* on-light variant */ --pill-selected-bg: #1d1d1f; --pill-selected-fg: #ffffff; --scrollbar-thumb: rgba(0, 0, 0, 0.16); --chart-bg: #ffffff; --chart-grid: rgba(0, 0, 0, 0.07); --chart-axis-label: rgba(0, 0, 0, 0.45); --chart-annotation: #1d1d1f; } } :root[data-theme="dark"] { --bg: #1e2023; --bg-elevated: #2a2c30; --bg-fill: rgba(255, 255, 255, 0.07); --bg-fill-strong: rgba(255, 255, 255, 0.14); --border: rgba(255, 255, 255, 0.1); --text-primary: #f2f2f3; --text-secondary: #9a9a9e; --text-secondary-faint: rgba(154, 154, 158, 0.6); --gold: #f9c241; --pill-selected-bg: #ffffff; --pill-selected-fg: #000000; --scrollbar-thumb: rgba(255, 255, 255, 0.14); --chart-bg: #1c1c1f; --chart-grid: rgba(255, 255, 255, 0.08); --chart-axis-label: rgba(255, 255, 255, 0.45); --chart-annotation: #ffffff; } :root[data-theme="light"] { --bg: #ffffff; --bg-elevated: #ffffff; --bg-fill: rgba(0, 0, 0, 0.05); --bg-fill-strong: rgba(0, 0, 0, 0.1); --border: rgba(0, 0, 0, 0.12); --text-primary: #1d1d1f; --text-secondary: #6e6e73; --text-secondary-faint: rgba(110, 110, 115, 0.6); --gold: #b8860b; /* on-light variant */ --pill-selected-bg: #1d1d1f; --pill-selected-fg: #ffffff; --scrollbar-thumb: rgba(0, 0, 0, 0.16); --chart-bg: #ffffff; --chart-grid: rgba(0, 0, 0, 0.07); --chart-axis-label: rgba(0, 0, 0, 0.45); --chart-annotation: #1d1d1f; } * { box-sizing: border-box; } /* The popup fills its surface edge-to-edge and lets the browser's own popup-window rounding clip the corners — drawing a smaller radius of our own on an opaque backdrop just left visible square corners behind it. color-scheme keeps the browser's popup surface dark in dark mode so nothing light flashes at the edges. */ html { margin: 0; padding: 0; background: var(--bg); /* Locked light theme — keep native controls (checkboxes etc.) light even when the OS is in dark mode. */ color-scheme: light; width: 340px; height: 580px; overflow: hidden; } body { margin: 0; padding: 16px; background: var(--bg); color: var(--text-primary); width: 340px; height: 580px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; } html.panel, html.panel body { width: 100%; height: 100vh; } .divider { height: 1px; background: var(--border); flex: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; border-radius: 8px; } button:disabled { cursor: default; } input, select, textarea { font: var(--font-body); color: var(--text-primary); background: var(--bg-fill); border: 1px solid var(--border); border-radius: 9px; padding: 6px 9px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-blue); } /* Slim, low-contrast scrollbars that blend into the background. */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } *::-webkit-scrollbar { width: 4px; height: 4px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; } .scroll { overflow-y: auto; flex: 1; min-height: 0; } .icon-badge { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; } .row { display: flex; align-items: center; gap: 10px; min-height: 30px; } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; font: var(--font-label); /* No resting circle — the grey fill now marks the selected/active state. */ background: transparent; color: var(--text-secondary); white-space: nowrap; flex: none; } .pill.selected { background: var(--bg-fill-strong); color: var(--accent-blue); } /* Hover affordance: a light grey wash (lighter than the selected state) so an unselected pill/icon reads as clickable. Selected keeps its stronger fill. */ .pill:not(.selected):hover { background: var(--bg-fill); } .tz-pill:hover { background: var(--bg-fill); } /* Chart toolbar hover-reveal: symbol + active timeframe stay pinned; everything else fades in only when the top strip is hovered/focused. Opacity (not display) so the row keeps its layout and open menus don't jump. */ .chart-toolbar .tb-reveal, .pane-toolbar .tb-reveal { opacity: 0; pointer-events: none; transition: opacity 0.12s ease; } .chart-toolbar:hover .tb-reveal, .chart-toolbar:focus-within .tb-reveal, .pane-toolbar:hover .tb-reveal, .pane-toolbar:focus-within .tb-reveal { opacity: 1; pointer-events: auto; } /* Proxy selected-timeframe pill: shown at rest hugging the ticker, fades out as the real bar (with the pill in its true slot) fades in on hover. */ .chart-toolbar .tf-rest, .pane-toolbar .tf-rest { opacity: 1; transition: opacity 0.12s ease; } .chart-toolbar:hover .tf-rest, .chart-toolbar:focus-within .tf-rest, .pane-toolbar:hover .tf-rest, .pane-toolbar:focus-within .tf-rest { opacity: 0; } /* Canonical close button — ONE x everywhere (SVG glyph from icons.close), with the red-on-light-red rounded hover. Global (unscoped) so it also applies inside the composable builder's .cbuilder tree. */ .x-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: var(--text-secondary); border-radius: 7px; cursor: pointer; flex: none; transition: background 0.12s ease, color 0.12s ease; } .x-close:hover { background: #fdeaea; color: var(--accent-red); } .card { background: var(--bg-fill); border-radius: 12px; } /* The page-position dots under the popup carousel. */ /* Watchlist card header icons — pill-style hover highlight (matches the prototype). */ .wl-iconbtn:hover { background: var(--bg-fill); } /* Hover-reveal row actions: hidden at rest (space still reserved, so nothing reflows), fading in when the card is hovered or holds keyboard focus. Active-state icons don't get this class, so they stay visible. */ .wl-hover-action { opacity: 0; pointer-events: none; transition: opacity 0.12s ease; } .wl-card:hover .wl-hover-action, .wl-card:focus-within .wl-hover-action { opacity: 1; pointer-events: auto; } /* Shown only at rest (e.g. the price); hidden while the card is hovered so the action icons can take its place. */ .wl-rest-only { transition: opacity 0.12s ease; } .wl-card:hover .wl-rest-only, .wl-card:focus-within .wl-rest-only { opacity: 0; } /* Shared dropdown-menu row, matching the chart's .menu-panel buttons: rounded, left-aligned, grey hover. Used by both watchlist reveals so the add-ticker results and the boards list read identically. */ .wl-menu-item { border-radius: 6px; cursor: pointer; transition: background 0.1s ease; } .wl-menu-item:hover { background: var(--bg-fill); } .wl-menu-item.sel { background: var(--bg-fill-strong); } /* Watchlist cards on the Watchlists list page — soft drop-shadow lift on hover, matching the security cards / Tune cards (not a background darken). The shadow itself is applied on pointer enter/leave so it can co-exist with the drag cue. */ .wl-list-card { background: var(--bg); transition: box-shadow 0.12s ease; } /* Bottom tab bar — the app's primary navigation (replaces the top pager + dots). Spans the full width by cancelling the body's 16px padding. */ .app-nav { display: flex; flex: none; border-top: 1px solid var(--border); margin: 0 -16px -16px; padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px)); } .app-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; transition: color 0.1s ease; } .app-nav-item .lbl { font: 500 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.01em; } .app-nav-item.active { color: var(--accent-blue); } /* Tabs get a subtle darken on hover (a full-width grey block would read too heavy for a nav bar). */ .app-nav-item:not(.active):hover { color: var(--text-primary); } /* The Strategy Lab's own Develop / Deploy tab bar — reuses .app-nav-item, but cancels the Lab overlay's 14px padding instead of the body's 16px. */ .lab-nav { display: flex; flex: none; border-top: 1px solid var(--border); margin: 0 -14px -14px; padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px)); } .app-nav-badge { position: absolute; top: -5px; left: 11px; min-width: 13px; height: 13px; padding: 0 3px; box-sizing: border-box; border-radius: 7px; background: var(--accent-red); color: #fff; font: 600 9px/13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; } .page-bottom { display: flex; align-items: center; } .page-bottom .page-dots { flex: 1; } /* Left/right slots keep the dots centred; the left one holds the watchlist's band-scan button. */ .page-actions { width: 34px; flex: none; display: flex; align-items: center; gap: 4px; } .page-dots { display: flex; justify-content: center; gap: 5px; padding-top: 2px; flex: none; } .page-dots .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bg-fill-strong); } .page-dots .dot.filled { background: var(--text-secondary); } /* Full-tab view (?tab=1) — the same page as a real web page: a centered reading column with the website's typographic scale, not a stretched popup. Tokens only; the palette is already shared with tickahead.com. */ html.tab { --font-nav-title: 700 21px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-title: 600 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-header: 600 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: 400 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-button: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-caption: 400 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-label: 600 10px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono-value: 600 13px/1.3 "SF Mono", ui-monospace, Menlo, Consolas, monospace; --font-stat-value: 600 19px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-big-value: 700 24px/1.2 "SF Mono", ui-monospace, Menlo, Consolas, monospace; } html.tab body { max-width: 880px; margin: 0 auto; padding: 28px 32px 40px; gap: 14px; } /* The full-tab view is opened onto ONE page, so the bottom nav (popup/panel furniture) is hidden there. */ html.tab .app-nav { display: none; } /* Scrolls without showing a bar — used where the bar reads as clutter (the Journal page, per founder). */ .no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }