diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 9dfe62558..786866073 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -276,16 +276,16 @@
}
.table-operation-item.table-operation-item--disable{
border: 1px solid $--button-light-border-color;
- background-color: $--button-light-border-color;
+ background-color: $--background-color-disabled;
opacity: 0.6;
outline: none;
i {
font-size: 14px;
- color: $--button-primary-color;
+ color: $--color-text-disabled;
}
}
.table-operation-item.table-operation-item--disable:hover {
- background-color: $--button-light-border-color;
+ background-color: $--background-color-disabled;
}
&>.table-operation-item {
justify-content: center;
diff --git a/nezha-fronted/src/assets/css/components/common/popBox/guide.scss b/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
index e874011a1..9b8b8865a 100644
--- a/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
+++ b/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
@@ -38,7 +38,7 @@
top: -1px;
left: 0;
transition: all linear .3s;
- border-bottom: 3px solid #101B27;
+ border-bottom: 3px solid $--guide-border-color;
background-color: $--background-color-base;
}
@@ -52,7 +52,7 @@
left: calc(50% - 6px);
bottom: -9px;
border-width: 6px 6px 0;
- border-color: #424242 transparent transparent transparent;
+ border-color: $--guide-border-color transparent transparent transparent;
}
.guide-item {
@@ -62,8 +62,8 @@
&:not(:nth-of-type(2)):before {
top: 100px;
width: 50%;
- height: 2px;
- background-color: #d8d8d8;
+ height: 1px;
+ background-color: $--select-page-focus-color;
position: absolute;
left: 0;
content: "";
@@ -71,8 +71,8 @@
&:not(:last-of-type):after {
top: 100px;
width: 50%;
- height: 2px;
- background-color: #d8d8d8;
+ height: 1px;
+ background-color: $--select-page-focus-color;
position: absolute;
right: 0;
content: "";
@@ -80,15 +80,15 @@
&.guide-item--active{
.item__title {
- color: #101B27;
+ color: $--color-text-regular;
font-weight: bold;
}
.item__icon {
- border-color: #ABABAB;
- background-color: $--background-color-empty;
+ border-color: $--guide-icon-border-color;
+ background-color: $--background-color-base;
cursor: pointer;
i {
- color: #ABABAB;
+ color: $--guide-icon-color;
}
}
.item__icon.item__icon--disabled {
@@ -114,7 +114,7 @@
border: 1px solid $--border-color-light;
border-radius: 50%;
box-sizing: border-box;
- background-color: $--background-color-base;
+ background-color: $--background-color-empty;
transition: all linear .3s;
z-index: 1;
@@ -137,7 +137,7 @@
height: 200px;
padding-bottom: 32px;
box-sizing: border-box;
- border: 1px solid $--color-text-secondary;
+ border: 1px solid $--border-color-light;
.desc-text {
flex: auto;
@@ -145,7 +145,7 @@
display: flex;
align-items: center;
- color: #101B27;
+ color: $--color-text-regular;
font-size: 18px;
word-break: keep-all;
}
diff --git a/nezha-fronted/src/assets/css/components/layout/header.scss b/nezha-fronted/src/assets/css/components/layout/header.scss
index 59f64d781..3dbb48dc0 100644
--- a/nezha-fronted/src/assets/css/components/layout/header.scss
+++ b/nezha-fronted/src/assets/css/components/layout/header.scss
@@ -9,9 +9,9 @@
height: 32px;
display: inline-block;
line-height: 32px;
- background: rgba(60,146,241,0.10);
+ background: $--profile-span-background-color;
font-size: 14px;
- color: #3C92F1;
+ color: $--profile-span-color;
letter-spacing: 0;
font-weight: 500;
text-transform: capitalize;
diff --git a/nezha-fronted/src/assets/css/components/page/config/profile.scss b/nezha-fronted/src/assets/css/components/page/config/profile.scss
index c250edb0e..4550cef0e 100644
--- a/nezha-fronted/src/assets/css/components/page/config/profile.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/profile.scss
@@ -25,12 +25,12 @@
margin-left: 20px;
span {
display: inline-block;
- background: rgba(60,146,241,0.10);
+ background: $--profile-span-background-color;
text-transform: capitalize;
width: 100%;
height: 100%;
font-size: 30px;
- color: #3C92F1;
+ color: $--profile-span-color;
letter-spacing: 0;
font-weight: 500;
border-radius: 100%;
@@ -74,18 +74,18 @@
line-height: 22px;
font-weight: 400;
}
- .profile-left__header-username__span {
+ .profile-left__header-username-span {
display: inline-block;
text-align: center;
width: 42px;
height: 24px;
line-height: 25px;
margin-left: 10px;
- background-color: #ecf5ff;
- border-color: #d9ecff;
- border-radius: 10px;
+ background-color: $--profile-2FA-background-color;
+ border: 1px solid $--profile-span-border-color;
+ border-radius: 25px;
font-size: 14px;
- color: #409EFF;
+ color: $--profile-2FA-color;
letter-spacing: 0;
font-weight: 400;
}
@@ -173,7 +173,7 @@
}
.profile-left__button {
margin-left: 50px;
- .profile-left__button-footer__btn {
+ .profile-left__button-footer-btn {
margin: 0 10px;
height: 30px;
min-width: 74px;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 0f626299e..eeae3d149 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -14,6 +14,8 @@ $--background-color-1: #444440;
$--background-color-2: #000;
// 背景色 copy
$--background-color-copy: #454545;
+// 禁用背景色
+$--background-color-disabled: #222329;
// 左侧菜单背景色
$--left-menu-background-color-base: #2D2E35;
@@ -33,6 +35,8 @@ $--color-text-regular: #BEBEBE;
$--color-text-secondary: #999998;
// 链接字色
$--color-text-link: #3C92F1;
+// 禁用字色
+$--color-text-disabled: #505050;
/* 4.边框色 */
// 普通边框色
@@ -135,7 +139,7 @@ $--click-search-items-border-color: $--background-color-copy; // border
$--click-search-items-border-bottom-color: #2E2E2E; // border-BOTTOM
$--click-search-items-color: $--color-text-regular; // color
-// selectPage
+// 时间选着器 selectPage 主题颜色
$--select-page-background-color: $--background-color-empty;
$--select-page-hover-background-color: $--button-light-hover-background-color;
$--select-page-focus-color: #666666;
@@ -146,7 +150,6 @@ $--select-page-btn-color: mix(#FFF, $--color-primary, 15%);
$--select-page-btn-border-color: mix(#FFF, $--color-primary, 15%);
$--select-page-btn-background-color: $--background-color-base;
-
// icon字色
$--nz-icon-color: $--button-primary-color;
$--span-nz-icon-border-color: $--border-color-light-hover;
@@ -178,6 +181,18 @@ $--overview-border-color: $--background-color-empty;
/* system */
$--system-input-background-color: #C0C4CC;
+/* profile */
+$--profile-span-color: $--time-picker-hover-color;
+$--profile-span-border-color: #87C0FF;
+$--profile-span-background-color: $--overview-asset-icon-background-color;
+$--profile-2FA-background-color: $--background-color-empty;
+$--profile-2FA-color: #3C92F1;
+
+/* guide */
+$--guide-border-color: $--select-page-focus-color;
+$--guide-icon-border-color: $--time-picker-hover-color;
+$--guide-icon-color: $--time-picker-hover-color;
+
/* 13.panel */
$--chart-title-hover-background-color: #323238;
$--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 96c82af6d..f4943d7e5 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -14,6 +14,8 @@ $--background-color-1: #EFEFEF;
$--background-color-2: #F9F9F9;
// 背景色 copy
$--background-color-copy: #fdf5e0;
+// 禁用背景色
+$--background-color-disabled: #DEDEDE;
// 左侧菜单背景色
$--left-menu-background-color-base: #202F3F;
@@ -33,6 +35,8 @@ $--color-text-regular: #666665;
$--color-text-secondary: #999998;
// 链接字色
$--color-text-link: #3C92F1;
+// 禁用字色
+$--color-text-disabled: #FFFFFF;
/* 4.边框色 */
// 普通边框色(覆盖element-ui内置变量)
@@ -142,7 +146,7 @@ $--select-page-tag-background-color: #e4eaee;
$--select-page-border-color: $--border-color-base-focus;
$--select-page-btn-color: $--color-primary;
$--select-page-btn-border-color: $--color-primary;
-$--select-page-btn-background-color: #FFFFFF;
+$--select-page-btn-background-color: $--color-text-disabled;
// icon 字色
@@ -151,7 +155,7 @@ $--span-nz-icon-border-color: $--asset-label-btn-border-color;
// value
$--value-background-color: #5C6BC0;
-$--value-color: #FFFFFF;
+$--value-color: $--color-text-disabled;
$--value-input-background-color: $--value-color;
// time picker
@@ -175,6 +179,17 @@ $--overview-border-color: #E5EAEF;
/* system */
$--system-input-background-color: $--background-color-empty;
+/* profile */
+$--profile-span-color: $--color-text-link;
+$--profile-span-border-color: $--color-text-link;
+$--profile-span-background-color: mix(#FFF, $--color-text-link, 90%);
+$--profile-2FA-background-color: $--profile-span-background-color;
+$--profile-2FA-color: $--color-text-link;
+
+/* guide */
+$--guide-border-color: #18171D;
+$--guide-icon-border-color: #666666;
+$--guide-icon-color: $--guide-icon-border-color;
/* 13.panel */
$--chart-title-hover-background-color: $--background-color-1;
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index de3a66332..c59324b47 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -15,7 +15,7 @@
{{userList.name}}
-
+