first run page redesign

chrome/skin/firstRun.css

Index: chrome/skin/firstRun.css
===================================================================
--- a/chrome/skin/firstRun.css
+++ b/chrome/skin/firstRun.css
@@ -15,85 +15,248 @@
  * 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: Arial, Helvetica, sans-serif;
-  font-size: 14px;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 15px;
   line-height: 140%;
-  color: #000000;
+  color: #7f776b;
   background-color: #f8f6f2;
-  background-image: url(background.png);
-  margin: 0 auto;
-  padding: 0;
-  max-width: 900px;
+  background-image: url(background-main.png);
 }
 
-a:link, a:visited
+a, a:link, a:visited
 {
-  color: #7d7d7d;
+  color: #5a84b3;
+  text-decoration: underline;
 }
 
-button, .arrow
+a:hover
+{
+  text-decoration: none;
+}
+
+button
 {
   cursor: pointer;
 }
 
-header, p
+li
 {
-  margin: 15px 0 5px;
-}
-
-#content
-{
-  padding: 0 90px;
+  list-style-type: none;
 }
 
 header
 {
-  padding-left: 148px;
-  background-image: url(abp-icon-big.png);
-  background-position: 0% 50%;
-  background-repeat: no-repeat;
-  min-height: 128px;
-  vertical-align: middle;
-  line-height: 1;
-
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-box-pack: center;
-
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  -moz-box-pack: center;
-
-  display: -o-box;
-  -o-box-orient: vertical;
-  -o-box-pack: center;
-
-  display: -ms-box;
-  -ms-box-orient: vertical;
-  -ms-box-pack: center;
-
-  display: box;
-  box-orient: vertical;
-  box-pack: center;
+  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: 40px;
+  font-size: 24px;
   font-weight: normal;
-  margin: 0;
+  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;
 }
 
-#dataCorruptionWarning
+strong
 {
-  font-size: 200%;
-  line-height: 140%;
-  margin: 20px;
-  padding: 20px;
-  border: 3px solid red;
-  border-radius: 10px;
+  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;
+
+}
+
+h3 
+{
+  font-size: 22px;
+  color: #7F776B;
+  font-weight: normal;
+  margin: 0 0 10px 0;
+  line-height: 24px;
+}
+
+h4 
+{
+  font-size: 15px;
+  color: #7f776b;
+  font-weight: normal;
+  text-align: center;
+}
+
+section
+{
+  margin: 0 auto;
+  margin-bottom: 30px;
+  max-width: 760px;
+  background-image: url(background.png);
+  padding: 40px 100px;
+}
+
+section > p
+{
+  margin: 15px 0 0 0;
+}
+
+
+#logo
+{
+  margin: 0 auto;
+  height: 100px;
+  width: 99px;
+  display: block;
+  background-image: url(abp-icon-big.png);
+  background-repeat: no-repeat;
+}
+
+#can-do-more
+{
+  max-width: 960px; 
+  padding: 40px 0px 0px 0px;
+}
+
+#can-do-more > h2
+{
+  margin: 0 100px;
+}
+
+.fade
+{
+  opacity: 0;
+}
+
+.hide
+{
+  display: none;
+}
+
+#can-do-more-overview
+{
+  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;
+}
+
+#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;
+}
+
+#can-do-more #feature-first
+{
+  border-left: 1px dashed #c7c6c2;
+}
+
+.feature-malware-image
+{
+  background-image: url(features/malware.png);
+  background-repeat: no-repeat;
+}
+
+.feature-social-image
+{
+  background-image: url(features/social.png);
+  background-repeat: no-repeat;
+}
+
+.feature-tracking-image
+{
+  background-image: url(features/tracking.png);
+  background-repeat: no-repeat;
+}
+
+#can-do-more-expanded
+{
+  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
@@ -102,28 +265,15 @@
   border-spacing: 10px;
   margin: 0px;
   padding: 0px;
-  padding-bottom: 120px;
-  white-space: nowrap;
-}
-
-#features-title
-{
-  font-size: 22px;
-  color: #cc0000;
-  margin: 30px 0px 20px;
-}
-
-#features-title::after
-{
-  content: ":";
 }
 
 .feature:not([hidden])
 {
   display: block;
-  position: relative;
   list-style-type: none;
+  padding: 30px 0;
   padding-bottom: 20px;
+  border-top: 1px dashed #c0bebb;
 }
 
 .feature-image, .feature-description
