Unified Diff: static/css/index.css
Issue 29716660:
Fixes #5 - Update home page hero unit (Closed)
Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set:
Created March 7, 2018, 8:01 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« pages/yandex-browser.md ('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,97 +1,91 @@ |
| -#content |
| -{ |
| - padding-top: 5em; |
| - margin: 0 auto; |
| -} |
| +/****************************************************************************** |
| + * Temparary styles |
| + *****************************************************************************/ |
| -#key-facts h1 |
| -{ |
| - font-size: 16px; |
| -} |
| +.avoid-wrap {display: inline-block;} |
| +.small {font-size: smaller;} |
| +.maxthon-only {display: none;} |
| +.maxthon .maxthon-only {display: block;} |
| -#content .sprite |
| -{ |
| - background-image: url(../img/sprite-index.png); |
| -} |
| +/****************************************************************************** |
| + * #hero-download |
| + *****************************************************************************/ |
| -#abb-banner |
| +#hero-download |
| { |
| - background-color: #ffffff; |
| - display: none; |
| - padding: 50px 40px 40px 40px; |
| - margin-bottom: 30px; |
| - text-align: center; |
| + padding-top: 2em; |
| + padding-bottom: 2em; |
| } |
| -#abb-banner h2 |
| +@media(min-width: 768px) |
| { |
| - font-size: 28px; |
| - font-weight: bold; |
| - color: #333333; |
| - margin: 0px; |
| -} |
| - |
| -#abb-banner img |
| -{ |
| - margin: 30px 0px 40px 0px; |
| - width: 40%; |
| - min-width: 200px; |
| + #hero-download |
| + { |
| + padding-top: 6em; |
| + padding-bottom: 6em; |
| + } |
| } |
| -#abb-banner a |
| +#hero-download h1 |
| { |
| - display: none; |
| - padding: 20px; |
| - background-color: #2f8ecb; |
| - text-decoration: none; |
| - font-size: 24px; |
| - font-weight: bold; |
| - color: #ffffff; |
| - border-radius: 5px; |
| + line-height: 1.1; |
| } |
| -.ua-android #content, |
| -.ua-ios #content |
| +#hero-download-tos |
| { |
| - margin-top: 0px; |
| + font-size: 10px; |
| } |
| -.ua-android #abb-banner, |
| -.ua-ios #abb-banner, |
| -.ua-android #abb-android-download, |
| -.ua-ios #abb-ios-download |
| +#hero-download-button |
| { |
| display: block; |
| } |
| -#main, #video-container |
| +@media(min-width: 768px) |
| +{ |
| + #hero-download-button |
| + { |
| + display: inline-block; |
| + min-width: 350px; |
| + } |
| +} |
| + |
| +#hero-download-video |
| +{ |
| + display: none; |
| +} |
| + |
| +@media(min-width: 768px) |
| +{ |
| + #hero-download-video |
| + { |
| + display: block; |
| + } |
| +} |
| + |
| +/****************************************************************************** |
| + * #video-container |
| + *****************************************************************************/ |
| + |
| +video-container |
| { |
| display: inline-block; |
| vertical-align: top; /* Fix for https://bugzil.la/1320660 */ |
| } |
| -#video-container, #maxthon-instruction, #edge-teaser |
| +#video-container |
| { |
| background: #ffffff; |
| padding: 10px; |
| border: 1px solid #c9c9c9; |
| box-shadow: 1px 1px 0 0 #dbdbdb; |
| } |
| -#maxthon-instruction, |
| -html[lang^="zh_"] .maxthon #video, |
| -.maxthon #feature-free, |
| -.maxthon #terms-message, |
| -#feature-maxthon |
| -{ |
| - display: none; |
| -} |
| - |
| #video-container |
| { |
| position: relative; |
| box-sizing: border-box; |
| width: 100%; |
| max-width: 520px; |
| } |
| @@ -154,540 +148,38 @@ |
| } |
| .no-js #video-play, |
| .show-disclaimer #video-play |
| { |
| margin-top: -60px; |
| } |
| -html[lang^="zh_"] .maxthon #maxthon-instruction |
| -{ |
| - display: inline-block; |
| - padding: 0px; |
| -} |
| - |
| -.maxthon #feature-maxthon |
| -{ |
| - 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 |
| -{ |
| - 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; |
| -} |
| - |
| -.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; |
| -} |
| - |
| -.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 */ |
| -.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; |
| -} |
| - |
| -.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 */ |
| -.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; |
| -} |
| - |
| -.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 */ |
| -.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; |
| -} |
| - |
| -.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; |
| - 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; |
| -} |
| - |
| -.android #information-android |
| +@media(max-width: 767) |
| { |
| - display: block; |
| -} |
| - |
| -.firefox #platform-firefox |
| -{ |
| - background-position: -108px -68px; |
| -} |
| - |
| -#platform-chrome |
| -{ |
| - background-position: -88px -89px; |
| -} |
| - |
| -.chrome #platform-chrome |
| -{ |
| - background-position: -88px -68px; |
| -} |
| - |
| -#platform-android |
| -{ |
| - background-position: -68px -89px; |
| -} |
| - |
| -.android #platform-android |
| -{ |
| - background-position: -68px -68px; |
| -} |
| - |
| -#platform-opera |
| -{ |
| - background-position: -68px -131px; |
| -} |
| - |
| -.opera #platform-opera |
| -{ |
| - background-position: -68px -110px; |
| -} |
| - |
| -#platform-internet-explorer |
| -{ |
| - background-position: -108px -131px; |
| -} |
| - |
| -.internet-explorer #platform-internet-explorer |
| -{ |
| - background-position: -108px -110px; |
| -} |
| - |
| -#platform-safari |
| -{ |
| - background-position: -88px -131px; |
| -} |
| - |
| -.safari #platform-safari |
| -{ |
| - background-position: -88px -110px; |
| -} |
| + #video-container |
| + { |
| + margin-bottom: 20px; |
| + } |
| -#platform-yandex-browser |
| -{ |
| - background-position: -128px -89px; |
| -} |
| - |
| -.yandex-browser #platform-yandex-browser |
| -{ |
| - background-position: -128px -68px; |
| -} |
| - |
| -#platform-maxthon |
| -{ |
| - background-position: -128px -130px; |
| -} |
| - |
| -.maxthon #platform-maxthon |
| -{ |
| - background-position: -128px -109px; |
| -} |
| - |
| -#platform-edge |
| -{ |
| - background-position: -68px -171px; |
| -} |
| - |
| -.edge #platform-edge |
| -{ |
| - background-position: -68px -151px; |
| -} |
| - |
| -#content h3.subscribe-header |
| -{ |
| - font-size: 18px; |
| - margin-bottom: 0px; |
| -} |
| - |
| -#other-platform > div, |
| -.edge #video, |
| -#edge-teaser |
| -{ |
| - display: none; |
| -} |
| - |
| -.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; |
| -} |
| + #video-disclaimer |
| + { |
| + margin: 10px; |
| + } |
| -.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; |
| -} |
| - |
| -.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 */ |
| -.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; |
| -} |
| - |
| -#key-facts section |
| -{ |
| - display: inline-block; |
| -} |
| - |
| -#key-facts section h1 |
| -{ |
| - margin: 0px; |
| -} |
| - |
| -#key-facts section .sprite |
| -{ |
| - position: absolute; |
| - width: 67px; |
| - height: 67px; |
| - margin-top: 0px; |
| - margin-left: -80px; |
| - margin-right: 0px; |
| - border: none; |
| -} |
| - |
| -html[dir="rtl"] #key-facts section .sprite |
| -{ |
| - margin-right: -80px; |
| - margin-left: 0px; |
| -} |
| - |
| + .no-js #video-disclaimer, |
| + .show-disclaimer #video-disclaimer |
| + { |
| + position: relative; |
| + } |
| -#facts-open-source |
| -{ |
| - background-position: -68px 0px; |
| -} |
| - |
| -#facts-downloads |
| -{ |
| - background-position: 0px 0px; |
| -} |
| - |
| -#facts-privacy |
| -{ |
| - background-position: 0px -68px; |
| -} |
| - |
| -#key-facts |
| -{ |
| - margin-bottom: 40px; |
| -} |
| - |
| -#key-facts section p |
| -{ |
| - margin-bottom: 0px; |
| - font-size: 14px; |
| -} |
| - |
| -#key-facts section a |
| -{ |
| - font-size: 14px; |
| -} |
| - |
| -#footnote |
| -{ |
| - margin-top: 20px; |
| - text-align: start; |
| - 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; |
| + #video-play |
| + { |
| + margin-top: -40px; |
| + } |
| } |
| /****************************************************************************** |
| * #media |
| *****************************************************************************/ |
| #media-section { clear: both; } |
| @@ -716,17 +208,17 @@ |
| #media-list img |
| { |
| max-width: 10em; |
| max-height: 3em; |
| margin: 0 1em 1em; |
| } |
| -#media-list a |
| +#media-list a |
| { |
| position: relative; |
| display: block; |
| } |
| #media-list a:hover img |
| { |
| opacity: 0.3; |
| @@ -741,49 +233,49 @@ |
| 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), |
| + background-image: linear-gradient(transparent, transparent), |
| url(../img/external-icon.svg); |
| background-repeat: no-repeat; |
| background-position: center; |
| background-size: 1em; |
| } |
| -@media (min-width: 768px) |
| +@media (min-width: 992px) |
| { |
| #media-header small |
| - { |
| - display: none; |
| + { |
| + display: none; |
| } |
| #media-list |
| { |
| display: table; |
| width: 100%; |
| } |
| #media-list li |
| { |
| display: table-cell; |
| vertical-align: middle; |
| } |
| #media-list img |
| { |
| - margin: 0 2em; |
| + margin: 0 2em; |
| } |
| } |
| -@media (min-width: 992px) |
| +@media (min-width: 768px) |
| { |
| #media { |
| display: table; |
| width: 100%; |
| } |
| #media-header, |
| #media-list |
| @@ -837,8 +329,51 @@ |
| { |
| #abb-notification figure, |
| #abb-app-store-badges |
| { |
| padding-left: 2em; |
| padding-right: 2em; |
| } |
| } |
| + |
| +/****************************************************************************** |
| + * #footnote |
| + *****************************************************************************/ |
| + |
| +#footnote |
| +{ |
| + margin-top: 20px; |
| + text-align: start; |
| + 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; |
| +} |
| + |
| +@media(max-width: 767px) |
| +{ |
| + #footnote |
| + { |
| + padding: 0px 20px; |
| + } |
| +} |
« no previous file with comments
|
« pages/yandex-browser.md ('k')
|
static/css/index-desktop.css » ('j')
|
no next file with comments »
