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-23 14:19:15 +08:00
parent f458a59f52
commit 6f739034b9
8 changed files with 107 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
View File

@@ -10,6 +10,12 @@
border-bottom: none; border-bottom: none;
font-size: 13px; font-size: 13px;
line-height: 26px; line-height: 26px;
.active {
color: $--color-primary;
border-bottom: none;
cursor: default;
font-weight: bold;
}
} }
.alert-label-box{ .alert-label-box{
display: flex; display: flex;

4
nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
View File

@@ -68,19 +68,17 @@
.alert-rule-box{ .alert-rule-box{
display: flex; display: flex;
justify-content:space-between; justify-content:space-between;
border-bottom: 1px solid $--border-color-light;
} }
.alert-rule-title{ .alert-rule-title{
text-align: left; text-align: left;
width: 110px; width: 110px;
border-right: 1px solid $--border-color-light;
color: $--color-text-regular; color: $--color-text-regular;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
} }
.alert-rule-value{ .alert-rule-value{
text-align: left; text-align: left;
width: 150px; width: 150px;
color: #1a1a1a; color: $--color-text-regular;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
word-wrap: break-word; word-wrap: break-word;
white-space: normal; white-space: normal;

1
nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
View File

@@ -96,7 +96,6 @@
} }
.red,.green{ .red,.green{
color: white; color: white;
padding: 2px 5px;
border-radius: 4px; border-radius: 4px;
} }
/deep/ .nz-message .el-textarea textarea{ /deep/ .nz-message .el-textarea textarea{

78
nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
View File

@@ -32,44 +32,44 @@
word-break: break-all; word-break: break-all;
display: inline-block; display: inline-block;
} }
.nz-alert-tag_normal { }
border-color: $--color-text-link; .nz-alert-tag_normal {
.nz-alert-tag__label { border-color: $--color-text-link;
border-right: 1px solid $--color-text-link; .nz-alert-tag__label {
background-color: $--color-text-link; border-right: 1px solid $--color-text-link;
color: white; background-color: $--color-text-link;
} color: white;
} }
.nz-alert-tag_success { }
border-color: #50d050; .nz-alert-tag_success {
.nz-alert-tag__label { border-color: #50d050;
border-right: 1px solid #50d050; .nz-alert-tag__label {
background-color: #50d050; border-right: 1px solid #50d050;
color: white; background-color: #50d050;
} color: white;
} }
.nz-alert-tag_info { }
border-color: $--color-text-secondary; .nz-alert-tag_info {
.nz-alert-tag__label { border-color: $--color-text-secondary;
border-right: 1px solid $--color-text-secondary; .nz-alert-tag__label {
background-color: $--color-text-secondary; border-right: 1px solid $--color-text-secondary;
color: white; background-color: $--color-text-secondary;
} color: white;
} }
.nz-alert-tag_danger { }
border-color: #d64f40; .nz-alert-tag_danger {
.nz-alert-tag__label { border-color: #d64f40;
border-right: 1px solid #d64f40; .nz-alert-tag__label {
background-color: #d64f40; border-right: 1px solid #d64f40;
color: white; background-color: #d64f40;
} color: white;
} }
.nz-alert-tag_warning { }
border-color: #e6a23c; .nz-alert-tag_warning {
.nz-alert-tag__label { border-color: #e6a23c;
border-right: 1px solid #e6a23c; .nz-alert-tag__label {
background-color: #e6a23c; border-right: 1px solid #e6a23c;
color: white; background-color: #e6a23c;
} color: white;
} }
} }

31
nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
View File

