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

perf: 样式调整

Browse Source
This commit is contained in:
chenjinsong
2021-11-12 17:14:23 +08:00
parent 4046814936
commit d5967cc3f0
6 changed files with 53 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -77,12 +77,6 @@
color: $--button-gray-color; color: $--button-gray-color;
letter-spacing: 0; letter-spacing: 0;
} }
.nz-btn.nz-btn-style-light-gray { /* 浅灰色按钮 */
background: $--button-light-gray-background-color;
border: 1px solid $--button-light-gray-border-color;
color: $--button-light-gray-color;
letter-spacing: 0;
}
.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { /* 橙色按钮hover */ .nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { /* 橙色按钮hover */
background: $--button-primary-hover-background-color; background: $--button-primary-hover-background-color;
color: $--button-primary-color; color: $--button-primary-color;
@@ -100,9 +94,9 @@
letter-spacing: 0; letter-spacing: 0;
} }
.nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 浅灰色按钮hover */ .nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 浅灰色按钮hover */
border: 1px solid $--button-light-gray-hover-border-color; border: 1px solid $--button-gray-hover-border-color;
background: $--button-light-gray-hover-background-color; background: $--button-gray-hover-background-color;
color: $--button-light-gray-hover-color; color: $--button-gray-hover-color;
letter-spacing: 0; letter-spacing: 0;
} }
.nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 橙色按钮active' */ .nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 橙色按钮active' */
@@ -122,9 +116,9 @@
letter-spacing: 0; letter-spacing: 0;
} }
.nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 浅灰色按钮active*/ .nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 浅灰色按钮active*/
background: $--button-light-gray-active-background-color; background: $--button-gray-active-background-color;
border: 1px solid $--button-light-gray-active-border-color; border: 1px solid $--button-gray-active-border-color;
color: $--button-light-gray-active-color; color: $--button-gray-active-color;
letter-spacing: 0; letter-spacing: 0;
} }

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

