Add v2 UI for the perf dashboard
[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 .close-button {
119     width: 1rem;
120     height: 1rem;
121 }
122 .close-button g {
123     stroke: #ccc;
124 }
125 .close-button:hover g {
126     stroke: #666;
127 }
128
129
130 #header {
131     margin: 0 0 1rem 0;
132     border: 1px solid #999;
133     border-radius: 0.3rem;
134     background: #fff;
135     box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px;
136     border-top: none;
137     border-top-left-radius: 0;
138     border-top-right-radius: 0;
139     color: #888;
140     position: relative;
141 }
142
143 #navigation {
144     display: inline-block;
145 }
146
147 #navigation h1,
148 #navigation ul,
149 #navigation li,
150 #header ul.controls {
151     margin: 0;
152     padding: 0;
153     font-weight: normal;
154     line-height: 3rem;
155 }
156 #navigation a {
157     text-decoration: none;
158     color: inherit;
159 }
160 #navigation h1 {
161     font-size: 1.3rem;
162     margin-left: 0.5rem;
163     display: inline;
164     color: #c93;
165 }
166 #navigation ul,
167 #header ul.controls {
168     display: inline-block;
169     list-style: none;
170 }
171 #navigation ul {
172     vertical-align: bottom;
173     margin-left: 4rem;
174     margin-right: 2.5rem;
175 }
176 #header ul.controls {
177     margin: 0 1.5rem;
178     vertical-align: top;
179     padding-top: 0.95rem;
180     font-size: 0.8rem;
181     line-height: 1rem;
182 }
183 #navigation li,
184 #header ul.controls > li {
185     display: block;
186     float: left;
187     margin: 0;
188     padding: 0;
189 }
190 #navigation li a {
191     display: block;
192     border: solid 1px #999;
193     border-bottom: 0px;
194     border-radius: 0.3rem;
195     border-bottom-left-radius: 0;
196     border-bottom-right-radius: 0;
197     padding: 0.5rem;
198     margin: 0;
199     line-height: 1rem;
200 }
201 #navigation li:not(:last-child) a {
202     border-top-right-radius: 0;
203     border-bottom-right-radius: 0;
204     border-right: 0;
205 }
206 #navigation li:not(:first-child) a {
207     border-top-left-radius: 0;
208     border-bottom-left-radius: 0;
209 }
210 #navigation li.active a,
211 #header ul.controls li.active .control-button {
212     border-color: inherit;
213     color: #000;
214 }
215
216 #navigation li:not(.active) a:hover,
217 #navigation li:not(.active) a:active,
218 #header ul.controls > li:not(.active) > a:hover,
219 #header ul.controls > li:not(.active) > a:active {
220     background-color: rgba(204, 153, 51, 0.1);
221 }
222
223
224
225 .start-time-slider {
226     line-height: 1em;
227 }
228
229 .start-time-slider label {
230     display: block;
231 }
232
233 .start-time-slider input {
234     vertical-align: middle;
235     height: 0.8rem;
236 }
237
238 .start-time-slider .numberOfDays {
239     display: inline-block;
240     text-align: right;
241     width: 1.5rem;
242 }
243
244
245
246
247 .spinner {
248     width: 2rem;
249     height: 2rem;
250     -webkit-transform: translateZ(0);
251 }
252 .spinner line {
253     animation: spinner-animation 1.6s linear infinite;
254     -webkit-animation: spinner-animation 1.6s linear infinite;
255     opacity: 0.1;
256 }
257 .spinner line:nth-child(0) {
258     -webkit-animation-delay: 0.0s;
259     animation-delay: 0.0s;
260 }
261 .spinner line:nth-child(1) {
262     -webkit-animation-delay: 0.2s;
263     animation-delay: 0.2s;
264 }
265 .spinner line:nth-child(2) {
266     -webkit-animation-delay: 0.4s;
267     animation-delay: 0.4s;
268 }
269 .spinner line:nth-child(3) {
270     -webkit-animation-delay: 0.6s;
271     animation-delay: 0.6s;
272 }
273 .spinner line:nth-child(4) {
274     -webkit-animation-delay: 0.8s;
275     animation-delay: 0.8s;
276 }
277 .spinner line:nth-child(5) {
278     -webkit-animation-delay: 1s;
279     animation-delay: 1s;
280 }
281 .spinner line:nth-child(6) {
282     -webkit-animation-delay: 1.2s;
283     animation-delay: 1.2s;
284 }
285 .spinner line:nth-child(7) {
286     -webkit-animation-delay: 1.4s;
287     animation-delay: 1.4s;
288 }
289 .spinner line:nth-child(8) {
290     -webkit-animation-delay: 1.6s;
291     animation-delay: 1.6s;
292 }
293 @-webkit-keyframes spinner-animation {
294     0% { opacity: 0.9; }
295     50% { opacity: 0.1; }
296     100% { opacity: 0.1; }
297 }
298
299
300 table.dashboard {
301     border-collapse: collapse;
302     table-layout: fixed;
303     color: #999;
304     width: 100%;
305 }
306
307 table.dashboard th,
308 table.dashboard td {
309     border: solid 0px #d9d9d9;
310     padding: 0.2rem 0.5rem;
311     text-align: center;
312     position: relative;
313 }
314
315 table.dashboard thead th,
316 table.dashboard thead td {
317     padding: 0.5rem;
318 }
319 /*
320 table.dashboard thead th:nth-child(odd),
321 table.dashboard tbody td:nth-child(even) {
322 }
323 */
324 table.dashboard input {
325     font-size: 1rem;
326     width: 12rem;
327     height: 1rem;
328     text-align: center;
329     margin: 0.5rem 0.3rem;
330 }
331
332 table.dashboard th {
333     font-weight: normal;
334     font-size: 1rem;
335     white-space: nowrap;
336     color: #f96;
337 }
338
339 table.dashboard thead th {
340     height: 1rem;
341 }
342
343 table.dashboard.readonly thead td,
344 table.dashboard.readonly tbody th {
345     width: 1rem;
346     padding: 0.2rem 0.5rem;
347 }
348
349 table.dashboard tbody th {
350     height: 12rem;
351 }
352
353 table.dashboard.readonly tbody th .label {
354     position: absolute;
355     left: 0;
356     right: 0;
357     display: block;
358     width: 12.4rem;
359     height: 2rem;
360     line-height: 2rem;
361     vertical-align: middle;
362     -webkit-transform: rotate(-90deg) translate(-50%, 0);
363     -webkit-transform-origin: 0 0;
364     transform: rotate(-90deg) translate(-50%, 0);
365     transform-origin: 0 0;
366 }
367
368 table.dashboard.editMode a {
369     text-decoration: none;
370     vertical-align: middle;
371 }
372
373 table.dashboard.editMode tbody th a {
374     margin-left: 0.3rem;
375 }
376
377 table.dashboard.editMode input {
378     box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05);
379     border: solid 1px #999;
380     padding: 0.2rem;
381     border-radius: 0.2rem;
382 }
383
384 table.dashboard tbody td a.reset {
385     position: absolute;
386     top: 0.5rem;
387     left: 0.5rem;
388 }
389 table.dashboard.editMode tbody td {
390     padding-left: 2rem;
391 }
392 table.dashboard tbody td a.reset svg {
393     background: white;
394 }
395
396 table.dashboard tbody td .chart {
397     border: solid 1px #ddd;
398     border-radius: 0.5rem;
399     margin: 0.5rem 0.5rem;
400 }
401
402 table.dashboard tbody td .chart,
403 table.dashboard tbody td .failure,
404 table.dashboard tbody td .progress {
405     display: inline-block;
406     width: 100%;
407     height: 12rem;
408     line-height: 12rem;
409     vertical-align: center;
410 }