Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: chrome/skin/firstRun.css

Issue 11039060: first run page redesign (Closed)
Patch Set: chinese version added Created Sept. 23, 2013, 1:43 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/skin/features/tracking.png ('k') | chrome/skin/fonts/CreteRound-Italic.otf » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <http://adblockplus.org/>, 2 * This file is part of Adblock Plus <http://adblockplus.org/>,
3 * Copyright (C) 2006-2013 Eyeo GmbH 3 * Copyright (C) 2006-2013 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details. 12 * GNU General Public License for more details.
13 * 13 *
14 * You should have received a copy of the GNU General Public License 14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */ 16 */
17 17
18 @font-face {
19 font-family: 'CreteRound';
20 font-style: normal;
21 src: url(fonts/CreteRound-Regular.otf);
22 src: local ('Ø'),
23 /*local ('Ø') forces using no local font called CreteRound*/
24 url(fonts/CreteRound-Regular.otf) format('otf');
25 }
26
27 @font-face {
28 font-family: 'CreteRound';
29 font-style: italic;
30 src: url(fonts/CreteRound-Italic.otf);
31 src: local ('Ø'),
32 /*local ('Ø') forces using no local font called CreteRound*/
33 url(fonts/CreteRound-Italic.otf) format('otf');
34 }
35
36 *
37 {
38 margin: 0;
39 padding: 0;
40 }
41
18 body 42 body
19 { 43 {
20 font-family: Arial, Helvetica, sans-serif; 44 font-family: Helvetica, Arial, sans-serif;
21 font-size: 14px; 45 font-size: 15px;
22 line-height: 140%; 46 line-height: 140%;
23 color: #000000; 47 color: #7f776b;
24 background-color: #f8f6f2; 48 background-color: #f8f6f2;
49 background-image: url(background-main.png);
50 }
51
52 a, a:link, a:visited
53 {
54 color: #5a84b3;
55 text-decoration: underline;
56 }
57
58 a:hover
59 {
60 text-decoration: none;
61 }
62
63 button
64 {
65 cursor: pointer;
66 }
67
68 li
69 {
70 list-style-type: none;
71 }
72
73 header
74 {
75 height: 200px;
25 background-image: url(background.png); 76 background-image: url(background.png);
26 margin: 0 auto; 77 background-repeat: repeat-x;
27 padding: 0; 78 width: 100%;
28 max-width: 900px; 79 padding: 40px 0 0 0;
29 } 80 }
30 81
31 a:link, a:visited 82 header h1
32 { 83 {
33 color: #7d7d7d; 84 font-size: 24px;
34 } 85 font-weight: normal;
35 86 margin: 0 auto;
36 button, .arrow 87 color: #57ab5b;
37 { 88 text-align: center;
89 margin: 21px auto;
90 padding: 16px 0 14px 0;
91 border: 1px #57ab5b;
92 border-style: dashed none;
93 /* border parallel fix - 957px is the value
94 * closest to 960px(page width) which makes
95 * the dashed border parallel
96 */
97 max-width: 957px;
98 }
99
100 strong
101 {
102 font-weight: 600;
103 }
104
105 h1,h2,h3
106 {
107 font-family: CreteRound, Helvetica, Arial, sans-serif;
108 }
109
110 h2
111 {
112 font-size: 26px;
113 font-weight: lighter;
114 color: #968d81;
115 line-height: 28px;
116 text-align: center;
117
118 }
119
120 h3
121 {
122 font-size: 22px;
123 color: #7F776B;
124 font-weight: normal;
125 margin: 0 0 10px 0;
126 line-height: 24px;
127 }
128
129 h4
130 {
131 font-size: 15px;
132 color: #7f776b;
133 font-weight: normal;
134 text-align: center;
135 }
136
137 section
138 {
139 margin: 0 auto;
140 margin-bottom: 30px;
141 max-width: 760px;
142 background-image: url(background.png);
143 padding: 40px 100px;
144 }
145
146 section > p
147 {
148 margin: 15px 0 0 0;
149 }
150
151
152 #logo
153 {
154 margin: 0 auto;
155 height: 100px;
156 width: 99px;
157 display: block;
158 background-image: url(abp-icon-big.png);
159 background-repeat: no-repeat;
160 }
161
162 #can-do-more
163 {
164 max-width: 960px;
165 padding: 40px 0px 0px 0px;
166 }
167
168 #can-do-more > h2
169 {
170 margin: 0 100px;
171 }
172
173 .fade
174 {
175 opacity: 0;
176 }
177
178 .hide
179 {
180 display: none;
181 }
182
183 #can-do-more-overview
184 {
185 max-width: 760px;
186 min-height: 140px;
187 margin: 30px 100px 0 100px;
188 font-size: 0px;
189 /* hides appearing spacings because of
190 * using display: inline-block*/
38 cursor: pointer; 191 cursor: pointer;
39 } 192 transition: opacity 0.5s ease-in-out;
40 193 -moz-transition: opacity 0.5s ease-in-out;
41 header, p 194 -webkit-transition: 0.5s linear;
Thomas Greiner 2013/09/27 10:17:20 Property name is missing and behavior is inconsist
42 { 195 }
43 margin: 15px 0 5px; 196
44 } 197 #can-do-more-overview > li:hover
45 198 {
46 #content 199 background-image: url("background-main.png");
47 { 200 text-decoration: none;
48 padding: 0 90px; 201 }
49 } 202
50 203 #can-do-more-overview > li
51 header 204 {
52 { 205 width: 230px;
53 padding-left: 148px; 206 height: 115px;
54 background-image: url(abp-icon-big.png); 207 display: inline-block;
55 background-position: 0% 50%; 208 border-right: 1px dashed #c7c6c2;
56 background-repeat: no-repeat; 209 padding: 20px 10px 0 10px;
57 min-height: 128px; 210 vertical-align: top;
58 vertical-align: middle; 211 text-decoration: underline;
59 line-height: 1; 212 -webkit-backface-visibility: hidden;
60 213 /* hides the 1px movement chrome bug
61 display: -webkit-box; 214 * which appears while transition.
62 -webkit-box-orient: vertical; 215 */
63 -webkit-box-pack: center; 216 }
64 217
65 display: -moz-box; 218 #can-do-more-overview > li > div
66 -moz-box-orient: vertical; 219 {
67 -moz-box-pack: center; 220 width: 59px;
68 221 height: 59px;
69 display: -o-box; 222 display: block;
70 -o-box-orient: vertical; 223 margin: 0 auto;
71 -o-box-pack: center; 224 }
72 225
73 display: -ms-box; 226 #can-do-more-overview > li > h4
74 -ms-box-orient: vertical; 227 {
75 -ms-box-pack: center; 228 margin: 15px 0 0 0;
76 229 }
77 display: box; 230
78 box-orient: vertical; 231 #can-do-more #feature-first
79 box-pack: center; 232 {
80 } 233 border-left: 1px dashed #c7c6c2;
81 234 }
82 header h1 235
83 { 236 .feature-malware-image
84 font-size: 40px; 237 {
85 font-weight: normal; 238 background-image: url(features/malware.png);
86 margin: 0; 239 background-repeat: no-repeat;
87 } 240 }
88 241
89 #dataCorruptionWarning 242 .feature-social-image
90 { 243 {
91 font-size: 200%; 244 background-image: url(features/social.png);
92 line-height: 140%; 245 background-repeat: no-repeat;
93 margin: 20px; 246 }
94 padding: 20px; 247
95 border: 3px solid red; 248 .feature-tracking-image
96 border-radius: 10px; 249 {
250 background-image: url(features/tracking.png);
251 background-repeat: no-repeat;
252 }
253
254 #can-do-more-expanded
255 {
256 margin: 30px 100px 0 100px;
257 transition: opacity 0.5s ease-in-out;
258 -moz-transition: opacity 0.5s ease-in-out;
259 -webkit-transition: 0.5s linear;
Thomas Greiner 2013/09/27 10:17:20 Property name is missing and behavior is inconsist
97 } 260 }
98 261
99 #features 262 #features
100 { 263 {
101 display: block; 264 display: block;
102 border-spacing: 10px; 265 border-spacing: 10px;
103 margin: 0px; 266 margin: 0px;
104 padding: 0px; 267 padding: 0px;
105 padding-bottom: 120px;
106 white-space: nowrap;
107 }
108
109 #features-title
110 {
111 font-size: 22px;
112 color: #cc0000;
113 margin: 30px 0px 20px;
114 }
115
116 #features-title::after
117 {
118 content: ":";
119 } 268 }
120 269
121 .feature:not([hidden]) 270 .feature:not([hidden])
122 { 271 {
123 display: block; 272 display: block;
124 position: relative;
125 list-style-type: none; 273 list-style-type: none;
274 padding: 30px 0;
126 padding-bottom: 20px; 275 padding-bottom: 20px;
276 border-top: 1px dashed #c0bebb;
127 } 277 }
128 278
129 .feature-image, .feature-description 279 .feature-image, .feature-description
130 { 280 {
131 display: inline-block; 281 display: inline-block;
132 *display: inline; /* IE6 inline-block fix */ 282 *display: inline; /* IE6 inline-block fix */
133 *zoom: 1; 283 *zoom: 1;
134 vertical-align: top; 284 vertical-align: top;
135 } 285 }
136 286
137 .feature-description 287 .feature-description
138 { 288 {
139 width: 550px; 289 margin: 0px 0px 0 20px;
140 margin: 0px 10px; 290 width: 625px;
141 } 291 max-width: 85%;
142 292 }
143 .feature-title 293
144 { 294 .feature-description-textblock
145 color: black; 295 {
146 font-weight: bold; 296 width: 480px;
147 font-size: 120%; 297 max-width: 100%;
148 } 298 margin: 0 40px 0 0;
149 299 display: inline-block;
150 .feature-title::after 300 }
151 { 301
152 content: ":"; 302 .feature-description-textblock > span
153 } 303 {
154 304 margin: 15px 0 0 0;
155 .feature-text
156 {
157 margin: 7px 0px;
158 white-space: normal;
159 } 305 }
160 306
161 .feature-image 307 .feature-image
162 { 308 {
163 width: 57px; 309 width: 59px;
164 height: 57px; 310 height: 59px;
165 } 311 margin: 8px 0 10px 20px;
166 312 }
167 #feature-malware .feature-image 313
168 { 314 #activate-features
169 background-image: url(features/malware.png); 315 {
170 } 316 width: 100%;
171 317 background-image: url("background-candomore.png");
172 #feature-social .feature-image 318 margin: 30px 0 0 0;
173 { 319 padding: 14px 0 14px 0;
174 background-image: url(features/social.png);
175 }
176
177 #feature-tracking .feature-image
178 {
179 background-image: url(features/tracking.png);
180 }
181
182 .feature button
183 {
184 cursor: pointer; 320 cursor: pointer;
185 position: relative; 321 text-align: center;
186 top: 0px; 322 white-space: nowrap;
187 padding: 5px 10px; 323 }
188 *padding: 2px 3px; 324
189 font-weight: none; 325 #activate-features-label
190 font-size: inherit; 326 {
191 color: white; 327 display: inline-block;
192 text-shadow: 2px 2px 2px #327d14; 328 width: 86%;
193 border: none; 329 color: #fff;
194 border-radius: 3px; 330 font-size: 22px;
195 box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422; 331 text-align: center;
196 background-color: #62c52b; 332 font-style: italic;
197 background: -webkit-linear-gradient(top, #62c52b, #4f9d22); 333 font-family: CreteRound, Helvetica, Arial, sans-serif;
198 background: -moz-linear-gradient(top, #62c52b, #4f9d22); 334 -moz-transition: opacity 0.5s ease-in-out;
199 background: -o-linear-gradient(top, #62c52b, #4f9d22); 335 transition: opacity 0.5s ease-in-out;
200 background: -ms-linear-gradient(top, #62c52b, #4f9d22); 336 }
201 background: linear-gradient(top, #62c52b, #4f9d22); 337
202 -webkit-transition: box-shadow 0.3s ease; 338 #can-do-more.expanded #label-show-expanded
203 -moz-transition: box-shadow 0.3s ease; 339 {
204 -o-transition: box-shadow 0.3s ease; 340 display: block;
205 -ms-transition: box-shadow 0.3s ease; 341 }
206 transition: box-shadow 0.3s ease; 342
207 } 343 #can-do-more.expanded #label-show-overview
208 344 {
209 .feature button:hover 345 display: none;
210 { 346 }
211 box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15; 347
212 } 348 #label-show-expanded
213 349 {
214 .feature button:active 350 display: none;
215 { 351 }
216 top: 3px; 352
217 top: 0px\9; 353 #label-show-overview
218 box-shadow: 0px 0px 7px #486c15; 354 {
219 background-color: #4f9d22; 355 display: block;
220 background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22); 356 }
221 background: -moz-linear-gradient(bottom, #62c52b, #4f9d22); 357
222 background: -o-linear-gradient(bottom, #62c52b, #4f9d22); 358 #activate-features-label:hover
223 background: -ms-linear-gradient(bottom, #62c52b, #4f9d22); 359 {
224 background: linear-gradient(bottom, #62c52b, #4f9d22); 360 color: #1f6822;
225 -webkit-transition: none; 361 }
226 -moz-transition: none; 362
227 -o-transition: none; 363 #can-do-more.expanded .arrow
228 -ms-transition: none; 364 {
229 transition: none; 365 background-image: url("arrow-up.png");
230 *zoom: 1;
231 }
232
233 .feature button.disable
234 {
235 text-shadow: 2px 2px 2px #9d4f22;
236 box-shadow: 0 1px 0 0 #9d4f22, 0 2px 0 0 #999;
237 background-color: #c5622b;
238 background: -webkit-linear-gradient(top, #c5622b, #9d4f22);
239 background: -moz-linear-gradient(top, #c5622b, #9d4f22);
240 background: -o-linear-gradient(top, #c5622b, #9d4f22);
241 background: -ms-linear-gradient(top, #c5622b, #9d4f22);
242 background: linear-gradient(top, #c5622b, #9d4f22);
243 }
244
245 .feature button.disable:hover
246 {
247 box-shadow: 0px 2px 7px #9d4f22, 0 1px 0 0 #9d4f22;
248 }
249
250 .feature button.disable:active
251 {
252 top: 3px;
253 top: 0px\9;
254 box-shadow: 0px 0px 7px #9d4f22;
255 background-color: #9d4f22;
256 background: -webkit-linear-gradient(bottom, #c5622b, #9d4f22);
257 background: -moz-linear-gradient(bottom, #c5622b, #9d4f22);
258 background: -o-linear-gradient(bottom, #c5622b, #9d4f22);
259 background: -ms-linear-gradient(bottom, #c5622b, #9d4f22);
260 background: linear-gradient(bottom, #c5622b, #9d4f22);
261 -webkit-transition: none;
262 -moz-transition: none;
263 -o-transition: none;
264 -ms-transition: none;
265 transition: none;
266 *zoom: 1;
267 }
268
269 #shade
270 {
271 -webkit-transition: opacity 0.2s ease;
272 -moz-transition: opacity 0.2s ease;
273 -o-transition: opacity 0.2s ease;
274 -ms-transition: opacity 0.2s ease;
275 transition: opacity 0.2s ease;
276 opacity: 0.0;
277 position: fixed;
278 margin-left: 10px;
279 bottom: 70px;
280 z-index: 100;
281 } 366 }
282 367
283 .arrow 368 .arrow
284 { 369 {
285 width: 0; 370 width: 29px;
286 height: 0; 371 height: 22px;
287 border: 30px solid transparent; 372 vertical-align: bottom;
288 border-top-color: #000; 373 display: inline-block;
289 } 374 background-image: url("arrow-down.png");
290 375 }
291 footer 376
292 { 377 #share
293 position: fixed; 378 {
294 bottom: 0; 379 background-image: url(background-share.png);
295 left: 0; 380 padding: 50px 100px 40px 100px;
296 right: 0; 381 max-width: 760px;
297 padding: 70px 0 0; 382 text-align: center;
298 text-align: center; 383 font-family: CreteRound, Helvetica, Arial, sans-serif;
299 background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 2 55, 1) 50px); 384 }
300 background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px); 385
301 background: -o-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1 ) 50px); 386 #share h2
302 background: -ms-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px); 387 {
303 background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 5 0px); 388 color: #fff;
304 } 389 margin: 0 0 30px 0;
305 390 }
306 footer h1 391
307 { 392 #share h2 > a
308 margin: 0; 393 {
309 font-size: 18px; 394 color: #fff;
310 color: #666; 395 }
311 position: fixed; 396
312 bottom: 70px; 397 #share h2 > a:hover
313 left: 0; 398 {
314 right: 0; 399 color: #2e5075;
315 -webkit-transition: opacity .3s ease; 400 }
316 -moz-transition: opacity .3s ease; 401
317 -o-transition: opacity .3s ease; 402 #share span
318 -ms-transition: opacity .3s ease; 403 {
319 transition: opacity .3s ease; 404 color: #bed1e6;
320 opacity: 1; 405 text-align: center;
406 line-height: 34px;
407 font-size: 22px;
408 display: block;
409 }
410
411 #donate:hover, .share-buttons a:hover
412 {
413 -moz-box-shadow: 0px 0px 0px 2px #8ca7c4;
414 -webkit-box-shadow: 0px 0px 0px 2px #8ca7c4;
415 box-shadow: 0px 0px 0px 2px #8ca7c4;
416 border-radius: 30px;
417 }
418
419 #donate-block span, #share-block span
420 {
421 margin: 13px 20px 10px 20px;
422 }
423
424 #donate-block, #share-block
425 {
426 min-width: 250px;
427 display: inline-block;
428 vertical-align: top;
429 padding: 20px 0 0 0;
430 }
431
432 #donate-block
433 {
434 border: 1px dashed #37506d;
435 border-style: none dashed;
436 width: 50%;
437 }
438
439 #share-block
440 {
441 border-right: 1px dashed #37506d;
442 width: 49%;
443 }
444
445 .share-buttons
446 {
447 margin: 6px 0 0 0;
448 cursor: pointer;
449 vertical-align: top;
450 /* because inline block creates
451 * space if not captured with
452 * font-size and line-height 0px
453 */
454 font-size: 0px;
455 line-height: 0px;
456 }
457
458 .share-buttons > a
459 {
460 width: 50px;
461 height: 50px;
462 margin: 0 8px;
463 text-decoration: none;
464 display: inline-block;
465 }
466
467 html[lang^="zh_"] #share-chinese,
468 html:not([lang^="zh_"]) #share-general
469 {
470 display: block;
471 }
472
473 html[lang^="zh_"] #share-general,
474 html:not([lang^="zh_"]) #share-chinese
475 {
476 display: none;
477 }
478
479 #share-chinese > a
480 {
481 border-bottom: 2px solid transparent;
482 }
483
484 #share-chinese > a:hover
485 {
486 -moz-box-shadow: none;
487 -webkit-box-shadow: none;
488 box-shadow: none;
489 border-radius: 0;
490 border-bottom: 2px solid #8CA7C4;
491 }
492
493 #share-facebook
494 {
495 background-image: url(social/facebook.png);
496 background-repeat: no-repeat;
497 }
498
499 #share-twitter
500 {
501 background-image: url(social/twitter.png);
502 background-repeat: no-repeat;
503 }
504
505 #share-gplus
506 {
507 background-image: url(social/googleplus.png);
508 background-repeat: no-repeat;
509 }
510
511 #share-renren
512 {
513 background-image: url(social/renren.png);
514 background-repeat: no-repeat;
515 }
516
517 #share-weibo
518 {
519 background-image: url(social/weibo.png);
520 background-repeat: no-repeat;
521 }
522
523 #dataCorruptionWarning
524 {
525 font-size: 160%;
526 border: 3px dashed red;
527 text-align: center;
321 } 528 }
322 529
323 #social ul 530 #social ul
324 { 531 {
325 list-style: none; 532 list-style: none;
326 display: inline-block; 533 display: inline-block;
327 padding: 0; 534 padding: 0;
328 margin: 0; 535 margin: 0;
329 } 536 }
330 537
(...skipping 25 matching lines...) Expand all
356 bottom: 0px; 563 bottom: 0px;
357 } 564 }
358 565
359 .share-button 566 .share-button
360 { 567 {
361 display: inline-block; 568 display: inline-block;
362 width: 82px; 569 width: 82px;
363 height: 82px; 570 height: 82px;
364 } 571 }
365 572
366 #share-facebook
367 {
368 background-image: url(social/facebook.png);
369 }
370
371 #share-twitter
372 {
373 background-image: url(social/twitter.png);
374 }
375
376 #share-gplus
377 {
378 background-image: url(social/gplus.png);
379 }
380
381 #glass-pane, #share-popup 573 #glass-pane, #share-popup
382 { 574 {
383 visibility: hidden; 575 visibility: hidden;
384 opacity: 0; 576 opacity: 0;
385 -webkit-transition-property: opacity, visibility; 577 -webkit-transition-property: opacity, visibility;
386 -moz-transition-property: opacity, visibility; 578 -moz-transition-property: opacity, visibility;
387 -o-transition-property: opacity, visibility; 579 -o-transition-property: opacity, visibility;
388 -ms-transition-property: opacity, visibility; 580 -ms-transition-property: opacity, visibility;
389 transition-property: opacity, visibility; 581 transition-property: opacity, visibility;
390 } 582 }
391 583
392 #glass-pane 584 #glass-pane
393 { 585 {
394 position: fixed; 586 position: fixed;
395 top: 0; 587 top: 0;
396 right: 0; 588 right: 0;
397 bottom: 0; 589 bottom: 0;
398 left: 0; 590 left: 0;
399 background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%; 591 background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%;
400 z-index: 101; 592 z-index: 101;
401
402 -webkit-transition-duration: 0.2s; 593 -webkit-transition-duration: 0.2s;
403 -moz-transition-duration: 0.2s; 594 -moz-transition-duration: 0.2s;
404 -o-transition-duration: 0.2s; 595 -o-transition-duration: 0.2s;
405 -ms-transition-duration: 0.2s; 596 -ms-transition-duration: 0.2s;
406 transition-duration: 0.2s; 597 transition-duration: 0.2s;
407 } 598 }
408 599
409 #share-popup 600 #share-popup
410 { 601 {
411 position: absolute; 602 position: absolute;
(...skipping 18 matching lines...) Expand all
430 -webkit-transition-duration: 0.15s; 621 -webkit-transition-duration: 0.15s;
431 -moz-transition-duration: 0.15s; 622 -moz-transition-duration: 0.15s;
432 -o-transition-duration: 0.15s; 623 -o-transition-duration: 0.15s;
433 -ms-transition-duration: 0.15s; 624 -ms-transition-duration: 0.15s;
434 transition-duration: 0.15s; 625 transition-duration: 0.15s;
435 } 626 }
436 627
437 .toggle 628 .toggle
438 { 629 {
439 cursor: pointer; 630 cursor: pointer;
440 position: absolute; 631 position: relative;
441 display: inline-block; 632 display: inline-block;
442 top: 50%; 633 vertical-align: top;
443 height: 22px; 634 height: 22px;
444 margin: -21px 0px 7px 0px; 635 margin: 32px 0px 7px 0px;
445 border-radius: 9999px; 636 border-radius: 9999px;
446 box-shadow: 0 0 0 1px #999; 637 border: 1px solid #999;
447 overflow: hidden; 638 overflow: hidden;
448 -moz-user-select: none; 639 -moz-user-select: none;
449 -webkit-user-select: none; 640 -webkit-user-select: none;
450 user-select: none; 641 user-select: none;
451 } 642 }
452 643
644 .toggle:hover
645 {
646 -moz-box-shadow: 0px 0px 3px 0px #968d81;
647 -webkit-box-shadow: 0px 3px 0px 0px #968d81;
648 box-shadow: 0px 0px 3px 0px #968d81;
649 }
650
453 .toggle:active 651 .toggle:active
454 { 652 {
455 cursor: wait; 653 cursor: wait;
456 } 654 }
457 655
458 .toggle-on, .toggle-off 656 .toggle-on, .toggle-off
459 { 657 {
460 min-width: 42px; 658 min-width: 42px;
461 height: 100%; 659 height: 100%;
462 font-size: 11px; 660 font-size: 11px;
463 font-weight: 500; 661 font-weight: 500;
464 text-align: center; 662 text-align: center;
465 line-height: 25px; 663 line-height: 23px;
664 -webkit-border-radius: 9999px;
Thomas Greiner 2013/09/27 10:17:20 Please don't only do it for WebKit browsers.
466 } 665 }
467 666
468 .toggle-on 667 .toggle-on
469 { 668 {
470 padding: 0px 30px 0px 10px; 669 padding: 0px 30px 0px 10px;
471 color: rgba(255,255,255, 0.8); 670 color: rgba(255,255,255, 0.8);
472 text-shadow: 1px 1px rgba(0,0,0,0.2); 671 text-shadow: 1px 1px rgba(0,0,0,0.2);
473 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2); 672 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
474 background: rgb(69,163,31); 673 background: rgb(69,163,31);
475 } 674 }
(...skipping 10 matching lines...) Expand all
486 } 685 }
487 686
488 .toggle-blob 687 .toggle-blob
489 { 688 {
490 position: absolute; 689 position: absolute;
491 top: 0px; 690 top: 0px;
492 right: 0px; 691 right: 0px;
493 height: 100%; 692 height: 100%;
494 width: 22px; 693 width: 22px;
495 border-radius: 50px; 694 border-radius: 50px;
496 box-shadow: 1px 1px 2px #888;
497 background: #cfcfcf; 695 background: #cfcfcf;
498 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%); 696 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%);
499 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%); 697 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%);
500 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%); 698 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%);
699 box-shadow: 1px 1px 2px #888;
501 } 700 }
502 701
503 .off .toggle-on 702 .off .toggle-on
504 { 703 {
505 margin-top: -22px; 704 margin-top: -22px;
506 } 705 }
507 706
508 .off .toggle-blob 707 .off .toggle-blob
509 { 708 {
510 left: 0px; 709 left: 0px;
511 right: auto; 710 right: auto;
512 } 711 }
513 712
514 /* Adjust font size on smaller screens */ 713 #donate
515 @media (max-height: 800px)
516 { 714 {
517 body 715 height: 21px;
518 { 716 display: inline-block;
519 font-size: 19px; 717 margin: 15px 0px 2px 0px;
520 } 718 font-size: 16px;
719 color: #003366;
720 cursor: pointer;
721 font-weight: bold;
722 padding: 5px 18px;
723 text-decoration: none;
724 border-radius: 20px;
725 border: 1px solid #FF9933;
726 overflow: hidden;
727 font-family: arial, sans-serif;
728 background-image: url(donate.png);
729 background-repeat: repeat-x;
521 } 730 }
522 731
523 @media (max-height: 750px) 732 footer
524 { 733 {
525 body 734 margin: 0 auto 30px;
526 { 735 max-width: 960px;
527 font-size: 17px; 736 text-align: center;
528 }
529 } 737 }
530
531 @media (max-height: 700px)
532 {
533 body
534 {
535 font-size: 16px;
536 }
537 }
OLDNEW
« no previous file with comments | « chrome/skin/features/tracking.png ('k') | chrome/skin/fonts/CreteRound-Italic.otf » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld