From 7339643ec38d036cd259799f004aa82c6d1a4743 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Mon, 4 Dec 2017 02:40:22 +0300
Subject: [PATCH] Custom checkbox and select elements

---
 edit.html                           | 116 +++++++++++------
 edit/beautify.js                    |  15 ++-
 edit/edit.css                       | 168 +++++++++++++++++++------
 install-usercss.html                |  10 ++
 install-usercss/install-usercss.css |  56 ++++++++-
 manage.html                         | 137 +++++++++++++++-----
 manage/manage.css                   | 186 +++++++++++++++++++++++++---
 popup.html                          |  24 ++--
 popup/popup.css                     |  84 +++++--------
 9 files changed, 608 insertions(+), 188 deletions(-)

diff --git a/edit.html b/edit.html
index ef364bf9..9010800e 100644
--- a/edit.html
+++ b/edit.html
@@ -74,12 +74,15 @@
 
     <template data-id="appliesTo">
       <li>
-        <select name="applies-type" class="applies-type style-contributor">
-          <option value="url" i18n-text="appliesUrlOption"></option>
-          <option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>
-          <option value="domain" i18n-text="appliesDomainOption"></option>
-          <option value="regexp" i18n-text="appliesRegexpOption"></option>
-        </select>
+        <div class="select-resizer">
+          <select name="applies-type" class="applies-type style-contributor">
+            <option value="url" i18n-text="appliesUrlOption"></option>
+            <option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>
+            <option value="domain" i18n-text="appliesDomainOption"></option>
+            <option value="regexp" i18n-text="appliesRegexpOption"></option>
+          </select>
+          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        </div>
         <input name="applies-value" class="applies-value style-contributor" spellcheck="false">
         <button class="remove-applies-to" i18n-text="appliesRemove"></button>
         <button class="add-applies-to" i18n-text="appliesAdd"></button>
@@ -179,8 +182,10 @@
           <a id="url" target="_blank"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
         </div>
         <div id="basic-info-enabled">
-          <input type="checkbox" id="enabled" class="style-contributor">
-          <label for="enabled" id="enabled-label" i18n-text="styleEnabledLabel"></label><!--
+          <label id="enabled-label" i18n-text="styleEnabledLabel">
+            <input type="checkbox" id="enabled" class="style-contributor">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label><!--
           --><svg id="toggle-style-help" class="svg-icon info">
             <use xlink:href="#svg-icon-help"/>
           </svg>
@@ -201,30 +206,40 @@
       <details id="options" data-pref="editor.options.expanded">
         <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
         <div class="option">
-          <input id="editor.lineWrapping" type="checkbox">
-          <label id="lineWrapping-label" for="editor.lineWrapping" i18n-text="cm_lineWrapping"></label>
+          <label id="lineWrapping-label" i18n-text="cm_lineWrapping">
+            <input id="editor.lineWrapping" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
         </div>
         <div class="option">
-          <input id="editor.smartIndent" type="checkbox">
-          <label id="smartIndent-label" for="editor.smartIndent" i18n-text="cm_smartIndent"></label>
+          <label id="smartIndent-label" i18n-text="cm_smartIndent">
+            <input id="editor.smartIndent" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
         </div>
         <div class="option">
-          <input id="editor.indentWithTabs" type="checkbox">
-          <label id="indentWithTabs-label" for="editor.indentWithTabs" i18n-text="cm_indentWithTabs"></label>
+          <label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
+            <input id="editor.indentWithTabs" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
         </div>
         <div class="option">
-          <input id="editor.autoCloseBrackets" type="checkbox">
-          <label for="editor.autoCloseBrackets"
-                 i18n-text="cm_autoCloseBrackets"
-                 i18n-title="cm_autoCloseBracketsTooltip"></label>
+          <label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
+            <input id="editor.autoCloseBrackets" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
         </div>
         <div class="option">
-          <input id="editor.autocompleteOnTyping" type="checkbox">
-          <label for="editor.autocompleteOnTyping" i18n-text="cm_autocompleteOnTyping"></label>
+          <label i18n-text="cm_autocompleteOnTyping">
+            <input id="editor.autocompleteOnTyping" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
         </div>
         <div class="option">
-          <input id="editor.colorpicker" type="checkbox">
-          <label for="editor.colorpicker" i18n-text="cm_colorpicker"></label>
+          <label i18n-text="cm_colorpicker">
+            <input id="editor.colorpicker" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
           <span class="svg-inline-wrapper" i18n-title="shortcutsNote">
             <svg id="colorpicker-settings" class="svg-icon settings">
               <use xlink:href="#svg-icon-settings"/>
