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

style: update dashboard

Browse Source
This commit is contained in:
Fine 2023-11-07 18:40:37 +08:00
parent 13081abf81
commit 682f2c62cb
4 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -32,5 +32,6 @@ limitations under the License. -->
color: $font-color; color: $font-color;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: $layout-background;
} }
</style> </style>

33
src/styles/theme.scss
View File

@ -27,6 +27,9 @@
--border-color-primary: #eee; --border-color-primary: #eee;
--layout-background: #f7f9fa; --layout-background: #f7f9fa;
--el-switch-off: #999; --el-switch-off: #999;
--el-input-bg-color: #fff;
--el-input-text-color: #3d444f;
--box-shadow-color: #ccc;
} }
.dark { .dark {
@ -41,6 +44,9 @@
--border-color-primary: #4b4b52; --border-color-primary: #4b4b52;
--layout-background: #000; --layout-background: #000;
--el-switch-off: #999; --el-switch-off: #999;
--el-input-bg-color: #212224;
--el-input-text-color: #fafbfc;
--box-shadow-color: #888;
} }
.el-switch { .el-switch {
@ -52,6 +58,33 @@
--el-text-color-placeholder: var(--text-color-placeholder); --el-text-color-placeholder: var(--text-color-placeholder);
} }
.el-input__inner {
background-color: var(--el-input-bg-color);
color: var(--el-input-text-color);
}
.el-select {
--el-select-input-color: var(--el-input-text-color);
--el-select-multiple-input-color: var(--el-input-text-color);
}
.el-input {
--el-input-bg-color: var(--el-input-bg-color);
color: var(--el-input-text-color);
// --el-input-text-color: var(--el-input-text-color);
// --el-input-border: var(--el-border-base);
// --el-input-hover-border: var(--el-border-color-hover);
// --el-input-focus-border: var(--el-color-primary);
// --el-input-transparent-border: 0 0 0 1px transparent inset;
// --el-input-border-color: var(--el-border-color-base);
// --el-input-border-radius: var(--el-border-radius-base);
// --el-input-icon-color: var(--el-text-color-placeholder);
// --el-input-placeholder-color: var(--el-text-color-placeholder);
// --el-input-hover-border-color: var(--el-border-color-hover);
// --el-input-clear-hover-color: var(--el-text-color-secondary);
// --el-input-focus-border-color: var(--el-color-primary);
}
$box-shadow-color: var(--box-shadow-color);
$border-color-primary: var(--border-color-primary); $border-color-primary: var(--border-color-primary);
$layout-background: var(--layout-background); $layout-background: var(--layout-background);
$border-color: var(--border-color); $border-color: var(--border-color);

2
src/views/dashboard/controls/Tab.vue
View File

@ -361,7 +361,7 @@ limitations under the License. -->
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
background: $theme-background; background: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px; border-radius: 3px;
} }

2
src/views/dashboard/panel/Layout.vue
View File

@ -86,7 +86,7 @@ limitations under the License. -->
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
background-color: $theme-background; background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px; border-radius: 3px;
} }