From b7212a2b168a549e54e108f89f06157f933166f7 Mon Sep 17 00:00:00 2001
From: Lex Lim <hyperzlink@outlook.com>
Date: Tue, 24 May 2022 21:37:03 +0800
Subject: [PATCH] Fix styles

---
 .../ext.isekai.backgroundWidget/global.less   |  1 +
 .../ext.isekai.backgroundWidget/timeless.js   |  8 +-
 .../ext.isekai.backgroundWidget/timeless.less | 84 ++++---------------
 3 files changed, 23 insertions(+), 70 deletions(-)

diff --git a/modules/ext.isekai.backgroundWidget/global.less b/modules/ext.isekai.backgroundWidget/global.less
index bdbeb3d..ed13e83 100644
--- a/modules/ext.isekai.backgroundWidget/global.less
+++ b/modules/ext.isekai.backgroundWidget/global.less
@@ -15,6 +15,7 @@
 
     .bgimg-backdrop-blur {
         backdrop-filter: @backdropFilter;
+        -webkit-backdrop-filter: @backdropFilter;
     }
     
     /* 插件补丁 */
diff --git a/modules/ext.isekai.backgroundWidget/timeless.js b/modules/ext.isekai.backgroundWidget/timeless.js
index 06e4dc9..c3b37da 100644
--- a/modules/ext.isekai.backgroundWidget/timeless.js
+++ b/modules/ext.isekai.backgroundWidget/timeless.js
@@ -16,15 +16,15 @@ $(function(){
     function initBackgroundImage(params){
         let bgImg = new isekai.BgImage();
 
-        let bgImgElement = $('body').append('<div class="isekai-bgimg"></div>').find('div.isekai-bgimg:last');
-        let navbarBg = $('body').append('<div class="isekai-navbar-bg"></div>').find('div.isekai-navbar-bg:last');
+        // let bgImgElement = $('body').append('<div class="isekai-bgimg"></div>').find('div.isekai-bgimg:last');
+        let bgImgElement = $('body');
 
         bgImg.addViewport(bgImgElement);
 
-        bgImg.addBlurBackground(navbarBg);
         bgImg.addBlurBackground($('.sidebar-chunk'));
+        bgImg.addBlurBackground($('#mw-header-container'));
         bgImg.addBlurBackground($('#mw-content'));
-        bgImg.addBlurBackground($('#mw-content-container'));
+        bgImg.addBlurBackground($('#content-bottom-stuff'));
         bgImg.addBlurBackground($('#mw-footer-container'));
 
         if(!('xcenter' in params)){
diff --git a/modules/ext.isekai.backgroundWidget/timeless.less b/modules/ext.isekai.backgroundWidget/timeless.less
index 0e4bbe4..46bd25c 100644
--- a/modules/ext.isekai.backgroundWidget/timeless.less
+++ b/modules/ext.isekai.backgroundWidget/timeless.less
@@ -1,7 +1,7 @@
 @globalRadius: 0.4em;
 @globalBgColor: rgba(252, 252, 252, 0.8);
 @globalBgLoadingColor: rgba(252, 252, 252, 1);
-@headerBgColor: transparent;
+@headerBgColor: rgba(252, 252, 252, 0.8);
 @footerBgColor: rgba(149, 149, 149, 0.7);
 @footerBgLoadingColor: rgba(149, 149, 149, 1);
 @globalBoxShadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
@@ -22,26 +22,16 @@
     height: 100vh;
   }
 
-  .isekai-navbar-bg {
-    position: fixed;
-    z-index: 99;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 3.125em;
-  }
-
   body {
     background: #f3f3f3;
   }
 
-  #mw-content-container {
+  #mw-content-container,
+  #mw-content-block {
     background: none;
-    backdrop-filter: none;
   }
 
   #mw-footer-container {
-    position: relative;
     background: none;
     background-color: @footerBgColor;
 
@@ -64,12 +54,12 @@
     }
   }
 
-  #mw-content-container::after {
-    display: none;
-  }
-
   #mw-header-container {
     background: @headerBgColor;
+
+    &.bgimg-background-loading {
+      background-color: @footerBgLoadingColor;
+    }
   }
 
   #simpleSearch {
@@ -82,58 +72,31 @@
     }
   }
 
-  #mw-content {
-    position: relative;
-  }
-
-  @media screen and (max-width: 850px) {
-    .isekai-navbar-bg {
-      display: none;
-    }
-  }
-
   @media screen and (max-width: 1099px) {
-    #mw-content {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border: none;
-      background: none;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-
-    #mw-content-block {
+    body {
       background: none;
     }
 
-    #mw-content-container {
-      background-color: @globalBgColor;
-      backdrop-filter: @backdropFilter;
-
-      &.bgimg-background-loading {
-        background-color: @globalBgLoadingColor;
-      }
-    }
-
-    #mw-header-hack {
-      z-index: 99;
-    }
-
     #mw-site-navigation .sidebar-chunk,
     #mw-related-navigation .sidebar-chunk {
       background: none;
       backdrop-filter: none;
+      -webkit-backdrop-filter: none;
     }
 
-    .isekai-bgimg {
-      display: none;
+    #mw-content {
+      border-bottom-left-radius: 0em;
+      border-bottom-right-radius: 0em;
+    }
+
+    #mw-header-container {
+      background: #fff;
     }
   }
 
   @media screen and (min-width: 1100px) {
     #mw-site-navigation .sidebar-chunk,
     #mw-related-navigation .sidebar-chunk {
-      position: relative;
       border: none;
       border-radius: @globalRadius;
       box-shadow: @globalBoxShadow;
@@ -168,10 +131,6 @@
   }
 
   &.bgimg-fallback {
-    #mw-content-container {
-      background: none !important;
-    }
-
     #mw-footer-container {
       --bgimg-overlay-color: @footerBgColor;
     }
@@ -180,21 +139,14 @@
       #mw-content {
         background: none !important;
       }
-
-      #mw-content-container {
-        background: var(--bgimg-blur-image), var(--bgimg-overlay-color, @globalBgColor) !important;
-        background-blend-mode: saturation !important;
-        background-attachment: fixed !important;
-        background-size: var(--bgimg-bg-size) !important;
-        background-position: var(--bgimg-bg-pos) !important;
-      }
     }
 
     @media screen and (max-width: 1099px) {
+
       #mw-site-navigation .sidebar-chunk,
       #mw-related-navigation .sidebar-chunk {
         background: none !important;
       }
     }
   }
-}
+}
\ No newline at end of file