/* 改变主题色变量 */
|
|
$theme: _orange;
|
|
:root {
|
@if $theme==_orange {
|
--el-color-primary: #fd6a00;
|
--el-color-primary-light-1: #DE4112;
|
--el-color-primary-light-2: #DE4112;
|
--el-color-primary-light-3: #dc4d23;
|
--el-color-primary-light-4: #dc5930;
|
--el-color-primary-light-5: #fca66c;
|
--el-color-primary-light-6: #f8a875;
|
--el-color-primary-light-7: #e59f68;
|
--el-color-primary-light-8: #f1cca3;
|
--el-color-primary-light-9: #fff2ec;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2: #b6472a;
|
}
|
@else if $theme==_green {
|
--el-color-primary: #529b2e;
|
--el-color-primary-light-1: #95d475;
|
--el-color-primary-light-2: #b3e19d;
|
--el-color-primary-light-3: #d1edc4;
|
--el-color-primary-light-4: #d1edc4;
|
--el-color-primary-light-5: #d1edc4;
|
--el-color-primary-light-6: #d1edc4;
|
--el-color-primary-light-7: #e1f3d8;
|
--el-color-primary-light-8: #e1f3d8;
|
--el-color-primary-light-9: #f0f9eb;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#d1edc4;
|
}
|
@else if $theme==_blue {
|
--el-color-primary: #409eff;
|
--el-color-primary-light-1: #53a8ff;
|
--el-color-primary-light-2: #66b1ff;
|
--el-color-primary-light-3: #79bbff;
|
--el-color-primary-light-4: #8cc5ff;
|
--el-color-primary-light-5: #a0cfff;
|
--el-color-primary-light-6: #b3d8ff;
|
--el-color-primary-light-7: #c6e2ff;
|
--el-color-primary-light-8: #d9ecff;
|
--el-color-primary-light-9: #ecf5ff;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#79bbff;
|
}
|
@else if $theme==_one_rmb {
|
--el-color-primary: #46512c;
|
--el-color-primary-light-1: #7e8364;
|
--el-color-primary-light-2: #bcc6a4;
|
--el-color-primary-light-3: #dac48e;
|
--el-color-primary-light-4: #cfd7c4;
|
--el-color-primary-light-5: #fca66c;
|
--el-color-primary-light-6: #f8a875;
|
--el-color-primary-light-7: #e59f68;
|
--el-color-primary-light-8: #f1cca3;
|
--el-color-primary-light-9: #fff2ec;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#dac48e;
|
}
|
@else if $theme==_five_rmb {
|
--el-color-primary: #443459;
|
--el-color-primary-light-1: #776087;
|
--el-color-primary-light-2: #9a86a9;
|
--el-color-primary-light-3: #8ee3a6;
|
--el-color-primary-light-4: #d1c1ac;
|
--el-color-primary-light-5: #fca66c;
|
--el-color-primary-light-6: #f8a875;
|
--el-color-primary-light-7: #e59f68;
|
--el-color-primary-light-8: #f1cca3;
|
--el-color-primary-light-9: #fff2ec;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#8ee3a6;
|
}
|
@else if $theme==_ten_rmb {
|
--el-color-primary: #4d6694;
|
--el-color-primary-light-1: #6182a8;
|
--el-color-primary-light-2: #c6c0d7;
|
--el-color-primary-light-3: #9dd9ec;
|
--el-color-primary-light-4: #d4e4f1;
|
--el-color-primary-light-5: #a0cfff;
|
--el-color-primary-light-6: #b3d8ff;
|
--el-color-primary-light-7: #c6e2ff;
|
--el-color-primary-light-8: #d9ecff;
|
--el-color-primary-light-9: #ecf5ff;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#9dd9ec;
|
}
|
@else if $theme==_twenty_rmb {
|
--el-color-primary: #462d25;
|
--el-color-primary-light-1: #6a4d31;
|
--el-color-primary-light-2: #8c786a;
|
--el-color-primary-light-3: #919c85;
|
--el-color-primary-light-4: #ebc284;
|
--el-color-primary-light-5: #fca66c;
|
--el-color-primary-light-6: #f8a875;
|
--el-color-primary-light-7: #e59f68;
|
--el-color-primary-light-8: #f1cca3;
|
--el-color-primary-light-9: #fff2ec;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#919c85;
|
}
|
@else if $theme==_fifty_rmb {
|
--el-color-primary: #194536;
|
--el-color-primary-light-1: #527a72;
|
--el-color-primary-light-2: #92b8ab;
|
--el-color-primary-light-3: #7c809d;
|
--el-color-primary-light-4: #c7c0d2;
|
--el-color-primary-light-5: #fca66c;
|
--el-color-primary-light-6: #f8a875;
|
--el-color-primary-light-7: #e59f68;
|
--el-color-primary-light-8: #f1cca3;
|
--el-color-primary-light-9: #fff2ec;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#7c809d;
|
}
|
@else if $theme==_hundred_rmb {
|
--el-color-primary: #b60e2b;
|
--el-color-primary-light-1: #e24136;
|
--el-color-primary-light-2: #cc5369;
|
--el-color-primary-light-3: #bcb0d7;
|
--el-color-primary-light-4: #efa5b2;
|
--el-color-primary-light-5: #fca66c;
|
--el-color-primary-light-6: #f8a875;
|
--el-color-primary-light-7: #e59f68;
|
--el-color-primary-light-8: #f1cca3;
|
--el-color-primary-light-9: #fff2ec;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#bcb0d7;
|
}
|
@else if $theme==_future {
|
--el-color-primary: #071f2a;
|
--el-color-primary-light-1: #081e2b;
|
--el-color-primary-light-2: #255367;
|
--el-color-primary-light-3: #317d91;
|
--el-color-primary-light-4: #3c8193;
|
--el-color-primary-light-5: #538896;
|
--el-color-primary-light-6: #5f8d9a;
|
--el-color-primary-light-7: #69909b;
|
--el-color-primary-light-8: #76959d;
|
--el-color-primary-light-9: #9ab8c0;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#071f2a;
|
}
|
@else {
|
--el-color-primary: #DE4112;
|
--el-color-primary-light-1: #DE4112;
|
--el-color-primary-light-2: #DE4112;
|
--el-color-primary-light-3: #dc4d23;
|
--el-color-primary-light-4: #dc5930;
|
--el-color-primary-light-5: #fca66c;
|
--el-color-primary-light-6: #f8a875;
|
--el-color-primary-light-7: #e59f68;
|
--el-color-primary-light-8: #f1cca3;
|
--el-color-primary-light-9: #fff2ec;
|
--el-color-white: #ffffff;
|
--el-color-black: #000000;
|
--el-color-primary-dark-2:#dc4d23;
|
}
|
--el-color-success: #67c23a;
|
--el-color-success-light: #e1f3d8;
|
--el-color-success-lighter: #f0f9eb;
|
--el-color-warning: #e6a23c;
|
--el-color-warning-light: #faecd8;
|
--el-color-warning-lighter: #fdf6ec;
|
--el-color-danger: #c71f1f;
|
--el-color-danger-light: #e06a6a;
|
--el-color-danger-lighter: #f5e0e0;
|
--el-color-error: #f56c6c;
|
--el-color-error-light: #fde2e2;
|
--el-color-error-lighter: #fef0f0;
|
--el-color-info: #909399;
|
--el-color-info-light: #e9e9eb;
|
--el-color-info-lighter: #f4f4f5;
|
--el-bg-color: #f5f7fa;
|
--el-border-width-base: 1px;
|
--el-border-style-base: solid;
|
--el-border-color-hover: var(--el-text-color-placeholder);
|
--el-border-base: var(--el-border-width-base) var(--el-border-style-base) var(--el-border-color-base);
|
--el-svg-monochrome-grey: #dcdde0;
|
--el-fill-base: var(--el-color-white);
|
--el-font-size-extra-large: 20px;
|
--el-font-size-large: 18px;
|
--el-font-size-medium: 16px;
|
--el-font-size-base: 14px;
|
--el-font-size-small: 13px;
|
--el-font-size-extra-small: 12px;
|
--el-font-weight-primary: 500;
|
--el-font-line-height-primary: 24px;
|
--el-text-color-disabled-base: #bbb;
|
--el-index-normal: 1;
|
--el-index-top: 1000;
|
--el-index-popper: 2000;
|
--el-text-color-primary: #303133;
|
--el-text-color-regular: #606266;
|
--el-text-color-secondary: #909399;
|
--el-text-color-placeholder: #c0c4cc;
|
--el-border-color-base: #dcdfe6;
|
--el-border-color-light: #e4e7ed;
|
--el-border-color-lighter: #ebeef5;
|
--el-border-color-extra-light: #f2f6fc;
|
--el-border-radius-base: 4px;
|
--el-border-radius-small: 2px;
|
--el-border-radius-round: 20px;
|
--el-border-radius-circle: 100%;
|
--el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12),
|
0 0 6px rgba(0, 0, 0, 0.04);
|
--el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
--el-disabled-bg-color: var(--el-bg-color);
|
--el-disabled-text-color: var(--el-text-color-placeholder);
|
--el-disabled-border-color: var(--el-border-color-light);
|
--el-transition-duration: 0.3s;
|
--el-transition-duration-fast: 0.2s;
|
--el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
|
--el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
|
--el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
|
--el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
|
--el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),
|
opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
|
--el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
|
--el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
|
--el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
|
}
|
|
@import "element-plus/theme-chalk/index.css";
|
