/* ============================================ theme-variables.css UNCHARTED - Central Theme System This file is the SINGLE SOURCE OF TRUTH for all colors, spacing, and visual properties. Load this FIRST before any other CSS files. Usage: - Default is dark theme - Add data-theme="light" to for light theme - Add data-theme="blue" to for blue theme ============================================ */ /* ============================================ DEFAULT THEME (Dark/Glass) ============================================ */ :root { /* === Core Backgrounds === */ --bg-body: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%); --bg-base: #0a0a0f; --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-tertiary: #12121a; /* === Surface Colors (panels, cards, menus) === */ --surface-solid: #1a1a2e; --surface-glass: rgba(25, 25, 35, 0.75); --surface-glass-hover: rgba(35, 35, 50, 0.85); --surface-elevated: rgba(255, 255, 255, 0.05); --surface-elevated-hover: rgba(255, 255, 255, 0.1); --surface-overlay: rgba(0, 0, 0, 0.5); /* === Text Colors === */ --text-primary: #f5f5f7; --text-secondary: #a1a1aa; --text-muted: #71717a; --text-inverse: #1a1a2e; --text-on-accent: #ffffff; /* === Accent Colors (Primary brand color) === */ --accent: #6366f1; --accent-light: #818cf8; --accent-dark: #4f46e5; --accent-glow: rgba(99, 102, 241, 0.4); --accent-subtle: rgba(99, 102, 241, 0.15); /* === Semantic Colors === */ --color-success: #22c55e; --color-success-light: #4ade80; --color-success-dark: #16a34a; --color-success-glow: rgba(34, 197, 94, 0.4); --color-success-subtle: rgba(34, 197, 94, 0.15); --color-warning: #f59e0b; --color-warning-light: #fbbf24; --color-warning-dark: #d97706; --color-warning-glow: rgba(245, 158, 11, 0.4); --color-warning-subtle: rgba(245, 158, 11, 0.15); --color-danger: #ef4444; --color-danger-light: #f87171; --color-danger-dark: #dc2626; --color-danger-glow: rgba(239, 68, 68, 0.4); --color-danger-subtle: rgba(239, 68, 68, 0.15); --color-info: #3b82f6; --color-info-light: #60a5fa; --color-info-dark: #2563eb; --color-info-glow: rgba(59, 130, 246, 0.4); --color-info-subtle: rgba(59, 130, 246, 0.15); /* === Neutral/Gray Scale === */ --gray-50: #fafafa; --gray-100: #f4f4f5; --gray-200: #e4e4e7; --gray-300: #d4d4d8; --gray-400: #a1a1aa; --gray-500: #71717a; --gray-600: #52525b; --gray-700: #3f3f46; --gray-800: #27272a; --gray-900: #18181b; /* === Border Colors === */ --border-default: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.15); --border-focus: var(--accent); --border-subtle: rgba(255, 255, 255, 0.04); /* === Border Radius === */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* === Shadows === */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 20px var(--accent-glow); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.025); /* === Effects === */ --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px; /* === Transitions === */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.35s ease; --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* === Spacing (optional, for consistency) === */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* ============================================ Component-Specific Variables ============================================ */ /* === Control Bar === */ --control-bar-bg: linear-gradient(to right, #3a3a52 0%, #2d2d48 100%); --control-bar-border: var(--border-default); --control-bar-height: 48px; /* === Snapshot Bar === */ --snapshot-bar-bg: rgba(50, 50, 70, 0.9); --snapshot-bar-bg-hover: rgba(60, 60, 85, 0.95); --snapshot-bar-border: rgba(255, 255, 255, 0.15); --snapshot-btn-bg: #5c79d7; /* === Timeline === */ --timeline-bg: linear-gradient(180deg, #2a2a3e 0%, #232848 100%); --timeline-height: 175px; --timeline-month-color: rgba(255, 255, 255, 0.7); --timeline-day-color: rgba(255, 255, 255, 0.75); --timeline-day-name-color: rgba(255, 255, 255, 0.4); --timeline-weekend-bg: rgba(0, 0, 0, 0.2); --timeline-today-bg: linear-gradient(180deg, rgba(34, 197, 94, 0.35) 0%, rgba(34, 197, 94, 0.15) 100%); --timeline-days-bg: #2d314e; --timeline-milestones-bg: #2d314e; --timeline-shadow: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 100%); /* === Side Panels === */ --panel-bg: #2d314e; --panel-shadow: rgba(0, 0, 0, 0.3); --panel-header-bg: rgba(255, 255, 255, 0.05); --panel-border: var(--border-default); /* === Context Menus === */ --menu-bg: var(--surface-glass); --menu-border: var(--border-default); --menu-item-hover: var(--accent-subtle); --menu-shadow: var(--shadow-lg); /* === Inputs === */ --input-bg: rgba(0, 0, 0, 0.3); --input-border: var(--border-default); --input-border-focus: var(--accent); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); /* === Buttons === */ --btn-bg: var(--surface-elevated); --btn-bg-hover: var(--surface-elevated-hover); --btn-border: var(--border-default); --btn-text: var(--text-primary); --btn-primary-bg: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); --btn-primary-text: var(--text-on-accent); --btn-danger-bg: var(--color-danger); --btn-danger-text: var(--text-on-accent); /* === Icons (for menus, buttons, UI elements) === */ --icon-filter: brightness(0) invert(0.85); --icon-filter-hover: brightness(0) invert(1); --icon-filter-delete: brightness(0) invert(1); --icon-filter-disabled: brightness(0) invert(0.4); /* === Sticky Notes (pastel colors) === */ --sticky-yellow: #FFF9C4; --sticky-orange: #FFE0B2; --sticky-red: #FFCDD2; --sticky-pink: #F8BBD0; --sticky-purple: #E1BEE7; --sticky-indigo: #C5CAE9; --sticky-blue: #B3E5FC; --sticky-cyan: #B2EBF2; --sticky-green: #C8E6C9; --sticky-lime: #DCEDC8; /* === Milestones === */ --milestone-bg: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); --milestone-selected-bg: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-light) 100%); --milestone-locked-bg: linear-gradient(135deg, #4b5563 0%, #374151 100%); /* === Scrollbars === */ --scrollbar-track: rgba(0, 0, 0, 0.2); --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); --scrollbar-width: 8px; /* ============================================ CANVAS ELEMENTS (tasks, groups, grid, etc.) These are read by CanvasTheme.js ============================================ */ /* === Grid === */ --canvas-grid-color: #3f3f46; --canvas-grid-weekend: rgba(239, 68, 68, 0.1); --canvas-grid-today: rgba(34, 197, 94, 0.25); /* === Task Text (labels to left of bar) === */ --canvas-task-label: #f5f5f7; --canvas-task-label-light: #a1a1aa; --canvas-task-connector: #52525b; /* === Task Bar (default when no custom color) === */ --canvas-task-bar-default: #949cdb; --canvas-task-outline: #656bbe; --canvas-task-outline-selected: #656bbe; /* === Popups/Previews === */ --canvas-popup-bg: #27272a; --canvas-popup-text: #f5f5f7; --canvas-popup-text-secondary: #a1a1aa; --canvas-popup-text-muted: #71717a; --canvas-popup-border: rgba(255, 255, 255, 0.1); --canvas-popup-shadow: rgba(0, 0, 0, 0.2); /* === Person Boxes === */ --canvas-person-bg: rgba(255, 255, 255, 0.05); --canvas-person-border: rgba(255, 255, 255, 0.1); --canvas-person-text: #f5f5f7; /* === Groups === */ --canvas-group-bg-expanded: rgba(0, 0, 0, 0.15); --canvas-group-button-bg: rgba(255, 255, 255, 0.2); --canvas-group-outline: #ffffff; /* === Boundary Lines ("Top/bottom of plan") === */ --canvas-boundary-line: #6b9ef3; --canvas-boundary-text: #4285F4; /* === Work Area Background === */ --canvas-work-area-bg: rgba(255, 255, 255, 0.06); --canvas-work-area-border: rgba(255, 255, 255, 0.15); /* === Guide Lines (when dragging) === */ --canvas-guide-line: #71717a; --canvas-guide-fill: rgba(255, 255, 255, 0.05); /* === Selection Box === */ --canvas-selection-stroke: var(--accent); --canvas-selection-fill: var(--accent-subtle); /* === Dependency Lines (BRIGHTER for dark theme) === */ --canvas-dependency-line: #656bbe; --canvas-dependency-line-hover: #656bbe; /* === Off-Screen Task Indicators === */ --canvas-offscreen-bg: rgba(30, 30, 40, 0.92); --canvas-offscreen-border: rgba(255, 255, 255, 0.12); --canvas-offscreen-text: #f5f5f7; --canvas-offscreen-text-muted: #a1a1aa; --canvas-offscreen-shadow: rgba(0, 0, 0, 0.4); } /* ============================================ LIGHT THEME ============================================ */ [data-theme="light"] { /* === Core Backgrounds (brighter with blue tint) === */ --bg-body: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 50%, #f8fbff 100%); --bg-base: #f8fbff; --bg-primary: #ffffff; --bg-secondary: #f0f7ff; --bg-tertiary: #e4f0fb; /* === Surface Colors === */ --surface-solid: #ffffff; --surface-glass: rgba(255, 255, 255, 0.9); --surface-glass-hover: rgba(255, 255, 255, 0.95); --surface-elevated: rgba(59, 130, 246, 0.03); --surface-elevated-hover: rgba(59, 130, 246, 0.06); --surface-overlay: rgba(0, 0, 0, 0.3); /* === Text Colors === */ --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; --text-inverse: #f8fafc; /* === Accent (slightly darker for light bg) === */ --accent: #4f46e5; --accent-light: #6366f1; --accent-dark: #4338ca; --accent-glow: rgba(79, 70, 229, 0.3); --accent-subtle: rgba(79, 70, 229, 0.1); /* === Semantic Colors (adjusted for light) === */ --color-success-glow: rgba(34, 197, 94, 0.25); --color-success-subtle: rgba(34, 197, 94, 0.1); --color-warning-glow: rgba(245, 158, 11, 0.25); --color-warning-subtle: rgba(245, 158, 11, 0.1); --color-danger-glow: rgba(239, 68, 68, 0.25); --color-danger-subtle: rgba(239, 68, 68, 0.1); --color-info-glow: rgba(59, 130, 246, 0.25); --color-info-subtle: rgba(59, 130, 246, 0.1); /* === Icons (darker for light theme) === */ --icon-filter: brightness(0) invert(0.3); --icon-filter-hover: brightness(0) invert(0); --icon-filter-delete: brightness(0) invert(1); --icon-filter-disabled: brightness(0) invert(0.6); /* === Border Colors === */ --border-default: rgba(59, 130, 246, 0.1); --border-hover: rgba(59, 130, 246, 0.2); --border-subtle: rgba(59, 130, 246, 0.05); /* === Shadows (lighter) === */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.06); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.075); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4); /* === Component Overrides === */ --control-bar-bg: linear-gradient(to right, #e8f4fc 0%, #dbeafe 100%); --timeline-bg: linear-gradient(180deg, #9ecafd 0%, #c5defa 30%, #c5defa 100%); --timeline-month-color: rgba(30, 41, 59, 0.8); --timeline-day-color: rgba(30, 41, 59, 0.9); --timeline-day-name-color: rgba(30, 41, 59, 0.5); --timeline-weekend-bg: rgba(59, 130, 246, 0.08); --timeline-today-bg: linear-gradient(180deg, rgba(34, 197, 94, 0.3) 0%, rgba(34, 197, 94, 0.1) 100%); --timeline-days-bg: #d8e9fc; --timeline-milestones-bg: #d8e9fc; --timeline-shadow: linear-gradient(180deg, #c4ddf9 0%, rgba(196, 221, 249, 0.3) 40%, transparent 100%); /* === Snapshot Bar === */ --snapshot-bar-bg: #e0edfc; --snapshot-bar-bg-hover: #d5e6fa; --snapshot-bar-border: #bdd5f2; --snapshot-tab-bg: #bdd5f2; --snapshot-tab-bg-hover: #aecbee; --snapshot-btn-bg: #5c79d7; --panel-bg: #d8e9fc; --panel-shadow: #c4ddf9; --panel-header-bg: rgba(59, 130, 246, 0.03); --input-bg: rgba(255, 255, 255, 0.9); --scrollbar-track: rgba(59, 130, 246, 0.05); --scrollbar-thumb: rgba(59, 130, 246, 0.15); --scrollbar-thumb-hover: rgba(59, 130, 246, 0.25); /* === Canvas Overrides for Light Theme === */ --canvas-grid-color: #a2c7f2; --canvas-grid-weekend: rgba(239, 68, 68, 0.08); --canvas-grid-today: rgba(34, 197, 94, 0.2); --canvas-task-label: #1e293b; --canvas-task-label-light: #475569; --canvas-task-connector: #93c5fd; --canvas-task-bar-default: #93c5fd; --canvas-task-outline: #3B82F6; --canvas-task-outline-selected: #3B82F6; --canvas-popup-bg: #ffffff; --canvas-popup-text: #1e293b; --canvas-popup-text-secondary: #475569; --canvas-popup-text-muted: #94a3b8; --canvas-popup-border: rgba(59, 130, 246, 0.1); --canvas-popup-shadow: rgba(0, 0, 0, 0.05); --canvas-person-bg: #ffffff; --canvas-person-border: rgba(59, 130, 246, 0.1); --canvas-person-text: #1e293b; --canvas-group-bg-expanded: rgba(59, 130, 246, 0.05); --canvas-group-button-bg: rgba(59, 130, 246, 0.1); --canvas-group-outline: #1e293b; --canvas-boundary-line: #93c5fd; --canvas-boundary-text: #3b82f6; /* === Work Area Background === */ --canvas-work-area-bg: rgba(0, 0, 0, 0.04); --canvas-work-area-border: rgba(0, 0, 0, 0.08); --canvas-guide-line: #93c5fd; --canvas-guide-fill: #f8fbff; /* === Dependency Lines (darker for light theme) === */ --canvas-dependency-line: #3B82F6; --canvas-dependency-line-hover: #3B82F6; /* === Off-Screen Task Indicators === */ --canvas-offscreen-bg: rgba(255, 255, 255, 0.95); --canvas-offscreen-border: rgba(59, 130, 246, 0.15); --canvas-offscreen-text: #1e293b; --canvas-offscreen-text-muted: #64748b; --canvas-offscreen-shadow: rgba(0, 0, 0, 0.08); } /* ============================================ BLUE THEME (Classic Uncharted look) ============================================ */ [data-theme="blue"] { /* === Core Backgrounds === */ --bg-body: linear-gradient(135deg, #0d3b69 0%, #1a5490 50%, #0a2d52 100%); --bg-base: #0a2d52; --bg-primary: #0d3b69; --bg-secondary: #1a5490; --bg-tertiary: #082442; /* === Surface Colors === */ --surface-solid: #0d3b69; --surface-glass: rgba(13, 59, 105, 0.85); --surface-glass-hover: rgba(26, 84, 144, 0.9); --surface-elevated: rgba(255, 255, 255, 0.08); --surface-elevated-hover: rgba(255, 255, 255, 0.12); /* === Text Colors === */ --text-primary: #ffffff; --text-secondary: #cae4ff; --text-muted: #74b5f7; /* === Accent === */ --accent: #4a9eff; --accent-light: #74b5f7; --accent-dark: #2c70b4; --accent-glow: rgba(74, 158, 255, 0.4); --accent-subtle: rgba(74, 158, 255, 0.15); /* === Borders === */ --border-default: rgba(116, 181, 247, 0.2); --border-hover: rgba(116, 181, 247, 0.4); --border-subtle: rgba(116, 181, 247, 0.1); /* === Icons (light for blue theme) === */ --icon-filter: brightness(0) invert(0.9); --icon-filter-hover: brightness(0) invert(1); --icon-filter-delete: brightness(0) invert(1); --icon-filter-disabled: brightness(0) invert(0.5); /* === Component Overrides === */ --control-bar-bg: linear-gradient(to right, #1a5490 0%, #3a7fc4 100%); --timeline-bg: linear-gradient(180deg, #0d3b69 0%, #1a5490 100%); --timeline-month-color: rgba(202, 228, 255, 0.9); --timeline-day-color: #ffffff; --timeline-day-name-color: rgba(202, 228, 255, 0.6); --timeline-weekend-bg: rgba(0, 0, 0, 0.15); --timeline-days-bg: #245990; --timeline-milestones-bg: #245990; --timeline-shadow: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 100%); /* === Snapshot Bar === */ --snapshot-bar-bg: rgba(26, 84, 144, 0.95); --snapshot-bar-bg-hover: rgba(36, 100, 165, 1); --snapshot-bar-border: rgba(116, 181, 247, 0.25); --snapshot-btn-bg: #4a8ed4; /* === Side Panels === */ --panel-bg: #245990; --panel-shadow: rgba(0, 0, 0, 0.3); /* === Canvas Overrides for Blue Theme === */ --canvas-grid-color: rgba(116, 181, 247, 0.2); --canvas-grid-weekend: rgba(0, 0, 0, 0.15); --canvas-grid-today: rgba(34, 197, 94, 0.25); --canvas-task-label: #ffffff; --canvas-task-label-light: #4359bd; --canvas-task-connector: #74b5f7; --canvas-task-bar-default: #8abbeb; --canvas-task-outline: #3c8eec; --canvas-task-outline-selected: #3c8eec; --canvas-popup-bg: #0d3b69; --canvas-popup-text: #ffffff; --canvas-popup-text-secondary: #cae4ff; --canvas-popup-text-muted: #74b5f7; --canvas-popup-border: rgba(116, 181, 247, 0.2); --canvas-popup-shadow: rgba(0, 0, 0, 0.2); --canvas-person-bg: rgba(255, 255, 255, 0.08); --canvas-person-border: rgba(116, 181, 247, 0.2); --canvas-person-text: #ffffff; --canvas-group-bg-expanded: rgba(202, 19, 19, 0.2); --canvas-group-button-bg: rgba(255, 255, 255, 0.15); --canvas-group-outline: #ffffff; --canvas-boundary-line: #74b5f7; --canvas-boundary-text: #74b5f7; /* === Work Area Background === */ --canvas-work-area-bg: rgba(255, 255, 255, 0.06); --canvas-work-area-border: rgba(116, 181, 247, 0.15); --canvas-guide-line: #74b5f7; --canvas-guide-fill: rgba(74, 158, 255, 0.1); /* === Dependency Lines (BRIGHTER for blue theme) === */ --canvas-dependency-line: #3c8eec; --canvas-dependency-line-hover: #3c8eec; /* === Off-Screen Task Indicators === */ --canvas-offscreen-bg: rgba(13, 59, 105, 0.95); --canvas-offscreen-border: rgba(116, 181, 247, 0.25); --canvas-offscreen-text: #ffffff; --canvas-offscreen-text-muted: #cae4ff; --canvas-offscreen-shadow: rgba(0, 0, 0, 0.25); } /* ============================================ GLOBAL RESETS & BASE STYLES ============================================ */ *, *::before, *::after { box-sizing: border-box; } body { background: var(--bg-body); color: var(--text-primary); transition: background var(--transition-slow), color var(--transition-slow); } /* === Global Scrollbar Styling === */ ::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-sm); transition: background var(--transition-fast); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* === Selection === */ ::selection { background: var(--accent); color: var(--text-on-accent); } /* ============================================ UTILITY CLASSES ============================================ */ /* Glass effect */ .glass { background: var(--surface-glass); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--border-default); } .glass-hover:hover { background: var(--surface-glass-hover); border-color: var(--border-hover); } /* Glow effects */ .glow { box-shadow: var(--shadow-glow); } .glow-success { box-shadow: 0 0 20px var(--color-success-glow); } .glow-warning { box-shadow: 0 0 20px var(--color-warning-glow); } .glow-danger { box-shadow: 0 0 20px var(--color-danger-glow); } /* Text utilities */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } /* Background utilities */ .bg-surface { background: var(--surface-solid); } .bg-glass { background: var(--surface-glass); } .bg-accent { background: var(--accent); }