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