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

Unified Diff: static/css/index.css

Issue 29841563: Noissue - Merged index_page into master (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Fixed misc issues discussed in IRC Created July 30, 2018, 3:38 p.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
Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,630 +1,323 @@
-#content,
-#blog
+/******************************************************************************
+ * Temparary styles
+ *****************************************************************************/
+
+.avoid-wrap {display: inline-block;}
+.small {font-size: smaller;}
+
+/******************************************************************************
+ * Browser-based styles
+ *****************************************************************************/
+
+.show-on-msie { display: none; }
+.msie .show-on-msie { display: inherit; }
+.msie .hide-on-msie { display: none; }
+
+.show-on-maxthon { display: none; }
+.maxthon .show-on-maxthon { display: inherit; }
+.maxthon .hide-on-maxthon { display: none; }
+
+/******************************************************************************
+ * #hero-download
+ *****************************************************************************/
+
+#hero-download
{
- padding-top: 5em;
+ padding: 3em 1em;
}
-#key-facts h1
+@media (min-width: 576px) and (max-width: 1023px)
+{
+ /* add spacing left/right on tablets */
+ #hero-download
+ {
+ padding-left: 3em;
+ padding-right: 3em;
+ }
+}
+
+@media (max-width: 575px)
{
- font-size: 16px;
+ /* disable avoid-wrap inside h1 on mobile */
+ #hero-download h1 .avoid-wrap
+ {
+ display: inline;
+ }
+}
+
+@media (max-width: 1023px)
+{
+ /* force hero unit columns to break on large tablets */
+ #hero-download .column
+ {
+ width: 100%;
+ }
+}
+
+@media (min-width: 1024px)
+{
+ #hero-download
+ {
+ padding-top: 6em;
+ padding-bottom: 6em;
+ }
}
-#content .sprite
+#hero-download h1
+{
+ /* Spacing is provided by the hero-download section */
+ margin-top: 0;
+}
+
+@media (min-width: 576px)
{
- background-image: url(../img/sprite-index.png);
+ /* force break without <br> on large screens */
+ #hero-download h1 .avoid-wrap:first-of-type
+ {
+ display: block;
+ }
+}
+
+#hero-download-video
+{
+ /* add space above on phones & tablets */
+ margin-top: 2em;
+ /* prevent default full-width on small tablets */
+ max-width: 550px;
+}
+
+#hero-download-video
+{
+ /* provide a little space between thumbnail and border + shadow */
+ padding: 1em 1em 0 1em;
}
-#abb-banner
+@media (min-width: 1024px)
+{
+ #hero-download-video
+ {
+ /* keep aligned-top despite padding below */
+ margin-top: -1em;
+ }
+}
+
+#hero-download-video.has-iframe
+{
+ /* remove space around thumbnail when thumbnail is replaced by video */
+ padding: 0;
+}
+
+/** Hide the video border + shadow only when the thumbnail alone is showing */
+#hero-download-video.hide-disclaimer:not(.has-iframe)
{
- background-color: #ffffff;
- display: none;
- padding: 50px 40px 40px 40px;
- margin-bottom: 30px;
+ border-color: transparent;
+ /* there is no box-shadow-color property :( */
+ box-shadow: 1px 1px 0 0 transparent;
+}
+
+/* The thumbnail is taller than the video. But it's hard to see because of the
+ * reflection and whitespace at the bottom. As a result, I am cutting out the
+ * whitespace and reflection when I show the disclaimer so that the section
+ * doesn't visibly resize when the thumbnail is replaced by the a iframe.
+ */
+
+
+/******************************************************************************
+ * #media
+ *****************************************************************************/
+
+#media-section
+{
+ clear: both;
text-align: center;
}
-#abb-banner h2
-{
- font-size: 28px;
- font-weight: bold;
- color: #333333;
- margin: 0px;
-}
-
-#abb-banner img
-{
- margin: 30px 0px 40px 0px;
- width: 40%;
- min-width: 200px;
-}
-
-#abb-banner a
+#media-header
{
- display: none;
- padding: 20px;
- background-color: #2f8ecb;
- text-decoration: none;
- font-size: 24px;
- font-weight: bold;
- color: #ffffff;
- border-radius: 5px;
-}
-
-#content.ua-android,
-#content.ua-ios
-{
- margin-top: 0px;
-}
-
-#content.ua-android #abb-banner,
-#content.ua-ios #abb-banner,
-#content.ua-android #abb-android-download,
-#content.ua-ios #abb-ios-download
-{
- display: block;
+ margin-bottom: 1em;
}
-#content.ua-android #adblock-browser-notification,
-#content.ua-ios #adblock-browser-notification
-{
- display: none;
-}
-
-#main, #home-video
+#media-header h2
{
- display: inline-block;
- vertical-align: top; /* Fix for https://bugzil.la/1320660 */
-}
-
-#maxthon-instruction, #edge-teaser
-{
- max-width: 540px;
- background: #ffffff;
- padding: 10px;
- border: 1px solid #c9c9c9;
- box-shadow: 1px 1px 0 0 #dbdbdb;
+ font-size: 1em;
+ font-weight: normal;
+ text-transform: uppercase;
}
-#maxthon-instruction,
-html[lang^="zh_"] #content.maxthon #home-video,
-#content.maxthon #feature-free,
-#content.maxthon #terms-message,
-#feature-maxthon
+#media-header h2,
+#media-list
{
- display: none;
+ margin: 0;
}
-#home-video
-{
- max-width: 520px;
-}
-
-html[lang^="zh_"] #content.maxthon #maxthon-instruction
-{
- display: inline-block;
- padding: 0px;
-}
-
-#content.maxthon #feature-maxthon
+#media-list li
{
display: inline-block;
}
-#summary h1, #summary h2
-{
- font-weight: normal;
- margin: 0;
-}
-
-#summary h1
-{
- font-size: 60px;
- line-height: 50px;
- margin-bottom: 8px;
-}
-
-#summary h2
-{
- font-size: 22px;
- color: #d50215;
-}
-
-#summary ul
-{
- list-style-type: none;
- margin: 10px 0px 16px 0px;
- padding-left: 40px;
- padding-right: 0px;
- color: #333333;
-}
-
-html[dir="rtl"] #summary ul
-{
- padding-right: 40px;
- padding-left: 0px;
-}
-
-#summary li
-{
- margin-bottom: 5px;
- line-height: 24px;
-}
-
-#summary li.emphasized
-{
- font-weight: bold;
-}
-
-#summary li .sprite
+#media-list img
{
- position: absolute;
- width: 12px;
- height: 11px;
- margin-top: 4px;
- margin-left: -17px;
- margin-right: 0px;
- background-image: url(../img/sprite-main.png);
- background-repeat: no-repeat;
- background-position: -166px 0px;
-}
-
-.license-note
-{
- display: none;
- font-weight: normal;
-}
-
-html[dir="rtl"] #summary li .sprite
-{
- margin-right: -17px;
- margin-left: 0px;
-}
-
-#terms-message,
-#terms-message a
-{
- font-size: 12px;
-}
-
-/* This cannot be just .install-button because a:link will have a higher
- specificity otherwise (overrides text color) */
-#install .install-button
-{
- display: none;
- position: relative;
- width: 305px;
- height: 50px;
- color: #fff;
- font-size: 20px;
- text-decoration: none;
- text-align: center;
- line-height: 50px;
- background: #c4c4c4;
- background: -webkit-linear-gradient(top, #c4c4c4, #9e9e9e);
- background: -moz-linear-gradient(top, #c4c4c4, #9e9e9e);
- background: -ms-linear-gradient(top, #c4c4c4, #9e9e9e);
- background: -o-linear-gradient(top, #c4c4c4, #9e9e9e);
- background: linear-gradient(top, #c4c4c4, #9e9e9e);
- box-shadow: 0 1px 0 0 #6b6b6b, 0 2px 0 0 #757575;
- text-shadow: 2px 2px 2px #7a7a7a;
- border: none;
- border-radius: 3px;
- bottom: 6px;
- -webkit-transition: box-shadow 0.3s ease;
- -moz-transition: box-shadow 0.3s ease;
- -ms-transition: box-shadow 0.3s ease;
- -o-transition: box-shadow 0.3s ease;
- transition: box-shadow 0.3s ease;
-}
-
-.install-button:hover
-{
- box-shadow: 0px 2px 7px #6f6f6f, 0 1px 0 0 #6f6f6f;
+ max-width: 10em;
+ max-height: 3em;
+ margin: 0 1em 1em;
}
-.install-button:active
-{
- background: #a2a2a2;
- background: -webkit-linear-gradient(bottom, #cacaca, #a2a2a2);
- background: -moz-linear-gradient(bottom, #cacaca, #a2a2a2);
- background: -ms-linear-gradient(bottom, #cacaca, #a2a2a2);
- background: -o-linear-gradient(bottom, #cacaca, #a2a2a2);
- background: linear-gradient(bottom, #cacaca, #a2a2a2);
- box-shadow: 0px 0px 7px #6f6f6f;
- -webkit-transition: none;
- -moz-transition: none;
- -ms-transition: none;
- -o-transition: none;
- transition: none;
- bottom: 4px;
-}
-
-#content.android .install-button,
-#content.firefox.ua-firefox .install-button,
-#content.chrome.ua-chrome .install-button,
-#content.opera.ua-opera .install-button,
-#content.internet-explorer.ua-internet-explorer .install-button,
-#content.safari.ua-safari .install-button,
-#content.safari.ua-ios .install-button,
-#content.yandex-browser.ua-yandex-browser .install-button,
-#content.edge.ua-edge .install-button,
-/* IE6 fixes */
-#content.firefox_ua-firefox .install-button,
-#content.chrome_ua-chrome .install-button,
-#content.opera_ua-opera .install-button,
-#content.internet-explorer_ua-internet-explorer .install-button,
-#content.safari_ua-safari .install-button,
-#content.yandex-browser_ua-yandex-browser .install-button,
-#content.edge_ua-edge .install-button
-{
- background: #62c52b;
- background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
- background: -moz-linear-gradient(top, #62c52b, #4f9d22);
- background: -ms-linear-gradient(top, #62c52b, #4f9d22);
- background: -o-linear-gradient(top, #62c52b, #4f9d22);
- background: linear-gradient(top, #62c52b, #4f9d22);
- box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
- text-shadow: 2px 2px 2px #327d14;
-}
-
-#content.android .install-button:hover,
-#content.firefox.ua-firefox .install-button:hover,
-#content.chrome.ua-chrome .install-button:hover,
-#content.opera.ua-opera .install-button:hover,
-#content.internet-explorer.ua-internet-explorer .install-button:hover,
-#content.safari.ua-safari .install-button:hover,
-#content.safari.ua-ios .install-button:hover,
-#content.yandex-browser.ua-yandex-browser .install-button:hover,
-#content.edge.ua-edge .install-button:hover,
-/* IE6 fixes */
-#content.firefox_ua-firefox .install-button:hover,
-#content.chrome_ua-chrome .install-button:hover,
-#content.opera_ua-opera .install-button:hover,
-#content.internet-explorer_ua-internet-explorer .install-button:hover,
-#content.safari_ua-safari .install-button:hover,
-#content.yandex-browser_ua-yandex-browser .install-button:hover,
-#content.edge_ua-edge .install-button:hover
+#media-list a
{
- box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
-}
-
-#content.android .install-button:active,
-#content.firefox.ua-firefox .install-button:active,
-#content.chrome.ua-chrome .install-button:active,
-#content.opera.ua-opera .install-button:active,
-#content.internet-explorer.ua-internet-explorer .install-button:active,
-#content.safari.ua-safari .install-button:active,
-#content.safari.ua-ios .install-button:active,
-#content.yandex-browser.ua-yandex-browser .install-button:active,
-#content.edge.ua-edge .install-button:active,
-/* IE6 fixes */
-#content.firefox_ua-firefox .install-button:active,
-#content.chrome_ua-chrome .install-button:active,
-#content.opera_ua-opera .install-button:active,
-#content.internet-explorer_ua-internet-explorer .install-button:active,
-#content.safari_ua-safari .install-button:active,
-#content.yandex-browser_ua-yandex-browser .install-button:active,
-#content.edge_ua-edge .install-button:active
-{
- background: #4f9d22;
- background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
- background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
- background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
- background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
- background: linear-gradient(bottom, #62c52b, #4f9d22);
- box-shadow: 0px 0px 7px #486c15;
-}
-
-#content.firefox #install-firefox, #content.chrome #install-chrome,
-#content.opera #install-opera, #content.android #install-android,
-#content.internet-explorer #install-internet-explorer,
-#content.safari.ua-ios #install-ios-safari,
-#content.safari:not(.ua-ios) #install-safari,
-#content.yandex-browser #install-yandex-browser,
-#content.edge #install-edge
-{
- display: inline-block;
-}
-
-#other-platform ul
-{
- list-style: none;
- display: inline-block;
- margin: 0px;
- padding: 0;
- vertical-align: bottom;
-}
-
-html[dir="rtl"] #install ul
-{
- margin: 0 5px 0 0;
-}
-
-#other-platform li
-{
- display: inline-block;
- margin: 0 3px;
- font-size: 0;
-}
-
-#other-platform li a
-{
- width: 19px;
- height: 20px;
-}
-
-#platform-firefox
-{
- background-position: -108px -89px;
-}
-
-#information-android
-{
- display: none;
-}
-
-#content.android #information-android
-{
+ position: relative;
display: block;
}
-#content.firefox #platform-firefox
-{
- background-position: -108px -68px;
-}
-
-#platform-chrome
-{
- background-position: -88px -89px;
-}
-
-#content.chrome #platform-chrome
-{
- background-position: -88px -68px;
-}
-
-#platform-android
-{
- background-position: -68px -89px;
-}
-
-#content.android #platform-android
+#media-list a:hover img
{
- background-position: -68px -68px;
-}
-
-#platform-opera
-{
- background-position: -68px -131px;
-}
-
-#content.opera #platform-opera
-{
- background-position: -68px -110px;
-}
-
-#platform-internet-explorer
-{
- background-position: -108px -131px;
-}
-
-#content.internet-explorer #platform-internet-explorer
-{
- background-position: -108px -110px;
+ opacity: 0.3;
}
-#platform-safari
-{
- background-position: -88px -131px;
-}
-
-#content.safari #platform-safari
-{
- background-position: -88px -110px;
-}
-
-#platform-yandex-browser
-{
- background-position: -128px -89px;
-}
-
-#content.yandex-browser #platform-yandex-browser
-{
- background-position: -128px -68px;
-}
-
-#platform-maxthon
+#media-list a:hover:after
{
- background-position: -128px -130px;
-}
-
-#content.maxthon #platform-maxthon
-{
- background-position: -128px -109px;
-}
-
-#platform-edge
-{
- background-position: -68px -171px;
-}
-
-#content.edge #platform-edge
-{
- background-position: -68px -151px;
-}
-
-#content h3.subscribe-header
-{
- font-size: 18px;
- margin-bottom: 0px;
-}
-
-#other-platform > div,
-#content.edge #home-video,
-#edge-teaser
-{
- display: none;
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ height: 1em;
+ width: 1em;
+ padding: 1em;
+ margin-left: -1em;
+ margin-top: -1em;
+ border-radius: 50%;
+ background-color: #000;
+ background-image: url(../img/external-icon.png);
+ background-image: linear-gradient(transparent, transparent),
+ url(../img/external-icon.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 1em;
}
-.warning-platform,
-.disclaimer,
-#maxthon-notification
-{
- display: none;
- color: #D00;
- text-align: center;
- border: 1px solid #D00;
- padding: 5px;
- border-radius: 5px;
-}
-
-.disclaimer
-{
- font-size: 14px;
- color: #000;
- text-align: left;
-}
-
-#content.ua-firefox .warning-platform.firefox,
-#content.ua-chrome .warning-platform.chrome,
-#content.ua-android .warning-platform.android,
-#content.ua-opera .warning-platform.opera,
-#content.ua-internet-explorer .warning-platform.internet-explorer,
-#content.ua-safari .warning-platform.safari,
-#content.ua-yandex-browser .warning-platform.yandex-browser,
-#content.ua-maxthon .warning-platform.maxthon,
-html[lang^="zh_"] #maxthon-notification
+@media (min-width: 1024px)
{
- display: block;
-}
+ #media
+ {
+ display: table;
+ width: 100%;
+ }
+
+ #media-header,
+ #media-list
+ {
+ display: table-cell;
+ vertical-align: middle;
+ width: auto;
+ }
+
+ #media-header
+ {
+ margin-bottom: 0;
+ }
+
+ #media-header small
+ {
+ display: none;
+ }
+
+ #media-list { direction: rtl; }
+ [dir="rtl"] #media-list { direction: ltr; }
-#content.firefox.ua-firefox .warning-platform.firefox,
-#content.chrome.ua-chrome .warning-platform.chrome,
-#content.android.ua-android .warning-platform.android,
-#content.opera.ua-opera .warning-platform.opera,
-#content.internet-explorer.ua-internet-explorer .warning-platform.internet-explorer,
-#content.safari.ua-safari .warning-platform.safari,
-#content.yandex-browser.ua-yandex-browser .warning-platform.yandex-browser,
-#content.maxthon.ua-maxthon .warning-platform.maxthon,
-#content.ua-maxthon #maxthon-notification,
-#content.maxthon #maxthon-notification,
-/* IE6 fixes */
-#content.firefox_ua-firefox .warning-platform.firefox,
-#content.chrome_ua-chrome .warning-platform.chrome,
-#content.opera_ua-opera .warning-platform.opera,
-#content.internet-explorer_ua-internet-explorer .warning-platform.internet-explorer,
-#content.safari_ua-safari .warning-platform.safari,
-#content.yandex-browser_ua-yandex-browser .warning-platform.yandex-browser,
-#content.maxthon_ua-maxthon .warning-platform.maxthon
-{
- display: none;
-}
+ @supports (display: flex)
+ {
+ #media-list
+ {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
-#key-facts
-{
- box-sizing: content-box;
+ #media-list
+ {
+ display: table;
+ width: 100%;
+ }
+
+ #media-list li
+ {
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ #media-list img
+ {
+ margin: 0 2em;
+ }
}
-#key-facts section
+/******************************************************************************
+ * #abb-cross-promotion
+ *****************************************************************************/
+
+#abb-cross-promotion
{
- display: inline-block;
+ padding: 3em 0;
}
-#key-facts section h1
+#abb-cross-promotion h2
{
- margin: 0px;
+ margin-top: 0;
+ margin-bottom: 1.5em;
}
-#key-facts section .sprite
+#abb-cross-promotion h2,
+#abb-cross-promotion h3
{
- position: absolute;
- width: 67px;
- height: 67px;
- margin-top: 0px;
- margin-left: -80px;
- margin-right: 0px;
- border: none;
+ text-transform: uppercase;
}
-html[dir="rtl"] #key-facts section .sprite
+#abb-logo
{
- margin-right: -80px;
- margin-left: 0px;
+ max-width: 10em;
+}
+
+#abb-app-store-badges
+{
+ margin-top: 2em;
}
-
-#facts-open-source
+#abb-app-store-badges img
{
- background-position: -68px 0px;
+ width: 200px;
}
-#facts-downloads
+@media (max-width: 575px)
{
- background-position: 0px 0px;
-}
-
-#facts-privacy
-{
- background-position: 0px -68px;
+ #abb-app-store-badges a:first-of-type
+ {
+ margin-bottom: 0.5em;
+ }
}
-#key-facts
+@media (min-width: 576px)
{
- margin-bottom: 40px;
+ #abb-app-store-badges .one-half
+ {
+ width: 50%;
+ }
+
+ #abb-cross-promotion figure,
+ #abb-app-store-badges
+ {
+ padding-left: 2em;
+ padding-right: 2em;
+ }
}
-#key-facts section p
-{
- margin-bottom: 0px;
- font-size: 14px;
-}
-
-#key-facts section a
-{
- font-size: 14px;
-}
+/******************************************************************************
+ * #footnote
+ *****************************************************************************/
#footnote
{
- margin-top: 20px;
- text-align: start;
+ padding-top: 3em;
+ padding-bottom: 2em;
+ font-size: 13px;
color: #7d7d7d;
}
-
-#footnote,
-#footnote li,
-#footnote a,
-#footnote strong
-{
- font-size: 11px;
-}
-
-#footnote li
-{
- padding-bottom: 5px;
-}
-
-#footnote li:first-child
-{
- padding-top: 5px;
-}
-
-#footnote ul
-{
- margin: 0px;
- padding: 0px 30px;
-}
-
-.notice
-{
- padding: 20px;
- line-height: 1.4;
- color: #000;
- background-color: #fff;
- border: 2px solid #a1a1a1;
-}
-
-#ready-for-windows-notice
-{
- margin-bottom: 30px;
-}

Powered by Google App Engine
This is Rietveld