DYEBench should use TodoMVC to test FlightJS for consistency
[WebKit-https.git] / PerformanceTests / DoYouEvenBench / resources / todomvc / dependency-examples / flight / bower_components / todomvc-common / base.css
1 html,
2 body {
3     margin: 0;
4     padding: 0;
5 }
6
7 button {
8     margin: 0;
9     padding: 0;
10     border: 0;
11     background: none;
12     font-size: 100%;
13     vertical-align: baseline;
14     font-family: inherit;
15     color: inherit;
16     -webkit-appearance: none;
17     -ms-appearance: none;
18     -o-appearance: none;
19     appearance: none;
20 }
21
22 body {
23     font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
24     line-height: 1.4em;
25     background: #eaeaea url('bg.png');
26     color: #4d4d4d;
27     width: 550px;
28     margin: 0 auto;
29     -webkit-font-smoothing: antialiased;
30     -moz-font-smoothing: antialiased;
31     -ms-font-smoothing: antialiased;
32     -o-font-smoothing: antialiased;
33     font-smoothing: antialiased;
34 }
35
36 button,
37 input[type="checkbox"] {
38   outline: none;
39 }
40
41 #todoapp {
42     background: #fff;
43     background: rgba(255, 255, 255, 0.9);
44     margin: 130px 0 40px 0;
45     border: 1px solid #ccc;
46     position: relative;
47     border-top-left-radius: 2px;
48     border-top-right-radius: 2px;
49     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
50                 0 25px 50px 0 rgba(0, 0, 0, 0.15);
51 }
52
53 #todoapp:before {
54     content: '';
55     border-left: 1px solid #f5d6d6;
56     border-right: 1px solid #f5d6d6;
57     width: 2px;
58     position: absolute;
59     top: 0;
60     left: 40px;
61     height: 100%;
62 }
63
64 #todoapp input::-webkit-input-placeholder {
65     font-style: italic;
66 }
67
68 #todoapp input::-moz-placeholder {
69     font-style: italic;
70     color: #a9a9a9;
71 }
72
73 #todoapp h1 {
74     position: absolute;
75     top: -120px;
76     width: 100%;
77     font-size: 70px;
78     font-weight: bold;
79     text-align: center;
80     color: #b3b3b3;
81     color: rgba(255, 255, 255, 0.3);
82     text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
83     -webkit-text-rendering: optimizeLegibility;
84     -moz-text-rendering: optimizeLegibility;
85     -ms-text-rendering: optimizeLegibility;
86     -o-text-rendering: optimizeLegibility;
87     text-rendering: optimizeLegibility;
88 }
89
90 #header {
91     padding-top: 15px;
92     border-radius: inherit;
93 }
94
95 #header:before {
96     content: '';
97     position: absolute;
98     top: 0;
99     right: 0;
100     left: 0;
101     height: 15px;
102     z-index: 2;
103     border-bottom: 1px solid #6c615c;
104     background: #8d7d77;
105     background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
106     background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
107     background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
108     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
109     border-top-left-radius: 1px;
110     border-top-right-radius: 1px;
111 }
112
113 #new-todo,
114 .edit {
115     position: relative;
116     margin: 0;
117     width: 100%;
118     font-size: 24px;
119     font-family: inherit;
120     line-height: 1.4em;
121     border: 0;
122     outline: none;
123     color: inherit;
124     padding: 6px;
125     border: 1px solid #999;
126     box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
127     -moz-box-sizing: border-box;
128     -ms-box-sizing: border-box;
129     -o-box-sizing: border-box;
130     box-sizing: border-box;
131     -webkit-font-smoothing: antialiased;
132     -moz-font-smoothing: antialiased;
133     -ms-font-smoothing: antialiased;
134     -o-font-smoothing: antialiased;
135     font-smoothing: antialiased;
136 }
137
138 #new-todo {
139     padding: 16px 16px 16px 60px;
140     border: none;
141     background: rgba(0, 0, 0, 0.02);
142     z-index: 2;
143     box-shadow: none;
144 }
145
146 #main {
147     position: relative;
148     z-index: 2;
149     border-top: 1px dotted #adadad;
150 }
151
152 label[for='toggle-all'] {
153     display: none;
154 }
155
156 #toggle-all {
157     position: absolute;
158     top: -42px;
159     left: -4px;
160     width: 40px;
161     text-align: center;
162     /* Mobile Safari */
163     border: none;
164 }
165
166 #toggle-all:before {
167     content: '»';
168     font-size: 28px;
169     color: #d9d9d9;
170     padding: 0 25px 7px;
171 }
172
173 #toggle-all:checked:before {
174     color: #737373;
175 }
176
177 #todo-list {
178     margin: 0;
179     padding: 0;
180     list-style: none;
181 }
182
183 #todo-list li {
184     position: relative;
185     font-size: 24px;
186     border-bottom: 1px dotted #ccc;
187 }
188
189 #todo-list li:last-child {
190     border-bottom: none;
191 }
192
193 #todo-list li.editing {
194     border-bottom: none;
195     padding: 0;
196 }
197
198 #todo-list li.editing .edit {
199     display: block;
200     width: 506px;
201     padding: 13px 17px 12px 17px;
202     margin: 0 0 0 43px;
203 }
204
205 #todo-list li.editing .view {
206     display: none;
207 }
208
209 #todo-list li .toggle {
210     text-align: center;
211     width: 40px;
212     /* auto, since non-WebKit browsers doesn't support input styling */
213     height: auto;
214     position: absolute;
215     top: 0;
216     bottom: 0;
217     margin: auto 0;
218     /* Mobile Safari */
219     border: none;
220     -webkit-appearance: none;
221     -ms-appearance: none;
222     -o-appearance: none;
223     appearance: none;
224 }
225
226 #todo-list li .toggle:after {
227     content: '✔';
228     /* 40 + a couple of pixels visual adjustment */
229     line-height: 43px;
230     font-size: 20px;
231     color: #d9d9d9;
232     text-shadow: 0 -1px 0 #bfbfbf;
233 }
234
235 #todo-list li .toggle:checked:after {
236     color: #85ada7;
237     text-shadow: 0 1px 0 #669991;
238     bottom: 1px;
239     position: relative;
240 }
241
242 #todo-list li label {
243     white-space: pre;
244     word-break: break-word;
245     padding: 15px 60px 15px 15px;
246     margin-left: 45px;
247     display: block;
248     line-height: 1.2;
249     -webkit-transition: color 0.4s;
250     transition: color 0.4s;
251 }
252
253 #todo-list li.completed label {
254     color: #a9a9a9;
255     text-decoration: line-through;
256 }
257
258 #todo-list li .destroy {
259     display: none;
260     position: absolute;
261     top: 0;
262     right: 10px;
263     bottom: 0;
264     width: 40px;
265     height: 40px;
266     margin: auto 0;
267     font-size: 22px;
268     color: #a88a8a;
269     -webkit-transition: all 0.2s;
270     transition: all 0.2s;
271 }
272
273 #todo-list li .destroy:hover {
274     text-shadow: 0 0 1px #000,
275                  0 0 10px rgba(199, 107, 107, 0.8);
276     -webkit-transform: scale(1.3);
277     -ms-transform: scale(1.3);
278     transform: scale(1.3);
279 }
280
281 #todo-list li .destroy:after {
282     content: '✖';
283 }
284
285 #todo-list li:hover .destroy {
286     display: block;
287 }
288
289 #todo-list li .edit {
290     display: none;
291 }
292
293 #todo-list li.editing:last-child {
294     margin-bottom: -1px;
295 }
296
297 #footer {
298     color: #777;
299     padding: 0 15px;
300     position: absolute;
301     right: 0;
302     bottom: -31px;
303     left: 0;
304     height: 20px;
305     z-index: 1;
306     text-align: center;
307 }
308
309 #footer:before {
310     content: '';
311     position: absolute;
312     right: 0;
313     bottom: 31px;
314     left: 0;
315     height: 50px;
316     z-index: -1;
317     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
318                 0 6px 0 -3px rgba(255, 255, 255, 0.8),
319                 0 7px 1px -3px rgba(0, 0, 0, 0.3),
320                 0 43px 0 -6px rgba(255, 255, 255, 0.8),
321                 0 44px 2px -6px rgba(0, 0, 0, 0.2);
322 }
323
324 #todo-count {
325     float: left;
326     text-align: left;
327 }
328
329 #filters {
330     margin: 0;
331     padding: 0;
332     list-style: none;
333     position: absolute;
334     right: 0;
335     left: 0;
336 }
337
338 #filters li {
339     display: inline;
340 }
341
342 #filters li a {
343     color: #83756f;
344     margin: 2px;
345     text-decoration: none;
346 }
347
348 #filters li a.selected {
349     font-weight: bold;
350 }
351
352 #clear-completed {
353     float: right;
354     position: relative;
355     line-height: 20px;
356     text-decoration: none;
357     background: rgba(0, 0, 0, 0.1);
358     font-size: 11px;
359     padding: 0 10px;
360     border-radius: 3px;
361     box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
362 }
363
364 #clear-completed:hover {
365     background: rgba(0, 0, 0, 0.15);
366     box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
367 }
368
369 #info {
370     margin: 65px auto 0;
371     color: #a6a6a6;
372     font-size: 12px;
373     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
374     text-align: center;
375 }
376
377 #info a {
378     color: inherit;
379 }
380
381 /*
382     Hack to remove background from Mobile Safari.
383     Can't use it globally since it destroys checkboxes in Firefox and Opera
384 */
385
386 @media screen and (-webkit-min-device-pixel-ratio:0) {
387     #toggle-all,
388     #todo-list li .toggle {
389         background: none;
390     }
391
392     #todo-list li .toggle {
393         height: 40px;
394     }
395
396     #toggle-all {
397         top: -56px;
398         left: -15px;
399         width: 65px;
400         height: 41px;
401         -webkit-transform: rotate(90deg);
402         -ms-transform: rotate(90deg);
403         transform: rotate(90deg);
404         -webkit-appearance: none;
405         appearance: none;
406     }
407 }
408
409 .hidden {
410     display: none;
411 }
412
413 hr {
414     margin: 20px 0;
415     border: 0;
416     border-top: 1px dashed #C5C5C5;
417     border-bottom: 1px dashed #F7F7F7;
418 }
419
420 .learn a {
421     font-weight: normal;
422     text-decoration: none;
423     color: #b83f45;
424 }
425
426 .learn a:hover {
427     text-decoration: underline;
428     color: #787e7e;
429 }
430
431 .learn h3,
432 .learn h4,
433 .learn h5 {
434     margin: 10px 0;
435     font-weight: 500;
436     line-height: 1.2;
437     color: #000;
438 }
439
440 .learn h3 {
441     font-size: 24px;
442 }
443
444 .learn h4 {
445     font-size: 18px;
446 }
447
448 .learn h5 {
449     margin-bottom: 0;
450     font-size: 14px;
451 }
452
453 .learn ul {
454     padding: 0;
455     margin: 0 0 30px 25px;
456 }
457
458 .learn li {
459     line-height: 20px;
460 }
461
462 .learn p {
463     font-size: 15px;
464     font-weight: 300;
465     line-height: 1.3;
466     margin-top: 0;
467     margin-bottom: 0;
468 }
469
470 .quote {
471     border: none;
472     margin: 20px 0 60px 0;
473 }
474
475 .quote p {
476     font-style: italic;
477 }
478
479 .quote p:before {
480     content: '“';
481     font-size: 50px;
482     opacity: .15;
483     position: absolute;
484     top: -20px;
485     left: 3px;
486 }
487
488 .quote p:after {
489     content: '”';
490     font-size: 50px;
491     opacity: .15;
492     position: absolute;
493     bottom: -42px;
494     right: 3px;
495 }
496
497 .quote footer {
498     position: absolute;
499     bottom: -40px;
500     right: 0;
501 }
502
503 .quote footer img {
504     border-radius: 3px;
505 }
506
507 .quote footer a {
508     margin-left: 5px;
509     vertical-align: middle;
510 }
511
512 .speech-bubble {
513     position: relative;
514     padding: 10px;
515     background: rgba(0, 0, 0, .04);
516     border-radius: 5px;
517 }
518
519 .speech-bubble:after {
520     content: '';
521     position: absolute;
522     top: 100%;
523     right: 30px;
524     border: 13px solid transparent;
525     border-top-color: rgba(0, 0, 0, .04);
526 }
527
528 .learn-bar > .learn {
529     position: absolute;
530     width: 272px;
531     top: 8px;
532     left: -300px;
533     padding: 10px;
534     border-radius: 5px;
535     background-color: rgba(255, 255, 255, .6);
536     -webkit-transition-property: left;
537     transition-property: left;
538     -webkit-transition-duration: 500ms;
539     transition-duration: 500ms;
540 }
541
542 @media (min-width: 899px) {
543     .learn-bar {
544         width: auto;
545         margin: 0 0 0 300px;
546     }
547
548     .learn-bar > .learn {
549         left: 8px;
550     }
551
552     .learn-bar #todoapp {
553         width: 550px;
554         margin: 130px auto 40px auto;
555     }
556 }