Issue 3031 - Add Adblock Browser section to First Run Page

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 126 matching lines @@
 
 section
 {
   margin: 0 auto;
   margin-bottom: 30px;
   max-width: 760px;
   background-image: url(background.png);
   padding: 40px 100px;
 }
 
+#general
+{
+  padding: 40px 0px;
+  max-width: 960px;
+  display: table;
+}

[Thomas Greiner, 2015/09/11 18:12:00]

Why do you need to deviate so much from the default style for sections? For
instance, the general section should still have the same maximum width and
paddings as any other section.

[saroyanm, 2015/09/15 09:42:37]

I did this because I wanted to setup equal right and left side padding for the
separated contents (AA and ABB promo.), but in general I think we need to assign
box-content: border-box; to section blocks and change their width to 960px, but
to be more clear I think we need to assign that changes to all elements on the
page, but we will need to align the elements afterward, if you think that make
sense to do it in current review I'll apply box-content to each element in the
page and fix sizes.

[Thomas Greiner, 2015/09/15 11:19:31]

Not to each element, no. It should only be applied where necessary. Generally,
it's not straight-forward to see sections having a maximum width of `760px`
while another one has `960px` but still look like they have the same width on
the screen.

[saroyanm, 2015/09/15 12:43:31]

I've made a fix accordingly so we will not need to apply width separately.

+
+#general > div
+{
+  display: table-cell;
+  width: 50%;
+  vertical-align: top;
+  padding: 0px 50px;
+}
+
+#general > div:not(:first-child)
+{
+  border-left: dashed 1px #969085;
+}
+
+html[dir="rtl"] #general > div:not(:first-child)
+{
+  border-left: none;
+  border-right: dashed 1px #969085;
+}
+
+#acceptable-ads-block h2
+{
+  margin-bottom: 34px;
+}
+
+#abb-promotion-block:lang(fr)
+{
+  display: none;
+}
+
+#abb-promotion-block h2
+{
+  color: #7795b6;
+  margin-bottom: 40px;
+}
+
+#abb-promotion-block a
+{
+  border: solid 1px #446a96;
+  border-radius: 5px;
+  display: table;
+  padding: 6px 16px;
+  background: -prefix-gradient(to top, #294e76, #6b92be);

[Thomas Greiner, 2015/09/11 18:11:59]

I suppose that "-prefix-" is a placeholder for vendor prefixes.

[saroyanm, 2015/09/15 09:42:37]

That's stupid sorry :D Done.

+  background: linear-gradient(to top, #294e76, #6b92be);
+  text-decoration: none;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#abb-promotion-block a > div
+{
+  display: table-cell;
+  vertical-align: middle;
+  padding: 6px;
+}
+
+#abb-promotion-block a > div:first-child
+{
+  width: 1px;

[Thomas Greiner, 2015/09/11 18:11:59]

What is this supposed to do? Looks like it's a workaround for something.

[saroyanm, 2015/09/15 09:42:37]

Yes, I need the first cell to be adjusted to the width of it's content, you can
see the effect on small screens when the second cell have room to expand. 

[Thomas Greiner, 2015/09/15 11:19:31]

The behavior on small screens hasn't been specified so I consulted with Sven.
The button should not take up the entire width but instead behave the same as on
larger screens and be centered.

Making those changes will eliminate the need for this workaround.

[saroyanm, 2015/09/15 12:43:31]

Well in that case we will need to specify width I guess, should I use 340px ?

[Thomas Greiner, 2015/09/15 14:15:50]

No, you shouldn't need to specify a width. If you're encountering issues, you
could still change `#abb-promotion-block a` from `display: table` to `display:
inline-block`.

[saroyanm, 2015/09/15 15:03:35]

Done.

+}
+
+#abb-promotion-block a div > div:first-child
+{
+  font-size: 22px;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+#abb-promotion-block a div > div:not(:first-child)

[Thomas Greiner, 2015/09/11 18:12:00]

Detail: That's a situation where assigning a class name to an element is more
descriptive. Basically, what you want to target is a ".subtitle" here and
".title" above, for example.

[saroyanm, 2015/09/15 09:42:37]

Done.

+{
+  font-size: 12px;
+  color: #9ab7d6;
+}
+
+#abb-promotion-block a:hover
+{
+  -moz-box-shadow: 0px 0px 5px #5D5D5D;
+  -webkit-box-shadow: 0px 0px 5px #5D5D5D;

[Thomas Greiner, 2015/09/11 18:11:59]

According to MDN the prefixes have been removed in Firefox 4 and Chrome 10 so
not necessary to include.

[saroyanm, 2015/09/15 09:42:37]

Safari 5.0 ? The prefixes looks to be removed from Safari 5.1.

[Thomas Greiner, 2015/09/15 11:19:31]

1) `-moz-xxx` is still unnecessary.
2) AFAIK we don't support Safari 5.0.

[saroyanm, 2015/09/15 12:43:31]

Done.

+  box-shadow: 0px 0px 5px #5D5D5D;
+}
+
+#abb-promotion-block a:active
+{
+  -moz-box-shadow: 0px 0px 5px 1px #5D5D5D;
+  -webkit-box-shadow: 0px 0px 5px 1px #5D5D5D;
+  box-shadow: 0px 0px 5px 1px #5D5D5D;
+}
+
+@media (max-width: 960px)
+{
+  #general
+  {
+    padding: 40px 0px;
+    max-width: 960px;
+    display: block;
+  }

[Thomas Greiner, 2015/09/11 18:11:59]

Basically, all this block does is override `display: table` so the rest appears
to be unnecessary.

Similar situation with `#general > div` below.

[saroyanm, 2015/09/15 09:42:37]

Ahh right, hmm. Done.

+
+  #general > div:not(:first-child),
+  html[dir="rtl"] #general > div:not(:first-child)
+  {
+    border: none;
+  }
+
+  #general > div
+  {
+    display: block;
+    width: auto;
+    vertical-align: top;
+    padding: 0px 50px;
+  }
+}
+
 section > p
 {
   margin: 15px 0 0 0;
 }
 
 #logo
 {
   margin: 0 auto;
   height: 128px;
   width: 128px;
@@ skipping 435 matching lines @@
   background-image: url(donate.png);
   background-repeat: repeat-x;
 }
 
 footer
 {
   margin: 0 auto 30px;
   max-width: 960px;
   text-align: center;
 }