/* Engineering UI theme (Simulink/PSCAD-like) - Apply by setting - Overrides variables + key components to look clean and tool-like */ body.theme-engineering { /* Palette: neutral greys + MATLAB-ish blue */ --bg-dark: #eef1f4; --bg-panel: #ffffff; --bg-card: #ffffff; --color-primary: #0072BD; --color-secondary: #005A9E; --color-tertiary: #EDB120; --color-success: #2E7D32; --color-warning: #B26A00; --color-danger: #C62828; --color-text: #111827; --color-text-secondary: #475569; --color-border: #cbd5e1; --color-grid: rgba(148, 163, 184, 0.25); --shadow-glow: 0 8px 18px rgba(2, 6, 23, 0.12); --font-main: 'Segoe UI', 'Microsoft YaHei', system-ui, -apple-system, sans-serif; } /* Background: reduce “sci-fi grid”, keep subtle workspace texture */ body.theme-engineering::before { background-image: radial-gradient(circle at 18% 30%, rgba(0, 114, 189, 0.08) 0%, transparent 55%), radial-gradient(circle at 82% 70%, rgba(0, 90, 158, 0.06) 0%, transparent 60%), repeating-linear-gradient(0deg, transparent, transparent 27px, var(--color-grid) 27px, var(--color-grid) 28px), repeating-linear-gradient(90deg, transparent, transparent 27px, var(--color-grid) 27px, var(--color-grid) 28px); background-size: 100% 100%, 100% 100%, 28px 28px, 28px 28px; opacity: 1; } /* Top bar: looks like desktop app title bar */ body.theme-engineering .top-bar { background: linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(245,247,250,0.96)); border-bottom: 1px solid var(--color-border); box-shadow: 0 2px 10px rgba(2, 6, 23, 0.08); } body.theme-engineering .app-logo { background: rgba(0, 114, 189, 0.08); border: 1px solid rgba(0, 114, 189, 0.25); } body.theme-engineering .app-logo::before { opacity: 0.2; } body.theme-engineering .app-name { -webkit-text-fill-color: unset; color: var(--color-text); background: none; letter-spacing: 0.5px; text-transform: none; } body.theme-engineering .app-name-btn { background: linear-gradient(120deg, rgba(0, 114, 189, 0.12), rgba(0, 90, 158, 0.08)); border-color: rgba(0, 114, 189, 0.3); box-shadow: 0 2px 8px rgba(2, 6, 23, 0.12); } body.theme-engineering .app-name-btn::before { background: rgba(0, 114, 189, 0.75); box-shadow: 0 0 8px rgba(0, 114, 189, 0.35); } body.theme-engineering .app-name-btn::after { background: linear-gradient(90deg, rgba(0, 114, 189, 0), rgba(0, 114, 189, 0.55), rgba(0, 114, 189, 0)); opacity: 0.6; } body.theme-engineering .status-indicator::before { animation: none; } /* Workflow tab strip: flatter + more “tool tabs” */ body.theme-engineering .sidebar { background: linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(245,247,250,0.96)); border-bottom: 1px solid var(--color-border); box-shadow: 0 2px 8px rgba(2, 6, 23, 0.06); } body.theme-engineering .sidebar::before, body.theme-engineering .sidebar::after { display: none; } body.theme-engineering .workflow-title { color: var(--color-text-secondary); } body.theme-engineering .workflow-steps.workflow-tabs { border-bottom: 1px solid rgba(203, 213, 225, 0.9); } body.theme-engineering .workflow-steps.workflow-tabs .step-item { background: rgba(255,255,255,0.92); border: 1px solid rgba(203, 213, 225, 0.95); box-shadow: 0 2px 6px rgba(2, 6, 23, 0.08); } body.theme-engineering .workflow-steps.workflow-tabs .step-item:hover { background: rgba(255,255,255,1); box-shadow: 0 8px 18px rgba(2, 6, 23, 0.12); } body.theme-engineering .workflow-steps.workflow-tabs .step-item.active { background: linear-gradient(to bottom, rgba(0, 114, 189, 0.12), rgba(255,255,255,1)); border-color: rgba(0, 114, 189, 0.35); } body.theme-engineering .workflow-steps.workflow-tabs .step-item.active::after { box-shadow: 0 0 0 rgba(0,0,0,0); } body.theme-engineering .workflow-steps.workflow-tabs .step-title { color: var(--color-text); } body.theme-engineering .workflow-steps.workflow-tabs .step-item.completed { background: rgba(46, 125, 50, 0.06); border-color: rgba(46, 125, 50, 0.25); } /* Main content spacing */ body.theme-engineering .main-content { padding: 18px; gap: 18px; } /* Workflow header */ body.theme-engineering .workflow-header { background: rgba(255,255,255,0.95); border: 1px solid rgba(203, 213, 225, 0.95); box-shadow: 0 8px 18px rgba(2, 6, 23, 0.08); } body.theme-engineering .workflow-step-pill { background: rgba(0, 114, 189, 0.08); border-color: rgba(0, 114, 189, 0.20); color: var(--color-text); } body.theme-engineering .workflow-step-title { color: var(--color-text); } body.theme-engineering .workflow-step-desc { color: var(--color-text-secondary); } /* Persistent panel compact */ body.theme-engineering .persistent-panel { min-width: 260px; } body.theme-engineering .dock-bar { padding: 6px 8px; } body.theme-engineering .panel-tabs { border-bottom: 1px solid rgba(203, 213, 225, 0.9); } body.theme-engineering .panel-tab { padding: 10px 10px; font-size: 0.9rem; } body.theme-engineering .panel-item { padding: 10px; } body.theme-engineering .card-header { padding: 12px 14px; } body.theme-engineering .card-content { padding: 14px; } /* ------------------------- Fix dark remnants in light mode ------------------------- */ /* Generic tab containers (step6 etc.) */ body.theme-engineering .tabs-container { background-color: #ffffff; border-color: rgba(203, 213, 225, 0.95); } body.theme-engineering .tabs-header { background-color: rgba(248, 250, 252, 1); border-bottom: 1px solid rgba(203, 213, 225, 0.9); } body.theme-engineering .tab-button { color: var(--color-text-secondary); } body.theme-engineering .tab-button.active { color: var(--color-primary); } body.theme-engineering .tab-content { background: #ffffff; } /* KaTeX: text was hard-coded to light gray */ body.theme-engineering .katex { color: var(--color-text); } body.theme-engineering .katex-display { background: rgba(248, 250, 252, 1); border: 1px solid rgba(203, 213, 225, 0.9); } /* Note boxes */ body.theme-engineering .note-box { background-color: rgba(248, 250, 252, 1); border-left-color: rgba(0, 114, 189, 1); border: 1px solid rgba(203, 213, 225, 0.9); } body.theme-engineering .note-title { color: var(--color-text); } body.theme-engineering .note-content { color: var(--color-text-secondary); } /* Topology containers */ body.theme-engineering .topology-container, body.theme-engineering .topology-editor { background-color: #ffffff; border: 1px solid rgba(203, 213, 225, 0.9); } body.theme-engineering .btn-tool.active { background-color: rgba(0, 114, 189, 0.10); color: var(--color-primary); } /* Chart overlays */ body.theme-engineering .chart-loading { background-color: rgba(255, 255, 255, 0.85); color: var(--color-text); } body.theme-engineering .complete-badge { background-color: rgba(255, 255, 255, 0.92); border: 1px solid rgba(203, 213, 225, 0.9); } body.theme-engineering .complete-badge.not-converged { background-color: rgba(255, 193, 7, 0.18); border-color: rgba(255, 193, 7, 0.55); color: #8a6d1f; } /* Small “info value” pill used in step5 topology info */ body.theme-engineering .info-value { background: rgba(0, 114, 189, 0.10); } /* Cards: flat, clean */ body.theme-engineering .card, body.theme-engineering .card.full-height { background: var(--bg-card); border: 1px solid var(--color-border); box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08); } body.theme-engineering .card::before { display: none; } body.theme-engineering .card:hover { border-color: rgba(0, 114, 189, 0.28); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.12); } body.theme-engineering .card-header { background: linear-gradient(to bottom, rgba(248,250,252,1), rgba(255,255,255,1)); border-bottom: 1px solid var(--color-border); } body.theme-engineering .card-header::after { display: none; } body.theme-engineering .card-title { color: var(--color-text); font-weight: 600; } body.theme-engineering .card-icon { background: rgba(0, 114, 189, 0.08); color: var(--color-primary); } /* Buttons: more “desktop software” */ body.theme-engineering .btn { border-radius: 6px; letter-spacing: 0; } body.theme-engineering .btn-primary { background: linear-gradient(180deg, rgba(0,114,189,1), rgba(0,90,158,1)); color: #ffffff; border: 1px solid rgba(0, 90, 158, 0.35); } body.theme-engineering .btn-primary::before { display: none; } body.theme-engineering .btn-primary:hover { filter: none; box-shadow: 0 8px 18px rgba(0, 90, 158, 0.18); } body.theme-engineering .btn-outline { border-color: rgba(148, 163, 184, 0.9); color: var(--color-text); } body.theme-engineering .btn-outline:hover { background: rgba(2, 6, 23, 0.04); box-shadow: none; } body.theme-engineering .btn-success { background: linear-gradient(180deg, rgba(46,125,50,1), rgba(27,94,32,1)); color: #ffffff; border: 1px solid rgba(27, 94, 32, 0.35); } body.theme-engineering .btn-danger { background: linear-gradient(180deg, rgba(198,40,40,1), rgba(183,28,28,1)); color: #ffffff; } /* Inputs / selects */ body.theme-engineering .numeric-input, body.theme-engineering .fancy-select { background-color: #ffffff; border-color: rgba(203, 213, 225, 0.95); color: var(--color-text); } body.theme-engineering .numeric-input:focus, body.theme-engineering .fancy-select:focus { border-color: rgba(0, 114, 189, 0.55); box-shadow: 0 0 0 3px rgba(0, 114, 189, 0.12); } /* Tables */ body.theme-engineering .results-table th { background-color: rgba(0, 114, 189, 0.08); color: var(--color-text); border-bottom: 1px solid var(--color-border); } body.theme-engineering .results-table td { border-bottom: 1px solid rgba(203, 213, 225, 0.7); } body.theme-engineering .results-table tr:hover { background-color: rgba(2, 6, 23, 0.03); } /* Code blocks / logs */ body.theme-engineering .code-block { background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(203, 213, 225, 0.9); color: #0f172a; } /* Step5 中间结果面板（避免默认深色方案在浅色主题里突兀） */ body.theme-engineering .iteration-results-panel { background-color: rgba(255, 255, 255, 0.92); border: 1px solid rgba(203, 213, 225, 0.9); color: #0f172a; } /* Step5: 完成提示与迭代列表在白底主题下更清爽 */ body.theme-engineering #complete-badge { background-color: rgba(255, 255, 255, 0.92); border: 1px solid rgba(203, 213, 225, 0.9); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10); color: var(--color-text); } body.theme-engineering #complete-badge.not-converged { background-color: rgba(255, 193, 7, 0.18); border-color: rgba(255, 193, 7, 0.55); color: #8a6d1f; } body.theme-engineering .iteration-list-empty { color: var(--color-text-secondary); } body.theme-engineering .iteration-link { background: rgba(255, 255, 255, 1); border: 1px solid rgba(203, 213, 225, 0.9); color: var(--color-text); } body.theme-engineering .iteration-link:hover { border-color: rgba(0, 114, 189, 0.35); background: rgba(248, 250, 252, 1); } body.theme-engineering .iteration-item th, body.theme-engineering .final-result th { background-color: rgba(0, 114, 189, 0.08); color: #0f172a; border-color: rgba(203, 213, 225, 0.9); } body.theme-engineering .iteration-item td, body.theme-engineering .final-result td { border-color: rgba(203, 213, 225, 0.8); } body.theme-engineering .iteration-item tr:nth-child(odd), body.theme-engineering .final-result tr:nth-child(odd) { background-color: rgba(2, 6, 23, 0.02); } body.theme-engineering .final-result blockquote { background-color: rgba(2, 6, 23, 0.03); border-left-color: rgba(0, 114, 189, 0.45); } /* Charts */ body.theme-engineering .chart-container { background: #ffffff; border: 1px solid rgba(203, 213, 225, 0.9); box-shadow: inset 0 0 0 rgba(0,0,0,0); } body.theme-engineering .chart-container::before { background-image: linear-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.15) 1px, transparent 1px); } /* Step6 可视化分析：控制条/输入在浅色主题下更清爽 */ body.theme-engineering #visualization .chart-controls { background: rgba(248, 250, 252, 0.92); border-bottom: 1px solid rgba(203, 213, 225, 0.9); } body.theme-engineering #visualization .chart-nav-btn, body.theme-engineering #visualization .view-btn, body.theme-engineering #visualization .search-btn { background: rgba(255, 255, 255, 1); border-color: rgba(203, 213, 225, 0.95); color: var(--color-text); } body.theme-engineering #visualization .node-search-input { background: rgba(255, 255, 255, 1); border-color: rgba(203, 213, 225, 0.95); color: var(--color-text); } /* Right panel tabs */ body.theme-engineering .persistent-panel { background-color: rgba(255,255,255,0.92); border-left: 1px solid var(--color-border); } body.theme-engineering .panel-tabs { background: rgba(248,250,252,1); } body.theme-engineering .panel-tab { color: var(--color-text-secondary); } body.theme-engineering .panel-tab.active { color: var(--color-primary); } /* Dock bar */ body.theme-engineering .dock-bar { background: rgba(248, 250, 252, 1); border-bottom: 1px solid var(--color-border); } body.theme-engineering .dock-btn { background: rgba(255,255,255,1); border-color: rgba(203, 213, 225, 0.95); color: var(--color-text-secondary); } body.theme-engineering .dock-btn:hover { background: rgba(2, 6, 23, 0.03); border-color: rgba(0, 114, 189, 0.35); color: var(--color-text); } body.theme-engineering .dock-btn.active { border-color: rgba(0, 114, 189, 0.45); box-shadow: 0 0 0 3px rgba(0, 114, 189, 0.10); color: var(--color-primary); } /* Theme toggle button in top bar */ body.theme-engineering .theme-toggle.btn-outline { border-color: rgba(148, 163, 184, 0.9); color: var(--color-text); } /* Title area guide button (使用说明) */ body.theme-engineering .guide-button { color: var(--color-text); border: 1px solid rgba(203, 213, 225, 0.95); background-color: rgba(255, 255, 255, 0.9); border-radius: 6px; padding: 4px 10px; } body.theme-engineering .guide-button:hover { background-color: rgba(2, 6, 23, 0.04); } body.theme-engineering .guide-gate-cta .guide-gate-experiment-btn { color: #0b3558; border-color: rgba(0, 114, 189, 0.45); background: linear-gradient(180deg, rgba(255,255,255,1), rgba(230,243,252,1)); box-shadow: 0 6px 14px rgba(2, 6, 23, 0.08); } body.theme-engineering .guide-gate-cta .guide-gate-experiment-btn:hover:not(:disabled) { color: #082a45; border-color: rgba(0, 114, 189, 0.62); background: linear-gradient(180deg, rgba(255,255,255,1), rgba(214,236,250,1)); } body.theme-engineering .guide-gate-cta .guide-gate-experiment-btn:disabled, body.theme-engineering .guide-gate-cta .guide-gate-experiment-btn[aria-disabled="true"] { color: #0b3558; border-color: rgba(0, 114, 189, 0.42); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(232,242,249,0.98)); opacity: 1; } body.theme-engineering .tool-window-hint { border-color: rgba(0, 114, 189, 0.20); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,247,250,0.98)); box-shadow: 0 14px 28px rgba(2, 6, 23, 0.12); } body.theme-engineering .tool-window-hint::before { background: rgba(255,255,255,0.98); border-left-color: rgba(0, 114, 189, 0.20); border-top-color: rgba(0, 114, 189, 0.20); } body.theme-engineering .tool-window-hint-text { color: var(--color-text); } body.theme-engineering .tool-window-hint-text strong { color: var(--color-primary); } body.theme-engineering .tool-window-hint-close { background: rgba(2, 6, 23, 0.05); color: var(--color-text); } body.theme-engineering .tool-window-hint-close:hover { background: rgba(2, 6, 23, 0.09); } /* ------------------------- Remaining light-mode fixes (user-reported) - AI assistant bubbles - Step1 topology description - Step4 algorithm selection + inline editable code - Step6 status overview - AI report bubbles/code blocks ------------------------- */ /* AI assistant: chat bubbles (chat.css uses !important for dark gradients) */ body.theme-engineering .message.assistant .message-content { background: rgba(255, 255, 255, 0.98) !important; color: var(--color-text) !important; border: 1px solid rgba(203, 213, 225, 0.95) !important; border-left: 3px solid rgba(0, 114, 189, 0.9) !important; box-shadow: 0 6px 16px rgba(2, 6, 23, 0.10) !important; } body.theme-engineering .message.user .message-content { background: rgba(248, 250, 252, 1) !important; color: var(--color-text) !important; border: 1px solid rgba(203, 213, 225, 0.95) !important; border-right: 3px solid rgba(0, 114, 189, 0.55) !important; box-shadow: 0 6px 16px rgba(2, 6, 23, 0.08) !important; } body.theme-engineering .message-content code { background-color: rgba(2, 6, 23, 0.05) !important; color: #0f172a !important; border: 1px solid rgba(203, 213, 225, 0.8); } /* AI assistant: character bubble (ai-character.css hardcodes white + text-shadow) */ body.theme-engineering .character-bubble { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(203, 213, 225, 0.95); box-shadow: 0 6px 16px rgba(2, 6, 23, 0.10); } body.theme-engineering .character-bubble:before { background: rgba(255, 255, 255, 0.98); box-shadow: -2px 2px 3px rgba(2, 6, 23, 0.06); } body.theme-engineering .character-bubble p { color: var(--color-text); text-shadow: none; } body.theme-engineering .highlight-keyword { color: var(--color-primary); } /* Step1: topology description panel contrast */ body.theme-engineering .topology-info { background: #ffffff; border-color: rgba(203, 213, 225, 0.95); } body.theme-engineering .topology-preview { background-color: rgba(248, 250, 252, 1); } body.theme-engineering .topology-description { background-color: #ffffff; color: var(--color-text); } body.theme-engineering .stat-item { background-color: rgba(248, 250, 252, 1); border: 1px solid rgba(203, 213, 225, 0.75); } body.theme-engineering .current-topology-info { background-color: rgba(248, 250, 252, 1); border: 1px solid rgba(203, 213, 225, 0.8); } /* Step4: algorithm selection cards */ body.theme-engineering #workflow-step4-content .algorithm-selection .selection-item { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(203, 213, 225, 0.95); box-shadow: 0 6px 16px rgba(2, 6, 23, 0.08); } body.theme-engineering #workflow-step4-content .algorithm-selection .selection-item:hover { box-shadow: 0 12px 22px rgba(2, 6, 23, 0.12); } body.theme-engineering #workflow-step4-content .algorithm-selection .selection-item.active { background: linear-gradient(180deg, rgba(0, 114, 189, 0.10), rgba(255, 255, 255, 1)); border-color: rgba(0, 114, 189, 0.35); box-shadow: 0 0 0 3px rgba(0, 114, 189, 0.10); } body.theme-engineering #workflow-step4-content .selection-title { color: var(--color-text); } body.theme-engineering #workflow-step4-content .selection-description { color: var(--color-text-secondary); } /* Step4: inline