From a6f63d096e24ca5cf8f2c11eafd8611d0a788cab Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 4 Dec 2017 19:14:04 +0300
Subject: [PATCH] extract checkboxes to global.css, fixes

---
 edit.html                                    |   4 +-
 edit/beautify.js                             |   8 +-
 edit/edit.css                                | 137 ++++---------------
 edit/edit.js                                 |   2 +-
 global.css                                   |  95 +++++++++++++
 install-usercss.html                         |   1 +
 install-usercss/install-usercss.css          | 103 --------------
 js/dom.js                                    |   4 +-
 js/messaging.js                              |   3 +-
 manage.html                                  |  17 ++-
 manage/config-dialog.js                      |   9 +-
 manage/manage.css                            | 107 ++++-----------
 msgbox/msgbox.css                            |   2 +-
 popup.html                                   |   1 +
 popup/popup.css                              |  39 +-----
 vendor-overwrites/colorpicker/colorpicker.js |   2 +-
 16 files changed, 183 insertions(+), 351 deletions(-)
 create mode 100644 global.css

diff --git a/edit.html b/edit.html
index 9010800e..c626f148 100644
--- a/edit.html
+++ b/edit.html
@@ -3,6 +3,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="stylesheet" href="global.css">
+    <link rel="stylesheet" href="edit/edit.css">
+
     <style id="firefox-transitions-bug-suppressor">
       /* restrict to FF */
       @supports (-moz-appearance:none) {
@@ -21,7 +24,6 @@
     <script src="js/script-loader.js"></script>
     <script src="js/moz-parser.js"></script>
     <script src="content/apply.js"></script>
-    <link rel="stylesheet" href="edit/edit.css">
     <script src="edit/lint.js"></script>
     <script src="edit/util.js"></script>
     <script src="edit/regexp-tester.js"></script>
diff --git a/edit/beautify.js b/edit/beautify.js
index 8563acdb..cf86d86b 100644
--- a/edit/beautify.js
+++ b/edit/beautify.js
@@ -29,12 +29,16 @@ function beautify(event) {
       optionHtml('border: none;', 'newline_between_properties', true) +
       optionHtml('display: block;', 'newline_before_close_brace', true) +
       optionHtml('}', 'newline_between_rules') +
-      `<label style="display: block; clear: both;"><input data-option="indent_conditional" type="checkbox"
-        ${options.indent_conditional !== false ? 'checked' : ''}>` +
+      `<label style="display: block; clear: both;">
+        <input data-option="indent_conditional" type="checkbox"
+          ${options.indent_conditional !== false ? 'checked' : ''}>
+        <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>` +
         t('styleBeautifyIndentConditional') + '</label>' +
       '</div>' +
       '<div><button role="undo"></button></div>');
 
+    $('#help-popup').className = 'wide';
+
     const undoButton = $('#help-popup button[role="undo"]');
     undoButton.textContent = t(scope.length === 1 ? 'undo' : 'undoGlobal');
     undoButton.addEventListener('click', () => {
diff --git a/edit/edit.css b/edit/edit.css
index 9e5d23ff..eadba48e 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -28,39 +28,6 @@ body {
 }
 
 /************ 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;
 }
@@ -69,59 +36,9 @@ select {
   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 ************/
@@ -151,15 +68,12 @@ label {
   margin-left: 1.7rem;
 }
 .aligned {
-  display: flex;
-  margin-bottom: 4px;
+  display: table-row;
 }
-#options .option:nth-last-of-type(5) {
-  margin-top: 10px;
-}
-.aligned > * {
-  display: inline-flex;
-  align-items: center;
+.aligned > *:not(.svg-inline-wrapper) {
+  display: table-cell;
+  margin-top: 0.1rem;
+  min-height: 1.4rem;
 }
 
 /* basic info */
@@ -265,8 +179,8 @@ input:invalid {
   padding-left: .25em;
 }
 #options .option.aligned > label {
-  padding: 0 0.25rem 0 0;
-  width: 60px;
+  padding: .1rem .25rem 0 0;
+  vertical-align: middle;
 }
 .set-option-progress {
   position: absolute;
@@ -502,9 +416,12 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   padding: 0.5rem;
   z-index: 99;
 }
+#help-popup.big,
+#help-popup.wide {
+  max-width: 100%;
+}
 #help-popup.big {
   box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 100000px !important;
-  max-width: 100%;
   left: calc(280px - 3rem);
 }
 #help-popup.big .CodeMirror {
