[feature] add link opacity controls

package-lock.json

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

package.json

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

@@ -183,11 +183,11 @@
 }
 
 .is-link-item-color-by-theme .link-panel-front {
-  background-color: rgb(var(--link-item-color-theme));
+  background-color: rgba(var(--link-item-color-theme), var(--link-item-opacity));
 }
 
 .is-link-item-color-by-custom .link-panel-front {
-  background-color: rgb(var(--link-item-color-custom));
+  background-color: rgba(var(--link-item-color-custom), var(--link-item-opacity));
 }
 
 .is-link-style-block .link-panel-front {
@@ -234,7 +234,7 @@
 .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));
+  background-color: rgba(var(--theme-color-03), var(--link-item-opacity));
 }
 
 .is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
@@ -735,7 +735,11 @@
   justify-content: flex-end;
   z-index: 2;
   transition: height var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast);
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+
+.is-edit .link-panel-back {
+  height: 100%;
+  top: 0;
 }
 
 .is-link-orientation-top .link-panel-back {
@@ -758,42 +762,65 @@
   top: var(--layout-line-width);
 }
 
+.is-edit.is-link-item-line-show .link-panel-back {
+  height: 100%;
+}
+
+.is-edit.is-link-item-line-show.is-link-orientation-top .link-panel-back,
+.is-edit.is-link-item-line-show.is-link-orientation-bottom .link-panel-back {
+  top: 0;
+}
+
+.is-link-orientation-top .link-panel-back {
+  clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--link-item-padding)), 0 calc(0% + var(--link-item-padding)));
+}
+
+.is-link-orientation-bottom .link-panel-back {
+  clip-path: polygon(0 calc(100% - var(--link-item-padding)), 100% calc(100% - var(--link-item-padding)), 100% 100%, 0 100%);
+}
+
+.is-link-orientation-top.is-link-item-line-show .link-panel-back {
+  clip-path: polygon(0 0, 100% 0, 100% calc(var(--layout-line-width) + var(--link-item-padding)), 0 calc(var(--layout-line-width) + var(--link-item-padding)));
+}
+
+.is-link-orientation-bottom.is-link-item-line-show .link-panel-back {
+  clip-path: polygon(0 calc(100% - var(--layout-line-width) - var(--link-item-padding)), 100% calc(100% - var(--layout-line-width) - var(--link-item-padding)), 100% 100%, 0 100%);
+}
+
+.is-link-orientation-top .link-item:focus .link-panel-back,
+.is-link-orientation-top .link-item:focus-within .link-panel-back,
+.is-link-orientation-top .link-item:hover .link-panel-back,
+.is-link-orientation-bottom .link-item:focus .link-panel-back,
+.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
+.is-link-orientation-bottom .link-item:hover .link-panel-back {
+  top: 0;
+  height: 100%;
+}
+
 .is-link-item-url-show.is-link-orientation-top .link-item:focus .link-panel-back,
 .is-link-item-url-show.is-link-orientation-top .link-item:focus-within .link-panel-back,
 .is-link-item-url-show.is-link-orientation-top .link-item:hover .link-panel-back {
-  height: 100%;
+  clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-url-height) + var(--link-item-padding)), 0 calc(var(--link-item-url-height) + var(--link-item-padding)));
-  top: 0;
-  clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-url-height) + 10%), 0 calc(var(--link-item-url-height) + 10%));
 }
 
 .is-link-item-url-show.is-link-orientation-bottom .link-item:focus .link-panel-back,
 .is-link-item-url-show.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
 .is-link-item-url-show.is-link-orientation-bottom .link-item:hover .link-panel-back {
-  height: 100%;
+  clip-path: polygon(0 calc(100% - calc(var(--link-item-url-height) + var(--link-item-padding))), 100% calc(100% - calc(var(--link-item-url-height) + var(--link-item-padding))), 100% 100%, 0 100%);
-  top: 0;
-  clip-path: polygon(0 calc(100% - calc(var(--link-item-url-height) + 10%)), 100% calc(100% - calc(var(--link-item-url-height) + 10%)), 100% 100%, 0 100%);
 }
 
-.is-edit.is-link-orientation-top .link-panel-back,
-.is-edit.is-link-orientation-top .link-panel-back,
 .is-edit.is-link-orientation-top .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:focus .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:focus-within .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:hover .link-panel-back {
-  height: 100%;
+  clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-edit-height) + var(--link-item-padding)), 0 calc(var(--link-item-edit-height) + var(--link-item-padding)));
-  top: 0;
-  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(var(--link-item-edit-height) - 10%)), 0 calc(100% - calc(var(--link-item-edit-height) - 10%)))
 }
 
