[bug] fix header shade when using reverse layout order

Author: zombieFox

src/css/header.css

@@ -38,13 +38,12 @@
 .header-shade{
 background-color: transparent;
 content:"";
-display: block;
-position: absolute;
 width:100%;
 height:100%;
+display: block;
+position: absolute;
 top:0;
 left:0;
-opacity:0;
 pointer-events: none;
 transition: background-color var(--layout-transition-speed-slow) ease-in-out, opacity var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out;
 }
@@ -55,16 +54,7 @@
 
 .is-header-shade-style-always .header-shade,
 .is-header-shade-style-scroll .header-shade{
-background-color:rgba(var(--header-shade-color));
-opacity:var(--header-shade-opacity);
-}
-
-.is-header-border-top .header-shade{
-border-top:calc(var(--layout-line-width) *var(--header-border-top)) solid rgb(var(--theme-accent));
-}
-
-.is-header-border-bottom .header-shade{
-border-bottom:calc(var(--layout-line-width) *var(--header-border-bottom)) solid rgb(var(--theme-accent));
+background-color:rgba(var(--header-shade-color),var(--header-shade-opacity));
 }
 
 .header-area{
@@ -82,6 +72,24 @@
 border-bottom:calc(var(--layout-line-width) *var(--header-border-bottom)) solid transparent;
 }
 
+.header-border{
+width:100%;
+height:100%;
+display: block;
+position: absolute;
+top:0;
+left:0;
+pointer-events: none;
+}
+
+.is-header-border-top .header-border{
+border-top:calc(var(--layout-line-width) *var(--header-border-top)) solid rgb(var(--theme-accent));
+}
+
+.is-header-border-bottom .header-border{
+border-bottom:calc(var(--layout-line-width) *var(--header-border-bottom)) solid rgb(var(--theme-accent));
+}
+
 .is-header-radius .header-shade{
 border-radius:calc(var(--theme-radius) *4);
 }

src/index.html

@@ -47,6 +47,7 @@
 
 <headerclass="header">
 <divclass="header-shade"></div>
+<divclass="header-border"></div>
 <divclass="header-area">
 <divclass="header-item-grid">
 <divclass="header-item header-greeting">

src/js/header.js

@@ -77,9 +77,11 @@ var header = (function(){
 
 var_renderShade=function(){
 varhtml=helper.e("html");
+varheaderRect=helper.e(".header").getBoundingClientRect();
+varlayoutRect=helper.e(".layout").getBoundingClientRect();
 varfontSize=parseInt(getComputedStyle(html).fontSize,10);
 varscrollTop=document.documentElement.scrollTop;
-varscrollHeight=document.documentElement.scrollHeight;
+// var scrollHeight = document.documentElement.scrollHeight;
 varinnerHeight=window.innerHeight;
 // if shade show
 if(state.get().header.shade.show){
@@ -91,16 +93,16 @@ var header = (function(){
 }elseif(state.get().header.shade.style=="scroll"){
 helper.removeClass(html,"is-header-shade-style-always");
 // check header position
-if(state.get().layout.order=="headerLink"){
+if(state.get().layout.order=="headerlink"){
 // check scroll position
-if(scrollTop>fontSize*2){
+if(scrollTop>fontSize*2&&headerRect.top==0){
 helper.addClass(html,"is-header-shade-style-scroll");
 }else{
 helper.removeClass(html,"is-header-shade-style-scroll");
 };
 }elseif(state.get().layout.order=="linkheader"){
 // check scroll position
-if(scrollTop<(scrollHeight-innerHeight)-(fontSize*2)){
+if(headerRect.bottom==innerHeight&&(scrollTop+innerHeight)<((scrollTop+layoutRect.bottom)-(fontSize*2))){
 helper.addClass(html,"is-header-shade-style-scroll");
 }else{
 helper.removeClass(html,"is-header-shade-style-scroll");

src/js/version.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="3.29.0";
+varcurrent="3.29.1";
 
 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.29.0",
+"version": "3.29.1",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"