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;
 }