/* ============================================================ OmniFlows — Dark Theme Overrides Applied when is active ============================================================ */ /* ── Smooth transitions ── */ html.dark body, html.dark .header, html.dark .header-glass, html.dark .sidebar, html.dark .glass-card, html.dark .response-card, html.dark .stat-card, html.dark .lifetime-chip, html.dark .table-wrap, html.dark .task-card, html.dark .plan-card, html.dark .modal-box, html.dark .wizard-card, html.dark .input-field, html.dark .search-box, html.dark nav { transition: background-color 0.25s, border-color 0.25s, color 0.25s; } /* ── CSS variable overrides for index.css (landing) ── */ html.dark { --bg: #1a1612; --bg-card: #221d17; --border: #2e2820; --text-primary: #ede8e0; --text-secondary: #9a8470; --text-muted: #6b5d4f; --input-bg: #1e1914; --bg-deep: #1a1612; } /* ── Base body ── */ html.dark body { background: #1a1612 !important; color: #ede8e0 !important; } /* ── Service page: CSS variable override ── */ html.dark, html.dark:root { --background: 24 15% 9%; --foreground: 36 28% 88%; --card: 24 12% 12%; --card-foreground: 36 28% 88%; --popover: 24 12% 12%; --popover-foreground: 36 28% 88%; --secondary: 24 10% 16%; --secondary-foreground: 36 22% 75%; --muted: 24 10% 14%; --muted-foreground: 30 15% 52%; --accent: 24 10% 16%; --accent-foreground: 36 22% 75%; --border: 24 8% 20%; --input: 24 10% 14%; } /* ── Landing page nav ── */ html.dark nav { background: rgba(26, 22, 18, 0.88) !important; border-bottom-color: #2e2820 !important; } html.dark nav .logo, html.dark nav .nav-logo span { color: #ede8e0 !important; } html.dark nav .nav-links a { color: #9a8470 !important; } html.dark nav .nav-links a:hover { color: #ede8e0 !important; } html.dark .btn-ghost { color: #9a8470 !important; } html.dark .btn-ghost:hover { color: #ede8e0 !important; background: rgba(194, 112, 62, 0.1) !important; } html.dark .btn-outline { color: #9a8470 !important; border-color: #2e2820 !important; } html.dark .btn-outline:hover { background: rgba(194, 112, 62, 0.08) !important; border-color: rgba(194, 112, 62, 0.3) !important; } /* ── Landing page sections ── */ html.dark .hero h1, html.dark .showcase-heading h2 { color: #ede8e0 !important; } html.dark .hero p, html.dark .showcase-heading p { color: #9a8470 !important; } html.dark .tool-explorer-nav { background: #221d17 !important; border-color: #2e2820 !important; } html.dark .tool-nav-btn { color: #9a8470 !important; } html.dark .tool-nav-btn:hover, html.dark .tool-nav-btn.active { background: rgba(194, 112, 62, 0.1) !important; color: #ede8e0 !important; } html.dark .tool-nav-name { color: #ede8e0 !important; } html.dark .feature-card, html.dark .showcase-content { background: #221d17 !important; border-color: #2e2820 !important; } /* ── Service page: header-glass ── */ html.dark .header-glass { background: rgba(26, 22, 18, 0.92) !important; border-bottom-color: rgba(46, 40, 32, 0.9) !important; } /* ── Service page: sidebar ── */ html.dark .sidebar { background: #1e1a15 !important; border-right-color: #2e2820 !important; } html.dark .nav-item { color: #9a8470 !important; } html.dark .nav-item:hover { color: #ede8e0 !important; background: rgba(46, 40, 32, 0.8) !important; } html.dark .nav-item.active { color: #c2703e !important; background: rgba(42, 33, 26, 0.9) !important; } html.dark .nav-item .nav-icon-box svg { color: #9a8470 !important; } html.dark .nav-item.active .nav-icon-box svg { color: #c2703e !important; } html.dark .nav-item:hover .nav-icon-box svg { color: #ede8e0 !important; } html.dark .section-label { color: #6b5d4f !important; } /* ── Service page: main content area ── */ html.dark .main-content { background: #1a1612 !important; } /* ── Service page: glass cards, response cards ── */ html.dark .glass-card, html.dark .response-card { background: #221d17 !important; border-color: rgba(46, 40, 32, 0.7) !important; } /* ── Service page: input fields ── */ html.dark .input-field { background: #1e1914 !important; color: #ede8e0 !important; border-color: #2e2820 !important; } html.dark .input-field:focus { background: #242018 !important; border-color: rgba(194, 112, 62, 0.5) !important; } html.dark .input-field::placeholder { color: #6b5d4f !important; } html.dark select.input-field { background-color: #1e1914 !important; color-scheme: dark; } html.dark select.input-field option { background: #221d17 !important; color: #ede8e0 !important; } html.dark textarea.input-field { background: #1e1914 !important; } /* ── Service page: labels ── */ html.dark .label-text { color: #9a8470 !important; } /* ── Service page: copy button ── */ html.dark .copy-btn-small { color: #9a8470 !important; background: #2a211a !important; border-color: #2e2820 !important; } html.dark .copy-btn-small:hover { color: #c2703e !important; background: rgba(194, 112, 62, 0.08) !important; border-color: rgba(194, 112, 62, 0.25) !important; } /* ── Service page: mobile menu button ── */ html.dark .mobile-menu-btn { background: rgba(40, 32, 24, 0.7) !important; border-color: #2e2820 !important; } html.dark .mobile-menu-btn svg { color: #9a8470 !important; } /* ── Service page: empty state ── */ html.dark .empty-state-icon { background: #2a211a !important; } /* ── Service page: status indicator in header ── */ html.dark #statusIndicator { background: #1e1a15 !important; border-color: #2e2820 !important; } html.dark #statusText { color: #9a8470 !important; } /* ── Service page: sidebar overlay ── */ html.dark .sidebar-overlay { background: rgba(10, 8, 6, 0.6) !important; } /* ── Dashboard page ── */ html.dark .header { background: rgba(26, 22, 18, 0.88) !important; border-bottom-color: #2e2820 !important; } html.dark .header-title { color: #ede8e0 !important; } html.dark .page-title { color: #ede8e0 !important; } html.dark .page-subtitle { color: #9a8470 !important; } html.dark .stat-card, html.dark .lifetime-chip { background: #221d17 !important; border-color: rgba(46, 40, 32, 0.7) !important; } html.dark .stat-label, html.dark .lifetime-chip-label { color: #6b5d4f !important; } html.dark .stat-value, html.dark .lifetime-chip-value { color: #ede8e0 !important; } html.dark .stat-sub { color: #6b5d4f !important; } html.dark .table-wrap { background: #221d17 !important; border-color: rgba(46, 40, 32, 0.7) !important; } html.dark .table-header { border-bottom-color: rgba(46, 40, 32, 0.7) !important; } html.dark .table-title { color: #ede8e0 !important; } html.dark .search-box { background: #1e1914 !important; border-color: rgba(46, 40, 32, 0.7) !important; } html.dark .search-box input { color: #ede8e0 !important; } html.dark .search-box input::placeholder { color: #6b5d4f !important; } html.dark th { background: rgba(30, 25, 20, 0.7) !important; color: #6b5d4f !important; } html.dark th:hover { color: #c2703e !important; } html.dark td { color: #ede8e0 !important; border-top-color: rgba(46, 40, 32, 0.6) !important; } html.dark tr:hover td { background: rgba(194, 112, 62, 0.04) !important; } html.dark .td-name { color: #c5b8a8 !important; } html.dark .nav-btn { color: #9a8470 !important; } html.dark .nav-btn:hover, html.dark .nav-btn.active { background: rgba(194, 112, 62, 0.1) !important; color: #c2703e !important; } html.dark .month-label { color: #9a8470 !important; } html.dark .section-label { color: #6b5d4f !important; } /* ── History page ── */ html.dark .task-card { background: #221d17 !important; border-color: rgba(46, 40, 32, 0.7) !important; } html.dark .task-media { background: linear-gradient(135deg, #2a211a, #221a14) !important; } html.dark .task-body { border-top-color: rgba(46, 40, 32, 0.6) !important; } html.dark .filter-btn { color: #9a8470 !important; background: rgba(194, 112, 62, 0.04) !important; border-color: rgba(46, 40, 32, 0.7) !important; } html.dark .filter-btn:hover, html.dark .filter-btn.active { background: rgba(194, 112, 62, 0.12) !important; color: #c2703e !important; } html.dark .user-badge { background: rgba(194, 112, 62, 0.08) !important; border-color: rgba(194, 112, 62, 0.15) !important; color: #c5b8a8 !important; } /* ── Pricing page ── */ html.dark .plan-card { background: #221d17 !important; border-color: rgba(46, 40, 32, 0.8) !important; } html.dark .plan-card.featured { border-color: rgba(194, 112, 62, 0.35) !important; } html.dark .plan-name, html.dark .plan-price, html.dark .header h1 { color: #ede8e0 !important; } html.dark .plan-price span, html.dark .plan-duration, html.dark .plan-limit, html.dark .header p, html.dark .footer p { color: #9a8470 !important; } html.dark .features-list li { color: #c5b8a8 !important; } html.dark .modal-box { background: #221d17 !important; border-color: #2e2820 !important; } html.dark .modal-plan-name, html.dark .modal-original-price { color: #ede8e0 !important; } html.dark .modal-close { background: #2a211a !important; border-color: #2e2820 !important; color: #9a8470 !important; } html.dark .nav-back { color: #9a8470 !important; border-color: #2e2820 !important; background: rgba(40, 32, 24, 0.5) !important; } html.dark .nav-back:hover { color: #c2703e !important; border-color: rgba(194, 112, 62, 0.3) !important; } html.dark .refund-notice { background: rgba(194, 112, 62, 0.06) !important; border-color: rgba(194, 112, 62, 0.15) !important; } html.dark .refund-notice span { color: #c5b8a8 !important; } html.dark .refund-notice a { background: #2a211a !important; border-color: rgba(194, 112, 62, 0.25) !important; } /* ── Onboarding page ── */ html.dark .wizard-card { background: #221d17 !important; border-color: rgba(194, 112, 62, 0.12) !important; } html.dark .logo-wrap h1 { color: #ede8e0 !important; } html.dark .logo-wrap p { color: #9a8470 !important; } /* ── Login page ── */ html.dark .login-card, html.dark .login-box, html.dark .auth-card { background: #221d17 !important; border-color: #2e2820 !important; } /* ── Theme toggle button hover state in dark mode ── */ html.dark #themeToggleBtn { background: rgba(194, 112, 62, 0.08) !important; border-color: rgba(194, 112, 62, 0.2) !important; color: #c2703e !important; } /* ── General text utility overrides ── */ html.dark .text-foreground { color: #ede8e0 !important; } html.dark .text-muted-foreground { color: #9a8470 !important; } /* ── Scrollbar in dark mode ── */ html.dark ::-webkit-scrollbar-track { background: #1a1612; } html.dark ::-webkit-scrollbar-thumb { background: rgba(194, 112, 62, 0.25); } html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(194, 112, 62, 0.4); } /* ═══════════════════════════════════════════════════════════ Video Extender Tool — full dark theme ═══════════════════════════════════════════════════════════ */ /* Main panel background */ html.dark #tool-video-extender { background: #18150f !important; } /* ── Top bar ── */ html.dark #tool-video-extender > div:first-child { background: #221d17 !important; border-bottom-color: #2e2820 !important; } /* Project name */ html.dark #ve-project-name-display { color: #ede8e0 !important; } /* Edit-name pencil icon */ html.dark #tool-video-extender > div:first-child button[title="Edit name"] { color: #7c6b5d !important; } /* Pending chip */ html.dark #ve-pending-chip { background: rgba(194, 112, 62, 0.15) !important; color: #c5b8a8 !important; } /* Plain outline buttons: Preview Project, Download RAW Data */ html.dark #tool-video-extender > div:first-child button[style*="#d1cfc9"], html.dark #tool-video-extender > div:first-child button[style*="border:1.5px solid #d1cfc9"] { background: #2a211a !important; border-color: #3a3028 !important; color: #c5b8a8 !important; } /* ── Left panel (scene list column) ── */ html.dark #tool-video-extender > div:nth-child(2) > div:first-child { background: #1e1a15 !important; border-right-color: #2e2820 !important; } /* "Scenes / Prompts" header */ html.dark #tool-video-extender > div:nth-child(2) > div:first-child > div:first-child { border-bottom-color: #2e2820 !important; } html.dark #tool-video-extender > div:nth-child(2) > div:first-child > div:first-child span { color: #c5b8a8 !important; } /* Scene list scroll area */ html.dark #ve-scene-list { background: #1e1a15 !important; } /* Empty state text */ html.dark #ve-scenes-empty { color: #7c6b5d !important; } /* "+ Add Scene" footer area */ html.dark #tool-video-extender > div:nth-child(2) > div:first-child > div:last-child { border-top-color: #2e2820 !important; background: #1e1a15 !important; } /* ── Scene cards (dynamically rendered with data-scene-id) ── */ html.dark #ve-scene-list > [data-scene-id] { background: #26201a !important; border-color: #3a3028 !important; } /* Scene N label */ html.dark #ve-scene-list > [data-scene-id] span[style*="font-weight:700"][style*="#5c4d3c"] { color: #c5b8a8 !important; } /* Prompt text */ html.dark #ve-scene-list > [data-scene-id] p { color: #9a8470 !important; } /* Elapsed time */ html.dark #ve-scene-list > [data-scene-id] span[style*="#a38f7a"] { color: #6b5d4f !important; } /* Icon buttons (edit, regenerate, delete, copy) */ html.dark #ve-scene-list > [data-scene-id] button[style*="color:#a38f7a"] { color: #6b5d4f !important; } /* ── Right generate panel ── */ html.dark #tool-video-extender > div:nth-child(2) > div:last-child { background: #1e1a15 !important; border-left-color: #2e2820 !important; } /* "Generate" heading */ html.dark #tool-video-extender > div:nth-child(2) > div:last-child > div:first-child > div:first-child { color: #c5b8a8 !important; } /* Section labels (ORIENTATION, PROJECT) */ html.dark #tool-video-extender label[style*="#a38f7a"] { color: #7c6b5d !important; } /* Orientation & Project selects */ html.dark #veOrientation, html.dark #veProjectSelect { background: #26201a !important; color: #ede8e0 !important; border-color: #3a3028 !important; color-scheme: dark; } html.dark #veOrientation option, html.dark #veProjectSelect option { background: #221d17 !important; color: #ede8e0 !important; } /* "+ New Project" button */ html.dark #tool-video-extender button[onclick="veCreateProject()"] { color: #c2703e !important; border-color: rgba(194, 112, 62, 0.25) !important; } /* Stats box */ html.dark #tool-video-extender > div:nth-child(2) > div:last-child div[style*="#f8f6f4"] { background: #26201a !important; } html.dark #ve-stat-scenes, html.dark #ve-stat-duration { color: #ede8e0 !important; } html.dark #tool-video-extender div[style*="#a38f7a"][style*="Total"] { color: #6b5d4f !important; } /* ── Modals — shared inner box ── */ html.dark #ve-add-modal > div, html.dark #ve-edit-modal > div, html.dark #ve-delete-modal > div { background: #221d17 !important; border: 1px solid #2e2820 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important; } /* Modal headings */ html.dark #ve-add-modal h3, html.dark #ve-edit-modal h3, html.dark #ve-delete-modal h3 { color: #ede8e0 !important; } /* "This action cannot be undone" text */ html.dark #ve-delete-modal p { color: #9a8470 !important; } /* Delete icon circle */ html.dark #ve-delete-modal div[style*="#fef2f2"] { background: rgba(239, 68, 68, 0.12) !important; } /* Modal labels */ html.dark #ve-add-modal label, html.dark #ve-edit-modal label { color: #c5b8a8 !important; } html.dark #ve-add-modal label span { color: #7c6b5d !important; } /* Textareas */ html.dark #ve-add-prompt, html.dark #ve-edit-prompt { background: #1e1914 !important; color: #ede8e0 !important; border-color: #3a3028 !important; } html.dark #ve-add-prompt::placeholder { color: #6b5d4f !important; } /* Image upload drop zone */ html.dark #ve-add-modal div[onclick*="ve-add-img-input"] { background: rgba(42, 33, 26, 0.5) !important; border-color: rgba(212, 118, 78, 0.25) !important; } html.dark #ve-add-img-placeholder { color: #7c6b5d !important; } /* Cancel buttons (outline style) */ html.dark #ve-add-modal button[onclick*="veCloseModal"], html.dark #ve-edit-modal button[onclick*="veCloseModal"], html.dark #ve-delete-modal button[onclick*="veCloseModal"] { background: #2a211a !important; border-color: #3a3028 !important; color: #c5b8a8 !important; } /* × close buttons */ html.dark #ve-add-modal button[style*="font-size:22px"], html.dark #ve-edit-modal button[style*="font-size:22px"] { color: #7c6b5d !important; } /* ═══════════════════════════════════════════════════════════ Speech to Text Tool — dark theme ═══════════════════════════════════════════════════════════ */ /* Page subtitle */ html.dark #tool-speech-to-text > div:first-child p { color: #9a8470 !important; } /* Drop zone "Click or drop audio file" heading */ html.dark #sttDropLabel div[style*="color:#2d2017"] { color: #c5b8a8 !important; } /* Drop zone hint text */ html.dark #sttDropLabel div[style*="color:#8b7355"] { color: #7c6b5d !important; } /* Checkbox labels */ html.dark #tool-speech-to-text label[style*="color:#2d2017"] { color: #c5b8a8 !important; } /* "— or —" divider & other muted inline text */ html.dark #tool-speech-to-text div[style*="text-transform:uppercase"][style*="color:#a38f7a"], html.dark #tool-speech-to-text div[style*="letter-spacing:0.12em"] { color: #6b5d4f !important; } /* "By Speaker" active button (already orange-tinted — fine) */ /* "Plain Text" inactive button — has light bg in light mode */ html.dark #sttViewPlain { background: #2a211a !important; border-color: #3a3028 !important; color: #9a8470 !important; } html.dark #sttViewPlain.active, html.dark #sttViewPlain[style*="color:#c2703e"] { background: rgba(194, 112, 62, 0.1) !important; border-color: rgba(194, 112, 62, 0.3) !important; color: #c2703e !important; } html.dark #sttViewSpeakers { background: rgba(194, 112, 62, 0.08) !important; } /* Transcript result text */ html.dark #sttResult { color: #ede8e0 !important; } /* Empty state placeholder inside result */ html.dark #sttResult div[style*="color:#a38f7a"] { color: #6b5d4f !important; } /* Speaker label chips / utterance text generated by JS */ html.dark #sttResult [style*="color:#2d2017"], html.dark #sttResult [style*="color:#5c4d3c"] { color: #c5b8a8 !important; } html.dark #sttResult [style*="color:#8b7355"], html.dark #sttResult [style*="color:#a38f7a"] { color: #7c6b5d !important; } /* Processing time */ html.dark #sttTime { color: #6b5d4f !important; }