/* ============================================================================= * OpenVue — base.css * ============================================================================= * * Foundation styles for the OpenVue web dashboard. * Contains CSS custom properties (design tokens), reset/normalize rules, * typography scale, the dark/light theme system, utility classes, and * shared layout primitives used by every other stylesheet. * * Theme switching * --------------- * The default theme is **dark**. Adding `data-theme="light"` to the * element activates the light overrides defined at the bottom of * the custom-property block. JavaScript toggles this attribute; no * extra stylesheet is needed. * * File load order (in ): * 1. base.css <- this file * 2. components.css * 3. player.css (viewer page only) * 4. dashboard.css (dashboard + admin pages) * 5. login.css (login page only) * * License: MIT * ========================================================================== */ /* ============================================================================= * 1. CSS Custom Properties — Design Tokens * ============================================================================= * All colours, spacing, radii, shadows, and timing values live here so that * every component file can reference them without hard-coding values. * -------------------------------------------------------------------------- */ :root { /* -- Colour palette: Dark theme (default) ------------------------------ */ /* Background hierarchy — darkest to lightest */ --bg-primary: #0a0a0f; /* Page / app background */ --bg-secondary: #12121a; /* Cards, elevated surfaces */ --bg-tertiary: #1a1a2e; /* Subtle contrast areas (e.g. sidebar) */ --bg-card: #16162a; /* Discrete card background */ --bg-hover: #1e1e3a; /* Hovered interactive surface */ --bg-active: #252548; /* Active / pressed interactive surface */ /* Borders */ --border: #2a2a4a; /* Default border colour */ --border-light: #35355a; /* Lighter border for subtle dividers */ /* Text hierarchy */ --text-primary: #e8e8f0; /* Main body / heading text */ --text-secondary: #9898b8; /* Supporting / label text */ --text-muted: #686888; /* Disabled / placeholder text */ /* Accent */ --accent: #6366f1; /* Primary interactive colour (indigo) */ --accent-hover: #818cf8; /* Accent on hover / focus */ --accent-glow: rgba(99, 102, 241, 0.25); /* Subtle glow behind accent elements */ /* Semantic / status colours */ --green: #34d399; /* Success, normal recordings */ --yellow: #fbbf24; /* Warning, parking-mode recordings */ --red: #f87171; /* Error / danger, event recordings */ --orange: #fb923c; /* Caution, impact recordings */ --purple: #a78bfa; /* Informational, miscellaneous badges */ /* -- Layout ------------------------------------------------------------ */ --sidebar-width: 340px; /* Default sidebar width (viewer page) */ --topnav-height: 40px; /* Fixed top navigation bar height */ --radius: 8px; /* Default border-radius */ --radius-sm: 4px; /* Smaller radius for chips / badges */ --radius-lg: 12px; /* Larger radius for modals / cards */ /* -- Spacing scale (based on 4 px grid) -------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* -- Typography -------------------------------------------------------- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; --font-size-xs: 0.6875rem; /* 11 px */ --font-size-sm: 0.75rem; /* 12 px */ --font-size-base: 0.8125rem; /* 13 px — compact dashboard density */ --font-size-md: 0.875rem; /* 14 px */ --font-size-lg: 1rem; /* 16 px */ --font-size-xl: 1.25rem; /* 20 px */ --font-size-2xl: 1.5rem; /* 24 px */ --line-height: 1.5; --line-height-tight: 1.25; /* -- Shadows ----------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px var(--accent-glow); /* -- Transitions ------------------------------------------------------- */ --transition-fast: 100ms ease; --transition: 150ms ease; --transition-slow: 300ms ease; /* -- Z-index scale ----------------------------------------------------- */ --z-base: 1; --z-sidebar: 100; --z-topnav: 200; --z-overlay: 500; --z-modal: 600; --z-pip: 700; --z-tooltip: 800; --z-toast: 900; } /* -- Light theme overrides ------------------------------------------------- */ /* Activated by setting data-theme="light" on . */ [data-theme="light"] { --bg-primary: #f5f5f8; --bg-secondary: #ffffff; --bg-tertiary: #eeeef2; --bg-card: #ffffff; --bg-hover: #e8e8f0; --bg-active: #dddde8; --border: #d0d0dc; --border-light: #e0e0ea; --text-primary: #1a1a2e; --text-secondary: #555570; --text-muted: #8888a0; --accent: #5558e6; --accent-hover: #6366f1; --accent-glow: rgba(85, 88, 230, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); } /* ============================================================================= * 2. CSS Reset / Normalize * ============================================================================= * A minimal, modern reset that strips browser defaults while preserving * accessibility (focus outlines, reduced-motion preferences, etc.). * -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Smooth scrolling — but respect users who prefer reduced motion */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Base body styles */ body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; /* App shell handles its own scrolling */ height: 100vh; } /* Remove default list styles */ ul, ol { list-style: none; } /* Images and media — responsive by default */ img, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Anchor reset — styled per-component */ a { color: inherit; text-decoration: none; } /* Button / input reset */ button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; } button { cursor: pointer; } /* Remove native input spinners */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } /* Table reset */ table { border-collapse: collapse; border-spacing: 0; width: 100%; } /* ============================================================================= * 3. Typography * ============================================================================= * Heading scale, body text, code blocks, and helper classes. * -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: var(--line-height-tight); color: var(--text-primary); } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-md); } h5 { font-size: var(--font-size-base);} h6 { font-size: var(--font-size-sm); } p { margin-bottom: var(--space-sm); color: var(--text-secondary); } small, .text-sm { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } /* Monospace / code */ code, pre, .mono { font-family: var(--font-mono); } code { font-size: 0.9em; padding: 2px 6px; background: var(--bg-tertiary); border-radius: var(--radius-sm); color: var(--accent-hover); } pre { padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; } pre code { padding: 0; background: none; } /* Truncate single-line text with ellipsis */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================================= * 4. Custom Scrollbars * ============================================================================= * Thin, themed scrollbars that blend with the dark UI. Falls back to native * scrollbars on browsers that don't support these properties. * -------------------------------------------------------------------------- */ /* Webkit (Chrome, Edge, Safari) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-light); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* ============================================================================= * 5. App Shell Layout * ============================================================================= * The top-level layout used by base.html: * * *

-- fills remaining viewport height * ... page content ... *

* * Individual pages (dashboard, viewer, admin) define their own layouts * inside .app-container. * -------------------------------------------------------------------------- */ /* -- Top navigation bar ---------------------------------------------------- */ /* Fixed at the top of the viewport, 40px tall, with left/right sections. */ .topnav { position: fixed; top: 0; left: 0; right: 0; height: var(--topnav-height); background: var(--bg-secondary); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-md); z-index: var(--z-topnav); } /* Left section of the topnav — contains the brand link */ .topnav-left { display: flex; align-items: center; gap: var(--space-sm); } /* Brand link: icon + "OpenVue" text, used inside .topnav-left */ .topnav-brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; font-size: var(--font-size-md); color: var(--text-primary); } .topnav-brand svg, .topnav-brand img { width: 20px; height: 20px; } /* Right section of the topnav — user info, buttons, etc. */ /* Populated dynamically by app.js based on authentication state. */ .topnav-right { display: flex; align-items: center; gap: var(--space-md); font-size: var(--font-size-sm); color: var(--text-secondary); } /* -- App container --------------------------------------------------------- */ /* Fills the viewport below the fixed topnav. Child pages use this as their */ /* top-level layout container (flex row for viewer, block for dashboard, etc). */ .app-container { display: flex; height: calc(100vh - var(--topnav-height)); margin-top: var(--topnav-height); overflow: hidden; } /* ============================================================================= * 6. Focus & Accessibility * ============================================================================= * Visible focus indicators for keyboard navigation. These use the accent * colour so they integrate with the theme. * -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Remove focus outline for mouse users (only show for keyboard nav) */ :focus:not(:focus-visible) { outline: none; } /* Screen-reader only utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================= * 7. Utility Classes * ============================================================================= * Small, single-purpose helpers used across multiple components. * -------------------------------------------------------------------------- */ /* -- Display --------------------------------------------------------------- */ .hidden { display: none !important; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between{ display: flex; align-items: center; justify-content: space-between; } .flex-1 { flex: 1; min-width: 0; } .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } /* -- Spacing --------------------------------------------------------------- */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } /* -- Overflow -------------------------------------------------------------- */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } /* -- Positioning ----------------------------------------------------------- */ .relative { position: relative; } .absolute { position: absolute; } /* -- Cursor ---------------------------------------------------------------- */ .pointer { cursor: pointer; } .no-select { user-select: none; -webkit-user-select: none; } /* ============================================================================= * 8. Loading Spinner * ============================================================================= * A re-usable CSS-only spinner. Place

anywhere * a loading state is needed. Size variants: .spinner-sm, .spinner-lg. * -------------------------------------------------------------------------- */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner-sm { width: 16px; height: 16px; border-width: 2px; } .spinner-lg { width: 40px; height: 40px; border-width: 3px; } /* ============================================================================= * 9. Animations / Keyframes * ============================================================================= * Shared animations reused across component files. * -------------------------------------------------------------------------- */ /* Fade in from transparent */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Slide up and fade in (for modals, toasts) */ @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Pulse — subtle attention indicator */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-fade-in { animation: fadeIn var(--transition-slow) ease forwards; } .animate-slide-up { animation: slideUp var(--transition-slow) ease forwards; } .animate-pulse { animation: pulse 2s ease-in-out infinite; }