Issue 5632 - Use checkboxes for toggling acceptable ads

skin/desktop-options.css

Index: skin/desktop-options.css
===================================================================
--- a/skin/desktop-options.css
+++ b/skin/desktop-options.css
@@ -95,6 +95,12 @@
   display: none !important;
 }
 
+[aria-disabled="true"]

[ire, 2017/10/18 17:48:45]

There's already a set of styles applied to disabled checkbox buttons below
(which is slightly different to what you have here)

You can extend that one by adding this selector to it.

The selector is `button[role="checkbox"][disabled]` (line 183)

[saroyanm, 2017/10/19 20:41:59]

Great idea, done.

+{
+  background-color: #BBB !important;
+  background-image: none !important;
+}
+
 input[type="text"],
 input[type="url"],
 textarea,
@@ -622,41 +628,33 @@
   Acceptable ads
  */
 
-#acceptable-ads
+#acceptable-ads ul
 {
-  background-color: #F3F3F3;
+  position: relative;
+  padding-left: 2rem;
+  list-style: none;
 }
 
-#acceptable-ads > div
+html[dir="rtl"] #acceptable-ads ul
 {
-  position: relative;
-  padding: 1.5rem;
-  padding-left: 3.3rem;
-  padding-right: 0.9rem;
-  border: 1px solid #CDCDCD;
-  border-width: 0px 1px 1px 1px;
+  padding-left: 0rem;
+  padding-right: 2rem;
 }
 
-#acceptable-ads > div:first-of-type
+#acceptable-ads button
 {
-  border-top: 1px solid #CDCDCD;
+  position: absolute;
+  margin-top: 0.3rem;
+  left: 0rem;
 }
 
-#acceptable-ads > div > p:last-of-type
+html[dir="rtl"] button
 {
-  margin-bottom: 0rem; 
+  left: auto;
+  right: 0rem;
 }
 
-#acceptable-ads > div input
-{
-  position: absolute;
-  left: 0rem;
-  margin: 0.25rem 0.9rem;
-  width: 1.3rem;
-  height: 1.3rem;
-}
-
-#acceptable-ads > div label
+#acceptable-ads label
 {
   font-weight: 700;
   font-size: 1.375rem;