@@ -74,25 +74,16 @@
height: 32px; height: 32px;
width: 36px; width: 36px;
cursor: pointer; cursor: pointer;
border: 1px solid $--button-gray-border-color; border: 1px solid $--button-icon-border-color;
outline: none; outline: none;
border-radius: $--button-border-radius; border-radius: $--button-border-radius;
background-color: $--button-gray-background-color; background-color: $--button-icon-background-color;
transition: background-color linear .1s; transition: background-color linear .1s;
color: $--button-gray-color; color: $--button-icon-color;
i { i {
font-size: 14px; font-size: 14px;
color: $--button-gray-color; color: $--button-icon-color;
}
}
.top-tool-btn.top-tool-btn--light-gray {
border: 1px solid $--button-light-gray-border-color;
color: $--button-light-gray-color;
background-color: $--button-light-gray-background-color;
i {
color: $--button-light-gray-color;
} }
} }
.top-tool-btn.top-tool-btn--text { .top-tool-btn.top-tool-btn--text {
@@ -101,43 +92,25 @@
color: $--color-text-regular; color: $--color-text-regular;
} }
.top-tool-btn:hover:not(.nz-btn-disabled) { .top-tool-btn:hover:not(.nz-btn-disabled) {
background-color: $--button-gray-hover-background-color; background-color: $--button-icon-hover-background-color;
border: 1px solid $--button-gray-hover-border-color; border: 1px solid $--button-icon-hover-border-color;
color: $--button-gray-hover-color; color: $--button-icon-hover-color;
i { i {
color: $--button-gray-hover-color; color: $--button-icon-hover-color;
} }
} }
.top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus { .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
background-color: $--button-gray-active-background-color; background-color: $--button-icon-active-background-color;
border: 1px solid $--button-gray-active-border-color; border: 1px solid $--button-icon-active-border-color;
color: $--button-gray-active-color; color: $--button-icon-active-color;
i { i {
color: $--button-gray-active-color; color: $--button-icon-active-color;
}
}
.top-tool-btn.top-tool-btn--light-gray:hover:not(.nz-btn-disabled) {
background-color: $--button-gray-hover-background-color;
border: 1px solid $--button-gray-hover-border-color;
color: $--button-gray-hover-color;
i {
color: $--button-gray-hover-color;
}
}
.top-tool-btn.top-tool-btn--light-gray:focus:not(.nz-btn-disabled), .top-tool-btn.top-tool-btn--light-gray.is-focus {
background-color: $--button-gray-active-background-color;
border: 1px solid $--button-gray-active-border-color;
color: $--button-gray-active-color;
i {
color: $--button-gray-active-color;
} }
} }
.top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) { .top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) {
background-color: $--button-gray-hover-background-color; background-color: $--button-icon-hover-background-color;
border-color: #FFC4B9; border-color: #FFC4B9;
i { i {
color: #F0745A; color: #F0745A;

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

@@ -10,6 +10,8 @@ $--background-color-empty: #222329;
$--background-color-base: #18171D; $--background-color-base: #18171D;
// 背景色1 // 背景色1
$--background-color-1: #444440; $--background-color-1: #444440;
// 背景色2
$--background-color-2: #000;
// 左侧菜单背景色 // 左侧菜单背景色
$--left-menu-background-color-base: $--background-color-empty; $--left-menu-background-color-base: $--background-color-empty;
@@ -86,32 +88,33 @@ $--dropdown-menu-box-shadow-color: rgba(8,3,3,0.77);
$--input-background-color: $--background-color-base; $--input-background-color: $--background-color-base;
/* 12.按钮 */ /* 12.按钮 */
// button-primary用于橙色按钮
$--button-primary-color: #FFFFFE; // 普通按钮字色 $--button-primary-color: #FFFFFE; // 普通按钮字色
$--button-primary-background-color: $--color-primary; // 普通按钮背景色 $--button-primary-background-color: $--color-primary; // 普通按钮背景色
$--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%); $--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%);
$--button-primary-active-background-color: mix(#000, $--color-primary, 10%); $--button-primary-active-background-color: mix(#000, $--color-primary, 10%);
// 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的； // button-gray用于普通按钮
// button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮 $--button-gray-color: $--color-text-regular; // 灰色按钮字色
$--button-gray-color: $--color-text-secondary; // 灰色按钮字色
$--button-gray-hover-color: mix(#FFF, $--color-primary, 15%); // 灰色按钮hover字色 $--button-gray-hover-color: mix(#FFF, $--color-primary, 15%); // 灰色按钮hover字色
$--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮focus字色 $--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮focus字色
$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色 $--button-gray-background-color: $--background-color-empty; // 灰色按钮背景色
$--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: #454545; // 灰色按钮边框色 $--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边框色
$--button-light-gray-color: $--color-text-secondary; // 灰色按钮字色 // button-icon用于单图标按钮
$--button-light-gray-hover-color: $--button-gray-hover-color; // 灰色按钮hover字色 $--button-icon-color: $--color-text-regular; // 字色
$--button-light-gray-active-color: $--button-gray-active-color; // 灰色按钮focus字色 $--button-icon-hover-color: $--color-text-primary; // hover字色
$--button-light-gray-background-color: $--background-color-empty; // 灰色按钮背景色 $--button-icon-active-color: $--color-text-primary; // focus字色
$--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色 $--button-icon-background-color: $--background-color-base; // 背景色
$--button-light-gray-active-background-color: $--background-color-empty; // 灰色按钮focus背景色 $--button-icon-hover-background-color: $--background-color-empty; // hover背景色
$--button-light-gray-border-color: #454545; // 灰色按钮边框色 $--button-icon-active-background-color: $--background-color-empty; // focus背景色
$--button-light-gray-hover-border-color: $--button-gray-hover-border-color; // 灰色按钮hover边框色 $--button-icon-border-color: #454545; // 边框色
$--button-light-gray-active-border-color: $--button-gray-active-border-color; // 灰色按钮focus边框色 $--button-icon-hover-border-color: $--button-icon-border-color; // hover边框色
$--button-icon-active-border-color: $--color-text-primary; // focus边框色

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

@@ -10,6 +10,8 @@ $--background-color-empty: #FFFFFE;
$--background-color-base: #F6F6F6; $--background-color-base: #F6F6F6;
// 背景色1 // 背景色1
$--background-color-1: #EFEFEF; $--background-color-1: #EFEFEF;
// 背景色2
$--background-color-2: #F9F9F9;
// 左侧菜单背景色 // 左侧菜单背景色
$--left-menu-background-color-base: #202F3F; $--left-menu-background-color-base: #202F3F;
@@ -86,13 +88,13 @@ $--dropdown-menu-box-shadow-color: rgba(0, 0, 0, 0.1);
$--input-background-color: $--background-color-empty; $--input-background-color: $--background-color-empty;
/* 12.按钮 */ /* 12.按钮 */
// button-primary用于橙色按钮
$--button-primary-color: #FFFFFE; // 普通按钮字色 $--button-primary-color: #FFFFFE; // 普通按钮字色
$--button-primary-background-color: $--color-primary; // 普通按钮背景色 $--button-primary-background-color: $--color-primary; // 普通按钮背景色
$--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%); $--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%);
$--button-primary-active-background-color: mix(#000, $--color-primary, 10%); $--button-primary-active-background-color: mix(#000, $--color-primary, 10%);
// 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的； // button-gray用于普通按钮
// button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮
$--button-gray-color: $--color-text-regular; // 灰色按钮字色 $--button-gray-color: $--color-text-regular; // 灰色按钮字色
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色 $--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色 $--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
@@ -103,15 +105,16 @@ $--button-gray-border-color: $--border-color-base; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色 $--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色 $--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色
$--button-light-gray-color: $--color-text-regular; // 灰色按钮字色 // button-icon用于单图标按钮
$--button-light-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色 $--button-icon-color: $--color-text-regular; // 字色
$--button-light-gray-active-color: $--color-primary; // 灰色按钮focus字色 $--button-icon-hover-color: $--button-icon-color; // hover字色
$--button-light-gray-background-color: $--background-color-base; // 灰色按钮背景色 $--button-icon-active-color: $--color-primary; // focus字色
$--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色 $--button-icon-background-color: $--background-color-2; // 背景色
$--button-light-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色 $--button-icon-hover-background-color: $--background-color-empty; // hover背景色
$--button-light-gray-border-color: $--border-color-base; // 灰色按钮边框色 $--button-icon-active-background-color: $--background-color-empty; // focus背景色
$--button-light-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色 $--button-icon-border-color: $--border-color-base; // 边框色
$--button-light-gray-active-border-color: $--button-gray-border-color; // 灰色按钮focus边框色 $--button-icon-hover-border-color: $--border-color-base; // hover边框色
$--button-icon-active-border-color: mix(#FFF, $--color-primary, 10%); // focus边框色
/*** themes/common.scss是与主题切换无关的变量 ***/ /*** themes/common.scss是与主题切换无关的变量 ***/

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--light-gray': btnTheme === 'light-gray'}" class="top-tool-btn top-tool-btn--text" @click="antiShake"> <button :id="id+'-refresh'" 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--light-gray': btnTheme === 'light-gray'}" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)"> <button id="browser-go" 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">
@@ -66,8 +66,7 @@ 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" btn-theme="light-gray" 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" 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>