first run page redesign

chrome/skin/firstRun.css

 /*
  * This file is part of Adblock Plus <http://adblockplus.org/>,
  * Copyright (C) 2006-2013 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-style: normal;
   src: url(fonts/CreteRound-Regular.otf);

[Wladimir Palant, 2013/10/02 13:21:39]

Do we really need a custom font for the first-run page? I'm not even asking
about whether adding 50 kB to the download size is really worth it, the
attribution requirement of its license is something that we have to comply with
- and we currently don't have a place for third-party licenses in either Firefox
or Chrome.

   src: local ('Ø'), 
   /*local ('Ø') forces using no local font called CreteRound*/
   url(fonts/CreteRound-Regular.otf) format('otf'); 
 }
 
 @font-face {
   font-family: 'CreteRound';
   font-style: italic;
   src: url(fonts/CreteRound-Italic.otf);
   src: local ('Ø'),
   /*local ('Ø') forces using no local font called CreteRound*/
   url(fonts/CreteRound-Italic.otf) format('otf'); 
 }
 
-*
-{
-  margin: 0;
-  padding: 0;
-}

[Wladimir Palant, 2013/10/02 13:21:39]

I generally consider wildcard CSS rules like this one bad style, you never know
what they will apply to and what kind of unexpected effects they will cause.
What's wrong with setting a margin and padding on the elements where you
actually need it? It doesn't look like there are too many.

-
 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
 {
-  height: 200px;

[Wladimir Palant, 2013/10/02 13:21:39]

Why the hardcoded height? We don't have to support IE here yet and modern
browsers are generally capable of working without any hardcoded sizes.

Or is that only an alternative way of writing |margin-bottom: 100px|?

   background-image: url(background.png);
   background-repeat: repeat-x;
   width: 100%;
   padding: 40px 0 0 0;
 }
 
 header h1
 {
   font-size: 24px;
   font-weight: normal;
-  margin: 0 auto;
   color: #57ab5b;
   text-align: center;
   margin: 21px auto;

[Wladimir Palant, 2013/10/02 13:21:39]

This overrides the margin property three lines above.

   padding: 16px 0 14px 0;
   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;
 }
 
-strong
-{
-  font-weight: 600;

[Wladimir Palant, 2013/10/02 13:21:39]

Aren't you duplicating browser defaults here? At least in Firefox that tag
defaults to |font-weight: bold| which is equivalent to |font-weight: 700| - I
doubt that there is any visible difference.

-}
-
 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;
 }
 
 h3 
 {
   font-size: 22px;
   color: #7F776B;
   font-weight: normal;
   margin: 0 0 10px 0;
+  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: 760px;
   background-image: url(background.png);
   padding: 40px 100px;
 }
