OLD | NEW |
| (Empty) |
1 /* | |
2 * This file is part of Adblock Plus <http://adblockplus.org/>, | |
3 * Copyright (C) 2006-2014 Eyeo GmbH | |
4 * | |
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 | |
7 * published by the Free Software Foundation. | |
8 * | |
9 * Adblock Plus is distributed in the hope that it will be useful, | |
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of | |
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
12 * GNU General Public License for more details. | |
13 * | |
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/>. | |
16 */ | |
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 body | |
37 { | |
38 font-family: Helvetica, Arial, sans-serif; | |
39 font-size: 15px; | |
40 line-height: 140%; | |
41 color: #7f776b; | |
42 background-color: #f8f6f2; | |
43 background-image: url(background-main.png); | |
44 margin: 0; | |
45 padding: 0; | |
46 } | |
47 | |
48 a, a:link, a:visited | |
49 { | |
50 color: #5a84b3; | |
51 text-decoration: underline; | |
52 } | |
53 | |
54 a:hover | |
55 { | |
56 text-decoration: none; | |
57 } | |
58 | |
59 button | |
60 { | |
61 cursor: pointer; | |
62 } | |
63 | |
64 ul | |
65 { | |
66 margin: 0; | |
67 padding: 0; | |
68 } | |
69 | |
70 li | |
71 { | |
72 margin: 0; | |
73 padding: 0; | |
74 list-style-type: none; | |
75 } | |
76 | |
77 header | |
78 { | |
79 background-image: url(background.png); | |
80 background-repeat: repeat-x; | |
81 width: 100%; | |
82 padding: 40px 0 0 0; | |
83 } | |
84 | |
85 header h1 | |
86 { | |
87 font-size: 24px; | |
88 font-weight: normal; | |
89 color: #57ab5b; | |
90 text-align: center; | |
91 margin: 21px auto; | |
92 padding: 16px 0 14px 0; | |
93 border: 1px #57ab5b; | |
94 border-style: dashed none; | |
95 /* border parallel fix - 957px is the value | |
96 * closest to 960px(page width) which makes | |
97 * the dashed border parallel | |
98 */ | |
99 max-width: 957px; | |
100 } | |
101 | |
102 h1,h2,h3 | |
103 { | |
104 font-family: CreteRound, Helvetica, Arial, sans-serif; | |
105 } | |
106 | |
107 h2 | |
108 { | |
109 font-size: 26px; | |
110 font-weight: lighter; | |
111 color: #968d81; | |
112 line-height: 28px; | |
113 text-align: center; | |
114 margin: 0; | |
115 padding: 0; | |
116 } | |
117 | |
118 h3 | |
119 { | |
120 font-size: 22px; | |
121 color: #7F776B; | |
122 font-weight: normal; | |
123 margin: 0 0 10px 0; | |
124 padding: 0; | |
125 line-height: 24px; | |
126 } | |
127 | |
128 h4 | |
129 { | |
130 font-size: 15px; | |
131 color: #7f776b; | |
132 font-weight: normal; | |
133 text-align: center; | |
134 margin: 0; | |
135 padding: 0; | |
136 } | |
137 | |
138 section | |
139 { | |
140 margin: 0 auto; | |
141 margin-bottom: 30px; | |
142 max-width: 760px; | |
143 background-image: url(background.png); | |
144 padding: 40px 100px; | |
145 } | |
146 | |
147 section > p | |
148 { | |
149 margin: 15px 0 0 0; | |
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 border-bottom: 4px solid #968D81; | |
167 } | |
168 | |
169 #can-do-more > h2 | |
170 { | |
171 margin: 0 100px; | |
172 } | |
173 | |
174 .feature-malware-image | |
175 { | |
176 background-image: url(features/malware.png); | |
177 background-repeat: no-repeat; | |
178 } | |
179 | |
180 .feature-social-image | |
181 { | |
182 background-image: url(features/social.png); | |
183 background-repeat: no-repeat; | |
184 } | |
185 | |
186 .feature-tracking-image | |
187 { | |
188 background-image: url(features/tracking.png); | |
189 background-repeat: no-repeat; | |
190 } | |
191 | |
192 #can-do-more-content | |
193 { | |
194 margin: 30px 100px 20px 100px; | |
195 } | |
196 | |
197 #can-do-more #features | |
198 { | |
199 border-spacing: 10px; | |
200 margin: 0px; | |
201 padding: 0px; | |
202 } | |
203 | |
204 #can-do-more .feature:not([hidden]) | |
205 { | |
206 display: block; | |
207 list-style-type: none; | |
208 padding: 30px 0; | |
209 padding-bottom: 20px; | |
210 border-top: 1px dashed #c0bebb; | |
211 } | |
212 | |
213 #can-do-more .feature-image, #can-do-more .feature-description | |
214 { | |
215 display: inline-block; | |
216 *display: inline; /* IE6 inline-block fix */ | |
217 *zoom: 1; | |
218 vertical-align: top; | |
219 } | |
220 | |
221 #can-do-more .feature-description | |
222 { | |
223 margin: 0px 0px 0 20px; | |
224 width: 625px; | |
225 max-width: 85%; | |
226 } | |
227 | |
228 #can-do-more .feature-description-textblock | |
229 { | |
230 width: 480px; | |
231 max-width: 100%; | |
232 margin: 0 40px 0 0; | |
233 display: inline-block; | |
234 } | |
235 | |
236 #can-do-more .feature-description-textblock > span | |
237 { | |
238 margin: 15px 0 0 0; | |
239 } | |
240 | |
241 #can-do-more .feature-image | |
242 { | |
243 width: 59px; | |
244 height: 59px; | |
245 margin: 8px 0 10px 20px; | |
246 } | |
247 | |
248 #share | |
249 { | |
250 background-image: url(background-share.png); | |
251 padding: 50px 100px 40px 100px; | |
252 max-width: 760px; | |
253 text-align: center; | |
254 font-family: CreteRound, Helvetica, Arial, sans-serif; | |
255 } | |
256 | |
257 #share h2 | |
258 { | |
259 color: #fff; | |
260 margin: 0 0 30px 0; | |
261 } | |
262 | |
263 #share h2 > a | |
264 { | |
265 color: #fff; | |
266 } | |
267 | |
268 #share h2 > a:hover | |
269 { | |
270 color: #2e5075; | |
271 } | |
272 | |
273 #share span | |
274 { | |
275 color: #bed1e6; | |
276 text-align: center; | |
277 line-height: 34px; | |
278 font-size: 22px; | |
279 display: block; | |
280 } | |
281 | |
282 #donate:hover, .share-buttons a:hover | |
283 { | |
284 box-shadow: 0px 0px 0px 2px #8ca7c4; | |
285 border-radius: 30px; | |
286 } | |
287 | |
288 #donate-block span, #share-block span | |
289 { | |
290 margin: 10px 20px 0px 20px; | |
291 } | |
292 | |
293 #donate-block, #share-block | |
294 { | |
295 min-width: 250px; | |
296 display: inline-block; | |
297 vertical-align: top; | |
298 padding: 5px 0 5px 0; | |
299 border: 1px dashed #37506d; | |
300 border-style: none dashed; | |
301 } | |
302 | |
303 #donate-block | |
304 { | |
305 width: 50%; | |
306 } | |
307 | |
308 #share-block | |
309 { | |
310 width: 49%; | |
311 | |
312 -webkit-border-start-style: none; | |
313 -moz-border-start-style: none; | |
314 } | |
315 | |
316 .share-buttons | |
317 { | |
318 margin: 6px 0 0 0; | |
319 cursor: pointer; | |
320 vertical-align: top; | |
321 /* because inline block creates | |
322 * space if not captured with | |
323 * font-size and line-height 0px | |
324 */ | |
325 font-size: 0px; | |
326 line-height: 0px; | |
327 } | |
328 | |
329 .share-buttons > a | |
330 { | |
331 width: 50px; | |
332 height: 50px; | |
333 margin: 0 8px; | |
334 text-decoration: none; | |
335 display: inline-block; | |
336 } | |
337 | |
338 #share-general, | |
339 :root[lang^="zh-"] #share-chinese | |
340 { | |
341 display: block; | |
342 } | |
343 | |
344 :root[lang^="zh-"] #share-general, | |
345 #share-chinese | |
346 { | |
347 display: none; | |
348 } | |
349 | |
350 #share-chinese > a | |
351 { | |
352 border-bottom: 2px solid transparent; | |
353 } | |
354 | |
355 #share-chinese > a:hover | |
356 { | |
357 box-shadow: none; | |
358 border-radius: 0; | |
359 border-bottom: 2px solid #8CA7C4; | |
360 } | |
361 | |
362 #share-facebook | |
363 { | |
364 background-image: url(social/facebook.png); | |
365 background-repeat: no-repeat; | |
366 } | |
367 | |
368 #share-twitter | |
369 { | |
370 background-image: url(social/twitter.png); | |
371 background-repeat: no-repeat; | |
372 } | |
373 | |
374 #share-gplus | |
375 { | |
376 background-image: url(social/googleplus.png); | |
377 background-repeat: no-repeat; | |
378 } | |
379 | |
380 #share-renren | |
381 { | |
382 background-image: url(social/renren.png); | |
383 background-repeat: no-repeat; | |
384 } | |
385 | |
386 #share-weibo | |
387 { | |
388 background-image: url(social/weibo.png); | |
389 background-repeat: no-repeat; | |
390 } | |
391 | |
392 .warning | |
393 { | |
394 font-size: 160%; | |
395 border: 3px dashed red; | |
396 text-align: center; | |
397 line-height: 1.3em; | |
398 } | |
399 | |
400 #social ul | |
401 { | |
402 list-style: none; | |
403 display: inline-block; | |
404 padding: 0; | |
405 margin: 0; | |
406 } | |
407 | |
408 #social:hover h1 | |
409 { | |
410 opacity: 0; | |
411 } | |
412 | |
413 #social ul:hover li { | |
414 opacity: 0.3; | |
415 } | |
416 | |
417 #social ul li | |
418 { | |
419 display: inline-block; | |
420 margin: 0px 5px; | |
421 -webkit-transition: opacity .5s ease, bottom .3s ease; | |
422 transition: opacity .5s ease, bottom .3s ease; | |
423 position: relative; | |
424 bottom: -30px; | |
425 } | |
426 | |
427 #social ul li:hover | |
428 { | |
429 opacity: 1.0; | |
430 bottom: 0px; | |
431 } | |
432 | |
433 .share-button | |
434 { | |
435 display: inline-block; | |
436 width: 82px; | |
437 height: 82px; | |
438 } | |
439 | |
440 #glass-pane, #share-popup | |
441 { | |
442 visibility: hidden; | |
443 opacity: 0; | |
444 -webkit-transition-property: opacity; | |
445 transition-property: opacity; | |
446 } | |
447 | |
448 #glass-pane | |
449 { | |
450 position: fixed; | |
451 top: 0; | |
452 right: 0; | |
453 bottom: 0; | |
454 left: 0; | |
455 background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%; | |
456 z-index: 101; | |
457 -webkit-transition-duration: 0.2s; | |
458 transition-duration: 0.2s; | |
459 } | |
460 | |
461 #share-popup | |
462 { | |
463 position: absolute; | |
464 top: 50%; | |
465 left: 50%; | |
466 border: none; | |
467 -webkit-transition-delay: 0.1s; | |
468 transition-delay: 0.1s; | |
469 } | |
470 | |
471 #glass-pane.visible, #share-popup.visible | |
472 { | |
473 visibility: visible; | |
474 opacity: 1; | |
475 } | |
476 | |
477 #share-popup.visible | |
478 { | |
479 -webkit-transition-duration: 0.15s; | |
480 transition-duration: 0.15s; | |
481 } | |
482 | |
483 .toggle | |
484 { | |
485 cursor: pointer; | |
486 position: relative; | |
487 display: inline-block; | |
488 vertical-align: top; | |
489 height: 22px; | |
490 margin: 32px 0px 7px 0px; | |
491 border-radius: 9999px; | |
492 border: 1px solid #999; | |
493 overflow: hidden; | |
494 -moz-user-select: none; | |
495 -webkit-user-select: none; | |
496 user-select: none; | |
497 } | |
498 | |
499 .toggle:hover | |
500 { | |
501 box-shadow: 0px 0px 3px 0px #968d81; | |
502 } | |
503 | |
504 .toggle:active | |
505 { | |
506 cursor: wait; | |
507 } | |
508 | |
509 .toggle-on, .toggle-off | |
510 { | |
511 min-width: 42px; | |
512 height: 100%; | |
513 font-size: 11px; | |
514 font-weight: 500; | |
515 text-align: center; | |
516 line-height: 23px; | |
517 border-radius: 9999px; | |
518 } | |
519 | |
520 .toggle-on | |
521 { | |
522 padding: 0px 30px 0px 10px; | |
523 color: rgba(255,255,255, 0.8); | |
524 text-shadow: 1px 1px rgba(0,0,0,0.2); | |
525 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2); | |
526 background: rgb(69,163,31); | |
527 } | |
528 | |
529 .toggle-off | |
530 { | |
531 padding: 0px 10px 0px 30px; | |
532 color: rgba(0,0,0,0.6); | |
533 text-shadow: 1px 1px rgba(255,255,255,0.2); | |
534 background: #cfcfcf; | |
535 background: -moz-linear-gradient(top, #cfcfcf 0%, #f5f5f5 100%); | |
536 background: -webkit-linear-gradient(top, #cfcfcf 0%,#f5f5f5 100%); | |
537 background: linear-gradient(to bottom, #cfcfcf 0%,#f5f5f5 100%); | |
538 } | |
539 | |
540 .toggle-blob | |
541 { | |
542 position: absolute; | |
543 top: 0px; | |
544 right: 0px; | |
545 height: 100%; | |
546 width: 22px; | |
547 border-radius: 50px; | |
548 background: #cfcfcf; | |
549 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%); | |
550 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%); | |
551 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%); | |
552 box-shadow: 1px 1px 2px #888; | |
553 } | |
554 | |
555 .off .toggle-on | |
556 { | |
557 margin-top: -22px; | |
558 } | |
559 | |
560 .off .toggle-blob | |
561 { | |
562 left: 0px; | |
563 right: auto; | |
564 } | |
565 | |
566 #donate | |
567 { | |
568 height: 21px; | |
569 display: inline-block; | |
570 margin: 15px 0px 2px 0px; | |
571 font-size: 16px; | |
572 color: #003366; | |
573 cursor: pointer; | |
574 font-weight: bold; | |
575 padding: 5px 18px; | |
576 text-decoration: none; | |
577 border-radius: 20px; | |
578 border: 1px solid #FF9933; | |
579 overflow: hidden; | |
580 font-family: arial, sans-serif; | |
581 background-image: url(donate.png); | |
582 background-repeat: repeat-x; | |
583 } | |
584 | |
585 footer | |
586 { | |
587 margin: 0 auto 30px; | |
588 max-width: 960px; | |
589 text-align: center; | |
590 } | |
OLD | NEW |