Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

改进多选块时带背景色的子块样式 #12105

Closed
TCOTC opened this issue Jul 27, 2024 · 16 comments
Closed

改进多选块时带背景色的子块样式 #12105

TCOTC opened this issue Jul 27, 2024 · 16 comments
Assignees

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Jul 27, 2024

颜色.sy.zip

像上面的引述块被选中后颜色可以被覆盖,但下面的列表块就不行:

image

只选中这两个块的时候才能被正常覆盖:

image

@TCOTC TCOTC changed the title 多选有时候不能覆盖块颜色 多选的蓝色不能覆盖子块的自定义外观颜色 Jul 27, 2024
@TCOTC TCOTC changed the title 多选的蓝色不能覆盖子块的自定义外观颜色 🐛多选的蓝色不能覆盖子块的自定义外观颜色 Aug 10, 2024
@88250 88250 changed the title 🐛多选的蓝色不能覆盖子块的自定义外观颜色 多选的蓝色不能覆盖子块的自定义外观颜色 Aug 11, 2024
@TCOTC TCOTC changed the title 多选的蓝色不能覆盖子块的自定义外观颜色 多选块的蓝色无法覆盖子块的自定义外观颜色 Sep 12, 2024
@Vanessa219
Copy link
Member

选中的是哪一个块只会修改那一个块的背景,子块不进行修改。

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 13, 2024

我的意思就是这是个问题,子块的颜色会干扰多选块的判断

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 13, 2024

多选块时,子块不应该应用颜色

@Vanessa219
Copy link
Member

操作的时候并不会操作子块,改变的话可能会让用户误解。

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 14, 2024

子块颜色不变的话才会有误解。被选中的块与子块应该统一变成蓝色

@Vanessa219
Copy link
Member

看了下 notion 也是维持不变的,它可能也是怕用户误解才这么做的。这个就不进行修改了。

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 16, 2024

其实有点不同,如果用 Notion 的方案,父块或子块的颜色都是会与蓝色叠加的,思源的父块是会完全变成蓝色、子块颜色则是完全没有变化(比较突兀):

default.webm

@Vanessa219 Vanessa219 changed the title 多选块的蓝色无法覆盖子块的自定义外观颜色 改进选中块内带背景色子块的样式 Sep 19, 2024
@Vanessa219 Vanessa219 added this to the 3.1.7 milestone Sep 19, 2024
Vanessa219 added a commit that referenced this issue Sep 19, 2024
@Vanessa219
Copy link
Member

比较微弱,我们也弱弱的改一下吧。

@88250 88250 removed this from the 3.1.7 milestone Sep 19, 2024
@88250
Copy link
Member

88250 commented Sep 19, 2024

这个改动就不拉进版本了。
This change will not be included in the version.

@TCOTC TCOTC changed the title 改进选中块内带背景色子块的样式 改进多选块时带背景色的子块样式 Sep 19, 2024
@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 21, 2024

@Vanessa219 有办法只让原本的背景色变透明而不是整个元素变透明吗?

@Vanessa219
Copy link
Member

选中的背景色为 var(--b3-theme-primary-lightest) ,如果这个设置的是透明的话就是透明的,用户可以自己修改。

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 22, 2024

我的意思是这个样式把整个子元素都变透明了:

[data-node-id][style*="background-color"] {
opacity: .86;
}

比如改成 opacity: .26; ,文本就很淡了:

image

怎样保持内部文本的颜色不变?

@Vanessa219
Copy link
Member

不用改那么淡

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 23, 2024

我想只把子块的背景色改透明,但我不知道怎么改

@Vanessa219
Copy link
Member

只改背景色的话要使用 background-color: rgba

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 24, 2024

改成完全透明确实能用 CSS ,但如果是想透明 50% 的话好像就只能用 JS 了?

.protyle-wysiwyg--select [data-node-id][style*="background-color"] {
    background-color: transparent !important; /* 完全透明 */
}

想到了,给每个 style="background-color: var(--b3-font-backgroundxx);" 都单独写一条 CSS

Vanessa219 pushed a commit that referenced this issue Sep 27, 2024
…2579)

* 改进多选块时带背景色的子块样式

* rgba
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants