[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-colorvar(--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(){
 varscrollTop=document.documentElement.scrollTop;
 varscrollHeight=document.documentElement.scrollHeight;
 varinnerHeight=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
 }elseif(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");
 };
 }elseif(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 @@
 varversion=(function(){
 
-varcurrent="3.23.1";
+varcurrent="3.24.0";
 
 varcompare=function(a,b){
 varpa=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"