Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
简化代码
Browse files Browse the repository at this point in the history
TCOTC committed Oct 4, 2024
1 parent 0c6716a commit b2dbe23
Showing 1 changed file with 32 additions and 87 deletions.
119 changes: 32 additions & 87 deletions app/src/assets/scss/business/_av.scss
Original file line number Diff line number Diff line change
@@ -535,86 +535,12 @@
}
}

// https://github.com/siyuan-note/siyuan/pull/12643
// 删除给 .av__container 添加(更新) style="--av-background:var(xxx)" 的逻辑之后就可以删除 --av-background: 后面的 !important

// 没有 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl
// Define a map of all backgrounds and their corresponding selected state
$backgrounds: (
"font-background" 13,
"card-error-background" 1,
"card-warning-background" 1,
"card-info-background" 1,
"card-success-background" 1,
);
// Loop through each background to generate the corresponding styles
@each $key, $count in $backgrounds {
@for $i from 1 through $count {
$bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");

[data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
--av-background: var(#{$bg-variable}) !important;
}
}
}

// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 外面
@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");

[data-node-id][style*="background-color: var(#{$bg-variable})"] .protyle-wysiwyg--select .av__container,
[data-node-id][style*="background-color: var(#{$bg-variable})"] .protyle-wysiwyg--hl .av__container {
--av-background: var(#{$bg-select-variable}) !important;
}
}
}

// 带背景色的块 就是 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl
@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");

[data-node-id][style*="background-color: var(#{$bg-variable})"].protyle-wysiwyg--select .av__container,
[data-node-id][style*="background-color: var(#{$bg-variable})"].protyle-wysiwyg--hl .av__container {
--av-background: var(#{$bg-select-variable}) !important;
}
}
}

// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 里面
.protyle-wysiwyg--select {
// https://github.com/siyuan-note/siyuan/pull/12643
.av__container {
--av-background: var(--b3-av-background-hl) !important;
}

$backgrounds: (
"font-background" 13,
"card-error-background" 1,
"card-warning-background" 1,
"card-info-background" 1,
"card-success-background" 1,
);

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

[data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
--av-background: var(#{$bg-select-variable}) !important;
}
&[data-node-id][style*="background-color: var(#{$bg-variable})"] > .av__container {
--av-background: var(#{$bg-select-variable}) !important;
}
}
}
}
.protyle-wysiwyg--hl {
// https://github.com/siyuan-note/siyuan/pull/12643
.av__container {
--av-background: var(--b3-av-background-hl) !important;
}
@@ -629,23 +555,42 @@ $backgrounds: (
.av__counter {
transition: var(--b3-background-transition);
}
}

$backgrounds: (
"font-background" 13,
"card-error-background" 1,
"card-warning-background" 1,
"card-info-background" 1,
"card-success-background" 1,
);

@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");
// https://github.com/siyuan-note/siyuan/pull/12643
// 删除给 .av__container 添加(更新) style="--av-background:var(xxx)" 的逻辑之后就可以删除 --av-background: 后面的 !important

[data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
// Define a map of all backgrounds and their corresponding selected state
$backgrounds: (
"font-background" 13,
"card-error-background" 1,
"card-warning-background" 1,
"card-info-background" 1,
"card-success-background" 1,
);
// Loop through each background to generate the corresponding styles
@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;
}
[data-node-id][style*="background-color: var(#{$bg-variable})"] {
// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 外面
.protyle-wysiwyg--select .av__container,
.protyle-wysiwyg--hl .av__container,
// 带背景色的块 就是 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl
&.protyle-wysiwyg--select .av__container,
&.protyle-wysiwyg--hl .av__container{
--av-background: var(#{$bg-select-variable}) !important;
}
}
// 带背景色的块 在 .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__container {
--av-background: var(#{$bg-select-variable}) !important;
}

0 comments on commit b2dbe23

Please sign in to comment.