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;
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{
background: url(~@/assets/img/loading.gif) no-repeat;
background-size: 48px 48px;

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

@@ -209,14 +209,14 @@
justify-content: center;
height: 70px;
box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
.footer__btn {
}
.footer__btn {
margin: 0 15px;
height: 30px;
min-width: 74px;
padding: 0 15px;
color: white;
background-color: $--color-primary;
color: $--button-primary-color;
background-color: $--button-primary-background-color;
border: none;
border-radius: 4px;
outline: none;
@@ -224,24 +224,31 @@
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 {
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: $--button-primary-hover-background-color;
}
.footer__btn:focus:not(.footer__btn--disabled) {
background-color: $--button-primary-active-background-color;
}
.footer__btn--light {
background-color: $--button-gray-background-color;
border: 1px solid $--button-gray-border-color;
color: $--button-gray-color;
}
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
background-color: $--button-gray-hover-background-color;
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;
cursor: default;
}
}
/* 隐藏label新增按钮处级联选择器的input */
.hide-casc-input {

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

@@ -142,11 +142,3 @@
color: $--color-text-secondary;
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;
border-radius: 4px;
}
.footer__btn {
background-color: $--color-primary;
color: white;
border: 1px solid transparent;
}
.footer__btns {
background-color: $--background-color-empty;
color: $--color-text-primary;
@@ -175,8 +170,8 @@
}
.footer__btns:hover {
opacity: .6;
color: $--color-primary;
border: 1px solid $--color-primary;
color: $--button-primary-hover-background-color;
border: 1px solid $--button-primary-hover-background-color;
}
.footer__btn:hover {
opacity: .6;
@@ -302,40 +297,6 @@
background: #CECECE;
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 {
height: 1px;
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用户dashboard、panel顶部按钮
$--button-gray-color: $--color-text-secondary; // 灰色按钮字色
$--button-gray-hover-color: mix(#FFF, $--color-primary, 10%); // 灰色按钮hover字色
$--button-gray-active-color: mix(#000, $--color-primary, 10%); // 灰色按钮focus字色
$--button-gray-hover-color: mix(#FFF, $--color-primary, 15%); // 灰色按钮hover字色
$--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮focus字色
$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色
$--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色
$--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-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-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
$--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-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)"/>
<chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
<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;
<span><slot name="added-text"></slot></span>
</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>
<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
<transition name="el-zoom-in-top">
@@ -67,7 +67,8 @@ export default {
},
defaultPick: Number,
showEmpty: { type: Boolean, default: false },
id: String
id: String,
btnTheme: String
},
data () {
return {

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

@@ -13,7 +13,7 @@
<div class="week">{{sysWeek}}</div>
<div class="sys-date">{{sysDate}}</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>
</div>