@@ -14,6 +14,7 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
color: $--color-text-primary;
} }
.el-carousel__indicator--horizontal .el-carousel__button{ .el-carousel__indicator--horizontal .el-carousel__button{
background-color: #C0C4CC; background-color: #C0C4CC;
@@ -25,6 +26,9 @@
.el-carousel__indicator--horizontal.is-active .el-carousel__button{ .el-carousel__indicator--horizontal.is-active .el-carousel__button{
opacity: 1; opacity: 1;
} }
.nz-table2 {
height: 100% !important;
}
} }
.overview-content-header{ .overview-content-header{
display: flex; display: flex;
@@ -282,12 +286,27 @@
font-size: 0.7rem; font-size: 0.7rem;
font-style: italic; font-style: italic;
} }
.overview-to-alert__background {
background-color: $--overview-alert-icon-background-color;
}
.overview-to-asset__background {
background-color: $--overview-asset-icon-background-color;
}
.overview-to-project__background {
background-color: $--overview-project-icon-background-color;
}
.overview-to-module__background {
background-color: $--overview-module-icon-background-color;
}
.overview-to-endpoint__background {
background-color: $--overview-endpoint-icon-background-color;
}
.content-col-content-icon { .content-col-content-icon {
height: 3.75rem; height: 3.75rem;
width: 3.75rem; width: 3.75rem;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #e5eaef; border: 1px solid $--overview-border-color;
position: relative; position: relative;
.nz-icon { .nz-icon {
font-size: 1.75rem !important; font-size: 1.75rem !important;
@@ -297,21 +316,21 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.nz-icon-overview-project { .nz-icon-overview-project {
color: #80A7F4; color: $--overview-asset-icon-color;
} }
.nz-icon-project { .nz-icon-project {
font-size: 1.75rem !important; font-size: 1.75rem !important;
color: #F6B275; color: $--overview-project-icon-color;
} }
.nz-icon-overview-module { .nz-icon-overview-module {
color: #7AD0BC; color: $--overview-module-icon-color;
} }
.nz-icon-overview-endpoint { .nz-icon-overview-endpoint {
color: #969DEA; color: $--overview-endpoint-icon-color;
} }
.nz-icon-overview-alert { .nz-icon-overview-alert {
font-size: 1.75rem !important; font-size: 1.75rem !important;
color: #EE9A87; color: $--overview-alert-icon-color;
} }
} }
.content-num-box { .content-num-box {

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

@@ -153,6 +153,22 @@ $--value-color: $--table-header-font-color;
// time picker // time picker
$--time-picker-hover-color: #FFFFFF; $--time-picker-hover-color: #FFFFFF;
/* overview */
// color
$--overview-asset-icon-color: $--time-picker-hover-color;
$--overview-project-icon-color: $--time-picker-hover-color;
$--overview-module-icon-color: $--time-picker-hover-color;
$--overview-endpoint-icon-color: $--time-picker-hover-color;
$--overview-alert-icon-color: $--time-picker-hover-color;
// background
$--overview-module-icon-background-color: #5F80D5;
$--overview-endpoint-icon-background-color: #7F87EA;
$--overview-alert-icon-background-color: #EFA25D;
$--overview-asset-icon-background-color: #568FFF;
$--overview-project-icon-background-color: #4DB4FF;
// border
$--overview-border-color: $--background-color-empty;
/* 13.panel */ /* 13.panel */
$--chart-title-hover-background-color: #323238; $--chart-title-hover-background-color: #323238;
$--chart-box-border-color: $--border-color-light; $--chart-box-border-color: $--border-color-light;

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

@@ -151,6 +151,21 @@ $--value-input-background-color: $--value-color;
// time picker // time picker
$--time-picker-hover-color: $--value-color; $--time-picker-hover-color: $--value-color;
/* overview */
$--overview-asset-icon-color: #80A7F4;
$--overview-project-icon-color: #F6B275;
$--overview-module-icon-color: #7AD0BC;
$--overview-endpoint-icon-color: #969DEA;
$--overview-alert-icon-color: #EE9A87;
// background
$--overview-module-icon-background-color: $--value-color;
$--overview-endpoint-icon-background-color: $--value-color;
$--overview-alert-icon-background-color: $--value-color;
$--overview-asset-icon-background-color: $--value-color;
$--overview-project-icon-background-color: $--value-color;
// border
$--overview-border-color: #E5EAEF;
/* 13.panel */ /* 13.panel */
$--chart-title-hover-background-color: $--background-color-1; $--chart-title-hover-background-color: $--background-color-1;
$--chart-box-border-color: $--border-color-light; $--chart-box-border-color: $--border-color-light;

10
nezha-fronted/src/components/page/dashboard/overview/overview.vue
View File

@@ -24,7 +24,7 @@
<div class="content-row-box"> <div class="content-row-box">
<div class="content-col-box"> <div class="content-col-box">
<div id="overview-to-asset" v-loading="assetLoading" class="content-col-content clickable" @click="jumpTo('asset')"> <div id="overview-to-asset" v-loading="assetLoading" class="content-col-content clickable" @click="jumpTo('asset')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div> <div class="content-col-content-icon overview-to-asset__background"><i class="nz-icon nz-icon-overview-project"></i></div>
<div class="content-num-box"> <div class="content-num-box">
<el-tooltip :content="`${assetData}`" class="item" effect="light" placement="top"> <el-tooltip :content="`${assetData}`" class="item" effect="light" placement="top">
<div class="content-col-content-num"> <div class="content-col-content-num">
@@ -40,7 +40,7 @@
</div> </div>
<div class="content-col-box"> <div class="content-col-box">
<div v-loading="projectLoading" class="content-col-content clickable" @click="jumpTo('project')"> <div v-loading="projectLoading" class="content-col-content clickable" @click="jumpTo('project')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div> <div class="content-col-content-icon overview-to-project__background"><i class="nz-icon nz-icon-project"></i></div>
<div class="content-num-box"> <div class="content-num-box">
<el-tooltip :content="`${projectData.total}`" class="item" effect="light" placement="top"> <el-tooltip :content="`${projectData.total}`" class="item" effect="light" placement="top">
<div class="content-col-content-num"> <div class="content-col-content-num">
@@ -55,7 +55,7 @@
</div> </div>
<div class="content-col-box"> <div class="content-col-box">
<div v-loading="moduleLoading" class="content-col-content clickable" @click="jumpTo('module')"> <div v-loading="moduleLoading" class="content-col-content clickable" @click="jumpTo('module')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div> <div class="content-col-content-icon overview-to-module__background"><i class="nz-icon nz-icon-overview-module"></i></div>
<div class="content-num-box"> <div class="content-num-box">
<el-tooltip :content="`${moduleData.total}`" class="item" effect="light" placement="top"> <el-tooltip :content="`${moduleData.total}`" class="item" effect="light" placement="top">
<div class="content-col-content-num"> <div class="content-col-content-num">
@@ -70,7 +70,7 @@
</div> </div>
<div class="content-col-box"> <div class="content-col-box">
<div v-loading="endpointLoading" class="content-col-content clickable" @click="jumpTo('endpoint')"> <div v-loading="endpointLoading" class="content-col-content clickable" @click="jumpTo('endpoint')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div> <div class="content-col-content-icon overview-to-endpoint__background"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
<div class="content-num-box"> <div class="content-num-box">
<el-tooltip :content="`${endpointData.num}`" class="item" effect="light" placement="top"> <el-tooltip :content="`${endpointData.num}`" class="item" effect="light" placement="top">
<div class="content-col-content-num"> <div class="content-col-content-num">
@@ -85,7 +85,7 @@
</div> </div>
<div class="content-col-box"> <div class="content-col-box">
<div id="overview-to-alertlist" v-loading="alertMessageLoading" class="content-col-content clickable" @click="jumpTo('alertList')"> <div id="overview-to-alertlist" v-loading="alertMessageLoading" class="content-col-content clickable" @click="jumpTo('alertList')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div> <div class="content-col-content-icon overview-to-alert__background"><i class="nz-icon nz-icon-overview-alert"></i></div>
<div class="content-num-box"> <div class="content-num-box">
<el-tooltip :content="`${alertMessageData.num}`" class="item" effect="light" placement="top"> <el-tooltip :content="`${alertMessageData.num}`" class="item" effect="light" placement="top">
<div class="content-col-content-num"> <div class="content-col-content-num">