/* ========================================================================== BFF App Framework -- shared design tokens + navbar ========================================================================== Every product loads this stylesheet ahead of its own styles.css and sets `data-theme="light"` / `data-theme="dark"` on to force a theme. Leaving the attribute off falls back to the visitor's OS preference via the prefers-color-scheme block below -- see UserSettingsView / the `theme` context processor for how the attribute gets set. ========================================================================== */ :root { /* Light palette (default) -- modeled on data-utopia-core */ --bg: #f7f8fa; --surface: #ffffff; --border: #e2e5ea; --accent: #0d6efd; --accent2: #6610f2; --green: #157347; --yellow: #a1670a; --red: #b02a37; --muted: #6c757d; --text: #1a1a2e; --subtext: #495057; --radius: 10px; --gap: 18px; } [data-theme="dark"] { /* Dark palette -- modeled on agentarium */ --bg: #0d0f14; --surface: #151820; --border: #232738; --accent: #4f8ef7; --accent2: #a78bfa; --green: #34d399; --yellow: #fbbf24; --red: #f87171; --muted: #6b7280; --text: #e2e8f0; --subtext: #94a3b8; } @media (prefers-color-scheme: dark) { /* No explicit choice (no cookie, no saved account preference) -- follow the browser. Higher specificity than the plain `:root` light rule above, so it wins whenever it applies; an explicit data-theme="light" is excluded so a signed-in user's choice always wins over the OS. */ :root:not([data-theme="light"]) { --bg: #0d0f14; --surface: #151820; --border: #232738; --accent: #4f8ef7; --accent2: #a78bfa; --green: #34d399; --yellow: #fbbf24; --red: #f87171; --muted: #6b7280; --text: #e2e8f0; --subtext: #94a3b8; } } /* Navbar chrome intentionally does NOT follow the light/dark toggle -- every product's navbar was a dark bar (Bootstrap `navbar-dark bg-dark`, or agentarium's already-dark surface) regardless of the page's own theme before this shared component existed, and tying it to --surface made light-theme navbars turn white, which read as a regression rather than an improvement. Fixed to the dark palette's surface/border/text/accent values so agentarium (already dark) is visually unchanged and the other three products get their original dark bar back. */ :root { --nav-bg: #151820; --nav-border: #232738; --nav-text: #e2e8f0; --nav-muted: #6b7280; --nav-accent: #4f8ef7; } /* ── Bootstrap 5.3 theming bridge ──────────────────────────────── Bootstrap-based products (personal-assistant, data-utopia-core, trading-v2) get full dark-mode component coverage (.card, .table, .form-control, .alert, .dropdown-menu, .modal, .btn-primary, ...) for free by setting data-bs-theme, rather than hand-overriding every Bootstrap component class here. Set data-bs-theme via {% include "bff_app_framework/theme_init.html" %} in -- it resolves the same explicit choice / prefers-color-scheme fallback used for data-theme above (Bootstrap has no native "auto" mode, so this needs a resolved value, not just the attribute presence). */ [data-bs-theme="dark"] { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--subtext); --bs-border-color: var(--border); --bs-secondary-bg: var(--surface); --bs-tertiary-bg: var(--surface); --bs-primary: var(--accent); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent); } [data-bs-theme="light"] { --bs-primary: var(--accent); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent); } *, *::before, *::after { box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: background 0.15s ease, color 0.15s ease; } a { color: var(--accent); } /* ── Top Navigation ───────────────────────────────────────────── */ .bff-topnav { background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); padding: 0 24px; display: flex; align-items: center; gap: 0; height: 56px; position: sticky; top: 0; z-index: 100; } .bff-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 28px; flex-shrink: 0; } .bff-nav-logo { width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.5px; } .bff-nav-brand-name { font-size: 15px; font-weight: 700; color: var(--nav-text); letter-spacing: -0.2px; } .bff-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: wrap; } .bff-nav-link { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--nav-muted); text-decoration: none; border-radius: 6px; transition: color 0.15s, background 0.15s; white-space: nowrap; } .bff-nav-link:hover { color: var(--nav-text); background: var(--nav-border); } .bff-nav-link.active { color: var(--nav-accent); background: rgba(79, 142, 247, 0.1); } .bff-nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* ── User dropdown ────────────────────────────────────────────── */ .bff-user-menu { position: relative; } .bff-user-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--nav-muted); font-size: 13px; font-family: inherit; cursor: pointer; padding: 6px 10px; border-radius: 6px; } .bff-user-toggle:hover { color: var(--nav-text); background: var(--nav-border); } .bff-user-caret { border: solid currentColor; border-width: 0 1.5px 1.5px 0; display: inline-block; padding: 3px; transform: rotate(45deg); transition: transform 0.15s; } .bff-user-menu.open .bff-user-caret { transform: rotate(-135deg); } .bff-user-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: var(--nav-bg); border: 1px solid var(--nav-border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); padding: 6px; z-index: 200; } .bff-user-menu.open .bff-user-dropdown { display: block; } .bff-user-dropdown-item { display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: 13px; color: var(--nav-text); text-decoration: none; border-radius: 6px; border: none; background: none; font-family: inherit; cursor: pointer; } .bff-user-dropdown-item:hover { background: var(--nav-border); } /* ── Buttons / cards / forms (shared component vocabulary) ──────── */ .bff-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; border-radius: 7px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; background: none; color: var(--text); } .bff-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .bff-btn-primary:hover { filter: brightness(0.9); } .bff-btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .bff-btn-secondary:hover { background: var(--border); } .bff-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .bff-alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; border: 1px solid; margin-bottom: 12px; } .bff-alert-success { background: rgba(52, 211, 153, 0.12); color: var(--green); border-color: var(--green); } .bff-alert-danger, .bff-alert-error { background: rgba(248, 113, 113, 0.12); color: var(--red); border-color: var(--red); } .bff-alert-info { background: rgba(79, 142, 247, 0.12); color: var(--accent); border-color: var(--accent); } .bff-alert-warning { background: rgba(251, 191, 36, 0.12); color: var(--yellow); border-color: var(--yellow); } /* ── Theme picker (User Settings page) ───────────────────────────── */ .bff-theme-options { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0; } .bff-theme-option { border: 2px solid var(--border); border-radius: var(--radius); padding: 14px; width: 160px; cursor: pointer; background: var(--surface); } .bff-theme-option.selected { border-color: var(--accent); } .bff-theme-option input { margin-right: 8px; } .bff-theme-swatch { height: 48px; border-radius: 6px; margin-bottom: 10px; border: 1px solid var(--border); } .bff-theme-swatch.light { background: linear-gradient(135deg, #f7f8fa, #ffffff); } .bff-theme-swatch.dark { background: linear-gradient(135deg, #0d0f14, #151820); } .bff-theme-swatch.system { background: linear-gradient(135deg, #f7f8fa 50%, #0d0f14 50%); }