1 | @font-face {
|
2 | font-family: 'MuliRegular';
|
3 | src: url('font/Muli-Regular-webfont.eot');
|
4 | src: url('font/Muli-Regular-webfont.eot?#iefix') format('embedded-opentype'),
|
5 | url('font/Muli-Regular-webfont.woff') format('woff'),
|
6 | url('font/Muli-Regular-webfont.ttf') format('truetype'),
|
7 | url('font/Muli-Regular-webfont.svg#MuliRegular') format('svg');
|
8 | font-weight: normal;
|
9 | font-style: normal;
|
10 |
|
11 | }
|
12 |
|
13 | @font-face {
|
14 | font-family: 'MuliItalic';
|
15 | src: url('font/Muli-Italic-webfont.eot');
|
16 | src: url('font/Muli-Italic-webfont.eot?#iefix') format('embedded-opentype'),
|
17 | url('font/Muli-Italic-webfont.woff') format('woff'),
|
18 | url('font/Muli-Italic-webfont.ttf') format('truetype'),
|
19 | url('font/Muli-Italic-webfont.svg#MuliItalic') format('svg');
|
20 | font-weight: normal;
|
21 | font-style: normal;
|
22 |
|
23 | }
|
24 |
|
25 | html {
|
26 | font: normal 112.5%/1.65 serif;
|
27 | -webkit-font-smoothing: antialiased;
|
28 | }
|
29 |
|
30 | * {
|
31 | -webkit-box-sizing: border-box;
|
32 | -moz-box-sizing: border-box;
|
33 | box-sizing: border-box;
|
34 | }
|
35 |
|
36 | body {
|
37 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
38 | font-size: 16px;
|
39 | line-height: 18px;
|
40 | font-style: normal;
|
41 | color: #333;
|
42 | background-color: #f3f3f3;
|
43 | margin: 0;
|
44 | }
|
45 |
|
46 | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
|
47 | display : block;
|
48 | }
|
49 |
|
50 | h1 {
|
51 | font-size: 36px;
|
52 | line-height: 36px;
|
53 | margin-bottom: 18px;
|
54 | }
|
55 |
|
56 | h1, h2, h3, h4, h5, h6 {
|
57 | margin: 0;
|
58 | color: #333;
|
59 | text-rendering: optimizelegibility;
|
60 | text-shadow: 1px 1px 1px #fff;
|
61 | font-weight: normal;
|
62 | }
|
63 |
|
64 | a {
|
65 | color: #2cacdb;
|
66 | text-decoration: none;
|
67 | -webkit-transition: all 0.2s ease-in-out;
|
68 | -moz-transition: all 0.2s ease-in-out;
|
69 | -o-transition: all 0.2s ease-in-out;
|
70 | transition: all 0.2s ease-in-out;
|
71 | }
|
72 |
|
73 | a:hover {
|
74 | color: #1b7c9f;
|
75 | text-decoration: none;
|
76 | }
|
77 |
|
78 | #site-title, h1#site-title {
|
79 | background: #fff;
|
80 | position: fixed;
|
81 | top: 70px;
|
82 | left: 25px;
|
83 | z-index: 3000;
|
84 | }
|
85 |
|
86 | #menu-primary {
|
87 | background-color: #fff;
|
88 | background-color: rgba(255,255,255,0.95);
|
89 | padding: 20px 0;
|
90 | -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
|
91 | -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
|
92 | box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
|
93 | position: fixed;
|
94 | width: 100%;
|
95 | height: 58px;
|
96 | top: 65px;
|
97 | left: 0;
|
98 | z-index: 2100;
|
99 | }
|
100 |
|
101 | #menu-primary ul {
|
102 | margin: 0;
|
103 | padding: 0;
|
104 | width: 100%;
|
105 | float: right;
|
106 | margin-right: 20px;
|
107 | margin-left: 0;
|
108 | text-align: right;
|
109 | }
|
110 |
|
111 | #menu-primary ul li {
|
112 | padding: 0;
|
113 | margin: 0 8px;
|
114 | font-size: 13px;
|
115 | display: inline;
|
116 | text-transform: uppercase;
|
117 | position: relative;
|
118 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
119 | font-style: normal;
|
120 | }
|
121 |
|
122 | .title {
|
123 | text-rendering: optimizeLegibility;
|
124 | font-family: "MuliRegular";
|
125 | text-transform: uppercase;
|
126 | font-size: 21px;
|
127 | letter-spacing: 2px;
|
128 | }
|
129 | .title .initials {
|
130 | font-family: "MuliRegular";
|
131 | text-transform: lowercase;
|
132 | font-size: 30px;
|
133 | font-weight: normal;
|
134 | letter-spacing: -1px;
|
135 | margin-right: 6px;
|
136 | }
|
137 |
|
138 | #main {
|
139 | margin-right: auto;
|
140 | margin-left: auto;
|
141 | width: 90%;
|
142 | max-width: 940px;
|
143 | margin-top: 140px;
|
144 | margin-bottom: 36px;
|
145 | overflow: hidden;
|
146 | padding: 0 10px;
|
147 | }
|
148 | #main.wide {
|
149 | max-width: 2000px;
|
150 | }
|
151 |
|
152 | #links {
|
153 | margin-bottom: 2em;
|
154 | margin-top: 1em;
|
155 | }
|
156 |
|
157 | .column-grid {
|
158 | clear: both;
|
159 | text-align: center;
|
160 | }
|
161 |
|
162 | .column-grid .column {
|
163 | display: inline-block;
|
164 | text-align: left;
|
165 | width: 30%;
|
166 | }
|
167 |
|
168 |
|
169 | #links a {
|
170 | display: block;
|
171 | margin: 0 auto;
|
172 | background: #fff;
|
173 | -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
|
174 | -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
|
175 | box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
|
176 | -webkit-border-radius: 200px;
|
177 | -moz-border-radius: 200px;
|
178 | -ms-border-radius: 200px;
|
179 | -o-border-radius: 200px;
|
180 | border-radius: 200px;
|
181 | width: 160px;
|
182 | height: 160px;
|
183 | -webkit-transition: all 0.2s ease, box-shadow 0.2s;
|
184 | -moz-transition: all 0.2s ease, box-shadow 0.2s;
|
185 | -o-transition: all 0.2s ease, box-shadow 0.2s;
|
186 | transition: all 0.2s ease, box-shadow 0.2s;
|
187 | border: 1px solid #a7a9ac;
|
188 | }
|
189 |
|
190 | #links a:hover {
|
191 | box-shadow: 0 0 0 10px rgba(243,243,243,0.4);
|
192 | }
|
193 | #links a:hover:after {
|
194 | -webkit-transform: scale(0.85);
|
195 | -moz-transform: scale(0.85);
|
196 | -ms-transform: scale(0.85);
|
197 | transform: scale(0.85);
|
198 | }
|
199 |
|
200 | #links .debug a {
|
201 | color: #be4b3c;
|
202 | }
|
203 | #links .debug a:hover {
|
204 | color: #8C3125;
|
205 | }
|
206 |
|
207 | #links .coverage a {
|
208 | color: #79a161;
|
209 | left: 22px;
|
210 | }
|
211 | #links .coverage a:hover {
|
212 | color: #406928;
|
213 | }
|
214 |
|
215 | #links .results a {
|
216 | color: #b05050;
|
217 | }
|
218 |
|
219 | #links .results a:hover {
|
220 | color: #883838;
|
221 | }
|
222 |
|
223 | #links i {
|
224 | font-size: 110px;
|
225 | text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
|
226 | position: relative;
|
227 | top: 20px;
|
228 | left: 37px;
|
229 | line-height: 120px;
|
230 | }
|
231 |
|
232 | #links span {
|
233 | text-align: center;
|
234 | display: block;
|
235 | font-family: "MuliRegular";
|
236 | font-weight: bold;
|
237 | margin-top: 15px;
|
238 | text-shadow: 1px 1px 1px #fff;
|
239 | text-transform: uppercase;
|
240 | }
|
241 |
|
242 | #links .coverage i {
|
243 | left: 22px;
|
244 | }
|
245 |
|
246 | #links .status i {
|
247 | left: 48px;
|
248 | }
|
249 |
|
250 | #links .results i {
|
251 | left: 29px;
|
252 | }
|
253 |
|
254 | #configuration:before, #configuration:after {
|
255 | display: table;
|
256 | content: "";
|
257 | }
|
258 | #configuration:after {
|
259 | clear: both;
|
260 | }
|
261 |
|
262 | #configuration h2 {
|
263 | text-align: center;
|
264 | text-transform: uppercase;
|
265 | margin-bottom: 45px;
|
266 | border-bottom: 1px solid #a7a9ac;
|
267 | line-height: 1;
|
268 | color: #666;
|
269 | font-size: 13px;
|
270 | }
|
271 |
|
272 | #configuration h2 span, #configuration h2 a {
|
273 | background: #f3f3f3;
|
274 | position: relative;
|
275 | top: 8px;
|
276 | padding: 0 15px;
|
277 | color: #666;
|
278 | }
|
279 |
|
280 | #configuration .text {
|
281 | background: #fff;
|
282 | -webkit-transition: all 0.25s ease;
|
283 | -moz-transition: all 0.25s ease;
|
284 | -o-transition: all 0.25s ease;
|
285 | transition: all 0.25s ease;
|
286 | -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25);
|
287 | -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25);
|
288 | box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25);
|
289 | border-top: 1px solid #dfdfdf;
|
290 | position: relative;
|
291 | }
|
292 |
|
293 | #configuration .text {
|
294 | padding: 7px 15px 20px 15px;
|
295 | margin-bottom: 5px;
|
296 | }
|
297 |
|
298 | #configuration .text h3 {
|
299 | font-size: 16px;
|
300 | line-height: 1.2;
|
301 | padding: 5px 0;
|
302 | font-weight: bold;
|
303 | margin-top: 1em;
|
304 | }
|
305 |
|
306 | #configuration .text h3:before {
|
307 | content: "\f105";
|
308 | position: absolute;
|
309 | left: 4px;
|
310 | font-family: FontAwesome;
|
311 | font-weight: normal;
|
312 | font-style: normal;
|
313 | text-decoration: inherit;
|
314 | -webkit-font-smoothing: antialiased;
|
315 | }
|
316 |
|
317 | #configuration .text h3:first-of-type {
|
318 | margin-top: 0;
|
319 | }
|
320 |
|
321 | code {
|
322 | font-size: 75%;
|
323 | border: 1px solid #ddd;
|
324 | background-color: #fafafa;
|
325 | line-height: 23px;
|
326 | font-family: monospace;
|
327 | }
|
328 |
|
329 | #configuration .text .coverage, #configuration .text .browsers {
|
330 | padding: 20px;
|
331 | display: inline-block;
|
332 | }
|
333 |
|
334 | #configuration .icon-ok {
|
335 | color : #79a161;
|
336 | margin-right: 10px;
|
337 | }
|
338 |
|
339 | #configuration .icon-remove {
|
340 | color : #be4b3c;
|
341 | margin-right: 10px;
|
342 | }
|
343 |
|
344 | #slave, #slave a {
|
345 | color: #000;
|
346 | }
|
347 |
|
348 | #slave a:hover {
|
349 | color: #8D8AB5;
|
350 | }
|
351 |
|
352 | #slave a {
|
353 | -webkit-animation: "pulse" 200ms ease 1s 1;
|
354 | -moz-animation: "pulse" 200ms ease 1s 1;
|
355 | -ms-animation: "pulse" 200ms ease 1s 1;
|
356 | -o-animation: "pulse" 200ms ease 1s 1;
|
357 | animation: "pulse" 200ms ease 1s 1;
|
358 | }
|
359 |
|
360 | @keyframes "pulse" {
|
361 | from {}
|
362 | to {
|
363 | color: #8D8AB5;
|
364 | }
|
365 | }
|
366 |
|
367 | @-moz-keyframes pulse {
|
368 | from {}
|
369 | to {
|
370 | color: #8D8AB5;
|
371 | }
|
372 | }
|
373 |
|
374 | @-webkit-keyframes "pulse" {
|
375 | from {}
|
376 | to {
|
377 | color: #8D8AB5;
|
378 | }
|
379 | }
|
380 |
|
381 | @-ms-keyframes "pulse" {
|
382 | from {}
|
383 | to {
|
384 | color: #8D8AB5;
|
385 | }
|
386 | }
|
387 |
|
388 | @-o-keyframes "pulse" {
|
389 | from {}
|
390 | to {
|
391 | color: #8D8AB5;
|
392 | }
|
393 | }
|
394 |
|
395 | .slaves {
|
396 | text-align: center;
|
397 | border-spacing: 5px 15px;
|
398 | }
|
399 | .slaves .browser {
|
400 | width: 100px;
|
401 | max-width: 150px;
|
402 | }
|
403 | .slaves .userAgent {
|
404 | width: 300px;
|
405 | }
|
406 | .slaves .address {
|
407 | width: 300px;
|
408 | }
|
409 | .ellipsis {
|
410 | max-width: 300px;
|
411 | text-overflow: ellipsis;
|
412 | white-space: nowrap;
|
413 | overflow: hidden;
|
414 | }
|
415 | .ellipsis:hover::before {
|
416 | white-space: nowrap;
|
417 | overflow: visible;
|
418 | background-color: #fff;
|
419 | content : attr(data-text);
|
420 | position: absolute;
|
421 | border: 1px solid #ccc;
|
422 | }
|
423 | .slaves .status {
|
424 | }
|
425 |
|
426 | @media screen and (max-width: 680px) {
|
427 | .column-grid .column {
|
428 | width: 45%;
|
429 | }
|
430 | #site-title, h1#site-title, #menu-primary {
|
431 | top : 0;
|
432 | }
|
433 | #main {
|
434 | width: 100%;
|
435 | padding: 0;
|
436 | }
|
437 | table, thead, tbody, th, td, tr {
|
438 | display: block;
|
439 | }
|
440 | thead tr {
|
441 | position: absolute;
|
442 | top: -9999px;
|
443 | left: -9999px;
|
444 | }
|
445 | td {
|
446 | border: none;
|
447 | border-bottom: 1px solid #eee;
|
448 | position: relative;
|
449 | text-align: left;
|
450 | width: 100%;
|
451 | padding-left: 35%;
|
452 | }
|
453 | td:before {
|
454 | position: absolute;
|
455 | left: 6px;
|
456 | width: 45%;
|
457 | padding-right: 10px;
|
458 | white-space: nowrap;
|
459 | content: attr(data-is);
|
460 | }
|
461 | tr {
|
462 | border: 1px solid #ccc;
|
463 | }
|
464 | .ellipsis {
|
465 | max-width: 680px;
|
466 | text-overflow: visible;
|
467 | white-space: wrap;
|
468 | }
|
469 | .ellipsis:hover::before {
|
470 | white-space: nowrap;
|
471 | overflow: visible;
|
472 | background-color: transparent;
|
473 | content : attr(data-is);
|
474 | border: 0;
|
475 | }
|
476 | .slaves .browser, .slaves .userAgent, .slaves .address {
|
477 | width: auto;
|
478 | max-width: 680px;
|
479 | }
|
480 | }
|
481 |
|
482 | @media screen and (max-width: 480px) {
|
483 | .column-grid .column {
|
484 | width: 100%;
|
485 | }
|
486 | }
|