From 2c1e9d2586f12f1a7ec6a6da98d60e1c9177bf23 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Wed, 24 Nov 2021 18:24:59 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BD=BF=E7=94=A8=E5=90=91=E5=AF=BC?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/css/common/tableCommon.scss | 6 ++--- .../css/components/common/popBox/guide.scss | 26 +++++++++---------- .../assets/css/components/layout/header.scss | 4 +-- .../css/components/page/config/profile.scss | 16 ++++++------ .../src/assets/css/themes/theme-dark.scss | 19 ++++++++++++-- .../src/assets/css/themes/theme-light.scss | 19 ++++++++++++-- .../src/components/page/config/profile.vue | 2 +- 7 files changed, 61 insertions(+), 31 deletions(-) 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}} - 2FA + 2FA