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

Unified Diff: skin/firstRun.css

Issue 29565721: No Issue - Implemented first run page Base URL: https://hg.adblockplus.org/adblockplusui/
Patch Set: Addressed newest round of feedback Created Oct. 20, 2017, 2:43 p.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: skin/firstRun.css
===================================================================
--- a/skin/firstRun.css
+++ b/skin/firstRun.css
@@ -1,519 +1,640 @@
/*
- * 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/>,
juliandoucette 2017/10/21 16:18:46 Please keep the spaces before "*" in these comment
martin 2017/10/26 10:33:17 At first I wasn't sure what you meant exactly, but
+* 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
juliandoucette 2017/10/21 16:18:43 This doesn't seem to be used anywhere?
martin 2017/10/26 10:33:17 Done.
+{
+ font-family: "Source Sans Pro";
font-style: normal;
- src: url(fonts/CreteRound-Regular.otf);
+ font-weight: 300;
+ font-stretch: normal;
src: local ("Ø"),
- /*local ("Ø") forces using no local font called CreteRound*/
- url(fonts/CreteRound-Regular.otf) format("otf");
+ url(fonts/SourceSansPro-Light.woff) format("otf");
}
-@font-face {
- font-family: "CreteRound";
- font-style: italic;
- src: url(fonts/CreteRound-Italic.otf);
+@font-face
+{
+ font-family: "Source Sans Pro";
+ font-style: normal;
+ font-weight: 400;
+ font-stretch: normal;
src: local ("Ø"),
- /*local ("Ø") forces using no local font called CreteRound*/
- url(fonts/CreteRound-Italic.otf) format("otf");
+ url(fonts/SourceSansPro-Regular.woff) format("woff");
+}
+
+@font-face
+{
+ font-family: "Source Sans Pro";
+ font-style: normal;
juliandoucette 2017/10/21 16:18:43 NIT: You could name this "bold"
martin 2017/10/26 10:33:17 Done.
+ font-weight: 700;
+ font-stretch: normal;
+ src: local ("Ø"),
+ 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
{
- 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;
+ width: 80%;
juliandoucette 2017/10/21 16:18:43 new abp.org uses website-defaults .container width
martin 2017/10/26 10:33:19 Honestly I chose to override the default for the s
+ max-width: 100%;
+ margin: 0 auto 8em;
juliandoucette 2017/10/21 16:18:44 NIT: `.container` is a very general class. It's me
martin 2017/10/26 10:33:18 Done.
+ 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;
-}
-
-#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-columns-container > .one-third
juliandoucette 2017/10/21 16:18:44 NIT: `#content-columns-container` is quite long. W
martin 2017/10/26 10:33:18 Done.
+ {
+ padding: 3em 0;
+ border-bottom: 1px solid #d3d3d3;
+ }
}
-#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)
+{
+ #navbar-menu-toggle
+ {
+ display: none;
+ }
+}
+
+#navbar-menu-toggle > img
+{
+ /* plus 2em padding = 4em */
+ height: 2em;
+}
+
+#navbar-menu-toggle:hover,
+#navbar-menu-toggle:active,
+#navbar-menu-toggle:focus
+{
+ background-color: #AE0013;
+}
+
+/* #navbar #navbar-menu
+******************************************************************************/
+
+#navbar-menu a
+{
+ display: block;
+ color: #fff;
+ text-decoration: none;
+}
+
+/* #navbar #navbar-menu #navbar-locale-menu
+******************************************************************************/
+
+/* caret */
+#navbar-locale-selected:after
+{
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin: 0em 0em 0em 0.255em;
+ vertical-align: .255em;
+ content: "";
+ border-top: .3em solid;
+ border-right: .3em solid transparent;
+ border-left: .3em solid transparent;
+}
+
+[dir="rtl"] #navbar-locale-selected:after
+{
+ margin: 0em 0.255em 0em 0em;
+}
+
+#navbar-locale-menu
{
display: none;
}
-#share-chinese > a
+#navbar-locale-menu.visible
+{
+ display: block;
+}
+
+#navbar-locale-menu > li > a
{
- border-bottom: 2px solid transparent;
+ padding: 0.75em 1em;
+}
+
+#navbar-locale-menu > li > a:hover,
+#navbar-locale-menu > li > a:active,
+#navbar-locale-menu > li > a:focus
+{
+ background-color: #434343;
}
-#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;
+}
+
+.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;
- }
}

Powered by Google App Engine
This is Rietveld