New perf dashboard should have the ability to overlay moving average with an envelope
[WebKit-https.git] / Websites / perf.webkit.org / public / v2 / chart-pane.css
1 .chart-pane {
2     border: 1px solid #bbb;
3     border-radius: 0.5rem;
4     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;
5     padding: 0;
6     margin-bottom: 1rem;
7     outline: none;
8     position: relative;
9 }
10 .chart-pane header {
11     background: #fff;
12     margin: 0;
13     padding: 0.5rem;
14     color: #000;
15     border-bottom: 1px solid #bbb;
16     border-top-left-radius: 0.5rem;
17     border-top-right-radius: 0.5rem;
18     position: relative;
19 }
20 .chart-pane h1 {
21     color: #333;
22     font-size: 1rem;
23     font-weight: normal;
24     line-height: 1rem;
25     margin: 0 0 0 1.5rem;
26     padding: 0;
27 }
28 .chart-pane:focus header {
29     background-color: rgba(204, 153, 51, 0.1);
30     color: #333;
31 }
32
33 .chart-pane .progress {
34     height: 100%;
35     position: relative;
36 }
37
38 .chart-pane .progress .spinner {
39     position: absolute;
40     left: 50%;
41     top: 50%;
42     margin-left: -1rem;
43     margin-top: -1rem;
44 }
45
46 .chart-pane a.close-button {
47     display: inline-block;
48     position: absolute;
49     left: 0.55rem;
50     top: 0.55rem;
51 }
52
53 .chart-pane a.stat-button {
54     display: inline-block;
55     position: absolute;
56     right: 3.15rem;
57     top: 0.55rem;
58 }
59
60 .chart-pane a.bugs-button {
61     display: inline-block;
62     position: absolute;
63     right: 1.85rem;
64     top: 0.55rem;
65 }
66
67 .chart-pane a.search-button {
68     display: inline-block;
69     position: absolute;
70     right: 0.55rem;
71     top: 0.55rem;
72 }
73
74 .popup-pane {
75     position: absolute;
76     top: 1.7rem;
77     border: 1px solid #bbb;
78     font-size: 0.8rem;
79     padding: 0.2rem;
80     border-radius: 0.5rem;
81     display: table;
82     background: white;
83 }
84
85 .popup-pane.hidden {
86     display: none;
87 }
88
89 .stat-pane {
90     right: 2.6rem;
91     padding: 0;
92 }
93
94 .stat-pane fieldset {
95     border: solid 1px #ccc;
96     border-radius: 0.5rem;
97     margin: 0.2rem;
98     padding: 0;
99 }
100
101 .stat-option {
102     margin: 0;
103     padding: 0;
104     font-size: 0.8rem;
105 }
106
107 .stat-option h1 {
108     font-size: inherit;
109     line-height: 0.8rem;
110     padding: 0.3rem 0.5rem;
111     margin: 0;
112     border-top: solid 1px #ccc;
113     border-bottom: solid 1px #ccc;
114 }
115
116 .stat-option:first-child h1 {
117     border-top: none;
118 }
119
120 .stat-option > * {
121     display: block;
122     margin: 0.1rem 0.5rem 0.1rem 1rem;
123 }
124
125 .stat-option input {
126     width: 4rem;
127 }
128
129 .stat-option p {
130     max-width: 15rem;
131 }
132
133 .analysis-pane {
134     right: 1.3rem;
135 }
136
137 .analysis-pane > * {
138     margin: 0.2rem;
139 }
140
141 .search-pane {
142     right: 0rem;
143 }
144
145 .search-pane input {
146     display: table-cell;
147     vertical-align: middle;
148     outline: none;
149     border: none;
150     border-top-right-radius: 0.5rem;
151     border-bottom-right-radius: 0.5rem;
152     padding: 0.2rem;
153     font-size: 0.8rem;
154     margin: 0;
155 }
156
157 .search-pane .repositories {
158     display: table-cell;
159     vertical-align: middle;
160     padding: 0;
161 }
162
163 .search-pane input:focus {
164     background-color: rgb(249, 242, 228);
165 }
166
167 .chart-pane .body {
168     position: relative;
169     width: 100%;
170     height: 18rem;
171 }
172 .chart-pane .svg-container {
173     width: auto;
174     height: 100%;
175 }
176 .chart-pane .svg-container {
177     margin-right: 25rem;
178 }
179
180 .selection-toolbar {
181     display: inline-block;
182     background: white;
183     border: solid 1px #d9d9d9;
184     border-radius: 0.3rem;
185     z-index: 10;
186     position: absolute;
187     margin-top: -2rem;
188     margin-left: 0.5rem;
189     white-space: nowrap;
190 }
191
192 .selection-toolbar .button {
193     display: block;
194     float: left;
195     width: 1rem;
196     height: 1rem;
197     padding: 0.2rem;
198     margin: 0;
199     border-left: solid 1px #bbb;
200 }
201
202 .selection-toolbar .button:first-child {
203     border-left: none;
204 }
205
206 .selection-toolbar .button svg {
207     stroke: #666;
208     fill: #666;
209 }
210
211 .chart-pane .details {
212     position: absolute;
213     right: 0;
214     top: 0;
215     width: 25rem;
216     height: 100%;
217     border-left: solid 1px #bbb;
218 }
219
220 .analysis-chart-pane .details {
221     overflow: scroll;
222 }
223
224 .analysis-chart-pane table {
225     margin: 0.5rem;
226 }
227
228 .chart-pane .overview {
229     height: 5rem;
230     border-bottom: solid 0px #eee;
231 }
232
233 .chart-pane .details-table-container {
234     position: absolute;
235     top: 5rem;
236     width: 100%;
237     height: 13rem;
238     overflow: scroll;
239 }
240
241 .chart-pane .details-table,
242 .chart-pane .commits-viewer {
243     font-size: 0.8rem;
244     width: 100%;
245     table-layout: fixed;
246     border-collapse: collapse;
247 }
248
249 .chart-pane .details-table td:last-child {
250     padding-right: 1px;
251 }
252
253 .chart-pane .details-table th {
254     width: 30%;
255     text-align: right;
256     font-weight: normal;
257     padding: 0;
258 }
259
260 .chart-pane .details-table td {
261     width: 70%;
262 }
263
264 .chart-pane .details-table .bugs th {
265     font-weight: bold;
266 }
267
268 .chart-pane .details-table th:after {
269     content: " : ";
270 }
271
272 .chart-pane .details-table .status th {
273     visibility: hidden;
274 }
275
276 .chart-pane .details-table .status td {
277     font-size: 1rem;
278 }
279
280 .chart-pane .commits-viewer caption {
281     border-top: solid 1px #ccc;
282     font-weight: normal;
283     text-align: left;
284     padding: 0.2rem;
285     padding-left: 0.5rem;
286     cursor: pointer;
287 }
288
289 .chart-pane .commits-viewer caption:before {
290     display: inline-block;
291     width: 0.8rem;
292     content: "\25BE"; /* Down arrow */
293 }
294
295 .chart-pane .commits-viewer.hidden caption:before {
296     display: inline-block;
297     width: 0.8rem;
298     content: "\25B8"; /* Right arrow */
299 }
300
301 .chart-pane .commits {
302     border-bottom: solid 1px #ccc;
303     margin-bottom: 0.2rem;
304 }
305
306 .chart-pane .commits-viewer {
307     border-collapse: collapse;
308 }
309
310 .chart-pane .commits-viewer td,
311 .chart-pane .commits-viewer th {
312     word-break: break-word;
313     border-top: solid 1px #ccc;
314     padding: 0.2rem;
315 }
316
317 .chart-pane .commits-viewer th {
318     width: 20%;
319     font-weight: normal;
320 }
321
322 .chart-pane .commits-viewer td {
323     width: 60%;
324 }
325
326 .chart-pane .chart {
327     height: 100%;
328 }
329
330 .chart-pane .chart svg {
331     height: 100%;
332 }
333
334 .chart {
335     position: relative;
336     overflow: hidden;
337 }
338
339 .chart svg {
340     stroke: #666;
341     fill: #000;
342     color: #000;
343     font-size: 0.7rem;
344 }
345
346 .chart path {
347     fill: none;
348     stroke-width: 1.5px;
349 }
350
351 .chart .dot {
352     fill: #ccc;
353     stroke: none;
354 }
355 .chart .dot.foreground {
356     fill: #666;
357 }
358
359 .chart path.area {
360     stroke: none;
361     fill: #ccc;
362     opacity: 0.8;
363 }
364 .chart path.area.foreground {
365 }
366
367 .chart path.current {
368     stroke: #ccc;
369 }
370
371 .chart path.current.foreground {
372     stroke: #999;
373 }
374
375 .chart path.movingAverage {
376     stroke: #363;
377     fill: none;
378     opacity: 0.8;
379 }
380
381 .chart path.envelope {
382     stroke: none;
383     fill: #6c6;
384     opacity: 0.4;
385 }
386
387 .chart path.baseline {
388     stroke: #f66;
389 }
390 .chart-pane .status .worse,
391 .dashboard-status .worse {
392     color: #c33;
393 }
394
395 .chart path.target {
396     stroke: #66f;
397 }
398 .chart-pane .status .better,
399 .dashboard-status .better {
400     color: #33c;
401 }
402
403 .dashboard-status .status-label {
404     margin-left: 1rem;
405 }
406
407 .chart .axis,
408 .chart .domain {
409   fill: none;
410   stroke-width: 1px;
411   stroke: #ddd;
412   color: #000;
413   shape-rendering: crispEdges;
414 }
415
416 .chart .domain {
417     stroke: none;
418 }
419
420 .chart .current-item {
421     stroke: #f93;
422     stroke-width: 2px;
423     fill: #f93;
424 }
425
426 .chart .highlight {
427     stroke: #f93;
428     stroke-width: 2px;
429     fill: none;
430 }
431
432 .chart .extent {
433     stroke: #f93;
434     stroke-width: 1px;
435     fill: #9c6;
436     fill-opacity: .125;
437     shape-rendering: crispEdges;
438 }
439
440 .chart .axis text {
441     fill: #333;
442     stroke: none;
443 }
444
445 .chart .rangeBar {
446     display: block;
447     background-color: #fc6;
448     position: absolute;
449 }