[refactor] improve overscroll background colour

Author: zombieFox

package.json

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

src/css/base.css

@@ -21,10 +21,12 @@ body {
   /* transition: background-color var(--layout-timing-extra-fast); */
 }
 
+html.is-background-color-by-theme,
 .is-background-color-by-theme body {
   background-color: rgb(var(--background-color-theme));
 }
 
+html.is-background-color-by-custom,
 .is-background-color-by-custom body {
   background-color: rgb(var(--background-color-custom));
 }

src/css/variables.css

@@ -46,7 +46,7 @@
   --link-item-display-icon-size: 2.5em;
   --link-item-name-size: 0.9em;
   /* layout */
-  --layout-line-width: 0.2em;
+  --layout-line-width: 0.2rem;
   --layout-gutter: 0.5rem;
   --layout-width: 80%;
   --layout-padding-multiplier: 4;

src/js/background.js

@@ -69,10 +69,13 @@ var background = (function() {
 
   var render = {};
 
-  render.color = function() {
-    var html = helper.e("html");
-    html.style.backgroundColor = "rgb(" + state.get().background.color.custom.r + ", " + state.get().background.color.custom.g + ", " + state.get().background.color.custom.b + ")";
-    html.style.setProperty("--background-color-custom", state.get().background.color.custom.r + ", " + state.get().background.color.custom.g + ", " + state.get().background.color.custom.b);
+  render.color = {
+    custom: function() {
+      helper.e("html").style.setProperty("--background-color-custom", state.get().background.color.custom.r + ", " + state.get().background.color.custom.g + ", " + state.get().background.color.custom.b);
+    },
+    clearHTML: function() {
+      helper.e("html").style.backgroundColor = "";
+    }
   };
 
   render.image = function() {
@@ -220,7 +223,8 @@ var background = (function() {
   };
 
   var init = function() {
-    render.color();
+    render.color.clearHTML();
+    render.color.custom();
     render.image();
     render.blur();
     render.grayscale();

src/js/control.js

@@ -2141,7 +2141,7 @@ var control = (function() {
     path: "background.color.custom",
     type: "color",
     func: function() {
-      background.render.color();
+      background.render.color.custom();
       background.render.input.hex();
     }
   }, {
@@ -2150,7 +2150,7 @@ var control = (function() {
     type: "text",
     valueMod: ["hexTextString"],
     func: function() {
-      background.render.color();
+      background.render.color.custom();
       background.render.input.picker();
     }
   }, {

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.76.0";
+  var current = "3.77.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

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": "3.76.0",
+  "version": "3.77.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"