| 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 |