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