Skip to content

Improve blocks highlighting effects #12951

Closed
@TCOTC

Description

@TCOTC
Contributor

更改高亮块的实现方式

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

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

default.webm

Activity

Vanessa219

Vanessa219 commented on Oct 30, 2024

@Vanessa219
Member

改进列表下 av

added a commit that references this issue on Nov 6, 2024
Vanessa219

Vanessa219 commented on Nov 6, 2024

@Vanessa219
Member

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

QQ_1730904549872

self-assigned this
on Nov 6, 2024
added this to the 3.1.12 milestone on Nov 6, 2024
TCOTC

TCOTC commented on Nov 6, 2024

@TCOTC
ContributorAuthor

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

Vanessa219

Vanessa219 commented on Nov 7, 2024

@Vanessa219
Member

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

TCOTC

TCOTC commented on Nov 7, 2024

@TCOTC
ContributorAuthor

那我等 dev 版看看

TCOTC

TCOTC commented on Nov 8, 2024

@TCOTC
ContributorAuthor

我先 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;
}
changed the title [-]更改高亮块的实现方式[/-] [+]Improve blocks highlighting effects[/+] on Nov 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @Vanessa219@TCOTC

      Issue actions

        Improve blocks highlighting effects · Issue #12951 · siyuan-note/siyuan