From 3cbb5e87cae85f4b884578f3ad81cc91f9e0a116 Mon Sep 17 00:00:00 2001 From: Fine Date: Wed, 15 Nov 2023 11:58:01 +0800 Subject: [PATCH] feat: update theme --- src/components/Graph.vue | 8 +-- src/styles/reset.scss | 86 --------------------------- src/styles/theme.scss | 88 ++++++++++++++++++++++++++++ src/views/dashboard/controls/Tab.vue | 2 +- src/views/dashboard/panel/Layout.vue | 2 +- 5 files changed, 94 insertions(+), 92 deletions(-) diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 2ad0b48f..5ed35d1d 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -252,11 +252,11 @@ limitations under the License. --> display: block; white-space: nowrap; z-index: 9999999; - box-shadow: #ddd 1px 2px 10px; + box-shadow: var(--sw-topology-box-shadow); transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear; - background-color: rgb(255 255 255); + background-color: var(--sw-bg-color-overlay); border-radius: 4px; - color: rgb(51 51 51); + color: $font-color; padding: 5px; } @@ -267,7 +267,7 @@ limitations under the License. --> &:hover { color: $active-color; - background-color: #eee; + background-color: $popper-hover-bg-color; } } diff --git a/src/styles/reset.scss b/src/styles/reset.scss index d2396848..75987932 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -123,89 +123,3 @@ code, pre { font-family: Consolas, Menlo, Courier, monospace; } - -.el-menu { - --el-menu-item-height: 50px; -} - -.el-menu-item-group__title { - display: none; -} - -.el-sub-menu .el-menu-item { - height: 40px; - line-height: 40px; - padding: 0 0 0 56px !important; -} - -.el-sub-menu__title { - .el-icon.menu-icons { - margin-top: -5px !important; - } -} - -.el-drawer__header { - margin-bottom: 0; - padding-left: 10px; - font-size: 16px; -} - -.el-drawer__body { - padding: 0; -} - -.switch { - margin: 0 5px; -} - -div.vis-tooltip { - max-width: 600px; - overflow: hidden; - background-color: var(--vis-tooltip-bg) !important; - white-space: normal !important; - font-size: $font-size-smaller !important; - color: var(--font-color) !important; -} - -.vis-item { - cursor: pointer; - height: 20px; -} - -.vis-item.Error { - background-color: #e66; - opacity: 0.8; - border-color: #e66; - color: var(--sw-event-vis-selected) !important; -} - -.vis-item.Normal { - background-color: #fac858; - border-color: #fac858; - color: var(--sw-event-vis-selected) !important; -} - -.vis-item .vis-item-content { - padding: 0 3px !important; -} - -.vis-item.vis-selected.Error, -.vis-item.vis-selected.Normal { - color: var(--sw-event-vis-selected) !important; -} - -.vis-time-axis .vis-text { - color: var(--sw-time-axis-text) !important; -} - -.el-menu--vertical.sub-list { - display: none; -} - -div:has(> a.menu-title) { - display: none; -} - -.el-input-number .el-input__inner { - text-align: left !important; -} diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 9d48255d..2fb0dd27 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -54,6 +54,7 @@ html { --sw-time-axis-text: #4d4d4d; --sw-drawer-header: #72767b; --sw-marketplace-border: #dedfe0; + --sw-grid-item-active: #79bbff; } html.dark { @@ -94,6 +95,7 @@ html.dark { --sw-time-axis-text: #aaa; --sw-drawer-header: #e9e9eb; --sw-marketplace-border: #606266; + --sw-grid-item-active: #73767a; } .el-drawer__header { @@ -150,3 +152,89 @@ $theme-background: var(--theme-background); $active-background: var(--el-color-primary); $font-size-smaller: 12px; $font-size-normal: 14px; + +.el-menu { + --el-menu-item-height: 50px; +} + +.el-menu-item-group__title { + display: none; +} + +.el-sub-menu .el-menu-item { + height: 40px; + line-height: 40px; + padding: 0 0 0 56px !important; +} + +.el-sub-menu__title { + .el-icon.menu-icons { + margin-top: -5px !important; + } +} + +.el-drawer__header { + margin-bottom: 0; + padding-left: 10px; + font-size: 16px; +} + +.el-drawer__body { + padding: 0; +} + +.switch { + margin: 0 5px; +} + +div.vis-tooltip { + max-width: 600px; + overflow: hidden; + background-color: var(--vis-tooltip-bg) !important; + white-space: normal !important; + font-size: $font-size-smaller !important; + color: var(--font-color) !important; +} + +.vis-item { + cursor: pointer; + height: 20px; +} + +.vis-item.Error { + background-color: #e66; + opacity: 0.8; + border-color: #e66; + color: var(--sw-event-vis-selected) !important; +} + +.vis-item.Normal { + background-color: #fac858; + border-color: #fac858; + color: var(--sw-event-vis-selected) !important; +} + +.vis-item .vis-item-content { + padding: 0 3px !important; +} + +.vis-item.vis-selected.Error, +.vis-item.vis-selected.Normal { + color: var(--sw-event-vis-selected) !important; +} + +.vis-time-axis .vis-text { + color: var(--sw-time-axis-text) !important; +} + +.el-menu--vertical.sub-list { + display: none; +} + +div:has(> a.menu-title) { + display: none; +} + +.el-input-number .el-input__inner { + text-align: left !important; +} diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 74f71b92..55df3fe0 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -375,7 +375,7 @@ limitations under the License. --> } .vue-grid-item.active { - border: 1px solid $active-color; + border: 1px solid var(--sw-grid-item-active); } .no-data-tips { diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue index ec7e645f..222f2ddf 100644 --- a/src/views/dashboard/panel/Layout.vue +++ b/src/views/dashboard/panel/Layout.vue @@ -91,7 +91,7 @@ limitations under the License. --> } .vue-grid-item.active { - border: 1px solid $active-color; + border: 1px solid var(--sw-grid-item-active); } .no-data-tips {