[feature] add link background colour controls

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.4.1",
+  "version": "4.5.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/link.css

@@ -115,7 +115,6 @@
 
 /* link panel front */
 .link-panel-front {
-  background-color: rgb(var(--theme-color-02));
   position: absolute;
   left: 0;
   width: 100%;
@@ -128,6 +127,14 @@
   transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
 }
 
+.is-link-item-color-by-theme .link-panel-front {
+  background-color: rgb(var(--link-item-color-theme));
+}
+
+.is-link-item-color-by-custom .link-panel-front {
+  background-color: rgb(var(--link-item-color-custom));
+}
+
 .is-link-style-block .link-panel-front {
   padding: 1em;
 }
@@ -163,11 +170,18 @@
 .link-item:focus-within .link-panel-front,
 .link-item:focus .link-panel-front,
 .link-item:hover .link-panel-front {
-  background-color: rgb(var(--theme-color-03));
   outline: none;
   text-decoration: none;
 }
 
+.is-link-item-color-by-theme .link-panel-front:hover,
+.is-link-item-color-by-theme .link-panel-front:focus,
+.is-link-item-color-by-theme .link-item:focus-within .link-panel-front,
+.is-link-item-color-by-theme .link-item:focus .link-panel-front,
+.is-link-item-color-by-theme .link-item:hover .link-panel-front {
+  background-color: rgb(var(--theme-color-03));
+}
+
 .is-link-item-shadow-show .link-item:focus .link-panel-front,
 .is-link-item-shadow-show .link-item:focus-within .link-panel-front,
 .is-link-item-shadow-show .link-item:hover .link-panel-front {

src/css/variables.css

@@ -44,6 +44,8 @@
   --group-border:                                       0;
   /* link */
   --link-area-width:                                    100%;
+  --link-item-color-theme:                              var(--theme-color-02);
+  --link-item-color-custom:                             rgb(0, 0, 0);
   --link-item-size:                                     1em;
   --link-item-display-space:                            0.25em;
   --link-item-display-gutter:                           2;

src/index.html

@@ -1190,6 +1190,32 @@
               </div>
             </div>
           </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Background colour</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <input id="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1">
+                <label for="control-link-item-color-by-theme"><span class="label-icon"></span> Theme background colour</label>
+              </div>
+              <p class="control-link-item-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
+              <div class="input-wrap">
+                <input id="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
+                <label for="control-link-item-color-by-custom"><span class="label-icon"></span> Custom background colour</label>
+              </div>
+              <p class="control-link-item-color-by-custom-helper form-helper small">Use a custom Background colour.</p>
+              <p class="control-link-item-color-by-custom-helper form-helper small">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
+              <div class="form-indent">
+                <div class="input-wrap">
+                  <div class="form-group form-group-block mb-0">
+                    <input id="control-link-item-color-by-picker" class="form-group-item-half control-link-item-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
+                    <input id="control-link-item-color-by-hex" class="form-group-item-half control-link-item-color-by-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Border</h1>
@@ -1486,7 +1512,7 @@
                 <input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
                 <label for="control-background-color-by-theme"><span class="label-icon"></span> Theme background colour</label>
               </div>
-              <p class="control-background-color-by-theme-helper form-helper small">Use the Background colour defined by the Dark or Light Theme.</p>
+              <p class="control-background-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
               <div class="input-wrap">
                 <input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
                 <label for="control-background-color-by-custom"><span class="label-icon"></span> Custom background colour</label>
@@ -1496,8 +1522,8 @@
               <div class="form-indent">
                 <div class="input-wrap">
                   <div class="form-group form-group-block mb-0">
-                    <input id="control-background-color-custom-current-picker" class="form-group-item-half control-background-color-custom-current-picker mb-0" type="color" value="#000000" tabindex="1">
+                    <input id="control-background-color-by-picker" class="form-group-item-half control-background-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
-                    <input id="control-background-color-custom-current-hex" class="form-group-item-half control-background-color-custom-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                    <input id="control-background-color-by-hex" class="form-group-item-half control-background-color-by-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                   </div>
                 </div>
               </div>

src/js/background.js

@@ -127,10 +127,10 @@ var background = (function() {
       helper.e(".control-background-image-file").value = "";
     },
     picker: function() {
-      helper.e(".control-background-color-custom-current-picker").value = helper.rgbToHex(state.get.current().background.color.custom);
+      helper.e(".control-background-color-by-picker").value = helper.rgbToHex(state.get.current().background.color.custom);
     },
     hex: function() {
-      helper.e(".control-background-color-custom-current-hex").value = helper.rgbToHex(state.get.current().background.color.custom);
+      helper.e(".control-background-color-by-hex").value = helper.rgbToHex(state.get.current().background.color.custom);
     }
   };
 

src/js/control.js

@@ -2417,6 +2417,39 @@ var control = (function() {
     func: function() {
       link.groupAndItems();
     }
+  }, {
+    element: helper.e(".control-link-item-color-by-theme"),
+    path: "link.item.color.by",
+    type: "radio",
+    func: function() {
+      render.dependents();
+      render.class();
+    }
+  }, {
+    element: helper.e(".control-link-item-color-by-custom"),
+    path: "link.item.color.by",
+    type: "radio",
+    func: function() {
+      render.dependents();
+      render.class();
+    }
+  }, {
+    element: helper.e(".control-link-item-color-by-picker"),
+    path: "link.item.color.custom",
+    type: "color",
+    func: function() {
+      link.render.item.color.custom();
+      link.render.input.hex();
+    }
+  }, {
+    element: helper.e(".control-link-item-color-by-hex"),
+    path: "link.item.color.custom",
+    type: "text",
+    valueMod: ["hexTextString"],
+    func: function() {
+      link.render.item.color.custom();
+      link.render.input.picker();
+    }
   }, {
     element: helper.e(".control-link-item-border"),
     path: "link.item.border",
@@ -2730,7 +2763,7 @@ var control = (function() {
       render.class();
     }
   }, {
-    element: helper.e(".control-background-color-custom-current-picker"),
+    element: helper.e(".control-background-color-by-picker"),
     path: "background.color.custom",
     type: "color",
     func: function() {
@@ -2738,7 +2771,7 @@ var control = (function() {
       background.render.input.hex();
     }
   }, {
-    element: helper.e(".control-background-color-custom-current-hex"),
+    element: helper.e(".control-background-color-by-hex"),
     path: "background.color.custom",
     type: "text",
     valueMod: ["hexTextString"],
@@ -3150,6 +3183,8 @@ var control = (function() {
       helper.removeClass(html, "is-link-display-alignment-bottomleft");
       helper.removeClass(html, "is-link-display-alignment-bottomcenter");
       helper.removeClass(html, "is-link-display-alignment-bottomright");
+      helper.removeClass(html, "is-link-item-color-by-theme");
+      helper.removeClass(html, "is-link-item-color-by-custom");
       helper.removeClass(html, "is-link-item-display-direction-horizontal");
       helper.removeClass(html, "is-link-item-display-direction-vertical");
       helper.removeClass(html, "is-link-item-display-order-letconname");
@@ -3168,6 +3203,7 @@ var control = (function() {
       if (state.get.current().link.show) {
         helper.addClass(html, "is-link-show");
         helper.addClass(html, "is-link-area-alignment-" + state.get.current().link.area.alignment);
+        helper.addClass(html, "is-link-item-color-by-" + state.get.current().link.item.color.by);
         helper.addClass(html, "is-link-item-display-direction-" + state.get.current().link.item.display.direction);
         helper.addClass(html, "is-link-item-display-order-" + state.get.current().link.item.display.order);
         helper.addClass(html, "is-link-display-alignment-" + state.get.current().link.item.display.alignment);
@@ -3672,6 +3708,12 @@ var control = (function() {
       _disable.input(".control-link-item-display-alignment-bottomcenter", true);
       _disable.input(".control-link-item-display-alignment-bottomright", true);
       _disable.input(".control-link-newtab", true);
+      _disable.input(".control-link-item-color-by-theme", true);
+      _disable.element(".control-link-item-color-by-theme-helper", true);
+      _disable.input(".control-link-item-color-by-custom", true);
+      _disable.element(".control-link-item-color-by-custom-helper", true);
+      _disable.input(".control-link-item-color-by-picker", true);
+      _disable.input(".control-link-item-color-by-hex", true);
       _disable.element("[for=control-link-item-border]", true);
       _disable.input(".control-link-item-border", true);
       _disable.element(".control-link-item-border-count", true);
@@ -3714,6 +3756,10 @@ var control = (function() {
         _disable.input(".control-link-item-shadow-show", false);
         _disable.input(".control-link-item-hoverscale", false);
         _disable.input(".control-link-newtab", false);
+        _disable.input(".control-link-item-color-by-theme", false);
+        _disable.element(".control-link-item-color-by-theme-helper", false);
+        _disable.input(".control-link-item-color-by-custom", false);
+        _disable.element(".control-link-item-color-by-custom-helper", false);
         _disable.element("[for=control-link-item-border]", false);
         _disable.input(".control-link-item-border", false);
         _disable.element(".control-link-item-border-count", false);
@@ -3783,6 +3829,10 @@ var control = (function() {
           _disable.element(".control-link-item-display-gutter-count", false);
           _disable.input(".control-link-item-display-gutter-default", false);
         };
+        if (state.get.current().link.item.color.by == "custom") {
+          _disable.input(".control-link-item-color-by-picker", false);
+          _disable.input(".control-link-item-color-by-hex", false);
+        };
       };
     };
     var _theme = function() {
@@ -3859,13 +3909,11 @@ var control = (function() {
         _disable.element(".control-background-image-url-helper", true);
       };
       if (state.get.current().background.color.by == "theme") {
-        _disable.input(".control-background-color-custom-current-picker", true);
+        _disable.input(".control-background-color-by-picker", true);
-        _disable.input(".control-background-color-custom-current-hex", true);
+        _disable.input(".control-background-color-by-hex", true);
-        _disable.element(".control-background-color-theme-helper", true);
       } else if (state.get.current().background.color.by == "custom") {
-        _disable.input(".control-background-color-custom-current-picker", false);
+        _disable.input(".control-background-color-by-picker", false);
-        _disable.input(".control-background-color-custom-current-hex", false);
+        _disable.input(".control-background-color-by-hex", false);
-        _disable.element(".control-background-color-theme-helper", false);
       };
     };
     _header();

src/js/link.js

@@ -523,6 +523,11 @@ var link = (function() {
   };
 
   render.item = {
+    color: {
+      custom: function() {
+        helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.custom.r + ", " + state.get.current().link.item.color.custom.g + ", " + state.get.current().link.item.color.custom.b);
+      }
+    },
     link: function() {
       var linkItemOptions = {
         tag: "div",
@@ -1661,6 +1666,15 @@ var link = (function() {
     }
   };
 
+  render.input = {
+    picker: function() {
+      helper.e(".control-link-item-color-by-picker").value = helper.rgbToHex(state.get.current().link.item.color.custom);
+    },
+    hex: function() {
+      helper.e(".control-link-item-color-by-hex").value = helper.rgbToHex(state.get.current().link.item.color.custom);
+    }
+  };
+
   var add = {
     item: {
       open: function() {
@@ -1756,6 +1770,7 @@ var link = (function() {
     groupAndItems();
     render.group.size();
     render.group.border();
+    render.item.color.custom();
     render.item.size();
     render.item.display.letter();
     render.item.display.icon();

src/js/state.js

@@ -139,6 +139,14 @@ var state = (function() {
         alignment: "center"
       },
       item: {
+        color: {
+          by: "theme",
+          custom: {
+            r: 0,
+            g: 0,
+            b: 0
+          }
+        },
         display: {
           letcon: {
             show: true,

src/js/update.js

@@ -711,6 +711,17 @@ var update = (function() {
       data.state.header.button.colorAccent = data.state.header.button.accent;
       delete data.state.header.button.accent;
       return data;
+    },
+    "4.5.0": function(data) {
+      data.state.link.item.color = {
+        by: "theme",
+        custom: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.4.1";
+  var current = "4.5.0";
 
   var name = "Enchanting Aardvark";
 

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