Merge pull request #186 from glensc/rpmspec

[netdata.git] / web / dashboard.css

diff --git a/web/dashboard.css b/web/dashboard.css
old mode 100755 (executable)
new mode 100644 (file)
index 98c877f..a7b090d
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -1,5 +1,9 @@
-html {
-    font-family: sans-serif;
+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;
 }
 
 .netdata-chart-alignment {
@@ -19,6 +23,13 @@ html {
        /* width and height is given per chart with data-width and data-height */
 }
 
+.netdata-aspect {
+       position: relative;
+       width: 100%;
+       padding: 0px;
+       margin: 0px;
+}
+
 .netdata-container-with-legend {
        display: -webkit-flex; /* Safari */
        -webkit-flex-wrap: wrap; /* Safari 6.1+ */
@@ -55,6 +66,43 @@ html {
        margin: 0px;
 }
 
+.netdata-legend-toolbox {
+       display: block;
+       position: absolute;
+       bottom: 0px;
+       right: 30px;
+       height: 15px;
+       width: 110px;
+       background-color: White;
+       font-size: 12px;
+       vertical-align: middle;
+       line-height: 15px;
+       color: #DDDDDD;
+       text-align: center;
+       overflow: hidden;
+       z-index: 20;
+       padding: 0px;
+       margin: 0px;
+}
+
+.netdata-legend-toolbox-button {
+       display: inline-block;
+       position: relative;
+       height: 15px;
+       width: 18px;
+       background-color: White;
+       font-size: 12px;
+       vertical-align: middle;
+       line-height: 15px;
+       color: #CDCDCD;
+       text-align: center;
+       overflow: hidden;
+       z-index: 21;
+       padding: 0px;
+       margin: 0px;
+       cursor: pointer;
+}
+
 .netdata-message {
        display: inline-block;
        text-align: left;
@@ -91,6 +139,7 @@ html {
        height: calc(100% - 15px);      /* 10px for the resize handler and 5px for the top margin */
        font-size: 10px;
        margin-top: 5px;
+       text-align: left;
        /* width and height is calculated (depends on the appearance of the legend) */
 }
 
@@ -239,6 +288,7 @@ html {
        padding: 0px;
        padding-left: 15px;
        cursor: pointer;
+       /* -webkit-font-smoothing: none; */
 }
 .netdata-legend-name.not-selected {
        font-weight: normal;
@@ -330,16 +380,20 @@ html {
        display: inline-block;
        position: absolute;
        float: left;
+       left: 0;
        width: 100%;
        text-align: center;
-       color: #333333;
+       color: #666;
        font-weight: normal;
+       text-shadow: #BBB 0px 0px 1px;
+       /* -webkit-font-smoothing: none; */
 }
 
 .easyPieChartTitle {
        display: inline-block;
        position: absolute;
        float: left;
+       left: 0;
        width: 64%;
        margin-left: 18%;
        text-align: center;
@@ -351,9 +405,96 @@ html {
        display: inline-block;
        position: absolute;
        float: left;
+       left: 0;
        width: 60%;
        margin-left: 20%;
        text-align: center;
        color: #999999;
        font-weight: normal;
 }
+
+.gaugeChart {
+       position: relative;
+       text-align: center;
+}
+
+.gaugeChart canvas {
+       position: absolute;
+       top: 0;
+       left: 0;
+       z-index: 0;
+}
+
+.gaugeChartLabel {
+       display: inline-block;
+       position: absolute;
+       float: left;
+       left: 0;
+       width: 100%;
+       text-align: center;
+       color: #FFFFFF;
+       font-weight: bold;
+       z-index: 1;
+       text-shadow: #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: #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: #999999;
+       font-weight: normal;
+}
+
+.gaugeChartMin {
+       display: inline-block;
+       position: absolute;
+       float: left;
+       left: 0;
+       bottom: 10%;
+       width: 92%;
+       margin-left: 8%;
+       text-align: left;
+       color: #999999;
+       font-weight: normal;
+}
+
+.gaugeChartMax {
+       display: inline-block;
+       position: absolute;
+       float: left;
+       left: 0;
+       bottom: 10%;
+       width: 95%;
+       margin-right: 5%;
+       text-align: right;
+       color: #999999;
+       font-weight: normal;
+}
+
+.popover-title {
+       font-weight: bold;
+       font-size: 12px;
+}
+.popover-content {
+       font-size: 11px;
+}