Issue 5628 - Implement main styles

skin/new-options.css

Index: skin/new-options.css
===================================================================
--- a/skin/new-options.css
+++ b/skin/new-options.css
@@ -47,17 +47,17 @@
 
 html
 {
-  font-size: 20px;
+  font-size: 16px;
 }
 
 body
 {
-  background-color: #F5F5F5;
+  background-color: #F3F3F3;
   display: flex;
   margin: 1.2rem 0.3rem;
   font-family: "Source Sans Pro", sans-serif;
-  font-weight: 300;
-  font-size: 1rem;
+  font-weight: 400;

[juliandoucette, 2017/09/12 22:45:36]

NIT: I think 400 is the default across browsers.

[saroyanm, 2017/09/13 15:26:37]

Acknowledged.

[saroyanm, 2017/09/13 16:47:58]

Done.

+  font-size: 1.25rem;
   color: #494949;
 }
 
@@ -73,9 +73,20 @@
   font-weight: 700;
 }
 
-p
+a
 {
-  font-weight: 300;
+  color: #099CD0;
+  text-decoration: none;
+}
+
+a:hover
+{
+  color: #5CBCE1;
+}
+
+ul
+{
+  margin: 0rem;
 }
 
 [aria-hidden="true"]
@@ -99,7 +110,9 @@
 button,
 .button
 {
+  display: block;
   padding: 0.8rem 1.2rem;
+  background-color: transparent;
   font-size: 1.125rem;
   font-weight: 700;
   text-decoration: none;
@@ -112,13 +125,13 @@
 {
   border: 0px;
   color: #FFF;
-  background-color: #0A9DD1;
+  background-color: #099CD0;
 }
 
-button.primary:hover,
+button.primary:not([disabled]):hover,
 .button.primary:hover
 {
-  box-shadow: inset 0 0 0 2px #005D80;
+  box-shadow: inset 0 0 0 3px #005D80;
 }
 
 button.primary[disabled]
@@ -129,47 +142,138 @@
 button.secondary,
 .button.secondary
 {
-  border: 1px solid #0A9DD1;
+  border: 1px solid #099CD0;
   color: #099CD0;
 }
 
 button.secondary:hover,
 .button.secondary:hover
 {
-  box-shadow: inset 0 0 0 4px #099CD0;
+  box-shadow: inset 0 0 0 2px #099CD0;
 }
 
-button[role="checkbox"],
-#dialog-body .table button[role="checkbox"]
+button[role="checkbox"]
 {
   width: 18px;
   height: 18px;
-  margin-top: 0px;
-  -moz-margin-end: 20px;
-  -webkit-margin-end: 20px;
   padding: 0px;
   border: 0px;
   background-color: transparent;
   background-position: -51px 0px;
 }
 
-button[role="checkbox"][aria-checked="true"],
-#dialog-body .table button[role="checkbox"][aria-checked="true"]
+button[role="checkbox"][aria-checked="true"]:not(.toggle)
 {
   background-position: -68px 0px;
 }
 
+button[role="checkbox"][disabled]
+{
+  border-radius: 2px;
+  background-color: #ccc;
+}
+
+button[role="checkbox"].toggle
+{
+  background: url(icons/toggle.svg#on);
+}
+
+button[role="checkbox"][aria-checked="false"].toggle
+{
+  background: url(icons/toggle.svg#off);
+}
+
+button[role="checkbox"][aria-checked="true"].toggle
+{
+  background: url(icons/toggle.svg#on);
+}
+
+button[role="checkbox"].toggle
+{
+  background-position: initial;
+  width: 2.3rem;
+  height: 1.3rem;
+}
+
+button[role="checkbox"][disabled].toggle
+{
+  background-image: none;
+}
+
+button.delete::before
+{
+  -webkit-mask: url(icons/trash.svg);

[saroyanm, 2017/09/06 19:02:56]

Note: I'm using masks currently as it's the most quick and easy way to change
the color on different states. In general this will be changed and be consistent
with the implementation of the toggle.svg. See ->
https://bitbucket.org/adblockplus/spec/issues/73

[juliandoucette, 2017/09/12 22:45:38]

Acknowledged.

+  mask: url(icons/trash.svg);
+}
+
+button.gear::before
+{
+  -webkit-mask: url(icons/gear.svg);
+  mask: url(icons/gear.svg);
+}
+
+button.gear,

[juliandoucette, 2017/09/12 22:45:38]

NIT/Suggest: button.icon

[saroyanm, 2017/09/13 15:26:37]

We already specified .icon which loads png sprite, we will use common icon
styles after refactoring.

+button.delete
+{
+  border: 0px;
+  padding: 0px;
+  background-color: transparent;
+}
+
+button.gear::before,
+button.delete::before
+{
+  content: "";
+  display: block;
+  height: 1.9rem;
+  width: 1.9rem;
+  background-color: #099DD1;
+}
+
+button.gear:hover::before,
+button.delete:hover::before
+{
+  background-color: #5CBCE1;
+}
+
+button.gear:hover,
+button.delete:hover
+{
+  background-position: -61px -51px;
+}
+
+button.link,
+button.list
+{
+  color: #099CD0;
+}
+
 button.link
 {
   border: 0px;
   background-color: transparent;
   font-weight: 300;
   font-family: inherit;
-  color: #099CD0;
   text-transform: none;
   padding: 0.2rem;
 }
 
+button.list
+{
+  border-style: solid;;
+  border-color: #CDCDCD;
+  border-width: 0px 1px 1px 1px;
+  width: 100%;
+  background-color: #E1F2FA;
+  text-align: initial;
+}
+
+button.list:hover
+{
+  box-shadow: inset 0 0 0 3px #099CD0;
+  border-color: #099CD0;
+}
+
 /*
   Sidebar
  */
@@ -242,9 +346,9 @@
 [role="tablist"]
 {
   list-style: none;
-  margin: 0px;
+  margin: 0rem;
+  padding: 0rem;
   position: relative;
-  padding: 0px;
   font-size: 1.25rem;
 }
 
@@ -293,25 +397,9 @@
   margin: 1.2rem 0rem;
 }
 
-main
-{
-  background-color: #FFFFFF;
-  border: 1px solid #CDCDCD;
-  max-width: 46.3rem;
-  padding: 0px 2rem 1.4rem 2rem;
-}
-
-main > div
-{
-  display: none;
-}
-
-main h1
-{
-  border-bottom: 1px solid #CDCDCD;
-  margin: 0px 0px 24px 0px;
-  padding: 40px 0px 16px 0px;
-}
+/*
+  Main content
+ */
 
 body[data-tab|="general"] #content-general,
 body[data-tab|="advanced"] #content-advanced,
@@ -321,40 +409,199 @@
   display: block;
 }
 
-div.button
+main
 {
-  cursor: pointer;
+  background-color: #FFFFFF;
+  border: 1px solid #CDCDCD;
+  max-width: 46.3rem;
+  padding: 0px 0rem 1.4rem 0rem;
+}
+
+main > div

[juliandoucette, 2017/09/12 22:45:38]

NIT: This could use some explanation via comment (in the future)

+{
+  display: none;
+}
+
+main p
+{
+  margin: 0.8rem 0rem;
+}
+
+/*
+  Sections
+ */
+
+[role="tabpanel"] > section,
+[role="tabpanel"] > .section
+{
+  padding: 2rem;
+  border-top: 1px solid #CDCDCD;
+}
+
+[role="tabpanel"] > h1,

[juliandoucette, 2017/09/12 22:45:37]

Note: You would have to update these selectors accordingly if you wraped these
in a <header> like I suggested.

[saroyanm, 2017/09/13 15:26:36]

Acknowledged.

[saroyanm, 2017/09/13 16:47:59]

Done.

+[role="tabpanel"] > p
+{
+  padding: 0rem 2rem;
+  margin: 1.4rem 0rem;
+}
+
+section h2,
+.section h2
+{
+  margin: 0rem;
+}
+
+section,
+.section
+{
+  clear: both;
+}
+
+section.cols
+{
   display: flex;
 }
 
-.table
+section.cols > *:first-child
+{
+  flex: 1;
+  -moz-margin-end: 2rem;
+  -webkit-margin-end: 2rem;
+}
+
+section.cols > *:last-child
+{
+  flex: 3;
+}
+
+/*
+  Acceptable ads
+ */
+
+#acceptable-ads
+{
+  background-color: #F3F3F3;
+}
+
+#acceptable-ads > div
+{
+  position: relative;
+  padding: 1.5rem;
+  padding-left: 3.3rem;
+  padding-right: 0.9rem;
+  border: 1px solid #CDCDCD;
+  border-width: 0px 1px 1px 1px;
+}
+
+#acceptable-ads > div:first-of-type
+{
+  border-top: 1px solid #CDCDCD;
+}
+
+#acceptable-ads > div > p:last-of-type
+{
+  margin-bottom: 0rem; 
+}
+
+#acceptable-ads > div input
+{
+  position: absolute;
+  left: 0rem;
+  margin: 0.25rem 0.9rem;
+  width: 1.3rem;
+  height: 1.3rem;
+}
+
+#acceptable-ads > div label
+{
+  font-weight: 700;
+  font-size: 1.375rem;
+}
+
+#dnt
+{
+  padding: 0.8rem;
+  border: 1px solid #099CD0;
+}
+
+/*
+  Tables
+ */
+
+ul.table,

[juliandoucette, 2017/09/12 22:45:38]

Note: See related comment in new-options.html

[saroyanm, 2017/09/13 15:26:37]

See comment on the other file.

+ul.list
 {
   list-style: none;
-  margin: 0px;
-  padding: 0px;
-  position: relative;
+  margin: 0rem;
+  padding: 0rem;
+}
+
+.table li,
+.list li
+{
+  display: flex;
+  align-items: center;
 }
 
 .table li
 {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  border-radius: 3px;
+  margin: 0rem;
+  border-style: solid;
+  border-color: #CDCDCD;
+  border-width: 0px 1px 1px 1px;
 }
 
-.table.list
+.list li
 {
-  border-bottom: 1px solid #CDCDCD;
+  padding: 0rem;
+  margin: 0rem 0rem 1.3rem 0rem;
+}
+
+.table li:first-of-type
+{
+  border-top: 1px solid #CDCDCD;
+}
+
+.table.list li
+{
+  padding: 0.5rem 1.1rem;
+  margin: 0rem;
+}
+
+li .display
+{
+  margin: 0rem 1rem;
 }
 
 .table.list li .display
 {
   flex: 1;
-  line-height: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+}
+
+.table.list li.empty-placeholder

[juliandoucette, 2017/09/12 22:45:36]

I wasn't able to find this in the HTML. Does it only appear when some action is
taking place?

[saroyanm, 2017/09/13 15:26:37]

We are adding the placeholder when the table is empty

+{
+  padding: 1.3em 1.9em;
+}
+
+.table.list li.empty-placeholder:not(:last-of-type)
+{
+  border-bottom: 0px;
+}
+
+#blocking-languages-table .display

[juliandoucette, 2017/09/12 22:45:36]

NIT: Why the name "display"?

[saroyanm, 2017/09/13 15:26:37]

We might revisit if we will only use this for filter list titles.

+{
+  font-weight: 700;
+}
+
+.table.list button.link
+{
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.table.list button.link:hover

[juliandoucette, 2017/09/12 22:45:37]

NIT/Suggest: Make this less specific (button.link:hover) and move it up by
a:hover

[saroyanm, 2017/09/13 15:26:36]

Acknowledged.

[saroyanm, 2017/09/13 16:47:58]

Done.

+{
+  color: #5CBCE1;
 }
 
 .table:not(.list):not(.cols) li
@@ -363,11 +610,6 @@
   padding-bottom: 6px;
 }
 
-  .table li.empty-placeholder
-{
-  background-color: #F5F5F5;
-}
-
 .table li [data-single="visible"],
 .table li:first-of-type:last-of-type [data-single="hidden"]
 {
@@ -379,133 +621,155 @@
   display: block;
 }
 
-.table label
+.th
 {
-  vertical-align: top;
+  display: flex;
+}
+
+.col4 > *
+{
+  display: inline-block;
+}
+
+.col4
+{
+  margin: 0rem 0.9rem;
+}
+
+.th .col4:nth-of-type(1),
+.table .col4:nth-of-type(1)
+{
+  flex: 2;
+}
+
+.th .col4:nth-of-type(2),
+.table .col4:nth-of-type(2)
+{
+  flex: 3;
+}
+
+.th .col4:nth-of-type(3),
+.table .col4:nth-of-type(3)
+{
+  flex: 2;
+}
+
+.th .col4:nth-of-type(4),
+.table .col4:nth-of-type(4)
+{
+  flex: 1;
 }
 
 .table.cols
 {
-  border-bottom: 1px solid #CDCDCD;
-  border-top: 1px solid #CDCDCD;
+  font-size: 1.1rem;
 }
 
-button[role="checkbox"][disabled]
+.table.cols .display

[juliandoucette, 2017/09/12 22:45:36]

NIT: See comment above RE: display

 {
-  border-radius: 2px;
-  background-color: #ccc;
+  margin: 0rem;
 }
 
-.table button.delete
+.table.cols li
 {
-  background-color: transparent;
-  background-position: -50px -51px;
-  border: 0px;
-  height: 10px;
-  padding: 0px;
-  cursor: pointer;
-  width: 10px;
+  padding: 0.9rem 0rem;
 }
 
-.table button.delete:hover
+.table.cols .state
 {
-  background-position: -61px -51px;
+  -moz-margin-start: 1.1rem;

[juliandoucette, 2017/09/12 22:45:37]

NIT: Vendor prefixes? (applies elsewhere too)

[saroyanm, 2017/09/13 15:26:38]

This probably make sense to address separately as all the browsers we are
targeting in this review supporting them, but we should include the default
implementation without prefixes if one exists.

+  -webkit-margin-start: 1.1rem;
 }
 
-.icon,
-button[role="checkbox"],
-#dialog-body .table button[role="checkbox"],
-.table button.delete,
-#dialog-close::before,
-#all-filter-lists-table .arrow,
-.context-menu .content a::before
+.table.cols .gear

[juliandoucette, 2017/09/12 22:45:37]

NIT: This doesn't seem to make a difference in Firefox or Chrome?
NIT: It's unclear why this would apply to .gear and not .delete too?

[saroyanm, 2017/09/13 15:26:37]

I think this style need to be specific to the "icon" style in general which will
be addressed after getting rid of current PNG sprite.

+{
+  margin: 0rem 
+}
+
+#dialog .table.list li
+{
+  display: block;
+  border-width: 1px 0px 0px 0px;
+  padding: 0rem;
+}
+
+#dialog .table.list li:first-of-type
+{
+  border: 0px;
+}
+
+#dialog .table.list li button
+{
+  display: flex;
+  background-image: none;
+  width: 100%;
+  height: auto; 
+  padding: 1.1rem 1rem;
+}
+
+#dialog .table.list li button:hover,
+#dialog .table.list li button:focus
+{
+  background-color: #E1F2FA;
+}
+
+#dialog .table.list li button[aria-checked="true"]
+{
+  color: #BBB;
+}
+
+#dialog .table.list li button[aria-checked="true"]::before
+{
+  content: "";
+  width: 1.3rem;
+  height: 1.3rem;
+  background-color: #BBB;
+  -webkit-mask: url(icons/checkmark.svg);
+  mask: url(icons/checkmark.svg);
+  margin: 0rem;
+}
+
+#dialog .table.list li button .display

[juliandoucette, 2017/09/12 22:45:38]

NIT: See comment above about .display

+{
+  flex: none;
+  margin: 0rem 0.8rem;
+  text-transform: none;
+}
+
+/*
+  Tooltips
+*/
+
+.tooltip

[juliandoucette, 2017/09/12 22:45:38]

NIT: It's confusing that you call this tooltip. It's not the tooltip itself.

[saroyanm, 2017/09/13 15:26:38]

tooltip is within the the "tooltip" container, I'll address icon accessibility
separately.

+{
+  display: inline-block;
+  position: relative;
+  margin: 0rem;
+  -moz-margin-end: 1rem;
+  -webkit-margin-end: 1rem;
+  
+  line-height: 1.3rem;
+  text-decoration: none;

[juliandoucette, 2017/09/12 22:45:37]

NIT: I wasn't able to find where text-decoration: none was necessary

[saroyanm, 2017/09/13 15:26:37]

We probably have link inside of the tooltip.

+  cursor: default;

[juliandoucette, 2017/09/12 22:45:37]

NIT/Suggest: cursor: help (obviously)

[saroyanm, 2017/09/13 15:26:38]

We will revisit that separately after the style guide is updated regarding the
cursors.

+}
+
+.tooltip::before
+{
+  content: "";
+  width: 1.3rem;
+  height: 1.3rem;
+  display: block;
+  background-color: #099DD1;
+  -webkit-mask: url(icons/tooltip.svg);
+  mask: url(icons/tooltip.svg);
+}
+
+button[role="checkbox"]:not(.toggle)
 {
   background-image: url(options-sprite.png);
   display: inline-block;
 }
 
-.icon-add,
-.icon-update
-{
-  height: 16px;
-  width: 16px;
-  cursor: pointer;
-}
-
-.icon-add
-{
-  background-position: -1px -1px;
-}
-
-.icon-update
-{
-  background-position: -35px -1px;
-}
-
-.icon-enter
-{
-  height: 8px;
-  width: 8px;
-  cursor: pointer;
-}
-
-#dialog-close::before
-{
-  content: "";
-  height: 12px;
-  width: 12px;
-}
-
-#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;
-}
-
-.controls
-{
-  padding-top: 14px;
-  margin-left: 16px;
-  margin-right: 16px;
-}
-
-.controls.mode-edit
-{
-  -moz-margin-end: 0px;
-  -webkit-margin-end: 0px;
-}
-
-.controls > div
-{
-  display: flex;
-  position: relative;
-}
-
-.controls button,
-#dialog-close
-{
-  display: flex;
-  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
@@ -531,59 +795,6 @@
   border-bottom: none;
 }
 
-#blocking-languages,
-#acceptable-ads
-{
-  -moz-margin-end: 40px;
-  -webkit-margin-end: 40px;
-}
-
-#whitelisting .controls.mode-edit > button,
-#whitelisting .controls:not(.mode-edit) > div
-{
-  display: none;
-}
-
-#whitelisting .controls input[type="text"]
-{
-  border: 0px;
-  border-bottom: 1px solid #A1A1A1;
-  -moz-padding-end: 25px;
-  -webkit-padding-end: 25px;
-  -moz-margin-start: 14px;
-  -webkit-margin-start: 14px;
-  outline: 0px;
-  padding-bottom: 5px;
-  vertical-align: text-bottom;
-  width: 100%;
-}
-
-#whitelisting .controls .button-add span
-{
-  -moz-margin-start: 5px;
-  -webkit-margin-start: 5px;
-}
-
-#whitelisting .button-add
-{
-  -moz-margin-start: 32px;
-  -webkit-margin-start: 32px;
-}
-
-#whitelisting-add-button + span
-{
-  flex: 1;
-}
-
-.icon-enter
-{
-  background-position: -19px -33px;
-  position: absolute;
-  bottom: 9px;
-  -moz-margin-start: -20px;
-  -webkit-margin-start: -20px;
-}
-
 .button-add, .cancel-button
 {
   background-color: transparent;
@@ -593,6 +804,35 @@
 }
 
 /*
+  Whitelist tab
+ */
+
+#content-whitelist form
+{
+  display: flex;
+}
+
+#content-whitelist form input
+{
+  flex: 1;
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  border: 2px solid #099CD0;
+}
+
+#content-whitelist form button
+{
+  -moz-margin-start: 0.7rem;
+  -webkit-margin-start: 0.7rem;
+}
+
+#whitelisting-table li
+{
+  border-left: 0rem;
+  border-right: 0rem; 
+}
+
+/*
   Advanced tab content
 */
 
@@ -608,27 +848,6 @@
   display: none;
 }
 
