Skip to content

Improve blocks highlighting effects #12951

New issue
New issue
Closed
Closed
Improve blocks highlighting effects#12951
Assignees
Vanessa219
Labels
Enhancement
Milestone
 
3.1.12
@TCOTC

Description

@TCOTC
TCOTC
opened on Oct 27, 2024 · edited by 88250
Contributor

更改高亮块的实现方式

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

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

default.webm

Activity

TCOTC
mentioned this on Oct 29, 2024
Vanessa219

Vanessa219 commented on Oct 30, 2024

@Vanessa219
Vanessa219
on Oct 30, 2024
Member

改进列表下 av

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

💄 #12951

dc15256
Vanessa219

Vanessa219 commented on Nov 6, 2024

@Vanessa219
Vanessa219
on Nov 6, 2024
Member

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

QQ_1730904549872

Vanessa219
closed this as completedon Nov 6, 2024
Vanessa219
self-assigned this
on Nov 6, 2024
Vanessa219
added
Enhancement
on Nov 6, 2024
Vanessa219
added this to the 3.1.12 milestone on Nov 6, 2024
TCOTC

TCOTC commented on Nov 6, 2024

@TCOTC
TCOTC
on Nov 6, 2024
ContributorAuthor

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

Vanessa219

Vanessa219 commented on Nov 7, 2024

@Vanessa219
Vanessa219
on Nov 7, 2024
Member

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

TCOTC

TCOTC commented on Nov 7, 2024

@TCOTC
TCOTC
on Nov 7, 2024 · edited by TCOTC
ContributorAuthor

那我等 dev 版看看

TCOTC

TCOTC commented on Nov 8, 2024

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

Metadata

Metadata

Assignees

Labels

Enhancement

Type

No type

Projects

No projects

Milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @Vanessa219@TCOTC

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