Issue 5632 - Use checkboxes for toggling acceptable ads

skin/desktop-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * 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
@@ skipping 77 matching lines @@
 ul
 {
   margin: 0rem;
 }
 
 [aria-hidden="true"]
 {
   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,
 main
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ skipping 507 matching lines @@
 
 section.cols > *:last-child
 {
   flex: 3;
 }
 
 /*
   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;
 }
 
 #dnt
 {
   padding: 0.8rem;
   border: 1px solid #099CD0;
 }
@@ skipping 783 matching lines @@
 
 #hide-notification::after
 {
   background-color: #099DD1;
 }
 
 #hide-notification:hover::after
 {
   background-color: #5CBCE1;
 }