Issue 5482 - Sidebar and about ABP dialog

skin/new-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
- * Copyright (C) 2006-2017 eyeo GmbH
+ * Copyright (C) 2006-present 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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
@@ skipping 17 matching lines @@
   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);
+  src: url(fonts/SourceSansPro-bold.woff);
   /* local("Ø") forces using no local font called Source Sans Pro */
-  src: local("Ø"), url(fonts/SourceSansPro-Semibold.woff) format("woff");
-  font-weight: 600;
+  src: local("Ø"), url(fonts/SourceSansPro-bold.woff) format("woff");
+  font-weight: 700;
   font-style: normal;
+}
+
+html
+{
+  font-size: 20px;
 }
 
 body
 {
   background-color: #F5F5F5;
   display: flex;
-  margin: 1.2em 0.3em;
+  margin: 1.2rem 0.3rem;
   font-family: "Source Sans Pro", sans-serif;
-  font-size: 20px;
   font-weight: 300;

[juliandoucette, 2017/08/21 14:10:35]

This thin body font requires aliasing and is hard to read at this size;
especially at lowDPI. 

[saroyanm, 2017/08/21 15:20:22]

As mentioned, on other file, styleguide enhancements, suggestions should be part
of bitbucket repository.

This review reflects the styleguide on top of old implementation.

[juliandoucette, 2017/08/21 16:07:25]

I can't find "300" or "thin" in the styleguide or spec anywhere?

It just says "Regular" (which is normally 400)?

[saroyanm, 2017/08/21 16:46:13]

Yes, it's using same fonts value assignment as Acceptable Ads.
So yes it's missing in styleguide, but Jeen wanted to have same fonts and
probably enhancements here should reflect enhancements also on our
websites/products.

But I agree we need to have for that case separate global styles to adjust to.

[juliandoucette, 2017/08/22 10:10:44]

Acknowledged.

I think it's worth bringing up.

+  font-size: 1rem;
   color: #494949;
 }
 
 h1
 {
-  font-size: 3em;
+  font-size: 3rem;
   font-weight: 300;
 }
 
 h2
 {
-  font-size: 1.375em;
-  font-weight: 600;
+  font-size: 1.375rem;
+  font-weight: 700;
+}
+
+p
+{
+  font-weight: 300;
 }
 
 [aria-hidden="true"]
 {
   display: none !important;
 }
 
 input[type="text"],
 textarea,
 main
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 /*
   Buttons and links
  */
 
-a,
-button.link
-{
-  text-decoration: none;
-  color: #099CD0;
-  font-size: 1.25em;

[juliandoucette, 2017/08/21 14:10:34]

It seem strange to make anchors slightly larger than body text :/

[saroyanm, 2017/08/21 15:20:23]

I agree, this is not what styleguide says.

[juliandoucette, 2017/08/21 16:07:25]

I can't tell if you are saying that you or the styleguide made a mistake. I
can't find it specified in the spec or styleguide that link text should be
larger.

[saroyanm, 2017/08/21 16:46:13]

I'm saying that I'll fix that, style guide specify 1.25em on Body, while I
specify 20px, I probably need to specify 20px on HTML and use 1.25em on body.

[juliandoucette, 2017/08/22 10:10:44]

Acknowledged.

[saroyanm, 2017/08/23 13:35:45]

Neverming I was wrong, I shouldn't style <a> here, this is sidebar
button/button.link specific style. Also additional adjustments of the section
will be done here -> https://issues.adblockplus.org/ticket/5543

-  cursor: pointer;
-}
-
-button.link
-{
-  border:none;

[juliandoucette, 2017/08/21 14:10:34]

NIT: Missing space, + I thought we agreed on border: 0?

[saroyanm, 2017/08/21 15:20:22]

Good point.

[saroyanm, 2017/08/23 13:35:45]

Done.

-  background-color: transparent;
-  font-weight: 300;
-  font-family: inherit;
-}
-
-button.primary,

[juliandoucette, 2017/08/21 14:10:34]

These seem like styles that should apply to button, .button without .primary and
.secondary?

[saroyanm, 2017/08/21 15:20:23]

It, can but in that case we should reset some styles that my apply to .link and
other buttons in general, in case of other buttons we should do that separately
according to their reviews.
I agree with you that we should make this styles more generic as they looks more
like new options page specific default buttons style.

[juliandoucette, 2017/08/21 16:07:25]

Do button on other parts of this page or in other reviews function differently?
Or do you just want to address general button styles in a separate review?
It looks like general button styles are being addressed here.

[saroyanm, 2017/08/21 16:46:13]

Yes, they look, but if change here will break them we will fix in separate
review as we anyway gonna revisit them, so long story short: I'll update this
implementation in next patch.

