118 lines
3.4 KiB
CSS
118 lines
3.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* 简单的图标占位类 */
|
|
.i-bell::before { content: "🔔"; display: inline-block; }
|
|
|
|
/* 全局滚动条稳定，避免页面切换时左右抖动 */
|
|
body { scrollbar-gutter: stable both-edges; }
|
|
|
|
/* 统一阴影层级（与 antd 风格接近） */
|
|
.elev-1 { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
|
.elev-2 { box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
|
|
|
|
/* 通用卡片表面（可在各页面复用） */
|
|
.card-surface {
|
|
background: #fff;
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/* ==========================
|
|
设计规范：根变量与暗色主题
|
|
来源：.cursorules/design.md
|
|
========================== */
|
|
:root {
|
|
/* 颜色 - 主色与中性色 */
|
|
--color-bg: #0D0D0D; /* 背景：深黑 */
|
|
--color-surface: #1A1A1A; /* 模块底 */
|
|
--color-text: #F2F2F2; /* 正文文本 */
|
|
--color-text-secondary: #CCCCCC; /* 次要文本 */
|
|
--color-border: #333333; /* 边框 */
|
|
--color-primary: #00B030; /* 主功能色 */
|
|
--color-blue: #1A66E0; /* 辅助交互蓝 */
|
|
--color-accent: #FF6A30; /* 强调橙 */
|
|
|
|
/* 字号与行高 */
|
|
--font-title-size: 20px; /* Montserrat 半粗体 */
|
|
--font-body-size: 14px; /* Inter 常规 */
|
|
--font-small-size: 12px; /* 辅助文本 */
|
|
--line-height-base: 1.5;
|
|
|
|
/* 圆角与阴影 */
|
|
--radius-card: 6px; /* 卡片圆角 */
|
|
--shadow-inset-card: inset 0 2px 4px rgba(0,0,0,0.4);
|
|
--glow-primary: 0 0 6px rgba(0,176,48,0.3);
|
|
}
|
|
|
|
/* 正确的 :root 变量声明（专业科技蓝方案） */
|
|
:root {
|
|
/* 主色系 - 科技蓝 */
|
|
--color-primary: #3B82F6;
|
|
--color-primary-light: #60A5FA;
|
|
--color-primary-dark: #2563EB;
|
|
--color-primary-glow: rgba(59, 130, 246, 0.3);
|
|
|
|
/* 辅助色 */
|
|
--color-blue: #1A66E0;
|
|
--color-accent: #FF6A30;
|
|
|
|
/* 中性色（保持） */
|
|
--color-bg: #0D0D0D;
|
|
--color-surface: #1A1A1A;
|
|
--color-text: #F2F2F2;
|
|
--color-text-secondary: #CCCCCC;
|
|
--color-border: #333333;
|
|
|
|
/* 尺寸与阴影（保持） */
|
|
--radius-card: 6px;
|
|
--shadow-inset-card: inset 0 2px 4px rgba(0,0,0,0.4);
|
|
--glow-primary: 0 0 6px var(--color-primary-glow);
|
|
}
|
|
|
|
/* 全局暗色基础 */
|
|
html, body, #app {
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-size: var(--font-body-size);
|
|
line-height: var(--line-height-base);
|
|
}
|
|
|
|
/* 卡片：遵循新规范（默认暗色表面） */
|
|
.card-surface--dark {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-inset-card);
|
|
}
|
|
|
|
/* 按钮主色（用于顶部试用按钮等） */
|
|
.btn-primary {
|
|
background: var(--color-primary);
|
|
color: #fff;
|
|
}
|
|
.btn-primary:hover {
|
|
box-shadow: var(--glow-primary);
|
|
filter: brightness(1.03);
|
|
}
|
|
|
|
/* 次要文本与分割线工具类 */
|
|
.text-secondary { color: var(--color-text-secondary); }
|
|
.border-base { border-color: var(--color-border); }
|
|
|
|
/* 覆盖 antd 组件的占位符与主按钮色（全局） */
|
|
:root :where(.ant-input, .ant-input-affix-wrapper, .ant-select-selector, textarea)::placeholder {
|
|
color: color-mix(in oklab, var(--color-text-secondary) 80%, transparent);
|
|
}
|
|
|
|
:root :where(.ant-btn-primary) {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
:root :where(.ant-btn-primary:hover, .ant-btn-primary:focus) {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--glow-primary);
|
|
}
|