/* * Admin Theme Tokens (Ant Design Pro-ish) * * 目标:在不引入构建链(less/webpack)的前提下,用 CSS Variables 复刻 Ant Design Pro 的视觉基线。 * * 说明:Ant Design Pro 文档中的 theme 实际是 less 变量(@primary-color 等)。 * 我们这里用 --adm-* 变量做一层“设计令牌”,后续页面/组件统一引用变量,逐步推广。 */ :root{ /* 品牌色 / 链接色(Ant Design v5 默认主色接近 #1677ff) */ --adm-color-primary: #1677ff; --adm-color-primary-hover: #4096ff; --adm-color-primary-active: #0958d9; --adm-color-link: var(--adm-color-primary); /* 背景 / 容器(接近 Ant Design Pro Analysis 默认浅色主题) */ --adm-bg-layout: #f5f7fb; --adm-bg-container: #ffffff; --adm-bg-header: #ffffff; /* 文本 */ --adm-text: #0f172a; --adm-text-secondary: #64748b; --adm-text-muted: #94a3b8; /* 边框 / 分割线 */ --adm-border-color: #e5e7eb; --adm-border-color-strong: #d1d5db; /* 圆角 / 阴影(AntD 更偏轻量阴影) */ --adm-radius: 12px; --adm-radius-sm: 10px; --adm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --adm-shadow-header: 0 1px 0 rgba(15, 23, 42, 0.04), 0 2px 10px rgba(15, 23, 42, 0.06); --adm-shadow-popover: 0 12px 30px rgba(15, 23, 42, .12); /* 中性色衍生(用于空态背景等) */ --adm-surface-tint: rgba(15, 23, 42, .02); /* 表单 */ --adm-input-bg: #ffffff; --adm-input-border: #d1d5db; --adm-input-border-hover: #a3aab6; --adm-input-text: #0f172a; /* 表格(接近 Ant Design 表头/hover) */ --adm-table-header-bg: #fafafa; --adm-table-row-hover-bg: rgba(22, 119, 255, .04); /* 控件/交互层(hover/active 的统一 tint,用于分页/顶部菜单等) */ --adm-primary-tint-04: rgba(22, 119, 255, .04); --adm-primary-tint-06: rgba(22, 119, 255, .06); --adm-primary-tint-08: rgba(22, 119, 255, .08); --adm-primary-border-35: rgba(22, 119, 255, .35); --adm-primary-border-45: rgba(22, 119, 255, .45); --adm-primary-focus-ring: rgba(22, 119, 255, .12); /* 状态色(接近 Ant Design) */ --adm-success: #16a34a; --adm-warning: #f59e0b; --adm-error: #ef4444; --adm-success-bg: #f0fdf4; --adm-warning-bg: #fffbeb; --adm-error-bg: #fef2f2; /* 状态色衍生(用于治理提示块/弱提示/标签等) */ --adm-error-border-soft: rgba(239, 68, 68, .25); --adm-error-border-strong: rgba(239, 68, 68, .45); --adm-error-tint: rgba(239, 68, 68, .12); --adm-error-tint-strong: rgba(239, 68, 68, .18); }