Merge the latest version of Speedometer 2.0 to browserbench.org
[WebKit-https.git] / Websites / browserbench.org / Speedometer2.0 / resources / todomvc / architecture-examples / angular / dist / assets / css / todomvc-app.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     font-weight: inherit;
16     color: inherit;
17     -webkit-appearance: none;
18     appearance: none;
19     -webkit-font-smoothing: antialiased;
20     -moz-osx-font-smoothing: grayscale;
21 }
22
23 body {
24     font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
25     line-height: 1.4em;
26     background: #f5f5f5;
27     color: #4d4d4d;
28     min-width: 230px;
29     max-width: 550px;
30     margin: 0 auto;
31     -webkit-font-smoothing: antialiased;
32     -moz-osx-font-smoothing: grayscale;
33     font-weight: 300;
34 }
35
36 :focus {
37     outline: 0;
38 }
39
40 .hidden {
41     display: none;
42 }
43
44 .todoapp {
45     background: #fff;
46     margin: 130px 0 40px 0;
47     position: relative;
48     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
49                 0 25px 50px 0 rgba(0, 0, 0, 0.1);
50 }
51
52 .todoapp input::-webkit-input-placeholder {
53     font-style: italic;
54     font-weight: 300;
55     color: #e6e6e6;
56 }
57
58 .todoapp input::-moz-placeholder {
59     font-style: italic;
60     font-weight: 300;
61     color: #e6e6e6;
62 }
63
64 .todoapp input::input-placeholder {
65     font-style: italic;
66     font-weight: 300;
67     color: #e6e6e6;
68 }
69
70 .todoapp h1 {
71     position: absolute;
72     top: -155px;
73     width: 100%;
74     font-size: 100px;
75     font-weight: 100;
76     text-align: center;
77     color: rgba(175, 47, 47, 0.15);
78     -webkit-text-rendering: optimizeLegibility;
79     -moz-text-rendering: optimizeLegibility;
80     text-rendering: optimizeLegibility;
81 }
82
83 .new-todo,
84 .edit {
85     position: relative;
86     margin: 0;
87     width: 100%;
88     font-size: 24px;
89     font-family: inherit;
90     font-weight: inherit;
91     line-height: 1.4em;
92     border: 0;
93     color: inherit;
94     padding: 6px;
95     border: 1px solid #999;
96     box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
97     box-sizing: border-box;
98     -webkit-font-smoothing: antialiased;
99     -moz-osx-font-smoothing: grayscale;
100 }
101
102 .new-todo {
103     padding: 16px 16px 16px 60px;
104     border: none;
105     background: rgba(0, 0, 0, 0.003);
106     box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
107 }
108
109 .main {
110     position: relative;
111     z-index: 2;
112     border-top: 1px solid #e6e6e6;
113 }
114
115 label[for='toggle-all'] {
116     display: none;
117 }
118
119 .toggle-all {
120     position: absolute;
121     top: -55px;
122     left: -12px;
123     width: 60px;
124     height: 34px;
125     text-align: center;
126     border: none; /* Mobile Safari */
127 }
128
129 .toggle-all:before {
130     content: '❯';
131     font-size: 22px;
132     color: #e6e6e6;
133     padding: 10px 27px 10px 27px;
134 }
135
136 .toggle-all:checked:before {
137     color: #737373;
138 }
139
140 .todo-list {
141     margin: 0;
142     padding: 0;
143     list-style: none;
144 }
145
146 .todo-list li {
147     position: relative;
148     font-size: 24px;
149     border-bottom: 1px solid #ededed;
150 }
151
152 .todo-list li:last-child {
153     border-bottom: none;
154 }
155
156 .todo-list li.editing {
157     border-bottom: none;
158     padding: 0;
159 }
160
161 .todo-list li.editing .edit {
162     display: block;
163     width: 506px;
164     padding: 12px 16px;
165     margin: 0 0 0 43px;
166 }
167
168 .todo-list li.editing .view {
169     display: none;
170 }
171
172 .todo-list li .toggle {
173     text-align: center;
174     width: 40px;
175     /* auto, since non-WebKit browsers doesn't support input styling */
176     height: auto;
177     position: absolute;
178     top: 0;
179     bottom: 0;
180     margin: auto 0;
181     border: none; /* Mobile Safari */
182     -webkit-appearance: none;
183     appearance: none;
184 }
185
186 .todo-list li .toggle:after {
187     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>');
188 }
189
190 .todo-list li .toggle:checked:after {
191     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>');
192 }
193
194 .todo-list li label {
195     word-break: break-all;
196     padding: 15px 60px 15px 15px;
197     margin-left: 45px;
198     display: block;
199     line-height: 1.2;
200     transition: color 0.4s;
201 }
202
203 .todo-list li.completed label {
204     color: #d9d9d9;
205     text-decoration: line-through;
206 }
207
208 .todo-list li .destroy {
209     display: none;
210     position: absolute;
211     top: 0;
212     right: 10px;
213     bottom: 0;
214     width: 40px;
215     height: 40px;
216     margin: auto 0;
217     font-size: 30px;
218     color: #cc9a9a;
219     margin-bottom: 11px;
220     transition: color 0.2s ease-out;
221 }
222
223 .todo-list li .destroy:hover {
224     color: #af5b5e;
225 }
226
227 .todo-list li .destroy:after {
228     content: '×';
229 }
230
231 .todo-list li:hover .destroy {
232     display: block;
233 }
234
235 .todo-list li .edit {
236     display: none;
237 }
238
239 .todo-list li.editing:last-child {
240     margin-bottom: -1px;
241 }
242
243 .footer {
244     color: #777;
245     padding: 10px 15px;
246     height: 20px;
247     text-align: center;
248     border-top: 1px solid #e6e6e6;
249 }
250
251 .footer:before {
252     content: '';
253     position: absolute;
254     right: 0;
255     bottom: 0;
256     left: 0;
257     height: 50px;
258     overflow: hidden;
259     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
260                 0 8px 0 -3px #f6f6f6,
261                 0 9px 1px -3px rgba(0, 0, 0, 0.2),
262                 0 16px 0 -6px #f6f6f6,
263                 0 17px 2px -6px rgba(0, 0, 0, 0.2);
264 }
265
266 .todo-count {
267     float: left;
268     text-align: left;
269 }
270
271 .todo-count strong {
272     font-weight: 300;
273 }
274
275 .filters {
276     margin: 0;
277     padding: 0;
278     list-style: none;
279     position: absolute;
280     right: 0;
281     left: 0;
282 }
283
284 .filters li {
285     display: inline;
286 }
287
288 .filters li a {
289     color: inherit;
290     margin: 3px;
291     padding: 3px 7px;
292     text-decoration: none;
293     border: 1px solid transparent;
294     border-radius: 3px;
295 }
296
297 .filters li a:hover {
298     border-color: rgba(175, 47, 47, 0.1);
299 }
300
301 .filters li a.selected {
302     border-color: rgba(175, 47, 47, 0.2);
303 }
304
305 .clear-completed,
306 html .clear-completed:active {
307     float: right;
308     position: relative;
309     line-height: 20px;
310     text-decoration: none;
311     cursor: pointer;
312 }
313
314 .clear-completed:hover {
315     text-decoration: underline;
316 }
317
318 .info {
319     margin: 65px auto 0;
320     color: #bfbfbf;
321     font-size: 10px;
322     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
323     text-align: center;
324 }
325
326 .info p {
327     line-height: 1;
328 }
329
330 .info a {
331     color: inherit;
332     text-decoration: none;
333     font-weight: 400;
334 }
335
336 .info a:hover {
337     text-decoration: underline;
338 }
339
340 /*
341     Hack to remove background from Mobile Safari.
342     Can't use it globally since it destroys checkboxes in Firefox
343 */
344 @media screen and (-webkit-min-device-pixel-ratio:0) {
345     .toggle-all,
346     .todo-list li .toggle {
347         background: none;
348     }
349
350     .todo-list li .toggle {
351         height: 40px;
352     }
353
354     .toggle-all {
355         -webkit-transform: rotate(90deg);
356         transform: rotate(90deg);
357         -webkit-appearance: none;
358         appearance: none;
359     }
360 }
361
362 @media (max-width: 430px) {
363     .footer {
364         height: 50px;
365     }
366
367     .filters {
368         bottom: 10px;
369     }
370 }