Improve blocks highlighting effects

[TCOTC]

更改高亮块的实现方式

• 目前思源的块高亮是通过更改元素的背景色实现的，存在很多缺陷
• Improve the styling of the selected blocks #12837 通过 CSS 解决的方式无法完全覆盖到所有情况，还需要每个主题单独适配，过于复杂
• Notion 的方案操作 DOM 过于频繁，并且也无法完全覆盖到所有情况，样式问题比较多（FlowUs也是）

看到 Wolai 的方案相当完美，给一个单独的元素设置半透明的背景色，下面的元素都能正确叠加颜色：

default.webm

[Vanessa219]

改进列表下 av

[Vanessa219]

定住列还有一点瑕疵搞不定，先这样吧

[TCOTC]

Wolai 那种给一个单独的元素设置背景色的方案有办法实现吗？

[Vanessa219]

采用的应该就是你说的 wolai 的那种

[TCOTC]

那我等 dev 版看看

[TCOTC]

我先 PR 了：#13090

---

钉住列还有一点瑕疵搞不定

去掉这两个：

.protyle-wysiwyg--select,.protyle-wysiwyg--hl {
    --b3-parent-background: transparent !important
}

.protyle-wysiwyg--select .table[custom-pinthead=true] thead, .protyle-wysiwyg--select .av__row--footer, .protyle-wysiwyg--select .av__counter, .protyle-wysiwyg--select .av__row--header, .protyle-wysiwyg--select .av__colsticky, .protyle-wysiwyg--hl .table[custom-pinthead=true] thead, .protyle-wysiwyg--hl .av__row--footer, .protyle-wysiwyg--hl .av__counter, .protyle-wysiwyg--hl .av__row--header, .protyle-wysiwyg--hl .av__colsticky {
    background-color: transparent !important;
}

然后再给伪元素加个 z-index 好像能解决

.protyle-wysiwyg--select:after, .protyle-wysiwyg--hl:after {
    z-index: 3;
}