-.is-edit.is-link-orientation-bottom .link-panel-back,
-.is-edit.is-link-orientation-bottom .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:focus .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:hover .link-panel-back {
-  height: 100%;
+  clip-path: polygon(0 calc(100% - var(--link-item-edit-height) - var(--link-item-padding)), 100% calc(100% - var(--link-item-edit-height) - var(--link-item-padding)), 100% 100%, 0 100%);
-  top: 0;
-  clip-path: polygon(0 calc(100% - calc(var(--link-item-edit-height) + 10%)), 100% calc(100% - calc(var(--link-item-edit-height) + 10%)), 100% 100%, 0 100%);
 }
 
 .link-control {

src/css/variables.css

@@ -116,6 +116,8 @@
   --link-item-display-translate-y:                      0em;
   --link-item-display-name-size:                        0.9em;
   --link-item-border:                                   0;
+  --link-item-opacity:                                  1;
+  --link-item-padding:                                  1em;
   /* layout */
   --layout-size:                                        1;
   --layout-width:                                       80%;
@@ -339,6 +341,10 @@
   --link-item-edit-height:                              50%;
 }
 
+.is-link-item-opacity {
+  --link-item-padding:                                  0em;
+}
+
 @media (min-width: 700px) {
   :root {
     /* theme */

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

@@ -30,5 +30,14 @@
         </div>
       </div>
     </div>
+    <hr>
+    <div class="form-wrap">
+      <label for="control-link-item-opacity-range">Opacity</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" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+      </div>
+    </div>
   </div>
 </div>

src/js/control.js

@@ -3848,6 +3848,54 @@ var control = (function() {
           func: function() {
             link.render.item.color.custom();
           }
+        }, {
+          element: ".control-link-item-opacity-range",
+          path: "link.item.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-opacity-number",
+            path: "link.item.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            link.render.item.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-link-item-opacity-number",
+          path: "link.item.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-opacity-range",
+            path: "link.item.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            link.render.item.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-link-item-opacity-default",
+          type: "button",
+          func: function() {
+            mod.default("link.item.opacity");
+            link.render.item.opacity();
+            render.update.control.header();
+            render.update.control.menu();
+            render.class();
+          }
         }],
         border: [{
           element: ".control-link-item-border-range",
@@ -6652,6 +6700,14 @@ var control = (function() {
           return state.get.current().link.show;
         },
         name: "is-link-item-color-by-" + state.get.current().link.item.color.by
+      }, {
+        remove: [
+          "is-link-item-opacity"
+        ],
+        condition: function() {
+          return (state.get.current().link.item.opacity < 1);
+        },
+        name: "is-link-item-opacity"
       }, {
         remove: [
           "is-link-item-display-direction-horizontal",

src/js/link.js

@@ -706,11 +706,6 @@ var link = (function() {
   };
 
   render.item = {
-    color: {
-      custom: function() {
-        helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.rgb.r + ", " + state.get.current().link.item.color.rgb.g + ", " + state.get.current().link.item.color.rgb.b);
-      }
-    },
     link: function() {
       var linkItemOptions = {
         tag: "div",
@@ -1296,6 +1291,11 @@ var link = (function() {
         });
       };
     },
+    color: {
+      custom: function() {
+        helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.rgb.r + ", " + state.get.current().link.item.color.rgb.g + ", " + state.get.current().link.item.color.rgb.b);
+      }
+    },
     border: function() {
       var html = helper.e("html");
       html.style.setProperty("--link-item-border", state.get.current().link.item.border);
@@ -1317,6 +1317,10 @@ var link = (function() {
     gutter: function() {
       var html = helper.e("html");
       html.style.setProperty("--link-item-display-gutter", state.get.current().link.item.display.gutter);
+    },
+    opacity: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--link-item-opacity", state.get.current().link.item.opacity);
     }
   };
 
@@ -1991,6 +1995,7 @@ var link = (function() {
     render.item.translate.x();
     render.item.translate.y();
     render.item.gutter();
+    render.item.opacity();
     render.area.width();
   };
 

src/js/state.js

@@ -217,7 +217,8 @@ var state = (function() {
         },
         newTab: false,
         size: 1,
-        border: 0
+        border: 0,
+        opacity: 1
       },
       show: true,
       add: false,
@@ -418,7 +419,8 @@ var state = (function() {
           }
         },
         size: 1,
-        border: 0
+        border: 0,
+        opacity: 1
       }
     },
     group: {

src/js/update.js

@@ -903,6 +903,10 @@ var update = (function() {
       data.state.header.clock.separator.text = ":";
       data.state.header.date.separator.text = "/";
       return data;
+    },
+    "5.1.0": function(data) {
+      data.state.link.item.opacity = 1;
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.0.0";
+  var current = "5.1.0";
 
   var name = "Zonked Tarsier";
 

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