[feature] add tile shadow options

package.json

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

@@ -131,12 +131,9 @@
   text-decoration: none;
 }
 
-.link-item:focus .link-panel-front,
+.is-link-item-shadow-show .link-item:focus .link-panel-front,
-.link-item:focus-within .link-panel-front,
+.is-link-item-shadow-show .link-item:focus-within .link-panel-front,
-.link-item:hover .link-panel-front {
+.is-link-item-shadow-show .link-item:hover .link-panel-front {
-  text-decoration: none;
-  outline: none;
-  background-color: rgb(var(--theme-gray-03));
   box-shadow: var(--layout-shadow-large);
 }
 
@@ -547,7 +544,12 @@
 .is-link-edit .link-item:hover .link-panel-front,
 .is-link-edit .link-item:focus .link-panel-front {
   height: calc(100% - var(--link-item-edit-height));
-  box-shadow: var(--layout-shadow-small);
+}
+
+.is-link-item-shadow-show.is-link-edit .link-panel-front,
+.is-link-item-shadow-show.is-link-edit .link-item:hover .link-panel-front,
+.is-link-item-shadow-show.is-link-edit .link-item:focus .link-panel-front {
+  box-shadow: var(--layout-shadow-medium);
 }
 
 .is-link-edit.is-link-item-url-show .link-item:focus .link-panel-front,

src/index.html

@@ -903,6 +903,11 @@
                   <label for="control-link-item-line-show">Tile line</label>
                 </div>
                 <hr>
+                <div class="input-wrap">
+                  <input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1">
+                  <label for="control-link-item-shadow-show">Tile shadow</label>
+                </div>
+                <hr>
                 <div class="input-wrap">
                   <input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="-1">
                   <label for="control-link-item-hoverscale">Grow on tile hover</label>

src/js/control.js

@@ -1947,6 +1947,13 @@ var control = (function() {
     func: function() {
       render.class();
     }
+  }, {
+    element: helper.e(".control-link-item-shadow-show"),
+    path: "link.item.shadow.show",
+    type: "checkbox",
+    func: function() {
+      render.class();
+    }
   }, {
     element: helper.e(".control-link-item-name-show"),
     path: "link.item.name.show",
@@ -2531,6 +2538,7 @@ var control = (function() {
       helper.removeClass(html, "is-link-display-alignment-bottomright");
       helper.removeClass(html, "is-link-item-url-show");
       helper.removeClass(html, "is-link-item-line-show");
+      helper.removeClass(html, "is-link-item-shadow-show");
       helper.removeClass(html, "is-link-item-hoverscale");
       helper.removeClass(html, "is-link-item-alignment-left");
       helper.removeClass(html, "is-link-item-alignment-center");
@@ -2559,6 +2567,9 @@ var control = (function() {
         if (state.get().link.item.line.show) {
           helper.addClass(html, "is-link-item-line-show");
         };
+        if (state.get().link.item.shadow.show) {
+          helper.addClass(html, "is-link-item-shadow-show");
+        };
         if (state.get().link.item.hoverScale) {
           helper.addClass(html, "is-link-item-hoverscale");
         };
@@ -2969,6 +2980,7 @@ var control = (function() {
       _disable.element(".control-link-item-order-namedisplay-helper", true);
       _disable.input(".control-link-item-url-show", true);
       _disable.input(".control-link-item-line-show", true);
+      _disable.input(".control-link-item-shadow-show", true);
       _disable.input(".control-link-item-hoverscale", true);
       _disable.element(".control-link-item-display-alignment-grid", true);
       _disable.element(".control-link-item-display-alignment-label", true);
@@ -3015,6 +3027,7 @@ var control = (function() {
         _disable.input(".control-link-item-name-show", false);
         _disable.input(".control-link-item-url-show", false);
         _disable.input(".control-link-item-line-show", false);
+        _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-style-block", false);

src/js/state.js

@@ -159,6 +159,9 @@ var state = (function() {
         line: {
           show: true
         },
+        shadow: {
+          show: true
+        },
         hoverScale: {
           show: true
         },

src/js/update.js

@@ -612,6 +612,12 @@ var update = (function() {
     "3.81.0": function(data) {
       data.state.link.orientation = "bottom";
       return data;
+    },
+    "3.82.0": function(data) {
+      data.state.link.item.shadow = {
+        show: true
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.81.0";
+  var current = "3.82.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.81.0",
+  "version": "3.82.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"