/* ===================================================================== 东明项目管理平台 · 统一设计系统 (dongming-design.css) 设计依据：Impeccable v2.0.0 (Anthropic frontend-design, Apache 2.0) 原则：OKLCH 配色 · 带品牌色相的中性色 · 4pt 间距 · 指数缓动 · 60-30-10 用法：在页面 中以 引入，随后仅使用下方令牌与组件类，即可获得一致的「科技感深色大屏」观感。 ===================================================================== */ /* ---------- 字体（Latin 用 Outfit/Plus Jakarta，CJK 回退系统字体） ---------- */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); :root{ /* —— 中性基底（带蓝相的深色，避免纯黑纯白） —— */ --bg: oklch(17% 0.028 256); --bg1: oklch(17% 0.028 256); /* 别名，兼容 index */ --bg2: oklch(20% 0.030 256); /* 别名，兼容 index */ --bg3: oklch(28% 0.050 256); /* 别名，兼容 index 顶部高光 */ --surface: oklch(24% 0.030 256); --surface2: oklch(21% 0.028 256); --surface3: oklch(26% 0.032 256); --card: oklch(25% 0.030 255); --panel: oklch(25% 0.030 255); /* 别名，兼容 hr */ --card2: oklch(28% 0.032 255); /* 别名，兼容 fi */ --ink: oklch(95% 0.010 256); /* 主文字 */ --text: oklch(95% 0.010 256); /* 别名，兼容 fi/pd */ --muted: oklch(72% 0.018 256); /* 次级文字 */ --muted2: oklch(58% 0.020 256); /* 三级文字，兼容 index */ --sub: oklch(72% 0.018 256); /* 别名，兼容 fi/ah */ /* —— 线条 / 玻璃 —— */ --line: rgba(255,255,255,.10); --border: rgba(255,255,255,.10); /* 别名，兼容 fi/pd */ --rule: rgba(255,255,255,.08); /* 别名，兼容 index/ah */ --rule2: rgba(255,255,255,.05); /* 别名，兼容 ah */ --glass: rgba(255,255,255,.05); --glass2: rgba(255,255,255,.08); /* —— 四模块强调色（OKLCH） —— */ --c-hr: oklch(65% 0.170 252); /* 人力 · 蓝 */ --c-fi: oklch(62% 0.200 300); /* 财务 · 紫 */ --c-ah: oklch(70% 0.160 156); /* 安环 · 绿 */ --c-pd: oklch(72% 0.160 65); /* 生产 · 琥珀 */ --blue: oklch(65% 0.170 252); --brand: oklch(65% 0.170 252); /* 别名，兼容 hr */ --brand2: oklch(70% 0.150 252); /* 别名，兼容 hr */ --purple: oklch(62% 0.200 300); --green: oklch(70% 0.160 156); --ok: oklch(70% 0.160 156); /* 别名，兼容 index/ah */ --orange: oklch(72% 0.160 65); --warn: oklch(78% 0.150 80); /* 别名，兼容 index/ah */ --red: oklch(62% 0.210 25); --bad: oklch(62% 0.210 25); /* 别名，兼容 index */ --danger: oklch(62% 0.210 25); /* 别名，兼容 ah/pd */ --info: oklch(72% 0.140 222); /* 别名，兼容 index/ah */ --cyan: oklch(72% 0.120 200); --teal: oklch(68% 0.120 188); --pink: oklch(68% 0.180 350); --yellow: oklch(82% 0.150 92); --primary: oklch(70% 0.160 156); /* 别名，兼容 ah（安环主色） */ --primary-dark: oklch(30% 0.060 220); --primary-light: oklch(70% 0.160 156 / .14); /* —— 状态浅染色块（深色卡片上的 pill / tag 底色） —— */ --green-bg: oklch(70% 0.160 156 / .16); --red-bg: oklch(62% 0.210 25 / .16); --orange-bg: oklch(72% 0.160 65 / .16); --blue-bg: oklch(65% 0.170 252 / .16); --purple-bg: oklch(62% 0.200 300 / .16); /* —— 侧边栏（兼容 hr） —— */ --sidebar: oklch(20% 0.028 256); --sidebar-hover: oklch(26% 0.030 256); --sidebar-active: oklch(65% 0.170 252); /* —— 度量 / 动效 —— */ --radius: 14px; --radius-sm: 10px; --shadow: 0 12px 40px rgba(0,0,0,.35); --shadow-sm: 0 4px 16px rgba(0,0,0,.25); --ease: cubic-bezier(0.16, 1, 0.3, 1); --sidebar-w: 88px; --font: 'Outfit','Plus Jakarta Sans','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif; } /* ---------- 全局基础 ---------- */ html{ background-color: var(--bg); /* 大屏背景：双径向辉光 + 细网格 */ background-image: radial-gradient(ellipse 80% 55% at 86% -12%, color-mix(in oklch, var(--c-fi) 12%, transparent), transparent 60%), radial-gradient(ellipse 75% 55% at -6% 108%, color-mix(in oklch, var(--c-ah) 9%, transparent), transparent 55%), linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: auto, auto, 46px 46px, 46px 46px; background-attachment: fixed, fixed, fixed, fixed; -webkit-text-size-adjust: 100%; } body{ margin: 0; font-family: var(--font); color: var(--ink); background: transparent; /* 透出 html 的大屏背景 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } *,*::before,*::after{ box-sizing: border-box; } /* ---------- 选择 / 焦点 ---------- */ ::selection{ background: color-mix(in oklch, var(--c-hr) 35%, transparent); color:#fff; } :focus-visible{ outline: 2px solid color-mix(in oklch, var(--c-hr) 60%, transparent); outline-offset: 2px; border-radius: 6px; } /* ---------- 滚动条（大屏质感） ---------- */ *::-webkit-scrollbar{ width: 9px; height: 9px; } *::-webkit-scrollbar-track{ background: transparent; } *::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.26); background-clip: content-box; } * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } /* ---------- 通用卡片（可选项，页面可借此统一外观） ---------- */ .dm-card{ background: color-mix(in oklch, var(--surface) 88%, white 4%); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .dm-card:hover{ border-color: rgba(255,255,255,.18); box-shadow: var(--shadow); transform: translateY(-2px); } .dm-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: linear-gradient(var(--accent, var(--c-hr)), transparent); opacity:.9; } /* 60-30-10 辅助：左侧强调条按模块上色 */ .dm-accent-hr{ --accent: var(--c-hr); } .dm-accent-fi{ --accent: var(--c-fi); } .dm-accent-ah{ --accent: var(--c-ah); } .dm-accent-pd{ --accent: var(--c-pd); } /* ---------- 通用按钮 ---------- */ .dm-btn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family: var(--font); font-weight:600; font-size:13px; padding:9px 16px; border-radius: var(--radius-sm); border:1px solid transparent; color:#fff; background: color-mix(in oklch, var(--accent, var(--c-hr)) 85%, black 0%); transition: filter .2s var(--ease), transform .2s var(--ease); } .dm-btn:hover{ filter: brightness(1.12); } .dm-btn:active{ transform: translateY(1px); } .dm-btn.ghost{ background: var(--glass); border-color: var(--line); color: var(--ink); } .dm-btn.ghost:hover{ background: var(--glass2); } /* ---------- 通用状态 pill / tag ---------- */ .dm-tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:99px; font-size:11px; font-weight:700; line-height:1.6; } .dm-tag.ok{ background: var(--green-bg); color: oklch(80% 0.14 156); } .dm-tag.warn{ background: var(--orange-bg); color: oklch(82% 0.13 75); } .dm-tag.bad{ background: var(--red-bg); color: oklch(80% 0.16 25); } .dm-tag.info{ background: var(--blue-bg); color: oklch(82% 0.12 230); } /* ---------- 无障碍：尊重减少动效偏好 ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }