From 3ac964cd9f211cd8ecd3ee345d99216bab6ea4e8 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Thu, 16 Jan 2020 12:55:28 +0000
Subject: [PATCH] [design] improve form groups

---
 package-lock.json |  2 +-
 package.json      |  2 +-
 src/css/form.css  | 97 ++++++++++++++++++++++++++++++-----------------
 src/index.html    | 90 +++++++++++++++++++++----------------------
 src/js/version.js |  2 +-
 src/manifest.json |  2 +-
 6 files changed, 111 insertions(+), 84 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9acee134..c37be818 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.20.0",
+  "version": "4.21.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 94a966f9..4d5c463c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.20.0",
+  "version": "4.21.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {
diff --git a/src/css/form.css b/src/css/form.css
index dcbaaf1e..0fa6f92b 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -1494,6 +1494,10 @@ input[type="range"]:disabled::-moz-range-progress {
   overflow: hidden;
 }
 
+.form-group-border-theme-color {
+  border-color: rgb(var(--theme-color));
+}
+
 .form-group.form-group-border .form-group-text,
 .form-group.form-group-border .button,
 .form-group.form-group-border .button:after,
@@ -1514,41 +1518,6 @@ input[type="range"]:disabled::-moz-range-progress {
   border-radius: 0;
 }
 
