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;
font-size: 13px;
line-height: 26px;
.active {
color: $--color-primary;
border-bottom: none;
cursor: default;
font-weight: bold;
}
}
.alert-label-box{
display: flex;

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

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

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

@@ -96,7 +96,6 @@
}
.red,.green{
color: white;
padding: 2px 5px;
border-radius: 4px;
}
/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;
display: inline-block;
}
.nz-alert-tag_normal {
border-color: $--color-text-link;
.nz-alert-tag__label {
border-right: 1px solid $--color-text-link;
background-color: $--color-text-link;
color: white;
}
}
.nz-alert-tag_success {
border-color: #50d050;
.nz-alert-tag__label {
border-right: 1px solid #50d050;
background-color: #50d050;
color: white;
}
}
.nz-alert-tag_info {
border-color: $--color-text-secondary;
.nz-alert-tag__label {
border-right: 1px solid $--color-text-secondary;
background-color: $--color-text-secondary;
color: white;
}
}
.nz-alert-tag_danger {
border-color: #d64f40;
.nz-alert-tag__label {
border-right: 1px solid #d64f40;
background-color: #d64f40;
color: white;
}
}
.nz-alert-tag_warning {
border-color: #e6a23c;
.nz-alert-tag__label {
border-right: 1px solid #e6a23c;
background-color: #e6a23c;
color: white;
}
}
.nz-alert-tag_normal {
border-color: $--color-text-link;
.nz-alert-tag__label {
border-right: 1px solid $--color-text-link;
background-color: $--color-text-link;
color: white;
}
}
.nz-alert-tag_success {
border-color: #50d050;
.nz-alert-tag__label {
border-right: 1px solid #50d050;
background-color: #50d050;
color: white;
}
}
.nz-alert-tag_info {
border-color: $--color-text-secondary;
.nz-alert-tag__label {
border-right: 1px solid $--color-text-secondary;
background-color: $--color-text-secondary;
color: white;
}
}
.nz-alert-tag_danger {
border-color: #d64f40;
.nz-alert-tag__label {
border-right: 1px solid #d64f40;
background-color: #d64f40;
color: white;
}
}
.nz-alert-tag_warning {
border-color: #e6a23c;
.nz-alert-tag__label {
border-right: 1px solid #e6a23c;
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;
position: absolute;
z-index: 1;
color: $--color-text-primary;
}
.el-carousel__indicator--horizontal .el-carousel__button{
background-color: #C0C4CC;
@@ -25,6 +26,9 @@
.el-carousel__indicator--horizontal.is-active .el-carousel__button{
opacity: 1;
}
.nz-table2 {
height: 100% !important;
}
}
.overview-content-header{
display: flex;
@@ -282,12 +286,27 @@
font-size: 0.7rem;
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 {
height: 3.75rem;
width: 3.75rem;
border-radius: 50%;
box-sizing: border-box;
border: 1px solid #e5eaef;
border: 1px solid $--overview-border-color;
position: relative;
.nz-icon {
font-size: 1.75rem !important;
@@ -297,21 +316,21 @@
transform: translate(-50%, -50%);
}
.nz-icon-overview-project {
color: #80A7F4;
color: $--overview-asset-icon-color;
}
.nz-icon-project {
font-size: 1.75rem !important;
color: #F6B275;
color: $--overview-project-icon-color;
}
.nz-icon-overview-module {
color: #7AD0BC;
color: $--overview-module-icon-color;
}
.nz-icon-overview-endpoint {
color: #969DEA;
color: $--overview-endpoint-icon-color;
}
.nz-icon-overview-alert {
font-size: 1.75rem !important;
color: #EE9A87;
color: $--overview-alert-icon-color;
}
}
.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-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 */
$--chart-title-hover-background-color: #323238;
$--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-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 */
$--chart-title-hover-background-color: $--background-color-1;
$--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-col-box">
<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">
<el-tooltip :content="`${assetData}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">
@@ -40,7 +40,7 @@
</div>
<div class="content-col-box">
<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">
<el-tooltip :content="`${projectData.total}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">
@@ -55,7 +55,7 @@
</div>
<div class="content-col-box">
<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">
<el-tooltip :content="`${moduleData.total}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">
@@ -70,7 +70,7 @@
</div>
<div class="content-col-box">
<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">
<el-tooltip :content="`${endpointData.num}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">
@@ -85,7 +85,7 @@
</div>
<div class="content-col-box">
<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">
<el-tooltip :content="`${alertMessageData.num}`" class="item" effect="light" placement="top">
<div class="content-col-content-num">