diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css index 8779427ea..f5d7f0e3b 100644 --- a/app/appearance/themes/daylight/theme.css +++ b/app/appearance/themes/daylight/theme.css @@ -108,6 +108,7 @@ --b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms; --b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms; --b3-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms; + --b3-background-transition: background 20ms ease-in 0s; /* 下拉菜单 */ --b3-select-background: url("data:image/svg+xml;utf8,") no-repeat right 2px center var(--b3-theme-background); diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css index 88c06f0ba..f839b616f 100644 --- a/app/appearance/themes/midnight/theme.css +++ b/app/appearance/themes/midnight/theme.css @@ -108,6 +108,7 @@ --b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms; --b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms; --b3-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms; + --b3-background-transition: background 20ms ease-in 0s; /* 下拉菜单 */ --b3-select-background: url("data:image/svg+xml;utf8,") no-repeat right 2px center var(--b3-theme-background); diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index df81430a8..bb60c0915 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -295,7 +295,6 @@ padding: 5px 8px; display: flex; align-items: center; - transition: background 20ms ease-in 0s; overflow: inherit; // 保证列宽和顺序调整的拖拽点样式 border-right-color: transparent; @@ -324,6 +323,7 @@ margin: 0 0 0 5px; } } + } .block__icon { @@ -426,7 +426,7 @@ width: 5px; height: 100%; right: -2.5px; - transition: background 20ms ease-in 0s; + transition: var(--b3-background-transition); z-index: 1; &:hover { @@ -521,6 +521,7 @@ .av__cell--active, .av__counter { background-color: var(--b3-av-background-hl) !important; + transition: var(--b3-background-transition); } } diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss index 975831751..cfc5ef768 100644 --- a/app/src/assets/scss/protyle/_wysiwyg.scss +++ b/app/src/assets/scss/protyle/_wysiwyg.scss @@ -459,7 +459,7 @@ &--hl, &--hl .hljs { - transition: var(--b3-transition); + transition: var(--b3-background-transition); background-color: var(--b3-theme-primary-lightest) !important; } diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 476662789..57329d17b 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -4,7 +4,7 @@ import {Constants} from "../../../constants"; import {addDragFill, renderCell} from "./cell"; import {unicode2Emoji} from "../../../emoji"; import {focusBlock} from "../../util/selection"; -import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest"; +import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest"; import {stickyRow} from "./row"; import {getCalcValue} from "./calc"; import {renderAVAttribute} from "./blockAttr"; @@ -191,8 +191,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)} viewData = item; } }); - - e.firstElementChild.outerHTML = `
+ let avBackground = '--av-background:var(--b3-theme-background)' + if (e.style.backgroundColor) { + avBackground = avBackground + e.style.backgroundColor + } else if (hasClosestByAttribute(e, "data-type", "NodeBlockQueryEmbed")) { + avBackground = avBackground + 'var(--b3-theme-surface)' + } + e.firstElementChild.outerHTML = `
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index e127c6f9b..f94782d3f 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -532,7 +532,7 @@ export class WYSIWYG { } // av cell select const avCellElement = hasClosestByClassName(target, "av__cell"); - if (!protyle.disabled && avCellElement && avCellElement.dataset.id) { + if (!protyle.disabled && avCellElement && avCellElement.dataset.id && !hasClosestByAttribute(avCellElement, "data-type", "NodeBlockQueryEmbed")) { const nodeElement = hasClosestBlock(avCellElement); if (!nodeElement) { return;