[juliandoucette, 2017/08/22 10:10:44]

Acknowledged.

[saroyanm, 2017/08/23 13:35:46]

Done.

-button.secondary,
-.button.primary,
-.button.secondary
-{
-  padding: 0.8em 1.2em;
-  font-size: 1.125em;
-  font-weight: 600;
+button,
+.button
+{
+  padding: 0.8rem 1.2rem;
+  font-size: 1.125rem;
+  font-weight: 700;
   text-decoration: none;
   text-transform: uppercase;
+  cursor: pointer;
 }
 
 button.primary,
 .button.primary
 {
-  border: none;
+  border: 0px;
   color: #FFF;
   background-color: #0A9DD1;
-  cursor: pointer;

[juliandoucette, 2017/08/21 14:10:34]

I think this is redundant?

[saroyanm, 2017/08/21 15:20:22]

Why ?

[juliandoucette, 2017/08/21 16:07:25]

I was mistaken; sorry. I thought that this style was unnecessary because a,
button.link applied it.

Anyway, shouldn't this (cursor:pointer) be part of button.primary AND
button.secondary above then? (Adapted accordingly if you change the above style
based on my comments.)

[saroyanm, 2017/08/21 16:46:13]

Yes, I think it should.

[saroyanm, 2017/08/23 13:35:45]

Done.

 }
 
 button.primary:hover,
 .button.primary:hover
 {
   box-shadow: inset 0 0 0 2px #005D80;
 }
 
 button.primary[disabled]
 {
   background-color: #5CBCE1;
 }
 
 button.secondary,
 .button.secondary
 {
   border: 1px solid #0A9DD1;
   color: #099CD0;
 }
 
 button.secondary:hover,
 .button.secondary:hover
 {
-  box-shadow: inset 0 0 0 1px #099CD0;
+  box-shadow: inset 0 0 0 4px #099CD0;
 }
 
 button[role="checkbox"],
 #dialog-body .table button[role="checkbox"]
 {
   width: 18px;
   height: 18px;
   margin-top: 0px;
   -moz-margin-end: 20px;
   -webkit-margin-end: 20px;
   padding: 0px;
-  border: none;
+  border: 0px;
   background-color: transparent;
   background-position: -51px 0px;
 }
 
 button[role="checkbox"][aria-checked="true"],
 #dialog-body .table button[role="checkbox"][aria-checked="true"]
 {
   background-position: -68px 0px;
+}
+
+button.link
+{
+  border: 0px;
+  background-color: transparent;
+  font-weight: 300;
+  font-family: inherit;
+  color: #099CD0;
+  text-transform: none;
+  padding: 0.2rem;
 }
 
 /*
   Sidebar
  */
 
 #sidebar,
 #sidebar .fixed,
 [role="tablist"]
 {
-  width: 13.2em;
+  width: 13.2rem;
 }
 
 #sidebar
 {
   flex-shrink: 0; 
 }
 
 #sidebar .fixed
 {
-  top: 1.2em;
-  bottom: 0em;
+  top: 1.2rem;
+  bottom: 0rem;
   height: auto;
   position: fixed;
 }
 
 #sidebar header
 {
   text-align: right;
-  margin-right: 2em;
+  margin-right: 2rem;
 }
 
 html[dir="rtl"] #sidebar header
 {
-  margin-left: 2em;
+  margin-left: 2rem;
 }
 
 #sidebar header h1
 {
-  margin: 0em;
-  font-size: 1.2em;
-}
-
-#sidebar header h2
-{
-  margin: 0em;
-  font-size: 2.2em;
-  font-weight: 300;
+  margin: 0rem;
+  font-size: 1.5rem;
+}
+
+#sidebar header h1 strong
+{
+  font-weight: 700;
+}
+
+#sidebar header p
+{
+  margin: 0rem;
+  font-size: 2.4rem;
 }
 
 html[dir="rtl"] #sidebar header
 {
   text-align: left;
 }
 
 #sidebar-logo
 {
-  width: 3em;
-  margin-bottom: 0.9em;
+  width: 3rem;
+  margin-bottom: 0.7rem;
 }
 
 #sidebar nav,
 #sidebar footer
 {
-  margin: 1.4em 0em;
+  margin: 1.4rem 0rem;
 }
 
 [role="tablist"]
 {
   list-style: none;
   margin: 0px;
   position: relative;
   padding: 0px;
-}
-
-[role="tablist"] li
+  font-size: 1.25rem;
+}
+
+[role="tablist"] li a
 {
   display: flex;
   margin-top: -1px;
-  padding: 1em 0px;
+  padding: 1rem 0.8rem;
   -moz-margin-end: -1px;
   -webkit-margin-end: -1px;
   -moz-margin-start: -1px;
   -webkit-margin-start: -1px;
   border-color: #CDCDCD transparent;
   border-style: solid;
   border-width: 1px;
-  font-weight: 300;
-  cursor: pointer;
-}
-
-[role="tablist"] li a
-{
-  flex: 1;
+  text-decoration: none;
   color: inherit;
-}
-
-[role="tablist"] li a,
-[role="tablist"] li span,
-[role="tablist"] li::after
-{
-  margin: 0em 0.8em;
-}
-
-[role="tablist"] li[role="tab"]:focus,
-[role="tablist"] li[role="tab"] a:focus
+  cursor: pointer;
+}
+
+[role="tablist"] a[role="tab"]:focus
 {
   outline: none;
   text-shadow: 0px 0px 1px #888;
 }
 
