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

NEZ-1072 fix: 主题调整

Browse Source
This commit is contained in:
chenjinsong
2021-11-04 19:11:44 +08:00
parent a709585a9f
commit e7273d0be0
7 changed files with 61 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,16 @@
display: none; display: none;
background-color: $--background-color-empty; background-color: $--background-color-empty;
} }
.el-dropdown-menu__item {
list-style: none;
line-height: 36px;
padding: 0 20px;
margin: 0;
font-size: 14px;
color: $--color-text-regular;
cursor: pointer;
outline: 0;
}
.el-loading-mask .el-loading-spinner{ .el-loading-mask .el-loading-spinner{
background: url(~@/assets/img/loading.gif) no-repeat; background: url(~@/assets/img/loading.gif) no-repeat;
background-size: 48px 48px; background-size: 48px 48px;

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

@@ -209,14 +209,14 @@
justify-content: center; justify-content: center;
height: 70px; height: 70px;
box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77); box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
}
.footer__btn { .footer__btn {
margin: 0 15px; margin: 0 15px;
height: 30px; height: 30px;
min-width: 74px; min-width: 74px;
padding: 0 15px; padding: 0 15px;
color: white; color: $--button-primary-color;
background-color: $--color-primary; background-color: $--button-primary-background-color;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
@@ -224,24 +224,31 @@
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background-color linear .2s, color linear .1s; transition: background-color linear .2s, color linear .1s;
} }
.footer__btn:hover:not(.footer__btn--disabled) { .footer__btn:hover:not(.footer__btn--disabled) {
background-color: $--color-primary-light-2; background-color: $--button-primary-hover-background-color;
} }
.footer__btn--light { .footer__btn:focus:not(.footer__btn--disabled) {
background-color: $--background-color-empty; background-color: $--button-primary-active-background-color;
border: 1px solid $--border-color-base; }
color: $--color-text-primary; .footer__btn--light {
} background-color: $--button-gray-background-color;
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { border: 1px solid $--button-gray-border-color;
background-color: $--background-color-empty; color: $--button-gray-color;
border-color: $--color-primary-light-5; }
color: $--color-primary; .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
} background-color: $--button-gray-hover-background-color;
.footer__btn--disabled { border: 1px solid $--button-gray-hover-border-color;
color: $--button-gray-hover-color;
}
.footer__btn.footer__btn--light:focus:not(.footer__btn--disabled) {
background-color: $--button-gray-active-background-color;
border: 1px solid $--button-gray-active-border-color;
color: $--button-gray-active-color;
}
.footer__btn--disabled {
opacity: .6; opacity: .6;
cursor: default; cursor: default;
}
} }
/* 隐藏label新增按钮处级联选择器的input */ /* 隐藏label新增按钮处级联选择器的input */
.hide-casc-input { .hide-casc-input {

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

@@ -142,11 +142,3 @@
color: $--color-text-secondary; color: $--color-text-secondary;
padding: 20px; padding: 20px;
} }
#header-to-profile, #header-to-logout {
padding: 0 20px;
font-size: 14px;
color: $--color-text-regular;
&:hover {
color: $--color-primary-light-2;
}
}

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