@@ -631,37 +548,43 @@ 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;
+  display: flex;
+  align-items: center;
+}
+.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;
+  top: 1em;
+  margin: 1ex 0;
 }
-
-.beautify-options + div {
-  padding-left: 6px;
+.firefox .beautify-options > label input {
+  top: 1px;
 }
 .beautify-options:after {
   clear: both;
   display: block;
-  content: " ";
+  content: "";
   height: 1rem;
 }
 .beautify-options span {
   font-weight: bold;
-  display: inline-flex;
+  font-family: monospace;
 }
 .beautify-options select {
   border: none;
-  background-color: rgba(0, 0, 0, 0.05);
+  background: linear-gradient(90deg, rgba(0, 0, 0, .05) 18px, rgba(0, 0, 0, .02) 24px);
+  font-family: monospace;
+  font-weight: bold;
+  padding-left: 4px;
+  margin-left: 4px;
 }
 
 /************ single editor **************/
diff --git a/edit/edit.js b/edit/edit.js
index 492d8958..57238558 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -543,7 +543,7 @@ function showToggleStyleHelp() {
 
 function showHelp(title = '', body) {
   const div = $('#help-popup');
-  div.classList.remove('big');
+  div.className = '';
   const contents = $('.contents', div);
   contents.textContent = '';
   if (body) {
diff --git a/global.css b/global.css
new file mode 100644
index 00000000..a7910669
--- /dev/null
+++ b/global.css
@@ -0,0 +1,95 @@
+.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 .1s;
+}
+
+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: hsla(0, 0%, 0%, .1);
+  outline: none;
+  margin: 0;
+  transition: background-color .1s, border-color .1s;
+}
+
+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 .1s;
+}
+
+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;
+}
+
+@supports (-moz-appearance: none) {
+  .moz-appearance-bug .svg-icon.checked {
+    display: none !important;
+  }
+
+  .moz-appearance-bug input[type="checkbox"] {
+    -moz-appearance: checkbox !important;
+  }
+
+  .moz-appearance-bug button {
+    padding-left: .75ex;
+    padding-right: .75ex;
+  }
+}
diff --git a/install-usercss.html b/install-usercss.html
index 35a3f884..24affbf9 100644
--- a/install-usercss.html
+++ b/install-usercss.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Loading...</title>
+  <link rel="stylesheet" href="global.css">
   <link rel="stylesheet" href="/install-usercss/install-usercss.css">
   <script src="/js/messaging.js"></script>
   <script src="/js/prefs.js"></script>
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index 63e0a2e3..e997643e 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -239,60 +239,9 @@ 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 */
 
