212 lines
5.8 KiB
CSS
212 lines
5.8 KiB
CSS
/*
|
|
* 统一颜色变量管理文件
|
|
* 用于规范化项目中的所有颜色使用
|
|
* 支持主题切换和颜色统一管理
|
|
*/
|
|
|
|
:root {
|
|
/* ===== 主题色系 ===== */
|
|
--color-primary: #5d7eeb;
|
|
--color-primary-50: #f0f3ff;
|
|
--color-primary-100: #e1e8ff;
|
|
--color-primary-200: #c3d1ff;
|
|
--color-primary-300: #a5baff;
|
|
--color-primary-400: #87a3ff;
|
|
--color-primary-500: #5d7eeb;
|
|
--color-primary-600: #4a63bc;
|
|
--color-primary-700: #38488d;
|
|
--color-primary-800: #252d5e;
|
|
--color-primary-900: #13122f;
|
|
|
|
/* 主题色透明度变体 */
|
|
--color-primary-light: rgba(93, 126, 235, 0.1);
|
|
--color-primary-medium: rgba(93, 126, 235, 0.15);
|
|
--color-primary-dark: rgba(93, 126, 235, 0.8);
|
|
|
|
/* ===== 语义化颜色 ===== */
|
|
--color-success: #07c160;
|
|
--color-success-50: #f0f9f0;
|
|
--color-success-100: #e1f5e1;
|
|
--color-success-200: #c3ebc3;
|
|
--color-success-300: #a5e1a5;
|
|
--color-success-400: #87d787;
|
|
--color-success-500: #07c160;
|
|
--color-success-600: #059a4c;
|
|
--color-success-700: #047338;
|
|
--color-success-800: #024c24;
|
|
--color-success-900: #012510;
|
|
--color-success-light: rgba(7, 193, 96, 0.1);
|
|
--color-success-dark: rgba(7, 193, 96, 0.8);
|
|
|
|
--color-warning: #ff976a;
|
|
--color-warning-50: #fff5f0;
|
|
--color-warning-100: #ffebe1;
|
|
--color-warning-200: #ffd7c3;
|
|
--color-warning-300: #ffc3a5;
|
|
--color-warning-400: #ffaf87;
|
|
--color-warning-500: #ff976a;
|
|
--color-warning-600: #cc7955;
|
|
--color-warning-700: #995b40;
|
|
--color-warning-800: #663d2a;
|
|
--color-warning-900: #331f15;
|
|
--color-warning-light: rgba(255, 151, 106, 0.1);
|
|
--color-warning-dark: rgba(255, 151, 106, 0.8);
|
|
|
|
--color-danger: #ee0a24;
|
|
--color-danger-light: rgba(238, 10, 36, 0.1);
|
|
--color-danger-dark: rgba(238, 10, 36, 0.8);
|
|
|
|
--color-info: #1989fa;
|
|
--color-info-light: rgba(25, 137, 250, 0.1);
|
|
--color-info-dark: rgba(25, 137, 250, 0.8);
|
|
|
|
/* ===== 中性色系 ===== */
|
|
--color-gray-50: #fafafa;
|
|
--color-gray-100: #f5f5f5;
|
|
--color-gray-200: #e5e5e5;
|
|
--color-gray-300: #d4d4d4;
|
|
--color-gray-400: #a3a3a3;
|
|
--color-gray-500: #737373;
|
|
--color-gray-600: #525252;
|
|
--color-gray-700: #404040;
|
|
--color-gray-800: #262626;
|
|
--color-gray-900: #171717;
|
|
|
|
/* ===== 文本颜色 ===== */
|
|
--color-text-primary: #323233;
|
|
--color-text-secondary: #646566;
|
|
--color-text-tertiary: #969799;
|
|
--color-text-quaternary: #c8c9cc;
|
|
--color-text-disabled: #c8c9cc;
|
|
--color-text-white: #ffffff;
|
|
|
|
/* ===== 背景颜色 ===== */
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #fafafa;
|
|
--color-bg-tertiary: #f8f8f8;
|
|
--color-bg-quaternary: #f2f3f5;
|
|
--color-bg-overlay: rgba(0, 0, 0, 0.5);
|
|
--color-bg-mask: rgba(0, 0, 0, 0.8);
|
|
|
|
/* ===== 边框颜色 ===== */
|
|
--color-border-primary: #ebedf0;
|
|
--color-border-secondary: #f2f3f5;
|
|
--color-border-tertiary: #dcdee0;
|
|
--color-border-focus: var(--color-primary);
|
|
|
|
/* ===== 状态颜色 ===== */
|
|
--color-active: #f2f3f5;
|
|
--color-hover: rgba(0, 0, 0, 0.05);
|
|
--color-focus: var(--color-primary-light);
|
|
|
|
/* ===== 阴影颜色 ===== */
|
|
--color-shadow-light: rgba(0, 0, 0, 0.1);
|
|
--color-shadow-medium: rgba(0, 0, 0, 0.15);
|
|
--color-shadow-dark: rgba(0, 0, 0, 0.2);
|
|
|
|
/* ===== 业务特定颜色 ===== */
|
|
--color-service-personal: #5d7eeb; /* 个人大数据 */
|
|
--color-service-company: #6b9df9; /* 小微企业 */
|
|
--color-service-loan: #e1a0e4; /* 贷前风险 */
|
|
|
|
/* ===== 渐变色彩 ===== */
|
|
--gradient-primary: linear-gradient(
|
|
135deg,
|
|
var(--color-primary-400),
|
|
var(--color-primary-600)
|
|
);
|
|
--gradient-success: linear-gradient(
|
|
135deg,
|
|
var(--color-success),
|
|
var(--color-success-dark)
|
|
);
|
|
--gradient-warning: linear-gradient(
|
|
135deg,
|
|
var(--color-warning),
|
|
var(--color-warning-dark)
|
|
);
|
|
--gradient-danger: linear-gradient(
|
|
135deg,
|
|
var(--color-danger),
|
|
var(--color-danger-dark)
|
|
);
|
|
}
|
|
|
|
/* ===== 暗色主题支持 ===== */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-text-primary: #ffffff;
|
|
--color-text-secondary: #e5e5e5;
|
|
--color-text-tertiary: #a3a3a3;
|
|
--color-text-quaternary: #737373;
|
|
|
|
--color-bg-primary: #1a1a1a;
|
|
--color-bg-secondary: #262626;
|
|
--color-bg-tertiary: #404040;
|
|
--color-bg-quaternary: #525252;
|
|
|
|
--color-border-primary: #404040;
|
|
--color-border-secondary: #525252;
|
|
--color-border-tertiary: #737373;
|
|
}
|
|
}
|
|
|
|
/* ===== 工具类 ===== */
|
|
.text-primary {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
.text-success {
|
|
color: var(--color-success) !important;
|
|
}
|
|
.text-warning {
|
|
color: var(--color-warning) !important;
|
|
}
|
|
.text-danger {
|
|
color: var(--color-danger) !important;
|
|
}
|
|
.text-info {
|
|
color: var(--color-info) !important;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: var(--color-primary) !important;
|
|
}
|
|
.bg-success {
|
|
background-color: var(--color-success) !important;
|
|
}
|
|
.bg-warning {
|
|
background-color: var(--color-warning) !important;
|
|
}
|
|
.bg-danger {
|
|
background-color: var(--color-danger) !important;
|
|
}
|
|
.bg-info {
|
|
background-color: var(--color-info) !important;
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: var(--color-primary) !important;
|
|
}
|
|
.border-success {
|
|
border-color: var(--color-success) !important;
|
|
}
|
|
.border-warning {
|
|
border-color: var(--color-warning) !important;
|
|
}
|
|
.border-danger {
|
|
border-color: var(--color-danger) !important;
|
|
}
|
|
.border-info {
|
|
border-color: var(--color-info) !important;
|
|
}
|
|
|
|
/* ===== 响应式颜色工具类 ===== */
|
|
@media (max-width: 768px) {
|
|
.text-primary-mobile {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
.bg-primary-mobile {
|
|
background-color: var(--color-primary) !important;
|
|
}
|
|
}
|