@@ -163,11 +163,6 @@
padding: 0 15px; padding: 0 15px;
border-radius: 4px; border-radius: 4px;
} }
.footer__btn {
background-color: $--color-primary;
color: white;
border: 1px solid transparent;
}
.footer__btns { .footer__btns {
background-color: $--background-color-empty; background-color: $--background-color-empty;
color: $--color-text-primary; color: $--color-text-primary;
@@ -175,8 +170,8 @@
} }
.footer__btns:hover { .footer__btns:hover {
opacity: .6; opacity: .6;
color: $--color-primary; color: $--button-primary-hover-background-color;
border: 1px solid $--color-primary; border: 1px solid $--button-primary-hover-background-color;
} }
.footer__btn:hover { .footer__btn:hover {
opacity: .6; opacity: .6;
@@ -302,40 +297,6 @@
background: #CECECE; background: #CECECE;
margin-right: 10px; margin-right: 10px;
} }
.footer {
.footer__btn {
margin: 0 15px;
height: 30px;
min-width: 74px;
padding: 0 15px;
color: white;
background-color: $--color-primary;
border: none;
border-radius: 4px;
outline: none;
box-sizing: border-box;
font-size: 14px;
cursor: pointer;
transition: background-color linear .2s, color linear .1s;
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: $--color-primary-light-2;
}
.footer__btn--light {
background-color: $--background-color-empty;
border: 1px solid $--border-color-base;
color: $--color-text-primary;
}
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
background-color: $--background-color-empty;
border-color: $--color-primary-light-5;
color: $--color-primary;
}
.footer__btn--disabled {
opacity: .6;
cursor: default;
}
}
.profile-hr { .profile-hr {
height: 1px; height: 1px;
background-color: $--border-color-light; background-color: $--border-color-light;

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

@@ -94,12 +94,12 @@ $--button-primary-active-background-color: mix(#000, $--color-primary, 10%);
// 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的； // 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的；
// button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮 // button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮
$--button-gray-color: $--color-text-secondary; // 灰色按钮字色 $--button-gray-color: $--color-text-secondary; // 灰色按钮字色
$--button-gray-hover-color: mix(#FFF, $--color-primary, 10%); // 灰色按钮hover字色 $--button-gray-hover-color: mix(#FFF, $--color-primary, 15%); // 灰色按钮hover字色
$--button-gray-active-color: mix(#000, $--color-primary, 10%); // 灰色按钮focus字色 $--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮focus字色
$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色 $--button-gray-background-color: $--background-color-base; // 灰色按钮背景色
$--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色 $--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色
$--button-gray-active-background-color: $--background-color-base; // 灰色按钮focus背景色 $--button-gray-active-background-color: $--background-color-base; // 灰色按钮focus背景色
$--button-gray-border-color: $--border-color-base; // 灰色按钮边框色 $--button-gray-border-color: #454545; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-hover-color; // 灰色按钮hover边框色 $--button-gray-hover-border-color: $--button-gray-hover-color; // 灰色按钮hover边框色
$--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色 $--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色
@@ -109,7 +109,7 @@ $--button-light-gray-active-color: $--button-gray-active-color; // 灰色按钮f
$--button-light-gray-background-color: $--background-color-empty; // 灰色按钮背景色 $--button-light-gray-background-color: $--background-color-empty; // 灰色按钮背景色
$--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色 $--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
$--button-light-gray-active-background-color: $--background-color-empty; // 灰色按钮focus背景色 $--button-light-gray-active-background-color: $--background-color-empty; // 灰色按钮focus背景色
$--button-light-gray-border-color: $--background-color-empty; // 灰色按钮边框色 $--button-light-gray-border-color: #454545; // 灰色按钮边框色
$--button-light-gray-hover-border-color: $--button-gray-hover-border-color; // 灰色按钮hover边框色 $--button-light-gray-hover-border-color: $--button-gray-hover-border-color; // 灰色按钮hover边框色
$--button-light-gray-active-border-color: $--button-gray-active-border-color; // 灰色按钮focus边框色 $--button-light-gray-active-border-color: $--button-gray-active-border-color; // 灰色按钮focus边框色

7
nezha-fronted/src/components/common/pickTime.vue
View File

@@ -4,11 +4,11 @@
<multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/> <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
<chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit> <chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
<div v-show="useRefresh" class="top-tool-btn-group"> <div v-show="useRefresh" class="top-tool-btn-group">
<button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="antiShake"> <button :id="id+'-refresh'" :class="{'top-tool-btn--light-gray': btnTheme === 'light-gray'}" class="top-tool-btn top-tool-btn--text" @click="antiShake">
<i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp; <i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;
<span><slot name="added-text"></slot></span> <span><slot name="added-text"></slot></span>
</button> </button>
<button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)"> <button id="browser-go" :class="{'top-tool-btn--light-gray': btnTheme === 'light-gray'}" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)">
<span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span> <span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>
<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i> <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
@@ -67,7 +67,8 @@ export default {
}, },
defaultPick: Number, defaultPick: Number,
showEmpty: { type: Boolean, default: false }, showEmpty: { type: Boolean, default: false },
id: String id: String,
btnTheme: String
}, },
data () { data () {
return { return {

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

@@ -13,7 +13,7 @@
<div class="week">{{sysWeek}}</div> <div class="week">{{sysWeek}}</div>
<div class="sys-date">{{sysDate}}</div> <div class="sys-date">{{sysDate}}</div>
</div> </div>
<pick-time id="overview-search" ref="pickTime" v-model="searchTime" :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" class="float-right pickTime margin-l-5"></pick-time> <pick-time id="overview-search" ref="pickTime" v-model="searchTime" :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" btn-theme="light-gray" class="float-right pickTime margin-l-5"></pick-time>
<div id="overview-full-screen" class="operation" @click="switchFullScreen"><span ><i :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}" class="nz-icon screen-icon"></i></span></div> <div id="overview-full-screen" class="operation" @click="switchFullScreen"><span ><i :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}" class="nz-icon screen-icon"></i></span></div>
</div> </div>
</div> </div>