Improve "Fill column background with option color" (#16340)

* 🎨 Improve "Fill column background with option color"

fix https://github.com/siyuan-note/siyuan/issues/16337 02

* fix 01 02

* fix 03

app/appearance/themes/daylight/theme.css

@@ -188,7 +188,6 @@
 
     /* 数据库 */
     --b3-av-gallery-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, var(--b3-border-color) 0px 0px 0px 1px;
-    --b3-av-kanban-border: var(--b3-border-color);
     --b3-av-kanban-content-hover-bg: var(--b3-theme-surface);
 
     /* 嵌入块 */

app/appearance/themes/midnight/theme.css

@@ -187,7 +187,6 @@
 
     /* 数据库 */
     --b3-av-gallery-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, var(--b3-border-color) 0px 0px 0px 1px;
-    --b3-av-kanban-border: var(--b3-border-color);
     --b3-av-kanban-content-hover-bg: var(--b3-theme-surface);
 
     /* 嵌入块 */

app/src/assets/scss/business/_av.scss

@@ -376,7 +376,7 @@
     }
 
     &-fields {
-      border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius);
+      border-radius: var(--b3-border-radius);
       flex: 1;
       transition: background 100ms ease-out;
       white-space: nowrap;
@@ -430,6 +430,10 @@
       }
     }
 
+    &-cover + &-fields {
+      border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius);
+    }
+
     &-field {
       position: relative;
     }
@@ -1010,9 +1014,20 @@
       width: 260px;
       padding: 8px;
       border-radius: var(--b3-border-radius);
-      background-color: var(--b3-av-kanban-bg);
+      position: relative;
       flex-shrink: 0;
 
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-color: var(--b3-av-kanban-border);
+        opacity: 0.161;
+        border-radius: inherit;
+        pointer-events: none;
+        z-index: 0;
+      }
+
       &:hover {
         .av__group-icon {
           opacity: 1;
@@ -1036,18 +1051,81 @@
       }
 
       .av__gallery-item {
-        background-color: var(--b3-av-kanban-content-bg);
+        position: relative;
-        box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-border) 0 0 0 1px;
+        box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-border, var(--b3-border-color)) 0 0 0 1px;
+
+        &::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background-color: var(--b3-av-kanban-border);
+          opacity: 0.278;
+          border-radius: inherit;
+          pointer-events: none;
+          z-index: 0;
+        }
+
+        &--select::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background-color: var(--b3-theme-primary-lighter);
+          border-radius: inherit;
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        // 禁用父级 hover 规则对背景色的改变，避免与 ::before 伪元素冲突
+        &:hover {
+          .av__gallery-cover {
+            background-color: var(--b3-theme-surface);
+          }
+
+          .av__gallery-fields {
+            background-color: transparent;
+          }
+        }
+
+        .av__gallery-fields,
+        .av__gallery-cover {
+          position: relative;
+
+          &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: transparent;
+            opacity: 0.361;
+            border-radius: inherit;
+            pointer-events: none;
+            z-index: 0;
+            transition: background-color 100ms ease-out;
+          }
+        }
 
         &:hover .av__gallery-fields,
         &:hover .av__gallery-cover {
-          background-color: var(--b3-av-kanban-content-hover-bg);
+          &::before {
+            background-color: var(--b3-av-kanban-content-hover-bg);
+            opacity: 0.65;
+          }
         }
       }
 
       .av__gallery-cover {
-        background-color: var(--b3-av-kanban-content-bg);
+        position: relative;
         border-bottom: 1px solid var(--b3-av-kanban-border);
+
+        &::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background-color: var(--b3-av-kanban-border);
+          opacity: 0.278;
+          border-radius: inherit;
+          pointer-events: none;
+          z-index: 0;
+        }
       }
     }
   }

app/src/protyle/render/av/kanban/render.ts

@@ -200,21 +200,16 @@ export const renderKanban = async (options: {
     }
     const view: IAVGallery = data.view as IAVKanban;
     let bodyHTML = "";
-    let isSelectGroup = false;
     view.groups.forEach((group: IAVKanban) => {
         if (group.groupHidden === 0) {
             let selectBg = "";
-            if (group.fillColBackgroundColor) {
+            if (group.fillColBackgroundColor && ["mSelect", "select"].includes(group.groupKey.type)) {
-                let color = "";
+                if (group.groupValue.mSelect) {
-                if (["mSelect", "select"].includes(group.groupValue.type)) {
+                    // 单选多选字段分组使用选项颜色
-                    isSelectGroup = true;
+                    selectBg = `style="--b3-av-kanban-border: var(--b3-font-background${group.groupValue.mSelect[0].color}); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);"`;
-                    color = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${group.groupValue.mSelect[0].color}`);
+                } else {
-                }
+                    // _@default@_ 分组使用 var(--b3-border-color)
-                if (isSelectGroup) {
+                    selectBg = 'style="--b3-av-kanban-border: var(--b3-border-color); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);"';
-                    if (!color) {
-                        color = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
-                    }
-                    selectBg = `style="--b3-av-kanban-border:${color};--b3-av-kanban-bg:${color}29;--b3-av-kanban-content-bg:${color}47;--b3-av-kanban-content-hover-bg:${color}5c;"`;
                 }
             }
             bodyHTML += `<div class="av__kanban-group${group.cardSize === 0 ? " av__kanban-group--small" : (group.cardSize === 2 ? " av__kanban-group--big" : "")}"${selectBg}>

app/src/protyle/render/av/render.ts

@@ -732,14 +732,15 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                     item.removeAttribute("style");
                     return;
                 }
-                let selectBg;
                 const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
                 if (nameElement) {
-                    selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
+                    const colorMatch = nameElement.style.backgroundColor.match(/--b3-font-background(\d+)/);
+                    if (colorMatch) {
+                        item.setAttribute("style", `--b3-av-kanban-border: var(--b3-font-background${colorMatch[1]}); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);`);
+                    }
                 } else {
-                    selectBg = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
+                    item.setAttribute("style", "--b3-av-kanban-border: var(--b3-border-color); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);");
                 }
-                item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
             });
         });
         return;

app/src/util/assets.ts

@@ -57,20 +57,6 @@ export const loadAssets = (data: Config.IAppearance) => {
         styleElement.remove();
     }
     /// #if !MOBILE
-    setTimeout(() => {
-        document.querySelectorAll(".av__kanban-group").forEach(item => {
-            if (item.getAttribute("style")) {
-                let selectBg;
-                const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
-                if (nameElement) {
-                    selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
-                } else {
-                    selectBg = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
-                }
-                item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
-            }
-        });
-    }, Constants.TIMEOUT_TRANSITION);
     getAllModels().graph.forEach(item => {
         item.searchGraph(false);
     });