From 212e706caab2ee95cf60f4cedb3966290de6f461 Mon Sep 17 00:00:00 2001 From: Brandon Fergerson Date: Mon, 2 May 2022 15:30:47 +0400 Subject: [PATCH] theming --- src/styles/jetbrains-dark.scss | 87 ++++++++++++++++--- src/views/dashboard/controls/Tab.vue | 2 +- src/views/dashboard/data.ts | 6 +- src/views/dashboard/graphs/Bar.vue | 2 +- src/views/dashboard/graphs/Line.vue | 2 +- src/views/dashboard/graphs/TopList.vue | 2 +- .../graphs/components/ColumnGraph.vue | 2 +- 7 files changed, 84 insertions(+), 19 deletions(-) diff --git a/src/styles/jetbrains-dark.scss b/src/styles/jetbrains-dark.scss index bf7c21b7..a9ff9d40 100644 --- a/src/styles/jetbrains-dark.scss +++ b/src/styles/jetbrains-dark.scss @@ -1,5 +1,5 @@ :root { - --spp-white: #A9B7C6; + --spp-white: #808080; --spp-light-grey: #A9B7C6; --spp-grey: #A9B7C6; --spp-light-blue: #629755; @@ -66,6 +66,7 @@ .el-popper.is-light { background: var(--nice-black); + border: 1px solid var(--border-color) !important; } .micro-topo-chart .operations-list { @@ -213,11 +214,20 @@ .el-sub-menu__title { background-color: var(--spp-other-green) !important; + + &:hover { + background-color: var(--dashboard-tool-background) !important; + } +} + +.el-menu-item { + &:hover { + background-color: var(--dashboard-tool-background) !important; + } } .el-menu-item.is-active { - color: var(--spp-red) !important; - background-color: var(--menu-selected-color) !important; + background-color: var(--dashboard-tool-background) !important; } .bar-select { @@ -231,7 +241,7 @@ .nav-bar { background-color: var(--spp-darkest-green) !important; border-bottom: 1px solid var(--spp-darkest-green) !important; - color: var(--spp-white) !important; + color: var(--spp-light-grey) !important; } .nav-bar.dark { @@ -241,11 +251,15 @@ .tools { &:hover { - color: var(--spp-red) !important; + color: var(--spp-white) !important; } } .chart-card { + color: var(--spp-light-grey) !important; +} + +.unit { color: var(--spp-white) !important; } @@ -312,7 +326,7 @@ } .vue-grid-item.active { - border: 1px solid var(--spp-red) !important; + border: 1px solid var(--border-color) !important; } .vue-grid-layout { @@ -323,10 +337,6 @@ background: var(--spp-dark-green) !important; } -.vue-grid-item.active { - border: 1px solid var(--spp-red) !important; -} - .dashboard-tool { background: var(--dashboard-tool-background) !important; border-bottom: 1px solid var(--border-color) !important; @@ -366,7 +376,7 @@ } .link { - color: var(--spp-red) !important; + color: var(--spp-light-grey) !important; } .dark-dialog { @@ -416,3 +426,58 @@ a { .log-tips { color: red; } + +.el-progress-bar__outer { + background-color: var(--widget-background) !important; +} + +.menu-control { + color: var(--spp-white) !important; +} + +.el-notification { + background-color: var(--widget-background) !important; + border: 1px solid var(--border-color) !important; +} + +.el-notification__title { + color: var(--spp-white) !important; +} + +.el-notification__content { + color: var(--spp-light-grey) !important; +} + +.graph { + background-color: var(--widget-background) !important; + border: 1px solid var(--border-color) !important; +} + +.header, +.footer { + background-color: var(--table-header-color) !important; + border-top: 1px solid var(--border-color) !important; +} + +.el-collapse-item__header { + background-color: var(--spp-darkest-green) !important; + border: 1px solid var(--border-color) !important; +} + +.el-collapse-item__wrap { + background-color: var(--widget-background) !important; + border: 1px solid var(--border-color) !important; +} + +.el-collapse-item__content { + background-color: var(--dashboard-tool-background) !important; + border: 1px solid var(--border-color) !important; +} + +.attributes { + color: var(--spp-light-grey) !important; +} + +.scroll-handler__wrapper .scroll-to.active { + background-color: var(--border-color) !important; +} diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index c2abfefc..4b625e7b 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -424,7 +424,7 @@ export default defineComponent({ right: 0; top: 40vh; height: auto; - width: 20px; + width: 17px; .scroll-to { opacity: 0.5; width: 10px; diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index c6e4bc32..14942f47 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -253,14 +253,14 @@ export const QueryOrders = [ { label: "Duration", value: "BY_DURATION" }, ]; export const TextColors: { [key: string]: string } = { - green: "#67C23A", + green: "#629755", blue: "#409EFF", - red: "#F56C6C", + red: "#e1483b", grey: "#909399", white: "#fff", black: "#000", orange: "#E6A23C", - purple: "#bf99f8", + purple: "#9876AA", }; export const CalculationOpts = [ diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue index 7b943af9..24b62665 100644 --- a/src/views/dashboard/graphs/Bar.vue +++ b/src/views/dashboard/graphs/Bar.vue @@ -118,7 +118,7 @@ function getOption() { "#9876AA", "#CC7832", "#8A653B", - "#FF0000", + "#e1483b", "#FFC66D", ]; break; diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index 93ac9d7d..60d90a8a 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/src/views/dashboard/graphs/Line.vue @@ -128,7 +128,7 @@ function getOption() { "#9876AA", "#CC7832", "#8A653B", - "#FF0000", + "#e1483b", "#FFC66D", ]; break; diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue index 8fe0f72f..fbf6c43e 100644 --- a/src/views/dashboard/graphs/TopList.vue +++ b/src/views/dashboard/graphs/TopList.vue @@ -35,7 +35,7 @@ limitations under the License. --> diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue index 7801f6e4..f7043126 100644 --- a/src/views/dashboard/graphs/components/ColumnGraph.vue +++ b/src/views/dashboard/graphs/components/ColumnGraph.vue @@ -46,7 +46,7 @@ limitations under the License. -->