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