mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-18 10:40:50 +08:00
112 lines
3.0 KiB
SCSS
112 lines
3.0 KiB
SCSS
/**
|
||
* 主题样式
|
||
*/
|
||
|
||
// 浅色主题（默认）
|
||
:root {
|
||
// 极简暖灰：浅色模式
|
||
--bg-secondary: #faf9f5; // 页面背景（纸感）
|
||
--bg-primary: #f0eee8; // 容器/卡片背景
|
||
--bg-tertiary: #e9e6df; // hover/次级背景
|
||
--bg-hover: var(--bg-tertiary);
|
||
--bg-quinary: #f6f4ee;
|
||
--bg-error-light: rgba(198, 87, 70, 0.1);
|
||
|
||
--text-primary: #2d2a26;
|
||
--text-secondary: #6d6760;
|
||
--text-tertiary: #a29c95;
|
||
--text-quaternary: #c0bab3;
|
||
--text-muted: var(--text-tertiary);
|
||
|
||
--border-color: #e3e1db; // 边框/分割线
|
||
--border-secondary: var(--border-color);
|
||
--border-primary: #d5d2cb;
|
||
--border-hover: #cecac4;
|
||
|
||
--primary-color: #8b8680; // 行动色（主色）
|
||
--primary-hover: #7f7a74;
|
||
--primary-active: #726d67;
|
||
--primary-contrast: #ffffff;
|
||
|
||
--success-color: #10b981;
|
||
--warning-color: #c65746; // 错误/警告色
|
||
--error-color: #c65746;
|
||
--danger-color: var(--error-color);
|
||
--info-color: var(--primary-color);
|
||
|
||
--warning-bg: rgba(198, 87, 70, 0.12);
|
||
--warning-border: rgba(198, 87, 70, 0.35);
|
||
--warning-text: var(--warning-color);
|
||
|
||
--success-badge-bg: #d1fae5;
|
||
--success-badge-text: #065f46;
|
||
--success-badge-border: #6ee7b7;
|
||
|
||
--failure-badge-bg: rgba(198, 87, 70, 0.14);
|
||
--failure-badge-text: #8a3a30;
|
||
--failure-badge-border: rgba(198, 87, 70, 0.35);
|
||
|
||
--count-badge-bg: rgba(139, 134, 128, 0.18);
|
||
--count-badge-text: var(--primary-active);
|
||
|
||
--shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
|
||
--shadow-lg: 0 10px 18px -3px rgb(0 0 0 / 0.1);
|
||
|
||
--radius-md: 8px;
|
||
--accent-tertiary: var(--bg-tertiary);
|
||
}
|
||
|
||
// 深色主题（#191919）
|
||
[data-theme='dark'] {
|
||
// 极简暖灰：深色模式（提升对比度与层级）
|
||
--bg-secondary: #151412; // 页面背景
|
||
--bg-primary: #1d1b18; // 容器/卡片背景
|
||
--bg-tertiary: #262320; // hover/次级背景
|
||
--bg-hover: #2e2a26;
|
||
--bg-quinary: #191714;
|
||
--bg-error-light: rgba(198, 87, 70, 0.18);
|
||
|
||
--text-primary: #f6f4f1;
|
||
--text-secondary: #c9c3bb;
|
||
--text-tertiary: #9c958d;
|
||
--text-quaternary: #6f6962;
|
||
--text-muted: var(--text-tertiary);
|
||
|
||
--border-color: #3a3530;
|
||
--border-secondary: var(--border-color);
|
||
--border-primary: #4a453f;
|
||
--border-hover: #5a544d;
|
||
|
||
--primary-color: #8b8680;
|
||
--primary-hover: #9a948e;
|
||
--primary-active: #a6a099;
|
||
--primary-contrast: #ffffff;
|
||
|
||
--success-color: #10b981;
|
||
--warning-color: #c65746;
|
||
--error-color: #c65746;
|
||
--danger-color: var(--error-color);
|
||
--info-color: var(--primary-color);
|
||
|
||
--warning-bg: rgba(198, 87, 70, 0.22);
|
||
--warning-border: rgba(198, 87, 70, 0.45);
|
||
--warning-text: #f1b0a6;
|
||
|
||
--success-badge-bg: rgba(6, 78, 59, 0.3);
|
||
--success-badge-text: #6ee7b7;
|
||
--success-badge-border: #059669;
|
||
|
||
--failure-badge-bg: rgba(198, 87, 70, 0.24);
|
||
--failure-badge-text: #f1b0a6;
|
||
--failure-badge-border: rgba(198, 87, 70, 0.5);
|
||
|
||
--count-badge-bg: rgba(139, 134, 128, 0.28);
|
||
--count-badge-text: var(--primary-active);
|
||
|
||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
|
||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
|
||
|
||
--radius-md: 8px;
|
||
--accent-tertiary: var(--bg-tertiary);
|
||
}
|