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 | |
parent | Adding upstream version 1.30.1. (diff) | |
download | netdata-upstream/1.31.0.tar.xz netdata-upstream/1.31.0.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/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; } |