Issue 2018 - Optimized first-run page for smaller screens

skin/firstRun.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 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
@@ skipping 127 matching lines @@
   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;

[saroyanm, 2015/10/07 10:15:07]

I can see that here you don't want to overwrite rule for "section" element, but
in this case I think the exception is "section" with ID "share", because
currently you are duplicating this style to another element with ID
"can-do-more" make sense to have:
section
{
  padding: 40px 0px;
}

#share
{
  padding-left: 100px;
  padding-right: 100px;
}

Or all sections can have equal left-right paddings and do not overwrite them.

"section" elements that we are using to show error don't have heading and I'm
not sure if we should consider them as sections, maybe make sense to use DIV
instead ? Because seems like we are using them as section because of styling. 

So I'll suggest, or to make consistent changes, or revert this change and handle
similar styling issue in separate ticket, while it's irrelevant here.

[Thomas Greiner, 2015/10/07 13:24:24]

The values in `#can-do-more` were duplicates so I eliminated all of the
redundancy that was going on there.

   padding-right: 0px;
 }
 
 #general > div
 {
   display: table-cell;
   width: 50%;
   vertical-align: top;
   padding: 0px 50px;
   border: dashed 0 #969085;
@@ skipping 78 matching lines @@
 #logo
 {
   margin: 0 auto;
   height: 128px;
   width: 128px;
   display: block;
 }
 
 #can-do-more
 {
-  padding: 40px 0px 0px 0px;
   border-bottom: 4px solid #968D81;
 }
 
-#can-do-more > h2
-{
-  margin: 0 100px;
-}
-
 .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-content
 {
-  margin: 30px 100px;
+  margin-top: 30px;
 }
 
 #can-do-more #features
 {
   border-spacing: 10px;
-  margin: 0px;
-  padding: 0px;
 }
 
 #can-do-more .feature
 {
   list-style-type: none;
   padding-top: 30px;
   padding-bottom: 20px;
   border-top: 1px dashed #c0bebb;
 }
 
 #can-do-more .feature-image, #can-do-more .feature-description
 {
   display: inline-block;
-  *display: inline; /* IE6 inline-block fix */
-  *zoom: 1;
   vertical-align: top;
 }
 
 #can-do-more .feature-description
 {
   -webkit-margin-start: 20px;
   -moz-margin-start: 20px;
   width: 625px;
   max-width: 85%;
 }
@@ skipping 17 matching lines @@
   width: 59px;
   height: 59px;
   margin: 10px 0px;
   -webkit-margin-start: 20px;
   -moz-margin-start: 20px;
 }
 
 #share
 {
   background-image: url(background-share.png);
-  max-width: 760px;
   text-align: center;
   font-family: CreteRound, Helvetica, Arial, sans-serif;
 }
 
 #share h2
 {
   margin-bottom: 30px;
 }
 
 #share h2,
@@ skipping 220 matching lines @@
   height: 100%;
   font-size: 11px;
   font-weight: 500;
   text-align: center;
   line-height: 23px;
   border-radius: 9999px;
 }
 
 .toggle-on
 {
   padding-left: 10px;

[saroyanm, 2015/10/07 10:15:07]

What about RTL ?

[Thomas Greiner, 2015/10/07 13:24:25]

Not everything needs to be inverted in an RTL environment. So the question we
have to ask ourselves is: Does it make a difference whether that circle in the
toggle button is on the right or left side? I don't think it does in this case.

There's a nice blog post about that on Mozilla Hacks:
https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-pa...

   padding-right: 30px;
   color: rgba(255,255,255,0.8);
   text-shadow: 1px 1px rgba(0,0,0,0.2);
   box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
   background: rgb(69,163,31);
 }
 
 .toggle-off
 {
   padding-left: 30px;

[saroyanm, 2015/10/07 10:15:07]

What about RTL ?

   padding-right: 10px;
   color: rgba(0,0,0,0.6);
   text-shadow: 1px 1px rgba(255,255,255,0.2);
   background: #cfcfcf;
   background: -moz-linear-gradient(top,  #cfcfcf 0%, #f5f5f5 100%);
   background: -webkit-linear-gradient(top,  #cfcfcf 0%,#f5f5f5 100%);
   background: linear-gradient(to bottom,  #cfcfcf 0%,#f5f5f5 100%);
 }
 
 .toggle-blob
@@ skipping 97 matching lines @@
   #can-do-more .feature-description-textblock
   {
     text-align: start;
   }
 
   .toggle
   {
     margin-top: 14px;
   }
 }