[refactor] improve header shade logic

Author: zombieFox

src/css/header.css

@@ -3,6 +3,11 @@
   display: flex;
   flex-direction: row;
   z-index: var(--z-index-header);
+  pointer-events: none;
+}
+
+.is-header-shade-show .header {
+  pointer-events: all;
 }
 
 .is-header-area-alignment-horizontal-left .header {
@@ -39,20 +44,19 @@
   height: 100%;
   top: 0;
   left: 0;
+  opacity: 0;
   pointer-events: none;
+  transition: background-color var(--layout-animation-speed-slow) ease-in-out, border-radius var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .is-header-radius .header-shade {
   border-radius: calc(var(--theme-radius) * 4);
 }
 
-.is-header-shade-show .header-shade {
-  background-color: rgba(var(--header-shade-color), var(--header-shade-opacity));
-}
-
+.is-header-shade-style-always .header-shade,
 .is-header-shade-style-scroll .header-shade {
-  transition: background-color var(--layout-animation-speed-slow) ease-in-out;
-  animation: none;
+  background-color: rgba(var(--header-shade-color));
+  opacity: var(--header-shade-opacity);
 }
 
 .is-header-border-top .header-shade {
@@ -67,6 +71,7 @@
   padding: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
   position: relative;
   width: var(--header-area-width);
+  pointer-events: none;
 }
 
 .is-header-border-top .header-area {
@@ -109,7 +114,6 @@
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
-  pointer-events: none;
 }
 
 .is-header-item-alignment-horizontal-left .header-item-grid {

src/css/variables.css

@@ -27,7 +27,7 @@
   --theme-shade-20: 250, 250, 250;
   /* header */
   --header-area-width: 100%;
-  --header-shade-color: transparent;
+  --header-shade-color: var(--theme-gray-01);
   --header-shade-opacity: 0.95;
   --header-search-width: 0%;
   --header-border-top: 0;

src/js/control.js

@@ -2320,11 +2320,8 @@ var control = (function() {
       };
       var _shade = function() {
         helper.removeClass(html, "is-header-shade-show");
-        helper.removeClass(html, "is-header-shade-style-always");
-        helper.removeClass(html, "is-header-shade-style-scroll");
         if (state.get().header.shade.show) {
           helper.addClass(html, "is-header-shade-show");
-          helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
         };
         if (state.get().header.radius) {
           helper.addClass(html, "is-header-radius");

src/js/header.js

@@ -81,28 +81,35 @@ var header = (function() {
     var scrollTop = document.documentElement.scrollTop;
     var scrollHeight = document.documentElement.scrollHeight;
     var innerHeight = window.innerHeight;
+    // if shade show
     if (state.get().header.shade.show) {
+      // shade always
       if (state.get().header.shade.style == "always") {
-        html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
+        helper.removeClass(html, "is-header-shade-style-scroll");
+        helper.addClass(html, "is-header-shade-style-always");
+        // shade scroll
       } else if (state.get().header.shade.style == "scroll") {
+        helper.removeClass(html, "is-header-shade-style-always");
+        // check header position
         if (state.get().layout.order == "headerLink") {
+          // check scroll position
           if (scrollTop > fontSize * 2) {
-            html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
+            helper.addClass(html, "is-header-shade-style-scroll");
           } else {
-            html.style.setProperty("--header-shade-color", "transparent");
+            helper.removeClass(html, "is-header-shade-style-scroll");
           };
         } else if (state.get().layout.order == "linkHeader") {
+          // check scroll position
           if (scrollTop < (scrollHeight - innerHeight) - (fontSize * 2)) {
-            html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
+            helper.addClass(html, "is-header-shade-style-scroll");
           } else {
-            html.style.setProperty("--header-shade-color", "transparent");
+            helper.removeClass(html, "is-header-shade-style-scroll");
           };
         };
-      } else {
-        html.style.setProperty("--header-shade-color", "transparent");
       };
     } else {
-      html.style.setProperty("--header-shade-color", "transparent");
+      helper.removeClass(html, "is-header-shade-style-scroll");
+      helper.removeClass(html, "is-header-shade-style-always");
     };
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.23.1";
+  var current = "3.24.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.23.1",
+  "version": "3.24.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"