New perf dashboard should have the ability to overlay moving average with an envelope
[WebKit-https.git] / Websites / perf.webkit.org / public / v2 / app.css
1 html {
2     margin: 0;
3     padding: 0;
4 }
5 body {
6     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
7     padding: 0;
8     margin: 0 1rem;
9     min-width: 60rem;
10 }
11
12
13 .popup {
14     margin: 0;
15     position: relative;
16     display: inline-block;
17 }
18
19 .popup h1 {
20     display: inline-block;
21     margin: 0;
22     padding: 0;
23 }
24
25 .popup .popup-button,
26 .control-button,
27 .start-time-slider {
28     display: inline-block;
29     margin: 0;
30     padding: 0;
31     font-weight: normal;
32     color: #666;
33     text-decoration: none;
34     cursor: pointer;
35
36     border: solid 1px #999;
37     border-radius: 0.3rem;
38     padding: 0.2rem 0.5rem;
39 }
40
41 #header ul.controls li:not(:first-child) .control-button {
42     border-left: none;
43     border-top-left-radius: 0;
44     border-bottom-left-radius: 0;
45 }
46 #header ul.controls li:not(:last-child) .control-button {
47     border-top-right-radius: 0;
48     border-bottom-right-radius: 0;
49 }
50
51 .popup .popup-button:after {
52     content: " \25BE";
53 }
54
55 .popup .popup {
56     display: block;
57     margin: 0;
58 }
59
60 .popup .popup .popup-button:after {
61     content: " \25B8";
62 }
63
64 .popup ul {
65     display: block;
66     position: absolute;
67     left: 0rem;
68     top: 0rem;
69     z-index: 999;
70     background: #fff;
71     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 10px 3px;
72 /*    box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;*/
73     margin: 0.2rem 0;
74     padding: 0.5rem 0;
75     list-style: none;
76     border: solid 1px #999;
77     border-radius: 0.3rem;
78     white-space: nowrap;
79     text-align: left;
80 }
81
82 .popup .popup ul {
83     top: 0rem;
84     margin: 0;
85     margin-top: -0.5rem;
86     margin-left: -0.7rem;
87 }
88
89 .popup li .label {
90     display: block;
91     max-width: 15rem;
92     text-overflow: ellipsis;
93     overflow: hidden;
94 }
95
96 .popup .popup a {
97     display: block;
98     width: auto;
99     padding: 0.2rem 0.5rem;
100     border: none;
101 }
102
103 .popup a {
104     color: #333;
105     text-decoration: none;
106 }
107
108 .popup a:active,
109 .popup a:focus {
110     background: #eef;
111 }
112
113 .popup li:hover {
114     background: #eee;
115 }
116
117
118 .icon-button {
119     width: 1rem;
120     height: 1rem;
121 }
122 .icon-button g {
123     stroke: #ccc;
124     fill: #ccc;
125 }
126 .icon-button:hover g {
127     stroke: #666;
128     fill: #666;
129 }
130 .disabled .icon-button:hover g {
131     stroke: #ccc;
132     fill: #ccc;
133 }
134
135
136 #header {
137     margin: 0 0 1rem 0;
138     border: 1px solid #999;
139     border-radius: 0.3rem;
140     background: #fff;
141     box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px;
142     border-top: none;
143     border-top-left-radius: 0;
144     border-top-right-radius: 0;
145     color: #888;
146     position: relative;
147 }
148
149 #navigation {
150     display: inline-block;
151 }
152
153 #navigation h1,
154 #navigation ul,
155 #navigation li,
156 #header ul.controls {
157     margin: 0;
158     padding: 0;
159     font-weight: normal;
160     line-height: 3rem;
161 }
162 #navigation a {
163     text-decoration: none;
164     color: inherit;
165 }
166 #navigation h1 {
167     font-size: 1.3rem;
168     margin-left: 0.5rem;
169     display: inline;
170     color: #c93;
171 }
172 #navigation ul,
173 #header ul.controls {
174     display: inline-block;
175     list-style: none;
176 }
177 #navigation ul {
178     vertical-align: bottom;
179     margin-left: 4rem;
180     margin-right: 2.5rem;
181 }
182 #header ul.controls {
183     margin: 0 1.5rem;
184     vertical-align: top;
185     padding-top: 0.95rem;
186     font-size: 0.8rem;
187     line-height: 1rem;
188 }
189 #navigation li,
190 #header ul.controls > li {
191     display: block;
192     float: left;
193     margin: 0;
194     padding: 0;
195 }
196 #navigation li a {
197     display: block;
198     border: solid 1px #999;
199     border-bottom: 0px;
200     border-radius: 0.3rem;
201     border-bottom-left-radius: 0;
202     border-bottom-right-radius: 0;
203     padding: 0.5rem;
204     margin: 0;
205     line-height: 1rem;
206 }
207 #navigation li:not(:last-of-type) a {
208     border-top-right-radius: 0;
209     border-bottom-right-radius: 0;
210     border-right: 0;
211 }
212 #navigation li:not(:first-of-type) a {
213     border-top-left-radius: 0;
214     border-bottom-left-radius: 0;
215 }
216 #navigation li.active a,
217 #header ul.controls li.active .control-button {
218     border-color: inherit;
219     color: #000;
220 }
221
222 #navigation li:not(.active) a:hover,
223 #navigation li:not(.active) a:active,
224 #header ul.controls > li:not(.active) > a:hover,
225 #header ul.controls > li:not(.active) > a:active {
226     background-color: rgba(204, 153, 51, 0.1);
227 }
228
229
230
231 .start-time-slider {
232     line-height: 1em;
233 }
234
235 .start-time-slider label {
236     display: block;
237 }
238
239 .start-time-slider input {
240     vertical-align: middle;
241     height: 0.8rem;
242 }
243
244 .start-time-slider .numberOfDays {
245     display: inline-block;
246     text-align: right;
247     width: 1.5rem;
248 }
249
250
251
252
253 .spinner {
254     width: 2rem;
255     height: 2rem;
256     -webkit-transform: translateZ(0);
257 }
258 .spinner line {
259     animation: spinner-animation 1.6s linear infinite;
260     -webkit-animation: spinner-animation 1.6s linear infinite;
261     opacity: 0.1;
262 }
263 .spinner line:nth-child(0) {
264     -webkit-animation-delay: 0.0s;
265     animation-delay: 0.0s;
266 }
267 .spinner line:nth-child(1) {
268     -webkit-animation-delay: 0.2s;
269     animation-delay: 0.2s;
270 }
271 .spinner line:nth-child(2) {
272     -webkit-animation-delay: 0.4s;
273     animation-delay: 0.4s;
274 }
275 .spinner line:nth-child(3) {
276     -webkit-animation-delay: 0.6s;
277     animation-delay: 0.6s;
278 }
279 .spinner line:nth-child(4) {
280     -webkit-animation-delay: 0.8s;
281     animation-delay: 0.8s;
282 }
283 .spinner line:nth-child(5) {
284     -webkit-animation-delay: 1s;
285     animation-delay: 1s;
286 }
287 .spinner line:nth-child(6) {
288     -webkit-animation-delay: 1.2s;
289     animation-delay: 1.2s;
290 }
291 .spinner line:nth-child(7) {
292     -webkit-animation-delay: 1.4s;
293     animation-delay: 1.4s;
294 }
295 .spinner line:nth-child(8) {
296     -webkit-animation-delay: 1.6s;
297     animation-delay: 1.6s;
298 }
299 @-webkit-keyframes spinner-animation {
300     0% { opacity: 0.9; }
301     50% { opacity: 0.1; }
302     100% { opacity: 0.1; }
303 }
304
305
306 table.dashboard {
307     border-collapse: collapse;
308     table-layout: fixed;
309     color: #999;
310     width: 100%;
311 }
312
313 table.dashboard th,
314 table.dashboard td {
315     border: solid 0px #d9d9d9;
316     padding: 0.2rem 0.5rem;
317     text-align: center;
318     position: relative;
319 }
320
321 table.dashboard thead th,
322 table.dashboard thead td {
323     padding: 0.5rem;
324 }
325 /*
326 table.dashboard thead th:nth-child(odd),
327 table.dashboard tbody td:nth-child(even) {
328 }
329 */
330 table.dashboard input {
331     font-size: 1rem;
332     width: 12rem;
333     height: 1rem;
334     text-align: center;
335     margin: 0.5rem 0.3rem;
336 }
337
338 table.dashboard th {
339     font-weight: normal;
340     font-size: 1rem;
341     white-space: nowrap;
342     color: #f96;
343 }
344
345 table.dashboard thead th {
346     height: 1rem;
347 }
348
349 table.dashboard.readonly thead td,
350 table.dashboard.readonly tbody th {
351     width: 1rem;
352     padding: 0.2rem 0.5rem;
353 }
354
355 table.dashboard tbody th {
356     height: 12rem;
357 }
358
359 table.dashboard.readonly tbody th .label {
360     position: absolute;
361     left: 0;
362     right: 0;
363     display: block;
364     width: 12.4rem;
365     height: 2rem;
366     line-height: 2rem;
367     vertical-align: middle;
368     -webkit-transform: rotate(-90deg) translate(-50%, 0);
369     -webkit-transform-origin: 0 0;
370     transform: rotate(-90deg) translate(-50%, 0);
371     transform-origin: 0 0;
372 }
373
374 table.dashboard.editMode a {
375     text-decoration: none;
376     vertical-align: middle;
377 }
378
379 table.dashboard.editMode tbody th a {
380     margin-left: 0.3rem;
381 }
382
383 table.dashboard.editMode input {
384     box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05);
385     border: solid 1px #999;
386     padding: 0.2rem;
387     border-radius: 0.2rem;
388 }
389
390 table.dashboard tbody td a.reset {
391     position: absolute;
392     top: 0.5rem;
393     left: 0.5rem;
394 }
395 table.dashboard.editMode tbody td {
396     padding-left: 2rem;
397 }
398 table.dashboard tbody td a.reset svg {
399     background: white;
400 }
401
402 table.dashboard tbody td .chart {
403     border: solid 0px #ddd;
404     border-radius: 0.5rem;
405     margin: 0.5rem 0.5rem;
406 }
407
408 table.dashboard tbody td .chart,
409 table.dashboard tbody td .progress {
410     display: inline-block;
411     width: 100%;
412     height: 12rem;
413     line-height: 12rem;
414     vertical-align: middle;
415 }
416
417 table.dashboard tbody td .failure {
418     display: table-cell;
419     width: 100%;
420     height: 12rem;
421     vertical-align: middle;
422 }
423
424 #analysis-tasks,
425 .analysis-group > table {
426     border: solid 0px #999;
427     border-collapse: collapse;
428 }
429
430 #analysis-tasks thead,
431 .analysis-group > table thead {
432     color: #c93;
433 }
434
435 #analysis-tasks th,
436 .analysis-group > table th {
437     font-weight: normal;
438 }
439
440 #analysis-tasks td,
441 #analysis-tasks th,
442 .analysis-group > table td,
443 .analysis-group > table th {
444     padding: 0.2rem 0.5rem;
445 }
446
447 #analysis-tasks tbody td,
448 #analysis-tasks tbody th,
449 .analysis-group > table tbody td,
450 .analysis-group > table tbody th {
451     border-top: solid 1px #ddd;
452 }
453
454 #analysis-task-title {
455     font-weight: normal;
456     font-size: 1.2rem;
457     margin: 0 0 0 0.5rem;
458     padding: 0;
459 }
460
461 #analysis-task-testname {
462     font-weight: normal;
463     font-size: 1rem;
464     margin: 0 0 1rem 0.5rem;
465     padding: 0;
466     color: #333;
467 }
468
469 .analysis-group {
470     border: 1px solid #bbb;
471     border-radius: 0.5rem;
472     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;
473
474     padding: 0.5rem 1rem;
475     margin-bottom: 1.5rem;
476 }
477
478 .analysis-group caption {
479     font-size: 1.1rem;
480     text-align: left;
481     margin-bottom: 0.5rem;
482 }
483
484 .analysis-bugs th {
485     font-weight: normal;
486     text-align: right;
487 }