Fix HDR white border (mmm, i guess?)

Assisted-by: Grok 4.5

Author: VentusUta

src/components/TopBar/OldTopBar.vue

@@ -472,7 +472,7 @@ defineExpose({
           style="
             mask-image: linear-gradient(to bottom,  black 20%, transparent);
           "
-          :style="{ backdropFilter: settings.disableFrostedGlass ? 'none' : 'blur(4px)' }"
+          :style="{ backdropFilter: 'var(--bew-filter-glass-1)' }"
           pos="absolute top-0 left-0" w-full h-80px
           pointer-events-none transform-gpu
         />

src/components/TopBar/TopBar.vue

@@ -509,7 +509,7 @@ defineExpose({
           style="
             mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 24px, rgba(0, 0, 0, 0.9) 44px, transparent);
           "
-          :style="{ backdropFilter: settings.disableFrostedGlass ? 'none' : 'blur(12px)' }"
+          :style="{ backdropFilter: 'var(--bew-filter-glass-1)' }"
           pos="absolute top-0 left-0" w-full h="[calc(var(--bew-top-bar-height)+16px)]"
           pointer-events-none transform-gpu
         />

src/contentScripts/index.ts

@@ -423,8 +423,8 @@ export function injectBottomCommentStyle() {
     styleEl.textContent = `
       div.bili-comments-bottom-fixed-wrapper > div {
         background-color: rgba(255, 255, 255, 0) !important;
-        backdrop-filter: blur(12px) saturate(120%);
-        -webkit-backdrop-filter: blur(12px) saturate(120%);
+        backdrop-filter: var(--bew-filter-glass-1);
+        -webkit-backdrop-filter: var(--bew-filter-glass-1);
         border-top-color: rgba(255, 255, 255, 0.22) !important;
       }
     `

src/styles/adaptedStyles/common/videoPlayer.scss

@@ -1,3 +1,35 @@
+html:has(.bpx-player-container[data-screen="full"]),
+html:has(.bpx-player-container[data-screen="web"]),
+html:has(:fullscreen),
+:host-context(html:has(.bpx-player-container[data-screen="full"])),
+:host-context(html:has(.bpx-player-container[data-screen="web"])),
+:host-context(html:has(:fullscreen)) {
+  --bew-filter-glass-1: none !important;
+  --bew-filter-glass-2: none !important;
+  --bew-shadow-edge-glow-1: 0 0 0 transparent !important;
+  --bew-shadow-edge-glow-2: 0 0 0 transparent !important;
+}
+
+html:has(.bpx-player-container[data-screen="full"]),
+html:has(.bpx-player-container[data-screen="web"]),
+html:has(:fullscreen) {
+  &,
+  & * {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
+}
+
+:host-context(html:has(.bpx-player-container[data-screen="full"])),
+:host-context(html:has(.bpx-player-container[data-screen="web"])),
+:host-context(html:has(:fullscreen)) {
+  &,
+  & * {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
+}
+
 .bewly-design {
   .bpx-player-toast-row .bpx-player-toast-item {
     --bpx-toast-fn-color: var(--bew-theme-color);

src/styles/adaptedStyles/pages/videoPage.scss

@@ -81,8 +81,8 @@
 
       // 浅色毛玻璃：别太白，否则还是“白块”
       background-color: rgba(241, 242, 243, 0.22);
-      backdrop-filter: blur(12px) saturate(120%);
-      -webkit-backdrop-filter: blur(12px) saturate(120%);
+      backdrop-filter: var(--bew-filter-glass-1);
+      -webkit-backdrop-filter: var(--bew-filter-glass-1);
 
       // 轻边框增加层次，缓解“矩形角明显”
       // 图片底实际效果好看，但纯色底实际效果不太好看，先预留着
@@ -112,8 +112,8 @@
       z-index: 0;
 
       background-color: rgba(241, 242, 243, 0.22);
-      backdrop-filter: blur(12px) saturate(120%);
-      -webkit-backdrop-filter: blur(12px) saturate(120%);
+      backdrop-filter: var(--bew-filter-glass-1);
+      -webkit-backdrop-filter: var(--bew-filter-glass-1);
 
       // 图片底实际效果好看，但纯色底实际效果不太好看，先预留着
       // border: 1px solid rgba(255, 255, 255, 0.22);