Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-16 14:40:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
* 🎨 Improve "Fill column background with option color"

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

* fix 01 02

* fix 03
This commit is contained in:
Jeffrey Chen 2025-11-17 09:11:28 +08:00 • committed by GitHub
parent 4f17c7fc8d
commit cc59bd1087
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 96 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/appearance/themes/daylight/theme.css
View file

@ -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);
/* 嵌入块 */

1
app/appearance/themes/midnight/theme.css
View file

@ -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);
/* 嵌入块 */

90
app/src/assets/scss/business/_av.scss
View file

@ -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);
box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-border) 0 0 0 1px;
position: relative;
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;
}
}
}
}

19
app/src/protyle/render/av/kanban/render.ts
View file

@ -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) {
let color = "";
if (["mSelect", "select"].includes(group.groupValue.type)) {
isSelectGroup = true;
color = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${group.groupValue.mSelect[0].color}`);
}
if (isSelectGroup) {
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;"`;
if (group.fillColBackgroundColor && ["mSelect", "select"].includes(group.groupKey.type)) {
if (group.groupValue.mSelect) {
// 单选多选字段分组使用选项颜色
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);"`;
} else {
// _@default@_ 分组使用 var(--b3-border-color)
selectBg = 'style="--b3-av-kanban-border: var(--b3-border-color); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);"';
}
}
bodyHTML += `<div class="av__kanban-group${group.cardSize === 0 ? " av__kanban-group--small" : (group.cardSize === 2 ? " av__kanban-group--big" : "")}"${selectBg}>

9
app/src/protyle/render/av/render.ts
View file

@ -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;

14
app/src/util/assets.ts
View file

@ -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);
});