-#all-filter-lists-table
-{
-  display: inline-block;
-}
-
-#all-filter-lists-table
-{
-  display: inline-block;
-}
-
-#all-filter-lists-table li > div
-{
-  display: flex;
-  width: 330px;
-}
-
-#all-filter-lists-table li span.display
-{
-  cursor: pointer;
-}
-
 #all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #state-active
 {
   display: inline;
@@ -639,118 +858,97 @@
   display: inline;
 }
 
-#all-filter-lists-table .controls
+#all-filter-lists-table
 {
-  padding-top: 0px;
-  border-top: none;
+  margin-bottom: 1.5rem;
 }
 
-#all-filter-lists-table .controls button
+#custom-filters-raw ~ button,

[juliandoucette, 2017/09/12 22:45:36]

NIT: Why not just #custom-filters button?

[saroyanm, 2017/09/13 15:26:37]

I'll wrap the buttons.

[saroyanm, 2017/09/13 16:47:58]

Done.

+#all-filter-lists-table ~ button
 {
-  margin-top: 14px;
+  margin: 0.8rem 0rem;
+  -moz-margin-start: auto;
+  -webkit-margin-start: auto;
 }
 
-#all-filter-lists-table .arrow
+#custom-filters h3

[juliandoucette, 2017/09/12 22:45:36]

