/* ========================================================================== Power AI 统一注入主题 · power-ai-theme.css 依据《Power AI 设计语言规范 v1.0.0》(光明未来派 Bright Futurism) 用法:老页面在 前挂一条 即获得统一底色/文字/链接/滚动条; 深色仪表/数字孪生页面在 上加 class="power-dark" 启用深色体系。 唯一权威规范:Power AI/DESIGN-LANGUAGE.md ========================================================================== */ :root { /* 核心色板 */ --bg: #FAFBFD; --bg-pure: #FFFFFF; --ink: #0B2B45; --ink-soft: #3D5A73; --ink-faint: #7A93A8; --energy: #00C2D1; --energy-deep: #0891B2; --energy-deeper: #0E7490; --energy-bright: #39E6F5; --energy-pale: #7FE9F2; --energy-glow: rgba(0, 194, 209, 0.14); --save: #0FB981; --cost: #F59E0B; --danger: #E11D48; --line: rgba(11, 43, 69, 0.08); --line-strong: rgba(11, 43, 69, 0.16); /* 语义族三档明度(深档=浅底文字 / 中档=图形填充 / 亮档=深底文字) */ --energy-mid: #00C2D1; --energy-bright: #39E6F5; --danger-mid: #F43F5E; --danger-bright: #FB7185; --danger-pale: #FDA4AF; --cost-deep: #B45309; --cost-mid: #F59E0B; --cost-bright: #FBBF24; --cost-pale: #FDE68A; --save-deep: #0B8A63; --save-mid: #0FB981; --save-bright: #34D399; --save-pale: #6EE7B7; /* 语义软底徽标(背景+文字配对) */ --danger-soft: rgba(225, 29, 72, 0.08); --cost-soft: rgba(245, 158, 11, 0.1); --save-soft: rgba(15, 185, 129, 0.1); /* 供热工程语义(热=暖 / 冷=青,P&ID 可直读) */ --supply: #F59E0B; --return: #0891B2; /* 浅青辅助底 */ --bg-tint: #F2FAFB; --bg-tint-2: #F4FBFC; --bg-tint-3: #EFF9FA; /* 字体 */ --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace; /* 尺度 */ --radius: 16px; --radius-sm: 10px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --shadow-card: 0 1px 2px rgba(11, 43, 69, 0.04), 0 8px 32px rgba(11, 43, 69, 0.06); --shadow-lift: 0 2px 4px rgba(11, 43, 69, 0.05), 0 20px 60px rgba(0, 194, 209, 0.12); color-scheme: light; } /* 深色仪表体系:数字孪生/监控大屏专用(规范第 7 章) */ html.power-dark { --bg: #0B2B45; --bg-pure: #0E3D60; --ink: #FFFFFF; --ink-soft: rgba(255, 255, 255, 0.82); --ink-faint: rgba(255, 255, 255, 0.62); --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.16); --bg-tint: rgba(255, 255, 255, 0.06); --bg-tint-2: rgba(255, 255, 255, 0.08); --bg-tint-3: rgba(255, 255, 255, 0.1); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.28); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.24), 0 20px 60px rgba(0, 194, 209, 0.18); /* 深色表面层级(卡片/面板/浮层依次抬升) */ --surface-0: #0B2B45; --surface-1: #0E3D60; --surface-2: #123F66; --surface-3: #1A4A73; /* 深底语义文字档(亮档上岗) */ --danger-on-dark: #FB7185; --cost-on-dark: #FBBF24; --save-on-dark: #34D399; --danger-soft: rgba(244, 63, 94, 0.16); --cost-soft: rgba(251, 191, 36, 0.14); --save-soft: rgba(52, 211, 153, 0.14); color-scheme: dark; } /* -------------------------------------------------------------------------- 安全基座(仅底色/文字/字体回退):全程 :where() 零优先级, 只兜底页面未声明的场合;页面自身的 body 规则、明暗切换、内联样式永远优先 -------------------------------------------------------------------------- */ :where(html:not(.power-dark) body) { background: #FAFBFD; color: #0B2B45; } :where(html.power-dark body) { background: #0B2B45; color: #FFFFFF; } :where(body) { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--energy); color: #FFFFFF; } /* 链接统一为深青;深色页面上用浅青保证可读 */ a { color: var(--energy-deep); } html.power-dark a { color: var(--energy-pale); } /* 键盘焦点可见性 */ :focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; } /* 细滚动条,青色 hover */ * { scrollbar-width: thin; scrollbar-color: rgba(11, 43, 69, 0.28) transparent; } html.power-dark * { scrollbar-color: rgba(255, 255, 255, 0.28) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: rgba(11, 43, 69, 0.22); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--energy-deep); } html.power-dark *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); } html.power-dark *::-webkit-scrollbar-thumb:hover { background: var(--energy); } *::-webkit-scrollbar-track { background: transparent; } /* 数字与编号的等宽表达(规范第 3 章):仅在作者显式标记时生效 */ .mono, [data-mono] { font-family: var(--font-mono); } /* 动画降级(规范第 8 章) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 语义徽标工具类(作者显式调用;bg+fg 配对,深色页自动换亮档) -------------------------------------------------------------------------- */ .badge-energy, .badge-danger, .badge-cost, .badge-save { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; } .badge-energy { background: var(--energy-glow); color: var(--energy-deep); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-cost { background: var(--cost-soft); color: var(--cost-deep); } .badge-save { background: var(--save-soft); color: var(--save-deep); } html.power-dark .badge-energy { color: var(--energy-pale); } html.power-dark .badge-danger { color: var(--danger-on-dark); } html.power-dark .badge-cost { color: var(--cost-on-dark); } html.power-dark .badge-save { color: var(--save-on-dark); }