/* Shared theme stylesheet. Linked from every page. Two themes — dark (default) and light — controlled by data-theme on . Tokens-only approach: swap the palette variables, components inherit automatically. No per-component theme overrides beyond this token block. */ /* ===== DARK THEME (default) ===== */ :root { color-scheme: dark; --bg: #09090b; --surface: #18181b; --surface-2: #27272a; --border: #27272a; --text: #fafafa; --muted: #a1a1aa; /* Interaction tokens */ --surface-hover: #2e2e35; --border-hover: #3f3f46; --shadow-lg: rgba(0,0,0,0.50); --disabled-bg: #1e1e22; --disabled-fg: #52525b; --placeholder: #6b7280; /* Semantic / status (same in both themes) */ --accent: #3b82f6; --green: #22c55e; --amber: #eab308; --red: #ef4444; /* Levee brand tokens */ --levee-navy: #0c1c2a; --levee-deep: #061018; --levee-cream: #f0ebde; --levee-teal: #c8eae4; --levee-accent: #3b82f6; --levee-accent-soft: #93c5fd; } /* ===== LIGHT THEME ===== */ html[data-theme="light"] { color-scheme: light; --bg: #f7f7f8; --surface: #ffffff; --surface-2: #f0f0f3; --border: #e4e4e8; --text: #18181b; --muted: #71717a; --surface-hover: #e8e8ea; --border-hover: #d1d1d5; --shadow-lg: rgba(0,0,0,0.10); --disabled-bg: #f4f4f5; --disabled-fg: #a1a1aa; --placeholder: #9ca3af; } /* ===== LEVEE WORDMARK ===== */ .levee-wordmark { display: inline-block; position: relative; font-family: 'Saira', 'Arial Black', sans-serif; font-weight: 900; font-style: italic; letter-spacing: -0.035em; line-height: 0.85; color: var(--levee-navy); user-select: none; --levee-wm-bg: var(--levee-cream); } .levee-wordmark::before { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 8.5%; background: var(--levee-wm-bg); transform: skewX(-13deg); pointer-events: none; } .levee-wordmark--on-dark { color: var(--text); --levee-wm-bg: var(--surface); } .levee-wordmark--on-cream { color: var(--levee-navy); --levee-wm-bg: var(--levee-cream); } .levee-wordmark--on-white { color: var(--levee-navy); --levee-wm-bg: #ffffff; } .levee-wordmark--small::before { display: none; } @media (max-width: 480px) { .levee-wordmark::before { display: none; } } /* On light theme, adapt the "on-dark" wordmark used in sidebar */ html[data-theme="light"] .levee-wordmark--on-dark { color: var(--levee-navy); --levee-wm-bg: var(--surface); } /* Brand lockup */ .levee-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; line-height: 1; } .levee-lockup img, .levee-lockup svg { flex-shrink: 0; display: block; } /* ===== BASE ===== */ body { background: var(--bg) !important; color: var(--text) !important; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } h1, h2, h3 { color: var(--text) !important; } a { color: var(--accent) !important; } a:hover { color: #60a5fa !important; } /* Generic surfaces */ .wrap { color: var(--text); } .sub, .muted { color: var(--muted) !important; } .card, .auth-wrap { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; } .card h2 { color: var(--text) !important; } .card .desc, .card .muted { color: var(--muted) !important; } .section { background: var(--surface) !important; border: 1px solid var(--border) !important; } /* Inputs */ input, select, textarea { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } input::placeholder, textarea::placeholder { color: var(--placeholder) !important; } input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important; outline: none !important; } label { color: var(--muted) !important; } /* Status / pills / banners */ .error { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.3) !important; color: var(--red) !important; } .ok { color: var(--green) !important; } .danger { color: var(--red) !important; } .warn { color: var(--amber) !important; } .tag { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } .tag.danger { background: rgba(239,68,68,0.15) !important; color: var(--red) !important; border-color: rgba(239,68,68,0.3) !important; } .tag.ok { background: rgba(34,197,94,0.15) !important; color: var(--green) !important; border-color: rgba(34,197,94,0.3) !important; } .recipient-pill { background: rgba(59,130,246,0.15) !important; color: var(--accent) !important; } .banner.ok { background: rgba(34,197,94,0.1) !important; color: var(--green) !important; border-color: rgba(34,197,94,0.3) !important; } .banner.err { background: rgba(239,68,68,0.1) !important; color: var(--red) !important; border-color: rgba(239,68,68,0.3) !important; } /* Auth pages */ .auth-wrap { background: var(--surface) !important; border: 1px solid var(--border) !important; } .alt { color: var(--muted) !important; } /* Connections page */ .status.ok { background: rgba(34,197,94,0.15) !important; color: var(--green) !important; border-color: rgba(34,197,94,0.3) !important; } .status.no { background: rgba(239,68,68,0.15) !important; color: var(--red) !important; border-color: rgba(239,68,68,0.3) !important; } .help { color: var(--muted) !important; } .help a { color: var(--accent) !important; } /* Triage: item rows + user-suggest dropdown */ .item-row { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } .item-row .key { color: var(--accent) !important; } .item-row .key a { color: var(--accent) !important; } .user-suggest { background: var(--surface-2) !important; border-color: var(--border) !important; box-shadow: 0 4px 16px var(--shadow-lg) !important; } .user-suggest .user-row:hover { background: var(--surface) !important; } .user-suggest .user-row .handle { color: var(--muted) !important; } .reply-text { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Topbar nav */ .topbar form button { color: var(--accent) !important; } nav a, .topbar a { color: var(--accent) !important; } /* ===== BUTTON PALETTE ===== */ button { color: inherit; } /* Default: quiet outline */ .btn { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; font-weight: 500 !important; box-shadow: none !important; } .btn:hover:not(:disabled) { background: var(--surface-hover) !important; border-color: var(--border-hover) !important; } /* Primary actions */ #btn-generate, .btn-suggest, .btn-suggest-slack, #btn-send-all { background: rgba(59,130,246,0.12) !important; color: #93c5fd !important; border: 1px solid rgba(59,130,246,0.35) !important; } #btn-generate:hover, .btn-suggest:hover, .btn-suggest-slack:hover, #btn-send-all:hover { background: rgba(59,130,246,0.22) !important; border-color: rgba(59,130,246,0.6) !important; color: #bfdbfe !important; } /* Send / Post */ .btn-send, .btn-post, .btn-send-slack { background: rgba(34,197,94,0.10) !important; color: #86efac !important; border: 1px solid rgba(34,197,94,0.30) !important; } .btn-send:hover:not(:disabled), .btn-post:hover:not(:disabled), .btn-send-slack:hover:not(:disabled) { background: rgba(34,197,94,0.20) !important; border-color: rgba(34,197,94,0.55) !important; color: #bbf7d0 !important; } /* Destructive */ button.danger, .btn.danger, .btn-secondary.danger, button[type="submit"].danger { background: rgba(239,68,68,0.10) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,0.30) !important; } button.danger:hover, .btn.danger:hover, .btn-secondary.danger:hover { background: rgba(239,68,68,0.20) !important; border-color: rgba(239,68,68,0.55) !important; color: #fecaca !important; } /* Refresh / section buttons with inline styling */ button#btn-refresh, button[onclick*="openTriageSection"], button[onclick*="refreshDashboard"] { background: var(--surface-2) !important; color: #93c5fd !important; border: 1px solid rgba(59,130,246,0.30) !important; font-weight: 500 !important; } button#btn-refresh:hover, button[onclick*="openTriageSection"]:hover, button[onclick*="refreshDashboard"]:hover { background: rgba(59,130,246,0.15) !important; border-color: rgba(59,130,246,0.55) !important; color: #bfdbfe !important; } /* Topbar Sign-out stays link-styled */ .topbar form button, form[action="/logout"] button { background: transparent !important; border: 0 !important; color: var(--accent) !important; padding: 0 !important; font: inherit !important; } .topbar form button:hover { color: #60a5fa !important; } /* Disabled */ .btn:disabled, button:disabled { background: var(--disabled-bg) !important; color: var(--disabled-fg) !important; border-color: var(--border) !important; cursor: not-allowed !important; } /* Connections page Remove pill */ button.secondary { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } button.secondary.danger { color: #fca5a5 !important; border-color: rgba(239,68,68,0.3) !important; background: rgba(239,68,68,0.08) !important; } /* Show-all / outline buttons in Slack tab */ .btn-show-all { background: var(--surface-2) !important; color: #93c5fd !important; border: 1px solid rgba(59,130,246,0.25) !important; } .btn-show-all:hover { background: rgba(59,130,246,0.15) !important; } /* Recipient pill × */ .recipient-pill .x { color: var(--muted) !important; } .recipient-pill .x:hover { color: #fca5a5 !important; } /* ===== APP SHELL + RAIL-MODE SIDEBAR ===== */ /* Sidebar is always visible. Two states driven by : - expanded (no class): 240px wide, icons + labels - collapsed: 60px rail, icons only; click anywhere on the rail to expand. State persisted in localStorage. See /sidebar.js. */ /* CSS variables let other rules reference the current sidebar width (e.g. main-pane padding-left). They flip when .sidebar-collapsed is set. */ :root { --sidebar-w: 240px; --sidebar-w-collapsed: 60px; } body { margin: 0; } .app-shell { display: flex; align-items: stretch; min-height: 100vh; } /* --- Sidebar shell --- */ .sidebar { flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); height: 100vh; position: sticky; top: 0; background: var(--surface) !important; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 14px 0 18px; overflow-x: hidden; overflow-y: auto; transition: flex-basis .18s cubic-bezier(.4, 0, .2, 1), width .18s cubic-bezier(.4, 0, .2, 1); z-index: 30; } body.sidebar-collapsed .sidebar { flex-basis: var(--sidebar-w-collapsed); width: var(--sidebar-w-collapsed); cursor: pointer; /* click the rail to expand */ } /* --- Brand row (logo + collapse toggle) --- */ .sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 14px; border-bottom: 1px solid var(--border); margin-bottom: 10px; min-height: 38px; } .sidebar-brand a.levee-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--text) !important; font-weight: 500; letter-spacing: -0.015em; font-size: 18px; min-width: 0; } .sidebar-brand a.levee-lockup:hover { color: var(--accent) !important; } /* --- Collapse / expand toggle button (chevron) --- */ .sidebar-toggle { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; color: var(--muted) !important; border: 1px solid transparent !important; border-radius: 6px !important; cursor: pointer; padding: 0 !important; transition: background .12s, color .12s, border-color .12s; } .sidebar-toggle:hover { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; } .sidebar-toggle svg { width: 16px; height: 16px; } .sidebar-toggle .sidebar-toggle-collapse, .sidebar-toggle .sidebar-toggle-expand { display: inline-flex; align-items: center; justify-content: center; } .sidebar-toggle .sidebar-toggle-expand { display: none; } body.sidebar-collapsed .sidebar-toggle .sidebar-toggle-collapse { display: none; } body.sidebar-collapsed .sidebar-toggle .sidebar-toggle-expand { display: inline-flex; } /* --- Nav lists --- */ .sidebar-nav, .sidebar-footer { display: flex; flex-direction: column; padding: 4px 8px; } .sidebar-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .sidebar-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 8px 10px 4px; } .sidebar-link { display: flex !important; align-items: center; gap: 10px; padding: 9px 12px !important; margin: 1px 0; border-radius: 6px !important; background: transparent !important; border: 0 !important; text-align: left; cursor: pointer; color: var(--muted) !important; font: inherit !important; text-decoration: none !important; font-weight: 500 !important; box-shadow: none !important; width: 100%; white-space: nowrap; overflow: hidden; transition: background 0.12s, color 0.12s; } .sidebar-link:hover { background: var(--surface-2) !important; color: var(--text) !important; } .sidebar-link.active { background: rgba(59, 130, 246, 0.12) !important; color: #bfdbfe !important; } .sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; } .sidebar-link.active svg { opacity: 1; } .sidebar-footer form { display: block; margin: 0; padding: 0; } .sidebar-footer form button.sidebar-link { width: 100%; } html[data-theme="light"] .sidebar-link.active { color: #1d4ed8 !important; background: rgba(59, 130, 246, 0.10) !important; } /* --- Collapsed (rail) state: hide all labels, center icons --- */ body.sidebar-collapsed .sidebar-link-label { display: none; } body.sidebar-collapsed .sidebar-section-label { display: none; } body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0 8px 14px; } body.sidebar-collapsed .sidebar-brand a.levee-lockup .sidebar-link-label { display: none; } body.sidebar-collapsed .sidebar-toggle { display: none; } body.sidebar-collapsed .sidebar-link { justify-content: center; padding: 10px 0 !important; } body.sidebar-collapsed .sidebar-nav, body.sidebar-collapsed .sidebar-footer { padding: 4px 6px; } /* --- Main pane --- */ .main-pane { flex: 1; min-width: 0; background: var(--bg); } .main-pane > .wrap { padding: 18px 28px 60px; } /* --- Mobile: same rail-mode push layout, narrower defaults --- */ @media (max-width: 820px) { :root { --sidebar-w: 220px; --sidebar-w-collapsed: 56px; } .main-pane > .wrap { padding: 14px 16px 40px; } }