-li[role="tab"][aria-selected]
+li a[role="tab"][aria-selected]
 {
   -moz-border-start-color: #CDCDCD;
   -webkit-border-start-color: #CDCDCD;
-  font-weight: 600;
+  font-weight: 700;
   background-color: #FFF;
 }
 
 #sidebar footer
 {
   bottom: 0px;
   position: absolute;
   width: 100%;
 }
 
 #sidebar footer p
 {
   display: flex;
   justify-content: center;
-  margin: 1.2em 0em;
+  margin: 1.2rem 0rem;
 }
 
 main
 {
   background-color: #FFFFFF;
   border: 1px solid #CDCDCD;
-  border-radius: 8px;
-  max-width: 46.3em;
-  padding: 0px 2em 1.4em 2em;
+  max-width: 46.3rem;
+  padding: 0px 2rem 1.4rem 2rem;
 }
 
 main > div
 {
   display: none;
 }
 
 main h1
 {
   border-bottom: 1px solid #CDCDCD;
@@ skipping 49 matching lines @@
 {
   padding-top: 0px;
   padding-bottom: 6px;
 }
 
   .table li.empty-placeholder
 {
   background-color: #F5F5F5;
 }
 
-.table li [data-single='visible'],
-.table li:first-child:nth-last-child(2) [data-single='hidden']
+.table li [data-single="visible"],
+.table li:first-of-type:last-of-type [data-single="hidden"]
 {
   display: none;
 }
 
-.table li:first-child:nth-last-child(2) [data-single='visible']
+.table li:first-of-type:last-of-type [data-single="visible"]
 {
   display: block;
 }
 
 .table label
 {
   vertical-align: top;
 }
 
 .table.cols
@@ skipping 21 matching lines @@
 
 .table button.delete:hover
 {
   background-position: -61px -51px;
 }
 
 .icon,
 button[role="checkbox"],
 #dialog-body .table button[role="checkbox"],
 .table button.delete,
-#content-help a::before,
 #dialog-close::before,
 #all-filter-lists-table .arrow,
 .context-menu .content a::before
 {
   background-image: url(options-sprite.png);
   display: inline-block;
 }
 
 .icon-add,
 .icon-update
@@ skipping 20 matching lines @@
   cursor: pointer;
 }
 
 #dialog-close::before
 {
   content: "";
   height: 12px;
   width: 12px;
 }
 
-#content-help a::before
+#dialog-body button::before
 {
   background-position: 0px -42px;
   content: "";
   cursor: pointer;
   height: 11px;
   vertical-align: middle;
   width: 7px;
   -moz-margin-end: 12px;
   -webkit-margin-end: 12px;
 }
@@ skipping 14 matching lines @@
 .controls > div
 {
   display: flex;
   position: relative;
 }
 
 .controls button,
 #dialog-close
 {
   display: flex;
-  border: none;
+  border: 0px;
   padding: 0px;
   align-items: center;
   background: none;
   cursor: pointer;
 }
 
 .controls button span:not(.icon)
 {
   -moz-margin-start: 16px;
   -webkit-margin-start: 16px;
   color: #3A7BA6;
   vertical-align: top;
+}
+
+/* 
+  Used for translatable screen reader only conten.
+  e.g.: Use instead of aria-label to avoid complex attribute value translation
+*/
+.sr-only
+{
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0px;
+  border: 0px;
 }
 
 /*
   General tab content
 */
 
 #blocking-languages-dialog-table
 {
   border-bottom: none;
 }
@@ skipping 63 matching lines @@
   Advanced tab content
 */
 
 #all-filter-lists-table li.show-message .last-update,
 #all-filter-lists-table li:not(.show-message) .message,
 #custom-filters:not([data-mode="empty"]) #empty-custom-filters,
 #custom-filters[data-mode="empty"] #custom-filters-raw,
 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,
 #custom-filters:not([data-mode="read"]) #custom-filters-edit,
 .state span,
