/* ═══════════════════════════════════════════════════════════════════════ QDCode — Notepad++ Style Light Theme Activated when or Default theme — gives the platform a familiar Windows desktop feel. ═══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-0: #ffffff; --bg-1: #f0f0f0; --bg-2: #e8e8e8; --bg-3: #d4d4d4; --border: #c4c4c4; --border-light: #a0a0a0; --text-primary: #1e1e1e; --text-secondary: #3c3c3c; --text-muted: #707070; --accent: #0066cc; --accent-hover: #004c99; --accent-dim: #cce0f5; --green: #008000; --green-dim: #d4f0d4; --red: #c00000; --red-dim: #f5d4d4; --yellow: #b8860b; --purple: #6b1f9e; --shadow: 0 2px 6px rgba(0,0,0,.18); } /* ── Body / chrome ─────────────────────────────────────────────────────── */ [data-theme="light"] body { background: var(--bg-0); color: var(--text-primary); font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif; } /* ── Top navbar — classic gray menu look ──────────────────────────────── */ [data-theme="light"] .topnav { background: linear-gradient(to bottom, #fafafa 0%, #e6e6e6 100%); border-bottom: 1px solid #999; box-shadow: inset 0 -1px 0 #fff, 0 1px 0 #c8c8c8; } [data-theme="light"] .logo { color: #1e1e1e; } [data-theme="light"] .logo-icon { color: #0066cc; } [data-theme="light"] .nav-link { color: #1e1e1e; border-radius: 2px; padding: .35rem .7rem; } [data-theme="light"] .nav-link:hover { background: #d6e4f5; color: #003e80; } [data-theme="light"] .nav-link.active { background: #cce0f5; color: #003e80; } /* ── User chip ─────────────────────────────────────────────────────────── */ [data-theme="light"] .user-btn { background: #fafafa; border: 1px solid #999; color: #1e1e1e; border-radius: 2px; } [data-theme="light"] .user-btn:hover { background: #d6e4f5; border-color: #0066cc; } [data-theme="light"] .user-avatar { background: #0066cc; } /* ── Buttons — classic Windows beveled style ───────────────────────────── */ [data-theme="light"] .btn { border-radius: 2px; font-family: 'Segoe UI', Tahoma, sans-serif; } [data-theme="light"] .btn-primary { background: linear-gradient(to bottom, #4a90e2 0%, #2966bf 100%); border: 1px solid #1f4f9c; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.2); } [data-theme="light"] .btn-primary:hover { background: linear-gradient(to bottom, #5ba0f0 0%, #3577d0 100%); } [data-theme="light"] .btn-secondary { background: linear-gradient(to bottom, #fafafa 0%, #e0e0e0 100%); border: 1px solid #999; color: #1e1e1e; } [data-theme="light"] .btn-secondary:hover { background: linear-gradient(to bottom, #fff 0%, #ebebeb 100%); border-color: #555; } [data-theme="light"] .btn-success { background: linear-gradient(to bottom, #4caf50 0%, #2e7d32 100%); border: 1px solid #1b5e20; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.2); } [data-theme="light"] .btn-ghost { background: transparent; border: 1px solid #999; color: #1e1e1e; } [data-theme="light"] .btn-ghost:hover { background: #f0f0f0; border-color: #555; } [data-theme="light"] .btn-icon { color: #1e1e1e; } [data-theme="light"] .btn-icon:hover { background: #d6e4f5; color: #003e80; } [data-theme="light"] .toolbar-btn { background: linear-gradient(to bottom, #fafafa, #e0e0e0); border: 1px solid #999; color: #1e1e1e; border-radius: 2px; } [data-theme="light"] .toolbar-btn:hover { background: linear-gradient(to bottom, #fff, #ebebeb); border-color: #0066cc; color: #003e80; } /* ── Forms / inputs — classic field look ──────────────────────────────── */ [data-theme="light"] .form-input, [data-theme="light"] .form-select { background: #ffffff; border: 1px solid #888; color: #1e1e1e; border-radius: 2px; box-shadow: inset 1px 1px 0 #d4d4d4; font-family: 'Segoe UI', Tahoma, sans-serif; } [data-theme="light"] .form-input:focus, [data-theme="light"] .form-select:focus { border-color: #0066cc; outline: 1px solid #cce0f5; } [data-theme="light"] .form-label { color: #1e1e1e; font-weight: 500; } [data-theme="light"] .input-icon { color: #707070; } /* ── Panels / cards ───────────────────────────────────────────────────── */ [data-theme="light"] .panel, [data-theme="light"] .stat-card, [data-theme="light"] .chart-card, [data-theme="light"] .stats-section, [data-theme="light"] .metric-card, [data-theme="light"] .library-card, [data-theme="light"] .project-card, [data-theme="light"] .modal { background: #fafafa; border: 1px solid #c4c4c4; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.05); } [data-theme="light"] .panel-header, [data-theme="light"] .modal-header, [data-theme="light"] .chart-card-header { background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); border-bottom: 1px solid #c4c4c4; } [data-theme="light"] .project-card:hover { background: #f0f7ff; border-color: #0066cc; } [data-theme="light"] .stat-icon { background: #f0f0f0; color: #1e1e1e; } [data-theme="light"] .stat-icon.green { background: #d4f0d4; color: #006400; } [data-theme="light"] .stat-icon.blue { background: #cce0f5; color: #003e80; } [data-theme="light"] .stat-icon.red { background: #f5d4d4; color: #8b0000; } /* ── Editor (code area should still be readable in light mode) ────────── */ [data-theme="light"] .editor-topbar, [data-theme="light"] .editor-toolbar, [data-theme="light"] .chart-controls, [data-theme="light"] .data-toolbar, [data-theme="light"] .notebook-topbar { background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%); border-bottom: 1px solid #999; } [data-theme="light"] .editor-tab { background: #e0e0e0; border: 1px solid #999; border-bottom: none; border-radius: 3px 3px 0 0; color: #1e1e1e; margin-bottom: -1px; } [data-theme="light"] .editor-tab:hover { background: #ebebeb; } [data-theme="light"] .editor-tab.active { background: #fafafa; color: #003e80; font-weight: 600; border-bottom: 1px solid #fafafa; } [data-theme="light"] .editor-pane { border-right: 1px solid #999; } [data-theme="light"] .results-pane { background: #fafafa; } /* ── Sidebars ─────────────────────────────────────────────────────────── */ [data-theme="light"] .data-sidebar, [data-theme="light"] .notebook-sidebar, [data-theme="light"] .bt-history-sidebar { background: #f5f5f5; border-right: 1px solid #c4c4c4; } [data-theme="light"] .sidebar-header { background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%); border-bottom: 1px solid #999; color: #1e1e1e; font-weight: 600; } [data-theme="light"] .category-header { background: #e8e8e8; border-top: 1px solid #c4c4c4; color: #1e1e1e; } [data-theme="light"] .category-header:hover { background: #d6e4f5; } [data-theme="light"] .asset-item:hover { background: #d6e4f5; color: #003e80; } [data-theme="light"] .asset-item.active { background: #cce0f5; color: #003e80; font-weight: 600; } [data-theme="light"] .notebook-item { color: #1e1e1e; } [data-theme="light"] .notebook-item:hover { background: #d6e4f5; color: #003e80; } [data-theme="light"] .notebook-item.active { background: #cce0f5; color: #003e80; } /* ── Tables ───────────────────────────────────────────────────────────── */ [data-theme="light"] .data-table th { background: linear-gradient(to bottom, #f0f0f0 0%, #d8d8d8 100%); border-bottom: 1px solid #999; color: #1e1e1e; font-weight: 600; } [data-theme="light"] .data-table td { border-bottom: 1px solid #e0e0e0; } [data-theme="light"] .data-table tr:hover td { background: #f0f7ff; } /* ── Auth pages on light theme ────────────────────────────────────────── */ [data-theme="light"] .auth-bg { background: linear-gradient(135deg, #e8eef5 0%, #c8d8ec 100%); } [data-theme="light"] .auth-grid { background-image: linear-gradient(rgba(0,102,204,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,102,204,.05) 1px, transparent 1px); } [data-theme="light"] .auth-card { background: #fafafa; border: 1px solid #999; box-shadow: 0 4px 16px rgba(0,0,0,.15); } /* ── Tabs / status bar / dropdowns ────────────────────────────────────── */ [data-theme="light"] .user-dropdown { background: #fafafa; border: 1px solid #999; box-shadow: 2px 2px 6px rgba(0,0,0,.2); } [data-theme="light"] .dropdown-item { color: #1e1e1e; } [data-theme="light"] .dropdown-item:hover { background: #d6e4f5; color: #003e80; } [data-theme="light"] .dropdown-header { background: #f0f0f0; border-bottom: 1px solid #c4c4c4; } [data-theme="light"] .admin-tab, [data-theme="light"] .res-btn, [data-theme="light"] .ind-btn, [data-theme="light"] .chart-btn, [data-theme="light"] .tag-btn { background: linear-gradient(to bottom, #fafafa, #e0e0e0); border: 1px solid #999; color: #1e1e1e; } [data-theme="light"] .admin-tab.active, [data-theme="light"] .res-btn.active, [data-theme="light"] .ind-btn.active, [data-theme="light"] .chart-btn.active, [data-theme="light"] .tag-btn.active { background: linear-gradient(to bottom, #cce0f5, #99c2eb); border-color: #0066cc; color: #003e80; font-weight: 600; } /* ── Log / mono output ────────────────────────────────────────────────── */ [data-theme="light"] .log-output { background: #ffffff; color: #1e1e1e; border: 1px solid #c4c4c4; } [data-theme="light"] .log-error { color: #c00000; } [data-theme="light"] .log-debug { color: #707070; } /* ── Scrollbars ───────────────────────────────────────────────────────── */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0f0; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c0c0; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a0a0a0; } /* ── Theme toggle button ──────────────────────────────────────────────── */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-primary); padding: .35rem .55rem; border-radius: var(--radius); cursor: pointer; font-size: 13px; transition: all .15s; } .theme-toggle:hover { background: var(--bg-2); border-color: var(--border-light); } [data-theme="light"] .theme-toggle { background: linear-gradient(to bottom, #fafafa, #e0e0e0); border: 1px solid #999; } /* ── Status bar at bottom of editor (Notepad++ style) ─────────────────── */ [data-theme="light"] .status-bar { background: linear-gradient(to bottom, #f0f0f0 0%, #d8d8d8 100%); border-top: 1px solid #999; color: #1e1e1e; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 11px; padding: 2px 8px; display: flex; gap: 1.5rem; height: 22px; align-items: center; } .status-bar { display: none; } [data-theme="light"] .status-bar { display: flex; } .status-item { padding: 0 .5rem; border-right: 1px solid #c4c4c4; } .status-item:last-child { border-right: none; } /* ── Resolution / metrics bar in light mode ───────────────────────────── */ [data-theme="light"] .metrics-bar { background: #fafafa; border-bottom: 1px solid #c4c4c4; } [data-theme="light"] .metric-label { color: #707070; } [data-theme="light"] .metric-value { color: #1e1e1e; } /* ── Cell editor borders in research notebook ─────────────────────────── */ [data-theme="light"] .cell-editor { border: 1px solid #c4c4c4; } [data-theme="light"] .cell-output-pre { background: #f8f8f8; border-left: 3px solid #0066cc; color: #1e1e1e; } [data-theme="light"] .output-error { border-left-color: #c00000; color: #c00000; } [data-theme="light"] .markdown-cell-input { background: #ffffff; } /* ── Backtest history sidebar items ───────────────────────────────────── */ [data-theme="light"] .bt-history-item:hover { background: #d6e4f5; } [data-theme="light"] .bt-history-toggle { background: linear-gradient(to bottom, #4a90e2 0%, #2966bf 100%); border: 1px solid #1f4f9c; } /* ── Flash messages ───────────────────────────────────────────────────── */ [data-theme="light"] .flash { background: #fafafa; border: 1px solid #999; box-shadow: 2px 2px 6px rgba(0,0,0,.15); color: #1e1e1e; } [data-theme="light"] .flash-success { border-color: #008000; background: #d4f0d4; } [data-theme="light"] .flash-error { border-color: #c00000; background: #f5d4d4; } [data-theme="light"] .flash-info { border-color: #0066cc; background: #cce0f5; } /* ── Modal overlay backdrop ───────────────────────────────────────────── */ [data-theme="light"] .modal-overlay { background: rgba(0,0,0,.45); } [data-theme="light"] .running-overlay { background: rgba(255,255,255,.7); } [data-theme="light"] .running-card { background: #fafafa; border: 1px solid #999; }