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

Unified 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.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « pages/customize-facebook.raw ('k') | pages/development-builds.raw » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pages/customize-youtube.raw
===================================================================
new file mode 100644
--- /dev/null
+++ b/pages/customize-youtube.raw
@@ -0,0 +1,619 @@
+<head>
+<link href="https://adblockplus.org/favicon.ico" rel="shortcut icon">
+<meta content="Vmd_7o1-HUK_EzTSzR7pvGE5wAXBzNtsGnTaZFHG2NA" name="google-site-verification">
+
+<style type="text/css">
+@font-face {
+ /* Copyright (c) 2013, TYPE TOGETHER
+ * (http://www.type-together.com/Crete),
+ * with Reserved Font Name "Crete Rounded"
+ * Licensed under SIL Open Font License, 1.1
+ * (http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web)
+ */
+ font-family: 'CreteRound';
+ font-style: normal;
+ src: url(/fonts/CreteRoundRegular.otf);
+ src: local ('Ø'),
+ /*local ('Ø') forces using no local font called CreteRound*/
+ url(/fonts/CreteRoundRegular.otf) format('otf');
+}
+
+*
+{
+ margin: 0;
+ padding: 0;
+}
+
+body
+{
+ font-family: CreteRound, Trebuchet MS, Helvetica, Arial, sans-serif;
+ font-size: 15px;
+ line-height: 140%;
+ color: #7f776b;
+ background-color: #f8f6f2;
+ background-image: url(/images/customize-facebook/background-main.png?a=show);
+}
+
+a, .tooltip
+{
+ color: #5a84b3;
+ text-decoration: underline;
+}
+
+a:hover
+{
+ text-decoration: none;
+}
+
+button
+{
+ cursor: pointer;
+}
+
+li
+{
+ list-style-type: none;
+}
+
+#header
+{
+ height: 200px;
+ background-image: url(/images/customize-facebook/background.png?a=show);
+ background-repeat: repeat-x;
+ width: 100%;
+ padding: 40px 0 0 0;
+}
+
+#header h1
+{
+ font-size: 22px;
+ font-weight: normal;
+ margin: 0 auto;
+ color: #7b7367;
+ text-align: center;
+ margin: 21px auto;
+ padding: 16px 0 14px 0;
+ border: 1px #968d81;
+ border-style: dashed none;
+ /* border parallel fix - 957px is the value
+ * closest to 960px(page width) which makes
+ * the dashed border parallel
+ */
+ max-width: 957px;
+}
+
+#header span
+{
+ color: #c8312b;
+}
+
+strong
+{
+ font-weight: 600;
+}
+
+h2
+{
+ font-size: 23px;
+ font-weight: lighter;
+ color: #968d81;
+ line-height: 26px;
+ text-align: center;
+}
+
+h3
+{
+ font-size: 22px;
+ color: #7F776B;
+ font-weight: normal;
+ margin: 0 0 10px 0;
+ line-height: 24px;
+}
+
+section
+{
+ margin: 0 auto;
+ margin-bottom: 30px;
+ max-width: 760px;
+ background-image: url(/images/customize-facebook/background.png?a=show);
+ padding: 40px 100px;
+}
+
+section > p
+{
+ margin: 15px 0 0 0;
+}
+
+
+#logo
+{
+ margin: 0 auto;
+ height: 100px;
+ width: 99px;
+ display: block;
+ background-image: url(/images/customize-facebook/abp-icon-big.png?a=show);
+ background-repeat: no-repeat;
+}
+
+#blocking-list
+{
+ max-width: 960px;
+ padding: 40px 0px 40px 0px;
+ border-style: solid none;
+ border-width: 4px;
+ border-color: #968d81;
+}
+
+#blocking-list h2
+{
+ margin: 0 100px;
+ padding: 0px 10px;
+ font-size: 19px;
+}
+
+#blocking-list > ul
+{
+ min-height: 140px;
+ margin: 0 80px 0 80px;
+ font-size: 0px;
+ /* hides appearing spacings because of
+ * using display: inline-block*/
+}
+
+#blocking-list > ul > li
+{
+ width: 175px;
+ display: inline-block;
+ border-right: 1px dashed #c7c6c2;
+ padding: 20px 10px 0 10px;
+ vertical-align: top;
+ text-align: center;
+}
+
+#blocking-list > ul > li > h2
+{
+ margin: 0px 0px 8px 0px;
+ line-height: 26px;
+ color: #7f776b;
+}
+
+#blocking-list > ul > li > h2 > span
+{
+ text-decoration: underline;
+}
+
+#blocking-list .tooltip
+{
+ display: inline-block;
+ margin-bottom: 20px;
+ text-decoration: none;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ border-bottom: 1px dotted #5a84b2;
+ line-height: 14px;
+}
+
+#blocking-list .tooltip:hover
+{
+ border-color: transparent;
+ cursor: pointer;
+}
+
+.block-button
+{
+ min-width: 85px;
+ height: 22px;
+ display: inline-block;
+ margin: 20px auto 14px auto;
+ cursor: pointer;
+ border-radius: 4px;
+ border-color: #53;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #fff;
+ font-size: 14px;
+ padding: 2px 24px 0 24px;
+ text-align: center;
+ text-decoration: none;
+ background-color: #77b06d;
+}
+
+.block-button:hover
+{
+ background-color: #609657;
+}
+
+#blocking-list .feature-first
+{
+ border-left: 1px dashed #c7c6c2;
+}
+
+.unwanted-element-screenshot
+{
+ width: 133px;
+ height: 89px;
+ margin: 0 auto;
+}
+
+#block-all .unwanted-element-screenshot
+{
+ background-image: url(/images/customize-youtube/screenshot-full.png?a=show);
+}
+
+#block-comments .unwanted-element-screenshot
+{
+ background-image: url(/images/customize-youtube/screenshot-comments.png?a=show);
+}
+
+#block-suggestions .unwanted-element-screenshot
+{
+ background-image: url(/images/customize-youtube/screenshot-suggestions.png?a=show);
+}
+
+#block-other .unwanted-element-screenshot
+{
+ background-image: url(/images/customize-youtube/screenshot-other.png?a=show);
+}
+
+.arrow
+{
+ width: 29px;
+ height: 22px;
+ vertical-align: bottom;
+ display: inline-block;
+ background-image: url(/images/customize-facebook/arrow-down.png?a=show);
+}
+
+#blocking-list-note
+{
+ width: 100%;
+ background-image: url(/images/customize-facebook/background-candomore.png?a=show);
+ margin: 30px 0 0 0;
+ padding: 14px 0 14px 0;
+ text-align: center;
+ white-space: nowrap;
+}
+
+#activate-features-label
+{
+ display: inline-block;
+ width: 86%;
+ color: #fff;
+ font-size: 18px;
+ text-align: center;
+
+}
+
+#share
+{
+ background-image: url(/images/customize-facebook/background-share.png?a=show);
+ padding: 50px 100px 40px 100px;
+ max-width: 760px;
+ text-align: center;
+}
+
+#share h2
+{
+ color: #fff;
+ margin: 0 0 30px 0;
+}
+
+#share h2 > a
+{
+ color: #fff;
+}
+
+#share > a
+{
+ width: 96px;
+ height: 29px;
+ background-image: url(/images/customize-facebook/sprite.png?a=show);
+ display: inline-block;
+ cursor: pointer;
+ background-position: 0 0;
+}
+
+#share > a:hover
+{
+ background-position: 0 38px;
+}
+
+#share > a:active
+{
+ -moz-box-shadow: 0px 0px 0px 1px #8ca7c4;
+ -webkit-box-shadow: 0px 0px 0px 1px #8ca7c4;
+ box-shadow: 0px 0px 0px 1px #8ca7c4;
+ border-radius: 5px;
+}
+
+#download-layer
+{
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.5) url(/images/customize-facebook/ajax-loader.gif?a=show) no-repeat 50% 50%;
+ z-index: 101;
+ overflow: auto;
+}
+
+.invisible
+{
+ display: none;
+}
+
+#abp-check
+{
+ display: none;
+}
+
+#download-layer section
+{
+ width: 420px;
+ border-style: solid none;
+ border-width: 4px;
+ border-color: #968d81;
+ margin: 20px auto 0 auto;
+}
+
+#download-layer-logo
+{
+ height: 100px;
+ width: 99px;
+ display: block;
+ background-image: url(/images/customize-facebook/abp-icon-big.png?a=show);
+ background-repeat: no-repeat;
+ margin: 40px auto 0 auto;
+}
+
+#download-layer h3
+{
+ text-align: center;
+}
+
+#download-layer a
+{
+ width: 306px;
+ height: 38px;
+ display: block;
+ margin: 24px auto 14px auto;
+ cursor: pointer;
+ border-radius: 4px;
+ background-color: #77B06D;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #fff;
+ font-size: 20px;
+ padding: 18px 0 0 0;
+ text-align: center;
+ text-decoration: none;
+}
+
+#download-layer a:hover
+{
+ background-color: #609657;
+}
+
+#download-layer span
+{
+ display: block;
+ margin: 20px 0 10px 0;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ text-align: center;
+}
+
+#download-layer iframe
+{
+ margin: 0 auto;
+}
+
+#footer
+{
+ font-family: Arial, Helvetica, sans-serif;
+ color: #968d81;
+ margin: 0 0 30px 0;
+ text-align: center;
+}
+
+#footer a
+{
+ cursor: pointer;
+}
+
+.tooltip
+{
+ outline: none;
+}
+
+.tooltip strong
+{
+ line-height: 30px;
+}
+
+.tooltip:hover
+{
+ text-decoration: none;
+}
+
+.tooltip span {
+ z-index: 10;
+ display: none;
+ padding: 14px 20px;
+ margin: 14px 50px 0px -160px;
+ max-width: 640px;
+ line-height: 16px;
+}
+
+.tooltip:hover span{
+ display:inline;
+ position:absolute;
+ background: rgb(0, 0, 0);
+ /* Fall-back for browsers that don't support rgba */
+ background: rgba(0, 0, 0, .9);
+}
+.callout {
+ z-index: 20;
+ position: absolute;
+ border: none;
+ top: -9px;
+ left: 150px;
+ background-image: url(/images/customize-facebook/sprite.png?a=show);
+ width: 25px;
+ height: 9px;
+ background-position: 0 9px;
+}
+
+/*CSS3 extras*/
+.tooltip span
+{
+ color: #d1d1d1;
+ opacity: 0.9;
+ text-align: left;
+}
+
+.tooltip h4
+{
+ font-family: CreteRound, Helvetica, Arial, sans-serif;
+ color: #fff;
+ font-size: 16px;
+ text-align: left;
+ margin: 10px 0 5px 0;
+ font-weight: normal;
+}
+</style>
+<script>
+var downloadButtonClicked = false;
+
+function downloadLayerToggle()
+{
+ document.getElementById("download-layer").classList.toggle("invisible");
+};
+
+function hideOverlayAndRefresh()
+{
+ downloadButtonClicked = true;
+ document.getElementById("download-layer").classList.toggle("invisible");
+};
+
+/*check if abp is already installed*/
+window.addEventListener("click", function(ev)
+{
+ if (!(ev.target instanceof HTMLAnchorElement) || !(ev.target.classList.contains("block-button")))
+ return;
+ if (ev.button == 2)
+ return;
+ ev.preventDefault();
+ downloadLayerToggle();
+}, false);
+
+window.addEventListener("DOMContentLoaded", function()
+{
+ document.getElementById("download-button").addEventListener("click", hideOverlayAndRefresh, false);
+ var downloadLayer = document.getElementById("download-layer");
+ downloadLayer.addEventListener("click", function(ev) {
+ if (ev.target === downloadLayer)
+ downloadLayerToggle();
+ }, false);
+}, false);
+
+window.addEventListener("focus", function()
+{
+ if (downloadButtonClicked)
+ {
+ location.reload();
+ downloadButtonClicked = false;
+ }
+}, false);
+
+</script>
+</head>
+<notoc></notoc>
+
+<div class="invisible" id="download-layer">
+ <div id="download-layer-logo"></div>
+ <section>
+ <h3>$s1$</h3>
+ <a href="https://adblockplus.org/" id="download-button" target="blank">$s2$</a>
+ <span>$s3$</span>
+ <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>
+ </section>
+</div>
+
+<div id="header">
+ <div id="logo"></div>
+ <h1 id="title-main">$s4$ <span>$s5$</span> $s6$</h1>
+</div>
+
+<section id="share">
+ <h2 id="share-headline">$s7$</h2>
+ <a href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=Remove all video ads on YouTube with Adblock Plus&amp;p[summary]=I use Adblock Plus to remove all annoying 30-second video ads on YouTube. Enjoy YouTube fully ad-free!&amp;p[url]=http://facebook.adblockplus.me&amp;p[images][0]=https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/923429_523640934343998_2084510332_n.jpg" onclick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=Remove all video ads on YouTube with Adblock Plus&amp;p[summary]=I use Adblock Plus to remove all annoying 30-second video ads on YouTube. Enjoy YouTube fully ad-free!&amp;p[url]=http://facebook.adblockplus.me&amp;p[images][0]=https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/923429_523640934343998_2084510332_n.jpg','facebook-share-dialog','width=626,height=436');return false;" target="_blank">
+ </a>
+</section>
+
+<section id="blocking-list">
+ <ul>
+ <li class="feature-first" id="block-all">
+ <h2>$s8$ <span>$s9$</span> $s10$</h2>
+ <span class="tooltip">
+ $s11$
+ <span>
+ <div class="callout"></div>
+ <h4>$s12$</h4>
+ $s13$
+ <h4>$s14$</h4>
+ $s15$
+ </span>
+ </span>
+ <div class="unwanted-element-screenshot"></div>
+ <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylist-downloads.adblockplus.org%2Fyt_annoyances_full.txt&amp;title=Youtube%3A%20Pure%20Video%20Experience">$s16$</a>
+ </li>
+
+ <li id="block-comments">
+ <h2>$s8$ <span>$s18$</span> $s19$</h2>
+ <span class="tooltip">
+ $s11$
+ <span>
+ <div class="callout"></div>
+ <h4>$s12$</h4>
+ $s22$
+ </span>
+ </span>
+ <div class="unwanted-element-screenshot"></div>
+ <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylist-downloads.adblockplus.org%2Fyt_annoyances_comments.txt&amp;title=Youtube%3A%20Remove%20Comments">$s16$</a>
+ </li>
+
+ <li id="block-suggestions">
+ <h2>$s8$ <span>$s18$</span> $s26$</h2>
+ <span class="tooltip">
+ $s11$
+ <span>
+ <div class="callout"></div>
+ <h4>$s12$</h4>
+ $s29$
+ <h4>$s14$</h4>
+ $s31$
+ </span>
+ </span>
+ <div class="unwanted-element-screenshot"></div>
+ <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylist-downloads.adblockplus.org%2Fyt_annoyances_suggestions.txt&amp;title=Youtube%3A%20Remove%20Youtube%20Suggestions">$s16$</a>
+ </li>
+
+ <li id="block-other">
+ <h2>$s8$ <span>$s18$</span> $s35$</h2>
+ <span class="tooltip">
+ $s11$
+ <span>
+ <div class="callout"></div>
+ <h4>$s12$</h4>
+ $s38$
+ </span>
+ </span>
+ <div class="unwanted-element-screenshot"></div>
+ <a class="block-button" href="abp:subscribe?location=https%3A%2F%2Feasylist-downloads.adblockplus.org%2Fyt_annoyances_other.txt&amp;title=Youtube%3A%20Other%20Annoyances">$s16$</a>
+ </li>
+ </ul>
+</section>
+<div id="footer">
+ <div>$s40(https://adblockplus.org/en/faq_basics#remove-subscription)$</div>
+ <div>$s41$ <a href="https://www.facebook.com/adblockplus" target="_blank">$s42$</a></div>
+</div>
« no previous file with comments | « pages/customize-facebook.raw ('k') | pages/development-builds.raw » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld