/* ===================================================== Astem Common Theme System (global) ----------------------------------------------------- 三主题：亮色(ASTEM莫兰迪) / 深空赛博 / 跟随系统 Theme state is driven by js/common-theme.js which sets ('system' is resolved by JS and follows the OS). [data-theme="system"] media-query blocks are kept for backward compatibility. Load this file AFTER the page's own stylesheet so these definitions win the cascade. ===================================================== */ /* ---------- 亮色（默认）— ASTEM 莫兰迪色系 ---------- */ :root, [data-theme="light"] { --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; /* style.css family (canonical) */ --bg: #FDFCF5; --bg-card: #FFFEFA; --bg-input: #F5F4ED; --text: #4D4D4D; --text-muted: #B3B3B3; --border: #D4D4CE; --radius: 12px; --radius-sm: 8px; --shadow: rgba(77, 77, 77, 0.1); --nav-bg: rgba(253, 252, 245, 0.9); --overlay-bg: rgba(77, 77, 77, 0.3); --orb-1: rgba(99, 102, 241, 0.1); --orb-2: rgba(192, 132, 252, 0.06); --orb-3: rgba(99, 102, 241, 0.05); /* ASTEM 卡片底色 */ --accent-a: #FDEEF0; --accent-s: #EDF1F8; --accent-t: #FDF3EF; --accent-e: #F0F8E8; --accent-m: #F3EEF8; /* theme_style.css family (aliases to canonical) */ --bg-primary: var(--bg); --bg-sidebar: #F2F1EA; --bg-sidebar-grad: linear-gradient(180deg,#F2F1EA 0%,#E8E7E0 100%); --bg-hover: rgba(0,0,0,0.05); --bg-message-user: linear-gradient(135deg,#6366f1,#8b5cf6); --bg-message-assistant: var(--bg-card); --text-dark: #4D4D4D; } /* ---------- 深空赛博（暗色） ---------- */ [data-theme="cyber"] { --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --accent: #22e5e5; /* style.css family (canonical) */ --bg: #0a0a0f; --bg-card: #12121a; --bg-input: #1a1a24; --text: #f0f0f8; --text-muted: #d4d4f0; --border: #27272a; --border-light: #3a3a4a; --radius: 12px; --radius-sm: 8px; --shadow: rgba(0,0,0,0.5); --nav-bg: rgba(10, 10, 15, 0.85); --overlay-bg: rgba(0,0,0,0.7); --orb-1: rgba(99, 102, 241, 0.25); --orb-2: rgba(34, 229, 229, 0.15); --orb-3: rgba(129, 140, 248, 0.12); /* theme_style.css family (aliases to canonical) */ --bg-primary: var(--bg); --bg-sidebar: #0e0e16; --bg-sidebar-grad: linear-gradient(180deg,#0e0e16 0%,#0c0c12 100%); --bg-hover: rgba(99,102,241,0.18); --bg-message-user: linear-gradient(135deg,#6366f1,#22e5e5); --bg-message-assistant: var(--bg-card); --text-dark: #0a0a0f; } /* ---------- 跟随系统 — 亮色端 ---------- */ @media (prefers-color-scheme: light) { [data-theme="system"] { --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --bg: #FDFCF5; --bg-card: #FFFEFA; --bg-input: #F5F4ED; --text: #4D4D4D; --text-muted: #B3B3B3; --border: #D4D4CE; --radius: 12px; --radius-sm: 8px; --shadow: rgba(77, 77, 77, 0.1); --nav-bg: rgba(253, 252, 245, 0.9); --overlay-bg: rgba(77, 77, 77, 0.3); --orb-1: rgba(99, 102, 241, 0.1); --orb-2: rgba(192, 132, 252, 0.06); --orb-3: rgba(99, 102, 241, 0.05); --accent-a: #FDEEF0; --accent-s: #EDF1F8; --accent-t: #FDF3EF; --accent-e: #F0F8E8; --accent-m: #F3EEF8; --bg-primary: var(--bg); --bg-sidebar: #F2F1EA; --bg-sidebar-grad: linear-gradient(180deg,#F2F1EA 0%,#E8E7E0 100%); --bg-hover: rgba(0,0,0,0.05); --bg-message-user: linear-gradient(135deg,#6366f1,#8b5cf6); --bg-message-assistant: var(--bg-card); --text-dark: #4D4D4D; } } /* ---------- 跟随系统 — 暗色端（深空赛博） ---------- */ @media (prefers-color-scheme: dark) { [data-theme="system"] { --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --accent: #22e5e5; --bg: #0a0a0f; --bg-card: #12121a; --bg-input: #1a1a24; --text: #f0f0f8; --text-muted: #d4d4f0; --border: #27272a; --border-light: #3a3a4a; --radius: 12px; --radius-sm: 8px; --shadow: rgba(0,0,0,0.5); --nav-bg: rgba(10, 10, 15, 0.85); --overlay-bg: rgba(0,0,0,0.7); --orb-1: rgba(99, 102, 241, 0.25); --orb-2: rgba(34, 229, 229, 0.15); --orb-3: rgba(129, 140, 248, 0.12); --bg-primary: var(--bg); --bg-sidebar: #0e0e16; --bg-sidebar-grad: linear-gradient(180deg,#0e0e16 0%,#0c0c12 100%); --bg-hover: rgba(99,102,241,0.18); --bg-message-user: linear-gradient(135deg,#6366f1,#22e5e5); --bg-message-assistant: var(--bg-card); --text-dark: #0a0a0f; } } /* ===================================================== Theme Settings Modal (global, works on every page) ===================================================== */ .theme-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: var(--overlay-bg); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; animation: themeFadeIn 0.2s ease; } @keyframes themeFadeIn { from { opacity: 0; } to { opacity: 1; } } .theme-modal { width: 360px; max-width: calc(100vw - 32px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 80px var(--shadow); overflow: hidden; animation: themeSlideUp 0.25s ease; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; } @keyframes themeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .theme-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; } .theme-modal-header h3 { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; } .theme-modal-close { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .theme-modal-close:hover { background: var(--bg-input); color: var(--text); } .theme-modal-body { padding: 20px 24px 24px; } .theme-modal-body p { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; } /* Theme option cards */ .theme-options { display: flex; flex-direction: column; gap: 10px; } .theme-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-input); cursor: pointer; transition: all 0.2s; } .theme-option:hover { border-color: var(--primary-light); } .theme-option.active { border-color: var(--primary); background: rgba(99,102,241,0.08); } .theme-option-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .theme-option-icon.light-icon { background: #FDFCF5; } .theme-option-icon.system-icon { background: linear-gradient(135deg, #FDFCF5 50%, #0a0a0f 50%); } .theme-option-text h4 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 2px; } .theme-option-text span { font-size: 12px; color: var(--text-muted); } .theme-option-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .theme-option.active .theme-option-check { background: var(--primary); border-color: var(--primary); } .theme-option.active .theme-option-check::after { content: '✓'; color: white; font-size: 12px; font-weight: 700; } .theme-option-icon.cyber-icon { background: linear-gradient(135deg, #1a1a2e 50%, #0e0e16 50%); color: #818cf8; } /* ASTEM 卡片随机底色（仅亮色主题生效） */ [data-theme="light"] .agent-card:nth-child(5n+1), [data-theme="light"] .dashboard-card:nth-child(5n+1), [data-theme="light"] .group-card:nth-child(5n+1) { background: var(--accent-a); } [data-theme="light"] .agent-card:nth-child(5n+2), [data-theme="light"] .dashboard-card:nth-child(5n+2), [data-theme="light"] .group-card:nth-child(5n+2) { background: var(--accent-s); } [data-theme="light"] .agent-card:nth-child(5n+3), [data-theme="light"] .dashboard-card:nth-child(5n+3), [data-theme="light"] .group-card:nth-child(5n+3) { background: var(--accent-t); } [data-theme="light"] .agent-card:nth-child(5n+4), [data-theme="light"] .dashboard-card:nth-child(5n+4), [data-theme="light"] .group-card:nth-child(5n+4) { background: var(--accent-e); } [data-theme="light"] .agent-card:nth-child(5n+5), [data-theme="light"] .dashboard-card:nth-child(5n+5), [data-theme="light"] .group-card:nth-child(5n+5) { background: var(--accent-m); }