diff options
Diffstat (limited to '')
-rw-r--r-- | web/gui/dashboard/css/dashboard.css (renamed from web/gui/dashboard.css) | 92 |
1 files changed, 60 insertions, 32 deletions
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; |