UI to associate bugs with an analysis task is crappy
[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     font-size: 0.8rem;
92     max-width: 15rem;
93     text-overflow: ellipsis;
94     overflow: hidden;
95 }
96
97 .popup .popup a {
98     display: block;
99     width: auto;
100     padding: 0.2rem 0.5rem;
101     border: none;
102 }
103
104 .popup a {
105     color: #333;
106     text-decoration: none;
107 }
108
109 .popup a:active,
110 .popup a:focus {
111     background: #eef;
112 }
113
114 .popup li:hover {
115     background: #eee;
116 }
117
118
119 .icon-button {
120     width: 1rem;
121     height: 1rem;
122 }
123 .icon-button g {
124     stroke: #ccc;
125     fill: #ccc;
126 }
127 .icon-button:hover g {
128     stroke: #666;
129     fill: #666;
130 }
131 .disabled .icon-button:hover g {
132     stroke: #ccc;
133     fill: #ccc;
134 }
135
136
137 #header {
138     margin: 0 0 1rem 0;
139     border: 1px solid #999;
140     border-radius: 0.3rem;
141     background: #fff;
142     box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px;
143     border-top: none;
144     border-top-left-radius: 0;
145     border-top-right-radius: 0;
146     color: #888;
147     position: relative;
148 }
149
150 #navigation {
151     display: inline-block;
152 }
153
154 #navigation h1,
155 #navigation ul,
156 #navigation li,
157 #header ul.controls {
158     margin: 0;
159     padding: 0;
160     font-weight: normal;
161     line-height: 3rem;
162 }
163 #navigation a {
164     text-decoration: none;
165     color: inherit;
166 }
167 #navigation h1 {
168     font-size: 1.3rem;
169     margin-left: 0.5rem;
170     display: inline;
171     color: #c93;
172 }
173 #navigation ul,
174 #header ul.controls {
175     display: inline-block;
176     list-style: none;
177 }
178 #navigation ul {
179     vertical-align: bottom;
180     margin-left: 4rem;
181     margin-right: 2.5rem;
182 }
183 #header ul.controls {
184     margin: 0 1.5rem;
185     vertical-align: top;
186     padding-top: 0.95rem;
187     font-size: 0.8rem;
188     line-height: 1rem;
189 }
190 #navigation li,
191 #header ul.controls > li {
192     display: block;
193     float: left;
194     margin: 0;
195     padding: 0;
196 }
197 #navigation li a {
198     display: block;
199     border: solid 1px #999;
200     border-bottom: 0px;
201     border-radius: 0.3rem;
202     border-bottom-left-radius: 0;
203     border-bottom-right-radius: 0;
204     padding: 0.5rem;
205     margin: 0;
206     line-height: 1rem;
207 }
208 #navigation li:not(:last-of-type) a {
209     border-top-right-radius: 0;
210     border-bottom-right-radius: 0;
211     border-right: 0;
212 }
213 #navigation li:not(:first-of-type) a {
214     border-top-left-radius: 0;
215     border-bottom-left-radius: 0;
216 }
217 #navigation li.active a,
218 #header ul.controls li.active .control-button {
219     border-color: inherit;
220     color: #000;
221 }
222
223 #navigation li:not(.active) a:hover,
224 #navigation li:not(.active) a:active,
225 #header ul.controls > li:not(.active) > a:hover,
226 #header ul.controls > li:not(.active) > a:active {
227     background-color: rgba(204, 153, 51, 0.1);
228 }
229
230
231
232 .start-time-slider {
233     line-height: 1em;
234 }
235
236 .start-time-slider label {
237     display: block;
238 }
239
240 .start-time-slider input {
241     vertical-align: middle;
242     height: 0.8rem;
243 }
244
245 .start-time-slider .numberOfDays {
246     display: inline-block;
247     text-align: right;
248     width: 1.5rem;
249 }
250
251
252
253
254 .spinner {
255     width: 2rem;
256     height: 2rem;
257     -webkit-transform: translateZ(0);
258 }
259 .spinner line {
260     animation: spinner-animation 1.6s linear infinite;
261     -webkit-animation: spinner-animation 1.6s linear infinite;
262     opacity: 0.1;
263 }
264 .spinner line:nth-child(0) {
265     -webkit-animation-delay: 0.0s;
266     animation-delay: 0.0s;
267 }
268 .spinner line:nth-child(1) {
269     -webkit-animation-delay: 0.2s;
270     animation-delay: 0.2s;
271 }
272 .spinner line:nth-child(2) {
273     -webkit-animation-delay: 0.4s;
274     animation-delay: 0.4s;
275 }
276 .spinner line:nth-child(3) {
277     -webkit-animation-delay: 0.6s;
278     animation-delay: 0.6s;
279 }
280 .spinner line:nth-child(4) {
281     -webkit-animation-delay: 0.8s;
282     animation-delay: 0.8s;
283 }
284 .spinner line:nth-child(5) {
285     -webkit-animation-delay: 1s;
286     animation-delay: 1s;
287 }
288 .spinner line:nth-child(6) {
289     -webkit-animation-delay: 1.2s;
290     animation-delay: 1.2s;
291 }
292 .spinner line:nth-child(7) {
293     -webkit-animation-delay: 1.4s;
294     animation-delay: 1.4s;
295 }
296 .spinner line:nth-child(8) {
297     -webkit-animation-delay: 1.6s;
298     animation-delay: 1.6s;
299 }
300 @-webkit-keyframes spinner-animation {
301     0% { opacity: 0.9; }
302     50% { opacity: 0.1; }
303     100% { opacity: 0.1; }
304 }
305
306
307 table.dashboard {
308     border-collapse: collapse;
309     table-layout: fixed;
310     color: #999;
311     width: 100%;
312 }
313
314 table.dashboard th,
315 table.dashboard td {
316     border: solid 0px #d9d9d9;
317     padding: 0.2rem 0.5rem;
318     text-align: center;
319     position: relative;
320 }
321
322 table.dashboard thead th,
323 table.dashboard thead td {
324     padding: 0.5rem;
325 }
326 /*
327 table.dashboard thead th:nth-child(odd),
328 table.dashboard tbody td:nth-child(even) {
329 }
330 */
331 table.dashboard input {
332     font-size: 1rem;
333     width: 12rem;
334     height: 1rem;
335     text-align: center;
336     margin: 0.5rem 0.3rem;
337 }
338
339 table.dashboard th {
340     font-weight: normal;
341     font-size: 1rem;
342     white-space: nowrap;
343     color: #f96;
344 }
345
346 table.dashboard thead th {
347     height: 1rem;
348 }
349
350 table.dashboard.readonly thead td,
351 table.dashboard.readonly tbody th {
352     width: 1rem;
353     padding: 0.2rem 0.5rem;
354 }
355
356 table.dashboard tbody th {
357     height: 12rem;
358 }
359
360 table.dashboard.readonly tbody th .label {
361     position: absolute;
362     left: 0;
363     right: 0;
364     display: block;
365     width: 12.4rem;
366     height: 2rem;
367     line-height: 2rem;
368     vertical-align: middle;
369     -webkit-transform: rotate(-90deg) translate(-50%, 0);
370     -webkit-transform-origin: 0 0;
371     transform: rotate(-90deg) translate(-50%, 0);
372     transform-origin: 0 0;
373 }
374
375 table.dashboard.editMode a {
376     text-decoration: none;
377     vertical-align: middle;
378 }
379
380 table.dashboard.editMode tbody th a {
381     margin-left: 0.3rem;
382 }
383
384 table.dashboard.editMode input {
385     box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05);
386     border: solid 1px #999;
387     padding: 0.2rem;
388     border-radius: 0.2rem;
389 }
390
391 table.dashboard tbody td a.reset {
392     position: absolute;
393     top: 0.5rem;
394     left: 0.5rem;
395 }
396 table.dashboard.editMode tbody td {
397     padding-left: 2rem;
398 }
399 table.dashboard tbody td a.reset svg {
400     background: white;
401 }
402
403 table.dashboard tbody td .chart {
404     border: solid 0px #ddd;
405     border-radius: 0.5rem;
406     margin: 0.5rem 0.5rem;
407 }
408
409 table.dashboard tbody td .chart,
410 table.dashboard tbody td .progress {
411     display: inline-block;
412     width: 100%;
413     height: 12rem;
414     line-height: 12rem;
415     vertical-align: middle;
416 }
417
418 table.dashboard tbody td .failure {
419     display: table-cell;
420     width: 100%;
421     height: 12rem;
422     vertical-align: middle;
423 }
424
425 .chart-pane,
426 .analysis-group {
427     border: 1px solid #bbb;
428     border-radius: 0.5rem;
429     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;
430     padding: 0;
431     margin-bottom: 1rem;
432     outline: none;
433     position: relative;
434 }
435
436 form .analysis-group > * {
437     margin: 0.5rem;
438 }
439
440 #analysis-tasks,
441 .analysis-group table {
442     border: solid 0px #999;
443     border-collapse: collapse;
444 }
445
446 #analysis-tasks thead,
447 .analysis-group table thead {
448     color: #c93;
449 }
450
451 #analysis-tasks th,
452 .analysis-group table th {
453     font-weight: normal;
454 }
455
456 #analysis-tasks td,
457 #analysis-tasks th,
458 .analysis-group table td,
459 .analysis-group table th {
460     padding: 0.2rem 0.5rem;
461 }
462
463 #analysis-tasks .status,
464 #analysis-tasks .author,
465 #analysis-tasks .created-at,
466 #analysis-tasks .platform-name {
467     white-space: nowrap;
468 }
469
470 #analysis-tasks .test-name {
471 }
472
473 #analysis-tasks tbody td,
474 #analysis-tasks tbody th,
475 .analysis-group table tbody td,
476 .analysis-group table tbody th {
477     border-top: solid 1px #ddd;
478 }
479
480 .analysis-group table .summary td {
481     vertical-align: top;
482 }
483
484 .analysis-group table thead td {
485     text-align: center;
486 }
487
488 .analysis-group table .config-letter,
489 .analysis-group table .summary {
490     cursor: pointer;
491 }
492
493 .analysis-group .results .request .config-letter {
494     border-color: transparent;
495 }
496
497 .analysis-group .results .hideRequests .request {
498     display: none;
499 }
500
501 .analysis-group .table-container {
502     margin: 0.5rem;
503     margin-right: 19rem;
504     overflow: scroll;
505 }
506
507 .analysis-group .reference-chart {
508     position: absolute;
509     top: 1.8rem;
510     right: 0rem;
511     width: 19rem;
512     height: 5rem;
513 }
514
515 .analysis-group .reference-chart .chart {
516     width: 100%;
517     height: 100%;
518 }
519
520 .box-plot {
521     display: inline-block;
522     width: 100px;
523     height: 0.6rem;
524     border: solid 1px #ddd;
525     padding: 1px;
526     vertical-align: middle;
527 }
528
529 .box-plot .percentage {
530     fill: #ccc;
531 }
532
533 .box-plot .delta {
534     fill: #333;
535     opacity: 0.5;
536 }
537
538 .box-plot svg {
539     display: block;
540 }
541
542 #analysis-task-title {
543     font-weight: normal;
544     font-size: 1.2rem;
545     margin: 0 0 0 0.5rem;
546     padding: 0;
547 }
548
549 #analysis-task-testname {
550     font-weight: normal;
551     font-size: 1rem;
552     margin: 0 0 1rem 0.5rem;
553     padding: 0;
554     color: #333;
555 }
556
557 .analysis-group > h1 {
558     font-size: 1.1rem;
559     font-weight: normal;
560     text-align: left;
561     margin-bottom: 0.5rem;
562     border-bottom: 1px solid #bbb;
563     margin: 0;
564     padding: 0.2rem 0.5rem;
565 }
566
567 .analysis-group h1 > input {
568     font-size: 1rem;
569     min-width: 20rem;
570     margin: 0.2rem 0;
571 }
572
573 .analysis-bugs {
574     margin: 0;
575     padding: 0;
576 }
577
578 .analysis-bugs th {
579     font-weight: normal;
580     text-align: right;
581     width: 8rem;
582 }
583
584 .analysis-bugs td {
585     font-weight: normal;
586     text-align: left;
587     font-size: 0.9rem;
588 }
589
590 .analysis-bugs .icon-button {
591     margin-left: 0.2rem;
592     width: 0.8rem;
593     height: 0.8rem;
594 }
595
596 .analysis-bugs .hidden {
597     display: none;
598 }