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

Side by Side Diff: pages/customize-facebook.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.
Jump to:
View unified diff | Download patch
« no previous file with comments | « pages/customizations.raw ('k') | pages/customize-youtube.raw » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <head> 1 <head>
2 <link href="https://adblockplus.org/favicon.ico" rel="shortcut icon">
2 <meta content="Vmd_7o1-HUK_EzTSzR7pvGE5wAXBzNtsGnTaZFHG2NA" name="google-site-ve rification"> 3 <meta content="Vmd_7o1-HUK_EzTSzR7pvGE5wAXBzNtsGnTaZFHG2NA" name="google-site-ve rification">
3 4
4 <style type="text/css"> 5 <style type="text/css">
5 @font-face { 6 @font-face {
6 /* Copyright (c) 2013, TYPE TOGETHER 7 /* Copyright (c) 2013, TYPE TOGETHER
7 * (http://www.type-together.com/Crete), 8 * (http://www.type-together.com/Crete),
8 * with Reserved Font Name &quot;Crete Rounded&quot; 9 * with Reserved Font Name "Crete Rounded"
9 * Licensed under SIL Open Font License, 1.1 10 * Licensed under SIL Open Font License, 1.1
10 * (http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web) 11 * (http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web)
11 */ 12 */
12 font-family: 'CreteRound'; 13 font-family: 'CreteRound';
13 font-style: normal; 14 font-style: normal;
14 src: url(/fonts/CreteRoundRegular.otf); 15 src: url(/fonts/CreteRoundRegular.otf);
15 src: local ('Ø'), 16 src: local ('Ø'),
16 /*local ('Ø') forces using no local font called CreteRound*/ 17 /*local ('Ø') forces using no local font called CreteRound*/
17 url(/fonts/CreteRoundRegular.otf) format('otf'); 18 url(/fonts/CreteRoundRegular.otf) format('otf');
18 } 19 }
19 20
20 * 21 *
21 { 22 {
22 margin: 0; 23 margin: 0;
23 padding: 0; 24 padding: 0;
24 } 25 }
25 26
26 body 27 body
27 { 28 {
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
67 { 68 {
68 font-size: 22px; 69 font-size: 22px;
69 font-weight: normal; 70 font-weight: normal;
70 margin: 0 auto; 71 margin: 0 auto;
71 color: #7b7367; 72 color: #7b7367;
72 text-align: center; 73 text-align: center;
73 margin: 21px auto; 74 margin: 21px auto;
74 padding: 16px 0 14px 0; 75 padding: 16px 0 14px 0;
75 border: 1px #968d81; 76 border: 1px #968d81;
76 border-style: dashed none; 77 border-style: dashed none;
77 /* border parallel fix - 957px is the value 78 /* border parallel fix - 957px is the value
78 * closest to 960px(page width) which makes 79 * closest to 960px(page width) which makes
79 * the dashed border parallel 80 * the dashed border parallel
80 */ 81 */
81 max-width: 957px; 82 max-width: 957px;
82 } 83 }
83 84
84 header span 85 header span
85 { 86 {
86 color: #5a84b3; 87 color: #5a84b3;
87 } 88 }
88 89
89 strong 90 strong
90 { 91 {
91 font-weight: 600; 92 font-weight: 600;
92 } 93 }
93 94
94 h2 95 h2
95 { 96 {
96 font-size: 23px; 97 font-size: 23px;
97 font-weight: lighter; 98 font-weight: lighter;
98 color: #968d81; 99 color: #968d81;
99 line-height: 26px; 100 line-height: 26px;
100 text-align: center; 101 text-align: center;
101 } 102 }
102 103
103 h3 104 h3
104 { 105 {
105 font-size: 22px; 106 font-size: 22px;
106 color: #7F776B; 107 color: #7F776B;
107 font-weight: normal; 108 font-weight: normal;
108 margin: 0 0 10px 0; 109 margin: 0 0 10px 0;
109 line-height: 24px; 110 line-height: 24px;
110 } 111 }
111 112
112 section 113 section
113 { 114 {
114 margin: 0 auto; 115 margin: 0 auto;
115 margin-bottom: 30px; 116 margin-bottom: 30px;
116 max-width: 760px; 117 max-width: 760px;
117 background-image: url(/images/customize-facebook/background.png?a=show); 118 background-image: url(/images/customize-facebook/background.png?a=show);
118 padding: 40px 100px; 119 padding: 40px 100px;
119 } 120 }
120 121
121 section &gt; p 122 section > p
122 { 123 {
123 margin: 15px 0 0 0; 124 margin: 15px 0 0 0;
124 } 125 }
125 126
126 127
127 #logo 128 #logo
128 { 129 {
129 margin: 0 auto; 130 margin: 0 auto;
130 height: 100px; 131 height: 100px;
131 width: 99px; 132 width: 99px;
132 display: block; 133 display: block;
133 background-image: url(/images/customize-facebook/abp-icon-big.png?a=show); 134 background-image: url(/images/customize-facebook/abp-icon-big.png?a=show);
134 background-repeat: no-repeat; 135 background-repeat: no-repeat;
135 } 136 }
136 137
137 #blocking-list 138 #blocking-list
138 { 139 {
139 max-width: 960px; 140 max-width: 960px;
140 padding: 40px 0px 40px 0px; 141 padding: 40px 0px 40px 0px;
141 border-style: solid none; 142 border-style: solid none;
142 border-width: 4px; 143 border-width: 4px;
143 border-color: #968d81; 144 border-color: #968d81;
144 } 145 }
145 146
146 #blocking-list &gt; h2 147 #blocking-list > h2
147 { 148 {
148 margin: 0 100px; 149 margin: 0 100px;
149 } 150 }
150 151
151 #blocking-list &gt; ul 152 #blocking-list > ul
152 { 153 {
153 min-height: 140px; 154 min-height: 140px;
154 margin: 0 80px 0 80px; 155 margin: 0 80px 0 80px;
155 font-size: 0px; 156 font-size: 0px;
156 /* hides appearing spacings because of 157 /* hides appearing spacings because of
157 * using display: inline-block*/ 158 * using display: inline-block*/
158 } 159 }
159 160
160 #blocking-list &gt; ul &gt; li 161 #blocking-list > ul > li
161 { 162 {
162 width: 244px; 163 width: 244px;
163 display: inline-block; 164 display: inline-block;
164 border-right: 1px dashed #c7c6c2; 165 border-right: 1px dashed #c7c6c2;
165 padding: 20px 10px 0 10px; 166 padding: 20px 10px 0 10px;
166 vertical-align: top; 167 vertical-align: top;
167 text-align: center; 168 text-align: center;
168 } 169 }
169 170
170 #blocking-list &gt; ul &gt; li &gt; h2 171 #blocking-list > ul > li > h2
171 { 172 {
172 margin: 0 0 20px 0; 173 margin: 0 0 20px 0;
173 line-height: 26px; 174 line-height: 26px;
174 color: #7f776b; 175 color: #7f776b;
175 } 176 }
176 177
177 #blocking-list &gt; ul &gt; li &gt; h2 &gt; span 178 #blocking-list > ul > li > h2 > span
178 { 179 {
179 text-decoration: underline; 180 text-decoration: underline;
180 } 181 }
181 182
182 #blocking-list .tooltip 183 #blocking-list .tooltip
183 { 184 {
184 display: inline-block; 185 display: inline-block;
185 text-decoration: none; 186 text-decoration: none;
186 font-family: Arial, Helvetica, sans-serif; 187 font-family: Arial, Helvetica, sans-serif;
187 font-size: 12px; 188 font-size: 12px;
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
264 white-space: nowrap; 265 white-space: nowrap;
265 } 266 }
266 267
267 #activate-features-label 268 #activate-features-label
268 { 269 {
269 display: inline-block; 270 display: inline-block;
270 width: 86%; 271 width: 86%;
271 color: #fff; 272 color: #fff;
272 font-size: 18px; 273 font-size: 18px;
273 text-align: center; 274 text-align: center;
274 275
275 } 276 }
276 277
277 #share 278 #share
278 { 279 {
279 background-image: url(/images/customize-facebook/background-share.png?a=show); 280 background-image: url(/images/customize-facebook/background-share.png?a=show);
280 padding: 50px 100px 40px 100px; 281 padding: 50px 100px 40px 100px;
281 max-width: 760px; 282 max-width: 760px;
282 text-align: center; 283 text-align: center;
283 } 284 }
284 285
285 #share h2 286 #share h2
286 { 287 {
287 color: #fff; 288 color: #fff;
288 margin: 0 0 30px 0; 289 margin: 0 0 30px 0;
289 } 290 }
290 291
291 #share h2 &gt; a 292 #share h2 > a
292 { 293 {
293 color: #fff; 294 color: #fff;
294 } 295 }
295 296
296 #share &gt; a 297 #share > a
297 { 298 {
298 width: 96px; 299 width: 96px;
299 height: 29px; 300 height: 29px;
300 background-image: url(/images/customize-facebook/sprite.png?a=show); 301 background-image: url(/images/customize-facebook/sprite.png?a=show);
301 display: inline-block; 302 display: inline-block;
302 cursor: pointer; 303 cursor: pointer;
303 background-position: 0 0; 304 background-position: 0 0;
304 } 305 }
305 306
306 #share &gt; a:hover 307 #share > a:hover
307 { 308 {
308 background-position: 0 38px; 309 background-position: 0 38px;
309 } 310 }
310 311
311 #share &gt; a:active 312 #share > a:active
312 { 313 {
313 -moz-box-shadow: 0px 0px 0px 1px #8ca7c4; 314 -moz-box-shadow: 0px 0px 0px 1px #8ca7c4;
314 -webkit-box-shadow: 0px 0px 0px 1px #8ca7c4; 315 -webkit-box-shadow: 0px 0px 0px 1px #8ca7c4;
315 box-shadow: 0px 0px 0px 1px #8ca7c4; 316 box-shadow: 0px 0px 0px 1px #8ca7c4;
316 border-radius: 5px; 317 border-radius: 5px;
317 } 318 }
318 319
319 #download-layer 320 #download-layer
320 { 321 {
321 position: fixed; 322 position: fixed;
(...skipping 25 matching lines...) Expand all
347 margin: 20px auto 0 auto; 348 margin: 20px auto 0 auto;
348 } 349 }
349 350
350 #download-layer-logo 351 #download-layer-logo
351 { 352 {
352 height: 100px; 353 height: 100px;
353 width: 99px; 354 width: 99px;
354 display: block; 355 display: block;
355 background-image: url(/images/customize-facebook/abp-icon-big.png?a=show); 356 background-image: url(/images/customize-facebook/abp-icon-big.png?a=show);
356 background-repeat: no-repeat; 357 background-repeat: no-repeat;
357 margin: 40px auto 0 auto; 358 margin: 40px auto 0 auto;
358 } 359 }
359 360
360 #download-layer h3 361 #download-layer h3
361 { 362 {
362 text-align: center; 363 text-align: center;
363 } 364 }
364 365
365 #download-layer a 366 #download-layer a
366 { 367 {
367 width: 306px; 368 width: 306px;
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
421 line-height: 30px; 422 line-height: 30px;
422 } 423 }
423 424
424 .tooltip:hover 425 .tooltip:hover
425 { 426 {
426 text-decoration: none; 427 text-decoration: none;
427 } 428 }
428 429
429 .tooltip span { 430 .tooltip span {
430 z-index: 10; 431 z-index: 10;
431 display: none; 432 display: none;
432 padding: 14px 20px; 433 padding: 14px 20px;
433 margin: 24px 50px 0px -160px; 434 margin: 24px 50px 0px -160px;
434 max-width: 640px; 435 max-width: 640px;
435 line-height: 16px; 436 line-height: 16px;
436 } 437 }
437 438
438 .tooltip:hover span{ 439 .tooltip:hover span{
439 display:inline; 440 display:inline;
440 position:absolute; 441 position:absolute;
441 background: rgb(0, 0, 0); 442 background: rgb(0, 0, 0);
442 /* Fall-back for browsers that don't support rgba */ 443 /* Fall-back for browsers that don't support rgba */
443 background: rgba(0, 0, 0, .9); 444 background: rgba(0, 0, 0, .9);
444 } 445 }
445 .callout { 446 .callout {
446 z-index: 20; 447 z-index: 20;
447 position: absolute; 448 position: absolute;
448 border: none; 449 border: none;
449 top: -9px; 450 top: -9px;
450 left: 75px; 451 left: 75px;
451 background-image: url(/images/customize-facebook/sprite.png?a=show); 452 background-image: url(/images/customize-facebook/sprite.png?a=show);
452 width: 25px; 453 width: 25px;
453 height: 9px; 454 height: 9px;
454 background-position: 0 9px; 455 background-position: 0 9px;
455 } 456 }
456 457
457 /*CSS3 extras*/ 458 /*CSS3 extras*/
458 .tooltip span 459 .tooltip span
459 { 460 {
460 color: #d1d1d1; 461 color: #d1d1d1;
461 opacity: 0.9; 462 opacity: 0.9;
462 text-align: left; 463 text-align: left;
463 } 464 }
464 465
465 .tooltip h4 466 .tooltip h4
466 { 467 {
467 font-family: CreteRound, Helvetica, Arial, sans-serif; 468 font-family: CreteRound, Helvetica, Arial, sans-serif;
468 color: #fff; 469 color: #fff;
469 font-size: 16px; 470 font-size: 16px;
470 text-align: left; 471 text-align: left;
471 margin: 10px 0 5px 0; 472 margin: 10px 0 5px 0;
472 font-weight: normal; 473 font-weight: normal;
473 } 474 }
474 </style> 475 </style>
475 <script> 476 <script>
476 var downloadButtonClicked = false; 477 var downloadButtonClicked = false;
477 478
478 function downloadLayerToggle() 479 function downloadLayerToggle()
479 { 480 {
480 document.getElementById(&quot;download-layer&quot;).classList.toggle(&quot;inv isible&quot;); 481 document.getElementById("download-layer").classList.toggle("invisible");
481 }; 482 };
482 483
483 function hideOverlayAndRefresh() 484 function hideOverlayAndRefresh()
484 { 485 {
485 downloadButtonClicked = true; 486 downloadButtonClicked = true;
486 document.getElementById(&quot;download-layer&quot;).classList.toggle(&quot;inv isible&quot;); 487 document.getElementById("download-layer").classList.toggle("invisible");
487 }; 488 };
488 489
489 /*check if abp is already installed*/ 490 /*check if abp is already installed*/
490 window.addEventListener(&quot;click&quot;, function(ev) 491 window.addEventListener("click", function(ev)
491 { 492 {
492 if (!(ev.target instanceof HTMLAnchorElement) || !(ev.target.classList.contain s(&quot;block-button&quot;))) 493 if (!(ev.target instanceof HTMLAnchorElement) || !(ev.target.classList.contain s("block-button")))
493 return; 494 return;
494 if (ev.button == 2) 495 if (ev.button == 2)
495 return; 496 return;
496 ev.preventDefault(); 497 ev.preventDefault();
497 downloadLayerToggle(); 498 downloadLayerToggle();
498 }, false); 499 }, false);
499 500
500 window.addEventListener(&quot;DOMContentLoaded&quot;, function() 501 window.addEventListener("DOMContentLoaded", function()
501 { 502 {
502 document.getElementById(&quot;download-button&quot;).addEventListener(&quot;cl ick&quot;, hideOverlayAndRefresh, false); 503 document.getElementById("download-button").addEventListener("click", hideOverl ayAndRefresh, false);
503 }, false); 504 }, false);
504 505
505 window.addEventListener(&quot;focus&quot;, function() 506 window.addEventListener("focus", function()
506 { 507 {
507 if (downloadButtonClicked) 508 if (downloadButtonClicked)
508 { 509 {
509 location.reload(); 510 location.reload();
510 downloadButtonClicked = false; 511 downloadButtonClicked = false;
511 } 512 }
512 }, false); 513 }, false);
513 514
514 </script> 515 </script>
515 </head> 516 </head>
516 <notoc></notoc> 517 <notoc></notoc>
517 518
518 <div class="invisible" id="download-layer"> 519 <div class="invisible" id="download-layer">
519 <div id="download-layer-logo"></div> 520 <div id="download-layer-logo"></div>
520 <section> 521 <section>
521 <h3>$s1$</h3> 522 <h3>$s1$</h3>
522 <a href="https://adblockplus.org/" id="download-button" target="blank">$s2$< /a> 523 <a href="https://adblockplus.org/" id="download-button" target="blank">$s2$< /a>
523 <span>$s3$</span> 524 <span>$s3$</span>
524 <iframe allowfullscreen="true" frameborder="0" height="239" src="https://www .youtube-nocookie.com/embed/pVYtzF5SemU?html5=1&amp;autohide=1&amp;enablejsapi=1 &amp;controls=2&amp;fs=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme =light" width="425"></iframe> 525 <iframe allowfullscreen="true" frameborder="0" height="239" src="https://www .youtube-nocookie.com/embed/pVYtzF5SemU?html5=1&amp;autohide=1&amp;enablejsapi=1 &amp;controls=2&amp;fs=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme =light" width="425"></iframe>
525 526
526 </section> 527 </section>
527 </div> 528 </div>
528 529
529 <header> 530 <header>
530 <div id="logo"></div> 531 <div id="logo"></div>
531 <h1 id="title-main">$s4$ <span>$s5$</span> $s6$</h1> 532 <h1 id="title-main">$s4$ <span>$s5$</span> $s6$</h1>
532 </header> 533 </header>
533 534
534 <section id="share"> 535 <section id="share">
535 <h2 id="share-headline">$s7$</h2> 536 <h2 id="share-headline">$s7$</h2>
536 <a href="#" onclick="window.open( 'http://www.facebook.com/sharer.php?s= 100&amp;p[title]=Remove Ads on Facebook with Adblock Plus&amp;p[summary]=I use A dblock Plus to block all Facebook ads and other annoyances. Enjoy Facebook fully ad-free:&amp;p[url]=http://facebook.adblockplus.me&amp;p[images][0]=https://fbc dn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/923429_523640934343998_2084510332_n. jpg', 'facebook-share-dialog', 'width=626,height=436'); retu rn false;"> 537 <a href="#" onclick="window.open( 'http://www.facebook.com/sharer.php?s= 100&amp;p[title]=Remove Ads on Facebook with Adblock Plus&amp;p[summary]=I use A dblock Plus to block all Facebook ads and other annoyances. Enjoy Facebook fully ad-free:&amp;p[url]=http://facebook.adblockplus.me&amp;p[images][0]=https://fbc dn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/923429_523640934343998_2084510332_n. jpg', 'facebook-share-dialog', 'width=626,height=436'); retu rn false;">
537 </a> 538 </a>
538 </section> 539 </section>
539 540
540 <section id="blocking-list"> 541 <section id="blocking-list">
541 <ul> 542 <ul>
542 <li class="feature-first" id="game-requests"> 543 <li class="feature-first" id="game-requests">
543 <h2>$s8$ <span>$s9$</span> $s10$ 544 <h2>$s8$ <span>$s9$</span> $s10$
544 <br> 545 <br>
545 <span class="tooltip"> 546 <span class="tooltip">
546 $s11$ 547 $s11$
547 <span> 548 <span>
548 <div class="callout"></div> 549 <div class="callout"></div>
549 <h4>$s12$</h4> 550 <h4>$s12$</h4>
550 $s13$ 551 $s13$
551 <h4>$s14$</h4> 552 <h4>$s14$</h4>
552 $s15$ 553 $s15$
553 <h4>$s16$</h4> 554 <h4>$s16$</h4>
554 $s17$<br> 555 $s17$<br>
555 $s18$<br> 556 $s18$<br>
556 $s19$<br> 557 $s19$<br>
557 </span> 558 </span>
558 </span> 559 </span>
559 </h2> 560 </h2>
560 <div class="unwanted-element-screenshot"></div> 561 <div class="unwanted-element-screenshot"></div>
561 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Ffb_annoyances_full.txt&amp;title=facebook%20annoya nces%20blocker">$s20$</a> 562 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Ffb_annoyances_full.txt&amp;title=facebook%20annoya nces%20blocker">$s20$</a>
562 </li> 563 </li>
563 <li id="recommended-pages"> 564 <li id="recommended-pages">
564 <h2>$s21$ <span>$s22$</span> $s23$ 565 <h2>$s8$ <span>$s22$</span> $s23$
565 <br> 566 <br>
566 <span class="tooltip"> 567 <span class="tooltip">
567 $s24$ 568 $s11$
568 <span> 569 <span>
569 <div class="callout"></div> 570 <div class="callout"></div>
570 <h4>$s25$</h4> 571 <h4>$s12$</h4>
571 $s26$ 572 $s13$
572 </span> 573 </span>
573 </span> 574 </span>
574 </h2> 575 </h2>
575 <div class="unwanted-element-screenshot"></div> 576 <div class="unwanted-element-screenshot"></div>
576 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Ffb_annoyances_sidebar.txt&amp;title=facebook%20sid ebar%20blocker">$s27$</a> 577 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Ffb_annoyances_sidebar.txt&amp;title=facebook%20sid ebar%20blocker">$s20$</a>
577 </li> 578 </li>
578 <li id="people-you-may-know"> 579 <li id="people-you-may-know">
579 <h2>$s28$ <span>$s29$</span> $s30$ 580 <h2>$s8$ <span>$s22$</span> $s30$
580 <br> 581 <br>
581 <span class="tooltip"> 582 <span class="tooltip">
582 $s31$ 583 $s11$
583 <span> 584 <span>
584 <div class="callout"></div> 585 <div class="callout"></div>
585 <h4>$s32$</h4> 586 <h4>$s32$</h4>
586 $s33$ 587 $s33$
587 </span> 588 </span>
588 </span> 589 </span>
589 </h2> 590 </h2>
590 <div class="unwanted-element-screenshot"></div> 591 <div class="unwanted-element-screenshot"></div>
591 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Ffb_annoyances_newsfeed.txt&amp;title=facebook%20ne ws%20feed%20annoyances%20blocker">$s34$</a> 592 <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylis t-downloads.adblockplus.org%2Ffb_annoyances_newsfeed.txt&amp;title=facebook%20ne ws%20feed%20annoyances%20blocker">$s20$</a>
592 </li> 593 </li>
593 </ul> 594 </ul>
594 </section> 595 </section>
595 <footer>$s35$ <a href="https://www.facebook.com/photo.php?fbid=607813585926732&a mp;set=p.607813585926732" target="_blank">$s36$</a></footer> 596 <footer>$s35$ <a href="https://www.facebook.com/photo.php?fbid=607813585926732&a mp;set=p.607813585926732" target="_blank">$s36$</a></footer>
OLDNEW
« no previous file with comments | « pages/customizations.raw ('k') | pages/customize-youtube.raw » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld