Skip to content

Commit

Permalink
之前的思路有无法解决的缺陷，改为从父块继承 --av-background
Browse files Browse the repository at this point in the history
  • Loading branch information
@TCOTC
TCOTC committed Oct 5, 2024
1 parent 8988b03 commit 5840d85
Showing 1 changed file with 10 additions and 63 deletions.
73 changes: 10 additions & 63 deletions app/src/assets/scss/business/_av.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -538,14 +538,10 @@
// https://github.com/siyuan-note/siyuan/pull/12643
// 删除给 .av__container 添加(更新) style="--av-background:var(xxx)" 的逻辑之后就可以删除 --av-background: 后面的 !important
.protyle-wysiwyg--select {
.av__container {
--av-background: var(--b3-av-background-hl) !important;
}
}
.protyle-wysiwyg--hl {
.av__container {
--av-background: var(--b3-av-background-hl) !important;
}
.av__row--header,
.av__row--footer,
.av__row--footer .av__colsticky,
Expand All @@ -570,36 +566,20 @@ $backgrounds: (
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
$bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 外面
// 没有 选中块 时从最近的 带背景色的父块 继承
[data-node-id][style*="background-color: var(#{$bg-variable})"] {
.protyle-wysiwyg--select .av__container,
.protyle-wysiwyg--hl .av__container {
--av-background: var(#{$bg-select-variable}) !important;
}
}
}
}
@each $key, $count in $backgrounds {
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
$bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 外面与里面
[data-node-id][style*="background-color"] {
.protyle-wysiwyg--select [data-node-id][style*="background-color: var(#{$bg-variable})"] > .av__container,
.protyle-wysiwyg--hl [data-node-id][style*="background-color: var(#{$bg-variable})"] > .av__container {
--av-background: var(#{$bg-select-variable}) !important;
}
--av-background: var(#{$bg-variable}) !important;
}
}
}
@each $key, $count in $backgrounds {
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
$bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
// 带背景色的块 就是 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl
// 带背景色的块 在 选中块 的外层
[data-node-id][style*="background-color: var(#{$bg-variable})"] {
&.protyle-wysiwyg--select .av__container,
&.protyle-wysiwyg--hl .av__container{
.protyle-wysiwyg--select,
.protyle-wysiwyg--hl {
--av-background: var(#{$bg-select-variable}) !important;
}
}
Expand All @@ -609,10 +589,10 @@ $backgrounds: (
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
$bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
// 带背景色的块 就是 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 并且就是数据库块本身
// 带背景色的块 就是 选中块
[data-node-id][style*="background-color: var(#{$bg-variable})"] {
&.protyle-wysiwyg--select > .av__container,
&.protyle-wysiwyg--hl > .av__container{
&.protyle-wysiwyg--select ,
&.protyle-wysiwyg--hl {
--av-background: var(#{$bg-select-variable}) !important;
}
}
Expand All @@ -622,48 +602,15 @@ $backgrounds: (
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
$bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 里面
// 带背景色的块 在 选中块 的内层
.protyle-wysiwyg--select,
.protyle-wysiwyg--hl {
[data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
[data-node-id][style*="background-color: var(#{$bg-variable})"] {
--av-background: var(#{$bg-select-variable}) !important;
}
}
}
}
@each $key, $count in $backgrounds {
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
$bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 里面
.protyle-wysiwyg--select,
.protyle-wysiwyg--hl {
&[data-node-id][style*="background-color: var(#{$bg-variable})"] > .av__container {
--av-background: var(#{$bg-select-variable}) !important;
}
}
}
}
@each $key, $count in $backgrounds {
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
$bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
// 没有 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 时按最近的父块背景色
[data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
--av-background: var(#{$bg-variable}) !important;
}
}
}
@each $key, $count in $backgrounds {
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
$bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
// 没有 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 时按数据库块本身背景色
[data-node-id][style*="background-color: var(#{$bg-variable})"] > .av__container {
--av-background: var(#{$bg-variable}) !important;
}
}
}

.dragover__top,
.dragover__bottom {
Expand Down

0 comments on commit 5840d85

Please sign in to comment.