/** * global.css - 全局样式（深色科技风） * 基于 OpenDesign 设计稿的 Token 系统 */ /* =========================================================== CSS 变量 — 深色 + 绿色主题 =========================================================== */ :root { --bg: oklch(4% 0.002 145); --surface: oklch(9% 0.003 145); --surface-2: oklch(13% 0.004 145); --surface-3: oklch(17% 0.005 145); --fg: oklch(92% 0.004 145); --fg-secondary: oklch(72% 0.006 145); --muted: oklch(50% 0.008 145); --border: oklch(20% 0.005 145); --border-light: oklch(25% 0.005 145); --accent: oklch(62% 0.19 145); --accent-hover: oklch(68% 0.2 145); --accent-dim: oklch(45% 0.15 145); --accent-glow: oklch(62% 0.19 145 / 0.15); --success: oklch(62% 0.18 145); --warn: oklch(70% 0.18 85); --danger: oklch(55% 0.2 30); --info: oklch(58% 0.14 240); --on-accent: #000; /* 主色按钮上的文字色：深色=黑字 */ --radius: 8px; --radius-sm: 4px; --shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.6); --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; --transition: 0.2s ease; } /* =========================================================== Claude 米（主题B）— 变量覆盖层 通过 整站切换；深色主题保持原样零改动 =========================================================== */ :root[data-theme="beige"] { --bg: #f7f5f0; /* 奶油米背景 */ --surface: #fbfaf7; /* 顶栏/卡片面 */ --surface-2: #f0ede6; /* 次级面/抽屉 */ --surface-3: #e9e5dc; /* 输入框/面板 */ --fg: #2b2925; /* 主文字 */ --fg-secondary: #5c574e; /* 次级文字 */ --muted: #8d877c; /* 弱化文字 */ --border: #e0dcd2; /* 边框 */ --border-light: #d2cdc0; /* 浅边框 */ --accent: #d97757; /* 主色：陶土橙 */ --accent-hover: #c96a4b; --accent-dim: rgba(217,119,87,.15); --accent-glow: rgba(217,119,87,.12); --success: #4d8a5b; --warn: #b5813a; --danger: #c05a48; --info: #5b7fa8; --shadow: rgba(80,60,30,.12); --shadow-lg: rgba(80,60,30,.2); --on-accent: #fff; /* 主色按钮上的文字色：米色=白字 */ } /* =========================================================== 基础重置 =========================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: var(--bg); color: var(--fg); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; } /* 滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* =========================================================== 布局 — 三段式垂直堆叠 =========================================================== */ .app-shell { display: flex; flex-direction: column; height: 100vh; width: 100%; overflow: hidden; } .app-header { flex-shrink: 0; } .app-tabs { flex-shrink: 0; } .app-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; } /* =========================================================== 顶部用户栏（参考设计 V2-1，32px） =========================================================== */ .userbar { height: 32px; min-height: 32px; background: var(--surface); display: flex; align-items: center; padding: 0 20px; justify-content: space-between; border-bottom: 1px solid var(--border); } .userbar-left { display: flex; align-items: center; gap: 10px; } .userbar-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #000; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .userbar-name { font-size: 12px; color: var(--fg); } .userbar-role { font-size: 10px; color: var(--accent); background: rgba(0,184,107,0.12); padding: 0 6px; border-radius: 3px; height: 18px; line-height: 18px; } .userbar-right { display: flex; align-items: center; gap: 16px; font-size: 12px; } .userbar-right a { color: var(--muted); cursor: pointer; } .userbar-right a:hover { color: var(--fg); text-decoration: none; } /* =========================================================== 主题切换控件（右上角用户栏 / 登录页） ● 深色 ｜ ● 米色，当前主题用 --accent 高亮，两主题下自动适配 =========================================================== */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 11px; line-height: 1; user-select: none; } .theme-toggle .theme-opt { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; color: var(--muted); cursor: pointer; transition: color var(--transition), background var(--transition); white-space: nowrap; } .theme-toggle .theme-opt:hover { color: var(--fg); } .theme-toggle .theme-opt.active { background: var(--accent-glow); color: var(--accent); font-weight: 600; } /* 登录页等无用户栏页面的固定角标切换入口 */ .theme-toggle.login-theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 500; } /* =========================================================== 米色主题下的局部可读性修正（不改变深色主题任何视觉） =========================================================== */ /* 次级按钮悬停底 @index.css:116 #444：米色下深底+深字不可读，改为浅灰底 */ :root[data-theme="beige"] .btn-secondary:hover { background: var(--surface-3); }