Issue 3257 - Create uninstallation page in adblockplus.org

static/css/simple.css

+@font-face
+{
+  font-family: "Source Sans Pro";
+  src: url(/fonts/SourceSansPro-Light.woff);
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(/fonts/SourceSansPro-Light.woff) format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  src: url(/fonts/SourceSansPro-Regular.woff);
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(/fonts/SourceSansPro-Regular.woff) format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  src: url(/fonts/SourceSansPro-Semibold.woff);
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(/fonts/SourceSansPro-Semibold.woff) format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+body
+{
+  margin: 0px;
+  font-family: "Source Sans Pro";

[Thomas Greiner, 2015/11/27 19:10:14]

Please specify fallback fonts in case of issues. In the new options page we use
`"Source Sans Pro", sans-serif`.

[saroyanm, 2015/11/30 10:27:07]

Done.

+  font-weight: 600;
+  background-image: url(/img/background-dark.png);
+}
+
+header
+{
+  width: 100%;
+}
+
+a,
+a:link,
+a:visited
+{
+  color: #5a84b3;
+  text-decoration: underline;
+}
+
+a:hover
+{
+  text-decoration: none;
+}
+
+header h1
+{
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;

[Thomas Greiner, 2015/11/27 19:10:15]

I don't see a reason why any of those vendor prefixed versions should be
included. For now, this page will only be shown to Chrome users and even if we
decide to roll it out to other platforms, we no longer support any of the
platforms that requires a vendor prefix on this property.

[saroyanm, 2015/11/30 10:27:07]

Fare enough.

[Thomas Greiner, 2015/11/30 17:09:08]

Again: "we no longer support any of the
platforms that requires a vendor prefix on this property"

[saroyanm, 2015/11/30 18:04:44]

Hmm, for some reason I was thinking we should use -webkit, and -moz while this
is experimental technology :/ 
Done.

+  box-sizing: border-box;
+  border: dashed 1px #898989;
+  border-left: none;
+  border-right: none;
+  padding: 18px;
+  margin: 68px auto 20px auto;
+  max-width: 960px;
+  font-weight: 300;
+  font-size: 24px;
+  color: #7d7d7d;
+  text-align: center;
+}
+
+header:before

[Thomas Greiner, 2015/11/27 19:10:15]

Detail: Same as the comment above. This would only be relevant for IE8 but so
far there's no indication that IE8 users will land on this page anytime soon.
Therefore I'd suggest using the "newer" `::before` syntax.

[saroyanm, 2015/11/30 10:27:08]

Done.

+{
+  content: "";
+  display: block;
+  border-bottom: solid 1px #d0d0d0;
+  height: 92px;
+  background-image: url(/img/background.png);
+}
+
+#logo
+{
+  display: block;
+  position: absolute;
+  top: 42px;
+  left: 0px;
+  right: 0px;
+  margin: 0px auto;
+  margin-bottom: 20px;
+}
+
+#content
+{
+  margin: 0px auto;
+  max-width: 960px;
+}
+
+section
+{
+  padding: 20px 100px;
+  margin-bottom: 30px;
+}
+
+section.highlighted
+{
+  background-image: url(/img/background-blue.png);
+  color: #FFFFFF;
+}
+
+section.highlighted a
+{
+  color: #FFFFFF;
+}
+
+section h1
+{
+  margin: 0px;
+  padding: 20px 0px;
+  text-align: center;
+}
+
+section ul
+{
+  margin: 12px 0px 16px 0px;
+  padding: 0px;
+  list-style: none;
+}
+
+section li
+{
+  margin-bottom: 12px;
+}
+
+section li label
+{
+  -webkit-margin-end: 10px;
+  -moz-margin-end: 10px;
+}
+
+section li input
+{
+  vertical-align: middle;
+  -webkit-margin-end: 10px;
+  -moz-margin-end: 10px;
+}
+
+section li textarea
+{
+  display: block;
+  margin-top: 10px;
+  padding: 5px;
+  width: 250px;
+  height: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+section .subheader
+{
+  margin-top: 0px;
+  text-align: center;
+}
+
+section .error-label
+{
+  display: none;
+  color: #ffafaf;
+  margin: 0px 12px;
+}
+
+form button
+{
+  min-width: 138px;
+  height: 42px;
+  background-color: #37506d;
+  border: 0px;
+  cursor: pointer;
+  color: #ffffff;
+}
+
+form.error button
+{
+  border: solid 2px #ffafaf;
+}
+
+form.error .error-label
+{
+  display: inline-block;
+}
+
+form input[type="checkbox"]
+{
+  margin: 0px;
+}
+
+form input[type="checkbox"] + span

[Thomas Greiner, 2015/11/27 19:10:14]

I suppose that's a hack to avoid using `margin-end` on `input[type="checkbox"]`,
right?

[saroyanm, 2015/11/30 10:27:08]

Exactly, but do not have strong opinion, if we will use margin-end we can also
think about having textNode instead of span for alignment.

[Thomas Greiner, 2015/11/30 17:09:13]

That's what I'd suggest, yes, to try to apply styles to elements for which it
makes the most sense - especially if we can avoid introducing new elements for
the sole purpose of applying styles to them.

[saroyanm, 2015/11/30 18:04:44]

Just rethought about this question, while this is a page that probably will be
used for other pages and probably in future we will reuse this page for IE
users, does make sense to use styles that will be supported also for them.

[Thomas Greiner, 2015/12/02 16:41:04]

Let's not make our lives more complicated than necessary especially since we
don't know when or whether we'll show that page to IE users. Obviously, we
shouldn't use anything that we know will require significant changes to make
backwards-compatible but IE-support is not a requirement at this point.

[saroyanm, 2015/12/02 18:47:58]

Done.

+{
+  margin: 0px 10px;
+}
+
+.disclaimer
+{
+  margin: 14px 0px;
+  font-size: 14px;
+  color: #a9bdd5;
+}
+
+.hidden
+{
+  display: none;
+}
+
+footer
+{
+  margin: 0 auto 30px;
+  max-width: 960px;
+  text-align: center;
+}