@@ -232,10 +247,10 @@
           </span>
         </div>
         <div class="option usercss-only">
-          <input id="editor.appliesToLineWidget" type="checkbox">
-          <label for="editor.appliesToLineWidget"
-                 i18n-text="appliesLineWidgetLabel"
-                 i18n-title="appliesLineWidgetWarning"></label>
+          <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
+            <input id="editor.appliesToLineWidget" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
         </div>
         <div class="option aligned">
           <label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
@@ -243,30 +258,42 @@
         </div>
         <div class="option aligned">
           <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
-          <select id="editor.keyMap"></select>
+          <div class="select-resizer">
+            <select id="editor.keyMap"></select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
           <span class="svg-inline-wrapper">
             <svg id="keyMap-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
           </span>
         </div>
         <div class="option aligned">
           <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
-          <select id="editor.theme"></select>
+          <div class="select-resizer">
+            <select id="editor.theme"></select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
         </div>
         <div class="option aligned">
           <label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
-          <select id="editor.matchHighlight">
-            <option i18n-text="cm_matchHighlightToken" value="token">
-            <option i18n-text="cm_matchHighlightSelection" value="selection">
-            <option i18n-text="genericDisabledLabel" value="">
-          </select>
+          <div class="select-resizer">
+            <select id="editor.matchHighlight">
+              <option i18n-text="cm_matchHighlightToken" value="token">
+              <option i18n-text="cm_matchHighlightSelection" value="selection">
+              <option i18n-text="genericDisabledLabel" value="">
+            </select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
         </div>
         <div class="option aligned">
           <label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
-          <select id="editor.linter">
-            <option value="csslint" selected>CSSLint</option>
-            <option value="stylelint">Stylelint</option>
-            <option value="" i18n-text="genericDisabledLabel"></option>
-          </select>
+            <div class="select-resizer">
+              <select id="editor.linter">
+                <option value="csslint" selected>CSSLint</option>
+                <option value="stylelint">Stylelint</option>
+                <option value="" i18n-text="genericDisabledLabel"></option>
+              </select>
+              <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+            </div>
           <span class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
             <svg id="linter-settings" class="svg-icon settings">
               <use xlink:href="#svg-icon-settings"/>
@@ -299,18 +326,31 @@
     </div>
 
     <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+
       <symbol id="svg-icon-external-link" viewBox="0 0 8 8">
         <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
       </symbol>
+
       <symbol id="svg-icon-help" viewBox="0 0 14 16" i18n-alt="helpAlt">
         <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
       </symbol>
+
       <symbol id="svg-icon-close" viewBox="0 0 12 16">
         <path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path>
       </symbol>
+
       <symbol id="svg-icon-settings" viewBox="0 0 16 16">
         <path d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
       </symbol>
+
+      <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
+        <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+      </symbol>
+
+      <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
+        <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
+      </symbol>
+
     </svg>
 
   </body>
diff --git a/edit/beautify.js b/edit/beautify.js
index c3dd0723..8563acdb 100644
--- a/edit/beautify.js
+++ b/edit/beautify.js
@@ -87,10 +87,17 @@ function beautify(event) {
       const value = options[optionName];
       return '<div newline="' + value.toString() + '">' +
         '<span' + (indent ? ' indent' : '') + '>' + label + '</span>' +
-        '<select data-option="' + optionName + '">' +
-          '<option' + (value ? '' : ' selected') + '>&nbsp;</option>' +
-          '<option' + (value ? ' selected' : '') + '>\\n</option>' +
-        '</select></div>';
+        '<div class="select-resizer">' +
+          '<select data-option="' + optionName + '">' +
+            '<option' + (value ? '' : ' selected') + '>&nbsp;</option>' +
+            '<option' + (value ? ' selected' : '') + '>\\n</option>' +
+          '</select>' +
+          '<svg class="svg-icon select-arrow" viewBox="0 0 1792 1792">' +
+            '<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 ' +
+              '19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>' +
+          '</svg>' +
+        '</div>' +
+      '</div>';
     }
   }
 }
diff --git a/edit/edit.css b/edit/edit.css
index 4a892adb..9e5d23ff 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -27,6 +27,103 @@ body {
   display: none !important;
 }
 
