replaced nanoScroller with perfect-scrollbar to fix issues with 4K resolutions and firefox
Costa Tsaousis (ktsaou) committed
Dec 29, 2016 at 01:10 UTC
34373625297b63c959d9e966ccd1ca396a3d657c
16 files changed
+1094
-816
LICENSE.md
+3
-3
@@ -73,10 +73,10 @@ connectivity is not available.
73
[MIT License](http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js)
74
75
76
-- [NanoScroller](https://jamesflorentino.github.io/nanoScrollerJS/)
76
+- [perfect-scrollbar](https://jamesflorentino.github.io/nanoScrollerJS/)
77
78
- Copyright 2012, James Florentino
79
- [MIT License](https://github.com/jamesflorentino/nanoScrollerJS/blob/master/LICENSE)
78
+ Copyright 2016, Hyunje Alex Jun and other contributors
79
+ [MIT License](https://github.com/noraesae/perfect-scrollbar/blob/master/LICENSE)
80
81
82
- [FontAwesome](https://fortawesome.github.io/Font-Awesome/)
web/Makefile.am
+1
-1
@@ -46,7 +46,7 @@ dist_weblib_DATA = \
46
lib/gauge-d5260c3.min.js \
47
lib/jquery-2.2.4.min.js \
48
lib/jquery.easypiechart-97b5824.min.js \
49
- lib/jquery.nanoscroller-0.8.7.min.js \
49
+ lib/perfect-scrollbar-0.6.15.min.js \
50
lib/jquery.peity-3.2.0.min.js \
51
lib/jquery.sparkline-2.1.2.min.js \
52
lib/morris-0.5.1.min.js \
web/dashboard.css
+504
-380
@@ -1,347 +1,306 @@
1
html,
2
body {
3
- /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
4
- font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
5
- font-style: normal;
6
- font-variant: normal;
3
+ /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
4
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
5
+ font-style: normal;
6
+ font-variant: normal;
7
}
8
9
.morelink {
10
- color: #765d9c;
11
- text-decoration: none;
10
+ color: #765d9c;
11
+ text-decoration: none;
12
}
13
+
14
.morelink:hover {
14
- color: #563d7c;
15
- text-decoration: none;
15
+ color: #563d7c;
16
+ text-decoration: none;
17
}
18
+
19
.morelink:focus {
18
- color: #765d9c;
19
- text-decoration: none;
20
+ color: #765d9c;
21
+ text-decoration: none;
22
}
23
24
.netdata-chart-alignment {
23
- margin-left: 55px;
25
+ margin-left: 55px;
26
}
27
28
.netdata-chart-row {
27
- width: 100%;
28
- text-align: center;
29
- display: flex;
30
- display: -webkit-flex;
31
- display: -moz-flex;
32
- align-items: baseline;
33
- -moz-align-items: baseline;
34
- -webkit-align-items: baseline;
35
- justify-content: center;
36
- -webkit-justify-content: center;
37
- -moz-justify-content: center;
29
+ width: 100%;
30
+ text-align: center;
31
+ display: flex;
32
+ display: -webkit-flex;
33
+ display: -moz-flex;
34
+ align-items: baseline;
35
+ -moz-align-items: baseline;
36
+ -webkit-align-items: baseline;
37
+ justify-content: center;
38
+ -webkit-justify-content: center;
39
+ -moz-justify-content: center;
40
}
41
42
.netdata-container {
41
- display: inline-block;
42
- overflow: hidden;
43
+ display: inline-block;
44
+ overflow: hidden;
45
44
- /* required for child elements to have absolute position */
45
- position: relative;
46
-
47
- /* width and height is given per chart with data-width and data-height */
46
+ /* required for child elements to have absolute position */
47
+ position: relative;
48
+
49
+ /* width and height is given per chart with data-width and data-height */
50
}
51
52
.netdata-aspect {
51
- position: relative;
52
- width: 100%;
53
- padding: 0px;
54
- margin: 0px;
53
+ position: relative;
54
+ width: 100%;
55
+ padding: 0px;
56
+ margin: 0px;
57
}
58
59
.netdata-container-with-legend {
58
- display: inline-block;
59
- overflow: hidden;
60
+ display: inline-block;
61
+ overflow: hidden;
62
+
63
+ /* fix minimum scrollbar issue in firefox */
64
+ min-height: 99px;
65
61
- /* fix minimum scrollbar issue in firefox */
62
- min-height: 99px;
66
+ /* required for child elements to have absolute position */
67
+ position: relative;
68
64
- /* required for child elements to have absolute position */
65
- position: relative;
66
-
67
- /* width and height is given per chart with data-width and data-height */
69
+ /* width and height is given per chart with data-width and data-height */
70
}
71
72
.netdata-legend-resize-handler {
71
- display: block;
72
- position: absolute;
73
- bottom: 0px;
74
- right: 0px;
75
- height: 15px;
76
- width: 30px;
77
- background-color: White;
78
- font-size: 12px;
79
- vertical-align: middle;
80
- line-height: 15px;
81
- cursor: ns-resize;
82
- color: #DDDDDD;
83
- text-align: center;
84
- overflow: hidden;
85
- z-index: 20;
86
- padding: 0px;
87
- margin: 0px;
73
+ display: block;
74
+ position: absolute;
75
+ bottom: 0px;
76
+ right: 0px;
77
+ height: 15px;
78
+ width: 30px;
79
+ background-color: White;
80
+ font-size: 12px;
81
+ vertical-align: middle;
82
+ line-height: 15px;
83
+ cursor: ns-resize;
84
+ color: #DDDDDD;
85
+ text-align: center;
86
+ overflow: hidden;
87
+ z-index: 20;
88
+ padding: 0px;
89
+ margin: 0px;
90
}
91
92
.netdata-legend-toolbox {
91
- display: block;
92
- position: absolute;
93
- bottom: 0px;
94
- right: 30px;
95
- height: 15px;
96
- width: 110px;
97
- background-color: White;
98
- font-size: 12px;
99
- vertical-align: middle;
100
- line-height: 15px;
101
- color: #DDDDDD;
102
- text-align: center;
103
- overflow: hidden;
104
- z-index: 20;
105
- padding: 0px;
106
- margin: 0px;
93
+ display: block;
94
+ position: absolute;
95
+ bottom: 0px;
96
+ right: 30px;
97
+ height: 15px;
98
+ width: 110px;
99
+ background-color: White;
100
+ font-size: 12px;
101
+ vertical-align: middle;
102
+ line-height: 15px;
103
+ color: #DDDDDD;
104
+ text-align: center;
105
+ overflow: hidden;
106
+ z-index: 20;
107
+ padding: 0px;
108
+ margin: 0px;
109
}
110
111
.netdata-legend-toolbox-button {
110
- display: inline-block;
111
- position: relative;
112
- height: 15px;
113
- width: 18px;
114
- background-color: White;
115
- font-size: 12px;
116
- vertical-align: middle;
117
- line-height: 15px;
118
- color: #CDCDCD;
119
- text-align: center;
120
- overflow: hidden;
121
- z-index: 21;
122
- padding: 0px;
123
- margin: 0px;
124
- cursor: pointer;
112
+ display: inline-block;
113
+ position: relative;
114
+ height: 15px;
115
+ width: 18px;
116
+ background-color: White;
117
+ font-size: 12px;
118
+ vertical-align: middle;
119
+ line-height: 15px;
120
+ color: #CDCDCD;
121
+ text-align: center;
122
+ overflow: hidden;
123
+ z-index: 21;
124
+ padding: 0px;
125
+ margin: 0px;
126
+ cursor: pointer;
127
}
128
129
.netdata-message {
128
- display: inline-block;
129
- text-align: left;
130
- vertical-align: top;
131
- font-weight: bold;
132
- font-size: x-small;
133
- width: 100%;
134
- height: 100%;
135
- overflow: hidden;
136
- background: inherit;
137
- z-index: 0;
130
+ display: inline-block;
131
+ text-align: left;
132
+ vertical-align: top;
133
+ font-weight: bold;
134
+ font-size: x-small;
135
+ width: 100%;
136
+ height: 100%;
137
+ overflow: hidden;
138
+ background: inherit;
139
+ z-index: 0;
140
}
141
142
.netdata-message.hidden {
141
- display: none;
143
+ display: none;
144
}
145
146
.netdata-message.icon {
145
- color: #F8F8F8;
146
- text-align: center;
147
- vertical-align: middle;
147
+ color: #F8F8F8;
148
+ text-align: center;
149
+ vertical-align: middle;
150
}
151
152
.netdata-chart-legend {
151
- position: absolute; /* within .netdata-container */
152
- top: 0;
153
- right: 0;
154
- background-color: white;
155
- overflow: hidden;
156
- text-overflow: ellipsis;
157
- line-height: 14px;
158
- display: block;
159
- width: 140px; /* --legend-width */
160
- height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
161
- font-size: 10px;
162
- margin-top: 5px;
163
- text-align: left;
164
- /* width and height is calculated (depends on the appearance of the legend) */
153
+ position: absolute; /* within .netdata-container */
154
+ top: 0;
155
+ right: 0;
156
+ overflow: hidden;
157
+ text-overflow: ellipsis;
158
+ line-height: 14px;
159
+ display: block;
160
+ width: 140px; /* --legend-width */
161
+ height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
162
+ font-size: 10px;
163
+ margin-top: 5px;
164
+ text-align: left;
165
+ /* width and height is calculated (depends on the appearance of the legend) */
166
}
167
168
.netdata-legend-title-date {
168
- font-size: 10px;
169
- font-weight: normal;
170
- margin-top: 0px;
169
+ font-size: 10px;
170
+ font-weight: normal;
171
+ margin-top: 0px;
172
}
173
+
174
.netdata-legend-title-time {
173
- font-size: 11px;
174
- font-weight: bold;
175
- margin-top: 0px;
175
+ font-size: 11px;
176
+ font-weight: bold;
177
+ margin-top: 0px;
178
}
179
+
180
.netdata-legend-title-units {
178
- position: absolute;
179
- right: 7px;
180
- float: right;
181
- font-size: 11px;
182
- vertical-align: top;
183
- font-weight: normal;
184
- margin-top: 0px;
181
+ position: absolute;
182
+ right: 10px;
183
+ float: right;
184
+ font-size: 11px;
185
+ vertical-align: top;
186
+ font-weight: normal;
187
+ margin-top: 0px;
188
}
189
+
190
.netdata-legend-series {
187
- position: absolute;
188
- width: 140px; /* legend-width */
189
- height: calc(100% - 50px);
190
- overflow: hidden;
191
- text-overflow: ellipsis;
192
- line-height: 14.5px; /* line spacing at the legend */
193
- display: block;
194
- font-size: 10px;
195
- margin-top: 0px;
196
-}
197
-
198
-.netdata-legend-series > .netdata-legend-series-content {
199
- position : absolute;
200
- overflow : scroll;
201
- overflow-x : hidden;
202
- top : 0;
203
- right : 0;
204
- bottom : 0;
205
- left : 0;
206
- text-overflow: ellipsis;
207
-}
208
-.netdata-legend-series > .netdata-legend-series-content:focus {
209
- outline: thin dotted;
210
-}
211
-.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
212
- display: block; /* was 'none', but chrome was hiding content with it */
213
-}
214
-.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
215
- display: block;
216
-}
217
-.netdata-legend-series > .netdata-legend-series-pane {
218
-/* background : rgba(0,0,0,.25);*/
219
- background : #DDD;
220
- position : absolute;
221
- width : 4px;
222
- right : 0;
223
- top : 0;
224
- bottom : 0;
225
-/* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
226
-/* opacity : .01; */
227
-/* -webkit-transition : .2s; */
228
-/* -moz-transition : .2s; */
229
-/* -o-transition : .2s; */
230
-/* transition : .2s; */
231
- -moz-border-radius : 4px;
232
- -webkit-border-radius : 4px;
233
- border-radius : 4px;
234
-}
235
-.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
236
- background : #444;
237
-/* background : rgba(0,0,0,.5);*/
238
- position : relative;
239
- margin : 0 1px;
240
- -moz-border-radius : 2px;
241
- -webkit-border-radius : 2px;
242
- border-radius : 2px;
243
-}
244
-.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
245
-/* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
246
-/* opacity : 0.99;*/
191
+ position: absolute;
192
+ width: 140px; /* legend-width */
193
+ height: calc(100% - 50px);
194
+ overflow: hidden;
195
+ text-overflow: ellipsis;
196
+ line-height: 14.5px; /* line spacing at the legend */
197
+ display: block;
198
+ font-size: 10px;
199
+ margin-top: 0px;
200
}
201
202
.netdata-legend-name-table-line {
250
- display: inline-block;
251
- width: 13px;
252
- height: 4px;
253
- border-width: 0px;
254
- border-bottom-width: 2px;
255
- border-bottom-style: solid;
256
- border-bottom-color: white;
203
+ display: inline-block;
204
+ width: 13px;
205
+ height: 4px;
206
+ border-width: 0px;
207
+ border-bottom-width: 2px;
208
+ border-bottom-style: solid;
209
+ border-bottom-color: white;
210
}
211
+
212
.netdata-legend-name-table-area {
259
- display: inline-block;
260
- width: 13px;
261
- height: 5px;
262
- border-width: 1px;
263
- border-top-width: 1px;
264
- border-top-style: solid;
265
- border-top-color: inherit;
213
+ display: inline-block;
214
+ width: 13px;
215
+ height: 5px;
216
+ border-width: 1px;
217
+ border-top-width: 1px;
218
+ border-top-style: solid;
219
+ border-top-color: inherit;
220
}
221
+
222
.netdata-legend-name-table-stacked {
268
- display: inline-block;
269
- width: 13px;
270
- height: 5px;
271
- border-width: 1px;
272
- border-top-width: 1px;
273
- border-top-style: solid;
274
- border-top-color: inherit;
223
+ display: inline-block;
224
+ width: 13px;
225
+ height: 5px;
226
+ border-width: 1px;
227
+ border-top-width: 1px;
228
+ border-top-style: solid;
229
+ border-top-color: inherit;
230
}
231
+
232
.netdata-legend-name-tr {
233
}
234
+
235
.netdata-legend-name-td {
236
}
237
+
238
.netdata-legend-name {
281
- text-align: left;
282
- font-size: 11px; /* legend: dimension name size */
283
- font-weight: bold;
284
- vertical-align: bottom;
285
- margin-top: 0px;
286
- z-index: 9;
287
- padding: 0px;
288
- width: 80px !important;
289
- max-width: 80px !important;
290
- text-overflow: ellipsis;
291
- overflow: hidden;
292
- white-space: nowrap;
293
- display: inline-block;
294
- cursor: pointer;
239
+ text-align: left;
240
+ font-size: 11px; /* legend: dimension name size */
241
+ font-weight: bold;
242
+ vertical-align: bottom;
243
+ margin-top: 0px;
244
+ z-index: 9;
245
+ padding: 0px;
246
+ width: 80px !important;
247
+ max-width: 80px !important;
248
+ text-overflow: ellipsis;
249
+ overflow: hidden;
250
+ white-space: nowrap;
251
+ display: inline-block;
252
+ cursor: pointer;
253
}
254
255
.netdata-legend-value {
298
- /*margin-left: 14px;*/
299
- position: absolute;
300
- right: 7px;
301
- float: right;
302
- text-align: right;
303
- font-size: 11px; /* legend: dimension value size */
304
- font-weight: bold;
305
- vertical-align: bottom;
306
- background-color: White;
307
- margin-top: 0px;
308
- z-index: 10;
309
- padding: 0px;
310
- padding-left: 15px;
311
- cursor: pointer;
312
- /* -webkit-font-smoothing: none; */
256
+ /*margin-left: 14px;*/
257
+ position: absolute;
258
+ right: 10px;
259
+ float: right;
260
+ text-align: right;
261
+ font-size: 11px; /* legend: dimension value size */
262
+ font-weight: bold;
263
+ vertical-align: bottom;
264
+ background-color: White;
265
+ margin-top: 0px;
266
+ z-index: 10;
267
+ padding: 0px;
268
+ padding-left: 15px;
269
+ cursor: pointer;
270
+ /* -webkit-font-smoothing: none; */
271
}
272
+
273
.netdata-legend-name.not-selected {
315
- font-weight: normal;
316
- opacity: 0.3;
274
+ font-weight: normal;
275
+ opacity: 0.3;
276
}
277
278
.netdata-chart {
320
- position: absolute; /* within .netdata-container */
321
- top: 0; /* within .netdata-container */
322
- left: 0; /* within .netdata-container */
323
- display: inline-block;
324
- overflow: hidden;
325
- width: 100%;
326
- height: 100%;
327
- z-index: 5;
279
+ position: absolute; /* within .netdata-container */
280
+ top: 0; /* within .netdata-container */
281
+ left: 0; /* within .netdata-container */
282
+ display: inline-block;
283
+ overflow: hidden;
284
+ width: 100%;
285
+ height: 100%;
286
+ z-index: 5;
287
329
- /* width and height is calculated (depends on the appearance of the legend) */
288
+ /* width and height is calculated (depends on the appearance of the legend) */
289
}
290
291
.netdata-chart-with-legend-right {
333
- position: absolute; /* within .netdata-container */
334
- top: 0; /* within .netdata-container */
335
- left: 0; /* within .netdata-container */
336
- display: block;
337
- overflow: hidden;
338
- margin-right: 140px; /* --legend-width */
339
- width: calc(100% - 140px); /* --legend-width */
340
- height: 100%;
341
- z-index: 5;
342
- flex-grow: 1;
292
+ position: absolute; /* within .netdata-container */
293
+ top: 0; /* within .netdata-container */
294
+ left: 0; /* within .netdata-container */
295
+ display: block;
296
+ overflow: hidden;
297
+ margin-right: 140px; /* --legend-width */
298
+ width: calc(100% - 140px); /* --legend-width */
299
+ height: 100%;
300
+ z-index: 5;
301
+ flex-grow: 1;
302
344
- /* width and height is calculated (depends on the appearance of the legend) */
303
+ /* width and height is calculated (depends on the appearance of the legend) */
304
}
305
306
.netdata-peity-chart {
@@ -368,175 +327,340 @@ body {
327
}
328
329
.dygraph-label-rotate-left {
371
- text-align: center;
372
- /* See http://caniuse.com/#feat=transforms2d */
373
- transform: rotate(90deg);
374
- -webkit-transform: rotate(90deg);
375
- -moz-transform: rotate(90deg);
376
- -o-transform: rotate(90deg);
377
- -ms-transform: rotate(90deg);
330
+ text-align: center;
331
+ /* See http://caniuse.com/#feat=transforms2d */
332
+ transform: rotate(90deg);
333
+ -webkit-transform: rotate(90deg);
334
+ -moz-transform: rotate(90deg);
335
+ -o-transform: rotate(90deg);
336
+ -ms-transform: rotate(90deg);
337
}
338
339
/* For y2-axis label */
340
.dygraph-label-rotate-right {
382
- text-align: center;
383
- /* See http://caniuse.com/#feat=transforms2d */
384
- transform: rotate(-90deg);
385
- -webkit-transform: rotate(-90deg);
386
- -moz-transform: rotate(-90deg);
387
- -o-transform: rotate(-90deg);
388
- -ms-transform: rotate(-90deg);
341
+ text-align: center;
342
+ /* See http://caniuse.com/#feat=transforms2d */
343
+ transform: rotate(-90deg);
344
+ -webkit-transform: rotate(-90deg);
345
+ -moz-transform: rotate(-90deg);
346
+ -o-transform: rotate(-90deg);
347
+ -ms-transform: rotate(-90deg);
348
}
349
350
.dygraph-title {
392
- text-indent: 56px;
393
- text-align: left;
394
- position: absolute;
395
- left: 0px;
396
- top: 4px;
397
- font-size: 11px;
398
- font-weight: bold;
399
- text-overflow: ellipsis;
400
- overflow: hidden;
401
- white-space: nowrap;
351
+ text-indent: 56px;
352
+ text-align: left;
353
+ position: absolute;
354
+ left: 0px;
355
+ top: 4px;
356
+ font-size: 11px;
357
+ font-weight: bold;
358
+ text-overflow: ellipsis;
359
+ overflow: hidden;
360
+ white-space: nowrap;
361
}
362
363
/* fix for sparkline tooltip under bootstrap */
364
.jqstooltip {
406
- width: auto !important;
407
- height: auto !important;
365
+ width: auto !important;
366
+ height: auto !important;
367
}
368
369
.easyPieChart {
411
- position: relative;
412
- text-align: center;
370
+ position: relative;
371
+ text-align: center;
372
}
373
374
.easyPieChart canvas {
416
- position: absolute;
417
- top: 0;
418
- left: 0;
375
+ position: absolute;
376
+ top: 0;
377
+ left: 0;
378
}
379
380
.easyPieChartLabel {
422
- display: inline-block;
423
- position: absolute;
424
- float: left;
425
- left: 0;
426
- width: 100%;
427
- text-align: center;
428
- color: #666;
429
- font-weight: normal;
430
- text-shadow: #BBB 0px 0px 1px;
431
- /* -webkit-font-smoothing: none; */
381
+ display: inline-block;
382
+ position: absolute;
383
+ float: left;
384
+ left: 0;
385
+ width: 100%;
386
+ text-align: center;
387
+ color: #666;
388
+ font-weight: normal;
389
+ text-shadow: #BBB 0px 0px 1px;
390
+ /* -webkit-font-smoothing: none; */
391
}
392
393
.easyPieChartTitle {
435
- display: inline-block;
436
- position: absolute;
437
- float: left;
438
- left: 0;
439
- width: 64%;
440
- margin-left: 18%;
441
- text-align: center;
442
- color: #999999;
443
- font-weight: normal;
394
+ display: inline-block;
395
+ position: absolute;
396
+ float: left;
397
+ left: 0;
398
+ width: 64%;
399
+ margin-left: 18%;
400
+ text-align: center;
401
+ color: #999999;
402
+ font-weight: normal;
403
}
404
405
.easyPieChartUnits {
447
- display: inline-block;
448
- position: absolute;
449
- float: left;
450
- left: 0;
451
- width: 60%;
452
- margin-left: 20%;
453
- text-align: center;
454
- color: #999999;
455
- font-weight: normal;
406
+ display: inline-block;
407
+ position: absolute;
408
+ float: left;
409
+ left: 0;
410
+ width: 60%;
411
+ margin-left: 20%;
412
+ text-align: center;
413
+ color: #999999;
414
+ font-weight: normal;
415
}
416
417
.gaugeChart {
459
- position: relative;
460
- text-align: center;
418
+ position: relative;
419
+ text-align: center;
420
}
421
422
.gaugeChart canvas {
464
- position: absolute;
465
- top: 0;
466
- left: 0;
467
- z-index: 0;
423
+ position: absolute;
424
+ top: 0;
425
+ left: 0;
426
+ z-index: 0;
427
}
428
429
.gaugeChartLabel {
471
- display: inline-block;
472
- position: absolute;
473
- float: left;
474
- left: 0;
475
- width: 100%;
476
- text-align: center;
477
- color: #FFFFFF;
478
- font-weight: bold;
479
- z-index: 1;
480
- text-shadow: #777 0px 0px 1px;
481
- /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
482
- /* -webkit-text-stroke: 1px #777; */
483
- /* -webkit-font-smoothing: none; */
430
+ display: inline-block;
431
+ position: absolute;
432
+ float: left;
433
+ left: 0;
434
+ width: 100%;
435
+ text-align: center;
436
+ color: #FFFFFF;
437
+ font-weight: bold;
438
+ z-index: 1;
439
+ text-shadow: #777 0px 0px 1px;
440
+ /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
441
+ /* -webkit-text-stroke: 1px #777; */
442
+ /* -webkit-font-smoothing: none; */
443
}
444
445
.gaugeChartTitle {
487
- display: inline-block;
488
- position: absolute;
489
- float: left;
490
- left: 0;
491
- width: 100%;
492
- text-align: center;
493
- color: #999999;
494
- font-weight: bold;
446
+ display: inline-block;
447
+ position: absolute;
448
+ float: left;
449
+ left: 0;
450
+ width: 100%;
451
+ text-align: center;
452
+ color: #999999;
453
+ font-weight: bold;
454
}
455
456
.gaugeChartUnits {
498
- display: inline-block;
499
- position: absolute;
500
- float: left;
501
- left: 0;
502
- bottom: 0;
503
- width: 100%;
504
- text-align: left;
505
- margin-left: 5%;
506
- color: #999999;
507
- font-weight: normal;
457
+ display: inline-block;
458
+ position: absolute;
459
+ float: left;
460
+ left: 0;
461
+ bottom: 0;
462
+ width: 100%;
463
+ text-align: left;
464
+ margin-left: 5%;
465
+ color: #999999;
466
+ font-weight: normal;
467
}
468
469
.gaugeChartMin {
511
- display: inline-block;
512
- position: absolute;
513
- float: left;
514
- left: 0;
515
- bottom: 10%;
516
- width: 92%;
517
- margin-left: 8%;
518
- text-align: left;
519
- color: #999999;
520
- font-weight: normal;
470
+ display: inline-block;
471
+ position: absolute;
472
+ float: left;
473
+ left: 0;
474
+ bottom: 10%;
475
+ width: 92%;
476
+ margin-left: 8%;
477
+ text-align: left;
478
+ color: #999999;
479
+ font-weight: normal;
480
}
481
482
.gaugeChartMax {
524
- display: inline-block;
525
- position: absolute;
526
- float: left;
527
- left: 0;
528
- bottom: 10%;
529
- width: 95%;
530
- margin-right: 5%;
531
- text-align: right;
532
- color: #999999;
533
- font-weight: normal;
483
+ display: inline-block;
484
+ position: absolute;
485
+ float: left;
486
+ left: 0;
487
+ bottom: 10%;
488
+ width: 95%;
489
+ margin-right: 5%;
490
+ text-align: right;
491
+ color: #999999;
492
+ font-weight: normal;
493
}
494
495
.popover-title {
537
- font-weight: bold;
538
- font-size: 12px;
496
+ font-weight: bold;
497
+ font-size: 12px;
498
}
499
+
500
.popover-content {
541
- font-size: 11px;
501
+ font-size: 11px;
502
+}
503
+
504
+/* ----------------------------------------------------------------------------
505
+ perfect-scrollbar settings
506
+ */
507
+
508
+.ps-container {
509
+ -ms-touch-action: auto;
510
+ touch-action: auto;
511
+ overflow: hidden !important;
512
+ -ms-overflow-style: none;
513
+}
514
+
515
+@supports (-ms-overflow-style: none) {
516
+ .ps-container {
517
+ overflow: auto !important;
518
+ }
519
+}
520
+
521
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
522
+ .ps-container {
523
+ overflow: auto !important;
524
+ }
525
+}
526
+
527
+.ps-container.ps-active-x > .ps-scrollbar-x-rail,
528
+.ps-container.ps-active-y > .ps-scrollbar-y-rail {
529
+ display: block;
530
+ background-color: transparent;
531
+}
532
+
533
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
534
+ background-color: transparent; /* background color when dragged away */
535
+ opacity: 0.9;
536
+}
537
+
538
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
539
+ background-color: #aaa; /* scrollbar color when dragged away */
540
+ height: 4px;
541
+}
542
+
543
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
544
+ background-color: transparent; /* background color when dragged away */
545
+ opacity: 0.9;
546
+}
547
+
548
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
549
+ background-color: #aaa; /* scrollbar color when dragged away */
550
+ width: 4px;
551
+}
552
+
553
+.ps-container > .ps-scrollbar-x-rail {
554
+ display: none;
555
+ position: absolute;
556
+ /* please don't change 'position' */
557
+ opacity: 0.2; /* the opacity when not on hover of the content */
558
+ -webkit-transition: background-color .2s linear, opacity .2s linear;
559
+ -o-transition: background-color .2s linear, opacity .2s linear;
560
+ -moz-transition: background-color .2s linear, opacity .2s linear;
561
+ transition: background-color .2s linear, opacity .2s linear;
562
+ bottom: 0px;
563
+ /* there must be 'bottom' for ps-scrollbar-x-rail */
564
+ height: 8px;
565
+}
566
+
567
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
568
+ position: absolute;
569
+ /* please don't change 'position' */
570
+ background-color: #666; /* #aaa; the color on content hover */
571
+ -webkit-border-radius: 6px;
572
+ -moz-border-radius: 6px;
573
+ border-radius: 6px;
574
+ -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
575
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
576
+ -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
577
+ -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;
578
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
579
+ 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;
580
+ bottom: 2px;
581
+ /* there must be 'bottom' for ps-scrollbar-x */
582
+ height: 4px; /* the width of the scrollbar */
583
+}
584
+
585
+.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
586
+ height: 4px;
587
+}
588
+
589
+.ps-container > .ps-scrollbar-y-rail {
590
+ display: none;
591
+ position: absolute;
592
+ /* please don't change 'position' */
593
+ opacity: 0.2; /* the opacity when not on hover of the content */
594
+ -webkit-transition: background-color .2s linear, opacity .2s linear;
595
+ -o-transition: background-color .2s linear, opacity .2s linear;
596
+ -moz-transition: background-color .2s linear, opacity .2s linear;
597
+ transition: background-color .2s linear, opacity .2s linear;
598
+ right: 0;
599
+ /* there must be 'right' for ps-scrollbar-y-rail */
600
+ width: 8px;
601
+}
602
+
603
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
604
+ position: absolute;
605
+ /* please don't change 'position' */
606
+ background-color: #666; /* #aaa; the color on content hover */
607
+ -webkit-border-radius: 6px;
608
+ -moz-border-radius: 6px;
609
+ border-radius: 6px;
610
+ -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
611
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
612
+ -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
613
+ -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;
614
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
615
+ 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;
616
+ right: 2px;
617
+ /* there must be 'right' for ps-scrollbar-y */
618
+ width: 4px; /* the width of the scrollbar */
619
+}
620
+
621
+.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
622
+ width: 4px;
623
+}
624
+
625
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
626
+ background-color: transparent; /* background color when dragged */
627
+ opacity: 0.9;
628
+}
629
+
630
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
631
+ background-color: #bbb; /* scrollbar color when dragged */
632
+ height: 4px;
633
+}
634
+
635
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
636
+ background-color: transparent; /* background color when dragged */
637
+ opacity: 0.9;
638
+}
639
+
640
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
641
+ background-color: #bbb; /* scrollbar color when dragged */
642
+ width: 4px;
643
+}
644
+
645
+.ps-container:hover > .ps-scrollbar-x-rail,
646
+.ps-container:hover > .ps-scrollbar-y-rail {
647
+ opacity: 0.6;
648
+}
649
+
650
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
651
+ background-color: transparent; /* the background color on hover of the scrollbar */
652
+ opacity: 0.9;
653
+}
654
+
655
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
656
+ background-color: #999; /* scrollbar color on hover */
657
+}
658
+
659
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
660
+ background-color: transparent; /* the background color on hover of the scrollbar */
661
+ opacity: 0.9;
662
+}
663
+
664
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
665
+ background-color: #999; /* scrollbar color on hover */
666
}
web/dashboard.html
+1
-1
@@ -652,4 +652,4 @@ So, to avoid flashing the charts, we destroy and re-create the charts on each up
652
<!-- <script> netdataServer = "http://box:19999"; </script> -->
653
654
<!-- load the dashboard manager - it will do the rest -->
655
-<script type="text/javascript" src="dashboard.js?v20161218-1"></script>
655
+<script type="text/javascript" src="dashboard.js?v20161229-1"></script>
web/dashboard.js
+63
-31
@@ -1196,6 +1196,7 @@ var NETDATA = window.NETDATA || {};
1196
// the user given dimensions of the element
1197
this.width = self.data('width') || NETDATA.chartDefaults.width;
1198
this.height = self.data('height') || NETDATA.chartDefaults.height;
1199
+ this.height_original = this.height;
1200
1201
if(this.settings_id !== null) {
1202
this.height = NETDATA.localStorageGet('chart_heights.' + this.settings_id, this.height, function(height) {
@@ -1256,8 +1257,7 @@ var NETDATA = window.NETDATA || {};
1257
title_date: null,
1258
title_time: null,
1259
title_units: null,
1259
- nano: null,
1260
- nano_options: null,
1260
+ perfect_scroller: null, // the container to apply perfect scroller to
1261
series: null
1262
};
1263
@@ -1671,8 +1671,8 @@ var NETDATA = window.NETDATA || {};
1671
else if(typeof that.library.resize === 'function') {
1672
that.library.resize(that);
1673
1674
- if(that.element_legend_childs.nano !== null && that.element_legend_childs.nano_options !== null)
1675
- $(that.element_legend_childs.nano).nanoScroller();
1674
+ if(that.element_legend_childs.perfect_scroller !== null)
1675
+ Ps.update(that.element_legend_childs.perfect_scroller);
1676
1677
maxMessageFontSize();
1678
}
@@ -1730,23 +1730,53 @@ var NETDATA = window.NETDATA || {};
1730
this.event_resize.chart_last_h = this.element.clientHeight;
1731
1732
var now = Date.now();
1733
- if(now - this.event_resize.last <= NETDATA.options.current.double_click_speed) {
1733
+ if(now - this.event_resize.last <= NETDATA.options.current.double_click_speed && this.element_legend_childs.perfect_scroller != null) {
1734
// double click / double tap event
1735
1736
+ // console.dir(this.element_legend_childs.content);
1737
+ // console.dir(this.element_legend_childs.perfect_scroller);
1738
+
1739
// the optimal height of the chart
1740
// showing the entire legend
1741
var optimal = this.event_resize.chart_last_h
1739
- + this.element_legend_childs.content.scrollHeight
1740
- - this.element_legend_childs.content.clientHeight;
1742
+ + this.element_legend_childs.perfect_scroller.scrollHeight
1743
+ - this.element_legend_childs.perfect_scroller.clientHeight;
1744
1745
// if we are not optimal, be optimal
1743
- if(this.event_resize.chart_last_h != optimal)
1746
+ if(this.event_resize.chart_last_h != optimal) {
1747
+ // this.log('resize to optimal, current = ' + this.event_resize.chart_last_h.toString() + 'px, original = ' + this.event_resize.chart_original_h.toString() + 'px, optimal = ' + optimal.toString() + 'px, internal = ' + this.height_original.toString());
1748
resizeChartToHeight(optimal.toString() + 'px');
1749
+ }
1750
1746
- // else if we do not have the original height
1747
- // reset to the original height
1748
- else if(this.event_resize.chart_last_h != this.event_resize.chart_original_h)
1751
+ // else if the current height is not the original/saved height
1752
+ // reset to the original/saved height
1753
+ else if(this.event_resize.chart_last_h != this.event_resize.chart_original_h) {
1754
+ // this.log('resize to original, current = ' + this.event_resize.chart_last_h.toString() + 'px, original = ' + this.event_resize.chart_original_h.toString() + 'px, optimal = ' + optimal.toString() + 'px, internal = ' + this.height_original.toString());
1755
resizeChartToHeight(this.event_resize.chart_original_h.toString() + 'px');
1756
+ }
1757
+
1758
+ // else if the current height is not the internal default height
1759
+ // reset to the internal default height
1760
+ else if((this.event_resize.chart_last_h.toString() + 'px') != this.height_original) {
1761
+ // this.log('resize to internal default, current = ' + this.event_resize.chart_last_h.toString() + 'px, original = ' + this.event_resize.chart_original_h.toString() + 'px, optimal = ' + optimal.toString() + 'px, internal = ' + this.height_original.toString());
1762
+ resizeChartToHeight(this.height_original.toString());
1763
+ }
1764
+
1765
+ // else if the current height is not the firstchild's clientheight
1766
+ // resize to it
1767
+ else if(typeof this.element_legend_childs.perfect_scroller.firstChild !== 'undefined') {
1768
+ var parent_rect = this.element.getBoundingClientRect();
1769
+ var content_rect = this.element_legend_childs.perfect_scroller.firstElementChild.getBoundingClientRect();
1770
+ var wanted = content_rect.top - parent_rect.top + this.element_legend_childs.perfect_scroller.firstChild.clientHeight + 18; // 15 = toolbox + 3 space
1771
+
1772
+ // console.log(parent_rect);
1773
+ // console.log(content_rect);
1774
+ // console.log(wanted);
1775
+
1776
+ // this.log('resize to firstChild, current = ' + this.event_resize.chart_last_h.toString() + 'px, original = ' + this.event_resize.chart_original_h.toString() + 'px, optimal = ' + optimal.toString() + 'px, internal = ' + this.height_original.toString() + 'px, firstChild = ' + wanted.toString() + 'px' );
1777
+ if(this.event_resize.chart_last_h != wanted)
1778
+ resizeChartToHeight(wanted.toString() + 'px');
1779
+ }
1780
}
1781
else {
1782
this.event_resize.last = now;
@@ -2517,18 +2547,7 @@ var NETDATA = window.NETDATA || {};
2547
title_date: document.createElement('span'),
2548
title_time: document.createElement('span'),
2549
title_units: document.createElement('span'),
2520
- nano: document.createElement('div'),
2521
- nano_options: {
2522
- paneClass: 'netdata-legend-series-pane',
2523
- sliderClass: 'netdata-legend-series-slider',
2524
- contentClass: 'netdata-legend-series-content',
2525
- enabledClass: '__enabled',
2526
- flashedClass: '__flashed',
2527
- activeClass: '__active',
2528
- tabIndex: -1,
2529
- alwaysVisible: true,
2530
- sliderMinHeight: 10
2531
- },
2550
+ perfect_scroller: document.createElement('div'),
2551
series: {}
2552
};
2553
@@ -2726,11 +2745,11 @@ var NETDATA = window.NETDATA || {};
2745
2746
this.element_legend.appendChild(document.createElement('br'));
2747
2729
- this.element_legend_childs.nano.className = 'netdata-legend-series';
2730
- this.element_legend.appendChild(this.element_legend_childs.nano);
2748
+ this.element_legend_childs.perfect_scroller.className = 'netdata-legend-series';
2749
+ this.element_legend.appendChild(this.element_legend_childs.perfect_scroller);
2750
2751
content.className = 'netdata-legend-series-content';
2733
- this.element_legend_childs.nano.appendChild(content);
2752
+ this.element_legend_childs.perfect_scroller.appendChild(content);
2753
2754
if(NETDATA.options.current.show_help === true)
2755
$(content).popover({
@@ -2758,8 +2777,7 @@ var NETDATA = window.NETDATA || {};
2777
title_date: null,
2778
title_time: null,
2779
title_units: null,
2761
- nano: null,
2762
- nano_options: null,
2780
+ perfect_scroller: null,
2781
series: {}
2782
};
2783
}
@@ -2794,8 +2812,22 @@ var NETDATA = window.NETDATA || {};
2812
this.element_legend_childs.hidden = document.createElement('div');
2813
el.appendChild(this.element_legend_childs.hidden);
2814
2797
- if(this.element_legend_childs.nano !== null && this.element_legend_childs.nano_options !== null)
2798
- $(this.element_legend_childs.nano).nanoScroller(this.element_legend_childs.nano_options);
2815
+ if(this.element_legend_childs.perfect_scroller !== null) {
2816
+ Ps.initialize(this.element_legend_childs.perfect_scroller, {
2817
+ wheelSpeed: 0.2,
2818
+ wheelPropagation: true,
2819
+ swipePropagation: true,
2820
+ minScrollbarLength: null,
2821
+ maxScrollbarLength: null,
2822
+ useBothWheelAxes: false,
2823
+ suppressScrollX: true,
2824
+ suppressScrollY: false,
2825
+ scrollXMarginOffset: 0,
2826
+ scrollYMarginOffset: 0,
2827
+ theme: 'default'
2828
+ });
2829
+ Ps.update(this.element_legend_childs.perfect_scroller);
2830
+ }
2831
2832
this.legendShowLatestValues();
2833
};
@@ -5889,7 +5921,7 @@ var NETDATA = window.NETDATA || {};
5921
}
5922
},
5923
{
5892
- url: NETDATA.serverDefault + 'lib/jquery.nanoscroller-0.8.7.min.js',
5924
+ url: NETDATA.serverDefault + 'lib/perfect-scrollbar-0.6.15.min.js',
5925
isAlreadyLoaded: function() { return false; }
5926
}
5927
];
web/dashboard.slate.css
+510
-386
@@ -1,361 +1,320 @@
1
html,
2
body {
3
- /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
4
- font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
5
- font-style: normal;
6
- font-variant: normal;
7
- color: #878b90;
3
+ /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
4
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
5
+ font-style: normal;
6
+ font-variant: normal;
7
+ color: #878b90;
8
}
9
10
/* fixes for default slate theme */
11
code {
12
- color: #bbb; /*#c7254e;*/
13
- background-color: #555; /* #f9f2f4; */
12
+ color: #bbb; /*#c7254e;*/
13
+ background-color: #555; /* #f9f2f4; */
14
}
15
16
.dashboard-sidebar .nav > .active > a,
17
.dashboard-sidebar .nav > .active:hover > a,
18
.dashboard-sidebar .nav > .active:focus > a {
19
- color: #765d9c;
20
- border-left: 2px solid #765d9c;
19
+ color: #765d9c;
20
+ border-left: 2px solid #765d9c;
21
}
22
23
.morelink {
24
- color: #765d9c;
25
- text-decoration: none;
24
+ color: #765d9c;
25
+ text-decoration: none;
26
}
27
+
28
.morelink:hover {
28
- color: #563d7c;
29
- text-decoration: none;
29
+ color: #563d7c;
30
+ text-decoration: none;
31
}
32
+
33
.morelink:focus {
32
- color: #765d9c;
33
- text-decoration: none;
34
+ color: #765d9c;
35
+ text-decoration: none;
36
}
37
38
.netdata-chart-alignment {
37
- margin-left: 55px;
39
+ margin-left: 55px;
40
}
41
42
.netdata-chart-row {
41
- width: 100%;
42
- text-align: center;
43
- display: flex;
44
- display: -webkit-flex;
45
- display: -moz-flex;
46
- align-items: flex-end;
47
- -moz-align-items: flex-end;
48
- -webkit-align-items: flex-end;
49
- justify-content: center;
50
- -moz--webkit-justify-content: center;
51
- -moz-justify-content: center;
43
+ width: 100%;
44
+ text-align: center;
45
+ display: flex;
46
+ display: -webkit-flex;
47
+ display: -moz-flex;
48
+ align-items: flex-end;
49
+ -moz-align-items: flex-end;
50
+ -webkit-align-items: flex-end;
51
+ justify-content: center;
52
+ -moz--webkit-justify-content: center;
53
+ -moz-justify-content: center;
54
}
55
56
.netdata-container {
55
- display: inline-block;
56
- overflow: hidden;
57
+ display: inline-block;
58
+ overflow: hidden;
59
58
- /* required for child elements to have absolute position */
59
- position: relative;
60
-
61
- /* width and height is given per chart with data-width and data-height */
60
+ /* required for child elements to have absolute position */
61
+ position: relative;
62
+
63
+ /* width and height is given per chart with data-width and data-height */
64
}
65
66
.netdata-aspect {
65
- position: relative;
66
- width: 100%;
67
- padding: 0px;
68
- margin: 0px;
67
+ position: relative;
68
+ width: 100%;
69
+ padding: 0px;
70
+ margin: 0px;
71
}
72
73
.netdata-container-with-legend {
72
- display: inline-block;
73
- overflow: hidden;
74
+ display: inline-block;
75
+ overflow: hidden;
76
+
77
+ /* fix minimum scrollbar issue in firefox */
78
+ min-height: 99px;
79
75
- /* fix minimum scrollbar issue in firefox */
76
- min-height: 99px;
80
+ /* required for child elements to have absolute position */
81
+ position: relative;
82
78
- /* required for child elements to have absolute position */
79
- position: relative;
80
-
81
- /* width and height is given per chart with data-width and data-height */
83
+ /* width and height is given per chart with data-width and data-height */
84
}
85
86
.netdata-legend-resize-handler {
85
- display: block;
86
- position: absolute;
87
- bottom: 0px;
88
- right: 0px;
89
- height: 15px;
90
- width: 30px;
91
- background-color: #272b30;
92
- font-size: 12px;
93
- vertical-align: middle;
94
- line-height: 15px;
95
- cursor: ns-resize;
96
- color: #373b40;
97
- text-align: center;
98
- overflow: hidden;
99
- z-index: 20;
100
- padding: 0px;
101
- margin: 0px;
87
+ display: block;
88
+ position: absolute;
89
+ bottom: 0px;
90
+ right: 0px;
91
+ height: 15px;
92
+ width: 30px;
93
+ background-color: #272b30;
94
+ font-size: 12px;
95
+ vertical-align: middle;
96
+ line-height: 15px;
97
+ cursor: ns-resize;
98
+ color: #373b40;
99
+ text-align: center;
100
+ overflow: hidden;
101
+ z-index: 20;
102
+ padding: 0px;
103
+ margin: 0px;
104
}
105
106
.netdata-legend-toolbox {
105
- display: block;
106
- position: absolute;
107
- bottom: 0px;
108
- right: 30px;
109
- height: 15px;
110
- width: 110px;
111
- background-color: #272b30;
112
- font-size: 12px;
113
- vertical-align: middle;
114
- line-height: 15px;
115
- color: #373b40;
116
- text-align: center;
117
- overflow: hidden;
118
- z-index: 20;
119
- padding: 0px;
120
- margin: 0px;
107
+ display: block;
108
+ position: absolute;
109
+ bottom: 0px;
110
+ right: 30px;
111
+ height: 15px;
112
+ width: 110px;
113
+ background-color: #272b30;
114
+ font-size: 12px;
115
+ vertical-align: middle;
116
+ line-height: 15px;
117
+ color: #373b40;
118
+ text-align: center;
119
+ overflow: hidden;
120
+ z-index: 20;
121
+ padding: 0px;
122
+ margin: 0px;
123
}
124
125
.netdata-legend-toolbox-button {
124
- display: inline-block;
125
- position: relative;
126
- height: 15px;
127
- width: 18px;
128
- background-color: #272b30;
129
- font-size: 12px;
130
- vertical-align: middle;
131
- line-height: 15px;
132
- color: #474b50;
133
- text-align: center;
134
- overflow: hidden;
135
- z-index: 21;
136
- padding: 0px;
137
- margin: 0px;
138
- cursor: pointer;
126
+ display: inline-block;
127
+ position: relative;
128
+ height: 15px;
129
+ width: 18px;
130
+ background-color: #272b30;
131
+ font-size: 12px;
132
+ vertical-align: middle;
133
+ line-height: 15px;
134
+ color: #474b50;
135
+ text-align: center;
136
+ overflow: hidden;
137
+ z-index: 21;
138
+ padding: 0px;
139
+ margin: 0px;
140
+ cursor: pointer;
141
}
142
143
.netdata-message {
142
- display: inline-block;
143
- text-align: left;
144
- vertical-align: top;
145
- font-weight: bold;
146
- font-size: x-small;
147
- width: 100%;
148
- height: 100%;
149
- overflow: hidden;
150
- background: inherit;
151
- z-index: 0;
144
+ display: inline-block;
145
+ text-align: left;
146
+ vertical-align: top;
147
+ font-weight: bold;
148
+ font-size: x-small;
149
+ width: 100%;
150
+ height: 100%;
151
+ overflow: hidden;
152
+ background: inherit;
153
+ z-index: 0;
154
}
155
156
.netdata-message.hidden {
155
- display: none;
157
+ display: none;
158
}
159
160
.netdata-message.icon {
159
- color: #2f3338;
160
- text-align: center;
161
- vertical-align: middle;
161
+ color: #2f3338;
162
+ text-align: center;
163
+ vertical-align: middle;
164
}
165
166
.netdata-chart-legend {
165
- position: absolute; /* within .netdata-container */
166
- top: 0;
167
- right: 0;
168
- background-color: #272b30;
169
- overflow: hidden;
170
- text-overflow: ellipsis;
171
- line-height: 14px;
172
- display: block;
173
- width: 140px; /* --legend-width */
174
- height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
175
- font-size: 10px;
176
- margin-top: 5px;
177
- text-align: left;
178
- /* width and height is calculated (depends on the appearance of the legend) */
167
+ position: absolute; /* within .netdata-container */
168
+ top: 0;
169
+ right: 0;
170
+ overflow: hidden;
171
+ text-overflow: ellipsis;
172
+ line-height: 14px;
173
+ display: block;
174
+ width: 140px; /* --legend-width */
175
+ height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
176
+ font-size: 10px;
177
+ margin-top: 5px;
178
+ text-align: left;
179
+ /* width and height is calculated (depends on the appearance of the legend) */
180
}
181
182
.netdata-legend-title-date {
182
- font-size: 10px;
183
- font-weight: normal;
184
- margin-top: 0px;
183
+ font-size: 10px;
184
+ font-weight: normal;
185
+ margin-top: 0px;
186
}
187
+
188
.netdata-legend-title-time {
187
- font-size: 11px;
188
- font-weight: bold;
189
- margin-top: 0px;
189
+ font-size: 11px;
190
+ font-weight: bold;
191
+ margin-top: 0px;
192
}
193
+
194
.netdata-legend-title-units {
192
- position: absolute;
193
- right: 7px;
194
- float: right;
195
- font-size: 11px;
196
- vertical-align: top;
197
- font-weight: normal;
198
- margin-top: 0px;
195
+ position: absolute;
196
+ right: 10px;
197
+ float: right;
198
+ font-size: 11px;
199
+ vertical-align: top;
200
+ font-weight: normal;
201
+ margin-top: 0px;
202
}
203
+
204
.netdata-legend-series {
201
- position: absolute;
202
- width: 140px; /* legend-width */
203
- height: calc(100% - 50px);
204
- overflow: hidden;
205
- text-overflow: ellipsis;
206
- line-height: 14.5px; /* line spacing at the legend */
207
- display: block;
208
- font-size: 10px;
209
- margin-top: 0px;
210
-}
211
-
212
-.netdata-legend-series > .netdata-legend-series-content {
213
- position : absolute;
214
- overflow : scroll;
215
- overflow-x : hidden;
216
- top : 0;
217
- right : 0;
218
- bottom : 0;
219
- left : 0;
220
- text-overflow: ellipsis;
221
-}
222
-.netdata-legend-series > .netdata-legend-series-content:focus {
223
- outline: thin dotted;
224
-}
225
-.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
226
- display: block; /* was 'none', but chrome was hidding content with it */
227
-}
228
-.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
229
- display: block;
230
-}
231
-.netdata-legend-series > .netdata-legend-series-pane {
232
-/* background : rgba(0,0,0,.25);*/
233
- background : #373b40;
234
- position : absolute;
235
- width : 4px;
236
- right : 0;
237
- top : 0;
238
- bottom : 0;
239
-/* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
240
-/* opacity : .01; */
241
-/* -webkit-transition : .2s; */
242
-/* -moz-transition : .2s; */
243
-/* -o-transition : .2s; */
244
-/* transition : .2s; */
245
- -moz-border-radius : 4px;
246
- -webkit-border-radius : 4px;
247
- border-radius : 4px;
248
-}
249
-.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
250
- background : #222; /* nano scroller handler color */
251
-/* background : rgba(0,0,0,.5);*/
252
- position : relative;
253
- margin : 0 1px;
254
- -moz-border-radius : 2px;
255
- -webkit-border-radius : 2px;
256
- border-radius : 2px;
257
-}
258
-.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
259
-/* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
260
-/* opacity : 0.99;*/
205
+ position: absolute;
206
+ width: 140px; /* legend-width */
207
+ height: calc(100% - 50px);
208
+ overflow: hidden;
209
+ text-overflow: ellipsis;
210
+ line-height: 14.5px; /* line spacing at the legend */
211
+ display: block;
212
+ font-size: 10px;
213
+ margin-top: 0px;
214
}
215
216
.netdata-legend-name-table-line {
264
- display: inline-block;
265
- width: 13px;
266
- height: 4px;
267
- border-width: 0px;
268
- border-bottom-width: 2px;
269
- border-bottom-style: solid;
270
- border-bottom-color: #272b30;
217
+ display: inline-block;
218
+ width: 13px;
219
+ height: 4px;
220
+ border-width: 0px;
221
+ border-bottom-width: 2px;
222
+ border-bottom-style: solid;
223
+ border-bottom-color: #272b30;
224
}
225
+
226
.netdata-legend-name-table-area {
273
- display: inline-block;
274
- width: 13px;
275
- height: 5px;
276
- border-width: 1px;
277
- border-top-width: 1px;
278
- border-top-style: solid;
279
- border-top-color: inherit;
227
+ display: inline-block;
228
+ width: 13px;
229
+ height: 5px;
230
+ border-width: 1px;
231
+ border-top-width: 1px;
232
+ border-top-style: solid;
233
+ border-top-color: inherit;
234
}
235
+
236
.netdata-legend-name-table-stacked {
282
- display: inline-block;
283
- width: 13px;
284
- height: 5px;
285
- border-width: 1px;
286
- border-top-width: 1px;
287
- border-top-style: solid;
288
- border-top-color: inherit;
237
+ display: inline-block;
238
+ width: 13px;
239
+ height: 5px;
240
+ border-width: 1px;
241
+ border-top-width: 1px;
242
+ border-top-style: solid;
243
+ border-top-color: inherit;
244
}
245
+
246
.netdata-legend-name-tr {
247
}
248
+
249
.netdata-legend-name-td {
250
}
251
+
252
.netdata-legend-name {
295
- text-align: left;
296
- font-size: 11px; /* legend: dimension name size */
297
- font-weight: bold;
298
- vertical-align: bottom;
299
- margin-top: 0px;
300
- z-index: 9;
301
- padding: 0px;
302
- width: 80px !important;
303
- max-width: 80px !important;
304
- text-overflow: ellipsis;
305
- overflow: hidden;
306
- white-space: nowrap;
307
- display: inline-block;
308
- cursor: pointer;
253
+ text-align: left;
254
+ font-size: 11px; /* legend: dimension name size */
255
+ font-weight: bold;
256
+ vertical-align: bottom;
257
+ margin-top: 0px;
258
+ z-index: 9;
259
+ padding: 0px;
260
+ width: 80px !important;
261
+ max-width: 80px !important;
262
+ text-overflow: ellipsis;
263
+ overflow: hidden;
264
+ white-space: nowrap;
265
+ display: inline-block;
266
+ cursor: pointer;
267
}
268
269
.netdata-legend-value {
312
- /*margin-left: 14px;*/
313
- position: absolute;
314
- right: 7px;
315
- float: right;
316
- text-align: right;
317
- font-size: 11px; /* legend: dimension value size */
318
- font-weight: bold;
319
- vertical-align: bottom;
320
- background-color: #272b30;
321
- margin-top: 0px;
322
- z-index: 10;
323
- padding: 0px;
324
- padding-left: 15px;
325
- cursor: pointer;
326
- /* -webkit-font-smoothing: none; */
270
+ /*margin-left: 14px;*/
271
+ position: absolute;
272
+ right: 10px;
273
+ float: right;
274
+ text-align: right;
275
+ font-size: 11px; /* legend: dimension value size */
276
+ font-weight: bold;
277
+ vertical-align: bottom;
278
+ background-color: #272b30;
279
+ margin-top: 0px;
280
+ z-index: 10;
281
+ padding: 0px;
282
+ padding-left: 15px;
283
+ cursor: pointer;
284
+ /* -webkit-font-smoothing: none; */
285
}
286
+
287
.netdata-legend-name.not-selected {
329
- font-weight: normal;
330
- opacity: 0.3;
288
+ font-weight: normal;
289
+ opacity: 0.3;
290
}
291
292
.netdata-chart {
334
- position: absolute; /* within .netdata-container */
335
- top: 0; /* within .netdata-container */
336
- left: 0; /* within .netdata-container */
337
- display: inline-block;
338
- overflow: hidden;
339
- width: 100%;
340
- height: 100%;
341
- z-index: 5;
293
+ position: absolute; /* within .netdata-container */
294
+ top: 0; /* within .netdata-container */
295
+ left: 0; /* within .netdata-container */
296
+ display: inline-block;
297
+ overflow: hidden;
298
+ width: 100%;
299
+ height: 100%;
300
+ z-index: 5;
301
343
- /* width and height is calculated (depends on the appearance of the legend) */
302
+ /* width and height is calculated (depends on the appearance of the legend) */
303
}
304
305
.netdata-chart-with-legend-right {
347
- position: absolute; /* within .netdata-container */
348
- top: 0; /* within .netdata-container */
349
- left: 0; /* within .netdata-container */
350
- display: block;
351
- overflow: hidden;
352
- margin-right: 140px; /* --legend-width */
353
- width: calc(100% - 140px); /* --legend-width */
354
- height: 100%;
355
- z-index: 5;
356
- flex-grow: 1;
306
+ position: absolute; /* within .netdata-container */
307
+ top: 0; /* within .netdata-container */
308
+ left: 0; /* within .netdata-container */
309
+ display: block;
310
+ overflow: hidden;
311
+ margin-right: 140px; /* --legend-width */
312
+ width: calc(100% - 140px); /* --legend-width */
313
+ height: 100%;
314
+ z-index: 5;
315
+ flex-grow: 1;
316
358
- /* width and height is calculated (depends on the appearance of the legend) */
317
+ /* width and height is calculated (depends on the appearance of the legend) */
318
}
319
320
.netdata-peity-chart {
@@ -382,179 +341,344 @@ code {
341
}
342
343
.dygraph-axis-label {
385
- color: #6c7075;
344
+ color: #6c7075;
345
}
346
347
.dygraph-label-rotate-left {
389
- text-align: center;
390
- /* See http://caniuse.com/#feat=transforms2d */
391
- transform: rotate(90deg);
392
- -webkit-transform: rotate(90deg);
393
- -moz-transform: rotate(90deg);
394
- -o-transform: rotate(90deg);
395
- -ms-transform: rotate(90deg);
348
+ text-align: center;
349
+ /* See http://caniuse.com/#feat=transforms2d */
350
+ transform: rotate(90deg);
351
+ -webkit-transform: rotate(90deg);
352
+ -moz-transform: rotate(90deg);
353
+ -o-transform: rotate(90deg);
354
+ -ms-transform: rotate(90deg);
355
}
356
357
/* For y2-axis label */
358
.dygraph-label-rotate-right {
400
- text-align: center;
401
- /* See http://caniuse.com/#feat=transforms2d */
402
- transform: rotate(-90deg);
403
- -webkit-transform: rotate(-90deg);
404
- -moz-transform: rotate(-90deg);
405
- -o-transform: rotate(-90deg);
406
- -ms-transform: rotate(-90deg);
359
+ text-align: center;
360
+ /* See http://caniuse.com/#feat=transforms2d */
361
+ transform: rotate(-90deg);
362
+ -webkit-transform: rotate(-90deg);
363
+ -moz-transform: rotate(-90deg);
364
+ -o-transform: rotate(-90deg);
365
+ -ms-transform: rotate(-90deg);
366
}
367
368
.dygraph-title {
410
- text-indent: 56px;
411
- text-align: left;
412
- position: absolute;
413
- left: 0px;
414
- top: 4px;
415
- font-size: 11px;
416
- font-weight: bold;
417
- text-overflow: ellipsis;
418
- overflow: hidden;
419
- white-space: nowrap;
369
+ text-indent: 56px;
370
+ text-align: left;
371
+ position: absolute;
372
+ left: 0px;
373
+ top: 4px;
374
+ font-size: 11px;
375
+ font-weight: bold;
376
+ text-overflow: ellipsis;
377
+ overflow: hidden;
378
+ white-space: nowrap;
379
}
380
381
/* fix for sparkline tooltip under bootstrap */
382
.jqstooltip {
424
- width: auto !important;
425
- height: auto !important;
383
+ width: auto !important;
384
+ height: auto !important;
385
}
386
387
.easyPieChart {
429
- position: relative;
430
- text-align: center;
388
+ position: relative;
389
+ text-align: center;
390
}
391
392
.easyPieChart canvas {
434
- position: absolute;
435
- top: 0;
436
- left: 0;
393
+ position: absolute;
394
+ top: 0;
395
+ left: 0;
396
}
397
398
.easyPieChartLabel {
440
- display: inline-block;
441
- position: absolute;
442
- float: left;
443
- left: 0;
444
- width: 100%;
445
- text-align: center;
446
- color: #BBB;
447
- font-weight: normal;
448
- text-shadow: #272b30 0px 0px 1px;
449
- /* -webkit-font-smoothing: none; */
399
+ display: inline-block;
400
+ position: absolute;
401
+ float: left;
402
+ left: 0;
403
+ width: 100%;
404
+ text-align: center;
405
+ color: #BBB;
406
+ font-weight: normal;
407
+ text-shadow: #272b30 0px 0px 1px;
408
+ /* -webkit-font-smoothing: none; */
409
}
410
411
.easyPieChartTitle {
453
- display: inline-block;
454
- position: absolute;
455
- float: left;
456
- left: 0;
457
- width: 64%;
458
- margin-left: 18%;
459
- text-align: center;
460
- color: #676b70;
461
- font-weight: normal;
412
+ display: inline-block;
413
+ position: absolute;
414
+ float: left;
415
+ left: 0;
416
+ width: 64%;
417
+ margin-left: 18%;
418
+ text-align: center;
419
+ color: #676b70;
420
+ font-weight: normal;
421
}
422
423
.easyPieChartUnits {
465
- display: inline-block;
466
- position: absolute;
467
- float: left;
468
- left: 0;
469
- width: 60%;
470
- margin-left: 20%;
471
- text-align: center;
472
- color: #676b70;
473
- font-weight: normal;
424
+ display: inline-block;
425
+ position: absolute;
426
+ float: left;
427
+ left: 0;
428
+ width: 60%;
429
+ margin-left: 20%;
430
+ text-align: center;
431
+ color: #676b70;
432
+ font-weight: normal;
433
}
434
435
.gaugeChart {
477
- position: relative;
478
- text-align: center;
436
+ position: relative;
437
+ text-align: center;
438
}
439
440
.gaugeChart canvas {
482
- position: absolute;
483
- top: 0;
484
- left: 0;
485
- z-index: 0;
441
+ position: absolute;
442
+ top: 0;
443
+ left: 0;
444
+ z-index: 0;
445
}
446
447
.gaugeChartLabel {
489
- display: inline-block;
490
- position: absolute;
491
- float: left;
492
- left: 0;
493
- width: 100%;
494
- text-align: center;
495
- color: #BBB;
496
- font-weight: bold;
497
- z-index: 1;
498
- text-shadow: #272b30 0px 0px 1px;
499
- /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
500
- /* -webkit-text-stroke: 1px #777; */
501
- /* -webkit-font-smoothing: none; */
448
+ display: inline-block;
449
+ position: absolute;
450
+ float: left;
451
+ left: 0;
452
+ width: 100%;
453
+ text-align: center;
454
+ color: #BBB;
455
+ font-weight: bold;
456
+ z-index: 1;
457
+ text-shadow: #272b30 0px 0px 1px;
458
+ /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
459
+ /* -webkit-text-stroke: 1px #777; */
460
+ /* -webkit-font-smoothing: none; */
461
}
462
463
.gaugeChartTitle {
505
- display: inline-block;
506
- position: absolute;
507
- float: left;
508
- left: 0;
509
- width: 100%;
510
- text-align: center;
511
- color: #676b70;
512
- font-weight: bold;
464
+ display: inline-block;
465
+ position: absolute;
466
+ float: left;
467
+ left: 0;
468
+ width: 100%;
469
+ text-align: center;
470
+ color: #676b70;
471
+ font-weight: bold;
472
}
473
474
.gaugeChartUnits {
516
- display: inline-block;
517
- position: absolute;
518
- float: left;
519
- left: 0;
520
- bottom: 0;
521
- width: 100%;
522
- text-align: left;
523
- margin-left: 5%;
524
- color: #676b70;
525
- font-weight: normal;
475
+ display: inline-block;
476
+ position: absolute;
477
+ float: left;
478
+ left: 0;
479
+ bottom: 0;
480
+ width: 100%;
481
+ text-align: left;
482
+ margin-left: 5%;
483
+ color: #676b70;
484
+ font-weight: normal;
485
}
486
487
.gaugeChartMin {
529
- display: inline-block;
530
- position: absolute;
531
- float: left;
532
- left: 0;
533
- bottom: 10%;
534
- width: 92%;
535
- margin-left: 8%;
536
- text-align: left;
537
- color: #676b70;
538
- font-weight: normal;
488
+ display: inline-block;
489
+ position: absolute;
490
+ float: left;
491
+ left: 0;
492
+ bottom: 10%;
493
+ width: 92%;
494
+ margin-left: 8%;
495
+ text-align: left;
496
+ color: #676b70;
497
+ font-weight: normal;
498
}
499
500
.gaugeChartMax {
542
- display: inline-block;
543
- position: absolute;
544
- float: left;
545
- left: 0;
546
- bottom: 10%;
547
- width: 95%;
548
- margin-right: 5%;
549
- text-align: right;
550
- color: #676b70;
551
- font-weight: normal;
501
+ display: inline-block;
502
+ position: absolute;
503
+ float: left;
504
+ left: 0;
505
+ bottom: 10%;
506
+ width: 95%;
507
+ margin-right: 5%;
508
+ text-align: right;
509
+ color: #676b70;
510
+ font-weight: normal;
511
}
512
513
.popover-title {
555
- font-weight: bold;
556
- font-size: 12px;
514
+ font-weight: bold;
515
+ font-size: 12px;
516
}
517
+
518
.popover-content {
559
- font-size: 11px;
519
+ font-size: 11px;
520
+}
521
+
522
+/* ----------------------------------------------------------------------------
523
+ perfect-scrollbar settings
524
+ */
525
+
526
+.ps-container {
527
+ -ms-touch-action: auto;
528
+ touch-action: auto;
529
+ overflow: hidden !important;
530
+ -ms-overflow-style: none;
531
+}
532
+
533
+@supports (-ms-overflow-style: none) {
534
+ .ps-container {
535
+ overflow: auto !important;
536
+ }
537
+}
538
+
539
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
540
+ .ps-container {
541
+ overflow: auto !important;
542
+ }
543
+}
544
+
545
+.ps-container.ps-active-x > .ps-scrollbar-x-rail,
546
+.ps-container.ps-active-y > .ps-scrollbar-y-rail {
547
+ display: block;
548
+ background-color: transparent;
549
+}
550
+
551
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
552
+ background-color: transparent; /* background color when dragged away */
553
+ opacity: 0.9;
554
+}
555
+
556
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
557
+ background-color: #aaa; /* scrollbar color when dragged away */
558
+ height: 4px;
559
+}
560
+
561
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
562
+ background-color: transparent; /* background color when dragged away */
563
+ opacity: 0.9;
564
+}
565
+
566
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
567
+ background-color: #aaa; /* scrollbar color when dragged away */
568
+ width: 4px;
569
+}
570
+
571
+.ps-container > .ps-scrollbar-x-rail {
572
+ display: none;
573
+ position: absolute;
574
+ /* please don't change 'position' */
575
+ opacity: 0.2; /* the opacity when not on hover of the content */
576
+ -webkit-transition: background-color .2s linear, opacity .2s linear;
577
+ -o-transition: background-color .2s linear, opacity .2s linear;
578
+ -moz-transition: background-color .2s linear, opacity .2s linear;
579
+ transition: background-color .2s linear, opacity .2s linear;
580
+ bottom: 0px;
581
+ /* there must be 'bottom' for ps-scrollbar-x-rail */
582
+ height: 8px;
583
+}
584
+
585
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
586
+ position: absolute;
587
+ /* please don't change 'position' */
588
+ background-color: #666; /* #aaa; the color on content hover */
589
+ -webkit-border-radius: 6px;
590
+ -moz-border-radius: 6px;
591
+ border-radius: 6px;
592
+ -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
593
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
594
+ -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
595
+ -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;
596
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
597
+ 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;
598
+ bottom: 2px;
599
+ /* there must be 'bottom' for ps-scrollbar-x */
600
+ height: 4px; /* the width of the scrollbar */
601
+}
602
+
603
+.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
604
+ height: 4px;
605
+}
606
+
607
+.ps-container > .ps-scrollbar-y-rail {
608
+ display: none;
609
+ position: absolute;
610
+ /* please don't change 'position' */
611
+ opacity: 0.2; /* the opacity when not on hover of the content */
612
+ -webkit-transition: background-color .2s linear, opacity .2s linear;
613
+ -o-transition: background-color .2s linear, opacity .2s linear;
614
+ -moz-transition: background-color .2s linear, opacity .2s linear;
615
+ transition: background-color .2s linear, opacity .2s linear;
616
+ right: 0;
617
+ /* there must be 'right' for ps-scrollbar-y-rail */
618
+ width: 8px;
619
+}
620
+
621
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
622
+ position: absolute;
623
+ /* please don't change 'position' */
624
+ background-color: #666; /* #aaa; the color on content hover */
625
+ -webkit-border-radius: 6px;
626
+ -moz-border-radius: 6px;
627
+ border-radius: 6px;
628
+ -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
629
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
630
+ -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
631
+ -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;
632
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
633
+ 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;
634
+ right: 2px;
635
+ /* there must be 'right' for ps-scrollbar-y */
636
+ width: 4px; /* the width of the scrollbar */
637
+}
638
+
639
+.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
640
+ width: 4px;
641
+}
642
+
643
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
644
+ background-color: transparent; /* background color when dragged */
645
+ opacity: 0.9;
646
+}
647
+
648
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
649
+ background-color: #bbb; /* scrollbar color when dragged */
650
+ height: 4px;
651
+}
652
+
653
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
654
+ background-color: transparent; /* background color when dragged */
655
+ opacity: 0.9;
656
+}
657
+
658
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
659
+ background-color: #bbb; /* scrollbar color when dragged */
660
+ width: 4px;
661
+}
662
+
663
+.ps-container:hover > .ps-scrollbar-x-rail,
664
+.ps-container:hover > .ps-scrollbar-y-rail {
665
+ opacity: 0.6;
666
+}
667
+
668
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
669
+ background-color: transparent; /* the background color on hover of the scrollbar */
670
+ opacity: 0.9;
671
+}
672
+
673
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
674
+ background-color: #999; /* scrollbar color on hover */
675
+}
676
+
677
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
678
+ background-color: transparent; /* the background color on hover of the scrollbar */
679
+ opacity: 0.9;
680
+}
681
+
682
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
683
+ background-color: #999; /* scrollbar color on hover */
684
}
web/demo.html
+1
-1
@@ -20,7 +20,7 @@
20
<meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
21
<meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
22
</head>
23
-<script type="text/javascript" src="dashboard.js?v20161218-1"></script>
23
+<script type="text/javascript" src="dashboard.js?v20161229-1"></script>
24
<body>
25
26
<div style="width: 100%; text-align: center;">
web/demo2.html
+1
-1
@@ -21,7 +21,7 @@
21
<meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
22
</head>
23
<script>var netdataTheme = 'slate';</script>
24
-<script type="text/javascript" src="http://my-netdata.io/dashboard.js?v20161218-1"></script>
24
+<script type="text/javascript" src="http://my-netdata.io/dashboard.js?v20161229-1"></script>
25
<body>
26
27
<div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
web/demosites.html
+1
-1
@@ -505,7 +505,7 @@ p {
505
and that you have chown it to be owned by netdata:netdata
506
-->
507
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
508
-<script type="text/javascript" src="dashboard.js?v20161227-1"></script>
508
+<script type="text/javascript" src="dashboard.js?v20161229-1"></script>
509
510
<script>
511
// --- OPTIONS FOR THE CHARTS --
web/demosites2.html
+1
-1
@@ -52,7 +52,7 @@
52
and that you have chown it to be owned by netdata:netdata
53
-->
54
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
55
- <script type="text/javascript" src="dashboard.js?v20161218-1"></script>
55
+ <script type="text/javascript" src="dashboard.js?v20161229-1"></script>
56
57
<script>
58
// --- OPTIONS FOR THE CHARTS --
web/goto-host-from-alarm.html
+1
-1
@@ -18,7 +18,7 @@
18
var netdataTheme = 'slate';
19
var netdataShowHelp = true;
20
</script>
21
-<script type="text/javascript" src="dashboard.js?v20161218-1"></script>
21
+<script type="text/javascript" src="dashboard.js?v20161229-1"></script>
22
23
<script>
24
var urlOptions = {
web/index.html
+3
-3
@@ -2718,8 +2718,8 @@
2718
<i class="fa fa-circle"></i> <a href="http://www.bootstraptoggle.com/" target="_blank">Bootstrap Toggle</a>,
2719
<i class="fa fa-copyright"></i> Copyright (c) 2011-2014 Min Hur, The New York Times Company, <a href="https://github.com/minhur/bootstrap-toggle/blob/master/LICENSE" target="_blank">MIT License</a>
2720
2721
- <i class="fa fa-circle"></i> <a href="https://jamesflorentino.github.io/nanoScrollerJS/" target="_blank">NanoScroller</a>,
2722
- <i class="fa fa-copyright"></i> Copyright 2012, James Florentino, <a href="https://github.com/jamesflorentino/nanoScrollerJS/blob/master/LICENSE" target="_blank">MIT License</a>
2721
+ <i class="fa fa-circle"></i> <a href="https://github.com/noraesae/perfect-scrollbar" target="_blank">perfect-scrollbar</a>,
2722
+ <i class="fa fa-copyright"></i> Copyright 2016, Hyunje Alex Jun and other contributors, <a href="https://github.com/noraesae/perfect-scrollbar/blob/master/LICENSE" target="_blank">MIT License</a>
2723
2724
<i class="fa fa-circle"></i> <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>,
2725
<i class="fa fa-copyright"></i> Created by Dave Gandy, Font: <a href="http://scripts.sil.org/OFL" target="_blank">SIL OFL 1.1 License</a>, CSS: <a href="http://opensource.org/licenses/mit-license.html" target="_blank">MIT License</a>
@@ -3186,4 +3186,4 @@
3186
</div>
3187
</body>
3188
</html>
3189
-<script type="text/javascript" src="dashboard.js?v20161227-1"></script>
3189
+<script type="text/javascript" src="dashboard.js?v20161229-1"></script>
web/lib/jquery.nanoscroller-0.8.7.min.js
deleted
-4
@@ -1,4 +0,0 @@
1
-/*! nanoScrollerJS - v0.8.7 - (c) 2015 James Florentino; Licensed MIT */
2
-
3
-!function(a){return"function"==typeof define&&define.amd?define(["jquery"],function(b){return a(b,window,document)}):"object"==typeof exports?module.exports=a(require("jquery"),window,document):a(jQuery,window,document)}(function(a,b,c){"use strict";var d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H;z={paneClass:"nano-pane",sliderClass:"nano-slider",contentClass:"nano-content",enabledClass:"has-scrollbar",flashedClass:"flashed",activeClass:"active",iOSNativeScrolling:!1,preventPageScrolling:!1,disableResize:!1,alwaysVisible:!1,flashDelay:1500,sliderMinHeight:20,sliderMaxHeight:null,documentContext:null,windowContext:null},u="scrollbar",t="scroll",l="mousedown",m="mouseenter",n="mousemove",p="mousewheel",o="mouseup",s="resize",h="drag",i="enter",w="up",r="panedown",f="DOMMouseScroll",g="down",x="wheel",j="keydown",k="keyup",v="touchmove",d="Microsoft Internet Explorer"===b.navigator.appName&&/msie 7./i.test(b.navigator.appVersion)&&b.ActiveXObject,e=null,D=b.requestAnimationFrame,y=b.cancelAnimationFrame,F=c.createElement("div").style,H=function(){var a,b,c,d,e,f;for(d=["t","webkitT","MozT","msT","OT"],a=e=0,f=d.length;f>e;a=++e)if(c=d[a],b=d[a]+"ransform",b in F)return d[a].substr(0,d[a].length-1);return!1}(),G=function(a){return H===!1?!1:""===H?a:H+a.charAt(0).toUpperCase()+a.substr(1)},E=G("transform"),B=E!==!1,A=function(){var a,b,d;return a=c.createElement("div"),b=a.style,b.position="absolute",b.width="100px",b.height="100px",b.overflow=t,b.top="-9999px",c.body.appendChild(a),d=a.offsetWidth-a.clientWidth,c.body.removeChild(a),d},C=function(){var a,c,d;return c=b.navigator.userAgent,(a=/(?=.+Mac OS X)(?=.+Firefox)/.test(c))?(d=/Firefox\/\d{2}\./.exec(c),d&&(d=d[0].replace(/\D+/g,"")),a&&+d>23):!1},q=function(){function j(d,f){this.el=d,this.options=f,e||(e=A()),this.$el=a(this.el),this.doc=a(this.options.documentContext||c),this.win=a(this.options.windowContext||b),this.body=this.doc.find("body"),this.$content=this.$el.children("."+this.options.contentClass),this.$content.attr("tabindex",this.options.tabIndex||0),this.content=this.$content[0],this.previousPosition=0,this.options.iOSNativeScrolling&&null!=this.el.style.WebkitOverflowScrolling?this.nativeScrolling():this.generate(),this.createEvents(),this.addEvents(),this.reset()}return j.prototype.preventScrolling=function(a,b){if(this.isActive)if(a.type===f)(b===g&&a.originalEvent.detail>0||b===w&&a.originalEvent.detail<0)&&a.preventDefault();else if(a.type===p){if(!a.originalEvent||!a.originalEvent.wheelDelta)return;(b===g&&a.originalEvent.wheelDelta<0||b===w&&a.originalEvent.wheelDelta>0)&&a.preventDefault()}},j.prototype.nativeScrolling=function(){this.$content.css({WebkitOverflowScrolling:"touch"}),this.iOSNativeScrolling=!0,this.isActive=!0},j.prototype.updateScrollValues=function(){var a,b;a=this.content,this.maxScrollTop=a.scrollHeight-a.clientHeight,this.prevScrollTop=this.contentScrollTop||0,this.contentScrollTop=a.scrollTop,b=this.contentScrollTop>this.previousPosition?"down":this.contentScrollTop<this.previousPosition?"up":"same",this.previousPosition=this.contentScrollTop,"same"!==b&&this.$el.trigger("update",{position:this.contentScrollTop,maximum:this.maxScrollTop,direction:b}),this.iOSNativeScrolling||(this.maxSliderTop=this.paneHeight-this.sliderHeight,this.sliderTop=0===this.maxScrollTop?0:this.contentScrollTop*this.maxSliderTop/this.maxScrollTop)},j.prototype.setOnScrollStyles=function(){var a;B?(a={},a[E]="translate(0, "+this.sliderTop+"px)"):a={top:this.sliderTop},D?(y&&this.scrollRAF&&y(this.scrollRAF),this.scrollRAF=D(function(b){return function(){return b.scrollRAF=null,b.slider.css(a)}}(this))):this.slider.css(a)},j.prototype.createEvents=function(){this.events={down:function(a){return function(b){return a.isBeingDragged=!0,a.offsetY=b.pageY-a.slider.offset().top,a.slider.is(b.target)||(a.offsetY=0),a.pane.addClass(a.options.activeClass),a.doc.bind(n,a.events[h]).bind(o,a.events[w]),a.body.bind(m,a.events[i]),!1}}(this),drag:function(a){return function(b){return a.sliderY=b.pageY-a.$el.offset().top-a.paneTop-(a.offsetY||.5*a.sliderHeight),a.scroll(),a.contentScrollTop>=a.maxScrollTop&&a.prevScrollTop!==a.maxScrollTop?a.$el.trigger("scrollend"):0===a.contentScrollTop&&0!==a.prevScrollTop&&a.$el.trigger("scrolltop"),!1}}(this),up:function(a){return function(b){return a.isBeingDragged=!1,a.pane.removeClass(a.options.activeClass),a.doc.unbind(n,a.events[h]).unbind(o,a.events[w]),a.body.unbind(m,a.events[i]),!1}}(this),resize:function(a){return function(b){a.reset()}}(this),panedown:function(a){return function(b){return a.sliderY=(b.offsetY||b.originalEvent.layerY)-.5*a.sliderHeight,a.scroll(),a.events.down(b),!1}}(this),scroll:function(a){return function(b){a.updateScrollValues(),a.isBeingDragged||(a.iOSNativeScrolling||(a.sliderY=a.sliderTop,a.setOnScrollStyles()),null!=b&&(a.contentScrollTop>=a.maxScrollTop?(a.options.preventPageScrolling&&a.preventScrolling(b,g),a.prevScrollTop!==a.maxScrollTop&&a.$el.trigger("scrollend")):0===a.contentScrollTop&&(a.options.preventPageScrolling&&a.preventScrolling(b,w),0!==a.prevScrollTop&&a.$el.trigger("scrolltop"))))}}(this),wheel:function(a){return function(b){var c;if(null!=b)return c=b.delta||b.wheelDelta||b.originalEvent&&b.originalEvent.wheelDelta||-b.detail||b.originalEvent&&-b.originalEvent.detail,c&&(a.sliderY+=-c/3),a.scroll(),!1}}(this),enter:function(a){return function(b){var c;if(a.isBeingDragged)return 1!==(b.buttons||b.which)?(c=a.events)[w].apply(c,arguments):void 0}}(this)}},j.prototype.addEvents=function(){var a;this.removeEvents(),a=this.events,this.options.disableResize||this.win.bind(s,a[s]),this.iOSNativeScrolling||(this.slider.bind(l,a[g]),this.pane.bind(l,a[r]).bind(""+p+" "+f,a[x])),this.$content.bind(""+t+" "+p+" "+f+" "+v,a[t])},j.prototype.removeEvents=function(){var a;a=this.events,this.win.unbind(s,a[s]),this.iOSNativeScrolling||(this.slider.unbind(),this.pane.unbind()),this.$content.unbind(""+t+" "+p+" "+f+" "+v,a[t])},j.prototype.generate=function(){var a,c,d,f,g,h,i;return f=this.options,h=f.paneClass,i=f.sliderClass,a=f.contentClass,(g=this.$el.children("."+h)).length||g.children("."+i).length||this.$el.append('<div class="'+h+'"><div class="'+i+'" /></div>'),this.pane=this.$el.children("."+h),this.slider=this.pane.find("."+i),0===e&&C()?(d=b.getComputedStyle(this.content,null).getPropertyValue("padding-right").replace(/[^0-9.]+/g,""),c={right:-14,paddingRight:+d+14}):e&&(c={right:-e},this.$el.addClass(f.enabledClass)),null!=c&&this.$content.css(c),this},j.prototype.restore=function(){this.stopped=!1,this.iOSNativeScrolling||this.pane.show(),this.addEvents()},j.prototype.reset=function(){var a,b,c,f,g,h,i,j,k,l,m,n;return this.iOSNativeScrolling?void(this.contentHeight=this.content.scrollHeight):(this.$el.find("."+this.options.paneClass).length||this.generate().stop(),this.stopped&&this.restore(),a=this.content,f=a.style,g=f.overflowY,d&&this.$content.css({height:this.$content.height()}),b=a.scrollHeight+e,l=parseInt(this.$el.css("max-height"),10),l>0&&(this.$el.height(""),this.$el.height(a.scrollHeight>l?l:a.scrollHeight)),i=this.pane.outerHeight(!1),k=parseInt(this.pane.css("top"),10),h=parseInt(this.pane.css("bottom"),10),j=i+k+h,n=Math.round(j/b*i),n<this.options.sliderMinHeight?n=this.options.sliderMinHeight:null!=this.options.sliderMaxHeight&&n>this.options.sliderMaxHeight&&(n=this.options.sliderMaxHeight),g===t&&f.overflowX!==t&&(n+=e),this.maxSliderTop=j-n,this.contentHeight=b,this.paneHeight=i,this.paneOuterHeight=j,this.sliderHeight=n,this.paneTop=k,this.slider.height(n),this.events.scroll(),this.pane.show(),this.isActive=!0,a.scrollHeight===a.clientHeight||this.pane.outerHeight(!0)>=a.scrollHeight&&g!==t?(this.pane.hide(),this.isActive=!1):this.el.clientHeight===a.scrollHeight&&g===t?this.slider.hide():this.slider.show(),this.pane.css({opacity:this.options.alwaysVisible?1:"",visibility:this.options.alwaysVisible?"visible":""}),c=this.$content.css("position"),("static"===c||"relative"===c)&&(m=parseInt(this.$content.css("right"),10),m&&this.$content.css({right:"",marginRight:m})),this)},j.prototype.scroll=function(){return this.isActive?(this.sliderY=Math.max(0,this.sliderY),this.sliderY=Math.min(this.maxSliderTop,this.sliderY),this.$content.scrollTop(this.maxScrollTop*this.sliderY/this.maxSliderTop),this.iOSNativeScrolling||(this.updateScrollValues(),this.setOnScrollStyles()),this):void 0},j.prototype.scrollBottom=function(a){return this.isActive?(this.$content.scrollTop(this.contentHeight-this.$content.height()-a).trigger(p),this.stop().restore(),this):void 0},j.prototype.scrollTop=function(a){return this.isActive?(this.$content.scrollTop(+a).trigger(p),this.stop().restore(),this):void 0},j.prototype.scrollTo=function(a){return this.isActive?(this.scrollTop(this.$el.find(a).get(0).offsetTop),this):void 0},j.prototype.stop=function(){return y&&this.scrollRAF&&(y(this.scrollRAF),this.scrollRAF=null),this.stopped=!0,this.removeEvents(),this.iOSNativeScrolling||this.pane.hide(),this},j.prototype.destroy=function(){return this.stopped||this.stop(),!this.iOSNativeScrolling&&this.pane.length&&this.pane.remove(),d&&this.$content.height(""),this.$content.removeAttr("tabindex"),this.$el.hasClass(this.options.enabledClass)&&(this.$el.removeClass(this.options.enabledClass),this.$content.css({right:""})),this},j.prototype.flash=function(){return!this.iOSNativeScrolling&&this.isActive?(this.reset(),this.pane.addClass(this.options.flashedClass),setTimeout(function(a){return function(){a.pane.removeClass(a.options.flashedClass)}}(this),this.options.flashDelay),this):void 0},j}(),a.fn.nanoScroller=function(b){return this.each(function(){var c,d;if((d=this.nanoscroller)||(c=a.extend({},z,b),this.nanoscroller=d=new q(this,c)),b&&"object"==typeof b){if(a.extend(d.options,b),null!=b.scrollBottom)return d.scrollBottom(b.scrollBottom);if(null!=b.scrollTop)return d.scrollTop(b.scrollTop);if(b.scrollTo)return d.scrollTo(b.scrollTo);if("bottom"===b.scroll)return d.scrollBottom(0);if("top"===b.scroll)return d.scrollTop(0);if(b.scroll&&b.scroll instanceof a)return d.scrollTo(b.scroll);if(b.stop)return d.stop();if(b.destroy)return d.destroy();if(b.flash)return d.flash()}return d.reset()})},a.fn.nanoScroller.Constructor=q});
4
-//# sourceMappingURL=jquery.nanoscroller.min.js.map
\ No newline at end of file
web/lib/perfect-scrollbar-0.6.15.min.js
new
+2
@@ -0,0 +1,2 @@
1
+/* perfect-scrollbar v0.6.15 */
2
+!function t(e,n,r){function o(i,s){if(!n[i]){if(!e[i]){var a="function"==typeof require&&require;if(!s&&a)return a(i,!0);if(l)return l(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var u=n[i]={exports:{}};e[i][0].call(u.exports,function(t){var n=e[i][1][t];return o(n?n:t)},u,u.exports,t,e,n,r)}return n[i].exports}for(var l="function"==typeof require&&require,i=0;i<r.length;i++)o(r[i]);return o}({1:[function(t,e,n){"use strict";var r=t("../main");"function"==typeof define&&define.amd?define(r):(window.PerfectScrollbar=r,"undefined"==typeof window.Ps&&(window.Ps=r))},{"../main":7}],2:[function(t,e,n){"use strict";function r(t,e){var n=t.className.split(" ");n.indexOf(e)<0&&n.push(e),t.className=n.join(" ")}function o(t,e){var n=t.className.split(" "),r=n.indexOf(e);r>=0&&n.splice(r,1),t.className=n.join(" ")}n.add=function(t,e){t.classList?t.classList.add(e):r(t,e)},n.remove=function(t,e){t.classList?t.classList.remove(e):o(t,e)},n.list=function(t){return t.classList?Array.prototype.slice.apply(t.classList):t.className.split(" ")}},{}],3:[function(t,e,n){"use strict";function r(t,e){return window.getComputedStyle(t)[e]}function o(t,e,n){return"number"==typeof n&&(n=n.toString()+"px"),t.style[e]=n,t}function l(t,e){for(var n in e){var r=e[n];"number"==typeof r&&(r=r.toString()+"px"),t.style[n]=r}return t}var i={};i.e=function(t,e){var n=document.createElement(t);return n.className=e,n},i.appendTo=function(t,e){return e.appendChild(t),t},i.css=function(t,e,n){return"object"==typeof e?l(t,e):"undefined"==typeof n?r(t,e):o(t,e,n)},i.matches=function(t,e){return"undefined"!=typeof t.matches?t.matches(e):"undefined"!=typeof t.matchesSelector?t.matchesSelector(e):"undefined"!=typeof t.webkitMatchesSelector?t.webkitMatchesSelector(e):"undefined"!=typeof t.mozMatchesSelector?t.mozMatchesSelector(e):"undefined"!=typeof t.msMatchesSelector?t.msMatchesSelector(e):void 0},i.remove=function(t){"undefined"!=typeof t.remove?t.remove():t.parentNode&&t.parentNode.removeChild(t)},i.queryChildren=function(t,e){return Array.prototype.filter.call(t.childNodes,function(t){return i.matches(t,e)})},e.exports=i},{}],4:[function(t,e,n){"use strict";var r=function(t){this.element=t,this.events={}};r.prototype.bind=function(t,e){"undefined"==typeof this.events[t]&&(this.events[t]=[]),this.events[t].push(e),this.element.addEventListener(t,e,!1)},r.prototype.unbind=function(t,e){var n="undefined"!=typeof e;this.events[t]=this.events[t].filter(function(r){return!(!n||r===e)||(this.element.removeEventListener(t,r,!1),!1)},this)},r.prototype.unbindAll=function(){for(var t in this.events)this.unbind(t)};var o=function(){this.eventElements=[]};o.prototype.eventElement=function(t){var e=this.eventElements.filter(function(e){return e.element===t})[0];return"undefined"==typeof e&&(e=new r(t),this.eventElements.push(e)),e},o.prototype.bind=function(t,e,n){this.eventElement(t).bind(e,n)},o.prototype.unbind=function(t,e,n){this.eventElement(t).unbind(e,n)},o.prototype.unbindAll=function(){for(var t=0;t<this.eventElements.length;t++)this.eventElements[t].unbindAll()},o.prototype.once=function(t,e,n){var r=this.eventElement(t),o=function(t){r.unbind(e,o),n(t)};r.bind(e,o)},e.exports=o},{}],5:[function(t,e,n){"use strict";e.exports=function(){function t(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return function(){return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}}()},{}],6:[function(t,e,n){"use strict";var r=t("./class"),o=t("./dom"),l=n.toInt=function(t){return parseInt(t,10)||0},i=n.clone=function(t){if(t){if(t.constructor===Array)return t.map(i);if("object"==typeof t){var e={};for(var n in t)e[n]=i(t[n]);return e}return t}return null};n.extend=function(t,e){var n=i(t);for(var r in e)n[r]=i(e[r]);return n},n.isEditable=function(t){return o.matches(t,"input,[contenteditable]")||o.matches(t,"select,[contenteditable]")||o.matches(t,"textarea,[contenteditable]")||o.matches(t,"button,[contenteditable]")},n.removePsClasses=function(t){for(var e=r.list(t),n=0;n<e.length;n++){var o=e[n];0===o.indexOf("ps-")&&r.remove(t,o)}},n.outerWidth=function(t){return l(o.css(t,"width"))+l(o.css(t,"paddingLeft"))+l(o.css(t,"paddingRight"))+l(o.css(t,"borderLeftWidth"))+l(o.css(t,"borderRightWidth"))},n.startScrolling=function(t,e){r.add(t,"ps-in-scrolling"),"undefined"!=typeof e?r.add(t,"ps-"+e):(r.add(t,"ps-x"),r.add(t,"ps-y"))},n.stopScrolling=function(t,e){r.remove(t,"ps-in-scrolling"),"undefined"!=typeof e?r.remove(t,"ps-"+e):(r.remove(t,"ps-x"),r.remove(t,"ps-y"))},n.env={isWebKit:"WebkitAppearance"in document.documentElement.style,supportsTouch:"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch,supportsIePointer:null!==window.navigator.msMaxTouchPoints}},{"./class":2,"./dom":3}],7:[function(t,e,n){"use strict";var r=t("./plugin/destroy"),o=t("./plugin/initialize"),l=t("./plugin/update");e.exports={initialize:o,update:l,destroy:r}},{"./plugin/destroy":9,"./plugin/initialize":17,"./plugin/update":21}],8:[function(t,e,n){"use strict";e.exports={handlers:["click-rail","drag-scrollbar","keyboard","wheel","touch"],maxScrollbarLength:null,minScrollbarLength:null,scrollXMarginOffset:0,scrollYMarginOffset:0,suppressScrollX:!1,suppressScrollY:!1,swipePropagation:!0,useBothWheelAxes:!1,wheelPropagation:!1,wheelSpeed:1,theme:"default"}},{}],9:[function(t,e,n){"use strict";var r=t("../lib/helper"),o=t("../lib/dom"),l=t("./instances");e.exports=function(t){var e=l.get(t);e&&(e.event.unbindAll(),o.remove(e.scrollbarX),o.remove(e.scrollbarY),o.remove(e.scrollbarXRail),o.remove(e.scrollbarYRail),r.removePsClasses(t),l.remove(t))}},{"../lib/dom":3,"../lib/helper":6,"./instances":18}],10:[function(t,e,n){"use strict";function r(t,e){function n(t){return t.getBoundingClientRect()}var r=function(t){t.stopPropagation()};e.event.bind(e.scrollbarY,"click",r),e.event.bind(e.scrollbarYRail,"click",function(r){var o=r.pageY-window.pageYOffset-n(e.scrollbarYRail).top,s=o>e.scrollbarYTop?1:-1;i(t,"top",t.scrollTop+s*e.containerHeight),l(t),r.stopPropagation()}),e.event.bind(e.scrollbarX,"click",r),e.event.bind(e.scrollbarXRail,"click",function(r){var o=r.pageX-window.pageXOffset-n(e.scrollbarXRail).left,s=o>e.scrollbarXLeft?1:-1;i(t,"left",t.scrollLeft+s*e.containerWidth),l(t),r.stopPropagation()})}var o=t("../instances"),l=t("../update-geometry"),i=t("../update-scroll");e.exports=function(t){var e=o.get(t);r(t,e)}},{"../instances":18,"../update-geometry":19,"../update-scroll":20}],11:[function(t,e,n){"use strict";function r(t,e){function n(n){var o=r+n*e.railXRatio,i=Math.max(0,e.scrollbarXRail.getBoundingClientRect().left)+e.railXRatio*(e.railXWidth-e.scrollbarXWidth);o<0?e.scrollbarXLeft=0:o>i?e.scrollbarXLeft=i:e.scrollbarXLeft=o;var s=l.toInt(e.scrollbarXLeft*(e.contentWidth-e.containerWidth)/(e.containerWidth-e.railXRatio*e.scrollbarXWidth))-e.negativeScrollAdjustment;c(t,"left",s)}var r=null,o=null,s=function(e){n(e.pageX-o),a(t),e.stopPropagation(),e.preventDefault()},u=function(){l.stopScrolling(t,"x"),e.event.unbind(e.ownerDocument,"mousemove",s)};e.event.bind(e.scrollbarX,"mousedown",function(n){o=n.pageX,r=l.toInt(i.css(e.scrollbarX,"left"))*e.railXRatio,l.startScrolling(t,"x"),e.event.bind(e.ownerDocument,"mousemove",s),e.event.once(e.ownerDocument,"mouseup",u),n.stopPropagation(),n.preventDefault()})}function o(t,e){function n(n){var o=r+n*e.railYRatio,i=Math.max(0,e.scrollbarYRail.getBoundingClientRect().top)+e.railYRatio*(e.railYHeight-e.scrollbarYHeight);o<0?e.scrollbarYTop=0:o>i?e.scrollbarYTop=i:e.scrollbarYTop=o;var s=l.toInt(e.scrollbarYTop*(e.contentHeight-e.containerHeight)/(e.containerHeight-e.railYRatio*e.scrollbarYHeight));c(t,"top",s)}var r=null,o=null,s=function(e){n(e.pageY-o),a(t),e.stopPropagation(),e.preventDefault()},u=function(){l.stopScrolling(t,"y"),e.event.unbind(e.ownerDocument,"mousemove",s)};e.event.bind(e.scrollbarY,"mousedown",function(n){o=n.pageY,r=l.toInt(i.css(e.scrollbarY,"top"))*e.railYRatio,l.startScrolling(t,"y"),e.event.bind(e.ownerDocument,"mousemove",s),e.event.once(e.ownerDocument,"mouseup",u),n.stopPropagation(),n.preventDefault()})}var l=t("../../lib/helper"),i=t("../../lib/dom"),s=t("../instances"),a=t("../update-geometry"),c=t("../update-scroll");e.exports=function(t){var e=s.get(t);r(t,e),o(t,e)}},{"../../lib/dom":3,"../../lib/helper":6,"../instances":18,"../update-geometry":19,"../update-scroll":20}],12:[function(t,e,n){"use strict";function r(t,e){function n(n,r){var o=t.scrollTop;if(0===n){if(!e.scrollbarYActive)return!1;if(0===o&&r>0||o>=e.contentHeight-e.containerHeight&&r<0)return!e.settings.wheelPropagation}var l=t.scrollLeft;if(0===r){if(!e.scrollbarXActive)return!1;if(0===l&&n<0||l>=e.contentWidth-e.containerWidth&&n>0)return!e.settings.wheelPropagation}return!0}var r=!1;e.event.bind(t,"mouseenter",function(){r=!0}),e.event.bind(t,"mouseleave",function(){r=!1});var i=!1;e.event.bind(e.ownerDocument,"keydown",function(c){if(!(c.isDefaultPrevented&&c.isDefaultPrevented()||c.defaultPrevented)){var u=l.matches(e.scrollbarX,":focus")||l.matches(e.scrollbarY,":focus");if(r||u){var d=document.activeElement?document.activeElement:e.ownerDocument.activeElement;if(d){if("IFRAME"===d.tagName)d=d.contentDocument.activeElement;else for(;d.shadowRoot;)d=d.shadowRoot.activeElement;if(o.isEditable(d))return}var p=0,f=0;switch(c.which){case 37:p=c.metaKey?-e.contentWidth:c.altKey?-e.containerWidth:-30;break;case 38:f=c.metaKey?e.contentHeight:c.altKey?e.containerHeight:30;break;case 39:p=c.metaKey?e.contentWidth:c.altKey?e.containerWidth:30;break;case 40:f=c.metaKey?-e.contentHeight:c.altKey?-e.containerHeight:-30;break;case 33:f=90;break;case 32:f=c.shiftKey?90:-90;break;case 34:f=-90;break;case 35:f=c.ctrlKey?-e.contentHeight:-e.containerHeight;break;case 36:f=c.ctrlKey?t.scrollTop:e.containerHeight;break;default:return}a(t,"top",t.scrollTop-f),a(t,"left",t.scrollLeft+p),s(t),i=n(p,f),i&&c.preventDefault()}}})}var o=t("../../lib/helper"),l=t("../../lib/dom"),i=t("../instances"),s=t("../update-geometry"),a=t("../update-scroll");e.exports=function(t){var e=i.get(t);r(t,e)}},{"../../lib/dom":3,"../../lib/helper":6,"../instances":18,"../update-geometry":19,"../update-scroll":20}],13:[function(t,e,n){"use strict";function r(t,e){function n(n,r){var o=t.scrollTop;if(0===n){if(!e.scrollbarYActive)return!1;if(0===o&&r>0||o>=e.contentHeight-e.containerHeight&&r<0)return!e.settings.wheelPropagation}var l=t.scrollLeft;if(0===r){if(!e.scrollbarXActive)return!1;if(0===l&&n<0||l>=e.contentWidth-e.containerWidth&&n>0)return!e.settings.wheelPropagation}return!0}function r(t){var e=t.deltaX,n=-1*t.deltaY;return"undefined"!=typeof e&&"undefined"!=typeof n||(e=-1*t.wheelDeltaX/6,n=t.wheelDeltaY/6),t.deltaMode&&1===t.deltaMode&&(e*=10,n*=10),e!==e&&n!==n&&(e=0,n=t.wheelDelta),t.shiftKey?[-n,-e]:[e,n]}function o(e,n){var r=t.querySelector("textarea:hover, select[multiple]:hover, .ps-child:hover");if(r){if(!window.getComputedStyle(r).overflow.match(/(scroll|auto)/))return!1;var o=r.scrollHeight-r.clientHeight;if(o>0&&!(0===r.scrollTop&&n>0||r.scrollTop===o&&n<0))return!0;var l=r.scrollLeft-r.clientWidth;if(l>0&&!(0===r.scrollLeft&&e<0||r.scrollLeft===l&&e>0))return!0}return!1}function s(s){var c=r(s),u=c[0],d=c[1];o(u,d)||(a=!1,e.settings.useBothWheelAxes?e.scrollbarYActive&&!e.scrollbarXActive?(d?i(t,"top",t.scrollTop-d*e.settings.wheelSpeed):i(t,"top",t.scrollTop+u*e.settings.wheelSpeed),a=!0):e.scrollbarXActive&&!e.scrollbarYActive&&(u?i(t,"left",t.scrollLeft+u*e.settings.wheelSpeed):i(t,"left",t.scrollLeft-d*e.settings.wheelSpeed),a=!0):(i(t,"top",t.scrollTop-d*e.settings.wheelSpeed),i(t,"left",t.scrollLeft+u*e.settings.wheelSpeed)),l(t),a=a||n(u,d),a&&(s.stopPropagation(),s.preventDefault()))}var a=!1;"undefined"!=typeof window.onwheel?e.event.bind(t,"wheel",s):"undefined"!=typeof window.onmousewheel&&e.event.bind(t,"mousewheel",s)}var o=t("../instances"),l=t("../update-geometry"),i=t("../update-scroll");e.exports=function(t){var e=o.get(t);r(t,e)}},{"../instances":18,"../update-geometry":19,"../update-scroll":20}],14:[function(t,e,n){"use strict";function r(t,e){e.event.bind(t,"scroll",function(){l(t)})}var o=t("../instances"),l=t("../update-geometry");e.exports=function(t){var e=o.get(t);r(t,e)}},{"../instances":18,"../update-geometry":19}],15:[function(t,e,n){"use strict";function r(t,e){function n(){var t=window.getSelection?window.getSelection():document.getSelection?document.getSelection():"";return 0===t.toString().length?null:t.getRangeAt(0).commonAncestorContainer}function r(){c||(c=setInterval(function(){return l.get(t)?(s(t,"top",t.scrollTop+u.top),s(t,"left",t.scrollLeft+u.left),void i(t)):void clearInterval(c)},50))}function a(){c&&(clearInterval(c),c=null),o.stopScrolling(t)}var c=null,u={top:0,left:0},d=!1;e.event.bind(e.ownerDocument,"selectionchange",function(){t.contains(n())?d=!0:(d=!1,a())}),e.event.bind(window,"mouseup",function(){d&&(d=!1,a())}),e.event.bind(window,"keyup",function(){d&&(d=!1,a())}),e.event.bind(window,"mousemove",function(e){if(d){var n={x:e.pageX,y:e.pageY},l={left:t.offsetLeft,right:t.offsetLeft+t.offsetWidth,top:t.offsetTop,bottom:t.offsetTop+t.offsetHeight};n.x<l.left+3?(u.left=-5,o.startScrolling(t,"x")):n.x>l.right-3?(u.left=5,o.startScrolling(t,"x")):u.left=0,n.y<l.top+3?(l.top+3-n.y<5?u.top=-5:u.top=-20,o.startScrolling(t,"y")):n.y>l.bottom-3?(n.y-l.bottom+3<5?u.top=5:u.top=20,o.startScrolling(t,"y")):u.top=0,0===u.top&&0===u.left?a():r()}})}var o=t("../../lib/helper"),l=t("../instances"),i=t("../update-geometry"),s=t("../update-scroll");e.exports=function(t){var e=l.get(t);r(t,e)}},{"../../lib/helper":6,"../instances":18,"../update-geometry":19,"../update-scroll":20}],16:[function(t,e,n){"use strict";function r(t,e,n,r){function o(n,r){var o=t.scrollTop,l=t.scrollLeft,i=Math.abs(n),s=Math.abs(r);if(s>i){if(r<0&&o===e.contentHeight-e.containerHeight||r>0&&0===o)return!e.settings.swipePropagation}else if(i>s&&(n<0&&l===e.contentWidth-e.containerWidth||n>0&&0===l))return!e.settings.swipePropagation;return!0}function a(e,n){s(t,"top",t.scrollTop-n),s(t,"left",t.scrollLeft-e),i(t)}function c(){w=!0}function u(){w=!1}function d(t){return t.targetTouches?t.targetTouches[0]:t}function p(t){return!(!t.targetTouches||1!==t.targetTouches.length)||!(!t.pointerType||"mouse"===t.pointerType||t.pointerType===t.MSPOINTER_TYPE_MOUSE)}function f(t){if(p(t)){Y=!0;var e=d(t);g.pageX=e.pageX,g.pageY=e.pageY,v=(new Date).getTime(),null!==y&&clearInterval(y),t.stopPropagation()}}function h(t){if(!Y&&e.settings.swipePropagation&&f(t),!w&&Y&&p(t)){var n=d(t),r={pageX:n.pageX,pageY:n.pageY},l=r.pageX-g.pageX,i=r.pageY-g.pageY;a(l,i),g=r;var s=(new Date).getTime(),c=s-v;c>0&&(m.x=l/c,m.y=i/c,v=s),o(l,i)&&(t.stopPropagation(),t.preventDefault())}}function b(){!w&&Y&&(Y=!1,clearInterval(y),y=setInterval(function(){return l.get(t)&&(m.x||m.y)?Math.abs(m.x)<.01&&Math.abs(m.y)<.01?void clearInterval(y):(a(30*m.x,30*m.y),m.x*=.8,void(m.y*=.8)):void clearInterval(y)},10))}var g={},v=0,m={},y=null,w=!1,Y=!1;n&&(e.event.bind(window,"touchstart",c),e.event.bind(window,"touchend",u),e.event.bind(t,"touchstart",f),e.event.bind(t,"touchmove",h),e.event.bind(t,"touchend",b)),r&&(window.PointerEvent?(e.event.bind(window,"pointerdown",c),e.event.bind(window,"pointerup",u),e.event.bind(t,"pointerdown",f),e.event.bind(t,"pointermove",h),e.event.bind(t,"pointerup",b)):window.MSPointerEvent&&(e.event.bind(window,"MSPointerDown",c),e.event.bind(window,"MSPointerUp",u),e.event.bind(t,"MSPointerDown",f),e.event.bind(t,"MSPointerMove",h),e.event.bind(t,"MSPointerUp",b)))}var o=t("../../lib/helper"),l=t("../instances"),i=t("../update-geometry"),s=t("../update-scroll");e.exports=function(t){if(o.env.supportsTouch||o.env.supportsIePointer){var e=l.get(t);r(t,e,o.env.supportsTouch,o.env.supportsIePointer)}}},{"../../lib/helper":6,"../instances":18,"../update-geometry":19,"../update-scroll":20}],17:[function(t,e,n){"use strict";var r=t("../lib/helper"),o=t("../lib/class"),l=t("./instances"),i=t("./update-geometry"),s={"click-rail":t("./handler/click-rail"),"drag-scrollbar":t("./handler/drag-scrollbar"),keyboard:t("./handler/keyboard"),wheel:t("./handler/mouse-wheel"),touch:t("./handler/touch"),selection:t("./handler/selection")},a=t("./handler/native-scroll");e.exports=function(t,e){e="object"==typeof e?e:{},o.add(t,"ps-container");var n=l.add(t);n.settings=r.extend(n.settings,e),o.add(t,"ps-theme-"+n.settings.theme),n.settings.handlers.forEach(function(e){s[e](t)}),a(t),i(t)}},{"../lib/class":2,"../lib/helper":6,"./handler/click-rail":10,"./handler/drag-scrollbar":11,"./handler/keyboard":12,"./handler/mouse-wheel":13,"./handler/native-scroll":14,"./handler/selection":15,"./handler/touch":16,"./instances":18,"./update-geometry":19}],18:[function(t,e,n){"use strict";function r(t){function e(){a.add(t,"ps-focus")}function n(){a.remove(t,"ps-focus")}var r=this;r.settings=s.clone(c),r.containerWidth=null,r.containerHeight=null,r.contentWidth=null,r.contentHeight=null,r.isRtl="rtl"===u.css(t,"direction"),r.isNegativeScroll=function(){var e=t.scrollLeft,n=null;return t.scrollLeft=-1,n=t.scrollLeft<0,t.scrollLeft=e,n}(),r.negativeScrollAdjustment=r.isNegativeScroll?t.scrollWidth-t.clientWidth:0,r.event=new d,r.ownerDocument=t.ownerDocument||document,r.scrollbarXRail=u.appendTo(u.e("div","ps-scrollbar-x-rail"),t),r.scrollbarX=u.appendTo(u.e("div","ps-scrollbar-x"),r.scrollbarXRail),r.scrollbarX.setAttribute("tabindex",0),r.event.bind(r.scrollbarX,"focus",e),r.event.bind(r.scrollbarX,"blur",n),r.scrollbarXActive=null,r.scrollbarXWidth=null,r.scrollbarXLeft=null,r.scrollbarXBottom=s.toInt(u.css(r.scrollbarXRail,"bottom")),r.isScrollbarXUsingBottom=r.scrollbarXBottom===r.scrollbarXBottom,r.scrollbarXTop=r.isScrollbarXUsingBottom?null:s.toInt(u.css(r.scrollbarXRail,"top")),r.railBorderXWidth=s.toInt(u.css(r.scrollbarXRail,"borderLeftWidth"))+s.toInt(u.css(r.scrollbarXRail,"borderRightWidth")),u.css(r.scrollbarXRail,"display","block"),r.railXMarginWidth=s.toInt(u.css(r.scrollbarXRail,"marginLeft"))+s.toInt(u.css(r.scrollbarXRail,"marginRight")),u.css(r.scrollbarXRail,"display",""),r.railXWidth=null,r.railXRatio=null,r.scrollbarYRail=u.appendTo(u.e("div","ps-scrollbar-y-rail"),t),r.scrollbarY=u.appendTo(u.e("div","ps-scrollbar-y"),r.scrollbarYRail),r.scrollbarY.setAttribute("tabindex",0),r.event.bind(r.scrollbarY,"focus",e),r.event.bind(r.scrollbarY,"blur",n),r.scrollbarYActive=null,r.scrollbarYHeight=null,r.scrollbarYTop=null,r.scrollbarYRight=s.toInt(u.css(r.scrollbarYRail,"right")),r.isScrollbarYUsingRight=r.scrollbarYRight===r.scrollbarYRight,r.scrollbarYLeft=r.isScrollbarYUsingRight?null:s.toInt(u.css(r.scrollbarYRail,"left")),r.scrollbarYOuterWidth=r.isRtl?s.outerWidth(r.scrollbarY):null,r.railBorderYWidth=s.toInt(u.css(r.scrollbarYRail,"borderTopWidth"))+s.toInt(u.css(r.scrollbarYRail,"borderBottomWidth")),u.css(r.scrollbarYRail,"display","block"),r.railYMarginHeight=s.toInt(u.css(r.scrollbarYRail,"marginTop"))+s.toInt(u.css(r.scrollbarYRail,"marginBottom")),u.css(r.scrollbarYRail,"display",""),r.railYHeight=null,r.railYRatio=null}function o(t){return t.getAttribute("data-ps-id")}function l(t,e){t.setAttribute("data-ps-id",e)}function i(t){t.removeAttribute("data-ps-id")}var s=t("../lib/helper"),a=t("../lib/class"),c=t("./default-setting"),u=t("../lib/dom"),d=t("../lib/event-manager"),p=t("../lib/guid"),f={};n.add=function(t){var e=p();return l(t,e),f[e]=new r(t),f[e]},n.remove=function(t){delete f[o(t)],i(t)},n.get=function(t){return f[o(t)]}},{"../lib/class":2,"../lib/dom":3,"../lib/event-manager":4,"../lib/guid":5,"../lib/helper":6,"./default-setting":8}],19:[function(t,e,n){"use strict";function r(t,e){return t.settings.minScrollbarLength&&(e=Math.max(e,t.settings.minScrollbarLength)),t.settings.maxScrollbarLength&&(e=Math.min(e,t.settings.maxScrollbarLength)),e}function o(t,e){var n={width:e.railXWidth};e.isRtl?n.left=e.negativeScrollAdjustment+t.scrollLeft+e.containerWidth-e.contentWidth:n.left=t.scrollLeft,e.isScrollbarXUsingBottom?n.bottom=e.scrollbarXBottom-t.scrollTop:n.top=e.scrollbarXTop+t.scrollTop,s.css(e.scrollbarXRail,n);var r={top:t.scrollTop,height:e.railYHeight};e.isScrollbarYUsingRight?e.isRtl?r.right=e.contentWidth-(e.negativeScrollAdjustment+t.scrollLeft)-e.scrollbarYRight-e.scrollbarYOuterWidth:r.right=e.scrollbarYRight-t.scrollLeft:e.isRtl?r.left=e.negativeScrollAdjustment+t.scrollLeft+2*e.containerWidth-e.contentWidth-e.scrollbarYLeft-e.scrollbarYOuterWidth:r.left=e.scrollbarYLeft+t.scrollLeft,s.css(e.scrollbarYRail,r),s.css(e.scrollbarX,{left:e.scrollbarXLeft,width:e.scrollbarXWidth-e.railBorderXWidth}),s.css(e.scrollbarY,{top:e.scrollbarYTop,height:e.scrollbarYHeight-e.railBorderYWidth})}var l=t("../lib/helper"),i=t("../lib/class"),s=t("../lib/dom"),a=t("./instances"),c=t("./update-scroll");e.exports=function(t){var e=a.get(t);e.containerWidth=t.clientWidth,e.containerHeight=t.clientHeight,e.contentWidth=t.scrollWidth,e.contentHeight=t.scrollHeight;var n;t.contains(e.scrollbarXRail)||(n=s.queryChildren(t,".ps-scrollbar-x-rail"),n.length>0&&n.forEach(function(t){s.remove(t)}),s.appendTo(e.scrollbarXRail,t)),t.contains(e.scrollbarYRail)||(n=s.queryChildren(t,".ps-scrollbar-y-rail"),n.length>0&&n.forEach(function(t){s.remove(t)}),s.appendTo(e.scrollbarYRail,t)),!e.settings.suppressScrollX&&e.containerWidth+e.settings.scrollXMarginOffset<e.contentWidth?(e.scrollbarXActive=!0,e.railXWidth=e.containerWidth-e.railXMarginWidth,e.railXRatio=e.containerWidth/e.railXWidth,e.scrollbarXWidth=r(e,l.toInt(e.railXWidth*e.containerWidth/e.contentWidth)),e.scrollbarXLeft=l.toInt((e.negativeScrollAdjustment+t.scrollLeft)*(e.railXWidth-e.scrollbarXWidth)/(e.contentWidth-e.containerWidth))):e.scrollbarXActive=!1,!e.settings.suppressScrollY&&e.containerHeight+e.settings.scrollYMarginOffset<e.contentHeight?(e.scrollbarYActive=!0,e.railYHeight=e.containerHeight-e.railYMarginHeight,e.railYRatio=e.containerHeight/e.railYHeight,e.scrollbarYHeight=r(e,l.toInt(e.railYHeight*e.containerHeight/e.contentHeight)),e.scrollbarYTop=l.toInt(t.scrollTop*(e.railYHeight-e.scrollbarYHeight)/(e.contentHeight-e.containerHeight))):e.scrollbarYActive=!1,e.scrollbarXLeft>=e.railXWidth-e.scrollbarXWidth&&(e.scrollbarXLeft=e.railXWidth-e.scrollbarXWidth),e.scrollbarYTop>=e.railYHeight-e.scrollbarYHeight&&(e.scrollbarYTop=e.railYHeight-e.scrollbarYHeight),o(t,e),e.scrollbarXActive?i.add(t,"ps-active-x"):(i.remove(t,"ps-active-x"),e.scrollbarXWidth=0,e.scrollbarXLeft=0,c(t,"left",0)),e.scrollbarYActive?i.add(t,"ps-active-y"):(i.remove(t,"ps-active-y"),e.scrollbarYHeight=0,e.scrollbarYTop=0,c(t,"top",0))}},{"../lib/class":2,"../lib/dom":3,"../lib/helper":6,"./instances":18,"./update-scroll":20}],20:[function(t,e,n){"use strict";var r,o,l=t("./instances"),i=function(t){var e=document.createEvent("Event");return e.initEvent(t,!0,!0),e};e.exports=function(t,e,n){if("undefined"==typeof t)throw"You must provide an element to the update-scroll function";if("undefined"==typeof e)throw"You must provide an axis to the update-scroll function";if("undefined"==typeof n)throw"You must provide a value to the update-scroll function";"top"===e&&n<=0&&(t.scrollTop=n=0,t.dispatchEvent(i("ps-y-reach-start"))),"left"===e&&n<=0&&(t.scrollLeft=n=0,t.dispatchEvent(i("ps-x-reach-start")));var s=l.get(t);"top"===e&&n>=s.contentHeight-s.containerHeight&&(n=s.contentHeight-s.containerHeight,n-t.scrollTop<=1?n=t.scrollTop:t.scrollTop=n,t.dispatchEvent(i("ps-y-reach-end"))),"left"===e&&n>=s.contentWidth-s.containerWidth&&(n=s.contentWidth-s.containerWidth,n-t.scrollLeft<=1?n=t.scrollLeft:t.scrollLeft=n,t.dispatchEvent(i("ps-x-reach-end"))),r||(r=t.scrollTop),o||(o=t.scrollLeft),"top"===e&&n<r&&t.dispatchEvent(i("ps-scroll-up")),"top"===e&&n>r&&t.dispatchEvent(i("ps-scroll-down")),"left"===e&&n<o&&t.dispatchEvent(i("ps-scroll-left")),"left"===e&&n>o&&t.dispatchEvent(i("ps-scroll-right")),"top"===e&&(t.scrollTop=r=n,t.dispatchEvent(i("ps-scroll-y"))),"left"===e&&(t.scrollLeft=o=n,t.dispatchEvent(i("ps-scroll-x")))}},{"./instances":18}],21:[function(t,e,n){"use strict";var r=t("../lib/helper"),o=t("../lib/dom"),l=t("./instances"),i=t("./update-geometry"),s=t("./update-scroll");e.exports=function(t){var e=l.get(t);e&&(e.negativeScrollAdjustment=e.isNegativeScroll?t.scrollWidth-t.clientWidth:0,o.css(e.scrollbarXRail,"display","block"),o.css(e.scrollbarYRail,"display","block"),e.railXMarginWidth=r.toInt(o.css(e.scrollbarXRail,"marginLeft"))+r.toInt(o.css(e.scrollbarXRail,"marginRight")),e.railYMarginHeight=r.toInt(o.css(e.scrollbarYRail,"marginTop"))+r.toInt(o.css(e.scrollbarYRail,"marginBottom")),o.css(e.scrollbarXRail,"display","none"),o.css(e.scrollbarYRail,"display","none"),i(t),s(t,"top",t.scrollTop),s(t,"left",t.scrollLeft),o.css(e.scrollbarXRail,"display",""),o.css(e.scrollbarYRail,"display",""))}},{"../lib/dom":3,"../lib/helper":6,"./instances":18,"./update-geometry":19,"./update-scroll":20}]},{},[1]);
\ No newline at end of file
web/registry.html
+1
-1
@@ -169,7 +169,7 @@ var netdataRegistryCallback = function(machines_array) {
169
and that you have chown it to be owned by netdata:netdata
170
-->
171
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
172
-<script type="text/javascript" src="dashboard.js?v20161218-1"></script>
172
+<script type="text/javascript" src="dashboard.js?v20161229-1"></script>
173
174
<script>
175
// Set options for TV operation
web/tv.html
+1
-1
@@ -50,7 +50,7 @@ var netdataTheme = 'slate'; // this is dark
50
and that you have chown it to be owned by netdata:netdata
51
-->
52
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
53
-<script type="text/javascript" src="dashboard.js?v20161218-1"></script>
53
+<script type="text/javascript" src="dashboard.js?v20161229-1"></script>
54
55
<script>
56
// Set options for TV operation