From 5dbd3c9d24704a1244baf9796f1fddb012a0d33c Mon Sep 17 00:00:00 2001 From: Brandon Fergerson Date: Fri, 29 Apr 2022 15:00:55 +0200 Subject: [PATCH] jetbrains theme --- public/favicon.png | Bin 0 -> 16340 bytes public/index.html | 2 +- src/assets/icons/logo-sw.svg | 50 ++-- src/assets/icons/logo.svg | 40 +-- src/components/FullVue.vue | 2 +- src/hooks/useEcharts.ts | 2 +- src/styles/index.scss | 3 + src/styles/jetbrains-dark.scss | 390 ++++++++++++++++++++++++++++ src/styles/spp-dark.scss | 387 +++++++++++++++++++++++++++ src/styles/spp-light.scss | 29 +++ src/views/dashboard/graphs/Bar.vue | 40 ++- src/views/dashboard/graphs/Line.vue | 39 ++- 12 files changed, 879 insertions(+), 105 deletions(-) create mode 100644 public/favicon.png create mode 100644 src/styles/jetbrains-dark.scss create mode 100644 src/styles/spp-dark.scss create mode 100644 src/styles/spp-light.scss diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..51ac6404d14550599412cbb032efdeb191f0e162 GIT binary patch literal 16340 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 - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/assets/icons/logo-sw.svg b/src/assets/icons/logo-sw.svg index 72aee3ff..4a0cb5c5 100644 --- a/src/assets/icons/logo-sw.svg +++ b/src/assets/icons/logo-sw.svg @@ -1,32 +1,22 @@ - - - - - Group - Created with Sketch. - - - - - - - - - - + + + + + + + + + + + + + + - \ No newline at end of file + diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg index 65f0531d..8870e00d 100644 --- a/src/assets/icons/logo.svg +++ b/src/assets/icons/logo.svg @@ -1,29 +1,15 @@ - - - - - Group - Created with Sketch. - - - - - - - + + + + + + + + + - \ No newline at end of file + diff --git a/src/components/FullVue.vue b/src/components/FullVue.vue index 7b83536c..cf79aa44 100644 --- a/src/components/FullVue.vue +++ b/src/components/FullVue.vue @@ -168,7 +168,7 @@ export default defineComponent({ .full-scroll-to.active { opacity: 1; padding: 6px; - background: #252a2f; + background: #9876AA; } } } diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts index 16b505b2..93bce63e 100644 --- a/src/hooks/useEcharts.ts +++ b/src/hooks/useEcharts.ts @@ -106,7 +106,7 @@ export function useECharts( nextTick(() => { useTimeoutFn(() => { if (!chartInstance) { - initCharts(getDarkMode.value as "default"); + initCharts("default"); if (!chartInstance) return; } diff --git a/src/styles/index.scss b/src/styles/index.scss index ce0421bb..18a9c0e8 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -17,3 +17,6 @@ @import "./grid.scss"; @import "./lib.scss"; @import "./reset.scss"; +//@import "./spp-light.scss"; +//@import "./spp-dark.scss"; +@import "./jetbrains-dark.scss"; diff --git a/src/styles/jetbrains-dark.scss b/src/styles/jetbrains-dark.scss new file mode 100644 index 00000000..8029bb1c --- /dev/null +++ b/src/styles/jetbrains-dark.scss @@ -0,0 +1,390 @@ +:root { + --spp-white: #A9B7C6; + --spp-light-grey: #A9B7C6; + --spp-grey: #A9B7C6; + --spp-light-blue: #629755; + --spp-blue: #313335; + --spp-red: #e1483b; + --spp-green: #2b2b2b; + --spp-dark-green: #313335; + --spp-darkest-green: #313335; + --spp-other-green: #2b2b2b; + --nice-black: #2b2b2b; + --widget-background: #2b2b2b; + --border-color: #1a1a1a; + --dashboard-tool-background: #1a1a1a; +} + +.el-table { + --el-table-tr-bg-color: var(--nice-black); + --el-table-header-bg-color: var(--spp-dark-green); + --el-table-row-hover-bg-color: var(--spp-other-green); + --el-table-border-color: var(--spp-darkest-green); + --el-table-bg-color: var(--nice-black); +} + +:root { + --el-disabled-bg-color: var(--nice-black); +} + +.el-pagination.is-background .el-pager li:not(.disabled).active { + background: var(--spp-other-green); +} + +.el-input__inner { + --el-input-bg-color: var(--spp-other-green); + //--el-input-border: red !important; +} + +.el-select { + --el-select-border-color-hover: var(--spp-light-blue); + --el-select-input-focus-border-color: var(--spp-red); + --el-input-placeholder-color: red; + --el-text-color-placeholder: var(--spp-light-grey); + --el-input-border: red; + --el-border-color-base: red; + --el-input-bg-color: red; +} + +.el-scrollbar { + --el-scrollbar-bg-color: var(--spp-light-grey); +} + +.el-select__popper.el-popper[role="tooltip"] { + background: var(--spp-other-green); +} + +.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { + background: var(--spp-other-green); +} + +.el-select__popper.el-popper[role="tooltip"] { + border: 1px solid var(--spp-blue); +} + +.el-popper.is-light { + background: var(--nice-black); +} + +.micro-topo-chart .operations-list { + background: var(--spp-other-green) !important; + color: white !important; +} + +.el-input { + --el-input-border: 1px solid var(--spp-blue); + --el-input-text-color: var(--spp-white); +} + +.el-select-dropdown__item.selected { + color: var(--spp-white); +} + +.el-select__popper.el-popper[role="tooltip"] .el-popper__arrow::before { + border: 1px solid var(--spp-blue); +} + +.el-popper.is-light .el-popper__arrow::before { + background: var(--spp-other-green); +} + +.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { + background: var(--spp-dark-green); +} + +.settings .label { + color: var(--spp-white); +} + +.settings i, span { + color: var(--spp-light-grey); +} + +.utc-input { + color: var(--spp-white) !important; +} + +.settings input { + background: var(--spp-dark-green) !important; + border: 1px solid var(--spp-blue) !important; + color: var(--spp-white); +} + +.auto-time { + color: var(--spp-white); +} + +.el-switch__core { + --el-switch-off-color: var(--spp-dark-green); + --el-switch-on-color: var(--spp-red); +} + +.alarm-tool { + background-color: var(--nice-black) !important; + border-bottom: 1px solid var(--spp-blue) !important; +} + +.el-dialog { + background-color: var(--nice-black); +} + +.el-dialog__title { + color: var(--spp-white); +} + +.el-pagination button:disabled { + background-color: var(--spp-dark-green); +} + +.timeline-table-i { + border-left: 4px solid var(--spp-other-green) !important; +} + +.timeline-table-i::before { + background-color: var(--spp-other-green) !important; +} +.timeline-table-i::after { + background-color: var(--spp-grey) !important; +} + +.settings .label { + color: var(--spp-white) !important; +} + +.event-tool { + background-color: var(--nice-black) !important; +} + +.el-button { + background-color: var(--spp-green); + border-color: var(--spp-other-green); +} + +.el-button--danger { + background-color: var(--spp-red); +} + +.el-button:focus, .el-button:hover { + background-color: var(--spp-darkest-green); + border-color: black +} + +.table { + background-color: var(--nice-black) !important; +} + +.trace-td.selected { + background-color: var(--spp-other-green) !important; +} + +.trace-td.trace-error.selected { + background-color: var(--nice-black) !important; +} + +.el-pager li.active { + background-color: var(--spp-other-green); +} + +.el-pager li { + background-color: var(--spp-green); +} + +.el-pager li.active { + color: var(--spp-white); +} + +.el-pager + button.btn-next[type="button"] { + background-color: var(--spp-grey); +} + +.toggle-selection { + background-color: var(--nice-black) !important; +} + +.side-bar { + background-color: var(--spp-other-green) !important; +} + +.bar-select { + background: black !important; + + .selected { + color: var(--spp-red) !important; + } +} + +.nav-bar { + background-color: var(--spp-darkest-green) !important; + border-bottom: 1px solid var(--spp-darkest-green) !important; + color: var(--spp-white) !important; +} + +.nav-bar.dark { + background-color: var(--spp-darkest-green) !important; + border-bottom: 1px solid var(--spp-green) !important; +} + +.tools { + &:hover { + color: var(--spp-red) !important; + } +} + +.chart-card { + color: var(--spp-white) !important; +} + +.profile-item.level0 { + &:hover { + color: var(--spp-red) !important; + } +} + +.name { + color: var(--spp-red) !important; +} + +//span.active { +// background-color: var(--spp-red) !important; +//} + +.topology { + background-color: var(--spp-darkest-green) !important; +} + +.widget { + background: var(--widget-background) !important; +} + +.header { + border-bottom: 1px solid var(--border-color) !important; +} + +.body { + color: var(--spp-blue) !important; + background: var(--spp-darkest-green) !important; +} + +.tabs { + input { + background: inherit !important; + } + + input.tab-name { + color: var(--spp-white) !important;; + } + + span.active { + border-bottom: 1px solid var(--spp-red) !important; + color: var(--spp-red) !important; + } +} + +.tab-header { + border-bottom: 1px solid var(--border-color) !important; +} + +.vue-grid-layout { + background: var(--spp-darkest-green) !important; +} + +.vue-grid-item:not(.vue-grid-placeholder) { + background: var(--spp-darkest-green) !important; +} + +.vue-grid-item.active { + border: 1px solid var(--spp-red) !important; +} + +.vue-grid-layout { + background: var(--spp-darkest-green) !important; +} + +.vue-grid-item:not(.vue-grid-placeholder) { + 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; +} + +.micro-topo-chart { + .operations-list { + span:hover { + color: var(--spp-red) !important; + } + } + .switch-icon { + background-color: #182d3499 !important; + } +} + +.d3-tip { + background: var(--spp-green) !important; +} + +.d3-tip:after { + color: var(--spp-green) !important; +} + +.sankey { + background-color: var(--spp-darkest-green) !important; +} + +.switch-icon { + background-color: #182d3499 !important; +} + +.operations-list { + span:hover { + color: var(--spp-red) !important; + } +} + +.link { + color: var(--spp-red) !important; +} + +.dark-dialog { + background-color: var(--spp-darkest-green) !important; + color: #ddd !important; + + .el-loading-mask { + background-color: red !important; + color: red !important; + } +} + +.el-loading-mask { + background-color: unset !important; + color: unset !important; +} + +.app-main { + background: var(--spp-darkest-green) !important; +} + +.opt { + &.select-disabled { + color: var(--spp-red) !important; + } +} + +blockquote { + border-left: 4px solid var(--spp-light-grey) !important; +} + +a { + color: var(--spp-white) !important; +} + +.timeline-table-i { + &::before { + background-color: #448dfe !important; + } +} diff --git a/src/styles/spp-dark.scss b/src/styles/spp-dark.scss new file mode 100644 index 00000000..f5db25d5 --- /dev/null +++ b/src/styles/spp-dark.scss @@ -0,0 +1,387 @@ +:root { + --spp-white: #e9ebfc; + --spp-light-grey: #cacaca; + --spp-grey: #a7aebb; + --spp-light-blue: #747990; + --spp-blue: #3d444f; + --spp-red: #e1483b; + --spp-green: #182d34; + --spp-dark-green: #172127; + --spp-darkest-green: #0d1216; + --spp-other-green: #24343d; + --nice-black: #1a1a1a; +} + +.el-table { + --el-table-tr-bg-color: var(--nice-black); + --el-table-header-bg-color: var(--spp-dark-green); + --el-table-row-hover-bg-color: var(--spp-other-green); + --el-table-border-color: var(--spp-darkest-green); + --el-table-bg-color: var(--nice-black); +} + +:root { + --el-disabled-bg-color: var(--nice-black); +} + +.el-pagination.is-background .el-pager li:not(.disabled).active { + background: var(--spp-other-green); +} + +.el-input__inner { + --el-input-bg-color: var(--spp-other-green); + //--el-input-border: red !important; +} + +.el-select { + --el-select-border-color-hover: var(--spp-light-blue); + --el-select-input-focus-border-color: var(--spp-red); + --el-input-placeholder-color: red; + --el-text-color-placeholder: var(--spp-light-grey); + --el-input-border: red; + --el-border-color-base: red; + --el-input-bg-color: red; +} + +.el-scrollbar { + --el-scrollbar-bg-color: var(--spp-light-grey); +} + +.el-select__popper.el-popper[role="tooltip"] { + background: var(--spp-other-green); +} + +.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { + background: var(--spp-other-green); +} + +.el-select__popper.el-popper[role="tooltip"] { + border: 1px solid var(--spp-blue); +} + +.el-popper.is-light { + background: var(--nice-black); +} + +.micro-topo-chart .operations-list { + background: var(--spp-other-green) !important; + color: white !important; +} + +.el-input { + --el-input-border: 1px solid var(--spp-blue); + --el-input-text-color: var(--spp-white); +} + +.el-select-dropdown__item.selected { + color: var(--spp-white); +} + +.el-select__popper.el-popper[role="tooltip"] .el-popper__arrow::before { + border: 1px solid var(--spp-blue); +} + +.el-popper.is-light .el-popper__arrow::before { + background: var(--spp-other-green); +} + +.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { + background: var(--spp-dark-green); +} + +.settings .label { + color: var(--spp-white); +} + +.settings i, span { + color: var(--spp-light-grey); +} + +.utc-input { + color: var(--spp-white) !important; +} + +.settings input { + background: var(--spp-dark-green) !important; + border: 1px solid var(--spp-blue) !important; + color: var(--spp-white); +} + +.auto-time { + color: var(--spp-white); +} + +.el-switch__core { + --el-switch-off-color: var(--spp-dark-green); + --el-switch-on-color: var(--spp-red); +} + +.alarm-tool { + background-color: var(--nice-black) !important; + border-bottom: 1px solid var(--spp-blue) !important; +} + +.el-dialog { + background-color: var(--nice-black); +} + +.el-dialog__title { + color: var(--spp-white); +} + +.el-pagination button:disabled { + background-color: var(--spp-dark-green); +} + +.timeline-table-i { + border-left: 4px solid var(--spp-other-green) !important; +} + +.timeline-table-i::before { + background-color: var(--spp-other-green) !important; +} +.timeline-table-i::after { + background-color: var(--spp-grey) !important; +} + +.settings .label { + color: var(--spp-white) !important; +} + +.event-tool { + background-color: var(--nice-black) !important; +} + +.el-button { + background-color: var(--spp-green); + border-color: var(--spp-other-green); +} + +.el-button--danger { + background-color: var(--spp-red); +} + +.el-button:focus, .el-button:hover { + background-color: var(--spp-darkest-green); + border-color: black +} + +.table { + background-color: var(--nice-black) !important; +} + +.trace-td.selected { + background-color: var(--spp-other-green) !important; +} + +.trace-td.trace-error.selected { + background-color: var(--nice-black) !important; +} + +.el-pager li.active { + background-color: var(--spp-other-green); +} + +.el-pager li { + background-color: var(--spp-green); +} + +.el-pager li.active { + color: var(--spp-white); +} + +.el-pager + button.btn-next[type="button"] { + background-color: var(--spp-grey); +} + +.toggle-selection { + background-color: var(--nice-black) !important; +} + +.side-bar { + background-color: var(--spp-other-green) !important; +} + +.bar-select { + background: black !important; + + .selected { + color: var(--spp-red) !important; + } +} + +.nav-bar { + background-color: var(--spp-darkest-green) !important; + border-bottom: 1px solid var(--spp-darkest-green) !important; + color: var(--spp-white) !important; +} + +.nav-bar.dark { + background-color: var(--spp-darkest-green) !important; + border-bottom: 1px solid var(--spp-green) !important; +} + +.tools { + &:hover { + color: var(--spp-red) !important; + } +} + +.chart-card { + color: var(--spp-white) !important; +} + +.profile-item.level0 { + &:hover { + color: var(--spp-red) !important; + } +} + +.name { + color: var(--spp-red) !important; +} + +//span.active { +// background-color: var(--spp-red) !important; +//} + +.topology { + background-color: var(--spp-darkest-green) !important; +} + +.widget { + background: #010409 !important; +} + +.header { + border-bottom: 1px solid #1c3139 !important; +} + +.body { + color: var(--spp-blue) !important; + background: var(--spp-darkest-green) !important; +} + +.tabs { + input { + background: inherit !important; + } + + input.tab-name { + color: var(--spp-white) !important;; + } + + span.active { + border-bottom: 1px solid var(--spp-red) !important; + color: var(--spp-red) !important; + } +} + +.tab-header { + border-bottom: 1px solid #1c3139 !important; +} + +.vue-grid-layout { + background: var(--spp-darkest-green) !important; +} + +.vue-grid-item:not(.vue-grid-placeholder) { + background: var(--spp-darkest-green) !important; +} + +.vue-grid-item.active { + border: 1px solid var(--spp-red) !important; +} + +.vue-grid-layout { + background: var(--spp-darkest-green) !important; +} + +.vue-grid-item:not(.vue-grid-placeholder) { + background: var(--spp-dark-green) !important; +} + +.vue-grid-item.active { + border: 1px solid var(--spp-red) !important; +} + +.dashboard-tool { + background: #1a262d !important; + border-bottom: 1px solid #1c3139 !important; +} + +.micro-topo-chart { + .operations-list { + span:hover { + color: var(--spp-red) !important; + } + } + .switch-icon { + background-color: #182d3499 !important; + } +} + +.d3-tip { + background: var(--spp-green) !important; +} + +.d3-tip:after { + color: var(--spp-green) !important; +} + +.sankey { + background-color: var(--spp-darkest-green) !important; +} + +.switch-icon { + background-color: #182d3499 !important; +} + +.operations-list { + span:hover { + color: var(--spp-red) !important; + } +} + +.link { + color: var(--spp-red) !important; +} + +.dark-dialog { + background-color: var(--spp-darkest-green) !important; + color: #ddd !important; + + .el-loading-mask { + background-color: red !important; + color: red !important; + } +} + +.el-loading-mask { + background-color: unset !important; + color: unset !important; +} + +.app-main { + background: var(--spp-darkest-green) !important; +} + +.opt { + &.select-disabled { + color: var(--spp-red) !important; + } +} + +blockquote { + border-left: 4px solid var(--spp-light-grey) !important; +} + +a { + color: var(--spp-white) !important; +} + +.timeline-table-i { + &::before { + background-color: #448dfe !important; + } +} diff --git a/src/styles/spp-light.scss b/src/styles/spp-light.scss new file mode 100644 index 00000000..4e31cbe3 --- /dev/null +++ b/src/styles/spp-light.scss @@ -0,0 +1,29 @@ +:root { + --spp-white: #e9ebfc; + --spp-light-grey: #cacaca; + --spp-grey: #a7aebb; + --spp-light-blue: #747990; + --spp-blue: #3d444f; + --spp-red: #e1483b; + --spp-green: #182d34; + --spp-dark-green: #172127; + --spp-darkest-green: #0d1216; + --spp-other-green: #24343d; + --nice-black: #1a1a1a; +} + +.side-bar { + background: var(--spp-other-green) !important; +} + +.el-menu { + background-color: var(--spp-other-green) !important; +} + +.el-sub-menu__title { + background-color: var(--spp-other-green) !important; +} + +.el-menu-item.is-active { + color: var(--spp-red) !important; +} diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue index aed49ef3..7b943af9 100644 --- a/src/views/dashboard/graphs/Bar.vue +++ b/src/views/dashboard/graphs/Bar.vue @@ -107,29 +107,19 @@ function getOption() { let color: string[] = []; switch (keys.length) { case 2: - color = ["#FF6A84", "#a0b1e6"]; + color = ["#629755", "#9876AA"]; break; case 1: - color = ["#3f96e3"]; + color = ["#629755"]; break; default: color = [ - "#30A4EB", - "#45BFC0", - "#FFCC55", - "#FF6A84", - "#a0a7e6", - "#c23531", - "#2f4554", - "#61a0a8", - "#d48265", - "#91c7ae", - "#749f83", - "#ca8622", - "#bda29a", - "#6e7074", - "#546570", - "#c4ccd3", + "#629755", + "#9876AA", + "#CC7832", + "#8A653B", + "#FF0000", + "#FFC66D", ]; break; } @@ -143,7 +133,7 @@ function getOption() { confine: true, textStyle: { fontSize: 13, - color: "#ccc", + color: "#A9B7C6", }, enterable: true, extraCssText: "max-height: 300px; overflow: auto; border: none", @@ -156,7 +146,7 @@ function getOption() { left: 0, itemWidth: 12, textStyle: { - color: "#333", + color: "#A9B7C6", }, }, grid: { @@ -174,14 +164,20 @@ function getOption() { }, splitLine: { show: false }, axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } }, - axisLabel: { color: "#9da5b2", fontSize: "11" }, + axisLabel: { + color: "#808080", + fontSize: "13", + }, }, yAxis: { type: "value", axisLine: { show: false }, axisTick: { show: false }, splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } }, - axisLabel: { color: "#9da5b2", fontSize: "11" }, + axisLabel: { + color: "#808080", + fontSize: "13", + }, }, series: temp, }; diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index 295bc87f..93ac9d7d 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/src/views/dashboard/graphs/Line.vue @@ -117,29 +117,19 @@ function getOption() { let color: string[] = []; switch (keys.length) { case 2: - color = ["#FF6A84", "#a0b1e6"]; + color = ["#629755", "#9876AA"]; break; case 1: - color = ["#3f96e3"]; + color = ["#629755"]; break; default: color = [ - "#30A4EB", - "#45BFC0", - "#FFCC55", - "#FF6A84", - "#a0a7e6", - "#c23531", - "#2f4554", - "#61a0a8", - "#d48265", - "#91c7ae", - "#749f83", - "#ca8622", - "#bda29a", - "#6e7074", - "#546570", - "#c4ccd3", + "#629755", + "#9876AA", + "#CC7832", + "#8A653B", + "#FF0000", + "#FFC66D", ]; break; } @@ -148,7 +138,7 @@ function getOption() { backgroundColor: "rgb(50,50,50)", textStyle: { fontSize: 12, - color: "#ccc", + color: "#A9B7C6", }, enterable: true, confine: true, @@ -178,7 +168,7 @@ function getOption() { left: 0, itemWidth: 12, textStyle: { - color: props.theme === "dark" ? "#fff" : "#333", + color: "#A9B7C6", }, }, grid: { @@ -198,7 +188,10 @@ function getOption() { }, splitLine: { show: false }, axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } }, - axisLabel: { color: "#9da5b2", fontSize: "11" }, + axisLabel: { + color: "#808080", + fontSize: "13", + }, }, yAxis: { show: props.config.showYAxis, @@ -207,8 +200,8 @@ function getOption() { axisTick: { show: false }, splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } }, axisLabel: { - color: "#9da5b2", - fontSize: "11", + color: "#808080", + fontSize: "13", show: props.config.showYAxis, }, },