diff options
author | Lennart Weller <lhw@ring0.de> | 2017-01-24 15:21:09 +0000 |
---|---|---|
committer | Lennart Weller <lhw@ring0.de> | 2017-01-24 15:21:09 +0000 |
commit | 3ed3b02ed96ddab1c084811f3579b3a2aec83e04 (patch) | |
tree | 7a61ab288ae47800c4f11be5677d6ad8288dcd98 /web/dashboard.css | |
parent | New upstream version 1.4.0+dfsg (diff) | |
download | netdata-3ed3b02ed96ddab1c084811f3579b3a2aec83e04.tar.xz netdata-3ed3b02ed96ddab1c084811f3579b3a2aec83e04.zip |
New upstream version 1.5.0+dfsgupstream/1.5.0+dfsg
Diffstat (limited to 'web/dashboard.css')
-rw-r--r-- | web/dashboard.css | 884 |
1 files changed, 504 insertions, 380 deletions
diff --git a/web/dashboard.css b/web/dashboard.css index ee806ba47..8eeaa8bec 100644 --- a/web/dashboard.css +++ b/web/dashboard.css @@ -1,347 +1,306 @@ 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; + /*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: #765d9c; - text-decoration: none; + color: #765d9c; + text-decoration: none; } + .morelink:hover { - color: #563d7c; - text-decoration: none; + color: #563d7c; + text-decoration: none; } + .morelink:focus { - color: #765d9c; - text-decoration: none; + color: #765d9c; + text-decoration: none; } .netdata-chart-alignment { - margin-left: 55px; + margin-left: 55px; } .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; + 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; } .netdata-container { - display: inline-block; - overflow: hidden; + display: inline-block; + overflow: hidden; - /* required for child elements to have absolute position */ - position: relative; - - /* width and height is given per chart with data-width and data-height */ + /* required for child elements to have absolute position */ + position: relative; + + /* width and height is given per chart with data-width and data-height */ } .netdata-aspect { - position: relative; - width: 100%; - padding: 0px; - margin: 0px; + position: relative; + width: 100%; + padding: 0px; + margin: 0px; } .netdata-container-with-legend { - display: inline-block; - overflow: hidden; + display: inline-block; + overflow: hidden; + + /* fix minimum scrollbar issue in firefox */ + min-height: 99px; - /* fix minimum scrollbar issue in firefox */ - min-height: 99px; + /* required for child elements to have absolute position */ + position: relative; - /* required for child elements to have absolute position */ - position: relative; - - /* width and height is given per chart with data-width and data-height */ + /* width and height is given per chart with data-width and data-height */ } .netdata-legend-resize-handler { - display: block; - position: absolute; - bottom: 0px; - right: 0px; - height: 15px; - width: 30px; - background-color: White; - font-size: 12px; - vertical-align: middle; - line-height: 15px; - cursor: ns-resize; - color: #DDDDDD; - text-align: center; - overflow: hidden; - z-index: 20; - padding: 0px; - margin: 0px; + display: block; + position: absolute; + bottom: 0px; + right: 0px; + height: 15px; + width: 30px; + background-color: White; + font-size: 12px; + vertical-align: middle; + line-height: 15px; + cursor: ns-resize; + color: #DDDDDD; + text-align: center; + overflow: hidden; + z-index: 20; + padding: 0px; + 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; + 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; + 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; - vertical-align: top; - font-weight: bold; - font-size: x-small; - width: 100%; - height: 100%; - overflow: hidden; - background: inherit; - z-index: 0; + display: inline-block; + text-align: left; + vertical-align: top; + font-weight: bold; + font-size: x-small; + width: 100%; + height: 100%; + overflow: hidden; + background: inherit; + z-index: 0; } .netdata-message.hidden { - display: none; + display: none; } .netdata-message.icon { - color: #F8F8F8; - text-align: center; - vertical-align: middle; + color: #F8F8F8; + text-align: center; + vertical-align: middle; } .netdata-chart-legend { - position: absolute; /* within .netdata-container */ - top: 0; - right: 0; - background-color: white; - overflow: hidden; - 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; - /* width and height is calculated (depends on the appearance of the legend) */ + position: absolute; /* within .netdata-container */ + top: 0; + right: 0; + overflow: hidden; + 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; + /* 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; + font-size: 10px; + font-weight: normal; + margin-top: 0px; } + .netdata-legend-title-time { - font-size: 11px; - font-weight: bold; - margin-top: 0px; + font-size: 11px; + font-weight: bold; + margin-top: 0px; } + .netdata-legend-title-units { - position: absolute; - right: 5px; - float: right; - font-size: 10px; - vertical-align: top; - font-weight: normal; - margin-top: 0px; + position: absolute; + right: 10px; + float: right; + font-size: 11px; + vertical-align: top; + font-weight: normal; + margin-top: 0px; } + .netdata-legend-series { - position: absolute; - width: 140px; /* --legend-width */ - height: calc(100% - 50px); - overflow: hidden; - text-overflow: ellipsis; - line-height: 14px; - display: block; - font-size: 10px; - margin-top: 0px; -} - -.netdata-legend-series > .netdata-legend-series-content { - position : absolute; - overflow : scroll; - overflow-x : hidden; - top : 0; - right : 0; - bottom : 0; - left : 0; - text-overflow: ellipsis; -} -.netdata-legend-series > .netdata-legend-series-content:focus { - outline: thin dotted; -} -.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar { - display: block; /* was 'none', but chrome was hiding content with it */ -} -.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar { - display: block; -} -.netdata-legend-series > .netdata-legend-series-pane { -/* background : rgba(0,0,0,.25);*/ - background : #DDD; - position : absolute; - width : 4px; - right : 0; - top : 0; - bottom : 0; -/* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */ -/* opacity : .01; */ -/* -webkit-transition : .2s; */ -/* -moz-transition : .2s; */ -/* -o-transition : .2s; */ -/* transition : .2s; */ - -moz-border-radius : 4px; - -webkit-border-radius : 4px; - border-radius : 4px; -} -.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider { - background : #444; -/* background : rgba(0,0,0,.5);*/ - position : relative; - margin : 0 1px; - -moz-border-radius : 2px; - -webkit-border-radius : 2px; - border-radius : 2px; -} -.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed { -/* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */ -/* opacity : 0.99;*/ + 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; + 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; + 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; + 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: 10px; - 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; + 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; } .netdata-legend-value { - /*margin-left: 14px;*/ - position: absolute; - right: 5px; - float: right; - text-align: right; - font-size: 10px; - font-weight: bold; - vertical-align: bottom; - background-color: White; - margin-top: 0px; - z-index: 10; - padding: 0px; - padding-left: 15px; - cursor: pointer; - /* -webkit-font-smoothing: none; */ + /*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: White; + margin-top: 0px; + z-index: 10; + padding: 0px; + padding-left: 15px; + cursor: pointer; + /* -webkit-font-smoothing: none; */ } + .netdata-legend-name.not-selected { - font-weight: normal; - opacity: 0.3; + 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; + 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) */ + /* 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; + 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) */ + /* width and height is calculated (depends on the appearance of the legend) */ } .netdata-peity-chart { @@ -368,175 +327,340 @@ body { } .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); + 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); + 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 { - text-indent: 56px; - text-align: left; - position: absolute; - left: 0px; - top: 4px; - font-size: 11px; - font-weight: bold; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + text-indent: 56px; + 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; + width: auto !important; + height: auto !important; } .easyPieChart { - position: relative; - text-align: center; + position: relative; + text-align: center; } .easyPieChart canvas { - position: absolute; - top: 0; - left: 0; + position: absolute; + top: 0; + left: 0; } .easyPieChartLabel { - display: inline-block; - position: absolute; - float: left; - left: 0; - width: 100%; - text-align: center; - color: #666; - font-weight: normal; - text-shadow: #BBB 0px 0px 1px; - /* -webkit-font-smoothing: none; */ + display: inline-block; + position: absolute; + float: left; + left: 0; + width: 100%; + text-align: center; + 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; - color: #999999; - font-weight: normal; + display: inline-block; + position: absolute; + float: left; + left: 0; + width: 64%; + margin-left: 18%; + text-align: center; + color: #999999; + font-weight: normal; } .easyPieChartUnits { - display: inline-block; - position: absolute; - float: left; - left: 0; - width: 60%; - margin-left: 20%; - text-align: center; - color: #999999; - font-weight: normal; + 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; + position: relative; + text-align: center; } .gaugeChart canvas { - position: absolute; - top: 0; - left: 0; - z-index: 0; + 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; */ + 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; + 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; + 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; + 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; + 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; + font-weight: bold; + font-size: 12px; } + .popover-content { - font-size: 11px; + 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: #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: #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 */ } |