更新
This commit is contained in:
Your Name
+34
-31
@@ -1,43 +1,46 @@
|
||||
:root.dark {
|
||||
color-scheme: dark;
|
||||
--table-header-bg-color: var(--el-bg-color);
|
||||
--el-bg-color-page: #0a0a0a;
|
||||
--el-bg-color: #1d2124;
|
||||
--el-bg-color-overlay: #1d1e1f;
|
||||
--el-text-color-primary: #e5eaf3;
|
||||
--el-text-color-regular: #cfd3dc;
|
||||
--el-text-color-secondary: #a3a6ad;
|
||||
--el-text-color-placeholder: #8d9095;
|
||||
--el-text-color-disabled: #6c6e72;
|
||||
--el-border-color-darker: #636466;
|
||||
--el-border-color-dark: #58585b;
|
||||
--el-border-color: #4c4d4f;
|
||||
--el-border-color-light: #414243;
|
||||
--el-border-color-lighter: #363637;
|
||||
--el-border-color-extra-light: #2b2b2c;
|
||||
--el-fill-color-darker: #424243;
|
||||
--el-fill-color-dark: #39393a;
|
||||
--el-fill-color: #303030;
|
||||
--el-fill-color-light: #262727;
|
||||
--el-fill-color-lighter: #1d1d1d;
|
||||
--el-fill-color-extra-light: #191919;
|
||||
--table-header-bg-color: #1E293B;
|
||||
--health-bg-page: #0F1419;
|
||||
--health-bg-sidebar: #151B23;
|
||||
--health-text-primary: #F1F5F9;
|
||||
--health-text-secondary: #94A3B8;
|
||||
--health-border: #334155;
|
||||
--health-border-light: #1E293B;
|
||||
--health-primary-light: rgba(14, 165, 233, 0.15);
|
||||
--el-bg-color-page: var(--health-bg-page);
|
||||
--el-bg-color: #151B23;
|
||||
--el-bg-color-overlay: #1E293B;
|
||||
--el-text-color-primary: var(--health-text-primary);
|
||||
--el-text-color-regular: #CBD5E1;
|
||||
--el-text-color-secondary: #94A3B8;
|
||||
--el-text-color-placeholder: #64748B;
|
||||
--el-text-color-disabled: #475569;
|
||||
--el-border-color-darker: #475569;
|
||||
--el-border-color-dark: #334155;
|
||||
--el-border-color: #334155;
|
||||
--el-border-color-light: #334155;
|
||||
--el-border-color-lighter: #1E293B;
|
||||
--el-border-color-extra-light: #151B23;
|
||||
--el-fill-color-darker: #334155;
|
||||
--el-fill-color-dark: #1E293B;
|
||||
--el-fill-color: #1E293B;
|
||||
--el-fill-color-light: #151B23;
|
||||
--el-fill-color-lighter: #0F1419;
|
||||
--el-fill-color-extra-light: #1E293B;
|
||||
--el-fill-color-blank: var(--el-bg-color);
|
||||
--el-mask-color: rgba(0, 0, 0, 0.8);
|
||||
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
|
||||
--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
|
||||
--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
|
||||
--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
|
||||
--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000,
|
||||
0px 8px 16px -8px #000000 !important;
|
||||
/* wangeditor主题 */
|
||||
--el-mask-color: rgba(0, 0, 0, 0.72);
|
||||
--el-mask-color-extra-light: rgba(0, 0, 0, 0.36);
|
||||
--el-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--el-box-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.25);
|
||||
--el-box-shadow-lighter: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--el-box-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--w-e-textarea-bg-color: var(--el-bg-color);
|
||||
--w-e-textarea-color: var(--el-text-color-primary);
|
||||
--w-e-textarea-border-color: var(--el-border-color);
|
||||
--w-e-textarea-slight-border-color: var(--el-border-color-light);
|
||||
--w-e-textarea-slight-color: var(--el-border-color);
|
||||
--w-e-textarea-slight-bg-color: var(--el-bg-color-page);
|
||||
/* --w-e-textarea-selected-border-color: #b4d5ff;
|
||||
--w-e-textarea-handler-bg-color: #4290f7; */
|
||||
--w-e-toolbar-color: var(--el-text-color-primary);
|
||||
--w-e-toolbar-bg-color: var(--el-bg-color);
|
||||
--w-e-toolbar-active-color: var(--el-text-color-primary);
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
|
||||
&.body-padding .el-dialog__body {
|
||||
padding: 0;
|
||||
@@ -56,17 +56,27 @@
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-header-text-color: var(--el-text-color-primary);
|
||||
--el-table-header-text-color: var(--el-text-color-regular);
|
||||
--el-table-header-bg-color: var(--table-header-bg-color);
|
||||
--el-table-border-color: var(--health-border, var(--el-border-color-lighter));
|
||||
--el-table-row-hover-bg-color: var(--el-fill-color-light);
|
||||
font-size: var(--el-font-size-base);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
thead {
|
||||
th {
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 8px;
|
||||
border-color: var(--health-border, var(--el-border-color-lighter));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-input-group__prepend {
|
||||
background-color: var(--el-fill-color-blank);
|
||||
}
|
||||
@@ -78,22 +88,30 @@
|
||||
.el-menu--popup-container {
|
||||
&.theme-light {
|
||||
.el-menu {
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
.el-menu-item {
|
||||
border-radius: 6px;
|
||||
&.is-active {
|
||||
@apply bg-primary-light-9 border-primary border-r-2;
|
||||
background-color: var(--health-primary-light, var(--el-color-primary-light-9));
|
||||
color: var(--health-primary-dark, var(--el-color-primary));
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.el-menu-item:hover,
|
||||
.el-sub-menu__title:hover {
|
||||
color: var(--el-color-primary);
|
||||
background-color: var(--el-fill-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.theme-dark {
|
||||
.el-menu {
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
.el-menu-item {
|
||||
border-radius: 6px;
|
||||
&.is-active {
|
||||
@apply bg-primary;
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -110,6 +128,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
--el-button-hover-link-text-color: var(--el-color-primary-light-3);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
body {
|
||||
@apply text-base text-tx-primary overflow-hidden min-w-[375px];
|
||||
font-feature-settings: 'tnum' 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.form-tips {
|
||||
@apply text-tx-secondary text-xs leading-6 mt-1;
|
||||
}
|
||||
@@ -15,4 +21,9 @@ body {
|
||||
/* NProgress */
|
||||
#nprogress .bar {
|
||||
@apply bg-primary #{!important};
|
||||
height: 3px !important;
|
||||
}
|
||||
|
||||
#nprogress .peg {
|
||||
box-shadow: 0 0 8px var(--el-color-primary), 0 0 4px var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
+40
-31
@@ -1,49 +1,58 @@
|
||||
:root {
|
||||
--el-font-family: theme(fontFamily.sans);
|
||||
--el-font-weight-primary: 400;
|
||||
--el-menu-item-height: 46px;
|
||||
--el-menu-item-height: 42px;
|
||||
--el-menu-sub-item-height: var(--el-menu-item-height);
|
||||
--el-menu-icon-width: 18px;
|
||||
--aside-width: 200px;
|
||||
--navbar-height: 50px;
|
||||
--navbar-height: 52px;
|
||||
--color-white: #ffffff;
|
||||
--table-header-bg-color: #f8f8f8;
|
||||
--table-header-bg-color: #F8FAFC;
|
||||
--el-font-size-extra-large: 18px;
|
||||
--el-menu-base-level-padding: 16px;
|
||||
--el-menu-level-padding: 26px;
|
||||
--el-menu-base-level-padding: 14px;
|
||||
--el-menu-level-padding: 24px;
|
||||
--el-font-size-large: 16px;
|
||||
--el-font-size-medium: 15px;
|
||||
--el-font-size-base: 14px;
|
||||
--el-font-size-small: 13px;
|
||||
--el-font-size-extra-small: 12px;
|
||||
|
||||
/* 天蓝点缀 + 中性底色（天蓝仅用于主色/激活态，不铺满全局） */
|
||||
--health-primary: #0EA5E9;
|
||||
--health-primary-light: #E0F2FE;
|
||||
--health-primary-dark: #0284C7;
|
||||
--health-bg-page: #F1F5F9;
|
||||
--health-bg-sidebar: #FFFFFF;
|
||||
--health-text-primary: #1E293B;
|
||||
--health-text-secondary: #64748B;
|
||||
--health-border: #E2E8F0;
|
||||
--health-border-light: #EEF2F6;
|
||||
|
||||
--el-bg-color: var(--color-white);
|
||||
--el-bg-color-page: #f6f6f6;
|
||||
--el-bg-color-page: var(--health-bg-page);
|
||||
--el-bg-color-overlay: #ffffff;
|
||||
--el-text-color-primary: #333333;
|
||||
--el-text-color-regular: #666666;
|
||||
--el-text-color-secondary: #999999;
|
||||
--el-text-color-placeholder: #a8abb2;
|
||||
--el-text-color-disabled: #c0c4cc;
|
||||
--el-border-color: #dcdfe6;
|
||||
--el-border-color-light: #e4e7ed;
|
||||
--el-border-color-lighter: #ebeef5;
|
||||
--el-border-color-extra-light: #f2f2f2;
|
||||
--el-border-color-dark: #d4d7de;
|
||||
--el-border-color-darker: #cdd0d6;
|
||||
--el-fill-color: #f0f2f5;
|
||||
--el-fill-color-light: #f8f8f8;
|
||||
--el-fill-color-lighter: #fafafa;
|
||||
--el-fill-color-extra-light: #fafcff;
|
||||
--el-fill-color-dark: #ebedf0;
|
||||
--el-fill-color-darker: #e6e8eb;
|
||||
--el-text-color-primary: var(--health-text-primary);
|
||||
--el-text-color-regular: var(--health-text-secondary);
|
||||
--el-text-color-secondary: #94A3B8;
|
||||
--el-text-color-placeholder: #94A3B8;
|
||||
--el-text-color-disabled: #CBD5E1;
|
||||
--el-border-color: var(--health-border);
|
||||
--el-border-color-light: var(--health-border);
|
||||
--el-border-color-lighter: var(--health-border-light);
|
||||
--el-border-color-extra-light: #F8FAFC;
|
||||
--el-border-color-dark: #CBD5E1;
|
||||
--el-border-color-darker: #94A3B8;
|
||||
--el-fill-color: #F1F5F9;
|
||||
--el-fill-color-light: #F8FAFC;
|
||||
--el-fill-color-lighter: #FAFBFC;
|
||||
--el-fill-color-extra-light: #F8FAFC;
|
||||
--el-fill-color-dark: #E2E8F0;
|
||||
--el-fill-color-darker: #CBD5E1;
|
||||
--el-fill-color-blank: #ffffff;
|
||||
/* 过亮会盖住抽屉/弹窗下的内容；Element Loading 与部分蒙层共用此变量 */
|
||||
--el-mask-color: rgba(255, 255, 255, 0.5);
|
||||
--el-mask-color-extra-light: rgba(255, 255, 255, 0.22);
|
||||
-el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
|
||||
--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
|
||||
--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
|
||||
--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12),
|
||||
0px 8px 16px -8px rgba(0, 0, 0, 0.16);
|
||||
--el-mask-color: rgba(255, 255, 255, 0.65);
|
||||
--el-mask-color-extra-light: rgba(255, 255, 255, 0.28);
|
||||
--el-box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
--el-box-shadow-light: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||||
--el-box-shadow-lighter: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
--el-box-shadow-dark: 0 4px 12px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user