[feature] add range input controls

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.24.0",
+  "version": "4.25.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": {

package.json

@@ -50,6 +50,10 @@
   display: inline-block;
 }
 
+.form-inline .form-inline {
+  margin: 0;
+}
+
 .form-inline-spacer>*.form-wrap:not(:last-child) {
   margin-right: calc(var(--form-wrap-space) * 3);
 }
@@ -1323,10 +1327,14 @@ input[type="range"]:disabled::-moz-range-progress {
 .form-group .form-wrap {
   margin-top: 0;
   margin-bottom: 0;
+  margin-right: var(--form-wrap-space);
+  display: flex;
+  align-items: center;
 }
 
 .form-group .form-group-text,
 .form-group .button,
+.form-group .button:after,
 .form-group>select,
 .form-group>input[type="email"],
 .form-group>input[type="number"],
@@ -1346,10 +1354,6 @@ input[type="range"]:disabled::-moz-range-progress {
   z-index: 1;
 }
 
-.form-group .button:after {
-  border-radius: 0;
-}
-
 .form-group .form-group-text {
   flex-shrink: 0;
 }
@@ -1453,6 +1457,7 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-group .form-group-radius-left.form-group-text,
 .form-group .form-group-radius-left.button,
+.form-group .form-group-radius-left.button:after,
 .form-group>select.form-group-radius-left,
 .form-group>input.form-group-radius-left[type="email"],
 .form-group>input.form-group-radius-left[type="number"],
@@ -1468,6 +1473,7 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-group .form-group-radius-right.form-group-text,
 .form-group .form-group-radius-right.button,
+.form-group .form-group-radius-right.button:after,
 .form-group>select.form-group-radius-right,
 .form-group>input.form-group-radius-right[type="email"],
 .form-group>input.form-group-radius-right[type="number"],

src/css/form.css

@@ -125,12 +125,6 @@ var background = (function() {
   render.input = {
     clear: function() {
       helper.e(".control-background-image-file").value = "";
-    },
-    picker: function() {
-      helper.e(".control-background-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
-    },
-    hex: function() {
-      helper.e(".control-background-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
     }
   };