Side by Side Diff: pages/customize-youtube.raw
Issue 6021528219025408:
Issue #1170 More progress migrating adblockplus.org to our CMS. (Closed)
Patch Set:
Created Sept. 1, 2014, 10:45 a.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« pages/customize-facebook.raw ('k')
|
pages/development-builds.raw » ('j')
|
no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <head> | |
| 2 <link href="https://adblockplus.org/favicon.ico" rel="shortcut icon"> | |
| 3 <meta content="Vmd_7o1-HUK_EzTSzR7pvGE5wAXBzNtsGnTaZFHG2NA" name="google-site-ve rification"> | |
| 4 | |
| 5 <style type="text/css"> | |
| 6 @font-face { | |
| 7 /* Copyright (c) 2013, TYPE TOGETHER | |
| 8 * (http://www.type-together.com/Crete), | |
| 9 * with Reserved Font Name "Crete Rounded" | |
| 10 * Licensed under SIL Open Font License, 1.1 | |
| 11 * (http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web) | |
| 12 */ | |
| 13 font-family: 'CreteRound'; | |
| 14 font-style: normal; | |
| 15 src: url(/fonts/CreteRoundRegular.otf); | |
| 16 src: local ('Ø'), | |
| 17 /*local ('Ø') forces using no local font called CreteRound*/ | |
| 18 url(/fonts/CreteRoundRegular.otf) format('otf'); | |
| 19 } | |
| 20 | |
| 21 * | |
| 22 { | |
| 23 margin: 0; | |
| 24 padding: 0; | |
| 25 } | |
| 26 | |
| 27 body | |
| 28 { | |
| 29 font-family: CreteRound, Trebuchet MS, Helvetica, Arial, sans-serif; | |
| 30 font-size: 15px; | |
| 31 line-height: 140%; | |
| 32 color: #7f776b; | |
| 33 background-color: #f8f6f2; | |
| 34 background-image: url(/images/customize-facebook/background-main.png?a=show); | |
| 35 } | |
| 36 | |
| 37 a, .tooltip | |
| 38 { | |
| 39 color: #5a84b3; | |
| 40 text-decoration: underline; | |
| 41 } | |
| 42 | |
| 43 a:hover | |
| 44 { | |
| 45 text-decoration: none; | |
| 46 } | |
| 47 | |
| 48 button | |
| 49 { | |
| 50 cursor: pointer; | |
| 51 } | |
| 52 | |
| 53 li | |
| 54 { | |
| 55 list-style-type: none; | |
| 56 } | |
| 57 | |
| 58 #header | |
| 59 { | |
| 60 height: 200px; | |
| 61 background-image: url(/images/customize-facebook/background.png?a=show); | |
| 62 background-repeat: repeat-x; | |
| 63 width: 100%; | |
| 64 padding: 40px 0 0 0; | |
| 65 } | |
| 66 | |
| 67 #header h1 | |
| 68 { | |
| 69 font-size: 22px; | |
| 70 font-weight: normal; | |
| 71 margin: 0 auto; | |
| 72 color: #7b7367; | |
| 73 text-align: center; | |
| 74 margin: 21px auto; | |
| 75 padding: 16px 0 14px 0; | |
| 76 border: 1px #968d81; | |
| 77 border-style: dashed none; | |
| 78 /* border parallel fix - 957px is the value | |
| 79 * closest to 960px(page width) which makes | |
| 80 * the dashed border parallel | |
| 81 */ | |
| 82 max-width: 957px; | |
| 83 } | |
| 84 | |
| 85 #header span | |
| 86 { | |
| 87 color: #c8312b; | |
| 88 } | |
| 89 | |
| 90 strong | |
| 91 { | |
| 92 font-weight: 600; | |
| 93 } | |
| 94 | |
| 95 h2 | |
| 96 { | |
| 97 font-size: 23px; | |
| 98 font-weight: lighter; | |
| 99 color: #968d81; | |
| 100 line-height: 26px; | |
| 101 text-align: center; | |
| 102 } | |
| 103 | |
| 104 h3 | |
| 105 { | |
| 106 font-size: 22px; | |
| 107 color: #7F776B; | |
| 108 font-weight: normal; | |
| 109 margin: 0 0 10px 0; | |
| 110 line-height: 24px; | |
| 111 } | |
| 112 | |
| 113 section | |
| 114 { | |
| 115 margin: 0 auto; | |
| 116 margin-bottom: 30px; | |
| 117 max-width: 760px; | |
| 118 background-image: url(/images/customize-facebook/background.png?a=show); | |
| 119 padding: 40px 100px; | |
| 120 } | |
| 121 | |
| 122 section > p | |
| 123 { | |
| 124 margin: 15px 0 0 0; | |
| 125 } | |
| 126 | |
| 127 | |
| 128 #logo | |
| 129 { | |
| 130 margin: 0 auto; | |
| 131 height: 100px; | |
| 132 width: 99px; | |
| 133 display: block; | |
| 134 background-image: url(/images/customize-facebook/abp-icon-big.png?a=show); | |
| 135 background-repeat: no-repeat; | |
| 136 } | |
| 137 | |
| 138 #blocking-list | |
| 139 { | |
| 140 max-width: 960px; | |
| 141 padding: 40px 0px 40px 0px; | |
| 142 border-style: solid none; | |
| 143 border-width: 4px; | |
| 144 border-color: #968d81; | |
| 145 } | |
| 146 | |
| 147 #blocking-list h2 | |
| 148 { | |
| 149 margin: 0 100px; | |
| 150 padding: 0px 10px; | |
| 151 font-size: 19px; | |
| 152 } | |
| 153 | |
| 154 #blocking-list > ul | |
| 155 { | |
| 156 min-height: 140px; | |
| 157 margin: 0 80px 0 80px; | |
| 158 font-size: 0px; | |
| 159 /* hides appearing spacings because of | |
| 160 * using display: inline-block*/ | |
| 161 } | |
| 162 | |
| 163 #blocking-list > ul > li | |
| 164 { | |
| 165 width: 175px; | |
| 166 display: inline-block; | |
| 167 border-right: 1px dashed #c7c6c2; | |
| 168 padding: 20px 10px 0 10px; | |
| 169 vertical-align: top; | |
| 170 text-align: center; | |
| 171 } | |
| 172 | |
| 173 #blocking-list > ul > li > h2 | |
| 174 { | |
| 175 margin: 0px 0px 8px 0px; | |
| 176 line-height: 26px; | |
| 177 color: #7f776b; | |
| 178 } | |
| 179 | |
| 180 #blocking-list > ul > li > h2 > span | |
| 181 { | |
| 182 text-decoration: underline; | |
| 183 } | |
| 184 | |
| 185 #blocking-list .tooltip | |
| 186 { | |
| 187 display: inline-block; | |
| 188 margin-bottom: 20px; | |
| 189 text-decoration: none; | |
| 190 font-family: Arial, Helvetica, sans-serif; | |
| 191 font-size: 12px; | |
| 192 border-bottom: 1px dotted #5a84b2; | |
| 193 line-height: 14px; | |
| 194 } | |
| 195 | |
| 196 #blocking-list .tooltip:hover | |
| 197 { | |
| 198 border-color: transparent; | |
| 199 cursor: pointer; | |
| 200 } | |
| 201 | |
| 202 .block-button | |
| 203 { | |
| 204 min-width: 85px; | |
| 205 height: 22px; | |
| 206 display: inline-block; | |
| 207 margin: 20px auto 14px auto; | |
| 208 cursor: pointer; | |
| 209 border-radius: 4px; | |
| 210 border-color: #53; | |
| 211 font-family: Arial, Helvetica, sans-serif; | |
| 212 color: #fff; | |
| 213 font-size: 14px; | |
| 214 padding: 2px 24px 0 24px; | |
| 215 text-align: center; | |
| 216 text-decoration: none; | |
| 217 background-color: #77b06d; | |
| 218 } | |
| 219 | |
| 220 .block-button:hover | |
| 221 { | |
| 222 background-color: #609657; | |
| 223 } | |
| 224 | |
| 225 #blocking-list .feature-first | |
| 226 { | |
| 227 border-left: 1px dashed #c7c6c2; | |
| 228 } | |
| 229 | |
| 230 .unwanted-element-screenshot | |
| 231 { | |
| 232 width: 133px; | |
| 233 height: 89px; | |
| 234 margin: 0 auto; | |
| 235 } | |
| 236 | |
| 237 #block-all .unwanted-element-screenshot | |
| 238 { | |
| 239 background-image: url(/images/customize-youtube/screenshot-full.png?a=show); | |
| 240 } | |
| 241 | |
| 242 #block-comments .unwanted-element-screenshot | |
| 243 { | |
| 244 background-image: url(/images/customize-youtube/screenshot-comments.png?a=show ); | |
| 245 } | |
| 246 | |
| 247 #block-suggestions .unwanted-element-screenshot | |
| 248 { | |
| 249 background-image: url(/images/customize-youtube/screenshot-suggestions.png?a=s how); | |
| 250 } | |
| 251 | |
| 252 #block-other .unwanted-element-screenshot | |
| 253 { | |
| 254 background-image: url(/images/customize-youtube/screenshot-other.png?a=show); | |
| 255 } | |
| 256 | |
| 257 .arrow | |
| 258 { | |
| 259 width: 29px; | |
| 260 height: 22px; | |
| 261 vertical-align: bottom; | |
| 262 display: inline-block; | |
| 263 background-image: url(/images/customize-facebook/arrow-down.png?a=show); | |
| 264 } | |
| 265 | |
| 266 #blocking-list-note | |
| 267 { | |
| 268 width: 100%; | |
| 269 background-image: url(/images/customize-facebook/background-candomore.png?a=sh ow); | |
| 270 margin: 30px 0 0 0; | |
| 271 padding: 14px 0 14px 0; | |
| 272 text-align: center; | |
| 273 white-space: nowrap; | |
| 274 } | |
| 275 | |
| 276 #activate-features-label | |
| 277 { | |
| 278 display: inline-block; | |
| 279 width: 86%; | |
| 280 color: #fff; | |
| 281 font-size: 18px; | |
| 282 text-align: center; | |
| 283 | |
| 284 } | |
| 285 | |
| 286 #share | |
| 287 { | |
| 288 background-image: url(/images/customize-facebook/background-share.png?a=show); | |
| 289 padding: 50px 100px 40px 100px; | |
| 290 max-width: 760px; | |
| 291 text-align: center; | |
| 292 } | |
| 293 | |
| 294 #share h2 | |
| 295 { | |
| 296 color: #fff; | |
| 297 margin: 0 0 30px 0; | |
| 298 } | |
| 299 | |
| 300 #share h2 > a | |
| 301 { | |
| 302 color: #fff; | |
| 303 } | |
| 304 | |
| 305 #share > a | |
| 306 { | |
| 307 width: 96px; | |
| 308 height: 29px; | |
| 309 background-image: url(/images/customize-facebook/sprite.png?a=show); | |
| 310 display: inline-block; | |
| 311 cursor: pointer; | |
| 312 background-position: 0 0; | |
| 313 } | |
| 314 | |
| 315 #share > a:hover | |
| 316 { | |
| 317 background-position: 0 38px; | |
| 318 } | |
| 319 | |
| 320 #share > a:active | |
| 321 { | |
| 322 -moz-box-shadow: 0px 0px 0px 1px #8ca7c4; | |
| 323 -webkit-box-shadow: 0px 0px 0px 1px #8ca7c4; | |
| 324 box-shadow: 0px 0px 0px 1px #8ca7c4; | |
| 325 border-radius: 5px; | |
| 326 } | |
| 327 | |
| 328 #download-layer | |
| 329 { | |
| 330 position: fixed; | |
| 331 top: 0; | |
| 332 right: 0; | |
| 333 bottom: 0; | |
| 334 left: 0; | |
| 335 background: rgba(0, 0, 0, 0.5) url(/images/customize-facebook/ajax-loader.gif? a=show) no-repeat 50% 50%; | |
| 336 z-index: 101; | |
| 337 overflow: auto; | |
| 338 } | |
| 339 | |
| 340 .invisible | |
| 341 { | |
| 342 display: none; | |
| 343 } | |
| 344 | |
| 345 #abp-check | |
| 346 { | |
| 347 display: none; | |
| 348 } | |
| 349 | |
| 350 #download-layer section | |
| 351 { | |
| 352 width: 420px; | |
| 353 border-style: solid none; | |
| 354 border-width: 4px; | |
| 355 border-color: #968d81; | |
| 356 margin: 20px auto 0 auto; | |
| 357 } | |
| 358 | |
| 359 #download-layer-logo | |
| 360 { | |
| 361 height: 100px; | |
| 362 width: 99px; | |
| 363 display: block; | |
| 364 background-image: url(/images/customize-facebook/abp-icon-big.png?a=show); | |
| 365 background-repeat: no-repeat; | |
| 366 margin: 40px auto 0 auto; | |
| 367 } | |
| 368 | |
| 369 #download-layer h3 | |
| 370 { | |
| 371 text-align: center; | |
| 372 } | |
| 373 | |
| 374 #download-layer a | |
| 375 { | |
| 376 width: 306px; | |
| 377 height: 38px; | |
| 378 display: block; | |
| 379 margin: 24px auto 14px auto; | |
| 380 cursor: pointer; | |
| 381 border-radius: 4px; | |
| 382 background-color: #77B06D; | |
| 383 font-family: Arial, Helvetica, sans-serif; | |
| 384 color: #fff; | |
| 385 font-size: 20px; | |
| 386 padding: 18px 0 0 0; | |
| 387 text-align: center; | |
| 388 text-decoration: none; | |
| 389 } | |
| 390 | |
| 391 #download-layer a:hover | |
| 392 { | |
| 393 background-color: #609657; | |
| 394 } | |
| 395 | |
| 396 #download-layer span | |
| 397 { | |
| 398 display: block; | |
| 399 margin: 20px 0 10px 0; | |
| 400 font-family: Arial, Helvetica, sans-serif; | |
| 401 font-size: 14px; | |
| 402 text-align: center; | |
| 403 } | |
| 404 | |
| 405 #download-layer iframe | |
| 406 { | |
| 407 margin: 0 auto; | |
| 408 } | |
| 409 | |
| 410 #footer | |
| 411 { | |
| 412 font-family: Arial, Helvetica, sans-serif; | |
| 413 color: #968d81; | |
| 414 margin: 0 0 30px 0; | |
| 415 text-align: center; | |
| 416 } | |
| 417 | |
| 418 #footer a | |
| 419 { | |
| 420 cursor: pointer; | |
| 421 } | |
| 422 | |
| 423 .tooltip | |
| 424 { | |
| 425 outline: none; | |
| 426 } | |
| 427 | |
| 428 .tooltip strong | |
| 429 { | |
| 430 line-height: 30px; | |
| 431 } | |
| 432 | |
| 433 .tooltip:hover | |
| 434 { | |
| 435 text-decoration: none; | |
| 436 } | |
| 437 | |
| 438 .tooltip span { | |
| 439 z-index: 10; | |
| 440 display: none; | |
| 441 padding: 14px 20px; | |
| 442 margin: 14px 50px 0px -160px; | |
| 443 max-width: 640px; | |
| 444 line-height: 16px; | |
| 445 } | |
| 446 | |
| 447 .tooltip:hover span{ | |
| 448 display:inline; | |
| 449 position:absolute; | |
| 450 background: rgb(0, 0, 0); | |
| 451 /* Fall-back for browsers that don't support rgba */ | |
| 452 background: rgba(0, 0, 0, .9); | |
| 453 } | |
| 454 .callout { | |
| 455 z-index: 20; | |
| 456 position: absolute; | |
| 457 border: none; | |
| 458 top: -9px; | |
| 459 left: 150px; | |
| 460 background-image: url(/images/customize-facebook/sprite.png?a=show); | |
| 461 width: 25px; | |
| 462 height: 9px; | |
| 463 background-position: 0 9px; | |
| 464 } | |
| 465 | |
| 466 /*CSS3 extras*/ | |
| 467 .tooltip span | |
| 468 { | |
| 469 color: #d1d1d1; | |
| 470 opacity: 0.9; | |
| 471 text-align: left; | |
| 472 } | |
| 473 | |
| 474 .tooltip h4 | |
| 475 { | |
| 476 font-family: CreteRound, Helvetica, Arial, sans-serif; | |
| 477 color: #fff; | |
| 478 font-size: 16px; | |
| 479 text-align: left; | |
| 480 margin: 10px 0 5px 0; | |
| 481 font-weight: normal; | |
| 482 } | |
| 483 </style> | |
| 484 <script> | |
| 485 var downloadButtonClicked = false; | |
| 486 | |
| 487 function downloadLayerToggle() | |
| 488 { | |
| 489 document.getElementById("download-layer").classList.toggle("invisible"); | |
| 490 }; | |
| 491 | |
| 492 function hideOverlayAndRefresh() | |
| 493 { | |
| 494 downloadButtonClicked = true; | |
| 495 document.getElementById("download-layer").classList.toggle("invisible"); | |
| 496 }; | |
| 497 | |
| 498 /*check if abp is already installed*/ | |
| 499 window.addEventListener("click", function(ev) | |
| 500 { | |
| 501 if (!(ev.target instanceof HTMLAnchorElement) || !(ev.target.classList.contain s("block-button"))) | |
| 502 return; | |
| 503 if (ev.button == 2) | |
| 504 return; | |
| 505 ev.preventDefault(); | |
| 506 downloadLayerToggle(); | |
| 507 }, false); | |
| 508 | |
| 509 window.addEventListener("DOMContentLoaded", function() | |
| 510 { | |
| 511 document.getElementById("download-button").addEventListener("click", hideOverl ayAndRefresh, false); | |
| 512 var downloadLayer = document.getElementById("download-layer"); | |
| 513 downloadLayer.addEventListener("click", function(ev) { | |
| 514 if (ev.target === downloadLayer) | |
| 515 downloadLayerToggle(); | |
| 516 }, false); | |
| 517 }, false); | |
| 518 | |
| 519 window.addEventListener("focus", function() | |
| 520 { | |
| 521 if (downloadButtonClicked) | |
| 522 { | |
| 523 location.reload(); | |
| 524 downloadButtonClicked = false; | |
| 525 } | |
| 526 }, false); | |
| 527 | |
| 528 </script> | |
| 529 </head> | |
| 530 <notoc></notoc> | |
| 531 | |
| 532 <div class="invisible" id="download-layer"> | |
| 533 <div id="download-layer-logo"></div> | |
| 534 <section> | |
| 535 <h3>$s1$</h3> | |
| 536 <a href="https://adblockplus.org/" id="download-button" target="blank">$s2$< /a> | |
| 537 <span>$s3$</span> | |
| 538 <iframe allowfullscreen="true" frameborder="0" height="239" src="https://www .youtube-nocookie.com/embed/pVYtzF5SemU?html5=1&autohide=1&enablejsapi=1 &controls=2&fs=1&modestbranding=1&rel=0&showinfo=0&theme =light" width="425"></iframe> | |
| 539 </section> | |
| 540 </div> | |
| 541 | |
| 542 <div id="header"> | |
| 543 <div id="logo"></div> | |
| 544 <h1 id="title-main">$s4$ <span>$s5$</span> $s6$</h1> | |
| 545 </div> | |
| 546 | |
| 547 <section id="share"> | |
| 548 <h2 id="share-headline">$s7$</h2> | |
| 549 <a href="http://www.facebook.com/sharer.php?s=100&p[title]=Remove all vide o ads on YouTube with Adblock Plus&p[summary]=I use Adblock Plus to remove a ll annoying 30-second video ads on YouTube. Enjoy YouTube fully ad-free!&p[u rl]=http://facebook.adblockplus.me&p[images][0]=https://fbcdn-sphotos-e-a.ak amaihd.net/hphotos-ak-ash3/923429_523640934343998_2084510332_n.jpg" onclick="win dow.open('http://www.facebook.com/sharer.php?s=100&p[title]=Remove all video ads on YouTube with Adblock Plus&p[summary]=I use Adblock Plus to remove al l annoying 30-second video ads on YouTube. Enjoy YouTube fully ad-free!&p[ur l]=http://facebook.adblockplus.me&p[images][0]=https://fbcdn-sphotos-e-a.aka maihd.net/hphotos-ak-ash3/923429_523640934343998_2084510332_n.jpg','facebook-sha re-dialog','width=626,height=436');return false;" target="_blank"> | |
| 550 </a> | |
| 551 </section> | |
| 552 | |
| 553 <section id="blocking-list"> | |
| 554 <ul> | |
| 555 <li class="feature-first" id="block-all"> | |
| 556 <h2>$s8$ <span>$s9$</span> $s10$</h2> | |
| 557 <span class="tooltip"> | |
| 558 $s11$ | |
| 559 <span> | |
| 560 <div class="callout"></div> | |
| 561 <h4>$s12$</h4> | |
| 562 $s13$ | |
| 563 <h4>$s14$</h4> | |
| 564 $s15$ | |
| 565 </span> | |
| 566 </span> | |
| 567 <div class="unwanted-element-screenshot"></div> | |
| 568 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Fyt_annoyances_full.txt&title=Youtube%3A%20Pure %20Video%20Experience">$s16$</a> | |
| 569 </li> | |
| 570 | |
| 571 <li id="block-comments"> | |
| 572 <h2>$s8$ <span>$s18$</span> $s19$</h2> | |
| 573 <span class="tooltip"> | |
| 574 $s11$ | |
| 575 <span> | |
| 576 <div class="callout"></div> | |
| 577 <h4>$s12$</h4> | |
| 578 $s22$ | |
| 579 </span> | |
| 580 </span> | |
| 581 <div class="unwanted-element-screenshot"></div> | |
| 582 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Fyt_annoyances_comments.txt&title=Youtube%3A%20 Remove%20Comments">$s16$</a> | |
| 583 </li> | |
| 584 | |
| 585 <li id="block-suggestions"> | |
| 586 <h2>$s8$ <span>$s18$</span> $s26$</h2> | |
| 587 <span class="tooltip"> | |
| 588 $s11$ | |
| 589 <span> | |
| 590 <div class="callout"></div> | |
| 591 <h4>$s12$</h4> | |
| 592 $s29$ | |
| 593 <h4>$s14$</h4> | |
| 594 $s31$ | |
| 595 </span> | |
| 596 </span> | |
| 597 <div class="unwanted-element-screenshot"></div> | |
| 598 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Fyt_annoyances_suggestions.txt&title=Youtube%3A %20Remove%20Youtube%20Suggestions">$s16$</a> | |
| 599 </li> | |
| 600 | |
| 601 <li id="block-other"> | |
| 602 <h2>$s8$ <span>$s18$</span> $s35$</h2> | |
| 603 <span class="tooltip"> | |
| 604 $s11$ | |
| 605 <span> | |
| 606 <div class="callout"></div> | |
| 607 <h4>$s12$</h4> | |
| 608 $s38$ | |
| 609 </span> | |
| 610 </span> | |
| 611 <div class="unwanted-element-screenshot"></div> | |
| 612 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Fyt_annoyances_other.txt&title=Youtube%3A%20Oth er%20Annoyances">$s16$</a> | |
| 613 </li> | |
| 614 </ul> | |
| 615 </section> | |
| 616 <div id="footer"> | |
| 617 <div>$s40(https://adblockplus.org/en/faq_basics#remove-subscription)$</div> | |
| 618 <div>$s41$ <a href="https://www.facebook.com/adblockplus" target="_blank">$s42 $</a></div> | |
| 619 </div> | |
| OLD | NEW |
« no previous file with comments
|
« pages/customize-facebook.raw ('k')
|
pages/development-builds.raw » ('j')
|
no next file with comments »