@@ -136,188 +286,245 @@
 
 .feature-description
 {
-  width: 550px;
-  margin: 0px 10px;
+  margin: 0px 0px 0 20px;
+  width: 625px;
+  max-width: 85%;
 }
 
-.feature-title
+.feature-description-textblock
 {
-  color: black;
-  font-weight: bold;
-  font-size: 120%;
+  width: 480px;
+  max-width: 100%; 
+  margin: 0 40px 0 0;
+  display: inline-block;
 }
 
-.feature-title::after
+.feature-description-textblock > span
 {
-  content: ":";
-}
-
-.feature-text
-{
-  margin: 7px 0px;
-  white-space: normal;
+  margin: 15px 0 0 0;
 }
 
 .feature-image
 {
-  width: 57px;
-  height: 57px;
+  width: 59px;
+  height: 59px;
+  margin: 8px 0 10px 20px;
 }
 
-#feature-malware .feature-image
+#activate-features
 {
-  background-image: url(features/malware.png);
+  width: 100%;
+  background-image: url("background-candomore.png");
+  margin: 30px 0 0 0;
+  padding: 14px 0 14px 0;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
 }
 
-#feature-social .feature-image
+#activate-features-label
 {
-  background-image: url(features/social.png);
+  display: inline-block;
+  width: 86%;
+  color: #fff;
+  font-size: 22px;
+  text-align: center;
+  font-style: italic;
+  font-family: CreteRound, Helvetica, Arial, sans-serif;
+  -moz-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
 }
 
-#feature-tracking .feature-image
+#can-do-more.expanded #label-show-expanded
 {
-  background-image: url(features/tracking.png);
+  display: block;
 }
 
