[feature] add link background opacity controls

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.43.0",
+  "version": "5.44.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.43.0",
+  "version": "5.44.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

@@ -169,6 +169,7 @@
 
 /* link panel front */
 .link-panel-front {
+  background-color: rgba(var(--link-item-color), var(--link-item-color-opacity));
   position: absolute;
   left: 0;
   width: 100%;
@@ -188,7 +189,7 @@
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  opacity: var(--link-item-opacity);
+  opacity: var(--link-item-image-opacity);
   position: absolute;
   top: 0;
   left: 0;
@@ -229,27 +230,16 @@
   height: calc(100% - var(--layout-line-width));
 }
 
-.link-item:not(.link-item-image) .link-panel-front {
-  background-color: rgba(var(--link-item-color), var(--link-item-opacity));
-}
-
 .link-panel-front:hover,
 .link-panel-front:focus,
 .link-item:focus-within .link-panel-front,
 .link-item:focus .link-panel-front,
 .link-item:hover .link-panel-front {
+  background-color: rgba(var(--link-item-color-focus-hover), var(--link-item-color-opacity));
   outline: none;
   text-decoration: none;
 }
 
-.link-item:not(.link-item-image) .link-panel-front:hover,
-.link-item:not(.link-item-image) .link-panel-front:focus,
-.link-item:not(.link-item-image):focus-within .link-panel-front,
-.link-item:not(.link-item-image):focus .link-panel-front,
-.link-item:not(.link-item-image):hover .link-panel-front {
-  background-color: rgba(var(--link-item-color-focus-hover), var(--link-item-opacity));
-}
-
 .is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
 .is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus-within .link-panel-front,
 .is-link-item-shadow-show.is-link-orientation-bottom .link-item:hover .link-panel-front {

src/css/variables.css

@@ -110,6 +110,8 @@
   /* link */
   --link-area-width:                                    100%;
   --link-item-color:                                    var(--theme-color-02);
+  --link-item-color-opacity:                            1;
+  --link-item-image-opacity:                            1;
   --link-item-color-focus-hover:                        var(--theme-color-03);
   --link-item-size:                                     1em;
   --link-item-display-space:                            0.25em;
@@ -122,7 +124,6 @@
   --link-item-display-translate-y:                      0em;
   --link-item-display-name-size:                        0.9em;
   --link-item-border:                                   0;
-  --link-item-opacity:                                  1;
   --link-item-padding:                                  1;
   --link-item-clip-padding:                             1em;
   --link-item-display-visual-shadow-size:               1;
@@ -130,7 +131,6 @@
   --link-item-display-visual-shadow-blur:               0.02em;
   --link-item-display-visual-shadow-opacity:            0.01;
   --link-item-display-visual-shadow:
-  
                                                         0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 1)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 2)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 1))),
                                                         0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 2)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 2))),
                                                         0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 4)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 6)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 3)));
@@ -418,7 +418,7 @@
   --link-item-edit-height:                              50%;
 }
 
-.is-link-item-opacity {
+.is-link-item-color-opacity {
   --link-item-clip-padding:                             calc(0 * 1em);
 }
 

src/html/menu/content/bookmarks.html

@@ -18,7 +18,7 @@
 
   @@include("./bookmarks/accent.html")
 
-  @@include("./bookmarks/opacity.html")
+  @@include("./bookmarks/image.html")
 
   @@include("./bookmarks/border.html")
 

src/html/menu/content/bookmarks/color.html

@@ -75,5 +75,17 @@
         <button class="control-link-item-color-rainbow button button-line" tabindex="-1">Apply unique colour to each</button>
       </div>
     </div>
+    <hr>
+    <div class="form-wrap">
+      <label for="control-link-item-color-opacity-range">Opacity</label>
+      <div class="form-group form-group-block">
+        <input id="control-link-item-color-opacity-range" class="control-link-item-color-opacity-range mr-3" type="range" value="0" tabindex="-1">
+        <input class="control-link-item-color-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+        <button class="control-link-item-color-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+      </div>
+    </div>
+    <div class="form-helper">
+      <p class="control-link-item-color-opacity-helper form-helper-item">Change the Colour opacity of all Bookmark tiles.</p>
+    </div>
   </div>
 </div>

src/html/menu/content/bookmarks/image.html

@@ -0,0 +1,24 @@
+<div id="menu-content-bookmarks-image" class="menu-content-item">
+  <div class="menu-item-header">
+    <h1 class="menu-item-header-text">Background image</h1>
+  </div>
+  <div class="menu-item-form">
+    <div class="form-wrap">
+      <div class="form-inline">
+        <button class="control-link-item-image-clear button button-line" tabindex="-1">Clear all</button>
+      </div>
+    </div>
+    <hr>
+    <div class="form-wrap">
+      <label for="control-link-item-image-opacity-range">Opacity</label>
+      <div class="form-group form-group-block">
+        <input id="control-link-item-image-opacity-range" class="control-link-item-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
+        <input class="control-link-item-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+        <button class="control-link-item-image-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+      </div>
+    </div>
+    <div class="form-helper">
+      <p class="control-link-item-image-opacity-helper form-helper-item">Change the Background image opacity of all Bookmark tiles.</p>
+    </div>
+  </div>
+</div>

src/html/menu/content/bookmarks/opacity.html

@@ -1,18 +0,0 @@
-<div id="menu-content-bookmarks-opacity" class="menu-content-item">
-  <div class="menu-item-header">
-    <h1 class="menu-item-header-text">Opacity</h1>
-  </div>
-  <div class="menu-item-form">
-    <div class="form-wrap">
-      <label for="control-link-item-opacity-range">Colour or background image</label>
-      <div class="form-group form-group-block">
-        <input id="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1">
-        <input class="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
-        <button class="control-link-item-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
-      </div>
-    </div>
-    <div class="form-helper">
-      <p class="control-link-item-opacity-helper form-helper-item">Change the Colour or Background image Opacity of all Bookmark tiles.</p>
-    </div>
-  </div>
-</div>

src/html/menu/nav.html

@@ -41,7 +41,7 @@
       <a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
       <a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour override</a>
       <a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
-      <a href="#menu-content-bookmarks-opacity" class="menu-nav-sub button button-small" tabindex="-1">Opacity</a>
+      <a href="#menu-content-bookmarks-image" class="menu-nav-sub button button-small" tabindex="-1">Background image</a>
       <a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
       <a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
       <a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>

src/js/control.js

@@ -5401,8 +5401,8 @@ var control = (function() {
             link.groupAndItems();
           }
         }, {
-          element: ".control-link-item-opacity-range",
+          element: ".control-link-item-color-opacity-range",
-          path: "link.item.opacity",
+          path: "link.item.color.opacity",
           type: "range",
           valueConvert: ["float"],
           valueModify: {
@@ -5410,18 +5410,18 @@ var control = (function() {
             max: 100
           },
           mirrorElement: [{
-            element: ".control-link-item-opacity-number",
+            element: ".control-link-item-color-opacity-number",
-            path: "link.item.opacity",
+            path: "link.item.color.opacity",
             type: "number",
             valueConvert: ["float"]
           }],
           func: function() {
-            link.render.item.opacity();
+            link.render.item.color.opacity();
             render.class();
           }
         }, {
-          element: ".control-link-item-opacity-number",
+          element: ".control-link-item-color-opacity-number",
-          path: "link.item.opacity",
+          path: "link.item.color.opacity",
           type: "number",
           valueConvert: ["float"],
           valueModify: {
@@ -5429,21 +5429,21 @@ var control = (function() {
             max: 100
           },
           mirrorElement: [{
-            element: ".control-link-item-opacity-range",
+            element: ".control-link-item-color-opacity-range",
-            path: "link.item.opacity",
+            path: "link.item.color.opacity",
             type: "number",
             valueConvert: ["float"]
           }],
           func: function() {
-            link.render.item.opacity();
+            link.render.item.color.opacity();
             render.class();
           }
         }, {
-          element: ".control-link-item-opacity-default",
+          element: ".control-link-item-color-opacity-default",
           type: "button",
           func: function() {
-            mod.default("link.item.opacity");
+            mod.default("link.item.color.opacity");
-            link.render.item.opacity();
+            link.render.item.color.opacity();
             render.update.control.menu();
             render.class();
           }
@@ -6180,6 +6180,61 @@ var control = (function() {
             link.groupAndItems();
           }
         }],
+        image: [{
+          element: ".control-link-item-image-clear",
+          type: "button",
+          func: function() {
+            link.mod.image.clear();
+            link.groupAndItems();
+          }
+        }, {
+          element: ".control-link-item-image-opacity-range",
+          path: "link.item.image.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-image-opacity-number",
+            path: "link.item.image.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            link.render.item.image.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-link-item-image-opacity-number",
+          path: "link.item.image.opacity",
+          type: "number",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-image-opacity-range",
+            path: "link.item.image.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            link.render.item.image.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-link-item-image-opacity-default",
+          type: "button",
+          func: function() {
+            mod.default("link.item.image.opacity");
+            link.render.item.image.opacity();
+            render.update.control.menu();
+            render.class();
+          }
+        }],
         border: [{
           element: ".control-link-item-border-range",
           path: "link.item.border",
@@ -10641,12 +10696,20 @@ var control = (function() {
         name: "is-link-item-color-by-" + state.get.current().link.item.color.by
       }, {
         remove: [
-          "is-link-item-opacity"
+          "is-link-item-color-opacity"
         ],
         condition: function() {
-          return (state.get.current().link.item.opacity < 1);
+          return (state.get.current().link.item.color.opacity < 1);
         },
-        name: "is-link-item-opacity"
+        name: "is-link-item-color-opacity"
+      }, {
+        remove: [
+          "is-link-item-image-opacity"
+        ],
+        condition: function() {
+          return (state.get.current().link.item.image.opacity < 1);
+        },
+        name: "is-link-item-image-opacity"
       }, {
         remove: [
           "is-link-item-display-direction-horizontal",
@@ -11433,11 +11496,11 @@ var control = (function() {
             ".control-link-item-color-apply",
             ".control-link-item-color-clear",
             ".control-link-item-color-rainbow",
-            "[for=control-link-item-opacity-range]",
+            "[for=control-link-item-color-opacity-range]",
-            ".control-link-item-opacity-range",
+            ".control-link-item-color-opacity-range",
-            ".control-link-item-opacity-number",
+            ".control-link-item-color-opacity-number",
-            ".control-link-item-opacity-default",
+            ".control-link-item-color-opacity-default",
-            ".control-link-item-opacity-helper",
+            ".control-link-item-color-opacity-helper",
             ".control-link-item-accent-rgb-color",
             ".control-link-item-accent-rgb-text",
             ".control-link-item-accent-helper",
@@ -11462,6 +11525,11 @@ var control = (function() {
             ".control-link-item-accent-apply",
             ".control-link-item-accent-clear",
             ".control-link-item-accent-rainbow",
+            "[for=control-link-item-image-opacity-range]",
+            ".control-link-item-image-opacity-range",
+            ".control-link-item-image-opacity-number",
+            ".control-link-item-image-opacity-default",
+            ".control-link-item-image-opacity-helper",
             ".control-link-orientation-top",
             ".control-link-orientation-bottom",
             ".control-link-orientation-helper",

src/js/link.js

@@ -347,6 +347,16 @@ var link = (function() {
     }
   };
 
+  mod.image = {
+    clear: function() {
+      bookmarks.get().forEach(function(arrayItem, index) {
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.image = "";
+        });
+      });
+    }
+  };
+
   mod.name = {
     show: function() {
       bookmarks.get().forEach(function(arrayItem, index) {
@@ -941,7 +951,6 @@ var link = (function() {
             "--link-item-color-focus-hover: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";";
         };
         if (helper.checkIfValidString(stagedLink.link.image)) {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-item-image";
           linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + "--link-item-image-url: url(" + helper.trimString(stagedLink.link.image) + ");"
         };
       };
@@ -2538,9 +2547,17 @@ var link = (function() {
       var html = helper.e("html");
       html.style.setProperty("--link-item-display-gutter", state.get.current().link.item.display.gutter);
     },
-    opacity: function() {
+    color: {
-      var html = helper.e("html");
+      opacity: function() {
-      html.style.setProperty("--link-item-opacity", state.get.current().link.item.opacity);
+        var html = helper.e("html");
+        html.style.setProperty("--link-item-color-opacity", state.get.current().link.item.color.opacity);
+      }
+    },
+    image: {
+      opacity: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--link-item-image-opacity", state.get.current().link.item.image.opacity);
+      }
     }
   };
 
@@ -3230,7 +3247,8 @@ var link = (function() {
     render.item.translate.x();
     render.item.translate.y();
     render.item.gutter();
-    render.item.opacity();
+    render.item.color.opacity();
+    render.item.image.opacity();
     render.area.width();
   };
 

src/js/state.js

@@ -188,7 +188,8 @@ var state = (function() {
             r: 0,
             g: 0,
             b: 0
-          }
+          },
+          opacity: 1
         },
         accent: {
           hsl: {
@@ -202,6 +203,9 @@ var state = (function() {
             b: 0
           }
         },
+        image: {
+          opacity: 1
+        },
         display: {
           visual: {
             show: true,
@@ -246,8 +250,7 @@ var state = (function() {
         },
         newTab: false,
         size: 1,
-        border: 0,
+        border: 0
-        opacity: 1
       },
       show: true,
       add: false,
@@ -447,6 +450,12 @@ var state = (function() {
         width: 100
       },
       item: {
+        color: {
+          opacity: 1
+        },
+        image: {
+          opacity: 1
+        },
         display: {
           visual: {
             letter: {
@@ -473,8 +482,7 @@ var state = (function() {
           }
         },
         size: 1,
-        border: 0,
+        border: 0
-        opacity: 1
       }
     },
     group: {

src/js/update.js

@@ -1094,6 +1094,14 @@ var update = (function() {
         data.state.link.item.display.order = "namevisual";
       };
       return data;
+    },
+    "5.44.0": function(data) {
+      data.state.link.item.color.opacity = data.state.link.item.opacity;
+      delete data.state.link.item.opacity;
+      data.state.link.item.image = {
+        opacity: 1
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.43.0";
+  var current = "5.44.0";
 
   var name = "Macabre Caterpillar";
 

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