/* Shared dashboard header — single source of truth for the top bar across * every dashboard. Owned API: * .top-bar the header container * .top-bar-logo home-link logo * .top-bar-brand title + subtitle wrapper * .top-bar-title h1 * .top-bar-subtitle p * .top-bar-updated "Updated Xs ago" (optional; only rendered when * the dashboard asks for it) * .top-bar-actions right-side button container * .dh-nav-link optional left-of-toggle nav link (e.g. "Bots") * #theme-toggle light/dark toggle button * #wallet-lock-btn sign-in / signed-in indicator * .icon-moon/.icon-sun toggle icons (light shows moon, dark shows sun) * #wallet-icon-locked/-unlocked wallet icons * * Dark mode: the shared script sets data-theme="dark" on . This file * defines the body background tokens so the page (not just the cards) * actually responds. Each dashboard's local CSS handles card colors via * its own variables. */ :root { --dh-page-bg: #f0f2f7; --dh-text: #1a2035; --dh-text-muted: #475569; --dh-text-faint: #7a85a0; --dh-border: rgba(0, 0, 0, .15); --dh-accent: #4f46e5; } [data-theme="dark"] { --dh-page-bg: #0b0f14; --dh-text: #e8eeff; --dh-text-muted: #cbd5e1; --dh-text-faint: #64748b; --dh-border: rgba(255, 255, 255, .10); --dh-accent: #6b7aff; } /* Body background tracks the theme. Previously hardcoded in shared/styles.css * (light only); when a dashboard flipped to dark, cards went dark but the * page stayed light — the visible bug that motivated this refactor. */ body { background: var(--dh-page-bg); color: var(--dh-text); } /* ── Top bar layout ───────────────────────────────────────────────────── */ /* `header.top-bar` (tag + class, specificity 0,1,1) is used instead of just `.top-bar` so the rules win against shared/styles.css's bare `header` (which sets max-width: 1000px and margin: 0 auto 2.5rem for the home page header). Without the tag prefix the bare `header` rule's max-width would leak in and constrain dashboard headers to 1000px. */ header.top-bar { max-width: none; margin: 0 0 1.25rem; display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem .9rem; border-bottom: 1px solid var(--dh-border); } .top-bar-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: .6rem; line-height: 0; opacity: .75; transition: opacity .15s; border-radius: 6px; } .top-bar-logo:hover { opacity: 1; } .top-bar-logo:focus-visible { outline: 2px solid var(--dh-accent); outline-offset: 3px; } .top-bar-logo img { width: 28px; height: 28px; border-radius: 6px; display: block; } /* `.top-bar-brand` is a flex column so the optional last-updated line stacks cleanly under a wrapped subtitle (e.g. the long subtitle on the charts dashboard) instead of flowing inline after it. */ .top-bar-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .top-bar-title { font-size: 1.25rem; font-weight: 800; color: var(--dh-text); letter-spacing: -.02em; line-height: 1.2; } .top-bar-subtitle { font-size: .8rem; color: var(--dh-text-muted); font-weight: 500; } .top-bar-updated { font-size: .75rem; color: var(--dh-text-faint); } .top-bar-updated:empty { display: none; } .top-bar-actions { display: flex; align-items: center; padding-left: .75rem; flex-shrink: 0; } /* Optional nav link (e.g. "Bots" → /dashboards/bots/) */ .dh-nav-link { font-size: .85rem; font-weight: 600; color: var(--dh-text-muted); text-decoration: none; padding: .35rem .65rem; border-radius: 6px; margin-right: .5rem; transition: background .15s, color .15s; } .dh-nav-link:hover, .dh-nav-link:focus-visible { color: var(--dh-text); background: rgba(0,0,0,.05); outline: none; } [data-theme="dark"] .dh-nav-link:hover, [data-theme="dark"] .dh-nav-link:focus-visible { background: rgba(255,255,255,.06); } /* ── Icon buttons (theme toggle + wallet lock) ────────────────────────── */ #theme-toggle, #wallet-lock-btn { background: none; border: none; cursor: pointer; padding: .2rem; color: var(--dh-text); transition: opacity .15s; line-height: 0; } #theme-toggle { opacity: .5; margin-right: .35rem; } #wallet-lock-btn { opacity: .35; } #theme-toggle:hover, #wallet-lock-btn:hover { opacity: 1; } #theme-toggle:focus-visible, #wallet-lock-btn:focus-visible { outline: 2px solid var(--dh-accent); outline-offset: 3px; border-radius: 4px; opacity: 1; } #wallet-lock-btn:disabled { opacity: .2; cursor: not-allowed; } #theme-toggle svg { width: 1.25rem; height: 1.25rem; display: block; pointer-events: none; } #wallet-lock-btn svg { width: 1.5rem; height: 1.5rem; display: block; pointer-events: none; } /* Default theme shows moon; dark shows sun. */ #theme-toggle .icon-sun { display: none; } #theme-toggle .icon-moon { display: block; } [data-theme="dark"] #theme-toggle .icon-sun { display: block; } [data-theme="dark"] #theme-toggle .icon-moon { display: none; } /* Wallet icon swap is handled by each dashboard's main.js setting inline * style.display on #wallet-icon-locked / #wallet-icon-unlocked. The * unlocked icon ships with inline style="display:none" from the shared * SVG so it stays hidden until JS reveals it — a class-based CSS swap * would lose to the inline style by specificity. */