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.

Sign up for GitHub

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

style: Improve block styles #13564

Open
wants to merge 14 commits into
base: dev
Choose a base branch
from
+58 −26
Open

style: Improve block styles #13564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c5cb63f
style: 调整列表项的伪元素竖线高度
TCOTC Dec 20, 2024
a43188e
style: 选中嵌入块的高亮覆盖其 border
TCOTC Dec 20, 2024
0230c63
style: 代码块 margin 与其他块统一、代码块语言的位置有点难看
TCOTC Dec 20, 2024
786a87b
style: 公式块 margin 与其他块统一
TCOTC Dec 20, 2024
6d3e28c
style: iframe 块 margin 与其他块统一
TCOTC Dec 20, 2024
b8b8920
style: 标题块 margin padding 与其他块统一、标题文本在块内垂直居中
TCOTC Dec 20, 2024
57d9e25
style: 去除表格块下方多余的空白
TCOTC Dec 20, 2024
3373e08
style: 避免标题块高度抖动（空标题块和有内容的标题块高度不一致）
TCOTC Dec 21, 2024
6c36912
style: 选中水平布局超级块内的单个块时，高亮范围与超级块保持一致，覆盖 margin
TCOTC Dec 21, 2024
e80b340
style: 使用 flex 避免超级块内的相邻子块发生外边距折叠 margin collapsing
TCOTC Dec 21, 2024
abd5840
style: 选中水平布局超级块内的单个嵌入块时，高亮范围与超级块保持一致，覆盖 border 和 margin
TCOTC Dec 21, 2024
b8d63b2
style: 添加编辑器字号的基准 CSS 变量 --b3-font-size-editor 供主题或插件使用
TCOTC Dec 21, 2024
16379dc
style: Improve block styles
TCOTC Dec 24, 2024
b97df21
Merge branch 'dev' into dev-li-style
TCOTC Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 28 additions & 11 deletions app/src/assets/scss/component/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,17 +146,11 @@
flex-direction: column;
}

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
padding: 4px;
margin: 4px 0;
Expand All @@ -165,17 +159,36 @@
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-weight: 600;

&[data-node-id] [spellcheck] {
min-height: 1.625em;
}
}

h1 {
padding: .3em 4px;
font-size: 1.75em;
}

.h2,
.h1 {
font-size: 1.75em;
}

h2 {
padding: .3em 4px;
font-size: 1.55em;
}

.h2 {
font-size: 1.55em;
}

.h3,
h3 {
font-size: 1.38em;
Expand Down Expand Up @@ -281,7 +294,7 @@
}

.code-block:not(pre) {
margin: 1em 0;
margin: 2px 0;
box-sizing: border-box;

.protyle-action {
Expand All @@ -299,8 +312,14 @@
align-self: center;
}

.protyle-icon,
.protyle-icon {
opacity: 0;
transition: var(--b3-transition);
}

.protyle-action__language {
position: absolute;
left: 1em;
opacity: 0;
transition: var(--b3-transition);
}
Expand Down Expand Up @@ -467,8 +486,6 @@

.iframe {
text-align: center;
padding: 4px;
margin: 4px 0;
}
}

Expand Down
40 changes: 27 additions & 13 deletions app/src/assets/scss/protyle/_wysiwyg.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,16 +125,6 @@
align-items: center;
word-break: keep-all;

& ~ .h1,
& ~ .h2,
& ~ .h3,
& ~ .h4,
& ~ .h5,
& ~ .h6 {
padding-top: 0;
padding-bottom: 0;
}

&::after {
content: "";
position: absolute;
Expand All @@ -158,11 +148,13 @@
}

&.sb {
display: flex;
flex-direction: column;
padding: 0;
max-width: 100%;

&[data-sb-layout="col"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
column-gap: 1.5em;
Expand All @@ -187,6 +179,20 @@
position: initial;
margin-left: 4px;
}

/* 选中块的高亮覆盖 margin */
&> .protyle-wysiwyg--select:not(.sb)::after,
&> .protyle-wysiwyg--hl:not(.sb)::after{
height: calc(100% + 4px);
top: -2px;
}

/* 选中块的高亮覆盖 border 和 margin */
&> .protyle-wysiwyg--select.render-node[data-type="NodeBlockQueryEmbed"]::after,
&> .protyle-wysiwyg--hl.render-node[data-type="NodeBlockQueryEmbed"]::after{
height: calc(100% + 6px);
top: -3px;
}
}
}

Expand Down Expand Up @@ -266,6 +272,15 @@
max-width: 100%;
padding: 2px 4px;

/* 选中块的高亮覆盖 border */
&.protyle-wysiwyg--select::after,
&.protyle-wysiwyg--hl::after{
width: calc(100% + 2px);
height: calc(100% + 2px);
left: -1px;
top: -1px;
}

// https://github.com/siyuan-note/siyuan/issues/8715 & https://ld246.com/article/1689063197687 第一点无法进行以下设置
//.protyle-attr--refcount {right: 0;}

Expand Down Expand Up @@ -310,6 +325,7 @@

&.table table {
display: inline-block;
vertical-align: top;
}

.img {
Expand Down Expand Up @@ -487,8 +503,6 @@
}

div[data-type="NodeMathBlock"] {
margin-top: 0;
margin-bottom: 0;
min-height: 62px !important;
}

Expand Down
5 changes: 3 additions & 2 deletions app/src/util/assets.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,13 +281,14 @@ export const setInlineStyle = async (set = true) => {
}`;
}
}
style += `.b3-typography, .protyle-wysiwyg, .protyle-title {font-size:${window.siyuan.config.editor.fontSize}px !important}
style += `\n:root{--b3-font-size-editor:${window.siyuan.config.editor.fontSize}px}
.b3-typography, .protyle-wysiwyg, .protyle-title {font-size:${window.siyuan.config.editor.fontSize}px !important}
.b3-typography code:not(.hljs), .protyle-wysiwyg span[data-type~=code] { font-variant-ligatures: ${window.siyuan.config.editor.codeLigatures ? "normal" : "none"} }
.li > .protyle-action {height:${height + 8}px;line-height: ${height + 8}px}
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h1, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h2, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h3, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h4, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h5, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h6 {line-height:${height + 8}px;}
.protyle-wysiwyg [data-node-id].li > .protyle-action::after {height: ${window.siyuan.config.editor.fontSize}px;width: ${window.siyuan.config.editor.fontSize}px;margin:-${window.siyuan.config.editor.fontSize / 2}px 0 0 -${window.siyuan.config.editor.fontSize / 2}px}
.protyle-wysiwyg [data-node-id].li > .protyle-action svg {height: ${Math.max(14, window.siyuan.config.editor.fontSize - 8)}px}
.protyle-wysiwyg [data-node-id].li::before {height: calc(100% - ${height + 8}px);top:${(height + 8)}px}
.protyle-wysiwyg [data-node-id].li::before {height: calc(100% - ${height + 12}px);top:${(height + 12)}px}
.protyle-wysiwyg [data-node-id] [spellcheck] {min-height:${height}px;}
.protyle-wysiwyg .p,
.protyle-wysiwyg .code-block .hljs,
Expand Down