/* ================================================================ QuickHive — Preview theme Applied only when is set. Design goals: - Editorial / instrumentation feel (IBM Plex Sans + Mono) - Warm off-white light mode (not tan) - Amber accent color, retained from classic identity - Dark mode via prefers-color-scheme Structure: - Light-mode tokens declared under [data-theme="preview"] - Dark-mode tokens override under a prefers-color-scheme media query - Everything else uses var(--qh-*) so styles cascade - Bootstrap variables (--bs-*) are overridden so BS components adopt automatically ================================================================ */ /* ---------- LIGHT MODE TOKENS (default) ---------- */ [data-theme="preview"] { /* Custom design tokens */ --qh-bg: #FAF8F3; --qh-card: #FFFFFF; --qh-card-hover: #F5F2E9; --qh-ink: #1A1815; --qh-ink-mute: #6B6558; --qh-rule: #E8E3D5; --qh-rule-strong: #C7BFA8; --qh-amber: #B87014; --qh-amber-hover: #9C5F11; --qh-amber-glow: rgba(184, 112, 20, 0.15); --qh-red: #A03818; --qh-green: #2F6624; --qh-blue: #2C4A73; --qh-shadow: 0 1px 3px rgba(23, 20, 15, 0.05), 0 4px 12px rgba(23, 20, 15, 0.08); --qh-shadow-strong: 0 2px 4px rgba(23, 20, 15, 0.06), 0 8px 20px rgba(23, 20, 15, 0.10); /* Sidebar tokens — flip PROPERLY per mode. In light mode: warm off-white sidebar with dark text (matches page instead of clashing). In dark mode: even-darker sidebar for depth. */ --qh-sidebar-bg: #F0EBDD; --qh-sidebar-ink: #4A4438; --qh-sidebar-ink-active: #1A1815; /* Bootstrap variable overrides — most BS components inherit these automatically */ --bs-body-bg: var(--qh-bg); --bs-body-color: var(--qh-ink); --bs-primary: var(--qh-amber); --bs-primary-rgb: 184, 112, 20; --bs-border-color: var(--qh-rule); --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; } /* ---------- DARK MODE TOKENS ---------- */ /* Dark mode is triggered by data-color-mode="dark" on . If data-color-mode is not set, we fall back to prefers-color-scheme for the OS default. */ [data-theme="preview"][data-color-mode="dark"] { --qh-bg: #0F1210; --qh-card: #1D2119; --qh-card-hover: #262A22; --qh-ink: #F1EBD9; --qh-ink-mute: #A69F8A; --qh-rule: #2D322A; --qh-rule-strong: #4A5040; --qh-amber: #E0A02F; --qh-amber-hover: #F5B346; --qh-amber-glow: rgba(224, 160, 47, 0.35); --qh-red: #D45528; --qh-green: #7BAE68; --qh-blue: #7AA1D4; --qh-shadow: inset 0 1px 0 rgba(255, 246, 224, 0.04), 0 4px 12px rgba(0, 0, 0, 0.5); --qh-shadow-strong: inset 0 1px 0 rgba(255, 246, 224, 0.06), 0 6px 20px rgba(0, 0, 0, 0.6); --qh-sidebar-bg: #08090A; --qh-sidebar-ink: rgba(241, 235, 217, 0.75); --qh-sidebar-ink-active: #F1EBD9; } /* OS-default dark: only applied when the user hasn't picked light or dark explicitly. */ @media (prefers-color-scheme: dark) { [data-theme="preview"]:not([data-color-mode="light"]):not([data-color-mode="dark"]) { --qh-bg: #0F1210; --qh-card: #1D2119; --qh-card-hover: #262A22; --qh-ink: #F1EBD9; --qh-ink-mute: #A69F8A; --qh-rule: #2D322A; --qh-rule-strong: #4A5040; --qh-amber: #E0A02F; --qh-amber-hover: #F5B346; --qh-amber-glow: rgba(224, 160, 47, 0.35); --qh-red: #D45528; --qh-green: #7BAE68; --qh-blue: #7AA1D4; --qh-shadow: inset 0 1px 0 rgba(255, 246, 224, 0.04), 0 4px 12px rgba(0, 0, 0, 0.5); --qh-shadow-strong: inset 0 1px 0 rgba(255, 246, 224, 0.06), 0 6px 20px rgba(0, 0, 0, 0.6); --qh-sidebar-bg: #08090A; --qh-sidebar-ink: rgba(241, 235, 217, 0.75); --qh-sidebar-ink-active: #F1EBD9; } } /* ================================================================ TYPOGRAPHY & BASE ================================================================ */ [data-theme="preview"] body { background: var(--qh-bg); color: var(--qh-ink); font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; } [data-theme="preview"] h1, [data-theme="preview"] h2, [data-theme="preview"] h3, [data-theme="preview"] h4, [data-theme="preview"] h5, [data-theme="preview"] h6 { color: var(--qh-ink) !important; font-weight: 600; letter-spacing: -0.018em; } [data-theme="preview"] h1 { font-size: 28px; line-height: 1.15; } [data-theme="preview"] h2 { font-size: 20px; line-height: 1.2; } [data-theme="preview"] h3 { font-size: 17px; line-height: 1.25; } [data-theme="preview"] .text-muted, [data-theme="preview"] small.text-muted, [data-theme="preview"] .small.text-muted { color: var(--qh-ink-mute) !important; } [data-theme="preview"] a { color: var(--qh-amber); } [data-theme="preview"] a:hover { color: var(--qh-amber-hover); } [data-theme="preview"] code { font-family: 'IBM Plex Mono', monospace; color: var(--qh-ink); background: var(--qh-card-hover); padding: 1px 6px; border-radius: 3px; font-size: 0.9em; } /* Mono utility class for eyebrow labels, dates, IDs */ [data-theme="preview"] .qh-mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; font-weight: 500; color: var(--qh-ink-mute); } /* ================================================================ CARDS ================================================================ */ [data-theme="preview"] .card { background: var(--qh-card); border: 1px solid var(--qh-rule); border-radius: 12px; box-shadow: var(--qh-shadow); } [data-theme="preview"] .card-body { color: var(--qh-ink); } [data-theme="preview"] .card-title { color: var(--qh-ink); font-weight: 600; } [data-theme="preview"] .card.border-danger { border-color: var(--qh-red); } [data-theme="preview"] .card.border-warning { border-color: var(--qh-amber); } /* ================================================================ BUTTONS ================================================================ */ [data-theme="preview"] .btn { border-radius: 8px; font-weight: 500; letter-spacing: -0.005em; transition: background 0.12s, border-color 0.12s, transform 0.08s; } [data-theme="preview"] .btn:active { transform: translateY(1px); } [data-theme="preview"] .btn-primary { background: var(--qh-amber); border-color: var(--qh-amber); color: #FFFFFF; } [data-theme="preview"] .btn-primary:hover { background: var(--qh-amber-hover); border-color: var(--qh-amber-hover); } /* Outline buttons (Inspect / Feed / Treat / Harvest / Manage / etc.) — consistent thin 1px border with subtle depth so they read as clearly clickable. Applies to all outline variants across the app. */ [data-theme="preview"] [class*="btn-outline-"] { border-width: 1px !important; border-style: solid !important; background: var(--qh-card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } [data-theme="preview"] [class*="btn-outline-"]:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } [data-theme="preview"] .btn-outline-primary { border-color: var(--qh-amber); color: var(--qh-amber); background: transparent; } [data-theme="preview"] .btn-outline-primary:hover { background: var(--qh-amber); color: #FFFFFF; } [data-theme="preview"] .btn-outline-secondary { border-color: var(--qh-rule-strong); color: var(--qh-ink-mute); background: transparent; } [data-theme="preview"] .btn-outline-secondary:hover { background: var(--qh-card-hover); color: var(--qh-ink); border-color: var(--qh-rule-strong); } [data-theme="preview"] .btn-outline-success { border-color: var(--qh-green); color: var(--qh-green); font-weight: 600; } [data-theme="preview"] .btn-outline-success:hover { background: var(--qh-green); color: #FFFFFF; } [data-theme="preview"] .btn-outline-warning { border-color: var(--qh-amber); color: var(--qh-amber); } [data-theme="preview"] .btn-outline-warning:hover { background: var(--qh-amber); color: #FFFFFF; } [data-theme="preview"] .btn-outline-danger { border-color: var(--qh-red); color: var(--qh-red); } [data-theme="preview"] .btn-outline-danger:hover { background: var(--qh-red); color: #FFFFFF; } [data-theme="preview"] .btn-outline-dark { border-color: var(--qh-ink); color: var(--qh-ink); } [data-theme="preview"] .btn-outline-dark:hover { background: var(--qh-ink); color: var(--qh-bg); } [data-theme="preview"] .btn-outline-info { border-color: var(--qh-blue); color: var(--qh-blue); } [data-theme="preview"] .btn-outline-info:hover { background: var(--qh-blue); color: #FFFFFF; } [data-theme="preview"] .btn-success { background: var(--qh-green); border-color: var(--qh-green); color: #FFFFFF; } [data-theme="preview"] .btn-warning { background: var(--qh-amber); border-color: var(--qh-amber); color: #FFFFFF; } [data-theme="preview"] .btn-danger { background: var(--qh-red); border-color: var(--qh-red); color: #FFFFFF; } [data-theme="preview"] .btn-secondary { background: var(--qh-rule-strong); border-color: var(--qh-rule-strong); color: var(--qh-ink) !important; } /* ================================================================ FORMS ================================================================ */ [data-theme="preview"] .form-control, [data-theme="preview"] .form-select { background: var(--qh-card); border: 1px solid var(--qh-rule); color: var(--qh-ink); border-radius: 6px; font-family: inherit; } [data-theme="preview"] .form-control::placeholder { color: var(--qh-ink-mute); opacity: 0.7; } [data-theme="preview"] .form-control:focus, [data-theme="preview"] .form-select:focus { background: var(--qh-card); border-color: var(--qh-amber); box-shadow: 0 0 0 3px var(--qh-amber-glow); color: var(--qh-ink); } [data-theme="preview"] .form-label, [data-theme="preview"] label { color: var(--qh-ink); font-weight: 500; } [data-theme="preview"] .form-check-input:checked { background-color: var(--qh-amber); border-color: var(--qh-amber); } /* ================================================================ BADGES ================================================================ */ [data-theme="preview"] .badge { font-weight: 500; letter-spacing: 0.02em; border-radius: 999px; padding: 3px 10px; } [data-theme="preview"] .bg-success { background-color: var(--qh-green) !important; color: #FFFFFF; } [data-theme="preview"] .bg-warning { background-color: var(--qh-amber) !important; color: #FFFFFF; } [data-theme="preview"] .bg-danger { background-color: var(--qh-red) !important; color: #FFFFFF; } [data-theme="preview"] .bg-primary { background-color: var(--qh-amber) !important; color: #FFFFFF; } [data-theme="preview"] .bg-secondary { background-color: var(--qh-rule-strong) !important; color: var(--qh-ink); } [data-theme="preview"] .bg-dark { background-color: var(--qh-ink) !important; color: var(--qh-bg); } /* bg-info is used for the "Nuc" badge (with hardcoded text-dark). Use a soft tinted background with blue accent text so it stays readable in both modes. */ [data-theme="preview"] .badge.bg-info, [data-theme="preview"] .bg-info { background-color: color-mix(in srgb, var(--qh-blue) 22%, var(--qh-card)) !important; color: var(--qh-blue) !important; } /* ================================================================ ALERTS ================================================================ */ [data-theme="preview"] .alert { border-radius: 8px; border-width: 1px; } [data-theme="preview"] .alert-success { background: color-mix(in srgb, var(--qh-green) 12%, var(--qh-bg)); border-color: color-mix(in srgb, var(--qh-green) 30%, var(--qh-bg)); color: var(--qh-green); } [data-theme="preview"] .alert-warning { background: color-mix(in srgb, var(--qh-amber) 12%, var(--qh-bg)); border-color: color-mix(in srgb, var(--qh-amber) 30%, var(--qh-bg)); color: var(--qh-amber-hover); } [data-theme="preview"] .alert-danger { background: color-mix(in srgb, var(--qh-red) 12%, var(--qh-bg)); border-color: color-mix(in srgb, var(--qh-red) 30%, var(--qh-bg)); color: var(--qh-red); } [data-theme="preview"] .alert-info { background: color-mix(in srgb, var(--qh-blue) 12%, var(--qh-bg)); border-color: color-mix(in srgb, var(--qh-blue) 30%, var(--qh-bg)); color: var(--qh-blue); } /* ================================================================ TABLES ================================================================ */ [data-theme="preview"] .table { --bs-table-bg: transparent; color: var(--qh-ink); border-color: var(--qh-rule); } [data-theme="preview"] .table thead th { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qh-ink-mute); font-weight: 500; border-bottom: 1px solid var(--qh-rule-strong); } [data-theme="preview"] .table tbody tr { border-bottom: 1px solid var(--qh-rule); } [data-theme="preview"] .table tbody tr:hover { background: var(--qh-card-hover); } [data-theme="preview"] .table-secondary { background: var(--qh-card-hover); } /* ================================================================ NAV / SIDEBAR Recolor the existing sidebar structure — don't restructure yet. Uses --qh-sidebar-bg which stays dark in BOTH light and dark modes. ================================================================ */ [data-theme="preview"] .sidebar { background: var(--qh-sidebar-bg); } [data-theme="preview"] .sidebar .nav-item .nav-link { color: var(--qh-sidebar-ink) !important; letter-spacing: 0; } [data-theme="preview"] .sidebar .nav-item .nav-link:hover, [data-theme="preview"] .sidebar .nav-item .nav-link.active { background: rgba(224, 160, 47, 0.15) !important; color: var(--qh-sidebar-ink-active) !important; border-left: 3px solid var(--qh-amber); } /* Top navbar (desktop profile bar) — only the one inside main, not the sidebar's own top-row */ [data-theme="preview"] main .top-row { background: var(--qh-bg) !important; border-bottom: 1px solid var(--qh-rule); } /* The sidebar's own top-row (mobile hamburger area + brand) uses sidebar bg */ [data-theme="preview"] .sidebar .top-row { background: var(--qh-sidebar-bg) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } /* In LIGHT mode, the sidebar top-row is cream. Invert the default-white hamburger icon so it becomes dark and stays visible. In DARK mode the default white icon works as-is against the very dark sidebar bg. */ [data-theme="preview"][data-color-mode="light"] .navbar-toggler-icon, [data-theme="preview"]:not([data-color-mode]) .navbar-toggler-icon { filter: invert(1); } @media (prefers-color-scheme: light) { [data-theme="preview"]:not([data-color-mode="dark"]) .navbar-toggler-icon { filter: invert(1); } } [data-theme="preview"] .user-avatar { background: var(--qh-amber); } [data-theme="preview"] .user-name { color: var(--qh-ink); } [data-theme="preview"] .user-dropdown { background: var(--qh-card); border: 1px solid var(--qh-rule); box-shadow: var(--qh-shadow-strong); } [data-theme="preview"] .dropdown-header { background: var(--qh-card-hover); } [data-theme="preview"] .dropdown-email { color: var(--qh-ink); } [data-theme="preview"] .dropdown-org { color: var(--qh-ink-mute); } [data-theme="preview"] .dropdown-item { color: var(--qh-ink); } [data-theme="preview"] .dropdown-item:hover { background: var(--qh-card-hover); } [data-theme="preview"] .dropdown-divider { background: var(--qh-rule); } /* ================================================================ PAGE-LEVEL CONTAINERS (Profile, Tasks, etc.) Custom pages set their own backgrounds and text colors — override to blend. ================================================================ */ [data-theme="preview"] .profile-section, [data-theme="preview"] .task-panel, [data-theme="preview"] .add-form, [data-theme="preview"] .add-form-card, [data-theme="preview"] .task-list, [data-theme="preview"] .summary-tile, [data-theme="preview"] .auth-card, [data-theme="preview"] .batch-table { background: var(--qh-card) !important; border: 1px solid var(--qh-rule); border-radius: 12px; box-shadow: var(--qh-shadow); color: var(--qh-ink); } /* Task summary tiles — override hardcoded text colors */ [data-theme="preview"] .tile-number { color: var(--qh-ink); } [data-theme="preview"] .tile-label { color: var(--qh-ink-mute); } [data-theme="preview"] .summary-tile.past-due { background: color-mix(in srgb, var(--qh-red) 10%, var(--qh-card)); border-color: color-mix(in srgb, var(--qh-red) 30%, var(--qh-rule)); } [data-theme="preview"] .summary-tile.past-due .tile-number { color: var(--qh-red); } /* Profile page section headings and hardcoded text */ [data-theme="preview"] .profile-section h2, [data-theme="preview"] .profile-section h3 { color: var(--qh-ink); } [data-theme="preview"] .form-hint { color: var(--qh-ink-mute); } [data-theme="preview"] .theme-name { color: var(--qh-ink); } [data-theme="preview"] .theme-desc { color: var(--qh-ink-mute); } [data-theme="preview"] .theme-choice { border-color: var(--qh-rule); } [data-theme="preview"] .theme-choice.selected { border-color: var(--qh-amber); background: color-mix(in srgb, var(--qh-amber) 8%, var(--qh-card)); } /* TaskPanel text */ [data-theme="preview"] .panel-header h3 { color: var(--qh-ink); } [data-theme="preview"] .filter-row { color: var(--qh-ink-mute); } /* Tasks page filter bar */ [data-theme="preview"] .filter-bar { background: var(--qh-card); box-shadow: var(--qh-shadow); color: var(--qh-ink); } [data-theme="preview"] .filter-bar label { color: var(--qh-ink-mute); } /* NavMenu top row (mobile top bar with QuickHive logo) */ [data-theme="preview"] .top-row-nav, [data-theme="preview"] .navbar-brand, [data-theme="preview"] .navbar-toggler { color: var(--qh-sidebar-ink-active); } [data-theme="preview"] .info-row { border-bottom-color: var(--qh-rule); } [data-theme="preview"] .info-row .label { color: var(--qh-ink-mute); } [data-theme="preview"] .info-row .value { color: var(--qh-ink); } /* Task rows */ [data-theme="preview"] .task-row { border-bottom-color: var(--qh-rule); } [data-theme="preview"] .task-row.completed .task-title { color: var(--qh-ink-mute); } [data-theme="preview"] .task-title { color: var(--qh-ink); } [data-theme="preview"] .task-notes, [data-theme="preview"] .task-due { color: var(--qh-ink-mute); } [data-theme="preview"] .completion-notes { color: var(--qh-green); } [data-theme="preview"] .task-type-badge { background: var(--qh-card-hover); color: var(--qh-ink-mute); font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.04em; } /* Preview indicator pill — recolor to match new palette */ [data-theme="preview"] .preview-indicator { background: var(--qh-amber); color: #FFFFFF; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.14em; } /* Utility: link on qr code copy input */ [data-theme="preview"] .input-group .form-control { border-right: 0; } /* Auth pages */ [data-theme="preview"] .auth-container { background: var(--qh-bg); } [data-theme="preview"] .auth-card h1 { color: var(--qh-ink); } [data-theme="preview"] .auth-subtitle { color: var(--qh-ink-mute); } /* ================================================================ TEXT COLOR SAFETY NET Broad rules that catch pages using hardcoded #333 / #666 / etc. These use direct color values, not variables, so they apply the SAME way in both light and dark modes — forcing text to always use the theme's ink color regardless of what the page CSS says. ================================================================ */ [data-theme="preview"] .page, [data-theme="preview"] main, [data-theme="preview"] .content, [data-theme="preview"] article, [data-theme="preview"] .card-body, [data-theme="preview"] .card-body p, [data-theme="preview"] .card-body dl, [data-theme="preview"] .card-body dt, [data-theme="preview"] .card-body dd, [data-theme="preview"] .card-body span, [data-theme="preview"] .card-body div, [data-theme="preview"] .card-body strong, [data-theme="preview"] .card-body td, [data-theme="preview"] .card-body th { color: var(--qh-ink); } /* Anything explicitly muted with common muted-text classes */ [data-theme="preview"] .card-body .text-muted, [data-theme="preview"] .card-body small, [data-theme="preview"] .card-body .small { color: var(--qh-ink-mute) !important; } /* Common CSS hooks with hardcoded colors in page-scoped styles */ [data-theme="preview"] .task-body, [data-theme="preview"] .task-body span, [data-theme="preview"] .task-body div { color: inherit; } /* Labels EVERYWHERE — use !important because many pages have hardcoded #333 / #555 on .form-group label which is more specific than a plain [data-theme] label rule. */ [data-theme="preview"] label, [data-theme="preview"] .form-check-label, [data-theme="preview"] .form-label, [data-theme="preview"] .form-group label, [data-theme="preview"] .inline-field label, [data-theme="preview"] .filter-row label, [data-theme="preview"] .add-form-card label { color: var(--qh-ink) !important; } [data-theme="preview"] .form-group .hint, [data-theme="preview"] .add-form-card .hint { color: var(--qh-ink-mute) !important; } [data-theme="preview"] p { color: var(--qh-ink); } [data-theme="preview"] dt { color: var(--qh-ink-mute); } [data-theme="preview"] dd { color: var(--qh-ink); } [data-theme="preview"] strong { color: var(--qh-ink); } /* Yards page: table cells + inputs */ [data-theme="preview"] table td, [data-theme="preview"] table th { color: var(--qh-ink); } [data-theme="preview"] .batch-table th { color: var(--qh-ink-mute); } [data-theme="preview"] .batch-table td { border-bottom-color: var(--qh-rule); } /* Inline hive-creation mini-form on Grafting page — amber tint that stays visible in dark mode */ [data-theme="preview"] .inline-hive-form { background: color-mix(in srgb, var(--qh-amber) 10%, var(--qh-card)) !important; border-color: color-mix(in srgb, var(--qh-amber) 35%, var(--qh-rule)) !important; } [data-theme="preview"] .inline-field input, [data-theme="preview"] .inline-field select { background: var(--qh-card) !important; border-color: var(--qh-rule) !important; color: var(--qh-ink) !important; } [data-theme="preview"] .btn-add-inline { background: var(--qh-card); border-color: var(--qh-rule); color: var(--qh-ink-mute); } /* Grafting status badges */ [data-theme="preview"] .status-planning { background: var(--qh-card-hover); color: var(--qh-ink-mute); } [data-theme="preview"] .status-active { background: color-mix(in srgb, var(--qh-blue) 20%, var(--qh-card)); color: var(--qh-blue); } [data-theme="preview"] .status-complete { background: color-mix(in srgb, var(--qh-green) 20%, var(--qh-card)); color: var(--qh-green); } [data-theme="preview"] .status-failed { background: color-mix(in srgb, var(--qh-red) 20%, var(--qh-card)); color: var(--qh-red); } /* Scope badges on TaskPanel — make them theme-aware. Otherwise they use hardcoded #d1fae5 / #065f46 which look wrong against dark cards. */ [data-theme="preview"] .scope-badge.yard-scope { background: color-mix(in srgb, var(--qh-green) 22%, var(--qh-card)) !important; color: var(--qh-green) !important; } [data-theme="preview"] .scope-badge.hive-scope { background: color-mix(in srgb, var(--qh-blue) 22%, var(--qh-card)) !important; color: var(--qh-blue) !important; } /* Task-row checkbox — bigger for touch, with breathing room. */ [data-theme="preview"] .task-row input[type="checkbox"] { width: 20px !important; height: 20px !important; margin-top: 1px !important; margin-right: 8px; cursor: pointer; accent-color: var(--qh-amber); } [data-theme="preview"] .task-row { padding: 12px 6px !important; gap: 12px !important; } /* Grafting page background */ [data-theme="preview"] .grafting-container { color: var(--qh-ink); } [data-theme="preview"] .batch-link { color: var(--qh-amber); } [data-theme="preview"] .btn-view { background: var(--qh-card-hover); color: var(--qh-ink); }