+/************ checkbox & select************/
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  height: 22px;
+  background-color: transparent;
+  border: 1px solid hsl(0, 0%, 66%);
+  padding: 0 20px 0 6px;
+  transition: color .5s;
+}
+
+.firefox select {
+  padding: 0 20px 0 2px;
+}
+
+.select-resizer {
+  display: inline-flex!important;
+  cursor: default;
+  position: relative;
+}
+
+.svg-icon.select-arrow {
+  pointer-events: none;
+  cursor: default;
+  display: inline-flex;
+  height: 14px;
+  width: 14px;
+  fill: #000;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  transition: fill .5s;
+}
+
+#options > div[class="option"] {
+  margin-bottom: 4px;
+}
+
+#basic-info-enabled {
+  margin-top: 2px;
+}
+
+.svg-icon.checked {
+  position: absolute;
+  height: 8px;
+  width: 8px;
+  display: none;
+  fill: #000;
+  margin: 2px 0 0 2px;
+}
+
+input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
+  display: inline-flex;
+  transition: fill .25s;
+}
+
+input[type="checkbox"]:not(.slider) {
+  position: absolute;
+  left: 0;
+  top: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  pointer-events: none;
+  border: 1px solid hsl(0, 0%, 46%);
+  height: 12px;
+  width: 12px;
+  display: inline-flex;
+  border-radius: 2px;
+  background-color: hsl(0, 0%, 94%);
+  outline: none;
+  margin: 0;
+  transition: background-color .25s, border-color .25s;
+}
+
+input[type="checkbox"]:not(.slider):checked:hover {
+  border-color: hsl(0, 0%, 32%);
+  background-color: hsl(0, 0%, 82%);
+}
+
+input[type="checkbox"]:not(.slider):hover {
+  border-color: hsl(0, 0%, 32%);
+  background-color: hsl(0, 0%, 82%);
+}
+
+input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+label {
+  padding-left: 16px;
+  position: relative;
+  transition: color .25s;
+}
+
 /************ header ************/
 #header {
   width: 280px;
@@ -54,16 +151,17 @@ body {
   margin-left: 1.7rem;
 }
 .aligned {
-  display: table-row;
+  display: flex;
+  margin-bottom: 4px;
 }
-.aligned > *:not(.svg-inline-wrapper) {
-  display: table-cell;
-  margin-top: 0.1rem;
-  min-height: 1.4rem;
+#options .option:nth-last-of-type(5) {
+  margin-top: 10px;
 }
-input[type="checkbox"] {
-  margin-left: 0.1rem;
+.aligned > * {
+  display: inline-flex;
+  align-items: center;
 }
+
 /* basic info */
 #basic-info {
   margin-bottom: 1rem;
@@ -136,14 +234,21 @@ input:invalid {
   margin-left: -13px;
   cursor: pointer;
   outline: none;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
+
 #header summary h2 {
   display: inline-block;
   border-bottom: 1px dotted transparent;
+  margin-top: .1em;
+  margin-bottom: .1em;
 }
-#header summary h2:hover {
+
+#header summary:hover h2 {
   border-color: #bbb;
 }
+
 #header summary svg {
   margin-top: -3px;
 }
@@ -159,8 +264,9 @@ input:invalid {
   text-align: left;
   padding-left: .25em;
 }
-#options .option.aligned > * {
-  padding-right: 0.25rem;
+#options .option.aligned > label {
+  padding: 0 0.25rem 0 0;
+  width: 60px;
 }
 .set-option-progress {
   position: absolute;
@@ -306,7 +412,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   align-items: center;
   margin-bottom: 0.35rem;
 }
