Issue 5538 - Implement "Help" tab for new options page

skin/new-options.css

Index: skin/new-options.css
===================================================================
--- a/skin/new-options.css
+++ b/skin/new-options.css
@@ -425,7 +425,6 @@
 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
@@ -466,7 +465,7 @@
   width: 12px;
 }
 
-#content-help a::before
+#dialog-body button::before
 {
   background-position: 0px -42px;
   content: "";
@@ -898,37 +897,54 @@
   Help tab content
 */
 
-#content-help
+html:not([lang="zh"]) #social-chinese,
+html[lang="zh"] #social-general

[ire, 2017/08/25 08:52:50]

NIT: We don't need the `html` part of this selector

[saroyanm, 2017/08/25 10:54:37]

I don't have strong opinion, but I think it makes more readable considering the
:not selector before.

[ire, 2017/08/25 11:55:54]

Okay, leave it as it is then.

 {
-  counter-reset: section;
+  display: none;
 }
 
-#content-help h1::before
+#social ul
 {
-  counter-increment: section;
-  content: counter(section) ". ";
+  list-style: none;
 }
 
-#content-help a
+#social ul li
 {
-  color: #3A7BA6;
   display: inline-block;
-  text-decoration: none;
-  -moz-margin-end: 16px;
-  -webkit-margin-end: 16px;
-  vertical-align: top;
 }
 
-#content-help a::before
+#social ul li a
 {
-  -moz-margin-end: 6px;
-  -webkit-margin-end: 6px;
+  display: block;
+  text-align: center

[ire, 2017/08/25 08:52:50]

Missing semi-colon

[saroyanm, 2017/08/25 10:54:37]

Done.

 }
 
-#share-general:lang(zh),
-#share-chinese:not(zh)
+#social ul li a::before
 {
-  display: none;
+  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");
 }
 
 /*