diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2021-05-19 12:33:27 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2021-05-19 12:33:27 +0000 |
commit | 841395dd16f470e3c051a0a4fff5b91efc983c30 (patch) | |
tree | 4115f6eedcddda75067130b80acaff9e51612f49 /web/gui/dashboard/css/dashboard.slate.css | |
parent | Adding upstream version 1.30.1. (diff) | |
download | netdata-841395dd16f470e3c051a0a4fff5b91efc983c30.tar.xz netdata-841395dd16f470e3c051a0a4fff5b91efc983c30.zip |
Adding upstream version 1.31.0.upstream/1.31.0
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | web/gui/dashboard/css/dashboard.slate.css (renamed from web/gui/dashboard.slate.css) | 60 |
1 files changed, 44 insertions, 16 deletions
diff --git a/web/gui/dashboard.slate.css b/web/gui/dashboard/css/dashboard.slate.css index af3382521..b3c65d38a 100644 --- a/web/gui/dashboard.slate.css +++ b/web/gui/dashboard/css/dashboard.slate.css @@ -1,4 +1,10 @@ /* SPDX-License-Identifier: GPL-3.0-or-later */ +:root { + --color-main: #FFFFFF; + --color-primary: #00ab44; + --color-border: #878b90; +} + html, body { /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/ @@ -37,7 +43,8 @@ code { } .netdata-chart-alignment { - margin-left: 55px; + /* 55 for legend-right */ + margin-left: 35px; } .netdata-chart-row { @@ -125,6 +132,11 @@ code { /* width and height is given per chart with data-width and data-height */ } +.netdata-container-with-legend.netdata-container-with-legend--bottom { + display: flex; + flex-direction: column; +} + .netdata-legend-resize-handler { display: block; position: absolute; @@ -137,10 +149,9 @@ code { vertical-align: middle; line-height: 15px; cursor: ns-resize; - color: #373b40; + color: var(--color-selected, #373b40); text-align: center; overflow: hidden; - z-index: 20; padding: 0px; margin: 0px; } @@ -152,14 +163,12 @@ code { right: 30px; height: 15px; width: 110px; - background-color: #272b30; font-size: 12px; vertical-align: middle; line-height: 15px; color: #373b40; text-align: center; overflow: hidden; - z-index: 20; padding: 0px; margin: 0px; @@ -179,10 +188,9 @@ code { font-size: 12px; vertical-align: middle; line-height: 15px; - color: #474b50; + color: var(--color-selected, #373b40); text-align: center; overflow: hidden; - z-index: 21; padding: 0px; margin: 0px; cursor: pointer; @@ -351,6 +359,19 @@ code { /* -webkit-font-smoothing: none; */ } +.netdata-legend-value, .netdata-legend-name { + /* prevent highlight when shift-clicking */ + -webkit-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + user-select: none; +} + +/* eslint recommends adding tabIndex for a11y, but the outline is showing on click */ +.netdata-legend-name:focus, .netdata-legend-value:focus { + outline: none; +} + .netdata-legend-name.not-selected { font-weight: normal; opacity: 0.3; @@ -384,6 +405,12 @@ code { /* width and height is calculated (depends on the appearance of the legend) */ } +.netdata-chart-with-legend-bottom { + display: block; + overflow: hidden; + flex-grow: 1; +} + .netdata-peity-chart { } @@ -437,7 +464,8 @@ code { } .dygraph-title { - text-indent: 56px; + /* 56 for legend-right */ + text-indent: 36px; text-align: left; position: absolute; left: 0px; @@ -473,7 +501,7 @@ code { left: 0; width: 100%; text-align: center; - color: #BBB; + color: var(--color-main); font-weight: normal; text-shadow: #272b30 0px 0px 1px; /* -webkit-font-smoothing: none; */ @@ -487,7 +515,7 @@ code { width: 64%; margin-left: 18% !important; text-align: center; - color: #676b70; + color: var(--color-border,#676b70); font-weight: bold; } @@ -499,7 +527,7 @@ code { width: 60%; margin-left: 20% !important; text-align: center; - color: #676b70; + color:var(--color-border,#676b70); font-weight: normal; } @@ -524,7 +552,7 @@ code { left: 0; width: 100%; text-align: center; - color: #BBB; + color: var(--color-main); font-weight: bold; z-index: 1; text-shadow: #272b30 0px 0px 1px; @@ -540,7 +568,7 @@ code { left: 0; width: 100%; text-align: center; - color: #676b70; + color: var(--color-border, #676b70); font-weight: bold; } @@ -553,7 +581,7 @@ code { width: 100%; text-align: left; margin-left: 5%; - color: #676b70; + color: var(--color-border,#676b70); font-weight: normal; } @@ -566,7 +594,7 @@ code { width: 92%; margin-left: 8%; text-align: left; - color: #676b70; + color: var(--color-main); font-weight: normal; } @@ -579,7 +607,7 @@ code { width: 95%; margin-right: 5%; text-align: right; - color: #676b70; + color: var(--color-main); font-weight: normal; } |