NIT: It seems like this could fit into section h3, .section h3 above (or
something like it)

[saroyanm, 2017/09/13 15:26:37]

We need to target this specifically because of the table headings.

 {
-  width: 6px;
-  height: 4px;
-  background-position: -1px -54px;
-  cursor: pointer;
-}
-
-#all-filter-lists-table li:last-of-type a
-{
-  color: #3A7BA6;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-#all-filter-lists-table li:last-of-type > span:last-child
-{
-  -webkit-margin-start: auto;
-  -moz-margin-start: auto;
-}
-
-#custom-filters-raw-controls
-{
-  justify-content: space-between;
+  margin: 0rem;
 }
 
 #custom-filters-raw
 {
   width: 100%;
-  height: 100%;
-  padding: 2px 16px; 
+  height: 23.6rem;
+  padding: 0.8rem 1.3rem; 

[juliandoucette, 2017/09/12 22:45:37]

Note: I think the difference between x and y here is a styleguide bug (TBD
separately)

[saroyanm, 2017/09/13 15:26:36]

Style guide error.

+}
+
+#custom-filters-raw:focus
+{
+  outline: none;
+  border: 2px solid #099CD0;
+}
+
+#custom-filters-raw-controls

[juliandoucette, 2017/09/12 22:45:37]

NIT: Looks like you're missing some margin-top here.

[saroyanm, 2017/09/13 15:26:36]

Acknowledged.

[saroyanm, 2017/09/13 16:47:58]

Done.

+{
+  display: flex;
+  justify-content: flex-end;
+}
+
+#custom-filters-raw-controls button
+{
+  -moz-margin-start: 1rem;
+  -webkit-margin-start: 1rem;
+}
+
+#empty-custom-filters
+{
+  padding: 1.5rem;
+  border: 1px solid #CDCDCD;
 }
 
 /*
-  Tooltips
-*/
-
-.tooltip
-{
-  display: inline-block;
-  position: relative;
-  margin: 0px 4px;
-  border-bottom: dashed 1px;
-  height: 15px;
-  color: #3A7BA6;
-  font-size: 12px;
-  line-height: 19px;
-  text-decoration: none;
-  font-weight: 400;
-  cursor: default;
-}
+  Context menu
+ */
 
 li [role="menubar"]
 {
   position: relative;
 }
 
-.context-menu
+[role="tooltip"]
 {
-  display: inline-block;
-  position: relative;
-  border-bottom: none;
-}
-
-.context-menu a
-{
-  vertical-align: middle;
-  white-space: nowrap;
-  color: #FFF;
-}
-
-#content-advanced .tooltip
-{
-  -moz-margin-start: 8px;
-  -webkit-margin-start: 8px;
-}
-
-div[role="tooltip"]
-{
-  background-color: rgba(45, 45, 45, 0.95);
-  border-radius: 3px;
-  color: #FFF;
-  font-size: 14px;
-  font-weight: 400;
-  left: -20px;
-  line-height: 18px;
-  margin-top: 14px;
+  right: -1rem;
+  margin-top: 1rem;
   opacity: 1;
-  padding: 20px;
+  padding: 1.3rem;
   position: absolute;
   -webkit-transition: opacity 200ms ease-in-out 400ms,
     visibility 0ms linear 400ms;
   transition: opacity 200ms ease-in-out 400ms,
     visibility 0ms linear 400ms;
   visibility: visible;
-  width: 400px;
+  width: 15rem;

[juliandoucette, 2017/09/12 22:45:36]

NIT: It's not clear where this width comes from

[saroyanm, 2017/09/13 15:26:36]

eyepick

   z-index: 1;
 }
 
-.tooltip:not(:hover) > div[role="tooltip"],
-div[role="tooltip"]:hover
+html[dir="rtl"] [role="tooltip"]
+{
+  right: auto;
+  left: -1rem;
+}
+
+[role="tooltip"],
+.context-menu .content
+{
+  border: 1px solid #099CD0;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+}
+
+
+.tooltip:not(:hover) > [role="tooltip"],
+[role="tooltip"]:hover
 {
   visibility: hidden;
   opacity: 0;
@@ -758,146 +956,131 @@
   transition-delay: 0ms;
 }
 
-div[role="tooltip"]::before,
-div.context-menu::before
-{
-  background-image: url(options-sprite.png);
-  background-position: -8px -42px;
-  content: "";
-  height: 6px;
-  position: absolute;
-  top: -6px;
-  width: 14px;
-  left: 30px;
-}
-
-div.context-menu
+.context-menu
 {
   position: absolute;
-  top: 16px;
+  right: 3rem;
+  top: -3rem;
   z-index: 1;
   visibility: hidden;
 }
 
-div.context-menu::before
+html[dir="rtl"] .context-menu
 {
-  left: -4px;
+  right: auto;
+  left: 3rem;
 }
 
-html[dir="rtl"] div.context-menu::before
+.context-menu .content
 {
-  left: inherit;
-  right: -4px;
-}
-
-div.context-menu .content
-{
+  padding: 0rem;
   position: relative;
-  left: calc(-50% + 2px);
-  border-radius: 3px;
-  padding: 4px 10px;
-  background-color: rgba(45, 45, 45, 0.95);
   cursor: default;
 }
 
-html[dir="rtl"] div.context-menu .content
-{
-  left: inherit;
-  right: -50%;
-}
-
-li.show-context-menu div.context-menu
+li.show-context-menu .context-menu
 {
   visibility: visible;
 }
 
-div.context-menu > div a::before
+[role="tooltip"]::before,
+.context-menu::before
 {
   content: "";
-  -moz-margin-end: 8px;
-  -webkit-margin-end: 8px;
+  width: 0rem;
+  height: 0rem;
+  position: absolute;
 }
 
-div.context-menu > div a
+[role="tooltip"]::before
 {
-  display: block;
-  padding: 7px 4px;
-  border-bottom: 1px solid #CDCDCD;
-  text-decoration: none;
-  cursor: pointer;
-  vertical-align: middle;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;

[saroyanm, 2017/09/06 19:02:57]

Note: I used this solution until we will have asset for the "tooltip arrow", see
-> https://bitbucket.org/adblockplus/spec/issues/71 

Also we have another ticket where we will finalize and improve the accessibility
of Tooltips, see -> https://issues.adblockplus.org/ticket/5542

[juliandoucette, 2017/09/12 22:45:38]

Acknowledged.

+  border-bottom: 10px solid #099CD0;
+  top: -10px;
+  right: 15px;
 }
 
-div.context-menu > div a::before
+html[dir="rtl"] [role="tooltip"]::before
 {
-  vertical-align: middle;
-  height: 16px;
-  width: 16px;
+  right: auto;
+  left: 15px;
 }
 
-div.context-menu > div a:last-child
+.context-menu::before
 {
-  border: 0px;
+  border-left: 10px solid #099CD0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  top: 22px;
+  right: -0.5rem;
+}
+
+html[dir="rtl"] .context-menu::before
+{
+  border-left: 0rem;
+  border-right: 10px solid #099CD0;
+  right: auto;
+  left: -0.5rem;
+}
+
+.context-menu li[role="menuitem"]
+{
+  width: 12.2rem;
+  border: 0rem;
+  padding: 0rem;
+}
+
+.context-menu li[role="menuitem"] > *
+{
+  width: 100%;
+  display: flex;
+  border: 0rem;
+  padding: 1rem 0rem;
+  color: #099CD0;
+  font-size: 1.1rem;
+  font-weight: 400;
+  text-transform: none;
+}
+
+.context-menu li[role="menuitem"] > *:hover,
+.context-menu li[role="menuitem"] > *:focus
+{
+  background-color: #E1F2FA;
+  cursor: pointer;
+}
+
+.context-menu li[role="menuitem"] > *::before
+{
+  content: "";
+  height: 1.5rem;
+  width: 1.5rem;
+  background-color: #099DD1;
+  margin: 0rem 1.1rem;
 }
 
 .context-menu .update-subscription::before
 {
-  background-position: -38px -31px;
+  -webkit-mask: url(icons/reload.svg);
+  mask: url(icons/reload.svg);
 }
 
 .context-menu .website::before
 {
-  background-position: -33px -47px;
+  -webkit-mask: url(icons/globe.svg);
+  mask: url(icons/globe.svg);
 }
 
 .context-menu .source::before
 {
-  background-position: -53px -34px;
+  -webkit-mask: url(icons/code.svg);
+  mask: url(icons/code.svg);
 }
 
 .context-menu .delete::before
 {
-  background-position: -71px -34px;
-}
-
-div[role="tooltip"] img
-{
-  float: left;
-  height: 64px;
-  margin-top: -2px;
-  margin-bottom: 10px;
-  width: 64px;
-  -moz-margin-end: 10px;
-  -webkit-margin-end: 10px;
-}
-
-html[dir="rtl"] div[role="tooltip"] img
-{
-  float: right;
-}
-
-div[role="tooltip"] p
-{
-  font-weight: 400;
-  margin: 0px;
-}
-
-div[role="tooltip"] p:not(:first-of-type)
-{
-  margin-top: 18px;
-}
-
-div[role="tooltip"] .notes
-{
-  border-top: 1px solid #717171;
-  font-size: 12px;
-  margin-top: 14px;
-  padding-top: 14px;
-}
-
-div[role="tooltip"] .notes p
-{
-  font-weight: 300;
+  -webkit-mask: url(icons/trash.svg);
+  mask: url(icons/trash.svg);
 }
 
 /*
@@ -913,11 +1096,14 @@
 #social ul
 {
   list-style: none;
+  padding: 0px;
 }
 
 #social ul li
 {
   display: inline-block;
+  -moz-margin-end: 1rem;
+  -webkit-margin-end: 1rem;
 }
 
 #social ul li a
@@ -967,7 +1153,7 @@
   bottom: 0px;
   left: 0px;
   z-index: 2;
-  background-color: white;
+  background-color: #000;
   opacity: 0.7;
 }
 
@@ -983,61 +1169,105 @@
   left: 0px;
   right: 0px;
   z-index: 2;
-  width: 400px;
+  width: 50vw;
   margin: auto;
   border-radius: 3px;
-  border: 2px solid #4D9D4B;
   background-color: #FFFFFF;
 }
 
 #dialog header
 {
   display: flex;
-  min-height: 25px;
-  padding: 10px;
-  background-color: #4D9D4B;
+  padding: 0.7rem 1.5rem;
+  background-color: #099CD0;
 }
 
-#dialog-close
+#dialog header h3
 {
-  -moz-border-start: 1px solid #25612B;
-  -webkit-border-start: 1px solid #25612B;
-  color: #0F660F;
-  display: inline-block;
-  height: 20px;
-  font-size: 15px;
-  -moz-padding-start: 10px;
-  -webkit-padding-start: 10px;
+  margin: 0rem;
+  font-size: 1.375rem;
+  font-weight: 700;
 }
 
-#dialog-close::before
+#dialog-close,

[juliandoucette, 2017/09/12 22:45:38]

NIT/Suggest: This could have something in common with an .icon class.

+#hide-notification
 {
-  background-position: -10px -33px;
+  border: 0rem;
+  padding: 0rem;
+  margin: 0rem;
+  background-color: transparent;
   cursor: pointer;
-  height: 8px;
-  width: 8px;
-  vertical-align: middle;
-  -moz-margin-end: 6px;
-  -webkit-margin-end: 6px;
+}
+
+#dialog-close::before,

[juliandoucette, 2017/09/12 22:45:38]

NIT: Why you are adding this background image ::before the button instead of to
the button?

(The same applies elsewhere.)

[saroyanm, 2017/09/13 15:26:36]

Acknowledged. I'll address this separately.

+#hide-notification::after
+{
+  content: "";
+  display: block;
+  height: 1rem;
+  width: 1rem;
+  border: 0rem;
+  background-color: #FFF;
+  -webkit-mask: url(icons/delete.svg);
+  mask: url(icons/delete.svg);
+}
+
+#dialog-close:hover::before
+{
+  background-color: #000;
 }
 
 #dialog #dialog-body
 {
-  margin: 4px 24px;
+  max-height: 50vh;
+  overflow: auto;
 }
 
-#dialog h3,
+.dialog-content
+{
+  margin: 1rem 1.8rem;
+}
+
+#dialog-body button
+{
+  -moz-margin-start: auto;
+  -webkit-margin-start: auto;
+}
+
+[data-dialog="language-change"] .dialog-content,
+[data-dialog="language-add"] .dialog-content
+{
+  margin: 0rem;
+}
+
+[data-dialog="about"] .dialog-content
+{
+  text-align: center;
+}
+
+[data-dialog="about"] button
+{
+  margin: 1.5rem auto 1.8rem auto;
+}
+
+#abp-version
+{
+  margin-bottom: 2rem;
+}
+
 #dialog label
 {
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 0.9rem;
+  font-weight: 400;
   margin: 0px;
 }
 
 #dialog input[type="text"]
 {
-  font-size: 16px;
-  margin-top: 10px;
+  border-style: solid;;

[juliandoucette, 2017/09/12 22:45:36]

NIT: The default border-style is solid? And you have two ";" here.

[saroyanm, 2017/09/13 15:26:36]

Acknowledged.

[saroyanm, 2017/09/13 16:47:58]

Done.

+  border-color: #CDCDCD;
+  border-width: 0px 0px 1px 0px;
+  font-size: 1.3rem;
   padding: 5px;
   width: 100%;
 }
@@ -1054,8 +1284,6 @@
 
 #dialog-title
 {
-  -moz-margin-start: 16px;
-  -webkit-margin-start: 16px;
   flex: 1;
   font-size: 16px;
   color: #FFFFFF;
@@ -1116,23 +1344,12 @@
 
 #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