/** * Light Theme Overrides * Applied via [data-theme="light"] on . * Overrides CSS custom properties defined in :root across all page stylesheets. */ /* ============================================================================ Light Theme Variable Overrides ============================================================================ */ [data-theme="light"] { /* Primary Colors — Light Palette */ --color-background: #f9f9fb; --color-surface: #ffffff; --color-surface-hover: #f0f0f5; --color-surface-alt: #f0f0f5; --color-headline: #16161a; --color-paragraph: #585e6a; --color-muted: #8b8f96; --color-button: #7f5af0; --color-button-hover: #6b47d6; --color-button-text: #ffffff; /* Accent Colors */ --color-stroke: rgba(22, 22, 26, 0.1); --color-stroke-light: rgba(22, 22, 26, 0.08); --color-stroke-strong: rgba(22, 22, 26, 0.15); --color-main: #16161a; --color-highlight: #7f5af0; --color-secondary: #8b8f96; --color-tertiary: #1a9a65; /* Semantic Colors */ --color-success: #1a9a65; --color-warning: #d97706; --color-error: #dc2626; --color-info: #7f5af0; /* Shadows — Light Theme (softer) */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 15px rgba(127, 90, 240, 0.1); --shadow-glow-strong: 0 0 25px rgba(127, 90, 240, 0.15); /* Dark theme alias overrides (used by index.css, login.css, admin.css) */ --bg-primary: #f9f9fb; --bg-secondary: #ffffff; --bg-tertiary: #f0f0f5; --bg-card: #ffffff; --bg-accent: rgba(127, 90, 240, 0.06); /* Text color aliases */ --text-primary: #16161a; --text-secondary: #585e6a; --text-muted: #8b8f96; --text-light: #16161a; /* Border aliases */ --border-color: rgba(22, 22, 26, 0.1); --border-light: rgba(22, 22, 26, 0.08); /* Semantic color aliases */ --error-color: #dc2626; --success-color: #1a9a65; --warning-color: #d97706; --info-color: #7f5af0; /* Gradient overrides */ --accent-gradient: linear-gradient(135deg, #7f5af0, #1a9a65); --glow-color: rgba(127, 90, 240, 0.08); /* Experiment Builder --hh-* variable overrides */ --hh-background: #f9f9fb; --hh-headline: #16161a; --hh-subheadline: #585e6a; --hh-button: #7f5af0; --hh-button-text: #ffffff; --hh-button-hover: #6b47d6; --hh-stroke: rgba(22, 22, 26, 0.1); --hh-main: #ffffff; --hh-highlight: #7f5af0; --hh-secondary: #f0f0f5; --hh-tertiary: #1a9a65; /* Experiment Builder card/badge overrides */ --accent-structure: #7f5af0; --bg-subtle: #ffffff; --border-default: rgba(22, 22, 26, 0.08); --badge-human-bg: rgba(22, 22, 26, 0.06); --badge-human-text: #585e6a; --badge-ai-bg: rgba(22, 22, 26, 0.08); --badge-ai-text: #585e6a; --badge-bot-bg: rgba(22, 22, 26, 0.04); --badge-bot-text: #8b8f96; --zone-communicator-bg: rgba(127, 90, 240, 0.06); --zone-communicator-border: rgba(22, 22, 26, 0.08); --zone-mediator-bg: rgba(127, 90, 240, 0.04); --zone-mediator-border: rgba(22, 22, 26, 0.08); --zone-processor-bg: rgba(127, 90, 240, 0.08); --zone-processor-border: rgba(22, 22, 26, 0.08); } /* ============================================================================ Theme Toggle Button Styles ============================================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255, 255, 254, 0.1); background: transparent; color: #94a1b2; cursor: pointer; transition: all 150ms cubic-bezier(0.33, 1, 0.68, 1); font-size: 16px; flex-shrink: 0; } .theme-toggle:hover { background: rgba(127, 90, 240, 0.1); color: #7f5af0; border-color: rgba(127, 90, 240, 0.3); } [data-theme="light"] .theme-toggle { border-color: rgba(22, 22, 26, 0.1); color: #585e6a; } [data-theme="light"] .theme-toggle:hover { background: rgba(127, 90, 240, 0.08); color: #7f5af0; border-color: rgba(127, 90, 240, 0.3); } /* Override builder header button styles for theme toggle */ .builder-header-actions .theme-toggle { background: transparent; color: #94a1b2; border: 1px solid rgba(255, 255, 254, 0.1); padding: 0; box-shadow: none; } .builder-header-actions .theme-toggle:hover { background: rgba(127, 90, 240, 0.1); color: #7f5af0; border-color: rgba(127, 90, 240, 0.3); transform: none; box-shadow: none; } [data-theme="light"] .builder-header-actions .theme-toggle { border-color: rgba(22, 22, 26, 0.1); color: #585e6a; background: transparent; } [data-theme="light"] .builder-header-actions .theme-toggle:hover { background: rgba(127, 90, 240, 0.08); color: #7f5af0; border-color: rgba(127, 90, 240, 0.3); transform: none; box-shadow: none; } /* Inspector pill tabs light override */ [data-theme="light"] .inspector-tab.active { background: rgba(22, 22, 26, 0.06); } /* Floating theme toggle for experiment page */ .theme-toggle-floating { position: fixed; bottom: 20px; left: 20px; z-index: 999; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* ============================================================================ Light Theme — Global Adjustments ============================================================================ */ /* Scrollbar styling for light mode */ [data-theme="light"] ::-webkit-scrollbar { width: 8px; } [data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0f5; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a0a4ac; } /* Fix rgba-based accent backgrounds that need lighter tints in light mode */ [data-theme="light"] .stat-card.active .stat-icon, [data-theme="light"] .stat-card.chatrooms .stat-icon, [data-theme="light"] .stat-icon.users { background: rgba(127, 90, 240, 0.1); } [data-theme="light"] .stat-card.online .stat-icon, [data-theme="light"] .stat-icon.active { background: rgba(26, 154, 101, 0.1); } [data-theme="light"] .stat-card.matching .stat-icon, [data-theme="light"] .stat-icon.pending { background: rgba(217, 119, 6, 0.1); } /* Error page inline styles override */ [data-theme="light"] .error-code { color: #dc2626; } [data-theme="light"] .error-message { color: #585e6a; } /* About page inline styles override */ [data-theme="light"] .about-content { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } /* Control Events — light theme */ [data-theme="light"] .ce-item { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .ce-item:hover { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .ce-edit-btn { background: rgba(127, 90, 240, 0.1); } [data-theme="light"] .ce-edit-btn:hover { background: rgba(127, 90, 240, 0.2); } [data-theme="light"] .ce-delete-btn { background: rgba(220, 38, 38, 0.1); } [data-theme="light"] .ce-delete-btn:hover { background: rgba(220, 38, 38, 0.2); } [data-theme="light"] .seg-event-badge-disable { background: rgba(220, 38, 38, 0.1); color: #dc2626; } [data-theme="light"] .seg-event-badge-enable { background: rgba(26, 154, 101, 0.1); color: #1a9a65; } [data-theme="light"] .seg-event-badge-end-section { background: rgba(99, 102, 241, 0.1); color: #6366f1; } [data-theme="light"] .canvas-ce-panel { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .canvas-ce-row:hover { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .canvas-ce-seg { background: rgba(0, 0, 0, 0.05); } /* Interactive Flow Preview — Light Theme */ [data-theme="light"] .preview-cl-tab { background: #f0f0f5; border-color: rgba(0, 0, 0, 0.08); color: #585e6a; } [data-theme="light"] .preview-cl-tab:hover { background: #ffffff; color: #16161a; } [data-theme="light"] .preview-cl-tab.active { background: #ffffff; border-bottom-color: #ffffff; } [data-theme="light"] .preview-timeline-wrapper { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .preview-detail-column { border-left-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .tl-connector-line { background: rgba(0, 0, 0, 0.1); } [data-theme="light"] .tl-node:hover .tl-node-body { background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .tl-node--selected > .tl-node-body, [data-theme="light"] .tl-segment-node.tl-node--selected { background: rgba(127, 90, 240, 0.08); outline-color: rgba(127, 90, 240, 0.2); } [data-theme="light"] .tl-chamber-segments { border-left-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .tl-segment-node:hover { background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .preview-detail-header { background: rgba(0, 0, 0, 0.02); } [data-theme="light"] .preview-detail-content-preview { background: rgba(0, 0, 0, 0.03); } /* Storyboard — Light Theme */ [data-theme="light"] .storyboard { border-left-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .storyboard-entry::before { background: #ffffff; border-color: rgba(0, 0, 0, 0.2); } [data-theme="light"] .storyboard-sender { color: #16161a; } [data-theme="light"] .storyboard-sender .storyboard-type-badge { background: rgba(0, 0, 0, 0.06); color: #585e6a; } [data-theme="light"] .storyboard-message { color: #16161a; background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .storyboard-entry.storyboard-human .storyboard-message { color: #585e6a; } [data-theme="light"] .storyboard-entry.storyboard-llm .storyboard-message { background: linear-gradient(135deg, rgba(127, 90, 240, 0.05), rgba(44, 181, 232, 0.05)); } [data-theme="light"] .storyboard-trigger-meta { color: #585e6a; } [data-theme="light"] .storyboard-trigger-meta .meta-line::before { border-color: rgba(0, 0, 0, 0.15); } [data-theme="light"] .storyboard-trigger-meta .meta-line:first-child::before { border-color: rgba(0, 0, 0, 0.15); } [data-theme="light"] .storyboard-entry.storyboard-time .storyboard-time-label { color: #585e6a; background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .storyboard-entry.storyboard-time::before { background: #585e6a; border-color: #585e6a; } [data-theme="light"] .storyboard-entry.storyboard-boundary .storyboard-boundary-label { color: #585e6a; } [data-theme="light"] .storyboard-empty { color: #585e6a; } [data-theme="light"] .tl-trigger-badge { color: #c47d10; background: rgba(240, 173, 78, 0.12); } /* Script Builder Storyboard — Light Theme */ [data-theme="light"] .sb-view-toggle { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .sb-view-toggle button { color: #585e6a; } [data-theme="light"] .sb-view-toggle button:hover { background: rgba(0, 0, 0, 0.05); color: #16161a; } [data-theme="light"] .sb-view-toggle button.active { background: #7f5af0; color: #fff; } [data-theme="light"] .sb-entry:hover { background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .sb-entry .sb-sender-row { color: #16161a; } [data-theme="light"] .sb-entry .sb-type-tag { background: rgba(0, 0, 0, 0.06); color: #585e6a; } [data-theme="light"] .sb-entry .sb-msg { color: #16161a; background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .sb-entry.sb-entry-human .sb-msg { color: #585e6a; } [data-theme="light"] .sb-entry.sb-entry-llm .sb-msg { background: linear-gradient(135deg, rgba(127, 90, 240, 0.05), rgba(44, 181, 232, 0.05)); } [data-theme="light"] .sb-entry .sb-meta { color: #585e6a; } [data-theme="light"] .sb-entry .sb-actions button { background: rgba(0, 0, 0, 0.06); color: #585e6a; } [data-theme="light"] .sb-separator { color: #585e6a; } [data-theme="light"] .sb-separator .sb-sep-label { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .sb-insert-btn button { border-color: rgba(0, 0, 0, 0.15); color: #585e6a; } [data-theme="light"] .sb-legend { border-top-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .sb-legend-item { color: #585e6a; } /* Smooth theme transition */ html { transition: background-color 200ms ease; } html[data-theme="light"], html[data-theme="light"] body { background-color: #f9f9fb; }