-.feature button
+#can-do-more.expanded #label-show-overview
 {
-  cursor: pointer;
-  position: relative;
-  top: 0px;
-  padding: 5px 10px;
-  *padding: 2px 3px;
-  font-weight: none;
-  font-size: inherit;
-  color: white;
-  text-shadow: 2px 2px 2px #327d14;
-  border: none;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
-  background-color: #62c52b;
-  background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
-  background: -moz-linear-gradient(top, #62c52b, #4f9d22);
-  background: -o-linear-gradient(top, #62c52b, #4f9d22);
-  background: -ms-linear-gradient(top, #62c52b, #4f9d22);
-  background: linear-gradient(top, #62c52b, #4f9d22);
-  -webkit-transition: box-shadow 0.3s ease;
-  -moz-transition: box-shadow 0.3s ease;
-  -o-transition: box-shadow 0.3s ease;
-  -ms-transition: box-shadow 0.3s ease;
-  transition: box-shadow 0.3s ease;
+  display: none;
 }
 
-.feature button:hover
+#label-show-expanded
 {
-  box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
+  display: none;
 }
 
-.feature button:active
+#label-show-overview
 {
-  top: 3px;
-  top: 0px\9;
-  box-shadow: 0px 0px 7px #486c15;
-  background-color: #4f9d22;
-  background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
-  background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
-  background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
-  background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
-  background: linear-gradient(bottom, #62c52b, #4f9d22);
-  -webkit-transition: none;
-  -moz-transition: none;
-  -o-transition: none;
-  -ms-transition: none;
-  transition: none;
-  *zoom: 1;
+  display: block;
 }
 
-.feature button.disable
+#activate-features-label:hover
 {
-  text-shadow: 2px 2px 2px #9d4f22;
-  box-shadow: 0 1px 0 0 #9d4f22, 0 2px 0 0 #999;
-  background-color: #c5622b;
-  background: -webkit-linear-gradient(top, #c5622b, #9d4f22);
-  background: -moz-linear-gradient(top, #c5622b, #9d4f22);
-  background: -o-linear-gradient(top, #c5622b, #9d4f22);
-  background: -ms-linear-gradient(top, #c5622b, #9d4f22);
-  background: linear-gradient(top, #c5622b, #9d4f22);
+  color: #1f6822;
 }
 
-.feature button.disable:hover
+#can-do-more.expanded .arrow
 {
-  box-shadow: 0px 2px 7px #9d4f22, 0 1px 0 0 #9d4f22;
-}
-
-.feature button.disable:active
-{
-  top: 3px;
-  top: 0px\9;
-  box-shadow: 0px 0px 7px #9d4f22;
-  background-color: #9d4f22;
-  background: -webkit-linear-gradient(bottom, #c5622b, #9d4f22);
-  background: -moz-linear-gradient(bottom, #c5622b, #9d4f22);
-  background: -o-linear-gradient(bottom, #c5622b, #9d4f22);
-  background: -ms-linear-gradient(bottom, #c5622b, #9d4f22);
-  background: linear-gradient(bottom, #c5622b, #9d4f22);
-  -webkit-transition: none;
-  -moz-transition: none;
-  -o-transition: none;
-  -ms-transition: none;
-  transition: none;
-  *zoom: 1;
-}
-
-#shade
-{
-  -webkit-transition: opacity 0.2s ease;
-  -moz-transition: opacity 0.2s ease;
-  -o-transition: opacity 0.2s ease;
-  -ms-transition: opacity 0.2s ease;
-  transition: opacity 0.2s ease;
-  opacity: 0.0;
-  position: fixed;
-  margin-left: 10px;
-  bottom: 70px;
-  z-index: 100;
+  background-image: url("arrow-up.png");
 }
 
 .arrow
 {
-  width: 0;
-  height: 0;
-  border: 30px solid transparent;
-  border-top-color: #000;
+  width: 29px;
+  height: 22px;
+  vertical-align: bottom;
+  display: inline-block;
+  background-image: url("arrow-down.png");
 }
 
-footer
+#share
 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 70px 0 0;
+  background-image: url(background-share.png);
+  padding: 50px 100px 40px 100px; 
+  max-width: 760px;
   text-align: center;
-  background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-  background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-  background: -o-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-  background: -ms-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-  background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
+  font-family: CreteRound, Helvetica, Arial, sans-serif;
 }
 
-footer h1
+#share h2
 {
-  margin: 0;
-  font-size: 18px;
-  color: #666;
-  position: fixed;
-  bottom: 70px;
-  left: 0;
-  right: 0;
-  -webkit-transition: opacity .3s ease;
-  -moz-transition: opacity .3s ease;
-  -o-transition: opacity .3s ease;
-  -ms-transition: opacity .3s ease;
-  transition: opacity .3s ease;
-  opacity: 1;
+  color: #fff;
+  margin: 0 0 30px 0;
+}
+
+#share h2 > a
+{
+  color: #fff;
+}
+
+#share h2 > a:hover
+{
+  color: #2e5075;
+}
+
+#share span
+{
+  color: #bed1e6;
+  text-align: center;
+  line-height: 34px;
+  font-size: 22px;
+  display: block;
+}
+
+#donate:hover, .share-buttons a:hover
+{
+  -moz-box-shadow: 0px 0px 0px 2px #8ca7c4;
+  -webkit-box-shadow: 0px 0px 0px 2px #8ca7c4;
+  box-shadow: 0px 0px 0px 2px #8ca7c4;
+  border-radius: 30px;
+} 
+
+#donate-block span, #share-block span
+{
+  margin: 13px 20px 10px 20px;
+}
+
+#donate-block, #share-block
+{
+  min-width: 250px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 20px 0 0 0;
+}
+
+#donate-block
+{
+  border: 1px dashed #37506d;
+  border-style: none dashed;
+  width: 50%;  
+}
+
+#share-block
+{
+  border-right: 1px dashed #37506d;
+  width: 49%;
+}
+
+.share-buttons
+{
+  margin: 6px 0 0 0;
+  cursor: pointer;
+  vertical-align: top;
+  /* because inline block creates 
+   * space if not captured with 
+   * font-size and line-height 0px
+   */
+  font-size: 0px;
+  line-height: 0px;
+}
+
+.share-buttons > a
+{
+  width: 50px;
+  height: 50px;
+  margin: 0 8px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+html[lang^="zh_"] #share-chinese,
+html:not([lang^="zh_"]) #share-general
+{
+  display: block;
+}
+
+html[lang^="zh_"] #share-general,
+html:not([lang^="zh_"]) #share-chinese
+{
+  display: none;
+}
+
+#share-chinese > a
+{
+  border-bottom: 2px solid transparent;
+}
+
+#share-chinese > a:hover
+{
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 2px solid #8CA7C4;
+}
+
+#share-facebook
+{
+  background-image: url(social/facebook.png);
+  background-repeat: no-repeat;
+}
+
+#share-twitter
+{
+  background-image: url(social/twitter.png);
+  background-repeat: no-repeat;
+}
+
+#share-gplus
+{
+  background-image: url(social/googleplus.png);
+  background-repeat: no-repeat;
+}
+
+#share-renren
+{
+  background-image: url(social/renren.png);
+  background-repeat: no-repeat;
+}
+
+#share-weibo
+{
+  background-image: url(social/weibo.png);
+  background-repeat: no-repeat;
+}
+
+#dataCorruptionWarning
+{
+  font-size: 160%;
+  border: 3px dashed red;
+  text-align: center;
 }
 
 #social ul
@@ -363,21 +570,6 @@
   height: 82px;
 }
 
-#share-facebook
-{
-  background-image: url(social/facebook.png);
-}
-
-#share-twitter
-{
-  background-image: url(social/twitter.png);
-}
-
-#share-gplus
-{
-  background-image: url(social/gplus.png);
-}
-
 #glass-pane, #share-popup
 {
   visibility: hidden;
@@ -398,7 +590,6 @@
   left: 0;
   background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%;
   z-index: 101;
-
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
@@ -437,19 +628,26 @@
 .toggle
 {
   cursor: pointer;
-  position: absolute;
+  position: relative;
   display: inline-block;
-  top: 50%;
+  vertical-align: top;
   height: 22px;
-  margin: -21px 0px 7px 0px;
+  margin: 32px 0px 7px 0px;
   border-radius: 9999px;
-  box-shadow: 0 0 0 1px #999;
+  border: 1px solid #999;
   overflow: hidden;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
 }
 
+.toggle:hover
+{
+  -moz-box-shadow: 0px 0px 3px 0px #968d81;
+  -webkit-box-shadow: 0px 3px 0px 0px #968d81;
+  box-shadow: 0px 0px 3px 0px #968d81;
+}
+
 .toggle:active
 {
   cursor: wait;
@@ -462,7 +660,10 @@
   font-size: 11px;
   font-weight: 500;
   text-align: center;
-  line-height: 25px;
+  line-height: 23px;
+  border-radius: 9999px;
+  -moz-border-radius: 9999px;
+  -webkit-border-radius: 9999px;
 }
 
 .toggle-on
@@ -493,11 +694,11 @@
   height: 100%;
   width: 22px;
   border-radius: 50px;
-  box-shadow: 1px 1px 2px #888;
   background: #cfcfcf;
   background: -moz-linear-gradient(bottom,  #cfcfcf 0%, #f5f5f5 100%);
   background: -webkit-linear-gradient(bottom,  #cfcfcf 0%,#f5f5f5 100%);
   background: linear-gradient(to top,  #cfcfcf 0%,#f5f5f5 100%);
+  box-shadow: 1px 1px 2px #888;
 }
 
 .off .toggle-on
@@ -511,27 +712,28 @@
   right: auto;
 }
 
-/* Adjust font size on smaller screens */
-@media (max-height: 800px)
+#donate
 {
-  body
-  {
-    font-size: 19px;
-  }
+  height: 21px;
+  display: inline-block;
+  margin: 15px 0px 2px 0px;
+  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;
 }
 
-@media (max-height: 750px)
+footer
 {
-  body
-  {
-    font-size: 17px;
-  }
+  margin: 0 auto 30px;
+  max-width: 960px;
+  text-align: center;
 }
-
-@media (max-height: 700px)
-{
-  body
-  {
-    font-size: 16px;
-  }
-}