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: Addressed comments #2
Created Feb. 20, 2018, 10:48 a.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« includes/index.tmpl ('k')
|
static/css/index-desktop.css » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| 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: 5em; |
| + 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; |
| + } |
| + } |
| + |
| +} |
« no previous file with comments
|
« includes/index.tmpl ('k')
|
static/css/index-desktop.css » ('j')
|
no next file with comments »
