/* * Brevvie Theme System * * All colors are defined as CSS custom properties using raw RGB values. * Tailwind references these via tailwind.config.js, so you get: * bg-primary, text-primary, border-primary, hover:bg-primary, etc. * * To change the entire app's look: swap the values below. * To support per-tenant theming: add [data-theme="bluerhino"] selectors. * * WHY RGB values without rgb()? Because Tailwind needs raw channel values * to support opacity modifiers like bg-primary/50. If we stored "rgb(249,208,39)" * Tailwind couldn't do bg-primary/50 → rgba(249,208,39,0.5). * * OPACITY CONTROL — use any root color with an alpha value: * rgb(var(--color-primary) / 0.5) → 50% opacity yellow * rgb(var(--color-background) / 0.8) → 80% opacity page bg * rgb(var(--color-border-strong) / 0.7) → same as rgba(156,163,175,0.7) * Works in any CSS property: background, border, box-shadow, color, etc. */ /* ============================================================ Default Theme (Brevvie) ============================================================ */ :root { /* Brand colors */ --color-primary: 249 208 39; /* #f9d027 — Brevvie yellow */ --color-primary-hover: 234 190 20; /* #eabe14 — darker yellow for hover */ --color-primary-active: 215 172 10; /* #d7ac0a */ --color-secondary: 79 81 81; /* #4f5151 — dark gray */ --color-accent: 59 130 246; /* #3b82f6 — blue-500 for links/actions */ /* Neutral palette */ --color-surface: 255 255 255; /* #ffffff — cards, modals */ --color-background: 242 242 242; /* #f2f2f2 — page background */ --color-border: 209 213 219; /* #d1d5db — gray-300 */ --color-border-strong: 107 114 128; /* #6b7280 — gray-500 */ /* Text */ --color-text: 55 65 81; /* #374151 — gray-700, body text */ --color-text-muted: 107 114 128; /* #6b7280 — gray-500, secondary text */ --color-text-faint: 156 163 175; /* #9ca3af — gray-400, placeholders */ --color-text-inverse: 255 255 255; /* #ffffff — on dark backgrounds */ /* Semantic */ --color-success: 34 197 94; /* #22c55e — green-500 */ --color-warning: 245 158 11; /* #f59e0b — amber-500 */ --color-danger: 239 68 68; /* #ef4444 — red-500 */ --color-info: 59 130 246; /* #3b82f6 — blue-500 */ /* Spacing & sizing */ --header-height: 4rem; --sidebar-width: 16rem; --footer-height: 2.5rem; --content-max-width: 80rem; /* Typography */ --font-sans: 'Inter', 'Lato', system-ui, -apple-system, sans-serif; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Border radius */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; } /* ============================================================ Per-Tenant Theme Overrides ============================================================ Apply via in layout.py based on session scope/company. ============================================================ */ [data-theme="propane"] { --color-primary: 37 99 235; /* #2563eb — blue-600 */ --color-primary-hover: 29 78 216; /* #1d4ed8 — blue-700 */ --color-primary-active: 30 64 175; /* #1e40af — blue-800 */ } /* ============================================================ Base Styles ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Safe area insets for iOS notch */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } body { background-color: rgb(var(--color-background)); color: rgb(var(--color-text)); min-height: 100dvh; } /* ============================================================ HTMX Component-Level Indicators ============================================================ Usage: place an element with class "htmx-indicator" next to or inside the HTMX trigger, then point to it with hx-indicator. HTMX adds .htmx-request to the indicator during the request. ============================================================ */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; } /* Inline spinner (used inside buttons, next to forms, etc.) */ .htmx-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; opacity: 0.8; } .htmx-spinner.sm { width: 1rem; height: 1rem; } .htmx-spinner.lg { width: 1.5rem; height: 1.5rem; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ Section Loading Overlay ============================================================ Shows a semi-transparent overlay with spinner when a dashboard section is re-fetching data (e.g. after Apply filter). HTMX adds .htmx-request to the element with hx-* attrs during the request. The overlay is a child of that element. ============================================================ */ .section-loading-overlay { display: none; position: absolute; inset: 0; z-index: 20; background: rgb(var(--color-border-strong) / 0.7); border-radius: var(--radius-xl); align-items: center; justify-content: center; } .htmx-request .section-loading-overlay { display: flex; } /* ============================================================ Scrollbar Styling ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(var(--color-border-strong)); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-text-muted)); }