-.form-group-border-theme-color {
-  border-color: rgb(var(--theme-color));
-}
-
-.form-group-item-small,
-.form-group-item-medium,
-.form-group-item-large {
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-}
-
-.form-group-item-small {
-  width: 3em;
-}
-
-.form-group-item-medium {
-  width: 6em;
-}
-
-.form-group-item-large {
-  width: 9em;
-}
-
-.form-group-item-shrink {
-  flex-grow: 0;
-}
-
-.form-group-item-grow {
-  flex-grow: 1;
-}
-
-.form-group-item-half {
-  flex-basis: 50%;
-}
-
 .form-group-text {
   background-color: rgb(var(--form-group-text-background));
   padding: 0 1em;
@@ -1608,6 +1577,64 @@ input[type="range"]:disabled::-moz-range-progress {
   background-color: transparent;
 }
 
+.form-group-item-small,
+.form-group-item-medium,
+.form-group-item-large,
+.form-group>.button.form-group-item-small,
+.form-group>.button.form-group-item-medium,
+.form-group>.button.form-group-item-large,
+.form-group>select.form-group-item-small,
+.form-group>select.form-group-item-medium,
+.form-group>select.form-group-item-large,
+.form-group>input[type].form-group-item-small,
+.form-group>input[type].form-group-item-medium,
+.form-group>input[type].form-group-item-large {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
+.form-group-item-small,
+.form-group>.button.form-group-item-small,
+.form-group>select.form-group-item-small,
+.form-group>input[type].form-group-item-small {
+  width: 3em;
+}
+
+.form-group-item-medium,
+.form-group>.button.form-group-item-medium,
+.form-group>select.form-group-item-medium,
+.form-group>input[type].form-group-item-medium {
+  width: 6em;
+}
+
+.form-group-item-large,
+.form-group>.button.form-group-item-large,
+.form-group>select.form-group-item-large,
+.form-group>input[type].form-group-item-large {
+  width: 9em;
+}
+
+.form-group-item-shrink,
+.form-group>.button.form-group-item-shrink,
+.form-group>select.form-group-item-shrink,
+.form-group>input[type].form-group-item-shrink {
+  flex-grow: 0;
+}
+
+.form-group-item-grow,
+.form-group>.button.form-group-item-grow,
+.form-group>select.form-group-item-grow,
+.form-group>input[type].form-group-item-grow {
+  flex-grow: 1;
+}
+
+.form-group-item-half,
+.form-group>.button.form-group-item-half,
+.form-group>select.form-group-item-half,
+.form-group>input[type].form-group-item-half {
+  flex-basis: 50%;
+}
+
 .form-group-text-borderless {
   padding: 0;
   border-width: 0;
diff --git a/src/index.html b/src/index.html
index ac95f4a8..2148e6df 100644
--- a/src/index.html
+++ b/src/index.html
@@ -168,7 +168,7 @@
                 <label for="control-layout-size">Size</label>
                 <div class="form-group form-group-block">
                   <input id="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
-                  <div class="control-layout-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-layout-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-layout-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -189,7 +189,7 @@
                 <label for="control-layout-width">Width</label>
                 <div class="form-group form-group-block">
                   <input id="control-layout-width" class="control-layout-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
-                  <div class="control-layout-width-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-layout-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-layout-width-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -271,7 +271,7 @@
                 <label for="control-layout-padding">Padding outside Header and Bookmark Area</label>
                 <div class="form-group form-group-block">
                   <input id="control-layout-padding" class="control-layout-padding mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
-                  <div class="control-layout-padding-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-layout-padding-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-layout-padding-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -286,7 +286,7 @@
                 <label for="control-layout-gutter">Gutter between Header and Bookmark items</label>
                 <div class="form-group form-group-block">
                   <input id="control-layout-gutter" class="control-layout-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
-                  <div class="control-layout-gutter-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-layout-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-layout-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -320,7 +320,7 @@
                 <label for="control-header-area-width">Width</label>
                 <div class="form-group form-group-block">
                   <input id="control-header-area-width" class="control-header-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
-                  <div class="control-header-area-width-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-header-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-header-area-width-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -415,7 +415,7 @@
                     <label for="control-header-greeting-size">Size</label>
                     <div class="form-group form-group-block">
                       <input id="control-header-greeting-size" class="control-header-greeting-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                      <div class="control-header-greeting-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-header-greeting-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-header-greeting-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -450,7 +450,7 @@
                     <label for="control-header-transitional-size">Size</label>
                     <div class="form-group form-group-block">
                       <input id="control-header-transitional-size" class="control-header-transitional-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                      <div class="control-header-transitional-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-header-transitional-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-header-transitional-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -532,7 +532,7 @@
                 <label for="control-header-clock-size">Size</label>
                 <div class="form-group form-group-block">
                   <input id="control-header-clock-size" class="control-header-clock-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                  <div class="control-header-clock-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-header-clock-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-header-clock-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -698,7 +698,7 @@
                 <label for="control-header-date-size">Size</label>
                 <div class="form-group form-group-block">
                   <input id="control-header-date-size" class="control-header-date-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                  <div class="control-header-date-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-header-date-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-header-date-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -738,7 +738,7 @@
                         <label for="control-header-search-width">Width</label>
                         <div class="form-group form-group-block">
                           <input id="control-header-search-width" class="control-header-search-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
-                          <div class="control-header-search-width-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                          <div class="control-header-search-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
                           <button class="control-header-search-width-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                         </div>
                       </div>
@@ -821,7 +821,7 @@
                     <label for="control-header-search-size">Size</label>
                     <div class="form-group form-group-block">
                       <input id="control-header-search-size" class="control-header-search-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                      <div class="control-header-search-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-header-search-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-header-search-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -872,7 +872,7 @@
                 <label for="control-header-button-size">Size</label>
                 <div class="form-group form-group-block">
                   <input id="control-header-button-size" class="control-header-button-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                  <div class="control-header-button-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-header-button-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-header-button-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -887,7 +887,7 @@
                 <label for="control-header-border-top">Top</label>
                 <div class="form-group form-group-block">
                   <input id="control-header-border-top" class="control-header-border-top mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
-                  <div class="control-header-border-top-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-header-border-top-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-header-border-top-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -896,7 +896,7 @@
                 <label for="control-header-border-bottom">Bottom</label>
                 <div class="form-group form-group-block">
                   <input id="control-header-border-bottom" class="control-header-border-bottom mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
-                  <div class="control-header-border-bottom-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-header-border-bottom-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-header-border-bottom-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -953,7 +953,7 @@
                     <label for="control-header-shade-opacity">Opacity</label>
                     <div class="form-group form-group-block">
                       <input id="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                      <div class="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-header-shade-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -987,7 +987,7 @@
                     <label for="control-group-name-size">Name Size</label>
                     <div class="form-group form-group-block">
                       <input id="control-group-name-size" class="control-group-name-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                      <div class="control-group-name-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-group-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-group-name-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1044,7 +1044,7 @@
                 <label for="control-group-border">Between groups</label>
                 <div class="form-group form-group-block">
                   <input id="control-group-border" class="control-group-border mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
-                  <div class="control-group-border-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-group-border-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-group-border-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -1065,7 +1065,7 @@
                 <label for="control-link-area-width">Width</label>
                 <div class="form-group form-group-block">
                   <input id="control-link-area-width" class="control-link-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
-                  <div class="control-link-area-width-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-link-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-link-area-width-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -1115,7 +1115,7 @@
                     <label for="control-link-item-size">Bookmark Size</label>
                     <div class="form-group form-group-block">
                       <input id="control-link-item-size" class="control-link-item-size mr-3" type="range" min="50" max="500" value="0" step="10" tabindex="-1">
-                      <div class="control-link-item-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-link-item-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-link-item-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1168,7 +1168,7 @@
                     <label for="control-link-item-display-rotate">Content rotation</label>
                     <div class="form-group form-group-block">
                       <input id="control-link-item-display-rotate" class="control-link-item-display-rotate mr-3" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
-                      <div class="control-link-item-display-rotate-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-link-item-display-rotate-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-link-item-display-rotate-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1177,7 +1177,7 @@
                     <label for="control-link-item-display-translate-x">Content horizontally offset</label>
                     <div class="form-group form-group-block">
                       <input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
-                      <div class="control-link-item-display-translate-x-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-link-item-display-translate-x-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-link-item-display-translate-x-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1186,7 +1186,7 @@
                     <label for="control-link-item-display-translate-y">Content vertically offset</label>
                     <div class="form-group form-group-block">
                       <input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
-                      <div class="control-link-item-display-translate-y-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-link-item-display-translate-y-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-link-item-display-translate-y-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1195,7 +1195,7 @@
                     <label for="control-link-item-display-gutter">Content gutter</label>
                     <div class="form-group form-group-block">
                       <input id="control-link-item-display-gutter" class="control-link-item-display-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="1">
-                      <div class="control-link-item-display-gutter-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-link-item-display-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-link-item-display-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1240,7 +1240,7 @@
                         <label for="control-link-item-display-letcon-letter-size">Letter size</label>
                         <div class="form-group form-group-block">
                           <input id="control-link-item-display-letcon-letter-size" class="control-link-item-display-letcon-letter-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
-                          <div class="control-link-item-display-letcon-letter-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                          <div class="control-link-item-display-letcon-letter-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                           <button class="control-link-item-display-letcon-letter-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                         </div>
                       </div>
@@ -1249,7 +1249,7 @@
                         <label for="control-link-item-display-letcon-icon-size">Icon size</label>
                         <div class="form-group form-group-block">
                           <input id="control-link-item-display-letcon-icon-size" class="control-link-item-display-letcon-icon-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
-                          <div class="control-link-item-display-letcon-icon-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                          <div class="control-link-item-display-letcon-icon-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                           <button class="control-link-item-display-letcon-icon-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                         </div>
                       </div>
@@ -1266,7 +1266,7 @@
                         <label for="control-link-item-display-name-size">Name size</label>
                         <div class="form-group form-group-block">
                           <input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
-                          <div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                          <div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                           <button class="control-link-item-display-name-size-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                         </div>
                       </div>
@@ -1347,7 +1347,7 @@
                 <label for="control-link-item-border">All sides</label>
                 <div class="form-group form-group-block">
                   <input id="control-link-item-border" class="control-link-item-border mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
-                  <div class="control-link-item-border-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-link-item-border-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-link-item-border-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -1502,7 +1502,7 @@
                     <label for="control-theme-font-display-weight">Font weight</label>
                     <div class="form-group form-group-block">
                       <input id="control-theme-font-display-weight" class="control-theme-font-display-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
-                      <div class="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
                     </div>
                   </div>
                   <div class="form-wrap">
@@ -1554,7 +1554,7 @@
                     <label for="control-theme-font-ui-weight">Font weight</label>
                     <div class="form-group form-group-block">
                       <input id="control-theme-font-ui-weight" class="control-theme-font-ui-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
-                      <div class="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
                     </div>
                   </div>
                   <div class="form-wrap">
@@ -1686,21 +1686,21 @@
                 <label for="control-theme-color-hsl-h">Hue</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-color-hsl-h" class="control-theme-color-hsl-h mr-3" type="range" min="0" max="359" value="0" tabindex="-1">
-                  <div class="control-theme-color-hsl-h-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-color-hsl-h-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <div class="form-wrap">
                 <label for="control-theme-color-hsl-s">Saturation</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-color-hsl-s" class="control-theme-color-hsl-s mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                  <div class="control-theme-color-hsl-s-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-color-hsl-s-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <div class="form-wrap">
                 <label for="control-theme-color-hsl-l">Lightness</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-color-hsl-l" class="control-theme-color-hsl-l mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                  <div class="control-theme-color-hsl-l-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-color-hsl-l-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <hr>
@@ -1708,21 +1708,21 @@
                 <label for="control-theme-color-rgb-r">Red</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-color-rgb-r" class="control-theme-color-rgb-r mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
-                  <div class="control-theme-color-rgb-r-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-color-rgb-r-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <div class="form-wrap">
                 <label for="control-theme-color-rgb-g">Green</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-color-rgb-g" class="control-theme-color-rgb-g mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
-                  <div class="control-theme-color-rgb-g-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-color-rgb-g-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <div class="form-wrap">
                 <label for="control-theme-color-rgb-b">Blue</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-color-rgb-b" class="control-theme-color-rgb-b mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
-                  <div class="control-theme-color-rgb-b-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-color-rgb-b-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <hr>
@@ -1730,7 +1730,7 @@
                 <label for="control-theme-color-contrast-light">Light shade contrast</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-color-contrast-light" class="control-theme-color-contrast-light mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
-                  <div class="control-theme-color-contrast-light-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-color-contrast-light-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-theme-color-contrast-light-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -1738,7 +1738,7 @@
                 <label for="control-theme-color-contrast-dark">Dark shade contrast</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-color-contrast-dark" class="control-theme-color-contrast-dark mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
-                  <div class="control-theme-color-contrast-dark-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-color-contrast-dark-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-theme-color-contrast-dark-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -1803,7 +1803,7 @@
                 <label for="control-theme-radius">All corners</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-radius" class="control-theme-radius mr-3" type="range" min="0" max="400" value="0" step="5" tabindex="-1">
-                  <div class="control-theme-radius-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-radius-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-theme-radius-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -1818,7 +1818,7 @@
                 <label for="control-theme-shadow">Size</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-shadow" class="control-theme-shadow mr-3" type="range" min="0" max="300" value="0" step="25" tabindex="-1">
-                  <div class="control-theme-shadow-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-shadow-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-theme-shadow-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -1833,7 +1833,7 @@
                 <label for="control-theme-shade-opacity">Opacity</label>
                 <div class="form-group form-group-block">
                   <input id="control-theme-shade-opacity" class="control-theme-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                  <div class="control-theme-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                  <div class="control-theme-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
                   <button class="control-theme-shade-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                 </div>
               </div>
@@ -1943,7 +1943,7 @@
                     <label for="control-background-image-opacity">Opacity</label>
                     <div class="form-group form-group-block">
                       <input id="control-background-image-opacity" class="control-background-image-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                      <div class="control-background-image-opacity-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-background-image-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-background-image-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1951,7 +1951,7 @@
                     <label for="control-background-image-grayscale">Grayscale</label>
                     <div class="form-group form-group-block">
                       <input id="control-background-image-grayscale" class="control-background-image-grayscale mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                      <div class="control-background-image-grayscale-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-background-image-grayscale-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-background-image-grayscale-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1959,7 +1959,7 @@
                     <label for="control-background-image-blur">Blur</label>
                     <div class="form-group form-group-block">
                       <input id="control-background-image-blur" class="control-background-image-blur mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                      <div class="control-background-image-blur-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-background-image-blur-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-background-image-blur-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1967,7 +1967,7 @@
                     <label for="control-background-image-accent">Accent overlay</label>
                     <div class="form-group form-group-block">
                       <input id="control-background-image-accent" class="control-background-image-accent mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                      <div class="control-background-image-accent-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-background-image-accent-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-background-image-accent-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
@@ -1975,7 +1975,7 @@
                     <label for="control-background-image-scale">Size</label>
                     <div class="form-group form-group-block">
                       <input id="control-background-image-scale" class="control-background-image-scale mr-3" type="range" min="100" max="300" value="0" tabindex="-1">
-                      <div class="control-background-image-scale-count form-group-text form-group-item-medium form-group-radius-left px-1"></div>
+                      <div class="control-background-image-scale-count form-group-text form-group-item-medium form-group-radius-left"></div>
                       <button class="control-background-image-scale-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
                     </div>
                   </div>
diff --git a/src/js/version.js b/src/js/version.js
index f250dafd..2bea63fa 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.20.0";
+  var current = "4.21.0";
 
   var name = "Naughty Goose";
 
diff --git a/src/manifest.json b/src/manifest.json
index ef3496cb..4f5c30fc 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "4.20.0",
+  "version": "4.21.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"