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