github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(style): update nav and tool bar

Browse Source
This commit is contained in:
Fine 2023-11-07 12:05:04 +08:00
parent d1b466b3b8
commit f9cf9900fd
3 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layout/components/NavBar.vue
View File

@ -303,16 +303,16 @@ limitations under the License. -->
padding: 5px;
text-align: left;
justify-content: space-between;
background-color: #fafbfc;
border-bottom: 1px solid #dfe4e8;
color: #222;
background-color: $theme-background;
border-bottom: 1px solid $border-color;
color: $font-color;
font-size: $font-size-smaller;
}
.nav-bar.dark {
background-color: #333840;
background-color: $theme-background;
border-bottom: 1px solid #252a2f;
color: #fafbfc;
color: $theme-background;
}
.title {

30
src/styles/theme.scss
View File

@ -16,24 +16,44 @@
*/
.light {
--primary-color: #409eff;
--el-color-primary: #409eff;
--theme-background: #fff;
--font-color: #3d444f;
--disabled-color: #ccc;
--el-switch-off: #999;
--el-text-color-regular: #606266;
--dashboard-tool-bg: rgb(240 242 245);
--text-color-placeholder: #666;
--border-color: #dfe4e8;
}
.dark {
--primary-color: #1c2022;
--el-color-primary: #1c2022;
--theme-background: #000;
--font-color: #3d444f;
--font-color: #fafbfc;
--disabled-color: #ccc;
--el-switch-off: #bbb;
--el-text-color-regular: #fafbfc;
--dashboard-tool-bg: #212224;
--text-color-placeholder: #ccc;
--border-color: #222;
}
.el-switch {
--el-switch-on-color: var(--el-color-primary);
--el-switch-off-color: var(--el-switch-off);
}
.el-breadcrumb__separator {
--el-text-color-placeholder: var(--text-color-placeholder);
}
$border-color: var(--border-color);
$dashboard-tool-bg: var(--dashboard-tool-bg);
$font-color: var(--font-color);
$text-color: var(--theme-background);
$disabled-color: var(--disabled-color);
$active-color: var(--primary-color);
$active-color: var(--el-color-primary);
$theme-background: var(--theme-background);
$active-background: var(--primary-color);
$active-background: var(--el-color-primary);
$font-size-smaller: 12px;
$font-size-normal: 14px;

4
src/views/dashboard/panel/Tool.vue
View File

@ -739,8 +739,8 @@ limitations under the License. -->
.dashboard-tool {
text-align: right;
padding: 3px 5px 5px;
background: rgb(240 242 245);
border-bottom: 1px solid #dfe4e8;
background: $dashboard-tool-bg;
border-bottom: 1px solid $border-color;
justify-content: space-between;
}