/* ═══════════════════════════════════════════════════════════════════════════ VICO DESIGN SYSTEM - Unified Design Tokens USAGE: Set theme on element: document.documentElement.dataset.theme = 'midnight'; Available themes: default, midnight, ember, forest, ocean, monochrome ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Typography */ --primary-font: 'Roboto-Bold', sans-serif; --secondary-font: Arial, monospace; /* ═══════════════════════════════════════════════════════════════════════ DEFAULT THEME - Blue/Cyan Dark ═══════════════════════════════════════════════════════════════════════ */ /* Surface Colors */ --vico-bg-deep: #12141a; --vico-bg-base: #1a1d24; --vico-bg-raised: #22262f; --vico-bg-elevated: #282d38; --vico-bg-hover: #3a4150; /* Border Colors */ --vico-border: #2d3340; --vico-border-hover: #3a4150; --vico-border-focus: #61afef; /* Text Colors */ --vico-text-primary: #e4e8ef; --vico-text-secondary: #8891a0; --vico-text-muted: #5c6370; /* Accent Colors */ --vico-accent-blue: #61afef; --vico-accent-blue-light: #7cc4ff; --vico-accent-green: #98c379; --vico-accent-green-light: #a8d389; --vico-accent-amber: #e5c07b; --vico-accent-amber-light: #f0d090; --vico-accent-red: #e06c75; --vico-accent-red-dark: #c55a62; --vico-accent-purple: #c678dd; --vico-accent-purple-light: #d688ed; --vico-accent-cyan: #56b6c2; /* Accent Glows (for focus/shadows) */ --vico-glow-blue: rgba(97, 175, 239, 0.2); --vico-glow-green: rgba(152, 195, 121, 0.2); --vico-glow-amber: rgba(229, 192, 123, 0.2); --vico-glow-red: rgba(224, 108, 117, 0.2); --vico-glow-purple: rgba(198, 120, 221, 0.2); --vico-glow-cyan: rgba(86, 182, 194, 0.2); /* Subtle Glows (for backgrounds, 0.08-0.1 opacity) */ --vico-glow-blue-subtle: rgba(97, 175, 239, 0.08); --vico-glow-green-subtle: rgba(152, 195, 121, 0.08); --vico-glow-red-subtle: rgba(224, 108, 117, 0.1); --vico-glow-purple-subtle: rgba(198, 120, 221, 0.1); /* Strong Glows (for borders, active states, 0.3-0.4 opacity) */ --vico-glow-blue-strong: rgba(97, 175, 239, 0.4); --vico-glow-green-strong: rgba(152, 195, 121, 0.4); --vico-glow-red-strong: rgba(224, 108, 117, 0.3); --vico-glow-purple-strong: rgba(198, 120, 221, 0.3); /* Gradients */ --vico-gradient-header: linear-gradient(180deg, #22262f 0%, #1a1d24 100%); --vico-gradient-blue: linear-gradient(135deg, #61afef 0%, #4a9be0 100%); --vico-gradient-green: linear-gradient(135deg, #98c379 0%, #7eb863 100%); --vico-gradient-amber: linear-gradient(135deg, #e5c07b 0%, #d4a055 100%); --vico-gradient-purple: linear-gradient(135deg, #c678dd 0%, #a855c0 100%); /* Spacing */ --vico-space-xs: 4px; --vico-space-sm: 8px; --vico-space-md: 12px; --vico-space-lg: 16px; --vico-space-xl: 20px; --vico-space-xxl: 32px; /* Border Radius */ --vico-radius-sm: 4px; --vico-radius-md: 6px; --vico-radius-lg: 8px; --vico-radius-xl: 12px; /* Transitions */ --vico-transition-fast: 0.15s ease; --vico-transition-normal: 0.2s ease; --vico-transition-slow: 0.3s ease-out; /* Shadows */ --vico-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2); --vico-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --vico-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --vico-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); /* Scrollbar */ --vico-scrollbar-width: 6px; --vico-scrollbar-thumb: rgba(97, 175, 239, 0.3); --vico-scrollbar-thumb-hover: rgba(97, 175, 239, 0.6); /* Editor side panels */ --vico-editor-panel-top: 80px; --vico-editor-panel-width: 30%; --vico-editor-panel-min-width: 380px; --vico-editor-panel-height: calc(100% - var(--vico-editor-panel-top)); /* Shared UI layers */ --vico-z-base-ui: 997; --vico-z-scene-hotspot: 997; --vico-z-side-panel: 998; --vico-z-floating-ui: 999; --vico-z-dropdown: 1000; --vico-z-fade-overlay: 1999; --vico-z-loading-background: 2000; --vico-z-loading-content: 2001; --vico-z-loading-layer: 2100; --vico-z-admin-toolbar: 9998; --vico-z-modal: 10000; --vico-z-modal-elevated: 10002; --vico-z-fullscreen-overlay: 10050; --vico-z-authoring-ui: 99996; --vico-z-authoring-marker: 99997; --vico-z-authoring-hud: 99998; --vico-z-priority-ui: 99999; --vico-z-system-overlay: 999999; --vico-z-context-menu: 100000; --vico-z-context-menu-elevated: 100002; } /* ═══════════════════════════════════════════════════════════════════════════ MIDNIGHT THEME - Deep Purple/Violet ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="midnight"] { --vico-bg-deep: #0d0d14; --vico-bg-base: #13131f; --vico-bg-raised: #1a1a2e; --vico-bg-elevated: #22223a; --vico-bg-hover: #2d2d4a; --vico-border: #2a2a45; --vico-border-hover: #3d3d5c; --vico-border-focus: #a78bfa; --vico-text-primary: #e8e6f2; --vico-text-secondary: #9590b0; --vico-text-muted: #6b6785; --vico-accent-blue: #818cf8; --vico-accent-blue-light: #a5b4fc; --vico-accent-green: #86efac; --vico-accent-green-light: #a7f3d0; --vico-accent-amber: #fbbf24; --vico-accent-amber-light: #fcd34d; --vico-accent-red: #fb7185; --vico-accent-red-dark: #e11d48; --vico-accent-purple: #a78bfa; --vico-accent-purple-light: #c4b5fd; --vico-accent-cyan: #67e8f9; --vico-glow-blue: rgba(129, 140, 248, 0.25); --vico-glow-green: rgba(134, 239, 172, 0.2); --vico-glow-amber: rgba(251, 191, 36, 0.2); --vico-glow-red: rgba(251, 113, 133, 0.2); --vico-glow-purple: rgba(167, 139, 250, 0.25); --vico-glow-cyan: rgba(103, 232, 249, 0.2); --vico-gradient-header: linear-gradient(180deg, #1a1a2e 0%, #13131f 100%); --vico-gradient-blue: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); --vico-gradient-green: linear-gradient(135deg, #86efac 0%, #4ade80 100%); --vico-gradient-amber: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); --vico-gradient-purple: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); --vico-scrollbar-thumb: rgba(167, 139, 250, 0.3); --vico-scrollbar-thumb-hover: rgba(167, 139, 250, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ EMBER THEME - Warm Orange/Red ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="ember"] { --vico-bg-deep: #140c08; --vico-bg-base: #1c1210; --vico-bg-raised: #291a16; --vico-bg-elevated: #35221c; --vico-bg-hover: #4a3028; --vico-border: #3d2820; --vico-border-hover: #5a3d32; --vico-border-focus: #f97316; --vico-text-primary: #fef3e8; --vico-text-secondary: #c9a892; --vico-text-muted: #8b7263; --vico-accent-blue: #38bdf8; --vico-accent-blue-light: #7dd3fc; --vico-accent-green: #84cc16; --vico-accent-green-light: #a3e635; --vico-accent-amber: #f97316; --vico-accent-amber-light: #fb923c; --vico-accent-red: #ef4444; --vico-accent-red-dark: #dc2626; --vico-accent-purple: #e879f9; --vico-accent-purple-light: #f0abfc; --vico-accent-cyan: #22d3ee; --vico-glow-blue: rgba(56, 189, 248, 0.2); --vico-glow-green: rgba(132, 204, 22, 0.2); --vico-glow-amber: rgba(249, 115, 22, 0.25); --vico-glow-red: rgba(239, 68, 68, 0.25); --vico-glow-purple: rgba(232, 121, 249, 0.2); --vico-glow-cyan: rgba(34, 211, 238, 0.2); --vico-gradient-header: linear-gradient(180deg, #291a16 0%, #1c1210 100%); --vico-gradient-blue: linear-gradient(135deg, #f97316 0%, #ea580c 100%); --vico-gradient-green: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); --vico-gradient-amber: linear-gradient(135deg, #fb923c 0%, #f97316 100%); --vico-gradient-purple: linear-gradient(135deg, #e879f9 0%, #d946ef 100%); --vico-scrollbar-thumb: rgba(249, 115, 22, 0.3); --vico-scrollbar-thumb-hover: rgba(249, 115, 22, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ FOREST THEME - Natural Green ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="forest"] { --vico-bg-deep: #0a120e; --vico-bg-base: #101a14; --vico-bg-raised: #16241c; --vico-bg-elevated: #1c2e24; --vico-bg-hover: #284030; --vico-border: #243828; --vico-border-hover: #345238; --vico-border-focus: #4ade80; --vico-text-primary: #ecfdf5; --vico-text-secondary: #a3c4b0; --vico-text-muted: #6b8f78; --vico-accent-blue: #60a5fa; --vico-accent-blue-light: #93c5fd; --vico-accent-green: #4ade80; --vico-accent-green-light: #86efac; --vico-accent-amber: #fbbf24; --vico-accent-amber-light: #fcd34d; --vico-accent-red: #f87171; --vico-accent-red-dark: #ef4444; --vico-accent-purple: #c084fc; --vico-accent-purple-light: #d8b4fe; --vico-accent-cyan: #2dd4bf; --vico-glow-blue: rgba(96, 165, 250, 0.2); --vico-glow-green: rgba(74, 222, 128, 0.25); --vico-glow-amber: rgba(251, 191, 36, 0.2); --vico-glow-red: rgba(248, 113, 113, 0.2); --vico-glow-purple: rgba(192, 132, 252, 0.2); --vico-glow-cyan: rgba(45, 212, 191, 0.25); --vico-gradient-header: linear-gradient(180deg, #16241c 0%, #101a14 100%); --vico-gradient-blue: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); --vico-gradient-green: linear-gradient(135deg, #86efac 0%, #4ade80 100%); --vico-gradient-amber: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); --vico-gradient-purple: linear-gradient(135deg, #c084fc 0%, #a855f7 100%); --vico-scrollbar-thumb: rgba(74, 222, 128, 0.3); --vico-scrollbar-thumb-hover: rgba(74, 222, 128, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ OCEAN THEME - Deep Teal/Aqua ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="ocean"] { --vico-bg-deep: #071318; --vico-bg-base: #0c1a20; --vico-bg-raised: #12252d; --vico-bg-elevated: #183038; --vico-bg-hover: #234248; --vico-border: #1e3a42; --vico-border-hover: #2d5560; --vico-border-focus: #22d3ee; --vico-text-primary: #e0f7fa; --vico-text-secondary: #90cad5; --vico-text-muted: #5a9aa5; --vico-accent-blue: #06b6d4; --vico-accent-blue-light: #22d3ee; --vico-accent-green: #10b981; --vico-accent-green-light: #34d399; --vico-accent-amber: #fbbf24; --vico-accent-amber-light: #fcd34d; --vico-accent-red: #f43f5e; --vico-accent-red-dark: #e11d48; --vico-accent-purple: #a78bfa; --vico-accent-purple-light: #c4b5fd; --vico-accent-cyan: #22d3ee; --vico-glow-blue: rgba(6, 182, 212, 0.25); --vico-glow-green: rgba(16, 185, 129, 0.2); --vico-glow-amber: rgba(251, 191, 36, 0.2); --vico-glow-red: rgba(244, 63, 94, 0.2); --vico-glow-purple: rgba(167, 139, 250, 0.2); --vico-glow-cyan: rgba(34, 211, 238, 0.25); --vico-gradient-header: linear-gradient(180deg, #12252d 0%, #0c1a20 100%); --vico-gradient-blue: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); --vico-gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%); --vico-gradient-amber: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); --vico-gradient-purple: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); --vico-scrollbar-thumb: rgba(34, 211, 238, 0.3); --vico-scrollbar-thumb-hover: rgba(34, 211, 238, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ MONOCHROME THEME - Elegant Grayscale ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="monochrome"] { --vico-bg-deep: #0a0a0a; --vico-bg-base: #121212; --vico-bg-raised: #1e1e1e; --vico-bg-elevated: #2a2a2a; --vico-bg-hover: #3a3a3a; --vico-border: #333333; --vico-border-hover: #4a4a4a; --vico-border-focus: #888888; --vico-text-primary: #f0f0f0; --vico-text-secondary: #a0a0a0; --vico-text-muted: #666666; --vico-accent-blue: #a0a0a0; --vico-accent-blue-light: #c0c0c0; --vico-accent-green: #90ee90; --vico-accent-green-light: #b0ffb0; --vico-accent-amber: #e0c080; --vico-accent-amber-light: #f0d090; --vico-accent-red: #e07070; --vico-accent-red-dark: #c05050; --vico-accent-purple: #c0a0d0; --vico-accent-purple-light: #d0b0e0; --vico-accent-cyan: #80d0d0; --vico-glow-blue: rgba(160, 160, 160, 0.15); --vico-glow-green: rgba(144, 238, 144, 0.15); --vico-glow-amber: rgba(224, 192, 128, 0.15); --vico-glow-red: rgba(224, 112, 112, 0.15); --vico-glow-purple: rgba(192, 160, 208, 0.15); --vico-glow-cyan: rgba(128, 208, 208, 0.15); --vico-gradient-header: linear-gradient(180deg, #1e1e1e 0%, #121212 100%); --vico-gradient-blue: linear-gradient(135deg, #888888 0%, #666666 100%); --vico-gradient-green: linear-gradient(135deg, #90ee90 0%, #70c070 100%); --vico-gradient-amber: linear-gradient(135deg, #e0c080 0%, #c0a060 100%); --vico-gradient-purple: linear-gradient(135deg, #c0a0d0 0%, #a080b0 100%); --vico-scrollbar-thumb: rgba(160, 160, 160, 0.3); --vico-scrollbar-thumb-hover: rgba(160, 160, 160, 0.5); } /* ═══════════════════════════════════════════════════════════════════════════ NORD THEME - Arctic, North-Bluish ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="nord"] { --vico-bg-deep: #242933; --vico-bg-base: #2e3440; --vico-bg-raised: #3b4252; --vico-bg-elevated: #434c5e; --vico-bg-hover: #4c566a; --vico-border: #4c566a; --vico-border-hover: #5e6779; --vico-border-focus: #88c0d0; --vico-text-primary: #eceff4; --vico-text-secondary: #d8dee9; --vico-text-muted: #7b88a1; --vico-accent-blue: #81a1c1; --vico-accent-blue-light: #88c0d0; --vico-accent-green: #a3be8c; --vico-accent-green-light: #b5d19c; --vico-accent-amber: #ebcb8b; --vico-accent-amber-light: #f0d8a8; --vico-accent-red: #bf616a; --vico-accent-red-dark: #a54e56; --vico-accent-purple: #b48ead; --vico-accent-purple-light: #c9a8c4; --vico-accent-cyan: #8fbcbb; --vico-glow-blue: rgba(129, 161, 193, 0.2); --vico-glow-green: rgba(163, 190, 140, 0.2); --vico-glow-amber: rgba(235, 203, 139, 0.2); --vico-glow-red: rgba(191, 97, 106, 0.2); --vico-glow-purple: rgba(180, 142, 173, 0.2); --vico-glow-cyan: rgba(143, 188, 187, 0.2); --vico-gradient-header: linear-gradient(180deg, #3b4252 0%, #2e3440 100%); --vico-gradient-blue: linear-gradient(135deg, #81a1c1 0%, #5e81ac 100%); --vico-gradient-green: linear-gradient(135deg, #a3be8c 0%, #8fbf7f 100%); --vico-gradient-amber: linear-gradient(135deg, #ebcb8b 0%, #d7b56a 100%); --vico-gradient-purple: linear-gradient(135deg, #b48ead 0%, #9d7496 100%); --vico-scrollbar-thumb: rgba(136, 192, 208, 0.3); --vico-scrollbar-thumb-hover: rgba(136, 192, 208, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ CYBERPUNK THEME - Neon Future ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="cyberpunk"] { --vico-bg-deep: #0a0a0f; --vico-bg-base: #0f0f1a; --vico-bg-raised: #1a1a2e; --vico-bg-elevated: #252542; --vico-bg-hover: #2f2f55; --vico-border: #ff00ff30; --vico-border-hover: #ff00ff60; --vico-border-focus: #00ffff; --vico-text-primary: #ffffff; --vico-text-secondary: #b0b0d0; --vico-text-muted: #6060a0; --vico-accent-blue: #00ffff; --vico-accent-blue-light: #66ffff; --vico-accent-green: #00ff88; --vico-accent-green-light: #66ffaa; --vico-accent-amber: #ffff00; --vico-accent-amber-light: #ffff66; --vico-accent-red: #ff0055; --vico-accent-red-dark: #cc0044; --vico-accent-purple: #ff00ff; --vico-accent-purple-light: #ff66ff; --vico-accent-cyan: #00ffff; --vico-glow-blue: rgba(0, 255, 255, 0.3); --vico-glow-green: rgba(0, 255, 136, 0.3); --vico-glow-amber: rgba(255, 255, 0, 0.3); --vico-glow-red: rgba(255, 0, 85, 0.3); --vico-glow-purple: rgba(255, 0, 255, 0.3); --vico-glow-cyan: rgba(0, 255, 255, 0.3); --vico-gradient-header: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%); --vico-gradient-blue: linear-gradient(135deg, #00ffff 0%, #0088ff 100%); --vico-gradient-green: linear-gradient(135deg, #00ff88 0%, #00cc66 100%); --vico-gradient-amber: linear-gradient(135deg, #ffff00 0%, #ffcc00 100%); --vico-gradient-purple: linear-gradient(135deg, #ff00ff 0%, #cc00cc 100%); --vico-scrollbar-thumb: rgba(255, 0, 255, 0.4); --vico-scrollbar-thumb-hover: rgba(255, 0, 255, 0.7); } /* ═══════════════════════════════════════════════════════════════════════════ DRACULA THEME - Famous Dark Theme ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dracula"] { --vico-bg-deep: #1e1f29; --vico-bg-base: #282a36; --vico-bg-raised: #343746; --vico-bg-elevated: #3d4056; --vico-bg-hover: #44475a; --vico-border: #44475a; --vico-border-hover: #5a5e73; --vico-border-focus: #bd93f9; --vico-text-primary: #f8f8f2; --vico-text-secondary: #bfc0c5; --vico-text-muted: #6272a4; --vico-accent-blue: #8be9fd; --vico-accent-blue-light: #a4edfd; --vico-accent-green: #50fa7b; --vico-accent-green-light: #73fb95; --vico-accent-amber: #f1fa8c; --vico-accent-amber-light: #f4fba3; --vico-accent-red: #ff5555; --vico-accent-red-dark: #e64545; --vico-accent-purple: #bd93f9; --vico-accent-purple-light: #caa8fa; --vico-accent-cyan: #8be9fd; --vico-glow-blue: rgba(139, 233, 253, 0.25); --vico-glow-green: rgba(80, 250, 123, 0.25); --vico-glow-amber: rgba(241, 250, 140, 0.2); --vico-glow-red: rgba(255, 85, 85, 0.25); --vico-glow-purple: rgba(189, 147, 249, 0.25); --vico-glow-cyan: rgba(139, 233, 253, 0.25); --vico-gradient-header: linear-gradient(180deg, #343746 0%, #282a36 100%); --vico-gradient-blue: linear-gradient(135deg, #bd93f9 0%, #9a6dd7 100%); --vico-gradient-green: linear-gradient(135deg, #50fa7b 0%, #3dd968 100%); --vico-gradient-amber: linear-gradient(135deg, #f1fa8c 0%, #e6ef6a 100%); --vico-gradient-purple: linear-gradient(135deg, #ff79c6 0%, #e066a8 100%); --vico-scrollbar-thumb: rgba(189, 147, 249, 0.4); --vico-scrollbar-thumb-hover: rgba(189, 147, 249, 0.7); } /* ═══════════════════════════════════════════════════════════════════════════ ROSE PINE THEME - Soft Romantic ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="rosepine"] { --vico-bg-deep: #131020; --vico-bg-base: #191724; --vico-bg-raised: #1f1d2e; --vico-bg-elevated: #26233a; --vico-bg-hover: #2a2740; --vico-border: #403d52; --vico-border-hover: #524f67; --vico-border-focus: #c4a7e7; --vico-text-primary: #e0def4; --vico-text-secondary: #908caa; --vico-text-muted: #6e6a86; --vico-accent-blue: #9ccfd8; --vico-accent-blue-light: #b4d9df; --vico-accent-green: #31748f; --vico-accent-green-light: #4a8da8; --vico-accent-amber: #f6c177; --vico-accent-amber-light: #f8ce92; --vico-accent-red: #eb6f92; --vico-accent-red-dark: #d9587c; --vico-accent-purple: #c4a7e7; --vico-accent-purple-light: #d1b9ed; --vico-accent-cyan: #9ccfd8; --vico-glow-blue: rgba(156, 207, 216, 0.2); --vico-glow-green: rgba(49, 116, 143, 0.25); --vico-glow-amber: rgba(246, 193, 119, 0.2); --vico-glow-red: rgba(235, 111, 146, 0.25); --vico-glow-purple: rgba(196, 167, 231, 0.25); --vico-glow-cyan: rgba(156, 207, 216, 0.2); --vico-gradient-header: linear-gradient(180deg, #1f1d2e 0%, #191724 100%); --vico-gradient-blue: linear-gradient(135deg, #c4a7e7 0%, #a78bcc 100%); --vico-gradient-green: linear-gradient(135deg, #31748f 0%, #285e74 100%); --vico-gradient-amber: linear-gradient(135deg, #f6c177 0%, #eba855 100%); --vico-gradient-purple: linear-gradient(135deg, #eb6f92 0%, #d9587c 100%); --vico-scrollbar-thumb: rgba(196, 167, 231, 0.3); --vico-scrollbar-thumb-hover: rgba(196, 167, 231, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ TOKYO NIGHT THEME - Japanese City Nights ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="tokyo"] { --vico-bg-deep: #16161e; --vico-bg-base: #1a1b26; --vico-bg-raised: #24283b; --vico-bg-elevated: #2a2e42; --vico-bg-hover: #343b58; --vico-border: #3b4261; --vico-border-hover: #4a5075; --vico-border-focus: #7aa2f7; --vico-text-primary: #c0caf5; --vico-text-secondary: #9aa5ce; --vico-text-muted: #565f89; --vico-accent-blue: #7aa2f7; --vico-accent-blue-light: #99b4f9; --vico-accent-green: #9ece6a; --vico-accent-green-light: #b3d888; --vico-accent-amber: #e0af68; --vico-accent-amber-light: #e6bf86; --vico-accent-red: #f7768e; --vico-accent-red-dark: #e5667c; --vico-accent-purple: #bb9af7; --vico-accent-purple-light: #c9aef9; --vico-accent-cyan: #7dcfff; --vico-glow-blue: rgba(122, 162, 247, 0.25); --vico-glow-green: rgba(158, 206, 106, 0.2); --vico-glow-amber: rgba(224, 175, 104, 0.2); --vico-glow-red: rgba(247, 118, 142, 0.25); --vico-glow-purple: rgba(187, 154, 247, 0.25); --vico-glow-cyan: rgba(125, 207, 255, 0.25); --vico-gradient-header: linear-gradient(180deg, #24283b 0%, #1a1b26 100%); --vico-gradient-blue: linear-gradient(135deg, #7aa2f7 0%, #5d8ae0 100%); --vico-gradient-green: linear-gradient(135deg, #9ece6a 0%, #7eb852 100%); --vico-gradient-amber: linear-gradient(135deg, #e0af68 0%, #d19a4a 100%); --vico-gradient-purple: linear-gradient(135deg, #bb9af7 0%, #a07de0 100%); --vico-scrollbar-thumb: rgba(122, 162, 247, 0.3); --vico-scrollbar-thumb-hover: rgba(122, 162, 247, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ SYNTHWAVE THEME - 80s Retro Neon ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="synthwave"] { --vico-bg-deep: #12091f; --vico-bg-base: #1a1025; --vico-bg-raised: #241734; --vico-bg-elevated: #2e1f42; --vico-bg-hover: #3a2850; --vico-border: #4a3060; --vico-border-hover: #5e4078; --vico-border-focus: #f92aad; --vico-text-primary: #fff0f5; --vico-text-secondary: #c8a8d0; --vico-text-muted: #7a5988; --vico-accent-blue: #36f9f6; --vico-accent-blue-light: #5ffaf8; --vico-accent-green: #72f1b8; --vico-accent-green-light: #8ef4c7; --vico-accent-amber: #fede5d; --vico-accent-amber-light: #fee57d; --vico-accent-red: #fe4450; --vico-accent-red-dark: #e03a45; --vico-accent-purple: #f92aad; --vico-accent-purple-light: #fa55bd; --vico-accent-cyan: #36f9f6; --vico-glow-blue: rgba(54, 249, 246, 0.3); --vico-glow-green: rgba(114, 241, 184, 0.25); --vico-glow-amber: rgba(254, 222, 93, 0.25); --vico-glow-red: rgba(254, 68, 80, 0.3); --vico-glow-purple: rgba(249, 42, 173, 0.35); --vico-glow-cyan: rgba(54, 249, 246, 0.3); --vico-gradient-header: linear-gradient(180deg, #241734 0%, #1a1025 100%); --vico-gradient-blue: linear-gradient(135deg, #f92aad 0%, #d91e94 100%); --vico-gradient-green: linear-gradient(135deg, #72f1b8 0%, #50d89a 100%); --vico-gradient-amber: linear-gradient(135deg, #fede5d 0%, #f5c840 100%); --vico-gradient-purple: linear-gradient(135deg, #36f9f6 0%, #20d4d1 100%); --vico-scrollbar-thumb: rgba(249, 42, 173, 0.4); --vico-scrollbar-thumb-hover: rgba(249, 42, 173, 0.7); } /* ═══════════════════════════════════════════════════════════════════════════ GRUVBOX THEME - Retro Warm ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="gruvbox"] { --vico-bg-deep: #1d2021; --vico-bg-base: #282828; --vico-bg-raised: #32302f; --vico-bg-elevated: #3c3836; --vico-bg-hover: #504945; --vico-border: #504945; --vico-border-hover: #665c54; --vico-border-focus: #fabd2f; --vico-text-primary: #ebdbb2; --vico-text-secondary: #bdae93; --vico-text-muted: #928374; --vico-accent-blue: #83a598; --vico-accent-blue-light: #9bb8ac; --vico-accent-green: #b8bb26; --vico-accent-green-light: #c5c84a; --vico-accent-amber: #fabd2f; --vico-accent-amber-light: #fbca55; --vico-accent-red: #fb4934; --vico-accent-red-dark: #cc241d; --vico-accent-purple: #d3869b; --vico-accent-purple-light: #dda0af; --vico-accent-cyan: #8ec07c; --vico-glow-blue: rgba(131, 165, 152, 0.25); --vico-glow-green: rgba(184, 187, 38, 0.2); --vico-glow-amber: rgba(250, 189, 47, 0.25); --vico-glow-red: rgba(251, 73, 52, 0.25); --vico-glow-purple: rgba(211, 134, 155, 0.25); --vico-glow-cyan: rgba(142, 192, 124, 0.2); --vico-gradient-header: linear-gradient(180deg, #32302f 0%, #282828 100%); --vico-gradient-blue: linear-gradient(135deg, #fabd2f 0%, #d79921 100%); --vico-gradient-green: linear-gradient(135deg, #b8bb26 0%, #98971a 100%); --vico-gradient-amber: linear-gradient(135deg, #fe8019 0%, #d65d0e 100%); --vico-gradient-purple: linear-gradient(135deg, #d3869b 0%, #b16286 100%); --vico-scrollbar-thumb: rgba(250, 189, 47, 0.35); --vico-scrollbar-thumb-hover: rgba(250, 189, 47, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ CATPPUCCIN MOCHA THEME - Cozy Pastel ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="catppuccin"] { --vico-bg-deep: #11111b; --vico-bg-base: #1e1e2e; --vico-bg-raised: #313244; --vico-bg-elevated: #45475a; --vico-bg-hover: #585b70; --vico-border: #45475a; --vico-border-hover: #585b70; --vico-border-focus: #cba6f7; --vico-text-primary: #cdd6f4; --vico-text-secondary: #bac2de; --vico-text-muted: #6c7086; --vico-accent-blue: #89b4fa; --vico-accent-blue-light: #a4c3fb; --vico-accent-green: #a6e3a1; --vico-accent-green-light: #b8e9b4; --vico-accent-amber: #f9e2af; --vico-accent-amber-light: #fae8bf; --vico-accent-red: #f38ba8; --vico-accent-red-dark: #e06c88; --vico-accent-purple: #cba6f7; --vico-accent-purple-light: #d6b8f9; --vico-accent-cyan: #94e2d5; --vico-glow-blue: rgba(137, 180, 250, 0.25); --vico-glow-green: rgba(166, 227, 161, 0.2); --vico-glow-amber: rgba(249, 226, 175, 0.2); --vico-glow-red: rgba(243, 139, 168, 0.25); --vico-glow-purple: rgba(203, 166, 247, 0.25); --vico-glow-cyan: rgba(148, 226, 213, 0.2); --vico-gradient-header: linear-gradient(180deg, #313244 0%, #1e1e2e 100%); --vico-gradient-blue: linear-gradient(135deg, #cba6f7 0%, #b48bdf 100%); --vico-gradient-green: linear-gradient(135deg, #a6e3a1 0%, #8bd787 100%); --vico-gradient-amber: linear-gradient(135deg, #f9e2af 0%, #f5d38a 100%); --vico-gradient-purple: linear-gradient(135deg, #f5c2e7 0%, #e8a8d5 100%); --vico-scrollbar-thumb: rgba(203, 166, 247, 0.35); --vico-scrollbar-thumb-hover: rgba(203, 166, 247, 0.6); } /* ═══════════════════════════════════════════════════════════════════════════ AURORA THEME - Northern Lights ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="aurora"] { --vico-bg-deep: #0a1014; --vico-bg-base: #0f171c; --vico-bg-raised: #152028; --vico-bg-elevated: #1c2a34; --vico-bg-hover: #243540; --vico-border: #2a4050; --vico-border-hover: #3a5568; --vico-border-focus: #88ffcc; --vico-text-primary: #e8f4f0; --vico-text-secondary: #a8c8c0; --vico-text-muted: #607878; --vico-accent-blue: #5588ff; --vico-accent-blue-light: #77a0ff; --vico-accent-green: #88ffcc; --vico-accent-green-light: #a0ffd8; --vico-accent-amber: #ffdd88; --vico-accent-amber-light: #ffe4a0; --vico-accent-red: #ff6688; --vico-accent-red-dark: #e05070; --vico-accent-purple: #cc88ff; --vico-accent-purple-light: #d8a0ff; --vico-accent-cyan: #66eeff; --vico-glow-blue: rgba(85, 136, 255, 0.25); --vico-glow-green: rgba(136, 255, 204, 0.3); --vico-glow-amber: rgba(255, 221, 136, 0.2); --vico-glow-red: rgba(255, 102, 136, 0.25); --vico-glow-purple: rgba(204, 136, 255, 0.25); --vico-glow-cyan: rgba(102, 238, 255, 0.3); --vico-gradient-header: linear-gradient(180deg, #152028 0%, #0f171c 100%); --vico-gradient-blue: linear-gradient(135deg, #88ffcc 0%, #55ddaa 100%); --vico-gradient-green: linear-gradient(135deg, #66eeff 0%, #44ccdd 100%); --vico-gradient-amber: linear-gradient(135deg, #ffdd88 0%, #f0c060 100%); --vico-gradient-purple: linear-gradient(135deg, #cc88ff 0%, #aa66dd 100%); --vico-scrollbar-thumb: rgba(136, 255, 204, 0.35); --vico-scrollbar-thumb-hover: rgba(136, 255, 204, 0.6); } @font-face { font-family: 'Roboto-Bold'; src: url(f80816a5455d171f948d.ttf) format('truetype'); font-weight: 700; font-style: normal; } body, html { margin: 0; padding: 0; overflow: hidden; font-family: var(--primary-font); background: #000; } #scene-container { width: 100%; height: 100%; overflow: hidden; background: #000; } #scene-container canvas { display: block; background: #000; } /* ============================================ GLOBAL TEXT SELECTION CONTROL Prevents accidental text selection during interactions (drag, click, etc.) ============================================ */ /* Disable text selection globally */ *, *::before, *::after { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Re-enable text selection for inputs and editable content */ input, textarea, [contenteditable="true"], .selectable-text, pre, code { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* Ensure cursor shows text selection is available */ input, textarea, [contenteditable="true"] { cursor: text; } /* Utility class for enabling selection on specific elements */ .allow-select { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } /* Utility class for all selection (copy-paste entire blocks) */ .allow-select-all { -webkit-user-select: all !important; -moz-user-select: all !important; -ms-user-select: all !important; user-select: all !important; } /* Shared minimal scrollbar. * * ~20 editor stylesheets each re-declared this same themed scrollbar on their own * selectors (the comments in several literally said "matches learningUISystem.css"). * This is the single home for it, applied globally and driven by the theme-aware * --vico-scrollbar-* tokens (see tokens.css), so every scrollable surface is consistent. * * Components that need a DIFFERENT scrollbar still win: a more specific selector * (e.g. `.seq-autocomplete-dropdown::-webkit-scrollbar-thumb`) overrides these defaults. */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--vico-scrollbar-thumb) transparent; } /* WebKit / Blink */ ::-webkit-scrollbar { width: var(--vico-scrollbar-width, 6px); height: var(--vico-scrollbar-width, 6px); } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--vico-scrollbar-thumb, rgba(97, 175, 239, 0.3)); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--vico-scrollbar-thumb-hover, rgba(97, 175, 239, 0.6)); } ::-webkit-scrollbar-corner { background: transparent; } #dot-cursor { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background-color: var(--vico-text-primary); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1000; } .tooltip-icon { cursor: pointer; display: inline-block; position: relative; transform: translateY(-2px); font-size: 12px; margin-left: 5px; } .tooltip-text { visibility: hidden; width: 200px; max-width: 200px; background-color: var(--vico-bg-deep); font-size: 12px; color: var(--vico-text-primary); text-align: center; border-radius: var(--vico-radius-md); padding: 5px; position: absolute; z-index: 100; white-space: normal; opacity: 0; transition: opacity 0.3s ease-in-out; } .tooltip-icon:hover .tooltip-text, .tooltip-icon:focus .tooltip-text { visibility: visible; opacity: 1; } /* Generic spin centered on element already translated to center */ @keyframes spin-center { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* Blink utility */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .is-spinning { animation: spin-center 1s linear infinite; } .is-blinking { animation: blink 1s infinite; } /* Pulsing outline for attention cues (used by pulseUIElement) */ .ui-pulse-outline { position: relative; outline: 2px solid #ffb800 !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.6) !important; animation: uiPulseOutlineAnim 0.95s ease-in-out infinite alternate; transform-origin: center; } @keyframes uiPulseOutlineAnim { 0% { box-shadow: 0 0 0 2px rgba(255, 184, 0, 0.65); transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 184, 0, 0.6)); } 50% { box-shadow: 0 0 0 12px rgba(255, 184, 0, 0.0); transform: scale(1.03); filter: drop-shadow(0 0 12px rgba(255, 184, 0, 0.35)); } 100% { box-shadow: 0 0 0 2px rgba(255, 184, 0, 0.65); transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 184, 0, 0.6)); } } .loading-spinner { border: 5px solid var(--vico-accent-blue); border-top: 5px solid var(--vico-accent-blue-light, rgba(96, 165, 250, 0.3)); border-radius: 50%; width: 80px; height: 80px; animation: spin-center 0.8s linear infinite; position: fixed; z-index: var(--vico-z-modal); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* Base button primitive */ .btn, .popup-button, .abp-button, .quiz-submit, .step-details-ok-button, .step-nav-back, .step-nav-replay, .step-nav-proceed, .join-room-btn, .create-now-btn, .abp-select-button, .abp-delete-button, .um-button, .popup-button.edit-user-btn, .ss-details-btn, .ss-room-join-btn, .lesp-btn, .lesp-add-btn, .lesp-action-btn, .lesp-edit-btn, .lesp-delete-btn, .lesp-test-btn, .lesp-test-step-btn, .lesp-stop-step-btn, .lp-button, .lp-button-secondary, .settings-ar-button, .settings-reset-button, .ufm-button, .ufm-delete-button, .uap-button.uap-submit-btn, .settings-cache-button, .settings-clear-button, .dropdown-item, .qesp-remove-question-btn, .qesp-remove-answer-btn, .qesp-browse-image-btn, .qesp-clear-image-btn, .qesp-add-question-btn, .qesp-add-answer-btn, .qesp-collapse-btn { padding: var(--vico-space-md) var(--vico-space-xl); border: none; border-radius: var(--vico-radius-md); cursor: pointer; font-size: 1rem; font-weight: 600; font-family: var(--primary-font); transition: background var(--vico-transition-fast), color var(--vico-transition-fast), transform 0.1s ease, box-shadow var(--vico-transition-fast); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; pointer-events: auto; box-sizing: border-box; } /* Primary */ .btn-primary, .popup-button, .quiz-submit { background: var(--vico-gradient-blue); color: #fff; box-shadow: 0 2px 8px rgba(97, 175, 239, 0.3); } .btn-primary:hover, .popup-button:hover:not(:disabled), .quiz-submit:hover:not(:disabled) { background: linear-gradient(135deg, var(--vico-accent-blue-light) 0%, var(--vico-accent-blue) 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(97, 175, 239, 0.4); } .btn-primary:disabled, .popup-button:disabled, .quiz-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; } /* Ghost / neutral */ .btn-ghost { background: var(--vico-bg-raised); color: var(--vico-text-secondary); border: 1px solid var(--vico-border); text-align: start; } .btn-ghost:hover { background: var(--vico-bg-elevated); color: var(--vico-text-primary); box-shadow: var(--vico-shadow-sm); transform: translateY(-1px); } /* Blink utility */ .btn.blink { animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Containers */ .popup-base, .fullscreen-overlay-container { display: none; position: fixed; inset: 0; z-index: var(--vico-z-side-panel); justify-content: center; align-items: center; font-family: var(--primary-font); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .popup-base.active, .fullscreen-overlay-container.active { opacity: 1; visibility: visible; display: flex; pointer-events: auto; } /* Overlay */ .popup-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); z-index: var(--vico-z-side-panel); } /* Content shells */ .popup-content { position: relative; pointer-events: all; background-color: var(--vico-bg-base); border: 1px solid var(--vico-border); border-radius: var(--vico-radius-xl); box-shadow: var(--vico-shadow-xl); width: 100%; max-width: min(560px, 90vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; color: var(--vico-text-primary); transform: scale(0.1); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; } .popup-base.active .popup-content, .fullscreen-overlay-container.active .popup-content { transform: scale(1); } /* Shared scrollbars */ :where(.popup-content, .popup-body, .ui-frame, [class*="popup-body"], [class*="popup-content"])::-webkit-scrollbar { width: var(--vico-scrollbar-width); } :where(.popup-content, .popup-body, .ui-frame, [class*="popup-body"], [class*="popup-content"])::-webkit-scrollbar-track { background: transparent; } :where(.popup-content, .popup-body, .ui-frame, [class*="popup-body"], [class*="popup-content"])::-webkit-scrollbar-thumb { background: var(--vico-scrollbar-thumb); border-radius: 3px; } :where(.popup-content, .popup-body, .ui-frame, [class*="popup-body"], [class*="popup-content"])::-webkit-scrollbar-thumb:hover { background: var(--vico-scrollbar-thumb-hover); } /* Occluded state */ .popup-base.popup-occluded > .popup-content { opacity: 0.4; pointer-events: none; } /* Utility: shared scrollable area */ .scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Popup Header */ .popup-header { padding: var(--vico-space-md) var(--vico-space-xl); border-bottom: 1px solid var(--vico-border); display: flex; justify-content: space-between; align-items: center; background: var(--vico-gradient-header); } .popup-header h2 { margin: 0; color: var(--vico-text-primary); font-size: 1.25rem; font-weight: 600; background: linear-gradient(135deg, var(--vico-text-primary) 0%, var(--vico-accent-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .header-buttons { display: flex; gap: var(--vico-space-md); } /* Close Button */ .close-btn { background: var(--vico-bg-raised); border: 1px solid var(--vico-border); cursor: pointer; color: var(--vico-text-muted); transition: background var(--vico-transition-fast), border-color var(--vico-transition-fast), color var(--vico-transition-fast), transform 0.2s ease; padding: var(--vico-space-sm); border-radius: var(--vico-radius-md); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .close-btn:hover { background: var(--vico-bg-elevated); border-color: var(--vico-accent-red); color: var(--vico-accent-red); transform: rotate(90deg); } .close-btn svg { display: block; width: 18px; height: 18px; } .popup-body { padding: var(--vico-space-xl); background-color: var(--vico-bg-deep); display: flex; flex-direction: column; overflow-y: auto; } /* Form Elements */ .popup-input { width: 100%; padding: var(--vico-space-md) var(--vico-space-lg); border: 1px solid var(--vico-border); border-radius: var(--vico-radius-md); background-color: var(--vico-bg-raised); color: var(--vico-text-primary); margin-bottom: var(--vico-space-lg); transition: border-color var(--vico-transition-fast), background-color var(--vico-transition-fast); } .popup-input:focus { outline: none; border-color: var(--vico-accent-blue); background-color: var(--vico-bg-elevated); box-shadow: 0 0 0 2px var(--vico-glow-blue); } /* Content popup style variants. Keep these as root modifier classes so scene-meta annotations, Blender clickables, and quizzes share names. */ .popup-base.style-compact .popup-content { max-width: min(420px, 88vw); max-height: 76vh; border-radius: var(--vico-radius-lg); box-shadow: var(--vico-shadow-lg); } .popup-base.style-compact .popup-header { padding: var(--vico-space-sm) var(--vico-space-lg); } .popup-base.style-compact .popup-body { padding: var(--vico-space-lg); } .popup-base.style-minimal { align-items: flex-start; justify-content: flex-start; pointer-events: none; padding: var(--vico-space-xl); } .popup-base.style-minimal .popup-content { pointer-events: auto; max-width: min(460px, 42vw); max-height: 70vh; background-color: rgba(18, 20, 26, 0.58); border: 1px solid rgba(97, 175, 239, 0.16); border-radius: var(--vico-radius-lg); box-shadow: var(--vico-shadow-md); } .popup-base.style-minimal .popup-header { background: transparent; border-bottom: 1px solid rgba(97, 175, 239, 0.12); padding: var(--vico-space-sm) var(--vico-space-lg); } .popup-base.style-minimal .popup-header h2 { font-size: 1rem; } .popup-base.style-minimal .close-btn { width: 28px; height: 28px; padding: var(--vico-space-xs); } .popup-base.style-glass .popup-content { max-width: min(620px, 88vw); background: rgba(26, 29, 36, 0.78); border-color: rgba(97, 175, 239, 0.28); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48), 0 0 0 1px var(--vico-glow-blue); } .popup-base.style-glass .popup-header, .popup-base.style-glass .popup-body { background: transparent; } .popup-base.style-wide .popup-content { max-width: min(920px, 92vw); } .popup-base.style-wide .popup-body { max-height: 72vh; } .popup-base.style-large .popup-content { max-width: min(1080px, 94vw); max-height: 94vh; } .popup-base.style-large .popup-body { min-height: min(560px, 68vh); } .popup-base.style-sheet { justify-content: flex-end; align-items: stretch; } .popup-base.style-sheet .popup-content { max-width: min(540px, 92vw); max-height: 100vh; height: 100vh; border-radius: var(--vico-radius-xl) 0 0 var(--vico-radius-xl); border-right: none; } .popup-base.style-spotlight .popup-content { max-width: min(760px, 90vw); background: radial-gradient(circle at top left, var(--vico-glow-blue-strong), transparent 36%), var(--vico-bg-base); border-color: var(--vico-accent-blue); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 28px var(--vico-glow-blue-strong); } .popup-base.style-spotlight .popup-header { background: linear-gradient(135deg, var(--vico-glow-blue-subtle), rgba(26, 29, 36, 0.92)); } .popup-base.style-translucent .popup-content { max-width: min(640px, 90vw); background: rgba(18, 20, 26, 0.68); border-color: rgba(228, 232, 239, 0.12); box-shadow: var(--vico-shadow-md); } .popup-base.style-translucent .popup-header { background: rgba(34, 38, 47, 0.48); } @media (max-width: 768px) { .popup-content { max-width: 95%; max-height: 95%; } .popup-header { padding: 15px; } .popup-header h2 { font-size: 16px; } .popup-body { margin: 2%; } .popup-button { width: 100%; margin-bottom: 10px; } .popup-base.style-minimal .popup-body { margin: 0; } .popup-base.style-minimal .text-content { margin: 0; } } /* Shared confirm dialog — the branded replacement for native window.confirm(). Stacks above every other popup (orchestrator/state-machine overlays included). */ .vico-confirm-overlay { position: fixed; inset: 0; z-index: 2147483000; /* above the highest app overlay (orchestrator var(--orc-overlay-z)) */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 9, 12, 0.55); backdrop-filter: blur(2px); animation: vico-confirm-fade 0.12s ease-out; } .vico-confirm-box { box-sizing: border-box; width: min(440px, 100%); padding: 22px 22px 18px; background: var(--vico-bg-elevated, #282d38); color: var(--vico-text-primary, #e4e8ef); border: 1px solid var(--vico-border, #2d3340); border-radius: var(--vico-radius-lg, 10px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); font-family: var(--primary-font, sans-serif); animation: vico-confirm-pop 0.12s ease-out; } .vico-confirm-title { margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--vico-text-primary, #e4e8ef); } .vico-confirm-message { display: block; margin-bottom: 20px; font-size: 14px; line-height: 1.5; color: var(--vico-text-secondary, #8891a0); white-space: pre-line; /* honour \n in legacy confirm() messages */ word-break: break-word; } .vico-prompt-label { margin-bottom: 8px; } .vico-prompt-input { display: block; box-sizing: border-box; width: 100%; margin: 0 0 18px; padding: 10px 12px; background: var(--vico-bg-panel, #1f2430); color: var(--vico-text-primary, #e4e8ef); border: 1px solid var(--vico-border, #2d3340); border-radius: var(--vico-radius-md, 6px); font: inherit; } .vico-prompt-input:focus { outline: 2px solid var(--vico-border-focus, #61afef); outline-offset: 1px; } .vico-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; } .vico-confirm-btn { padding: 8px 16px; border: 1px solid transparent; border-radius: var(--vico-radius-md, 6px); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .vico-confirm-cancel { background: transparent; border-color: var(--vico-border, #2d3340); color: var(--vico-text-primary, #e4e8ef); } .vico-confirm-cancel:hover { background: var(--vico-bg-hover, #3a4150); } .vico-confirm-primary { background: var(--vico-accent-blue, #61afef); color: #0d1117; } .vico-confirm-primary:hover { background: var(--vico-accent-blue-light, #7cc4ff); } .vico-confirm-danger { background: var(--vico-accent-red, #e06c75); color: #0d1117; } .vico-confirm-danger:hover { background: var(--vico-accent-red-dark, #c55a62); } .vico-confirm-btn:focus-visible { outline: 2px solid var(--vico-border-focus, #61afef); outline-offset: 2px; } @keyframes vico-confirm-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes vico-confirm-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* loginPopupManager.css - Uses Vico design tokens */ .lp-login-section { display: none; margin-bottom: var(--vico-space-xl); } .lp-description { margin-bottom: var(--vico-space-xl); color: var(--vico-text-secondary); font-size: 16px; } .lp-input-group { position: relative; margin-bottom: 25px; display: flex; } .lp-input { width: 100%; padding: var(--vico-space-md) var(--vico-space-lg); border: 1px solid var(--vico-border); border-radius: var(--vico-radius-md); font-size: 16px; background-color: var(--vico-bg-raised); color: var(--vico-text-primary); transition: border-color var(--vico-transition-fast), background-color var(--vico-transition-fast); } .lp-input:focus { outline: none; border-color: var(--vico-accent-blue); background-color: var(--vico-bg-elevated); box-shadow: 0 0 0 2px var(--vico-glow-blue); } .lp-input-label { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--vico-text-muted); pointer-events: none; transition: top var(--vico-transition-fast), left var(--vico-transition-fast), font-size var(--vico-transition-fast), color var(--vico-transition-fast); } .lp-input:focus + .lp-input-label, .lp-input:not(:placeholder-shown) + .lp-input-label { top: -10px; left: 10px; font-size: 14px; background-color: var(--vico-bg-base); padding: 0 5px; color: var(--vico-accent-blue); } .lp-button { width: 100%; background: var(--vico-gradient-blue); color: #fff; padding: var(--vico-space-md) var(--vico-space-xl); border: none; border-radius: var(--vico-radius-md); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background var(--vico-transition-fast), transform 0.1s ease, box-shadow var(--vico-transition-fast); box-shadow: 0 2px 8px rgba(97, 175, 239, 0.3); } .lp-button:hover { background: linear-gradient(135deg, var(--vico-accent-blue-light) 0%, var(--vico-accent-blue) 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(97, 175, 239, 0.4); } .lp-button-secondary { margin-top: var(--vico-space-lg); background: var(--vico-bg-raised); color: var(--vico-text-secondary); border: 1px solid var(--vico-border); box-shadow: none; } .lp-button-secondary:hover { background: var(--vico-bg-elevated); color: var(--vico-text-primary); box-shadow: none; } #logged-in-username { font-weight: bold; color: var(--vico-accent-blue); } .notification { padding: 5px 10px; font-family: var(--primary-font); border-radius: var(--vico-radius-sm); color: var(--vico-text-primary); background-color: var(--vico-bg-elevated); position: fixed; z-index: var(--vico-z-dropdown); box-shadow: var(--vico-shadow-md); } .notification-flex-container { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; } .notification-text { margin-right: 10px; } #toast-container { position: fixed; bottom: var(--vico-space-xl); left: var(--vico-space-xl); z-index: var(--vico-z-modal); display: flex; flex-direction: column; align-items: flex-start; gap: var(--vico-space-sm); width: min(360px, calc(100vw - 2 * var(--vico-space-xl))); pointer-events: none; } .toast { --toast-accent: var(--vico-accent-blue); --toast-glow: var(--vico-glow-blue); display: inline-flex; align-items: center; max-width: 100%; min-height: 30px; padding: 7px 12px; color: var(--vico-text-primary); font-family: var(--primary-font); font-size: 0.78rem; line-height: 1.25; letter-spacing: 0.01em; background: var(--vico-bg-raised); border: 1px solid var(--vico-border); border-left-color: var(--toast-accent); border-radius: var(--vico-radius-lg); box-shadow: var(--vico-shadow-md), 0 0 0 1px var(--toast-glow); opacity: 0; pointer-events: auto; transform: translateY(12px) scale(0.98); transition: opacity var(--vico-transition-slow), transform var(--vico-transition-slow), border-color var(--vico-transition-fast); } .toast-visible { opacity: 1; transform: translateY(0) scale(1); } .toast-icon { flex: 0 0 auto; margin-right: var(--vico-space-sm); color: var(--toast-accent); font-size: 0.9rem; line-height: 1; } .toast-message { overflow: hidden; text-overflow: ellipsis; } /* Optional action button (e.g. "Undo"), shares the toast's accent colour. */ .toast-action-btn { flex: 0 0 auto; margin-left: var(--vico-space-md); padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--toast-accent) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--toast-accent) 16%, transparent); color: var(--toast-accent); font-family: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: background var(--vico-transition-fast); } .toast-action-btn:hover { background: color-mix(in srgb, var(--toast-accent) 28%, transparent); } .toast-action-btn:focus-visible { outline: 2px solid var(--toast-accent); outline-offset: -2px; } .toast-success { --toast-accent: var(--vico-accent-green); --toast-glow: var(--vico-glow-green); } .toast-error { --toast-accent: var(--vico-accent-red); --toast-glow: var(--vico-glow-red); } .toast-warning { --toast-accent: var(--vico-accent-amber); --toast-glow: var(--vico-glow-amber); } /* infoTooltip.css - Info tooltip component using Vico design tokens */ #tooltip-root { position: relative; z-index: var(--vico-z-priority-ui); } /* Container that holds the info icon */ .info-tooltip-container { display: inline-flex; align-items: center; margin-left: var(--vico-space-sm); position: relative; } /* The icon/button itself */ .info-tooltip-icon { background: none; border: none; padding: var(--vico-space-xs); cursor: pointer; color: var(--vico-text-muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color var(--vico-transition-fast), background-color var(--vico-transition-fast); } .info-tooltip-icon:hover { color: var(--vico-text-secondary); background-color: rgba(255, 255, 255, 0.1); } .info-tooltip-icon.active { color: var(--vico-accent-blue); background-color: var(--vico-glow-blue); } .info-tooltip-icon.urgent-continuous-blink { color: var(--vico-accent-amber); animation: info-pulse 1.2s infinite; box-shadow: 0 0 0 0 var(--vico-glow-amber); } .info-tooltip-icon.urgent-single-blink { color: var(--vico-accent-amber); animation: info-pulse 1.2s 1; box-shadow: 0 0 0 0 var(--vico-glow-amber); } @keyframes info-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 192, 123, 0.7); transform: scale(1); } 70% { box-shadow: 0 0 0 10px rgba(229, 192, 123, 0); transform: scale(1.15); } 100% { box-shadow: 0 0 0 0 rgba(229, 192, 123, 0); transform: scale(1); } } /* The content box that pops up */ .info-tooltip-content { position: fixed; background-color: var(--vico-bg-base); border: 1px solid var(--vico-border); border-radius: var(--vico-radius-md); padding: var(--vico-space-lg); width: 280px; box-shadow: var(--vico-shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--vico-transition-fast), visibility var(--vico-transition-fast); } /* Class to show content */ .info-tooltip-content.visible { opacity: 1; visibility: visible; pointer-events: auto; z-index: var(--vico-z-modal); } /* Tooltip content styling */ .info-tooltip-content h3 { color: var(--vico-text-primary); font-size: 16px; margin: 0 0 var(--vico-space-md) 0; font-weight: 600; } .info-tooltip-content p { color: var(--vico-text-secondary); font-size: 14px; line-height: 1.5; margin: 0 0 var(--vico-space-md) 0; } .info-tooltip-content ul { color: var(--vico-text-secondary); font-size: 14px; line-height: 1.5; margin: 0; padding-left: var(--vico-space-xl); } .info-tooltip-content li { margin-bottom: var(--vico-space-sm); } .info-tooltip-content li:last-child { margin-bottom: 0; } .info-tooltip-content strong { color: var(--vico-text-primary); font-weight: 600; }