-.applies-to li > *:not(button) {
+.applies-to li > *:not(button):not(.select-resizer) {
   flex: auto;
   min-height: 1.4rem;
   margin-left: 0.35rem;
@@ -331,7 +437,6 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 .test-regexp {
   display: none;
 }
-.single-editor .test-regexp,
 .has-regexp .test-regexp {
   display: inline-block;
 }
@@ -385,12 +490,6 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   margin-left: -20px;
   margin-top: -1px;
 }
-.regexp-report-note {
-  font-size: 90%;
-  margin: 1em 1em .5em;
-  color: #999;
-}
-
 /************ help popup ************/
 #help-popup {
   top: 3rem;
@@ -532,18 +631,24 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 
 /************ CSS beautifier ************/
 .beautify-options {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 180px;
+  padding-left: 6px;
   white-space: nowrap;
   font-family: monospace;
 }
-.beautify-options div {
-  float: left;
-}
-.beautify-options div[newline="true"] + div {
-  clear: left;
-}
 .beautify-options div[newline="true"] + div span[indent] {
   padding-left: 2rem;
 }
+.beautify-options > label {
+  margin: 6px 0;
+}
+
+.beautify-options + div {
+  padding-left: 6px;
+}
 .beautify-options:after {
   clear: both;
   display: block;
@@ -552,6 +657,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 }
 .beautify-options span {
   font-weight: bold;
+  display: inline-flex;
 }
 .beautify-options select {
   border: none;
@@ -617,15 +723,11 @@ html:not(.usercss) .usercss-only,
   margin-top: 0.35rem;
 }
 
-.CodeMirror-linewidget .applies-to li:not([data-type="regexp"]) .test-regexp {
+.CodeMirror-linewidget .applies-to li:not([data-type="regexp"]) .applies-to-regexp-test {
   display: none;
 }
 
-.CodeMirror-linewidget li .add-applies-to {
-  visibility: visible;
-}
-
-.CodeMirror-linewidget .applies-to-everything {
+.CodeMirror-linewidget li.applies-to-everything {
   margin-top: 0.2rem;
 }
 
@@ -682,12 +784,6 @@ html:not(.usercss) .usercss-only,
   #options h2 {
     margin: 0 0 .5em;
   }
-  #options .aligned > *:not(.svg-inline-wrapper) {
-    margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */
-    padding-right: 0.4rem;
-    vertical-align: baseline;
-    min-height: 1.4rem;
-  }
   .option label {
     line-height: 1.25rem;
     margin: 0;
diff --git a/install-usercss.html b/install-usercss.html
index 89b6f123..35a3f884 100644
--- a/install-usercss.html
+++ b/install-usercss.html
@@ -61,10 +61,12 @@
         <button class="install" i18n-text="installButton"></button>
         <label class="set-update-url">
           <input type="checkbox">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           <span></span>
         </label>
         <label class="live-reload">
           <input type="checkbox">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           <span i18n-text="liveReloadLabel"></span>
         </label>
       </div>
@@ -86,6 +88,14 @@
       <div class="warnings"></div>
     </div>
   </div>
+
   <script src="/install-usercss/install-usercss.js"></script>
+
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
+    <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
+      <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
+    </symbol>
+  </svg>
+
 </body>
 </html>
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index db94718b..63e0a2e3 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -79,7 +79,6 @@ input:disabled + span {
   font-weight: bold;
   font-size: 125%;
   margin-bottom: 1em;
-  white-space: pre-wrap;
 }
 
 .warning pre {
@@ -240,6 +239,61 @@ li {
   user-select: auto;
 }
 
+/************ checkbox ************/
+.svg-icon.checked {
+  position: absolute;
+  height: 8px;
+  width: 8px;
+  display: none;
+  fill: #000;
+  margin: 2px 0 0 2px;
+}
+
+input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
+  display: inline-flex;
+  transition: fill .25s;
+}
+
+input[type="checkbox"]:not(.slider) {
+  position: absolute;
+  left: 0;
+  top: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  pointer-events: none;
+  border: 1px solid hsl(0, 0%, 46%);
+  height: 12px;
+  width: 12px;
+  display: inline-flex;
+  border-radius: 2px;
+  background-color: hsl(0, 0%, 94%);
+  outline: none;
+  margin: 0;
+  transition: background-color .25s, border-color .25s;
+}
+
+input[type="checkbox"]:not(.slider):checked:hover {
+  border-color: hsl(0, 0%, 32%);
+  background-color: hsl(0, 0%, 82%);
+}
+
+input[type="checkbox"]:not(.slider):hover {
+  border-color: hsl(0, 0%, 32%);
+  background-color: hsl(0, 0%, 82%);
+}
+
+input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+label {
+  padding-left: 16px;
+  position: relative;
+  transition: color .25s;
+}
 /* spinner: https://github.com/loadingio/css-spinner */
 
 @keyframes lds-spinner {
diff --git a/manage.html b/manage.html
index cd0e04a5..d660ea4c 100644
--- a/manage.html
+++ b/manage.html
@@ -54,7 +54,10 @@
   <template data-id="styleCompact">
     <div class="entry">
       <h2 class="style-name">
+      <div class="checkmate">
         <input class="checker" type="checkbox" i18n-title="toggleStyle">
+        <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+      </div>
         <a class="style-name-link"></a>
       </h2>
       <p class="actions">
@@ -156,50 +159,91 @@
 </head>
 
 <body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
+
 <div id="header">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
+
   <fieldset>
+
     <legend id="filters">
       <span i18n-text="manageFilters"></span><span id="filters-stats"></span>
     </legend>
-    <label>
-      <input id="manage.onlyEnabled" type="checkbox"
-             data-filter=".enabled"
-             data-filter-hide=".disabled">
-      <select id="manage.onlyEnabled.invert">
-        <option i18n-text="manageOnlyEnabled" value="false"></option>
-        <option i18n-text="manageOnlyDisabled" value="true"></option>
-      </select>
-    </label>
-    <label>
-      <input id="manage.onlyLocal" type="checkbox"
-             data-filter=":not(.updatable):not(.update-done)"
-             data-filter-hide=".updatable, .update-done">
-      <select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
-        <option i18n-text="manageOnlyLocal" value="false"></option>
-        <option i18n-text="manageOnlyExternal" value="true"></option>
-      </select>
-    </label>
-    <label>
-      <input id="manage.onlyUsercss" type="checkbox"
-             data-filter=".usercss"
-             data-filter-hide=":not(.usercss)">
-      <select id="manage.onlyUsercss.invert">
-        <option i18n-text="manageOnlyUsercss" value="false"></option>
-        <option i18n-text="manageOnlyNonUsercss" value="true"></option>
-      </select>
-    </label>
+
+    <div class="filter-selection">
+      <label>
+        <div class="checkmate">
+          <input id="manage.onlyEnabled" type="checkbox"
+                 data-filter=".enabled"
+                 data-filter-hide=".disabled">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+        </div>
+      </label>
+      <div class="select-resizer">
+        <select id="manage.onlyEnabled.invert">
+          <option i18n-text="manageOnlyEnabled" value="false"></option>
+          <option i18n-text="manageOnlyDisabled" value="true"></option>
+        </select>
+        <svg class="svg-icon select-arrow" viewBox="0 0 1792 1792">
+          <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="filter-selection">
+      <label>
+        <div class="checkmate">
+          <input id="manage.onlyLocal" type="checkbox"
+                 data-filter=":not(.updatable):not(.update-done)"
+                 data-filter-hide=".updatable, .update-done">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+        </div>
+      </label>
+      <div class="select-resizer">
+        <select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
+          <option i18n-text="manageOnlyLocal" value="false"></option>
+          <option i18n-text="manageOnlyExternal" value="true"></option>
+        </select>
+        <svg class="svg-icon select-arrow" viewBox="0 0 1792 1792">
+          <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="filter-selection">
+      <label>
+        <div class="checkmate">
+          <input id="manage.onlyUsercss" type="checkbox"
+                 data-filter=".usercss"
+                 data-filter-hide=":not(.usercss)">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+        </div>
+      </label>
+      <div class="select-resizer">
+        <select id="manage.onlyUsercss.invert">
+          <option i18n-text="manageOnlyUsercss" value="false"></option>
+          <option i18n-text="manageOnlyNonUsercss" value="true"></option>
+        </select>
+        <svg class="svg-icon select-arrow" viewBox="0 0 1792 1792">
+          <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+        </svg>
+      </div>
+    </div>
+
     <label id="onlyUpdates" class="hidden">
       <input type="checkbox"
              data-filter=".can-update, .update-problem, .update-done"
              data-filter-hide=":not(.updatable):not(.update-done), .no-update:not(.update-problem)">
+      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
       <span i18n-text="manageOnlyUpdates"></span>
     </label>
+
     <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
            i18n-title="searchStylesTooltip"
            data-filter=":not(.not-matching)"
            data-filter-hide=".not-matching">
+
   </fieldset>
+
   <p class="nowrap">
     <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
     <span id="update-history" i18n-title="genericHistoryLabel">
@@ -208,17 +252,20 @@
       </svg>
     </span>
   </p>
+
   <p>
     <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
     <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
     <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
   </p>
+
   <p>
     <a href="edit.html">
       <button id="add-style-label" i18n-text="addStyleLabel"></button>
     </a>
     <label id="newStyleAsUsercss-wrapper" class="nobreak">
       <input type="checkbox" id="newStyleAsUsercss">
+      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
       <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
       <a id="usercss-wiki"
          href="https://github.com/openstyles/stylus/wiki/Usercss"
@@ -229,25 +276,38 @@
       </a>
     </label>
   </p>
+
   <details id="options" data-pref="manage.options.expanded">
+
     <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
-    <label><input id="manage.newUI" type="checkbox"><span i18n-text="manageNewUI"></span></label>
+
+    <label>
+      <input id="manage.newUI" type="checkbox">
+      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+      <span i18n-text="manageNewUI"></span>
+    </label>
+
     <div id="newUIoptions">
       <div>
-        <input id="manage.newUI.favicons" type="checkbox">
-        <label for="manage.newUI.favicons" i18n-text="manageFavicons"></label>
+        <label for="manage.newUI.favicons" i18n-text="manageFavicons">
+          <input id="manage.newUI.favicons" type="checkbox">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+        </label>
         <svg class="svg-icon info" viewBox="0 0 14 16" i18n-alt="helpAlt" data-toggle-on-click="#faviconsHelp">
           <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
         </svg>
         <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
           <div>
-            <input id="manage.newUI.faviconsGray" type="checkbox">
-            <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray"></label>
+            <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
+              <input id="manage.newUI.faviconsGray" type="checkbox">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            </label>
           </div>
         </div>
       </div>
-      <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
+     <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
+
     <p>
       <button id="manage-options-button" i18n-text="openOptionsManage"></button>
       <button id="manage-shortcuts-button" class="chromium-only"
@@ -258,7 +318,9 @@
          i18n-title="editorStylesButton"
          target="_blank"><button i18n-text="cm_theme"></button></a>
     </p>
+
   </details>
+
   <div id="backup">
     <h2 id="backup-title" i18n-text="backupButtons"></h2>
     <span id="backup-message" i18n-text="backupMessage"></span>
@@ -267,13 +329,22 @@
       <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
     </p>
   </div>
+
   <p id="manage-text" i18n-html="manageText"></p>
+
 </div>
+
 <div id="installed"></div>
 
 <script src="manage/import-export.js"></script>
 <script src="msgbox/msgbox.js"></script>
 <script src="manage/incremental-search.js" async></script>
 
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
+  <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
+    <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
+  </symbol>
+</svg>
+
 </body>
 </html>
diff --git a/manage/manage.css b/manage/manage.css
index 951aef59..602f2a35 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -270,16 +270,17 @@ label.nobreak input {
   margin-left: -13px;
   cursor: pointer;
   outline: none;
+  margin-bottom: 8px;
 }
 
 #header summary h2 {
   display: inline-block;
   border-bottom: 1px dotted transparent;
-  margin-top: .2em;
-  margin-bottom: .4em;
+  margin-top: .1em;
+  margin-bottom: .1em;
 }
 
-#header summary h2:hover {
+#header summary:hover h2 {
   border-color: #bbb;
 }
 
@@ -287,6 +288,7 @@ label.nobreak input {
 
 .newUI #installed {
   display: table;
+  table-layout: fixed;
   margin-top: .75rem;
   margin-bottom: .75rem;
 }
@@ -309,11 +311,167 @@ label.nobreak input {
   display: table-cell;
   vertical-align: middle;
 }
+/************ checkbox & select************/
 
 .newUI .checker {
+  margin: 0;
+}
+
+#newUIoptions > div {
+  margin: 4px 0;
+}
+
+.filter-selection {
   position: relative;
-  top: 1px;
-  margin: 0 1ex 0 0;
+}
+
+#header label {
+  padding-left: 16px;
+  position: relative;
+}
+
+#header .filter-selection label {
+  display: flex;
+  align-items: center;
+  height: 18px;
+  width: 100%;
+  padding: 0 0 0 4px;
+}
+
+#header .filter-selection label .checkmate {
+  vertical-align: middle;
+  margin-top: -2px;
+}
+
+.firefox #header .filter-selection label .checkmate {
+  margin: 0;
+}
+
+.newUI #newUIoptions > label {
+  padding-left: 0;
+}
+
+.filter-selection select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  height: 18px;
+  outline: none;
+  background-color: transparent;
+  border: none;
+  max-width: 100%;
+  padding-right: 14px;
+  transition: color .5s
+}
+
+.select-resizer {
+  cursor: default;
+  border: none;
+  max-width: calc(100% - 2em);
+  position: absolute;
+  top: 0;
+  left: 20px;
+}
+
+.firefox .select-resizer {
+  left: 16px;
+}
+
+.svg-icon.select-arrow {
+  pointer-events: none;
+  cursor: default;
+  display: inline-flex;
+  margin-top: 2px;
+  height: 14px;
+  width: 14px;
+  fill: #000;
+  position: absolute;
+  top: 0;
+  right: 0;
+  transition: fill .5s;
+}
+
+fieldset > label,
+fieldset > .filter-selection {
+  transition: background-color .25s;
+}
+
+fieldset > label:hover,
+fieldset > .filter-selection:hover {
+  background-color: hsla(0, 0%, 50%, .2);
+}
+
+.checkmate {
+  position: relative;
+  height: 12px;
+  width: 12px;
+  display: inline-flex;
+}
+
+.entry .checkmate {
+  vertical-align: middle;
+  margin: -2px 1ex 0 0;
+}
+
+.svg-icon.checked {
+  position: absolute;
+  height: 8px;
+  width: 8px;
+  display: none;
+  fill: #000;
+  margin: 2px 0 0 2px;
+}
+
+.newUI .entry .svg-icon.checked,
+.newUI .entry:hover .svg-icon.checked {
+  fill: #000;
+}
+
+.newUI .entry input[type="checkbox"]:not(.slider) {
+  pointer-events: all;
+}
+
+input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
+  display: inline-flex;
+  transition: fill .25s;
+}
+
+input[type="checkbox"]:not(.slider) {
+  position: absolute;
+  left: 0;
+  top: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  pointer-events: none;
+  border: 1px solid hsl(0, 0%, 46%);
+  height: 12px;
+  width: 12px;
+  display: inline-flex;
+  border-radius: 2px;
+  background-color: hsl(0, 0%, 94%);
+  outline: none;
+  margin: 0;
+  transition: background-color .25s, border-color .25s;
+}
+
+input[type="checkbox"]:not(.slider):checked:hover {
+  border-color: hsl(0, 0%, 32%);
+  background-color: hsl(0, 0%, 82%);
+}
+
+input[type="checkbox"]:not(.slider):hover {
+  border-color: hsl(0, 0%, 32%);
+  background-color: hsl(0, 0%, 82%);
+}
+
+input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+label {
+  transition: color .25s;
 }
 
 .newUI .style-name {
@@ -658,13 +816,19 @@ fieldset {
   max-width: 250px;
 }
 
-fieldset > *:not(legend) {
+fieldset > input,
+fieldset > label {
   display: flex;
   align-items: center;
 }
 
-fieldset > label:hover {
-  background-color: hsla(0, 0%, 50%, .1);
+#header fieldset > label {
+  padding-left: 20px;
+}
+
+#header fieldset > label input[type="checkbox"]:not(.slider),
+#header fieldset > label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{
+  left: 4px;
 }
 
 #filters {
@@ -685,12 +849,6 @@ fieldset > label:hover {
   content: ": ";
 }
 
-fieldset select {
-  border: none;
-  max-width: calc(100% - 2em);
-  background-color: transparent;
-}
-
 #search {
   width: calc(100% - 4px);
   margin: 0.25rem 4px 0;
diff --git a/popup.html b/popup.html
index 5e02bfb6..2796bbf1 100644
--- a/popup.html
+++ b/popup.html
@@ -25,11 +25,9 @@
     <div class="entry">
       <div class="main-controls">
         <label class="style-name">
-        <input class="checker" type="checkbox">
-        <svg class="svg-icon checked" viewBox="0 0 1000 1000">
-          <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
-        </svg>
-		</label>
+          <input class="checker" type="checkbox">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+        </label>
       </div>
       <div class="actions">
         <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
@@ -111,11 +109,10 @@
   <div class="actions">
     <div id="disable-all-wrapper">
       <div class="main-controls">
-        <input id="disableAll" type="checkbox">
-        <svg class="svg-icon checked" viewBox="0 0 1000 1000">
-          <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
-        </svg>
-        <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
+        <label id="disableAll-label" i18n-text="disableAllStyles">
+          <input id="disableAll" type="checkbox">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+        </label>
       </div>
     </div>
     <div class="main-controls">
@@ -137,5 +134,12 @@
               i18n-title="shortcutsNote"></button>
     </div>
   </div>
+
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
+    <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
+      <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
+    </symbol>
+  </svg>
+
 </body>
 </html>
diff --git a/popup/popup.css b/popup/popup.css
index b9e6f2a0..79959b21 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -22,29 +22,9 @@ body > div:not(#installed) {
 .firefox .chromium-only {
   display: none;
 }
+/************ checkbox ************/
 
-/* there's a bug in FF 52 ESR so until we find a better workaround we won't style checkboxes in FF */
-html.moz-appearance-bug .svg-icon.checked {
-  display: none;
-}
-
-html.moz-appearance-bug input[type="checkbox"] {
-  position: absolute;
-  left: 8px;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-}
-
-html.moz-appearance-bug #disableAll {
-  left: -1px;
-}
-
-html.moz-appearance-bug #disableAll-label {
-  padding-left: 16px !important;
-}
-
-html:not(.moz-appearance-bug) .svg-icon.checked {
+.svg-icon.checked {
   position: absolute;
   height: 8px;
   width: 8px;
@@ -53,12 +33,12 @@ html:not(.moz-appearance-bug) .svg-icon.checked {
   margin: 2px 0 0 2px;
 }
 
-html:not(.moz-appearance-bug) input[type="checkbox"]:checked + .svg-icon.checked {
+input[type="checkbox"]:checked + .svg-icon.checked {
   display: inline-flex;
   transition: fill .25s;
 }
 
-html:not(.moz-appearance-bug) input[type="checkbox"] {
+input[type="checkbox"] {
   -moz-appearance: none;
   -webkit-appearance: none;
   border: 1px solid hsl(0, 0%, 46%);
@@ -72,60 +52,60 @@ html:not(.moz-appearance-bug) input[type="checkbox"] {
   transition: background-color .25s, border-color .25s;
 }
 
-html:not(.moz-appearance-bug) input[type="checkbox"]:checked:hover,
-html:not(.moz-appearance-bug) .style-name:hover input[type="checkbox"]:checked {
+input[type="checkbox"]:checked:hover,
+.style-name:hover input[type="checkbox"]:checked {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
 
-html:not(.moz-appearance-bug) input[type="checkbox"]:hover,
-html:not(.moz-appearance-bug) .style-name:hover input[type="checkbox"],
-html:not(.moz-appearance-bug) .entry.disabled .style-name:hover input[type="checkbox"] {
+input[type="checkbox"]:hover,
+.style-name:hover input[type="checkbox"] {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
 
-html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
+#disable-all-wrapper input[type="checkbox"]:not(.slider),
+#disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
   fill: hsl(0, 68%, 42%);
 }
 
-html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked {
+#installed.disabled + .actions #disableAll:checked {
   border-color: hsl(0, 68%, 50%);
 }
 
-html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
+#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
   fill: #fff;
 }
 
-html:not(.moz-appearance-bug) #disableAll:hover {
+#disableAll:hover {
   border-color: hsl(0, 68%, 50%);
   background-color: hsl(20, 70%, 75%);
 }
 
-html:not(.moz-appearance-bug) #disableAll:hover + .svg-icon + label {
+#disableAll-label:hover {
   color: hsl(0, 68%, 42%);
 }
 
-html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked:hover {
+#installed.disabled + .actions #disableAll:checked:hover {
   border-color: hsl(0, 50%, 56%);
   background-color: hsl(0, 50%, 56%);
 }
 
-html:not(.moz-appearance-bug) .style-name .checker,
-html:not(.moz-appearance-bug) .style-name .svg-icon.checked {
+.style-name .checker,
+.style-name .svg-icon.checked {
   position: absolute;
   top: 7px;
   left: 9px;
   pointer-events: none;
 }
 
-html:not(.moz-appearance-bug) #disable-all-wrapper .main-controls .svg-icon.checked {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
 label {
   transition: color .25s;
 }
@@ -140,18 +120,14 @@ label {
 }
 
 #disable-all-wrapper .main-controls label {
+  padding-left: 16px;
+  position: relative;
+  transition: color .25s;
   font-size: 12px;
-  padding-left: 4px;
 }
 
 #no-styles {
-  margin: 0 .75em;
-  font-weight: bold;
-  font-style: normal;
-}
-
-#no-styles:before {
-  content: none;
+  font-style: italic;
 }
 
 .checker {
@@ -222,6 +198,10 @@ html[style] .entry {
   padding: 0 16px 0 0;
 }
 
+#no-styles.entry {
+  padding: 0 14px;
+}
+
 html[style] .entry:nth-child(-n+10):before,
 html[style] .entry:nth-child(10):before {
   right: 7px;