-#acceptable-ads:not(.show-dnt-notification) #no-dnt
+#acceptable-ads:not(.show-dnt-notification) #dnt
 {
   display: none;
 }
 
 #all-filter-lists-table
 {
   display: inline-block;
 }
 
 #all-filter-lists-table
@@ skipping 213 matching lines @@
 
 div.context-menu > div a::before
 {
   vertical-align: middle;
   height: 16px;
   width: 16px;
 }
 
 div.context-menu > div a:last-child
 {
-  border: none;
+  border: 0px;
 }
 
 .context-menu .update-subscription::before
 {
   background-position: -38px -31px;
 }
 
 .context-menu .website::before
 {
   background-position: -33px -47px;
@@ skipping 46 matching lines @@
 
 div[role="tooltip"] .notes p
 {
   font-weight: 300;
 }
 
 /*
   Help tab content
 */
 
-#content-help
-{
-  counter-reset: section;
-}
-
-#content-help h1::before
-{
-  counter-increment: section;
-  content: counter(section) ". ";
-}
-
-#content-help a
-{
-  color: #3A7BA6;
+html:not([lang="zh"]) #social-chinese,
+html[lang="zh"] #social-general
+{
+  display: none;
+}
+
+#social ul
+{
+  list-style: none;
+}
+
+#social ul li
+{
   display: inline-block;
-  text-decoration: none;
-  -moz-margin-end: 16px;
-  -webkit-margin-end: 16px;
-  vertical-align: top;
-}
-
-#content-help a::before
-{
-  -moz-margin-end: 6px;
-  -webkit-margin-end: 6px;
-}
-
-#share-general:lang(zh),
-#share-chinese:not(zh)
-{
-  display: none;
+}
+
+#social ul li a
+{
+  display: block;
+  text-align: center;
+}
+
+#social ul li a::before
+{
+  display: block;
+  margin: 0em auto;
+  width: 2.5rem;
+  height: 2.5rem;
+  content: "";
+  background-color: #099DD1;
+}
+
+#twitter::before
+{
+  -webkit-mask: url("social/twitter.svg");
+  mask: url("social/twitter.svg");
+}
+
+#facebook::before
+{
+  -webkit-mask: url("social/facebook.svg");
+  mask: url("social/facebook.svg");
+}
+
+#google-plus::before
+{
+  -webkit-mask: url("social/googleplus.svg");
+  mask: url("social/googleplus.svg");
 }
 
 /*
   Dialog
 */
 
 #dialog-background
 {
   display: none;
   position: fixed;
@@ skipping 106 matching lines @@
   margin-top: 10px;
   margin-bottom: 20px;
   word-wrap: break-word;
 }
 
 body:not([data-dialog="about"]) #dialog-title-about,
 body:not([data-dialog="about"]) #dialog-content-about,
 body:not([data-dialog="custom"]) #dialog-title-custom,
 body:not([data-dialog="custom"]) #dialog-content-custom,
 body:not([data-dialog="language-add"]) #dialog-title-language-add,
-body:not([data-dialog="language-add"]) #dialog-content-language-add,
 body:not([data-dialog="language-change"]) #dialog-title-language-change,
-body:not([data-dialog="language-change"]) #dialog-content-language-change,
+body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dialog-content-language-add,
+body:not([data-dialog="language-add"]) #dialog-body button.add,
+body:not([data-dialog="language-change"]) #dialog-body button.change,
 body:not([data-dialog="predefined"]) #dialog-title-predefined,
 body:not([data-dialog="predefined"]) #dialog-content-predefined,
 body:not([data-dialog]) #dialog
 {
   display: none;
 }
+
+/*
+  Notification
+*/
+
+#notification
+{
+  position: fixed;
+  top: 0rem;
+  left: 0rem;
+  display: flex;
+  padding: 1rem 1.9rem;
+  width: 100%;
+  box-sizing: border-box;
+  opacity: 0.8;
+  font-size: 1rem;
+  color: #099CD0;
+  background-color: #E1F2FA;
+}
+
+#notification strong
+{
+  flex: 1;
+  text-align: center;
+}
+
+#hide-notification
+{
+  border: 0rem;
+  padding: 0rem;
+  margin: 0rem 1rem;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+#hide-notification::after
+{
+  content: "";
+  display: block;
+  height: 1rem;
+  width: 1rem;
+  border: 0rem;
+  background-color: #099DD1;
+  -webkit-mask: url(delete.svg);
+  mask: url(delete.svg);
+}
+
+#hide-notification:hover::after
+{
+  background-color: #5CBCE1;
+}