@@ skipping 30 matching lines @@
   opacity: 0;
 }
 
 .hide
 {
   display: none;
 }
 
 #can-do-more-overview
 {
+  opacity: 1;
+  max-height: 10000px;
   max-width: 760px;
-  min-height: 140px;
   margin: 30px 100px 0 100px;
   font-size: 0px;
   /* hides appearing spacings because of 
    * using display: inline-block*/
   cursor: pointer;
-  transition: opacity 0.5s ease-in-out;
-  -moz-transition: opacity 0.5s ease-in-out;
-  -webkit-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.3s step-end;

[Wladimir Palant, 2013/10/05 09:15:59]

Shouldn't it be ease-in-out rather than step-end here?

+  -moz-transition: opacity 0.3s ease-in-out;
+  -webkit-transition: opacity 0.3s ease-in-out;
+}
+
+#can-do-more.expanded > #can-do-more-overview, #can-do-more.expanded > #can-do-more-overview li, #can-do-more.expanded > #can-do-more-overview div, #can-do-more.expanded > #can-do-more-overview h4
+{
+  opacity: 0;
+  max-height: 0px;
+  width: 0;
+  margin: 0;
+  padding: 0;
+  transition: none;
+  -moz-transition: none;
+  -webkit-transition: none;
+  -o-transition: none;

[Wladimir Palant, 2013/10/05 09:15:59]

We don't set -o-transition above, we shouldn't need it here either (Presto
engine is dead and current releases won't be running on it).

 }
 
 #can-do-more-overview > li:hover
 {
   background-image: url("background-main.png");
   text-decoration: none;
 }
 
 #can-do-more-overview > li
 {
   width: 230px;
   height: 115px;

[Wladimir Palant, 2013/10/02 13:21:39]

I guess we are hardcoding the size of the text here and ignoring the fact that
translations might have a different size? Can this be avoided?

   display: inline-block;
   border-right: 1px dashed #c7c6c2;
   padding: 20px 10px 0 10px;
   vertical-align: top;
   text-decoration: underline;
   -webkit-backface-visibility: hidden;
   /* hides the 1px movement chrome bug 
    * which appears while transition. 
    */
 }
 
 #can-do-more-overview > li > div

[Wladimir Palant, 2013/10/02 13:21:39]

Seeing this makes me think that the HTML source is missing a few classes. E.g.,
<div class="feature-malware-image"> should probably be <div class="feature-image
feature-malware-image">

 {
   width: 59px;
   height: 59px;
   display: block;
   margin: 0 auto;
 }
 
 #can-do-more-overview > li > h4
 {
   margin: 15px 0 0 0;
@@ skipping 17 matching lines @@
 }
 
 .feature-tracking-image
 {
   background-image: url(features/tracking.png);
   background-repeat: no-repeat;
 }
 
 #can-do-more-expanded
 {
+  opacity: 0;
+  max-height: 0;
+}
+
+#can-do-more.expanded > #can-do-more-expanded
+{
+  opacity: 1;
+  max-height: 10000px;
   margin: 30px 100px 0 100px;
   transition: opacity 0.5s ease-in-out;
   -moz-transition: opacity 0.5s ease-in-out;
   -webkit-transition: opacity 0.5s ease-in-out;
-}
-
-#features
-{
-  display: block;
+  transition-delay: 0.2s;
+  -webkit-transition-delay: 0.2s;

[Wladimir Palant, 2013/10/05 09:15:59]

-moz-transition-delay seems to be missing here. Then again, Firefox supports
unprefixed transition and transition-delay properties as of Firefox 16 - which
is the lowest version we are supporting already. So I guess dropping
-moz-transition is the better course of action.

+}
+
+#features, .feature:not([hidden]), .feature-image, .feature-description, .feature-description, .feature-description-textblock, .feature-description-textblock > span, .feature-image
+{
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  transition: none;
+  -moz-transition: none;
+  -webkit-transition: none;
+  -o-transition: none;
+}
+
+
+#can-do-more.expanded #features,#can-do-more.expanded .feature:not([hidden]),#can-do-more.expanded .feature-image,#can-do-more.expanded .feature-description,#can-do-more.expanded .feature-description,#can-do-more.expanded .feature-description-textblock,#can-do-more.expanded .feature-description-textblock > span,#can-do-more.expanded .feature-image
+{
+  width: auto;
+  height: auto;
+  margin: auto;
+  padding: auto;
+  transition-property: all;
+  -moz-transition-property: all;
+  -webkit-transition-property: all;
+  -o-transition-property: all;

[Wladimir Palant, 2013/10/05 09:15:59]

As above, -o-transition-property and -moz-transition-property shouldn't be
necessary.

+  transition-duration: 0.5s;
+  -webkit-transition-duration: 0.5s;
+  transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+}
+
+#can-do-more.expanded #features
+{
   border-spacing: 10px;
   margin: 0px;
   padding: 0px;
 }
 
-.feature:not([hidden])
+#can-do-more.expanded .feature:not([hidden])
 {
   display: block;
   list-style-type: none;
   padding: 30px 0;
   padding-bottom: 20px;
   border-top: 1px dashed #c0bebb;
 }
 
-.feature-image, .feature-description
+#can-do-more.expanded .feature-image, #can-do-more.expanded .feature-description
 {
   display: inline-block;
   *display: inline; /* IE6 inline-block fix */
   *zoom: 1;
   vertical-align: top;
 }
 
-.feature-description
+#can-do-more.expanded .feature-description
 {
   margin: 0px 0px 0 20px;
   width: 625px;
   max-width: 85%;
 }
 
-.feature-description-textblock
+#can-do-more.expanded .feature-description-textblock
 {
   width: 480px;
   max-width: 100%; 
   margin: 0 40px 0 0;
   display: inline-block;
 }
 
-.feature-description-textblock > span
+#can-do-more.expanded .feature-description-textblock > span
 {
   margin: 15px 0 0 0;
 }
 
-.feature-image
+#can-do-more.expanded .feature-image
 {
   width: 59px;
   height: 59px;
   margin: 8px 0 10px 20px;
 }
 
 #activate-features
 {
   width: 100%;
   background-image: url("background-candomore.png");
@@ skipping 30 matching lines @@
 #label-show-expanded
 {
   display: none;
 }
 
 #label-show-overview
 {
   display: block;
 }
 
 #activate-features-label:hover

[Thomas Greiner, 2013/10/05 15:51:19]

This is a weird behavior. It's neither restricted to only the text nor to the
whole button due to the text being a block element. Please change it to:

#activate-features:hover a
{
  color: #1f6822;
  text-decoration: none;
}

 {
   color: #1f6822;
 }
 
 #can-do-more.expanded .arrow
 {
   background-image: url("arrow-up.png");
 }
 
 .arrow
@@ skipping 361 matching lines @@
   background-image: url(donate.png);
   background-repeat: repeat-x;
 }
 
 footer
 {
   margin: 0 auto 30px;
   max-width: 960px;
   text-align: center;
 }