First-run page on Adblock Plus for IE

html/static/css/firstRun.css

Index: html/static/css/firstRun.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/html/static/css/firstRun.css
@@ -0,0 +1,200 @@
+body
+{
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 20px;
+  text-align: center;

[Felix Dahlke, 2013/07/11 11:11:14]

I don't really get this. You set text-align to center in the body, then you set
it to text-align left in the wrapper (which appears to contain all the content)
and then to center again in the header? Is there no easier way to achieve what
you want?

[Thomas Greiner, 2013/07/12 10:52:52]

Done. I moved the share elements and the glass-pane out of the wrapper to get
rid of one of those text-aligns.

+  background-image: url(../img/background.png);
+  margin: auto;
+  line-height: 1.5;
+}
+
+#wrapper
+{
+  display: inline-block;
+  *display: inline; /* IE6 inline-block fix */

[Felix Dahlke, 2013/07/11 11:11:14]

The zoom: 1 below is part of the fix, right? Then I'd prefer having both at the
bottom and the comment above, so it's clear.

[Thomas Greiner, 2013/07/12 10:52:52]

Done.

+  *zoom: 1;
+  max-width: 800px;
+  text-align: left;
+}
+
+header
+{
+  padding: 20px 0px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+#logo
+{
+  display: inline-block;

[Felix Dahlke, 2013/07/11 11:11:14]

This is the same in #wrapper, and in several blocks below. Wow about having just
one block for all of them?

[Thomas Greiner, 2013/07/12 10:52:52]

Done.

+  *display: inline; /* IE6 inline-block fix */
+  *zoom: 1;
+  background-image: url(../img/abp-128.png);
+  width: 128px;
+  height: 128px;
+}
+
+#title-main
+{
+  display: inline;
+  position: relative;
+  top: -40px;
+  font-weight: normal;
+  font-size: 40px;
+  margin: 0px 10px;
+  vertical-align: bottom;
+}
+
+#features
+{
+  margin: 10px 0px 40px 0px;
+}
+
+#features li
+{
+  margin-left: 50px;
+  list-style-image: url(../img/checkmark.png);
+}
+
+#share1,
+#share2
+{
+  display: none;
+  text-align: center;
+  font-size: 120%;
+  margin-top: 40px;
+}
+
+html.share-variant-1 #share1,
+html.share-variant-2 #share2
+{
+  display: block;
+}
+
+.share-image
+{
+  display: inline-block;
+  *display: inline; /* IE6 inline-block fix */
+  *zoom: 1;
+  width: 64px;
+  height: 64px;
+}
+
+#share-images2
+{
+  display: inline-block;
+  *display: inline; /* IE6 inline-block fix */
+  *zoom: 1;
+  box-shadow: 0 0 4px 3px #EEEEEE;
+  border-radius: 5px;
+  background: #FFFFFF;
+  padding: 10px 40px;
+  margin-bottom: 30px;
+}
+
+#share-images2 *
+{
+  vertical-align: middle;
+}
+
+#share-donate
+{
+  display: inline-block;
+  *display: inline; /* IE6 inline-block fix */
+  *zoom: 1;
+  font-style: italic;
+  font-weight: bold;
+  font-size: 12px;
+  text-decoration: none;
+  color: #003366;
+  border: 1px solid #FF9933;
+  border-radius: 10px;
+  padding: 2px 10px;
+  background-image: url(../img/button-background/donate.png);
+  background-repeat: repeat-x;
+}
+
+#share2-connection
+{
+  margin: 0px 20px;
+}
+
+.share-facebook
+{
+  background-image: url(../img/social/facebook-old.png);
+}
+
+.share-twitter
+{
+  background-image: url(../img/social/twitter-old.png);
+}
+
+.share-gplus
+{
+  background-image: url(../img/social/gplus-old.png);
+}
+
+#glass-pane, #share-popup
+{
+  visibility: hidden;
+  opacity: 0;
+  -ms-transition-property: opacity, visibility;
+  transition-property: opacity, visibility;
+}
+
+#glass-pane
+{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.5) url(../img/ajax-loader.gif) no-repeat 50% 50%;
+  -ms-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+#share-popup
+{
+  border: none;
+  -ms-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+}
+
+#glass-pane.visible, #share-popup.visible
+{
+  visibility: visible;
+  opacity: 1;
+}
+
+#share-popup.visible
+{
+  -ms-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+}
+
+/* Adjust font size on smaller screens */
+@media (max-height: 800px)

[Felix Dahlke, 2013/07/11 11:11:14]

This won't work in older IEs, don't know which first introduced support for
media queries. To make this work cross-platform, we'll have to use respond.js as
on adblockplus.org, with separate CSS files.

I doubt it's worth the trouble, better have one font size that looks good
everywhere. I really don't see why we need to support anything below 800x600
either.

[Thomas Greiner, 2013/07/12 10:52:52]

Thought of it more as a nice improvement on newer browser versions rather than
something essential.

Removed it anyway and set font-size to 1.1em;

+{
+  body
+  {
+    font-size: 19px;
+  }
+}
+
+@media (max-height: 750px)
+{
+  body
+  {
+    font-size: 17px;
+  }
+}
+
+@media (max-height: 700px)
+{
+  body
+  {
+    font-size: 16px;
+  }
+}