diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-07-20 04:49:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-07-20 04:49:55 +0000 |
commit | ab1bb5b7f1c3c3a7b240ab7fc8661459ecd7decb (patch) | |
tree | 7a900833aad3ccc685712c6c2a7d87576d54f427 /web/gui/dashboard/css/dashboard.css | |
parent | Adding upstream version 1.40.1. (diff) | |
download | netdata-upstream/1.41.0.tar.xz netdata-upstream/1.41.0.zip |
Adding upstream version 1.41.0.upstream/1.41.0
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'web/gui/dashboard/css/dashboard.css')
-rw-r--r-- | web/gui/dashboard/css/dashboard.css | 785 |
1 files changed, 0 insertions, 785 deletions
diff --git a/web/gui/dashboard/css/dashboard.css b/web/gui/dashboard/css/dashboard.css deleted file mode 100644 index 2d95a331e..000000000 --- a/web/gui/dashboard/css/dashboard.css +++ /dev/null @@ -1,785 +0,0 @@ -/* 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;*/ - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-style: normal; - font-variant: normal; -} - -.morelink { - color: var(--color-attention, #765d9c); - text-decoration: none; -} - -.morelink:hover { - color: var(--color-attentionSecondary, #563d7c); - text-decoration: none; -} - -.morelink:focus { - color: var(--color-attention, #765d9c); - text-decoration: none; -} - -.netdata-chart-alignment { - /* 55 for legend-right */ - margin-left: 35px; -} - -.netdata-chart-row { - width: 100%; - text-align: center; - display: flex; - display: -webkit-flex; - display: -moz-flex; - align-items: baseline; - -moz-align-items: baseline; - -webkit-align-items: baseline; - justify-content: center; - -webkit-justify-content: center; - -moz-justify-content: center; - padding-top: 10px; -} - -.netdata-container { - display: inline-block; - overflow: hidden; - - transform: translate3d(0,0,0); - - /* required for child elements to have absolute position */ - position: relative; - - /* width and height is given per chart with data-width and data-height */ -} - -.netdata-container-gauge { - display: inline-block; - overflow: hidden; - - transform: translate3d(0,0,0); - - /* required for child elements to have absolute position */ - position: relative; - - /* width and height is given per chart with data-width and data-height */ -} - -.netdata-container-gauge:after { - padding-top: 60%; - display: block; - content: ''; -} - -.netdata-container-easypiechart { - display: inline-block; - overflow: hidden; - - transform: translate3d(0,0,0); - - /* required for child elements to have absolute position */ - position: relative; - - /* width and height is given per chart with data-width and data-height */ -} - -.netdata-container-easypiechart:after { - padding-top: 100%; - display: block; - content: ''; -} - -.netdata-aspect { - position: relative; - width: 100%; - padding: 0px; - margin: 0px; -} - -.netdata-container-with-legend { - display: inline-block; - overflow: hidden; - - transform: translate3d(0,0,0); - - /* fix minimum scrollbar issue in firefox */ - min-height: 99px; - - /* required for child elements to have absolute position */ - position: relative; - - /* 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; - bottom: 0px; - right: 0px; - height: 15px; - width: 20px; - background-color: var(--color-mainBackground, #fff); - font-size: 15px; - vertical-align: middle; - line-height: 15px; - cursor: ns-resize; - color: var(--color-selected, #CDCDCD); - text-align: center; - overflow: hidden; - padding: 0px; - margin: 0px; -} - -.netdata-legend-toolbox { - display: block; - position: absolute; - bottom: 0px; - right: 0px; - height: 15px; - width: 110px; - font-size: 12px; - vertical-align: middle; - line-height: 15px; - color: var(--color-placeholder, #DDDDDD); - text-align: center; - overflow: hidden; - padding: 0px; - margin: 0px; - - /* prevent text selection after double click */ - -webkit-user-select: none; /* webkit (safari, chrome) browsers */ - -moz-user-select: none; /* mozilla browsers */ - -khtml-user-select: none; /* webkit (konqueror) browsers */ - -ms-user-select: none; /* IE10+ */ -} - -.netdata-legend-toolbox-button { - display: inline-block; - position: relative; - height: 15px; - width: 18px; - background-color: var(--color-mainBackground, #fff); - font-size: 12px; - vertical-align: middle; - line-height: 15px; - color: var(--color-selected, #CDCDCD); - text-align: center; - overflow: hidden; - padding: 0px; - margin: 0px; - cursor: pointer; - - /* prevent text selection after double click */ - -webkit-user-select: none; /* webkit (safari, chrome) browsers */ - -moz-user-select: none; /* mozilla browsers */ - -khtml-user-select: none; /* webkit (konqueror) browsers */ - -ms-user-select: none; /* IE10+ */ -} - -.netdata-message { - display: inline-block; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - text-align: left; - vertical-align: top; - font-weight: bold; - font-size: x-small; - overflow: hidden; - background: inherit; - z-index: 0; -} - -.netdata-message.hidden { - display: none; -} - -.netdata-message.icon { - color: var(--color-borderSecondary, #F8F8F8); - text-align: center; - vertical-align: middle; -} - -.netdata-chart-legend { - position: absolute; /* within .netdata-container */ - top: 26px; - bottom: 18px; - right: 0; - overflow-x: hidden; - overflow-y: auto; - text-overflow: ellipsis; - line-height: 14px; - display: block; - width: 140px; /* --legend-width */ - font-size: 10px; - margin-top: 5px; - text-align: left; - /* width and height is calculated (depends on the appearance of the legend) */ -} - -.netdata-legend-title-date { - font-size: 10px; - font-weight: normal; - margin-top: 0px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.netdata-legend-title-time { - font-size: 11px; - font-weight: bold; - margin-top: 0px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.netdata-legend-title-units { - position: absolute; - right: 10px; - float: right; - font-size: 11px; - vertical-align: top; - font-weight: normal; - margin-top: 0px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.netdata-legend-series { - position: absolute; - width: 140px; /* legend-width */ - height: calc(100% - 50px); - overflow: hidden; - text-overflow: ellipsis; - line-height: 14.5px; /* line spacing at the legend */ - display: block; - font-size: 10px; - margin-top: 0px; -} - -.netdata-legend-name-table-line { - display: inline-block; - width: 13px; - height: 4px; - border-width: 0px; - border-bottom-width: 2px; - border-bottom-style: solid; - border-bottom-color: white; -} - -.netdata-legend-name-table-area { - display: inline-block; - width: 13px; - height: 5px; - border-width: 1px; - border-top-width: 1px; - border-top-style: solid; - border-top-color: inherit; -} - -.netdata-legend-name-table-stacked { - display: inline-block; - width: 13px; - height: 5px; - border-width: 1px; - border-top-width: 1px; - border-top-style: solid; - border-top-color: inherit; -} - -.netdata-legend-name-tr { -} - -.netdata-legend-name-td { -} - -.netdata-legend-name { - text-align: left; - font-size: 11px; /* legend: dimension name size */ - font-weight: bold; - vertical-align: bottom; - margin-top: 0px; - z-index: 9; - padding: 0px; - width: 80px !important; - max-width: 80px !important; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - display: inline-block; - cursor: pointer; - -webkit-print-color-adjust: exact; -} - -.netdata-legend-value { - /*margin-left: 14px;*/ - position: absolute; - right: 10px; - float: right; - text-align: right; - font-size: 11px; /* legend: dimension value size */ - font-weight: bold; - vertical-align: bottom; - background-color: var(--color-mainBackground, #fff); - margin-top: 0px; - z-index: 10; - padding: 0px; - padding-left: 15px; - cursor: pointer; - /* -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; -} - -.netdata-chart { - position: absolute; /* within .netdata-container */ - top: 0; /* within .netdata-container */ - left: 0; /* within .netdata-container */ - display: inline-block; - overflow: hidden; - width: 100%; - height: 100%; - z-index: 5; - - /* width and height is calculated (depends on the appearance of the legend) */ -} - -.netdata-chart-with-legend-right { - position: absolute; /* within .netdata-container */ - top: 0; /* within .netdata-container */ - left: 0; /* within .netdata-container */ - display: block; - overflow: hidden; - margin-right: 140px; /* --legend-width */ - width: calc(100% - 140px); /* --legend-width */ - height: 100%; - z-index: 5; - flex-grow: 1; - - /* 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 { - -} - -.netdata-sparkline-chart { - -} - -.netdata-dygraph-chart { - -} - -.netdata-morris-chart { - -} - -.netdata-google-chart { - -} - -.dygraph-ylabel { -} - -.dygraph-axis-label-x { - overflow-x: hidden; -} - -.dygraph-label-rotate-left { - text-align: center; - /* See http://caniuse.com/#feat=transforms2d */ - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -o-transform: rotate(90deg); - -ms-transform: rotate(90deg); -} - -/* For y2-axis label */ -.dygraph-label-rotate-right { - text-align: center; - /* See http://caniuse.com/#feat=transforms2d */ - transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); -} - -.dygraph-title { - /* 56 for legend-right */ - text-indent: 36px; - text-align: left; - position: absolute; - left: 0px; - top: 4px; - font-size: 11px; - font-weight: bold; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -/* fix for sparkline tooltip under bootstrap */ -.jqstooltip { - width: auto !important; - height: auto !important; -} - -.easyPieChart { - position: relative; - text-align: center; -} - -.easyPieChart canvas { - position: absolute; - top: 0; - left: 0; -} - -.easyPieChartLabel { - display: inline-block; - position: absolute; - float: left; - left: 0; - width: 100%; - text-align: center; - color: var(--color-main); - font-weight: normal; - text-shadow: var(--color-elementBackground, #BBB) 0px 0px 1px; - /* -webkit-font-smoothing: none; */ -} - -.easyPieChartTitle { - display: inline-block; - position: absolute; - float: left; - left: 0; - width: 64%; - margin-left: 18% !important; - text-align: center; - color: var(--color-border, #999999); - font-weight: bold; -} - -.easyPieChartUnits { - display: inline-block; - position: absolute; - float: left; - left: 0; - width: 60%; - margin-left: 20% !important; - text-align: center; - color: var(--color-border, #999999); - font-weight: normal; -} - -.gaugeChart { - position: relative; - text-align: center; -} - -.gaugeChart canvas { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 0; -} - -.gaugeChartLabel { - display: inline-block; - position: absolute; - float: left; - left: 0; - width: 100%; - text-align: center; - color: var(--color-main); - font-weight: bold; - z-index: 1; - 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; */ -} - -.gaugeChartTitle { - display: inline-block; - position: absolute; - float: left; - left: 0; - width: 100%; - text-align: center; - color: var(--color-border, #999999); - font-weight: bold; -} - -.gaugeChartUnits { - display: inline-block; - position: absolute; - float: left; - left: 0; - bottom: 0; - width: 100%; - text-align: left; - margin-left: 5%; - color: var(--color-border, #999999); - font-weight: normal; -} - -.gaugeChartMin { - display: inline-block; - position: absolute; - float: left; - left: 0; - bottom: 8%; - width: 92%; - margin-left: 8%; - text-align: left; - color: var(--color-main); - font-weight: normal; -} - -.gaugeChartMax { - display: inline-block; - position: absolute; - float: left; - left: 0; - bottom: 8%; - width: 95%; - margin-right: 5%; - text-align: right; - color: var(--color-main); - font-weight: normal; -} - -.popover-title { - font-weight: bold; - font-size: 12px; -} - -.popover-content { - font-size: 11px; -} - -/* ---------------------------------------------------------------------------- - perfect-scrollbar settings - */ - -.ps-container { - -ms-touch-action: auto; - touch-action: auto; - overflow: hidden !important; - -ms-overflow-style: none; -} - -@supports (-ms-overflow-style: none) { - .ps-container { - overflow: auto !important; - } -} - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .ps-container { - overflow: auto !important; - } -} - -.ps-container.ps-active-x > .ps-scrollbar-x-rail, -.ps-container.ps-active-y > .ps-scrollbar-y-rail { - display: block; - background-color: transparent; -} - -.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { - background-color: transparent; /* background color when dragged away */ - opacity: 0.9; -} - -.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { - background-color: #aaa; /* scrollbar color when dragged away */ - height: 5px; -} - -.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { - background-color: transparent; /* background color when dragged away */ - opacity: 0.9; -} - -.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { - background-color: #aaa; /* scrollbar color when dragged away */ - width: 5px; -} - -.ps-container > .ps-scrollbar-x-rail { - display: none; - position: absolute; - /* please don't change 'position' */ - opacity: 0.2; /* the opacity when not on hover of the content */ - -webkit-transition: background-color .2s linear, opacity .2s linear; - -o-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; - bottom: 0px; - /* there must be 'bottom' for ps-scrollbar-x-rail */ - height: 15px; -} - -.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { - position: absolute; - /* please don't change 'position' */ - background-color: var(--color-elementBackground, #666); /* #aaa; the color on content hover */ - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; - -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; - -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; - bottom: 2px; - /* there must be 'bottom' for ps-scrollbar-x */ - height: 5px; /* the width of the scrollbar */ -} - -.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x { - height: 4px; -} - -.ps-container > .ps-scrollbar-y-rail { - display: none; - position: absolute; - /* please don't change 'position' */ - opacity: 0.2; /* the opacity when not on hover of the content */ - -webkit-transition: background-color .2s linear, opacity .2s linear; - -o-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; - right: 0; - /* there must be 'right' for ps-scrollbar-y-rail */ - width: 15px; -} - -.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { - position: absolute; - /* please don't change 'position' */ - background-color: var(--color-elementBackground, #666); /* #aaa; the color on content hover */ - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; - -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; - -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; - right: 2px; - /* there must be 'right' for ps-scrollbar-y */ - width: 5px; /* the width of the scrollbar */ -} - -.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y { - width: 5px; -} - -.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { - background-color: transparent; /* background color when dragged */ - opacity: 0.9; -} - -.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { - background-color: #bbb; /* scrollbar color when dragged */ - height: 5px; -} - -.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { - background-color: transparent; /* background color when dragged */ - opacity: 0.9; -} - -.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { - background-color: #bbb; /* scrollbar color when dragged */ - width: 5px; -} - -.ps-container:hover > .ps-scrollbar-x-rail, -.ps-container:hover > .ps-scrollbar-y-rail { - opacity: 0.6; -} - -.ps-container:hover > .ps-scrollbar-x-rail:hover { - background-color: transparent; /* the background color on hover of the scrollbar */ - opacity: 0.9; -} - -.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { - background-color: #999; /* scrollbar color on hover */ -} - -.ps-container:hover > .ps-scrollbar-y-rail:hover { - background-color: transparent; /* the background color on hover of the scrollbar */ - opacity: 0.9; -} - -.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { - background-color: #999; /* scrollbar color on hover */ -} - -.dygraph__history-tip { - position: absolute; - transform: translateY(-50%); - display: none; /* overridden in js */ - margin-right: 25px; - direction: rtl; - overflow: hidden; - pointer-events: none; -} - -.dygraph__history-tip-content { - display: inline-block; - white-space: nowrap; - direction: ltr; - pointer-events: auto; -} |