74 lines
2.6 KiB
CSS
74 lines
2.6 KiB
CSS
/*
|
||
* 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);
|
||
}
|