/* ========================================================================== QuanLLM 主题：浅色主题覆盖 + 导航栏主题切换按钮 -------------------------------------------------------------------------- 暗色是默认主题（定义在 styles.css 的 :root 中）。 本文件只负责： 1. 覆盖主题令牌； 2. 修正少数无法只靠令牌表达的颜色（窗口底色、光晕、代码块等）。 实现方式：把选择器加在 上，用与幂等的方式继承。 因此只有极少数地方需要 !important —— 都是“在浅色底上必须压过原硬编码值”的 交互态（按钮 hover / 输入框 / Tab 切换等）。 ========================================================================== */ /* ===== 1. 浅色主题令牌 ===== */ html[data-theme="light"] { color-scheme: light; /* 主色：在浅底上加深，保证文字对比度 */ --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #6366f1; --secondary: #0891b2; --accent: #7c3aed; /* 背景层级：页面白 → 卡片浅灰 → 更强的灰 */ --bg: #f6f7fb; --bg-light: #ffffff; --bg-lighter: #e7ebf3; /* 文字层级 */ --text: #101828; --text-muted: #55607a; --text-subtle: #7c869b; --border: rgba(16, 24, 40, 0.1); --shadow: 0 20px 40px -18px rgba(16, 24, 40, 0.22); /* 主题衍生色 */ --nav-bg: rgba(255, 255, 255, 0.88); /* 移动端下拉菜单用纯白，确保英雄区内容不透出 */ --nav-panel: #ffffff; --surface-1: rgba(16, 24, 40, 0.035); --surface-2: rgba(16, 24, 40, 0.055); --surface-3: rgba(16, 24, 40, 0.085); --surface-4: rgba(16, 24, 40, 0.14); --highlight-1: rgba(16, 24, 40, 0.16); --highlight-2: rgba(16, 24, 40, 0.22); --overlay: rgba(16, 24, 40, 0.045); --panel-a: rgba(99, 102, 241, 0.06); --panel-b: rgba(99, 102, 241, 0.04); --panel-strong: rgba(255, 255, 255, 0.95); --panel-stronger: #ffffff; --grid-line: rgba(79, 70, 229, 0.09); /* 浅色底上光晕要收敛，否则整页发紫 */ --orb-1-opacity: 0.22; --orb-2-opacity: 0.2; --orb-3-opacity: 0.14; /* 状态色加深以通过对比度 */ --text-success: #047857; --text-warning: #b45309; --code-bg: #f4f6fb; } /* ===== 2. 组件级修正 ===== */ /* 光晕在浅色下额外模糊，避免出现明显色斑边缘 */ html[data-theme="light"] .gradient-orb { filter: blur(120px); } /* 网格纹理在浅底上需要更淡 */ html[data-theme="light"] .grid-overlay { mask-image: radial-gradient(ellipse at center, black 0%, transparent 62%); -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 62%); } /* 悬浮/滚动后的导航栏加一点顶部高光，避免白色浮在白色上没边界 */ html[data-theme="light"] .navbar.scrolled { box-shadow: 0 10px 30px -22px rgba(16, 24, 40, 0.35); } /* 终端与代码块：浅色下用浅底 + 深色代码字，保持“可读的代码窗口”观感 */ html[data-theme="light"] .terminal-code { background: var(--code-bg); } html[data-theme="light"] .terminal-value, html[data-theme="light"] .terminal-code-content { color: #1f2937; } html[data-theme="light"] .terminal-pricing .terminal-price { background: #ffffff; } /* 对话演示：气泡在浅色下用白底+边框，用户气泡保留淡紫 */ html[data-theme="light"] .demo-bubble { background: #ffffff; } html[data-theme="light"] .demo-message.user .demo-bubble { background: rgba(79, 70, 229, 0.08); } html[data-theme="light"] .formula { background: rgba(79, 70, 229, 0.06); } /* 邮件模板正文用白底，字段提示色已由令牌控制 */ html[data-theme="light"] .mail-template-box, html[data-theme="light"] .mail-window-body { background: #ffffff; } html[data-theme="light"] .mail-compose-field { border-bottom-color: var(--border); } /* 副本卡片/分支卡片等在白底上需要一点阴影来分层 */ html[data-theme="light"] .branch-card, html[data-theme="light"] .demo-card, html[data-theme="light"] .terminal-window, html[data-theme="light"] .mail-window, html[data-theme="light"] .cta-card { box-shadow: 0 18px 40px -28px rgba(16, 24, 40, 0.3); } /* 浅色下原本“变亮”的交互态要改成“变暗” */ html[data-theme="light"] .btn-secondary:hover { background: rgba(16, 24, 40, 0.08) !important; border-color: rgba(16, 24, 40, 0.2) !important; } html[data-theme="light"] .lang-switcher:hover, html[data-theme="light"] .theme-toggle:hover { background: rgba(16, 24, 40, 0.08) !important; } html[data-theme="light"] .demo-input input { background: #ffffff; } html[data-theme="light"] .copy-btn:hover { background: rgba(8, 145, 178, 0.14) !important; } /* 输入框自动填充时的浅色适配 */ html[data-theme="light"] input:-webkit-autofill { -webkit-text-fill-color: var(--text); } /* ========================================================================== 3. 导航栏右侧操作区：主题按钮 + GitHub -------------------------------------------------------------------------- - 浅色主题显示月亮，表示“切换到夜间模式”； - 深色主题显示太阳，表示“切换到白天模式”； - 两种模式都保留同样的圆形按钮尺寸和 GitHub 胶囊按钮节奏。 ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; flex-shrink: 0; box-shadow: 0 8px 24px -20px rgba(0, 0, 0, 0.72); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .theme-toggle:hover { background: var(--surface-3); color: var(--text); border-color: var(--highlight-1); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(0.96); } .theme-toggle:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; } .theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* 两个图标同时存在于 DOM 中，但任何时刻只显示“可切换到”的目标主题图标。 */ .theme-toggle__icon--sun, .theme-toggle__icon--moon { display: none !important; } html[data-theme="dark"] .theme-toggle__icon--sun, html:not([data-theme]) .theme-toggle__icon--sun { display: block !important; } html[data-theme="light"] .theme-toggle__icon--moon { display: block !important; } /* 浅色：与参考图一致的浅灰圆形按钮 + 深灰蓝月亮。 */ html[data-theme="light"] .theme-toggle { background: #f1f4f8; border-color: rgba(48, 65, 90, 0.14); color: #596a84; box-shadow: 0 7px 18px -15px rgba(32, 52, 82, 0.45); } html[data-theme="light"] .theme-toggle:hover { background: #e9edf4 !important; border-color: rgba(48, 65, 90, 0.22); color: #34445d; } /* 深色：同尺寸圆形按钮，显示太阳图标，保证夜间模式不是缺省状态。 */ html[data-theme="dark"] .theme-toggle, html:not([data-theme]) .theme-toggle { background: rgba(255, 255, 255, 0.055); border-color: rgba(148, 163, 184, 0.16); color: #d7dfed; } html[data-theme="dark"] .theme-toggle:hover, html:not([data-theme]) .theme-toggle:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(148, 163, 184, 0.26); color: #ffffff; } /* 全站 GitHub 按钮统一成参考图中的蓝青胶囊按钮。 */ .nav-cta--github { min-height: 44px; padding: 0 21px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; border-radius: 999px !important; color: #ffffff !important; background: linear-gradient(112deg, #315bd5 0%, #0f9eb0 100%) !important; border: 0 !important; box-shadow: 0 10px 25px -18px rgba(31, 90, 201, 0.82); font-size: 1rem; font-weight: 650; line-height: 1; white-space: nowrap; transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease; } .nav-cta--github:hover { transform: translateY(-1px); filter: saturate(1.05) brightness(1.03); box-shadow: 0 14px 30px -18px rgba(20, 126, 165, 0.88); } .nav-cta--github:active { transform: translateY(0) scale(0.985); } .nav-cta--github svg, .nav-cta--github .github-mark, .nav-cta--github .button-icon { width: 19px; height: 19px; flex: 0 0 19px; } @media (max-width: 768px) { .theme-toggle { width: 40px; height: 40px; } .theme-toggle svg { width: 18px; height: 18px; } .nav-cta--github { min-height: 40px; padding: 0 17px !important; font-size: 0.94rem; } .nav-cta--github svg, .nav-cta--github .github-mark, .nav-cta--github .button-icon { width: 18px; height: 18px; flex-basis: 18px; } }