fix: #188 修复设置背景滤波器的次级菜单样式问题 | Fixed the issue of the style of the secondary menu for setting the backdrop filter.

Author: Zuoqiu-Yingyi

CHANGELOG.md

@@ -10,6 +10,7 @@
 - 修复 jupyter 语言设置错误问题 | Fixed the issue of jupyter language setting error.
 - 默认禁用部分功能快捷键 | Disable some function shortcuts by default.
 - 调整移动端侧边菜单样式 | Adjust the style of the side menu on the mobile client.
+- [#188](https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/issues/188) 修复设置背景滤波器的次级菜单样式问题 | Fixed the issue of the style of the secondary menu for setting the backdrop filter.
 
 ## v1.7.3/2023-03-10
 

style/config/config.css

@@ -195,11 +195,9 @@
   /* 图片反色滤波器 | Image inverted filter */
   --custom-image-filter-invert: invert(100%);
   /* 背景图片滤波器 | Background image filter */
-  /* --custom-backdrop-filter: blur(16px); */
-  --custom-backdrop-filter: none;
-  /* 悬浮面板滤波器(引用预览, 菜单) | Hover panel filters (reference preview, menu)*/
-  /* --custom-backdrop-popover-filter: blur(2px); */
-  --custom-backdrop-popover-filter: none;
+  --custom-backdrop-filter: unset;
+  /* 悬浮面板滤波器(引用预览) | Hover panel filters (reference preview)*/
+  --custom-backdrop-popover-filter: unset;
   /* 悬浮预览窗口最小高度 | The minimum height of the hover preview window */
   --custom-popover-min-height: 50%;
   /* 悬浮预览窗口最大宽度 | The maximum width of the hover preview window */

style/config/config.less

@@ -261,12 +261,12 @@
     --custom-image-filter-invert: invert(100%);
 
     /* 背景图片滤波器 | Background image filter */
-    /* --custom-backdrop-filter: blur(16px); */
-    --custom-backdrop-filter: none;
+    // --custom-backdrop-filter: blur(16px);
+    --custom-backdrop-filter: unset;
 
-    /* 悬浮面板滤波器(引用预览, 菜单) | Hover panel filters (reference preview, menu)*/
-    /* --custom-backdrop-popover-filter: blur(2px); */
-    --custom-backdrop-popover-filter: none;
+    /* 悬浮面板滤波器(引用预览) | Hover panel filters (reference preview)*/
+    // --custom-backdrop-popover-filter: blur(2px);
+    --custom-backdrop-popover-filter: unset;
 
     /* 悬浮预览窗口最小高度 | The minimum height of the hover preview window */
     --custom-popover-min-height: 50%;

style/module/hover-menu.css

@@ -1,7 +1,6 @@
 /* 弹出菜单 */
 .b3-menu {
   background-color: var(--custom-popover-function-menu-background-color);
-  backdrop-filter: var(--custom-backdrop-popover-filter);
 }
 .b3-menu:not(#menu) {
   padding: var(--custom-popover-menu-padding-width);
@@ -17,7 +16,6 @@
 .b3-menu .b3-menu__item > .b3-menu__submenu {
   /* 子菜单 */
   background-color: var(--custom-popover-function-menu-background-color);
-  backdrop-filter: var(--custom-backdrop-popover-filter);
   padding: var(--custom-popover-menu-padding-width);
 }
 .b3-menu .b3-menu__item .b3-menu__accelerator {
@@ -82,7 +80,6 @@
 .b3-list.b3-list--background#replaceHistoryList,
 .b3-list.b3-list--background#menu {
   background-color: var(--custom-popover-function-menu-background-color) !important;
-  backdrop-filter: var(--custom-backdrop-popover-filter);
   box-sizing: border-box;
 }
 .b3-list.b3-list--background.protyle-hint {

style/module/hover-menu.less

@@ -65,7 +65,7 @@
 // 菜单
 .b3-menu {
     background-color: var(--custom-popover-function-menu-background-color);
-    backdrop-filter: var(--custom-backdrop-popover-filter);
+    // backdrop-filter: var(--custom-backdrop-popover-filter);
 
     // 非移动端侧边菜单
     &:not(#menu) {
@@ -75,6 +75,7 @@
     .b3-menu__item {
         /* 菜单项 */
         background-color: transparent;
+        // backdrop-filter: var(--custom-backdrop-popover-filter);
 
         &.b3-menu__item--current {
             /* 鼠标悬停菜单项 */
@@ -84,7 +85,7 @@
         >.b3-menu__submenu {
             /* 子菜单 */
             background-color: var(--custom-popover-function-menu-background-color);
-            backdrop-filter: var(--custom-backdrop-popover-filter);
+            // backdrop-filter: var(--custom-backdrop-popover-filter);
             padding: var(--custom-popover-menu-padding-width);
         }
 
@@ -184,7 +185,7 @@
     // 移动端右侧侧边栏
     &#menu {
         background-color: var(--custom-popover-function-menu-background-color) !important;
-        backdrop-filter: var(--custom-backdrop-popover-filter);
+        // backdrop-filter: var(--custom-backdrop-popover-filter);
         box-sizing: border-box;
     }