summaryrefslogtreecommitdiffstats
path: root/web/gui/dashboard/css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--web/gui/dashboard/css/bootstrap-3.3.7.css (renamed from web/gui/css/bootstrap-3.3.7.css)12
-rw-r--r--web/gui/dashboard/css/bootstrap-slate-flat-3.3.7.css (renamed from web/gui/css/bootstrap-slate-flat-3.3.7.css)0
-rw-r--r--web/gui/dashboard/css/bootstrap-slider-10.0.0.min.css (renamed from web/gui/css/bootstrap-slider-10.0.0.min.css)0
-rw-r--r--web/gui/dashboard/css/bootstrap-theme-3.3.7.min.css (renamed from web/gui/css/bootstrap-theme-3.3.7.min.css)0
-rw-r--r--web/gui/dashboard/css/bootstrap-toggle-2.2.2.min.css (renamed from web/gui/css/bootstrap-toggle-2.2.2.min.css)0
-rw-r--r--web/gui/dashboard/css/dashboard.css (renamed from web/gui/dashboard.css)92
-rw-r--r--web/gui/dashboard/css/dashboard.slate.css (renamed from web/gui/dashboard.slate.css)60
7 files changed, 111 insertions, 53 deletions
diff --git a/web/gui/css/bootstrap-3.3.7.css b/web/gui/dashboard/css/bootstrap-3.3.7.css
index 8c4db1f33..55fa2acba 100644
--- a/web/gui/css/bootstrap-3.3.7.css
+++ b/web/gui/dashboard/css/bootstrap-3.3.7.css
@@ -265,7 +265,9 @@ th {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
- src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+ /* removed svg font, because 1) it's incompatible with current cloud webpack loaders */
+ /* 2) our supported browsers don't need svg anyway */
+ src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
}
.glyphicon {
position: relative;
@@ -1086,8 +1088,8 @@ body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
- color: #333;
- background-color: #fff;
+ color: var(--color-text, #333);
+ background-color: var(--color-mainBackground, #fff);
}
input,
button,
@@ -1134,8 +1136,8 @@ img {
height: auto;
padding: 4px;
line-height: 1.42857143;
- background-color: #fff;
- border: 1px solid #ddd;
+ background-color: var(--color-mainBackground, #fff);
+ border: 1px solid var(--color-border, #ddd);
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
diff --git a/web/gui/css/bootstrap-slate-flat-3.3.7.css b/web/gui/dashboard/css/bootstrap-slate-flat-3.3.7.css
index 7ce384f81..7ce384f81 100644
--- a/web/gui/css/bootstrap-slate-flat-3.3.7.css
+++ b/web/gui/dashboard/css/bootstrap-slate-flat-3.3.7.css
diff --git a/web/gui/css/bootstrap-slider-10.0.0.min.css b/web/gui/dashboard/css/bootstrap-slider-10.0.0.min.css
index 095be9514..095be9514 100644
--- a/web/gui/css/bootstrap-slider-10.0.0.min.css
+++ b/web/gui/dashboard/css/bootstrap-slider-10.0.0.min.css
diff --git a/web/gui/css/bootstrap-theme-3.3.7.min.css b/web/gui/dashboard/css/bootstrap-theme-3.3.7.min.css
index ba77cff5d..ba77cff5d 100644
--- a/web/gui/css/bootstrap-theme-3.3.7.min.css
+++ b/web/gui/dashboard/css/bootstrap-theme-3.3.7.min.css
diff --git a/web/gui/css/bootstrap-toggle-2.2.2.min.css b/web/gui/dashboard/css/bootstrap-toggle-2.2.2.min.css
index a3daa3721..a3daa3721 100644
--- a/web/gui/css/bootstrap-toggle-2.2.2.min.css
+++ b/web/gui/dashboard/css/bootstrap-toggle-2.2.2.min.css
diff --git a/web/gui/dashboard.css b/web/gui/dashboard/css/dashboard.css
index 674131a1d..035263268 100644
--- a/web/gui/dashboard.css
+++ b/web/gui/dashboard/css/dashboard.css
@@ -1,4 +1,10 @@
/* SPDX-License-Identfier: GPL-3.0-or-later */
+:root {
+ --color-main: #35414A;
+ --color-primary: #00ab44;
+ --color-border: #93a3b0;
+}
+
html,
body {
/*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
@@ -8,22 +14,23 @@ body {
}
.morelink {
- color: #765d9c;
+ color: var(--color-attention, #765d9c);
text-decoration: none;
}
.morelink:hover {
- color: #563d7c;
+ color: var(--color-attentionSecondary, #563d7c);
text-decoration: none;
}
.morelink:focus {
- color: #765d9c;
+ color: var(--color-attention, #765d9c);
text-decoration: none;
}
.netdata-chart-alignment {
- margin-left: 55px;
+ /* 55 for legend-right */
+ margin-left: 35px;
}
.netdata-chart-row {
@@ -111,6 +118,11 @@ body {
/* 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;
@@ -118,15 +130,14 @@ body {
right: 0px;
height: 15px;
width: 20px;
- background-color: White;
+ background-color: var(--color-mainBackground, #fff);
font-size: 15px;
vertical-align: middle;
line-height: 15px;
cursor: ns-resize;
- color: #DDDDDD;
+ color: var(--color-selected, #CDCDCD);
text-align: center;
overflow: hidden;
- z-index: 20;
padding: 0px;
margin: 0px;
}
@@ -138,14 +149,12 @@ body {
right: 30px;
height: 15px;
width: 110px;
- background-color: White;
font-size: 12px;
vertical-align: middle;
line-height: 15px;
- color: #DDDDDD;
+ color: var(--color-placeholder, #DDDDDD);
text-align: center;
overflow: hidden;
- z-index: 20;
padding: 0px;
margin: 0px;
@@ -161,14 +170,13 @@ body {
position: relative;
height: 15px;
width: 18px;
- background-color: White;
+ background-color: var(--color-mainBackground, #fff);
font-size: 12px;
vertical-align: middle;
line-height: 15px;
- color: #CDCDCD;
+ color: var(--color-selected, #CDCDCD);
text-align: center;
overflow: hidden;
- z-index: 21;
padding: 0px;
margin: 0px;
cursor: pointer;
@@ -201,21 +209,22 @@ body {
}
.netdata-message.icon {
- color: #F8F8F8;
+ color: var(--color-borderSecondary, #F8F8F8);
text-align: center;
vertical-align: middle;
}
.netdata-chart-legend {
position: absolute; /* within .netdata-container */
- top: 0;
+ top: 26px;
+ bottom: 18px;
right: 0;
- overflow: hidden;
+ overflow-x: hidden;
+ overflow-y: auto;
text-overflow: ellipsis;
line-height: 14px;
display: block;
width: 140px; /* --legend-width */
- height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
font-size: 10px;
margin-top: 5px;
text-align: left;
@@ -328,7 +337,7 @@ body {
font-size: 11px; /* legend: dimension value size */
font-weight: bold;
vertical-align: bottom;
- background-color: White;
+ background-color: var(--color-mainBackground, #fff);
margin-top: 0px;
z-index: 10;
padding: 0px;
@@ -337,6 +346,19 @@ body {
/* -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;
@@ -370,6 +392,12 @@ body {
/* 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 {
}
@@ -419,7 +447,8 @@ body {
}
.dygraph-title {
- text-indent: 56px;
+ /* 56 for legend-right */
+ text-indent: 36px;
text-align: left;
position: absolute;
left: 0px;
@@ -455,9 +484,9 @@ body {
left: 0;
width: 100%;
text-align: center;
- color: #666;
+ color: var(--color-main);
font-weight: normal;
- text-shadow: #BBB 0px 0px 1px;
+ text-shadow: var(--color-elementBackground, #BBB) 0px 0px 1px;
/* -webkit-font-smoothing: none; */
}
@@ -469,7 +498,7 @@ body {
width: 64%;
margin-left: 18% !important;
text-align: center;
- color: #999999;
+ color: var(--color-border, #999999);
font-weight: bold;
}
@@ -481,7 +510,7 @@ body {
width: 60%;
margin-left: 20% !important;
text-align: center;
- color: #999999;
+ color: var(--color-border, #999999);
font-weight: normal;
}
@@ -506,10 +535,10 @@ body {
left: 0;
width: 100%;
text-align: center;
- color: #FFFFFF;
+ color: var(--color-main);
font-weight: bold;
z-index: 1;
- text-shadow: #777 0px 0px 1px;
+ text-shadow: var(--color-elementBackground, #777) 0px 0px 1px;
/* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
/* -webkit-text-stroke: 1px #777; */
/* -webkit-font-smoothing: none; */
@@ -522,7 +551,7 @@ body {
left: 0;
width: 100%;
text-align: center;
- color: #999999;
+ color: var(--color-border, #999999);
font-weight: bold;
}
@@ -535,7 +564,7 @@ body {
width: 100%;
text-align: left;
margin-left: 5%;
- color: #999999;
+ color: var(--color-border, #999999);
font-weight: normal;
}
@@ -548,7 +577,7 @@ body {
width: 92%;
margin-left: 8%;
text-align: left;
- color: #999999;
+ color: var(--color-main);
font-weight: normal;
}
@@ -561,7 +590,7 @@ body {
width: 95%;
margin-right: 5%;
text-align: right;
- color: #999999;
+ color: var(--color-main);
font-weight: normal;
}
@@ -640,7 +669,7 @@ body {
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
position: absolute;
/* please don't change 'position' */
- background-color: #666; /* #aaa; the color on content hover */
+ background-color: var(--color-elementBackground, #666); /* #aaa; the color on content hover */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
@@ -676,7 +705,7 @@ body {
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
position: absolute;
/* please don't change 'position' */
- background-color: #666; /* #aaa; the color on content hover */
+ background-color: var(--color-elementBackground, #666); /* #aaa; the color on content hover */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
@@ -740,7 +769,6 @@ body {
.dygraph__history-tip {
position: absolute;
- top: 50%;
transform: translateY(-50%);
display: none; /* overriden in js */
margin-right: 25px;
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;
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-04 11:33:06 +0000