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; padding: 5px;
text-align: left; text-align: left;
justify-content: space-between; justify-content: space-between;
background-color: #fafbfc; background-color: $theme-background;
border-bottom: 1px solid #dfe4e8; border-bottom: 1px solid $border-color;
color: #222; color: $font-color;
font-size: $font-size-smaller; font-size: $font-size-smaller;
} }
.nav-bar.dark { .nav-bar.dark {
background-color: #333840; background-color: $theme-background;
border-bottom: 1px solid #252a2f; border-bottom: 1px solid #252a2f;
color: #fafbfc; color: $theme-background;
} }
.title { .title {

30
src/styles/theme.scss
View File

@ -16,24 +16,44 @@
*/ */
.light { .light {
--primary-color: #409eff; --el-color-primary: #409eff;
--theme-background: #fff; --theme-background: #fff;
--font-color: #3d444f; --font-color: #3d444f;
--disabled-color: #ccc; --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 { .dark {
--primary-color: #1c2022; --el-color-primary: #1c2022;
--theme-background: #000; --theme-background: #000;
--font-color: #3d444f; --font-color: #fafbfc;
--disabled-color: #ccc; --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); $font-color: var(--font-color);
$text-color: var(--theme-background); $text-color: var(--theme-background);
$disabled-color: var(--disabled-color); $disabled-color: var(--disabled-color);
$active-color: var(--primary-color); $active-color: var(--el-color-primary);
$theme-background: var(--theme-background); $theme-background: var(--theme-background);
$active-background: var(--primary-color); $active-background: var(--el-color-primary);
$font-size-smaller: 12px; $font-size-smaller: 12px;
$font-size-normal: 14px; $font-size-normal: 14px;

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

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