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 18:16:11 +08:00
parent 6f739034b9
commit 9009b715ae
6 changed files with 93 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -244,3 +244,26 @@ td .nz-icon-gear:before{
color: $--nz-icon-color;
}
}
.el-time-panel {
background-color: $--background-color-empty;
.el-time-panel__footer {
border: 1px solid $--border-color-light;
}
}
//.editor-core {
// p {
// color: $--color-text-regular;
// }
//}
//.ql-toolbar.ql-snow,.ql-container.ql-snow {
// border: 1px solid $--border-color-light;
// .ql-header {
// color: $--color-text-primary;
// }
// .ql-stroke {
// stroke: $--color-text-primary;
// }
// .ql-picker-options {
// background-color: $--background-color-empty;
// }
//}

7
nezha-fronted/src/assets/css/common/rightBoxCommon.scss
View File

@@ -119,13 +119,6 @@
.el-form-item {
margin-bottom: 16px;
.el-form-item__label{
padding-bottom: 6px;
font-size: 14px;
line-height: 16px;
color: #666;
}
.el-input__inner:hover {
border-color: $--border-color-light-hover;
}

22
nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
View File

@@ -17,6 +17,11 @@
width: 100%;
}
}
.alert-box-duration.half-form-item {
.el-form-item__content {
line-height: 31px !important;
}
}
.right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend{
width: 100%;
}
@@ -25,6 +30,8 @@
}
.el-input-group__prepend{
position: relative;
background: $--border-color-light;
border: $--border-color-light;
.hide-icon{
width: 38px;
.el-input__inner{
@@ -33,6 +40,10 @@
}
}
}
.el-input-group__append {
background: $--border-color-light;
border: $--border-color-light;
}
.alert-rule-split-title{
background: $--background-color-base;
font-size: 14px;
@@ -44,8 +55,13 @@
margin-bottom: 10px;
height: 24px;
}
.el-form-item__content .el-input-group{
.el-form-item__content .el-input-group.el-input-group--prepend {
vertical-align: middle;
width: 100%;
}
.query-row .metric-selector-input-box {
width: calc(100% - 120px);
}
}
.severity-item{
color: $--color-text-secondary;
@@ -58,7 +74,3 @@
text-overflow:ellipsis;
white-space:nowrap
}
.query-row .metric-selector-input-box {
width: calc(100% - 120px);
}
}

28
nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
View File

@@ -1,13 +1,14 @@
.range-time {
/deep/ .el-radio-button--small .el-radio-button__inner, /deep/ .el-radio-group {
width: 100%
.el-radio-button--small .el-radio-button__inner,.el-radio-group {
width: 100%;
background-color: $--background-color-empty;
}
/deep/ .el-radio-button {
.el-radio-button {
width: 14.2%
}
/deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
width: 100%;
}
@@ -19,14 +20,15 @@
width: 48%;
flex: 1;
position: relative;
/deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{
.el-date-editor.el-input,.el-date-editor.el-input__inner{
width: 100%;
}
/deep/ .el-input__inner{
.el-input__inner{
text-align: center;
}
.datepicker-title{
position: absolute;
color: $--color-text-regular;
left: 15px;
z-index: 1;
}
@@ -34,10 +36,10 @@
}
}
.matchers{
/deep/ .el-input__prefix{
.el-input__prefix{
left: 0;
}
/deep/ .el-form-item__error{
.el-form-item__error{
left: 126px;
padding-top: 5px;
}
@@ -55,7 +57,7 @@
font-weight: 400;
text-align: center;
}
/deep/ .matchers-type-title.el-select--small .el-input__inner{
.matchers-type-title.el-select--small .el-input__inner{
background:$--border-color-light;
font-family: ArialMT;
font-size: 14px;
@@ -70,19 +72,19 @@
}
}
}
/deep/ .silence-matchers-value{
.silence-matchers-value{
width: calc(100% - 100px);
}
/deep/ .silence-matchers-key{
.silence-matchers-key{
width: 100%;
}
.silence-matchers-regex{
margin-left: 10px;
}
/deep/ .param-box-row-key{
.param-box-row-key{
width: 36%;
}
/deep/ .param-box-row-value{
.param-box-row-value{
width: 50%;
}
.module-add-label{

44
nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
View File

@@ -1,4 +1,4 @@
.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input{
.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{
background: $--input-background-color !important;
}
.sp-search,.sp-result-area,.sp-pagination {
@@ -32,46 +32,60 @@
}
}
.sp-search-input {
background-color: $--select-page-background-color !important;
border: 1px solid $--border-color-light !important;
color: $--color-text-regular !important;
background-color: $--select-page-background-color;
border: 1px solid $--border-color-light;
color: $--color-text-regular;
}
.sp-base.sp-inputs,.sp-base.sp-input {
border: 1px solid $--border-color-light !important;
border: 1px solid $--border-color-light;
}
.sp-base.sp-inputs:hover,.sp-base.sp-input:hover,.sp-base.sp-inputs:focus,.sp-base.sp-input:focus {
border: 1px solid $--border-color-light-hover !important;
border: 1px solid $--border-color-light-hover;
}
.v-dropdown-container.v-dropdown-no-border {
border: 1px solid $--border-color-light !important;
border: 1px solid $--border-color-light;
}
div.sp-result-area table.sp-table tbody tr.sp-over td {
background-color: $--select-page-hover-background-color !important;
color: $--button-light-hover-color !important;
background-color: $--select-page-hover-background-color;
color: $--button-light-hover-color;
cursor: pointer;
}
div.sp-result-area table.sp-table tbody tr.sp-selected td {
color: $--select-page-focus-color !important;
color: $--select-page-focus-color;
cursor: default;
}
div.sp-pagination ul li a:hover {
color: $--color-text-regular !important;
color: $--color-text-regular;
}
div.v-selectpage div.sp-input-container div.sp-input {
color: $--color-text-regular !important;
color: $--color-text-regular;
}
div.v-selectpage div.sp-input-container.sp-open div.sp-input {
border: 1px solid #aaa;
border-radius: 2px;
color: $--color-text-regular !important;
color: $--color-text-regular;
}
.sp-button {
.sp-caret {
color: $--color-text-regular !important;
color: $--color-text-regular;
}
}
.sp-button.open {
.sp-caret {
color: $--color-text-regular !important;
color: $--color-text-regular;
}
}
.el-picker-panel__footer {
border-top: 1px solid $--border-color-light;
span {
color: $--color-text-regular;
}
.el-button--text {
span {
color: $--color-primary;
}
}
}
.el-date-picker__time-header,.el-date-table th {
border-bottom: 1px solid $--border-color-light;
}

4
nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
View File

@@ -87,7 +87,7 @@
<el-form-item
v-if="showSnmpTrap"
:label="$t('alert.config.threshold')"
prop="threshold" class="half-form-item"
prop="threshold" class="half-form-item alert-box-threshold"
style="display: inline-block;"
:rules="[
{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' },
@@ -115,7 +115,7 @@
<el-input id="alert-box-input-inr" v-model.number="editAlertRule.inr" :placeholder="$t('alert.config.inrPlaceholder')" size="small" type="text" :disabled="!showSnmpTrap"></el-input>
</el-form-item>
<!--last-->
<el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last" class="half-form-item" :rules=" [
<el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last" class="half-form-item alert-box-duration" :rules=" [
{ required: showSnmpTrap, message: this.$t('validate.required'), trigger: 'change' },
]">
<el-input id="alert-box-input-last" :controls="false" v-model.number="editAlertRule.last" placeholder="" size="small" :disabled="!showSnmpTrap" type="text">