@@ -408,58 +357,6 @@ label {
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }
-
-/* https://github.com/lukehaas/css-loaders */
-/*
-.spinner {
-  --color: currentColor;
-  --background-color: currentColor;
-  font-size: 10px;
-  margin: 50px auto;
-  text-indent: -9999em;
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-  background: #ffffff;
-  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  position: relative;
-  -webkit-animation: load3 1.4s infinite linear;
-  animation: load3 1.4s infinite linear;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-}
-
-.spinner:before {
-  width: 50%;
-  height: 50%;
-  background: #ffffff;
-  border-radius: 100% 0 0 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: '';
-}
-
-.spinner:after {
-  background: #0dc5c1;
-  width: 75%;
-  height: 75%;
-  border-radius: 50%;
-  content: '';
-  margin: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-*/
-
 @-webkit-keyframes load3 {
   0% {
     -webkit-transform: rotate(0deg);
diff --git a/js/dom.js b/js/dom.js
index d81c2bc7..c9a6246f 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -250,7 +250,9 @@ function $create(selector = 'div', properties, children) {
 
   if (ns) {
     for (const attr in opt) {
-      element.setAttributeNS(null, attr, opt[attr]);
+      const i = attr.indexOf(':') + 1;
+      const attrNS = i && `http://www.w3.org/1999/${attr.slice(0, i - 1)}`;
+      element.setAttributeNS(attrNS || null, attr, opt[attr]);
     }
   } else {
     Object.assign(element, opt);
diff --git a/js/messaging.js b/js/messaging.js
index c27bef6a..47c8900b 100644
--- a/js/messaging.js
+++ b/js/messaging.js
@@ -17,7 +17,7 @@ if (!CHROME && !chrome.browserAction.openPopup) {
   FIREFOX = 50;
   browser.runtime.getBrowserInfo().then(info => {
     FIREFOX = parseFloat(info.version);
-    document.documentElement.classList.toggle('moz-appearance-bug', FIREFOX && FIREFOX < 54);
+    document.documentElement.classList.add('moz-appearance-bug', FIREFOX && FIREFOX < 54);
   });
 }
 
@@ -62,7 +62,6 @@ if (BG && !BG.getStyles && BG !== window) {
 }
 if (!BG || BG !== window) {
   document.documentElement.classList.toggle('firefox', FIREFOX);
-  document.documentElement.classList.toggle('moz-appearance-bug', FIREFOX && FIREFOX < 54);
   document.documentElement.classList.toggle('opera', OPERA);
   // TODO: remove once our manifest's minimum_chrome_version is 50+
   // Chrome 49 doesn't report own extension pages in webNavigation apparently
diff --git a/manage.html b/manage.html
index d660ea4c..d9340425 100644
--- a/manage.html
+++ b/manage.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title i18n-text="manageTitle"></title>
+  <link rel="stylesheet" href="global.css">
   <link rel="stylesheet" href="manage/manage.css">
   <link rel="stylesheet" href="msgbox/msgbox.css">
   <link rel="stylesheet" href="options/onoffswitch.css">
@@ -183,9 +184,7 @@
           <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>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
       </div>
     </div>
 
@@ -203,9 +202,7 @@
           <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>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
       </div>
     </div>
 
@@ -223,9 +220,7 @@
           <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>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
       </div>
     </div>
 
@@ -344,6 +339,10 @@
   <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>
+
+  <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>
 </svg>
 
 </body>
diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index 18ddf0eb..6b24fdaa 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -110,9 +110,12 @@ function configDialog(style) {
         case 'dropdown':
         case 'image':
           // TODO: a image picker input?
-          va.input = $create('select',
-            va.options.map(o =>
-              $create('option', {value: o.name}, o.label)));
+          va.input = $create('.select-resizer', [
+            $create('select', va.options.map(o =>
+              $create('option', {value: o.name}, o.label))),
+            $create('SVG:svg.svg-icon.select-arrow',
+              $create('SVG:use', {'xlink:href': '#svg-icon-select-arrow'})),
+          ]);
           va.input.onchange = () => {
             va.dirty = true;
             va.value = va.input.value;
diff --git a/manage/manage.css b/manage/manage.css
index 602f2a35..c21a3e5f 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -94,6 +94,10 @@ select {
   fill: #aaa;
 }
 
+#usercss-wiki svg {
+  margin-top: -2px;
+}
+
 .nobreak {
   white-space: nowrap;
 }
@@ -288,7 +292,6 @@ label.nobreak input {
 
 .newUI #installed {
   display: table;
-  table-layout: fixed;
   margin-top: .75rem;
   margin-bottom: .75rem;
 }
@@ -352,15 +355,22 @@ label.nobreak input {
 }
 
 .filter-selection select {
-  -moz-appearance: none;
-  -webkit-appearance: none;
   height: 18px;
   outline: none;
-  background-color: transparent;
   border: none;
   max-width: 100%;
+  padding-left: 4px;
   padding-right: 14px;
-  transition: color .5s
+}
+
+.firefox .filter-selection select {
+  padding-left: 0;
+}
+
+.filter-selection .select-arrow {
+  margin-top: 2px;
+  top: 0;
+  right: 0;
 }
 
 .select-resizer {
@@ -369,27 +379,13 @@ label.nobreak input {
   max-width: calc(100% - 2em);
   position: absolute;
   top: 0;
-  left: 20px;
+  left: 16px;
 }
 
 .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;
@@ -412,15 +408,6 @@ fieldset > .filter-selection:hover {
   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;
@@ -430,50 +417,6 @@ fieldset > .filter-selection:hover {
   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 {
   font-size: 14px;
   font-family: sans-serif;
@@ -930,6 +873,10 @@ fieldset > label {
   align-items: center;
 }
 
+.config-dialog .select-resizer {
+  position: static;
+}
+
 .config-dialog label:first-child {
   padding-top: 0;
 }
@@ -966,10 +913,13 @@ fieldset > label {
   vertical-align: middle;
 }
 
+.config-dialog .select-resizer,
 .config-dialog select {
   width: auto;
   min-width: var(--onoffswitch-width);
   max-width: 124px;
+  left: auto;
+  position: relative;
 }
 
 .config-dialog .onoffswitch {
@@ -986,7 +936,7 @@ fieldset > label {
   flex-shrink: 0;
 }
 
-.config-dialog label > :last-child:not(.onoffswitch) > :not(:last-child) {
+.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
   margin-right: 4px;
 }
 
@@ -1161,12 +1111,3 @@ fieldset > label {
     word-break: break-all;
   }
 }
-
-@supports (-moz-appearance:none) {
-
-  /* fixes for Firefox quirks */
-
-  #newStyleAsUsercss-wrapper svg {
-    margin-top: -2px;
-  }
-}
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index 36458bfb..da232671 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -28,7 +28,7 @@
 }
 
 #message-box.fadeout {
-  animation: fadeout .5s ease-in-out;
+  animation: fadeout .25s ease-in-out;
 }
 
 #message-box.center {
diff --git a/popup.html b/popup.html
index 2796bbf1..f2710b62 100644
--- a/popup.html
+++ b/popup.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="global.css">
   <link rel="stylesheet" href="popup/popup.css">
 
   <style id="firefox-transitions-bug-suppressor">
diff --git a/popup/popup.css b/popup/popup.css
index 79959b21..d058ecc2 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -24,47 +24,16 @@ body > div:not(#installed) {
 }
 /************ checkbox ************/
 
-.svg-icon.checked {
-  position: absolute;
-  height: 8px;
-  width: 8px;
-  display: none;
-  fill: #000;
-  margin: 2px 0 0 2px;
-}
-
-input[type="checkbox"]:checked + .svg-icon.checked {
-  display: inline-flex;
-  transition: fill .25s;
-}
-
-input[type="checkbox"] {
-  -moz-appearance: none;
-  -webkit-appearance: 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"]:checked:hover,
 .style-name:hover input[type="checkbox"]:checked {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
 
-input[type="checkbox"]:hover,
 .style-name:hover input[type="checkbox"] {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
 
-#disable-all-wrapper input[type="checkbox"]:not(.slider),
 #disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
   position: absolute;
   top: 0;
@@ -98,18 +67,14 @@ input[type="checkbox"]:hover,
   background-color: hsl(0, 50%, 56%);
 }
 
-.style-name .checker,
-.style-name .svg-icon.checked {
+#installed .style-name .checker,
+#installed .style-name .svg-icon.checked {
   position: absolute;
   top: 7px;
   left: 9px;
   pointer-events: none;
 }
 
-label {
-  transition: color .25s;
-}
-
 #disable-all-wrapper {
   padding: 0.3em 0 0.6em;
 }
diff --git a/vendor-overwrites/colorpicker/colorpicker.js b/vendor-overwrites/colorpicker/colorpicker.js
index 511a08dd..f18e0c85 100644
--- a/vendor-overwrites/colorpicker/colorpicker.js
+++ b/vendor-overwrites/colorpicker/colorpicker.js
@@ -929,7 +929,7 @@
       ((cm.display.renderedView || [])[0] || {}).text || cm.display.lineDiv;
     for (let el = start; el; el = el.parentElement) {
       const bgColor = getComputedStyle(el).backgroundColor;
-      const [r, g, b, a = 255] = bgColor.match(/\d+/g).map(Number);
+      const [r, g, b, a = 255] = (bgColor.match(/\d+/g) || []).map(Number);
       if (!a) {
         continue;
       }