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; |
- } |
} |