gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 使用向导主题颜色调整

Browse Source
This commit is contained in:
@changcode
2021-11-24 18:24:59 +08:00
parent 71e209d63d
commit 2c1e9d2586
7 changed files with 61 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -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;

26
nezha-fronted/src/assets/css/components/common/popBox/guide.scss
View File

@@ -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;
}

4
nezha-fronted/src/assets/css/components/layout/header.scss
View File

@@ -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;

16
nezha-fronted/src/assets/css/components/page/config/profile.scss
View File

@@ -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;

19
nezha-fronted/src/assets/css/themes/theme-dark.scss
View File

@@ -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;

19
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -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;

2
nezha-fronted/src/components/page/config/profile.vue
View File

@@ -15,7 +15,7 @@
<span :class="(mfaEnable == '1' || mfaLevel > 0)?'MfaName':'name'">
{{userList.name}}
</span>
<span class="profile-left__header-username__span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span>
<span class="profile-left__header-username-span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span>
</div>
</el-popover>
<el-popover