Speedometer: ensure all TodoMVC tests use the complete latest CSS
[WebKit-https.git] / PerformanceTests / Speedometer / resources / todomvc / architecture-examples / emberjs / vendor / index.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 .toggle-all {
116     text-align: center;
117     border: none; /* Mobile Safari */
118     opacity: 0;
119     position: absolute;
120 }
121
122 .toggle-all + label {
123     width: 60px;
124     height: 34px;
125     font-size: 0;
126     position: absolute;
127     top: -52px;
128     left: -13px;
129     -webkit-transform: rotate(90deg);
130     transform: rotate(90deg);
131 }
132
133 .toggle-all + label:before {
134     content: '❯';
135     font-size: 22px;
136     color: #e6e6e6;
137     padding: 10px 27px 10px 27px;
138 }
139
140 .toggle-all:checked + label:before {
141     color: #737373;
142 }
143
144 .todo-list {
145     margin: 0;
146     padding: 0;
147     list-style: none;
148 }
149
150 .todo-list li {
151     position: relative;
152     font-size: 24px;
153     border-bottom: 1px solid #ededed;
154 }
155
156 .todo-list li:last-child {
157     border-bottom: none;
158 }
159
160 .todo-list li.editing {
161     border-bottom: none;
162     padding: 0;
163 }
164
165 .todo-list li.editing .edit {
166     display: block;
167     width: 506px;
168     padding: 12px 16px;
169     margin: 0 0 0 43px;
170 }
171
172 .todo-list li.editing .view {
173     display: none;
174 }
175
176 .todo-list li .toggle {
177     text-align: center;
178     width: 40px;
179     /* auto, since non-WebKit browsers doesn't support input styling */
180     height: auto;
181     position: absolute;
182     top: 0;
183     bottom: 0;
184     margin: auto 0;
185     border: none; /* Mobile Safari */
186     -webkit-appearance: none;
187     appearance: none;
188 }
189
190 .todo-list li .toggle {
191     opacity: 0;
192 }
193
194 .todo-list li .toggle + label {
195     /*
196         Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
197         IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
198     */
199     background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
200     background-repeat: no-repeat;
201     background-position: center left;
202 }
203
204 .todo-list li .toggle:checked + label {
205     background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
206 }
207
208 .todo-list li label {
209     word-break: break-all;
210     padding: 15px 15px 15px 60px;
211     display: block;
212     line-height: 1.2;
213     transition: color 0.4s;
214 }
215
216 .todo-list li.completed label {
217     color: #d9d9d9;
218     text-decoration: line-through;
219 }
220
221 .todo-list li .destroy {
222     display: none;
223     position: absolute;
224     top: 0;
225     right: 10px;
226     bottom: 0;
227     width: 40px;
228     height: 40px;
229     margin: auto 0;
230     font-size: 30px;
231     color: #cc9a9a;
232     margin-bottom: 11px;
233     transition: color 0.2s ease-out;
234 }
235
236 .todo-list li .destroy:hover {
237     color: #af5b5e;
238 }
239
240 .todo-list li .destroy:after {
241     content: '×';
242 }
243
244 .todo-list li:hover .destroy {
245     display: block;
246 }
247
248 .todo-list li .edit {
249     display: none;
250 }
251
252 .todo-list li.editing:last-child {
253     margin-bottom: -1px;
254 }
255
256 .footer {
257     color: #777;
258     padding: 10px 15px;
259     height: 20px;
260     text-align: center;
261     border-top: 1px solid #e6e6e6;
262 }
263
264 .footer:before {
265     content: '';
266     position: absolute;
267     right: 0;
268     bottom: 0;
269     left: 0;
270     height: 50px;
271     overflow: hidden;
272     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
273                 0 8px 0 -3px #f6f6f6,
274                 0 9px 1px -3px rgba(0, 0, 0, 0.2),
275                 0 16px 0 -6px #f6f6f6,
276                 0 17px 2px -6px rgba(0, 0, 0, 0.2);
277 }
278
279 .todo-count {
280     float: left;
281     text-align: left;
282 }
283
284 .todo-count strong {
285     font-weight: 300;
286 }
287
288 .filters {
289     margin: 0;
290     padding: 0;
291     list-style: none;
292     position: absolute;
293     right: 0;
294     left: 0;
295 }
296
297 .filters li {
298     display: inline;
299 }
300
301 .filters li a {
302     color: inherit;
303     margin: 3px;
304     padding: 3px 7px;
305     text-decoration: none;
306     border: 1px solid transparent;
307     border-radius: 3px;
308 }
309
310 .filters li a:hover {
311     border-color: rgba(175, 47, 47, 0.1);
312 }
313
314 .filters li a.selected {
315     border-color: rgba(175, 47, 47, 0.2);
316 }
317
318 .clear-completed,
319 html .clear-completed:active {
320     float: right;
321     position: relative;
322     line-height: 20px;
323     text-decoration: none;
324     cursor: pointer;
325 }
326
327 .clear-completed:hover {
328     text-decoration: underline;
329 }
330
331 .info {
332     margin: 65px auto 0;
333     color: #bfbfbf;
334     font-size: 10px;
335     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
336     text-align: center;
337 }
338
339 .info p {
340     line-height: 1;
341 }
342
343 .info a {
344     color: inherit;
345     text-decoration: none;
346     font-weight: 400;
347 }
348
349 .info a:hover {
350     text-decoration: underline;
351 }
352
353 /*
354     Hack to remove background from Mobile Safari.
355     Can't use it globally since it destroys checkboxes in Firefox
356 */
357 @media screen and (-webkit-min-device-pixel-ratio:0) {
358     .toggle-all,
359     .todo-list li .toggle {
360         background: none;
361     }
362
363     .todo-list li .toggle {
364         height: 40px;
365     }
366 }
367
368 @media (max-width: 430px) {
369     .footer {
370         height: 50px;
371     }
372
373     .filters {
374         bottom: 10px;
375     }
376 }