| Index: skin/firstRun.css |
| =================================================================== |
| --- a/skin/firstRun.css |
| +++ b/skin/firstRun.css |
| @@ -1,519 +1,594 @@ |
| /* |
| - * This file is part of Adblock Plus <https://adblockplus.org/>, |
| - * Copyright (C) 2006-present eyeo GmbH |
| - * |
| - * Adblock Plus is free software: you can redistribute it and/or modify |
| - * it under the terms of the GNU General Public License version 3 as |
| - * published by the Free Software Foundation. |
| - * |
| - * Adblock Plus is distributed in the hope that it will be useful, |
| - * but WITHOUT ANY WARRANTY; without even the implied warranty of |
| - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| - * GNU General Public License for more details. |
| - * |
| - * You should have received a copy of the GNU General Public License |
| - * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. |
| - */ |
| + * This file is part of Adblock Plus <https://adblockplus.org/>, |
| + * Copyright (C) 2006-present eyeo GmbH |
| + * |
| + * Adblock Plus is free software: you can redistribute it and/or modify |
| + * it under the terms of the GNU General Public License version 3 as |
| + * published by the Free Software Foundation. |
| + * |
| + * Adblock Plus is distributed in the hope that it will be useful, |
| + * but WITHOUT ANY WARRANTY; without even the implied warranty of |
| + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| + * GNU General Public License for more details. |
| + * |
| + * You should have received a copy of the GNU General Public License |
| + * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. |
| +*/ |
| -@font-face { |
| - font-family: "CreteRound"; |
| +@font-face |
| +{ |
| + font-family: "Source Sans Pro"; |
| font-style: normal; |
| - src: url(fonts/CreteRound-Regular.otf); |
| + font-weight: 400; |
| + font-stretch: normal; |
| src: local ("Ø"), |
| - /*local ("Ø") forces using no local font called CreteRound*/ |
| - url(fonts/CreteRound-Regular.otf) format("otf"); |
| + url(fonts/SourceSansPro-Regular.woff) format("woff"); |
| } |
| -@font-face { |
| - font-family: "CreteRound"; |
| - font-style: italic; |
| - src: url(fonts/CreteRound-Italic.otf); |
| +@font-face |
|
juliandoucette
2017/10/30 15:02:28
NIT: new adblockplus.org is currently using semi-b
|
| +{ |
| + font-family: "Source Sans Pro"; |
| + font-style: bold; |
| + font-weight: 700; |
| + font-stretch: normal; |
| src: local ("Ø"), |
| - /*local ("Ø") forces using no local font called CreteRound*/ |
| - url(fonts/CreteRound-Italic.otf) format("otf"); |
| + url(fonts/SourceSansPro-bold.woff) format("woff"); |
| +} |
| + |
| +html |
| +{ |
| + font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; |
| } |
| body |
| { |
| - font-family: Helvetica, Arial, sans-serif; |
| - font-size: 15px; |
| - line-height: 140%; |
| - color: #7f776b; |
| - background-color: #f8f6f2; |
| - background-image: url(background-main.png); |
| - margin: 0; |
| - padding: 0; |
| -} |
| - |
| -a, a:link, a:visited |
| -{ |
| - color: #5a84b3; |
| - text-decoration: underline; |
| -} |
| - |
| -a:hover |
| -{ |
| - text-decoration: none; |
| -} |
| - |
| -button |
| -{ |
| - cursor: pointer; |
| -} |
| - |
| -ul |
| -{ |
| margin: 0; |
| padding: 0; |
| } |
| -li |
| -{ |
| - margin: 0; |
| - padding: 0; |
| - list-style-type: none; |
| -} |
| - |
| -header |
| -{ |
| - background-image: url(background.png); |
| - background-repeat: repeat-x; |
| - width: 100%; |
| - padding-top: 25px; |
| -} |
| - |
| -header h1 |
| +.container |
|
juliandoucette
2017/10/30 15:02:28
NIT: Both of these styles are covered by default.c
martin
2018/01/30 14:10:04
Done.
|
| { |
| - font-size: 24px; |
| - font-weight: normal; |
| - color: #57ab5b; |
| - text-align: center; |
| - margin: 21px auto; |
| - padding: 16px 0px; |
| - border: 1px #57ab5b; |
| - 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; |
| -} |
| - |
| -h1, |
| -h2, |
| -h3 |
| -{ |
| - font-family: CreteRound, Helvetica, Arial, sans-serif; |
| -} |
| - |
| -h2 |
| -{ |
| - font-size: 26px; |
| - font-weight: lighter; |
| - color: #968d81; |
| - line-height: 28px; |
| - text-align: center; |
| - margin: 0; |
| - padding: 0; |
| + max-width: 100%; |
| + padding: 0px 1em; |
| } |
| -h3 |
| -{ |
| - font-size: 22px; |
| - color: #7F776B; |
| - font-weight: normal; |
| - margin-top: 0px; |
| - margin-bottom: 10px; |
| - padding: 0; |
| - line-height: 24px; |
| -} |
| - |
| -h4 |
| -{ |
| - font-size: 15px; |
| - color: #7f776b; |
| - font-weight: normal; |
| - text-align: center; |
| - margin: 0; |
| - padding: 0; |
| -} |
| - |
| -section |
| -{ |
| - margin: 0 auto; |
| - margin-bottom: 30px; |
| - max-width: 960px; |
| - background-image: url(background.png); |
| - padding: 40px 100px; |
| - box-sizing: border-box; |
| +#main-content-container { |
|
juliandoucette
2017/10/30 15:02:28
NIT: .container already applies margin 0 auto. It
martin
2018/01/30 14:10:04
Done.
|
| + margin: 0 auto 8em; |
| } |
| -#general |
| -{ |
| - display: table; |
| - padding-left: 0px; |
| - padding-right: 0px; |
| -} |
| - |
| -#general > .block |
| -{ |
| - display: table-cell; |
| - width: 50%; |
| - vertical-align: top; |
| - padding: 0px 50px; |
| - border: dashed 0 #969085; |
| - -webkit-border-start-width: 1px; |
| - -moz-border-start-width: 1px; |
| - border-inline-start-width: 1px; |
| -} |
| - |
| -#general > .block:first-child |
| -{ |
| - border: none; |
| -} |
| - |
| -#acceptable-ads-block h2 |
| -{ |
| - margin-bottom: 34px; |
| -} |
| - |
| -#abb-promotion-block:lang(fr) |
| -{ |
| - display: none; |
| -} |
| - |
| -#abb-promotion-block |
| +.ta-centre |
| { |
| text-align: center; |
| } |
| -#abb-promotion-block h2 |
| -{ |
| - color: #7795b6; |
| - margin-bottom: 40px; |
| -} |
| - |
| -#abb-promotion-block a |
| +@media (max-width: 992px) |
| { |
| - border: solid 1px #446a96; |
| - border-radius: 5px; |
| - display: inline-block; |
| - padding: 6px 16px; |
| - background: -webkit-linear-gradient(bottom, #294e76, #6b92be); |
| - background: linear-gradient(to top, #294e76, #6b92be); |
| - text-decoration: none; |
| - text-align: start; |
| + #content > .one-third |
| + { |
| + padding: 3em 2em; |
| + border-bottom: 1px solid #d3d3d3; |
| + } |
| + #content > .one-third:last-child { |
| + border-bottom: none; |
| + } |
| } |
| -#abb-promotion-block a > div |
| +/****************************************************************************** |
| + * .content |
| +*****************************************************************************/ |
| + |
| +.content h1, |
| +.content h2, |
| +.content h3, |
| +.content h4, |
| +.content h5 |
| { |
| - display: table-cell; |
| - vertical-align: middle; |
| - padding: 6px; |
| + font-weight: bold; |
| + margin: 32px 0px; |
| + margin: 2rem 0rem; |
| } |
| -#abb-promotion-block .title |
| +.content h1 { font-size: 1.8em; } |
| +.content h2 { font-size: 1.4em; } |
| +.content h3 { font-size: 1.3em; } |
| +.content h4 { font-size: 1.2em; } |
| +.content h5 { font-size: 1.1em; } |
| + |
| +@media(min-width: 768px) |
| { |
| - font-size: 21px; |
| - color: #ffffff; |
| - font-weight: bold; |
| -} |
| - |
| -#abb-promotion-block .subtitle |
| -{ |
| - font-size: 12px; |
| - color: #9ab7d6; |
| + .content h1 { font-size: 2.4em; } |
| + .content h2 { font-size: 1.6em; } |
| } |
| -#abb-promotion-block a:hover |
| +.content a, |
| +.content a:visited |
| { |
| - box-shadow: 0px 0px 5px #5D5D5D; |
| + color: #C70D2C; |
| } |
| -#abb-promotion-block a:active |
| + |
| +/******************************************************************************* |
| + * #navbar |
| +******************************************************************************/ |
| + |
| +#navbar |
| { |
| - box-shadow: 0px 0px 5px 1px #5D5D5D; |
| + height: 4em; |
| + background-color: #c70d2c; |
| } |
| -section > p |
| +#navbar li |
| { |
| - margin-top: 15px; |
| + list-style-type: none; |
| } |
| -#logo |
| +/* padding provided by navbar contents */ |
| +.navbar-container |
| { |
| + width: 80%; |
| margin: 0 auto; |
| - height: 128px; |
| - width: 128px; |
| - display: block; |
| } |
| -#share |
| +/* full-width under .container max-width */ |
| +@media(max-width: 1199px) |
| { |
| - background-image: url(background-share.png); |
| - text-align: center; |
| - font-family: CreteRound, Helvetica, Arial, sans-serif; |
| + .navbar-container |
| + { |
| + width: 100%; |
| + } |
| } |
| -#share h2 |
| +/* #navbar #navbar-logo |
| + ******************************************************************************/ |
| + |
| +#navbar-logo |
| { |
| - margin-bottom: 30px; |
| -} |
| - |
| -#share h2, |
| -#share h2 > a |
| -{ |
| + /* padding is visible in hover background-color change */ |
| + padding: 0em 1em; |
| color: #fff; |
| } |
| -#share h2 > a:hover |
| +#navbar-logo:hover, |
| +#navbar-logo:active, |
| +#navbar-logo:focus |
| { |
| - color: #2e5075; |
| -} |
| - |
| -#share span |
| -{ |
| - color: #bed1e6; |
| - text-align: center; |
| - line-height: 34px; |
| - font-size: 22px; |
| - display: block; |
| + background-color: #AE0013; |
| + text-decoration: none; |
| } |
| -#donate:hover, .share-buttons a:hover |
| +#navbar-logo, |
| +#navbar-logo > * |
| { |
| - box-shadow: 0px 0px 0px 2px #8ca7c4; |
| - border-radius: 30px; |
| + float: left; |
| } |
| -#share > .block |
| +[dir="rtl"] #navbar-logo, |
| +[dir="rtl"] #navbar-logo > * |
| { |
| - display: inline-block; |
| - vertical-align: top; |
| - width: 49%; |
| - padding: 5px 0px; |
| - border: 1px dashed #37506d; |
| - border-style: none dashed; |
| + float: right; |
| +} |
| + |
| +#navbar-logo img |
| +{ |
| + height: 4em; |
| + padding: 0.5em 0em; |
| + margin: 0em 1em 0em 0em; |
| } |
| -#share > .block:last-child |
| +[dir="rtl"] #navbar-logo > img |
| { |
| - -webkit-border-start-style: none; |
| - -moz-border-start-style: none; |
| + margin: 0em 0em 0em 1em; |
| } |
| -#share > .block > span |
| +#navbar-logo > span |
| { |
| - margin: 10px 20px; |
| + /* full-height: 2.91 * 1.375 = ~4em */ |
| + line-height: 2.91em; |
| + font-size: 1.375em; |
| } |
| -.share-buttons |
| +/* #navbar #navbar-menu-toggle |
| + ******************************************************************************/ |
| + |
| +#navbar-menu-toggle |
| { |
| - margin-top: 6px; |
| - vertical-align: top; |
| - /* because inline block creates |
| - * space if not captured with |
| - * font-size and line-height 0px |
| - */ |
| - font-size: 0px; |
| - line-height: 0px; |
| + float: right; |
| + padding: 1em; |
| } |
| -.share-buttons > a |
| +[dir="rtl"] #navbar-menu-toggle |
| { |
| - width: 50px; |
| - height: 50px; |
| - margin: 0 8px; |
| - text-decoration: none; |
| - display: inline-block; |
| + float: left; |
| } |
| -#share-general, |
| -#share-chinese:lang(zh) |
| +/* show on mobile */ |
| +#navbar-menu-toggle, |
| +#navbar-menu-toggle > img |
| { |
| display: block; |
| } |
| -#share-general:lang(zh), |
| -#share-chinese |
| +/* hide on desktop */ |
| +@media(min-width: 992px) |
| { |
| - display: none; |
| + #navbar-menu-toggle |
| + { |
| + display: none; |
| + } |
| +} |
| + |
| +#navbar-menu-toggle > img |
| +{ |
| + /* plus 2em padding = 4em */ |
| + height: 2em; |
| } |
| -#share-chinese > a |
| +#navbar-menu-toggle:hover, |
| +#navbar-menu-toggle:active, |
| +#navbar-menu-toggle:focus |
| { |
| - border-bottom: 2px solid transparent; |
| + background-color: #AE0013; |
| +} |
| + |
| +/* #navbar #navbar-menu |
| + ******************************************************************************/ |
| + |
| +#navbar-menu a |
| +{ |
| + display: block; |
| + color: #fff; |
| + text-decoration: none; |
| } |
| -#share-chinese > a:hover |
| -{ |
| - box-shadow: none; |
| - border-radius: 0; |
| - border-bottom: 2px solid #8CA7C4; |
| -} |
| +/* #navbar #navbar-menu (desktop) |
| + ******************************************************************************/ |
| -#share-facebook |
| +@media(min-width: 992px) |
| { |
| - background-image: url(social/facebook.png); |
| - background-repeat: no-repeat; |
| -} |
| - |
| -#share-twitter |
| -{ |
| - background-image: url(social/twitter.png); |
| - background-repeat: no-repeat; |
| + #navbar-menu |
| + { |
| + float: right; |
| + } |
| + |
| + [dir="rtl"] #navbar-menu |
| + { |
| + float: left; |
| + } |
| + |
| + #navbar-menu > li, |
| + #navbar-menu > li > a |
| + { |
| + display: inline-block; |
| + } |
| + |
| + #navbar-menu > li > a |
| + { |
| + padding: 0em 1em; |
| + line-height: 4em; |
| + } |
| + |
| + #navbar-menu > li > a:hover, |
| + #navbar-menu > li > a:active, |
| + #navbar-menu > li > a:focus |
| + { |
| + background-color: #AE0013; |
| + } |
| + |
| + /* #navbar #navbar-menu #navbar-locale-menu |
| + ****************************************************************************/ |
| + |
| + #navbar-locale-menubar |
| + { |
| + position: relative; |
| + } |
| + |
| + #navbar-locale-menu |
| + { |
| + position: absolute; |
| + min-width: 16em; |
| + max-height: 20em; |
| + max-height: 50vh; |
| + top: 100%; |
| + right: 0px; |
| + overflow: auto; |
| + z-index: 9001; |
| + background-color: #292929; |
| + } |
| + |
| + [dir="rtl"] #navbar-locale-menu |
| + { |
| + right: auto; |
| + left: 0px; |
| + } |
| } |
| -#share-gplus |
| +/* #navbar #navbar-menu (mobile) |
| + ******************************************************************************/ |
| + |
| +@media(max-width: 991px) |
| { |
| - background-image: url(social/googleplus.png); |
| - background-repeat: no-repeat; |
| + #navbar-menu |
| + { |
| + display: none; |
| + float: left; |
| + clear: both; |
| + width: 100%; |
| + background-color: #292929; |
| + } |
| + |
| + #navbar-menu.visible |
| + { |
| + display: block; |
| + } |
| + |
| + #navbar-menu li a |
| + { |
| + padding: 0.75em 1em; |
| + } |
| + |
| + #navbar-menu li a:hover, |
| + #navbar-menu li a:active, |
| + #navbar-menu li a:focus |
| + { |
| + background-color: #434343; |
| + } |
| } |
| -#share-renren |
| +/****************************************************************************** |
| + * Main Page Content |
| +*****************************************************************************/ |
| + |
| +#installation-status-header |
| { |
| - background-image: url(social/renren.png); |
| - background-repeat: no-repeat; |
| + text-align: center; |
| + background: #f9f9f9; |
| + padding: 4em 0; |
| + margin-bottom: 4em; |
| +} |
| + |
| +#installation-status-header > h1 { |
| + text-transform: uppercase; |
| +} |
| + |
| +.section-header > h2 |
| +{ |
| + margin: 1em 0 0; |
| } |
| -#share-weibo |
| +.button-primary |
| { |
| - background-image: url(social/weibo.png); |
| - background-repeat: no-repeat; |
| + display: inline-block; |
| + text-decoration: none; |
| + text-transform: uppercase; |
| + color: #fff !important; |
| + text-align: center; |
| + width: 100%; |
| + border-radius: 6px; |
| + padding: 1em 0; |
| + background: #C70D2C; |
| +} |
| + |
| +.store-buttons |
| +{ |
| + width: 100%; |
| + display: flex; |
| + align-items: center; |
| + justify-content: center; |
| +} |
| + |
| +.store-button |
| +{ |
| + display: block; |
| + width: 180px; |
| + height: 58px; |
| + border-radius: 6px; |
| + background: #000; |
| } |
| -.warning |
| +.store-button > img |
| +{ |
| + height: 54px; |
| +} |
| + |
| +.applestore-button |
| { |
| - font-size: 160%; |
| - border: 3px dashed red; |
| - text-align: center; |
| - line-height: 1.3em; |
| + margin-right: 1em; |
| +} |
| + |
| +[dir="rtl"] .appstore-button |
| +{ |
| + margin-right: 0; |
| + margin-left: 1em; |
| } |
| -#social ul |
| +@media (max-width: 1280px) |
| { |
| - list-style: none; |
| - display: inline-block; |
| - padding: 0; |
| + .store-buttons |
| + { |
| + flex-direction: column; |
| + } |
| + |
| + .store-button |
| + { |
| + width: 100%; |
| + } |
| + .applestore-button |
| + { |
| + margin: 0 0 1em; |
| + } |
| +} |
| + |
| +#installation-status-header > h1 |
| +{ |
| + font-size: 3em; |
| margin: 0; |
| } |
| -#social:hover h1 |
| +/******************************************************************************* |
| + * #footer |
| +******************************************************************************/ |
| + |
| +#footer |
| { |
| - opacity: 0; |
| -} |
| - |
| -#social ul:hover li { |
| - opacity: 0.3; |
| + overflow: auto; |
| + margin-top: 2em; |
| + padding: 2em 0em; |
| + color: #ececec; |
| + background-color: #292929; |
| + font-size: 0.9em; |
| } |
| -#social ul li |
| +/* #footer body |
| + ******************************************************************************/ |
| + |
| +#footer h5 |
| { |
| - display: inline-block; |
| - margin: 0px 5px; |
| - -webkit-transition: opacity .5s ease, bottom .3s ease; |
| - transition: opacity .5s ease, bottom .3s ease; |
| - position: relative; |
| - bottom: -30px; |
| + margin-top: 1em; |
| + margin-bottom: 1.5em; |
| +} |
| + |
| +#footer h5:after |
| +{ |
| + content: ""; |
| + display: block; |
| + width: 1.25em; |
| + height: 0.125em; |
| + margin-top: 0.5em; |
| + background-color: #ececec; |
| } |
| -#social ul li:hover |
| +#footer ul |
| +{ |
| + padding: 0em; |
| + list-style-type: none; |
| +} |
| + |
| +#footer a |
| { |
| - opacity: 1.0; |
| - bottom: 0px; |
| + color: #ececec; |
| +} |
| + |
| +#footer a:hover, |
| +#footer a:active, |
| +#footer a:focus |
| +{ |
| + color: #fff; |
| + text-decoration: underline; |
| } |
| -.share-button |
| +/* #footer #social-list |
| + ******************************************************************************/ |
| + |
| +#social-list ul |
| { |
| - display: inline-block; |
| - width: 82px; |
| - height: 82px; |
| + /* negative margin canceled out by li margin below */ |
| + margin: 0em -0.375em; |
| } |
| -/* Change order of the blocks for French */ |
| -#content:lang(fr) |
| +#social-list li |
| { |
| - display: table; |
| - margin: auto; |
| - caption-side: bottom; |
| + float: left; |
| + margin: 0em 0.375em; |
| } |
| -#share:lang(fr) |
| +[dir="rtl"] #social-list li |
| { |
| - display: table-caption; |
| + float: right; |
| +} |
| + |
| +#social-list img |
| +{ |
| + height: 2em; |
| } |
| -#donate |
| +@media(min-width: 1200px) |
| +{ |
| + #social-list img |
| + { |
| + height: 3em; |
| + } |
| +} |
| + |
| +/* #footer #footer-legal |
| + ******************************************************************************/ |
| + |
| +#footer-legal |
| +{ |
| + margin-top: 1em; |
| +} |
| + |
| +@media(min-width: 1200px) |
| { |
| - height: 21px; |
| - display: inline-block; |
| - margin-top: 15px; |
| - margin-bottom: 2px; |
| - font-size: 16px; |
| - color: #003366; |
| - cursor: pointer; |
| - font-weight: bold; |
| - padding: 5px 18px; |
| - text-decoration: none; |
| - border-radius: 20px; |
| - border: 1px solid #FF9933; |
| - overflow: hidden; |
| - font-family: arial, sans-serif; |
| - background-image: url(donate.png); |
| - background-repeat: repeat-x; |
| + #footer-legal |
| + { |
| + margin-top: 2em; |
| + } |
| +} |
| + |
| +/* #footer #footer-legal #legal-list |
| + ******************************************************************************/ |
| + |
| +#legal-list li |
| +{ |
| + float: left; |
| +} |
| + |
| +[dir="rtl"] #legal-list li |
| +{ |
| + float: right; |
| +} |
| + |
| +#legal-list li:after |
| +{ |
| + margin: 0em 0.375em; |
| } |
| -footer |
| +/* IE9+ only */ |
| +#legal-list li::after |
| { |
| - margin: 0 auto 30px; |
| - max-width: 960px; |
| - text-align: center; |
| + content: "|" |
| +} |
| + |
| +#legal-list li:last-of-type::after |
| +{ |
| + content: none; |
| } |
| -@media (max-width: 970px) |
| +/* float copyright and legal links left and right on ~desktop */ |
| +@media(min-width: 1200px) |
| { |
| - header |
| + #copyright-notice |
| { |
| - background-size: 100px 57px; |
| + float: left; |
| } |
| - |
| - #logo |
| + |
| + [dir="rtl"] #copyright-notice |
| + { |
| + float: right; |
| + } |
| + |
| + #legal-list |
| { |
| - width: 64px; |
| - height: 64px; |
| + float: right; |
| } |
| - |
| - section |
| + |
| + [dir="rtl"] #legal-list |
| { |
| - padding: 40px 20px; |
| + float: left; |
| } |
| +} |
| - #general, |
| - #general > .block, |
| - #share > .block |
| +/* hide all footer links except #social-list on ~mobile */ |
| +@media(max-width: 767px) |
| +{ |
| + #footer .column |
| + { |
| + display: none; |
| + } |
| + |
| + /* overriding display:none above */ |
| + #footer #social-list |
| { |
| display: block; |
| } |
| - |
| - #general > .block |
| - { |
| - width: auto; |
| - margin-left: 20px; |
| - margin-right: 20px; |
| - padding: 10px 0px; |
| - border-width: 1px 0px 0px; |
| - } |
| - |
| - #share > .block |
| - { |
| - width: auto; |
| - padding: 20px 0px; |
| - border-style: dashed none none; |
| - } |
| - |
| - #donate, |
| - .share-buttons |
| - { |
| - margin-top: 10px; |
| - } |
| } |