mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-14 17:05:10 +00:00
jetbrains theme
This commit is contained in:
Brandon Fergerson
parent
a800b095fd
commit
5dbd3c9d24
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@ -18,7 +18,7 @@ limitations under the License. -->
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.png">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 2.5 KiB |
@ -1,29 +1,15 @@
|
|||||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1230.19 623.31">
|
||||||
contributor license agreements. See the NOTICE file distributed with
|
<defs>
|
||||||
this work for additional information regarding copyright ownership.
|
<style>.cls-1{fill:#E6EBED;}.cls-2{fill:#e1483b;}</style>
|
||||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
</defs>
|
||||||
(the "License"); you may not use this file except in compliance with
|
<g id="Layer_2" data-name="Layer 2">
|
||||||
the License. You may obtain a copy of the License at
|
<g id="Layer_1-2" data-name="Layer 1">
|
||||||
|
<path class="cls-1"
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
d="M342.36,0l-.64,151.23-150,83.54L372.09,381,118.34,570.16l105-170.86L1.27,230.34,0,228.44Z"/>
|
||||||
|
<path class="cls-2"
|
||||||
Unless required by applicable law or agreed to in writing, software
|
d="M559.41,251.86h87.32V393.61H787.22v87.95H646.73V623.31H559.41V481.56H418.92V393.61H559.41Z"/>
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
<path class="cls-2"
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
d="M1002.38,251.86h87.32V393.61h140.49v87.95H1089.7V623.31h-87.32V481.56H861.89V393.61h140.49Z"/>
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License. -->
|
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="3450px" height="1823px" viewBox="0 0 3450 1823" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
|
|
||||||
<title>Group</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
|
||||||
<defs></defs>
|
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="Group" transform="translate(0.000000, -29.000000)">
|
|
||||||
<path d="M1050.01772,1394.31899 C1050.01772,1615.24051 912.21519,1851.47342 474.746835,1851.47342 C310.696203,1851.47342 192.579747,1836.16203 87.5873418,1812.10127 C65.7139241,1807.72658 46.0278481,1792.41519 46.0278481,1768.35443 L46.0278481,1610.86582 C46.0278481,1586.80506 65.7139241,1569.30633 87.5873418,1569.30633 L91.9620253,1569.30633 C179.455696,1580.24304 398.189873,1591.17975 479.121519,1591.17975 C673.794937,1591.17975 732.853165,1521.18481 732.853165,1394.31899 C732.853165,1309.01266 691.293671,1265.26582 546.929114,1179.95949 L258.2,1007.15949 C54.7772152,886.855696 0.0936708861,759.989873 0.0936708861,606.875949 C0.0936708861,366.268354 140.083544,191.281013 546.929114,191.281013 C691.293671,191.281013 892.529114,213.15443 966.898734,230.653165 C988.772152,235.027848 1006.27089,250.339241 1006.27089,272.212658 L1006.27089,434.075949 C1006.27089,455.949367 990.959494,473.448101 969.086076,473.448101 L964.711392,473.448101 C820.346835,460.324051 675.982278,451.574684 533.805063,451.574684 C371.941772,451.574684 304.134177,508.44557 304.134177,606.875949 C304.134177,679.058228 341.318987,722.805063 483.496203,801.549367 L745.977215,948.101266 C986.58481,1081.52911 1050.01772,1221.51899 1050.01772,1394.31899 Z M2852.63038,644.060759 C2852.63038,646.248101 2852.63038,648.435443 2852.63038,650.622785 L2653.58228,1656.8 C2627.33418,1788.04051 2592.33671,1840.53671 2458.90886,1840.53671 L2399.85063,1840.53671 C2281.73418,1840.53671 2220.48861,1783.66582 2192.05316,1669.92405 L2019.25316,1000.59747 C2017.06582,991.848101 2017.06582,989.660759 2012.69114,989.660759 C2008.31646,989.660759 2008.31646,991.848101 2006.12911,1000.59747 L1833.32911,1669.92405 C1804.89367,1783.66582 1743.6481,1840.53671 1625.53165,1840.53671 L1566.47342,1840.53671 C1433.04557,1840.53671 1398.0481,1788.04051 1371.8,1656.8 L1172.7519,650.622785 C1172.7519,648.435443 1172.7519,646.248101 1172.7519,644.060759 C1172.7519,620 1192.43797,600.313924 1216.49873,600.313924 L1428.67089,600.313924 C1450.5443,600.313924 1465.8557,620 1468.04304,639.686076 L1605.84557,1564.93165 C1608.03291,1584.61772 1612.40759,1595.55443 1616.78228,1595.55443 C1621.15696,1595.55443 1627.71899,1586.80506 1632.09367,1564.93165 L1813.64304,829.98481 C1835.51646,744.678481 1861.76456,735.929114 1936.13418,735.929114 L2089.2481,735.929114 C2163.61772,735.929114 2189.86582,744.678481 2211.73924,829.98481 L2393.28861,1564.93165 C2397.66329,1586.80506 2404.22532,1595.55443 2408.6,1595.55443 C2412.97468,1595.55443 2417.34937,1584.61772 2419.53671,1564.93165 L2557.33924,639.686076 C2559.52658,620 2574.83797,600.313924 2596.71139,600.313924 L2808.88354,600.313924 C2832.9443,600.313924 2852.63038,620 2852.63038,644.060759 Z" id="Sw" fill="#1368B3"></path>
|
|
||||||
<g id="moon-o" transform="translate(2932.164557, 596.000000) rotate(-183.000000) translate(-2932.164557, -596.000000) translate(2415.708861, 26.379747)" fill="#D8D8D8" fill-rule="nonzero">
|
|
||||||
<path d="M1025.31646,927.371333 C992.796119,932.841177 959.292071,935.576099 925.845888,935.576099 C590.40035,935.576099 318.259524,661.909325 318.259524,324.582876 C318.259524,209.134252 351.705707,96.3623597 412.290747,0 C171.802278,71.8062511 0,293.684076 0,557.342199 C0,878.317305 259.46831,1139.24051 578.65368,1139.24051 C753.17563,1139.24051 916.818891,1059.22949 1025.31646,927.371333 Z" id="Shape"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 717 B |
@ -168,7 +168,7 @@ export default defineComponent({
|
|||||||
.full-scroll-to.active {
|
.full-scroll-to.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background: #252a2f;
|
background: #9876AA;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -106,7 +106,7 @@ export function useECharts(
|
|||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
useTimeoutFn(() => {
|
useTimeoutFn(() => {
|
||||||
if (!chartInstance) {
|
if (!chartInstance) {
|
||||||
initCharts(getDarkMode.value as "default");
|
initCharts("default");
|
||||||
|
|
||||||
if (!chartInstance) return;
|
if (!chartInstance) return;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,3 +17,6 @@
|
|||||||
@import "./grid.scss";
|
@import "./grid.scss";
|
||||||
@import "./lib.scss";
|
@import "./lib.scss";
|
||||||
@import "./reset.scss";
|
@import "./reset.scss";
|
||||||
|
//@import "./spp-light.scss";
|
||||||
|
//@import "./spp-dark.scss";
|
||||||
|
@import "./jetbrains-dark.scss";
|
||||||
|
|||||||
390
src/styles/jetbrains-dark.scss
Normal file
390
src/styles/jetbrains-dark.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
387
src/styles/spp-dark.scss
Normal file
387
src/styles/spp-dark.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
29
src/styles/spp-light.scss
Normal file
29
src/styles/spp-light.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
@ -107,29 +107,19 @@ function getOption() {
|
|||||||
let color: string[] = [];
|
let color: string[] = [];
|
||||||
switch (keys.length) {
|
switch (keys.length) {
|
||||||
case 2:
|
case 2:
|
||||||
color = ["#FF6A84", "#a0b1e6"];
|
color = ["#629755", "#9876AA"];
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
color = ["#3f96e3"];
|
color = ["#629755"];
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
color = [
|
color = [
|
||||||
"#30A4EB",
|
"#629755",
|
||||||
"#45BFC0",
|
"#9876AA",
|
||||||
"#FFCC55",
|
"#CC7832",
|
||||||
"#FF6A84",
|
"#8A653B",
|
||||||
"#a0a7e6",
|
"#FF0000",
|
||||||
"#c23531",
|
"#FFC66D",
|
||||||
"#2f4554",
|
|
||||||
"#61a0a8",
|
|
||||||
"#d48265",
|
|
||||||
"#91c7ae",
|
|
||||||
"#749f83",
|
|
||||||
"#ca8622",
|
|
||||||
"#bda29a",
|
|
||||||
"#6e7074",
|
|
||||||
"#546570",
|
|
||||||
"#c4ccd3",
|
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -143,7 +133,7 @@ function getOption() {
|
|||||||
confine: true,
|
confine: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 13,
|
fontSize: 13,
|
||||||
color: "#ccc",
|
color: "#A9B7C6",
|
||||||
},
|
},
|
||||||
enterable: true,
|
enterable: true,
|
||||||
extraCssText: "max-height: 300px; overflow: auto; border: none",
|
extraCssText: "max-height: 300px; overflow: auto; border: none",
|
||||||
@ -156,7 +146,7 @@ function getOption() {
|
|||||||
left: 0,
|
left: 0,
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#333",
|
color: "#A9B7C6",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
@ -174,14 +164,20 @@ function getOption() {
|
|||||||
},
|
},
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
|
axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
|
||||||
axisLabel: { color: "#9da5b2", fontSize: "11" },
|
axisLabel: {
|
||||||
|
color: "#808080",
|
||||||
|
fontSize: "13",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
axisLine: { show: false },
|
axisLine: { show: false },
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } },
|
splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } },
|
||||||
axisLabel: { color: "#9da5b2", fontSize: "11" },
|
axisLabel: {
|
||||||
|
color: "#808080",
|
||||||
|
fontSize: "13",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: temp,
|
series: temp,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -117,29 +117,19 @@ function getOption() {
|
|||||||
let color: string[] = [];
|
let color: string[] = [];
|
||||||
switch (keys.length) {
|
switch (keys.length) {
|
||||||
case 2:
|
case 2:
|
||||||
color = ["#FF6A84", "#a0b1e6"];
|
color = ["#629755", "#9876AA"];
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
color = ["#3f96e3"];
|
color = ["#629755"];
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
color = [
|
color = [
|
||||||
"#30A4EB",
|
"#629755",
|
||||||
"#45BFC0",
|
"#9876AA",
|
||||||
"#FFCC55",
|
"#CC7832",
|
||||||
"#FF6A84",
|
"#8A653B",
|
||||||
"#a0a7e6",
|
"#FF0000",
|
||||||
"#c23531",
|
"#FFC66D",
|
||||||
"#2f4554",
|
|
||||||
"#61a0a8",
|
|
||||||
"#d48265",
|
|
||||||
"#91c7ae",
|
|
||||||
"#749f83",
|
|
||||||
"#ca8622",
|
|
||||||
"#bda29a",
|
|
||||||
"#6e7074",
|
|
||||||
"#546570",
|
|
||||||
"#c4ccd3",
|
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -148,7 +138,7 @@ function getOption() {
|
|||||||
backgroundColor: "rgb(50,50,50)",
|
backgroundColor: "rgb(50,50,50)",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color: "#ccc",
|
color: "#A9B7C6",
|
||||||
},
|
},
|
||||||
enterable: true,
|
enterable: true,
|
||||||
confine: true,
|
confine: true,
|
||||||
@ -178,7 +168,7 @@ function getOption() {
|
|||||||
left: 0,
|
left: 0,
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: props.theme === "dark" ? "#fff" : "#333",
|
color: "#A9B7C6",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
@ -198,7 +188,10 @@ function getOption() {
|
|||||||
},
|
},
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
|
axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
|
||||||
axisLabel: { color: "#9da5b2", fontSize: "11" },
|
axisLabel: {
|
||||||
|
color: "#808080",
|
||||||
|
fontSize: "13",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
show: props.config.showYAxis,
|
show: props.config.showYAxis,
|
||||||
@ -207,8 +200,8 @@ function getOption() {
|
|||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } },
|
splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#9da5b2",
|
color: "#808080",
|
||||||
fontSize: "11",
|
fontSize: "13",
|
||||||
show: props.config.showYAxis,
|
show: props.config.showYAxis,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user