convert options and bug reporter to chromey checkboxes

chrome/browser/resources/shared/css/chrome_shared.css

 /* Styles common to WebUI pages that share the options pages style */
 body {
   cursor: default;
   font-size: 13px;
 }
 
 a:link {
   color: rgb(63, 110, 194);
 }
 
@@ skipping 107 matching lines @@
   position: relative;
 }
 
 #page-container {
   box-sizing: border-box;
   max-width: 888px;
   min-width: 600px;
   padding: 0 24px;
 }
 
-div.checkbox,
-div.radio {
-  margin: 5px 0;
-  color: #444;
-}
-
 div.disabled {
   color: #888;
 }
 
 /* TEXT */
 input[type='password'],
 input[type='text'],
 input[type='url'],
 input:not([type]) {
   -webkit-border-radius: 2px;
   border: 1px solid #aaa;
   font-size: inherit;
   padding: 3px;
 }
 
+input[type='text']:disabled {
+  color: #888;
+}
+
 /* CHECKBOX, RADIO */
 /* TODO(estade): all of this should be merged into checkbox.css and then we can
  * remove the print-preview hack. */
-html:not(#print-preview) input[type=checkbox],
-html:not(#print-preview) input[type=radio] {
-  margin-left: 0;
-  margin-right: 0;
-  position: relative;
-  top: 1px;
+div.checkbox,
+div.radio {
+  margin: 5px 0;
 }
 
-/* Checkbox and radio buttons have different sizes on different platforms. The
- * following rules have platform specific tweaks.
- * TODO(arv): Test the vertical position on Linux and CrOS as well.
- */
-html:not(#print-preview) label > input[type=checkbox],
-html:not(#print-preview) label > input[type=radio] {
-  opacity: 0.7;
-  margin-top: 1px;
-}
-
-html[os=mac]:not(#print-preview) label > input[type=checkbox],
-html[os=mac]:not(#print-preview) label > input[type=radio] {
-  margin-top: 2px;
-}
-
-html[os=chromeos]:not(#print-preview) label > input[type=checkbox],
-html[os=chromeos]:not(#print-preview) label > input[type=radio] {
-  top: 2px;
-}
-
-/* Checkbox and radio hover visuals.
- * Their appearance when checked is set to be the same.
- */
-label:hover:not(#print-preview) > input[type=checkbox]:not([disabled]),
-label:hover:not(#print-preview) > input[type=radio]:not([disabled]),
-label:not(#print-preview) > input:not([disabled]):checked {
-  opacity: 1;
-}
-
-label:hover:not(#print-preview) > input[type=checkbox]:not([disabled]) ~ span,
-label:hover:not(#print-preview) > input[type=radio]:not([disabled]) ~ span,
-label:not(#print-preview) > input:not([disabled]):checked ~ span {
-  color: #222;
-}
-
-/* This will 'disable' the label associated with any input whose next sibling is
- * the span containing the label (usually a checkbox or radio).
- */
-label:not(#print-preview) > input[disabled] ~ span {
-  color: #888;
+input[type=radio] ~ span,
+input[type=checkbox] ~ span {
+  color: #444;
 }
 
 /* Elements that need to be LTR even in an RTL context, but should align
  * right. (Namely, URLs, search engine names, etc.)
  */
 html[dir='rtl'] .weakrtl {
   direction: ltr;
   text-align: right;
 }
 
 /* Input fields in search engine table need to be weak-rtl. Since those input
  * fields are generated for all cr.ListItem elements (and we only want weakrtl
  * on some), the class needs to be on the enclosing div.
  */
 html[dir='rtl'] div.weakrtl input {
-    direction: ltr;
-    text-align: right;
+  direction: ltr;
+  text-align: right;
 }
 
 html[dir='rtl'] .favicon-cell.weakrtl {
   -webkit-padding-end: 22px;
   -webkit-padding-start: 0;
 }
 
 /* weakrtl for selection drop downs needs to account for the fact that
  * Webkit does not honor the text-align attribute for the select element.
  * (See Webkit bug #40216)
@@ skipping 20 matching lines @@
   -webkit-user-select: none;
   border-bottom: 1px solid #eeeeee;
   color: #53637d;
   font-size: 200%;
   font-weight: normal;
   margin: 0;
   padding-bottom: 4px;
   padding-top: 13px;
   text-shadow: white 0 1px 2px;
 }