mirror of
https://github.com/fatedier/frp.git
synced 2026-03-21 01:09:27 +08:00
118 lines
3.3 KiB
CSS
118 lines
3.3 KiB
CSS
:root {
|
|
/* Text colors */
|
|
--color-text-primary: #303133;
|
|
--color-text-secondary: #606266;
|
|
--color-text-muted: #909399;
|
|
--color-text-light: #c0c4cc;
|
|
--color-text-placeholder: #a8abb2;
|
|
|
|
/* Background colors */
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #f9f9f9;
|
|
--color-bg-tertiary: #fafafa;
|
|
--color-bg-surface: #ffffff;
|
|
--color-bg-muted: #f4f4f5;
|
|
--color-bg-input: #ffffff;
|
|
--color-bg-hover: #efefef;
|
|
--color-bg-active: #eaeaea;
|
|
|
|
/* Border colors */
|
|
--color-border: #dcdfe6;
|
|
--color-border-light: #e4e7ed;
|
|
--color-border-lighter: #ebeef5;
|
|
--color-border-extra-light: #f2f6fc;
|
|
|
|
/* Status colors */
|
|
--color-primary: #409eff;
|
|
--color-primary-light: #ecf5ff;
|
|
--color-success: #67c23a;
|
|
--color-warning: #e6a23c;
|
|
--color-danger: #f56c6c;
|
|
--color-danger-dark: #c45656;
|
|
--color-danger-light: #fef0f0;
|
|
--color-info: #909399;
|
|
|
|
/* Button colors */
|
|
--color-btn-primary: #303133;
|
|
--color-btn-primary-hover: #4a4d5c;
|
|
|
|
/* Element Plus mapping */
|
|
--el-color-primary: var(--color-primary);
|
|
--el-color-success: var(--color-success);
|
|
--el-color-warning: var(--color-warning);
|
|
--el-color-danger: var(--color-danger);
|
|
--el-color-info: var(--color-info);
|
|
|
|
--el-text-color-primary: var(--color-text-primary);
|
|
--el-text-color-regular: var(--color-text-secondary);
|
|
--el-text-color-secondary: var(--color-text-muted);
|
|
--el-text-color-placeholder: var(--color-text-placeholder);
|
|
|
|
--el-bg-color: var(--color-bg-primary);
|
|
--el-bg-color-page: var(--color-bg-secondary);
|
|
--el-bg-color-overlay: var(--color-bg-primary);
|
|
|
|
--el-border-color: var(--color-border);
|
|
--el-border-color-light: var(--color-border-light);
|
|
--el-border-color-lighter: var(--color-border-lighter);
|
|
--el-border-color-extra-light: var(--color-border-extra-light);
|
|
|
|
--el-fill-color-blank: var(--color-bg-primary);
|
|
--el-fill-color-light: var(--color-bg-tertiary);
|
|
--el-fill-color: var(--color-bg-tertiary);
|
|
--el-fill-color-dark: var(--color-bg-hover);
|
|
--el-fill-color-darker: var(--color-bg-active);
|
|
|
|
/* Input */
|
|
--el-input-bg-color: var(--color-bg-input);
|
|
--el-input-border-color: var(--color-border);
|
|
--el-input-hover-border-color: var(--color-border-light);
|
|
|
|
/* Dialog */
|
|
--el-dialog-bg-color: var(--color-bg-primary);
|
|
--el-overlay-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
html.dark {
|
|
/* Text colors */
|
|
--color-text-primary: #e5e7eb;
|
|
--color-text-secondary: #b0b0b0;
|
|
--color-text-muted: #888888;
|
|
--color-text-light: #666666;
|
|
--color-text-placeholder: #afafaf;
|
|
|
|
/* Background colors */
|
|
--color-bg-primary: #212121;
|
|
--color-bg-secondary: #181818;
|
|
--color-bg-tertiary: #303030;
|
|
--color-bg-surface: #303030;
|
|
--color-bg-muted: #303030;
|
|
--color-bg-input: #2f2f2f;
|
|
--color-bg-hover: #3a3a3a;
|
|
--color-bg-active: #454545;
|
|
|
|
/* Border colors */
|
|
--color-border: #404040;
|
|
--color-border-light: #353535;
|
|
--color-border-lighter: #2a2a2a;
|
|
--color-border-extra-light: #222222;
|
|
|
|
/* Status colors */
|
|
--color-primary: #409eff;
|
|
--color-danger: #f87171;
|
|
--color-danger-dark: #f87171;
|
|
--color-danger-light: #3d2027;
|
|
--color-info: #888888;
|
|
|
|
/* Button colors */
|
|
--color-btn-primary: #404040;
|
|
--color-btn-primary-hover: #505050;
|
|
|
|
/* Dark overrides */
|
|
--el-text-color-regular: var(--color-text-primary);
|
|
--el-overlay-color: rgba(0, 0, 0, 0.7);
|
|
|
|
background-color: #181818;
|
|
color-scheme: dark;
|
|
}
|