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

Unified Diff: static/css/index.css

Issue 29695555: Fixes #6 - Add media mention banner (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Updated max-width Created Feb. 22, 2018, 8:52 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
Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,11 +1,12 @@
#content
{
padding-top: 5em;
+ margin: 0 auto;
}
#key-facts h1
{
font-size: 16px;
}
#content .sprite
@@ -44,32 +45,32 @@
background-color: #2f8ecb;
text-decoration: none;
font-size: 24px;
font-weight: bold;
color: #ffffff;
border-radius: 5px;
}
-#content.ua-android,
-#content.ua-ios
+.ua-android #content,
+.ua-ios #content
{
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
+.ua-android #abb-banner,
+.ua-ios #abb-banner,
+.ua-android #abb-android-download,
+.ua-ios #abb-ios-download
{
display: block;
}
-#content.ua-android #adblock-browser-notification,
-#content.ua-ios #adblock-browser-notification
+.ua-android #adblock-browser-notification,
+.ua-ios #adblock-browser-notification
{
display: none;
}
#main, #video-container
{
display: inline-block;
vertical-align: top; /* Fix for https://bugzil.la/1320660 */
@@ -79,19 +80,19 @@
{
background: #ffffff;
padding: 10px;
border: 1px solid #c9c9c9;
box-shadow: 1px 1px 0 0 #dbdbdb;
}
#maxthon-instruction,
-html[lang^="zh_"] #content.maxthon #video,
-#content.maxthon #feature-free,
-#content.maxthon #terms-message,
+html[lang^="zh_"] .maxthon #video,
+.maxthon #feature-free,
+.maxthon #terms-message,
#feature-maxthon
{
display: none;
}
#video-container
{
position: relative;
@@ -159,23 +160,23 @@
}
.no-js #video-play,
.show-disclaimer #video-play
{
margin-top: -60px;
}
-html[lang^="zh_"] #content.maxthon #maxthon-instruction
+html[lang^="zh_"] .maxthon #maxthon-instruction
{
display: inline-block;
padding: 0px;
}
-#content.maxthon #feature-maxthon
+.maxthon #feature-maxthon
{
display: inline-block;
}
#summary h1, #summary h2
{
font-weight: normal;
margin: 0;
@@ -299,95 +300,95 @@
-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.yandex-browser.ua-yandex-browser .install-button,
-#content.edge.ua-edge .install-button,
+.android .install-button,
+.firefox.ua-firefox .install-button,
+.chrome.ua-chrome .install-button,
+.opera.ua-opera .install-button,
+.internet-explorer.ua-internet-explorer .install-button,
+.safari.ua-safari .install-button,
+.yandex-browser.ua-yandex-browser .install-button,
+.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
+.firefox_ua-firefox .install-button,
+.chrome_ua-chrome .install-button,
+.opera_ua-opera .install-button,
+.internet-explorer_ua-internet-explorer .install-button,
+.safari_ua-safari .install-button,
+.yandex-browser_ua-yandex-browser .install-button,
+.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.yandex-browser.ua-yandex-browser .install-button:hover,
-#content.edge.ua-edge .install-button:hover,
+.android .install-button:hover,
+.firefox.ua-firefox .install-button:hover,
+.chrome.ua-chrome .install-button:hover,
+.opera.ua-opera .install-button:hover,
+.internet-explorer.ua-internet-explorer .install-button:hover,
+.safari.ua-safari .install-button:hover,
+.yandex-browser.ua-yandex-browser .install-button:hover,
+.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
+.firefox_ua-firefox .install-button:hover,
+.chrome_ua-chrome .install-button:hover,
+.opera_ua-opera .install-button:hover,
+.internet-explorer_ua-internet-explorer .install-button:hover,
+.safari_ua-safari .install-button:hover,
+.yandex-browser_ua-yandex-browser .install-button:hover,
+.edge_ua-edge .install-button:hover
{
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.yandex-browser.ua-yandex-browser .install-button:active,
-#content.edge.ua-edge .install-button:active,
+.android .install-button:active,
+.firefox.ua-firefox .install-button:active,
+.chrome.ua-chrome .install-button:active,
+.opera.ua-opera .install-button:active,
+.internet-explorer.ua-internet-explorer .install-button:active,
+.safari.ua-safari .install-button:active,
+.yandex-browser.ua-yandex-browser .install-button:active,
+.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
+.firefox_ua-firefox .install-button:active,
+.chrome_ua-chrome .install-button:active,
+.opera_ua-opera .install-button:active,
+.internet-explorer_ua-internet-explorer .install-button:active,
+.safari_ua-safari .install-button:active,
+.yandex-browser_ua-yandex-browser .install-button:active,
+.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 #install-safari,
-#content.yandex-browser #install-yandex-browser,
-#content.edge #install-edge
+.firefox #install-firefox, .chrome #install-chrome,
+.opera #install-opera, .android #install-android,
+.internet-explorer #install-internet-explorer,
+.safari #install-safari,
+.yandex-browser #install-yandex-browser,
+.edge #install-edge
{
display: inline-block;
}
#other-platform ul
{
list-style: none;
display: inline-block;
@@ -419,114 +420,114 @@
background-position: -108px -89px;
}
#information-android
{
display: none;
}
-#content.android #information-android
+.android #information-android
{
display: block;
}
-#content.firefox #platform-firefox
+.firefox #platform-firefox
{
background-position: -108px -68px;
}
#platform-chrome
{
background-position: -88px -89px;
}
-#content.chrome #platform-chrome
+.chrome #platform-chrome
{
background-position: -88px -68px;
}
#platform-android
{
background-position: -68px -89px;
}
-#content.android #platform-android
+.android #platform-android
{
background-position: -68px -68px;
}
#platform-opera
{
background-position: -68px -131px;
}
-#content.opera #platform-opera
+.opera #platform-opera
{
background-position: -68px -110px;
}
#platform-internet-explorer
{
background-position: -108px -131px;
}
-#content.internet-explorer #platform-internet-explorer
+.internet-explorer #platform-internet-explorer
{
background-position: -108px -110px;
}
#platform-safari
{
background-position: -88px -131px;
}
-#content.safari #platform-safari
+.safari #platform-safari
{
background-position: -88px -110px;
}
#platform-yandex-browser
{
background-position: -128px -89px;
}
-#content.yandex-browser #platform-yandex-browser
+.yandex-browser #platform-yandex-browser
{
background-position: -128px -68px;
}
#platform-maxthon
{
background-position: -128px -130px;
}
-#content.maxthon #platform-maxthon
+.maxthon #platform-maxthon
{
background-position: -128px -109px;
}
#platform-edge
{
background-position: -68px -171px;
}
-#content.edge #platform-edge
+.edge #platform-edge
{
background-position: -68px -151px;
}
#content h3.subscribe-header
{
font-size: 18px;
margin-bottom: 0px;
}
#other-platform > div,
-#content.edge #video,
+.edge #video,
#edge-teaser
{
display: none;
}
.warning-platform,
.disclaimer,
#maxthon-notification
@@ -541,47 +542,47 @@
.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,
+.ua-firefox .warning-platform.firefox,
+.ua-chrome .warning-platform.chrome,
+.ua-android .warning-platform.android,
+.ua-opera .warning-platform.opera,
+.ua-internet-explorer .warning-platform.internet-explorer,
+.ua-safari .warning-platform.safari,
+.ua-yandex-browser .warning-platform.yandex-browser,
+.ua-maxthon .warning-platform.maxthon,
html[lang^="zh_"] #maxthon-notification
{
display: block;
}
-#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,
+.firefox.ua-firefox .warning-platform.firefox,
+.chrome.ua-chrome .warning-platform.chrome,
+.android.ua-android .warning-platform.android,
+.opera.ua-opera .warning-platform.opera,
+.internet-explorer.ua-internet-explorer .warning-platform.internet-explorer,
+.safari.ua-safari .warning-platform.safari,
+.yandex-browser.ua-yandex-browser .warning-platform.yandex-browser,
+.maxthon.ua-maxthon .warning-platform.maxthon,
+.ua-maxthon #maxthon-notification,
+.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
+.firefox_ua-firefox .warning-platform.firefox,
+.chrome_ua-chrome .warning-platform.chrome,
+.opera_ua-opera .warning-platform.opera,
+.internet-explorer_ua-internet-explorer .warning-platform.internet-explorer,
+.safari_ua-safari .warning-platform.safari,
+.yandex-browser_ua-yandex-browser .warning-platform.yandex-browser,
+.maxthon_ua-maxthon .warning-platform.maxthon
{
display: none;
}
#key-facts
{
box-sizing: content-box;
}
@@ -684,8 +685,128 @@
background-color: #fff;
border: 2px solid #a1a1a1;
}
#ready-for-windows-notice
{
margin-bottom: 30px;
}
+
+/******************************************************************************
+ * #media
+ *****************************************************************************/
+
+#media-header h2,
+#media-list
+{
+ margin: 0;
+}
+
+#media-header
+{
+ margin-bottom: 2em;
+}
+
+#media-header h2
+{
+ font-size: 1em;
+ font-weight: normal;
+ text-transform: uppercase;
+}
+
+#media-list li
+{
+ display: inline-block;
+}
+
+#media-list img
+{
+ max-width: 10em;
ire 2018/02/22 08:55:12 I updated this figure because the techcrunch logo
juliandoucette 2018/02/23 13:46:18 Acknowledged.
+ max-height: 3em;
+ margin: 0 1em 1em;
+}
+
+#media-list a
+{
+ position: relative;
+ display: block;
+}
+
+#media-list a:hover img
+{
+ opacity: 0.5;
+}
+
+#media-list a:hover:after
+{
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-image: url(../img/external-icon.png);
+ background-image: url(../img/external-icon.svg, none);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 1em;
+}
+
+@media (min-width: 768px)
+{
+ #media-header small
+ {
+ display: none;
+ }
+
+ #media-list
+ {
+ display: table;
+ width: 100%;
+ }
+
+ #media-list li
+ {
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ #media-list img
+ {
+ margin: 0 2em;
+ }
+}
+
+@media (min-width: 992px)
+{
+ #media {
+ display: table;
+ width: 100%;
+ }
+
+ #media-header,
+ #media-list
+ {
+ display: table-cell;
+ vertical-align: middle;
+ width: auto;
+ }
+
+ #media-header
+ {
+ margin-bottom: 0;
+ }
+
+ #media-list { direction: rtl; }
+ [dir="rtl"] #media-list { direction: ltr; }
+
+ @supports (display: flex)
+ {
+ #media-list
+ {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+
+}
« includes/index.tmpl ('K') | « includes/index.tmpl ('k') | static/css/index-desktop.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld