[design] improve link background image opacity

Author: zombieFox

package-lock.json

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

@@ -178,12 +178,13 @@
   z-index: 3;
   overflow: hidden;
   text-decoration: none;
+  outline: none;
   user-select: none;
   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);
 }
 
 .link-image {
-  background-image: var(--link-image-url);
+  background-image: var(--link-item-image-url);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -195,10 +196,7 @@
   height: 100%;
   z-index: 1;
   pointer-events: none;
-}
-
-.link-panel-front {
-  background-color: rgba(var(--link-item-color), var(--link-item-opacity));
+  transition: opacity var(--layout-timing-extra-fast);
 }
 
 .is-link-style-block .link-panel-front {
@@ -231,16 +229,27 @@
   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-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/link.css

@@ -941,7 +941,8 @@ 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[1].value = linkItemOptions.attr[1].value + "--link-image-url: url(" + helper.trimString(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) + ");"
         };
       };
       var linkItem = helper.makeNode(linkItemOptions);

src/js/link.js

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

src/js/version.js

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