From d9d48273fb9e68c29165745aa9a70528bdf81ea3 Mon Sep 17 00:00:00 2001 From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com> Date: Wed, 29 Jan 2025 12:36:20 +0800 Subject: [PATCH] style: Improve block styles (#13564) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: 调整列表项的伪元素竖线高度 * style: 选中嵌入块的高亮覆盖其 border * style: 代码块 margin 与其他块统一、代码块语言的位置有点难看 * style: 公式块 margin 与其他块统一 * style: iframe 块 margin 与其他块统一 * style: 标题块 margin padding 与其他块统一、标题文本在块内垂直居中 * style: 去除表格块下方多余的空白 * style: 避免标题块高度抖动（空标题块和有内容的标题块高度不一致） * style: 选中水平布局超级块内的单个块时，高亮范围与超级块保持一致，覆盖 margin * style: 使用 flex 避免超级块内的相邻子块发生外边距折叠 margin collapsing * style: 选中水平布局超级块内的单个嵌入块时，高亮范围与超级块保持一致，覆盖 border 和 margin * style: 添加编辑器字号的基准 CSS 变量 --b3-font-size-editor 供主题或插件使用 比如用 CSS 实现界面字号与编辑器字号同步调整 body > #dockBottom, body > .fn__flex-1 { font-size: calc(var(--b3-font-size-editor) - 2px); } * style: Improve block styles * style: 减小列表内的标题块行高 --- .../assets/scss/component/_typography.scss | 39 ++++++++++---- app/src/assets/scss/protyle/_wysiwyg.scss | 51 ++++++++++++++----- app/src/util/assets.ts | 5 +- 3 files changed, 69 insertions(+), 26 deletions(-) diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss index 9f44367b7..b8fffa1c0 100644 --- a/app/src/assets/scss/component/_typography.scss +++ b/app/src/assets/scss/component/_typography.scss @@ -146,17 +146,11 @@ flex-direction: column; } - .h1, h1, - .h2, h2, - .h3, h3, - .h4, h4, - .h5, h5, - .h6, h6 { padding: 4px; margin: 4px 0; @@ -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; @@ -281,7 +294,7 @@ } .code-block:not(pre) { - margin: 1em 0; + margin: 2px 0; box-sizing: border-box; .protyle-action { @@ -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); } @@ -467,8 +486,6 @@ .iframe { text-align: center; - padding: 4px; - margin: 4px 0; } } diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss index 348cacfc9..c2942c9bb 100644 --- a/app/src/assets/scss/protyle/_wysiwyg.scss +++ b/app/src/assets/scss/protyle/_wysiwyg.scss @@ -166,16 +166,6 @@ align-items: center; word-break: keep-all; - & ~ .h1, - & ~ .h2, - & ~ .h3, - & ~ .h4, - & ~ .h5, - & ~ .h6 { - padding-top: 0; - padding-bottom: 0; - } - &::after { content: ""; position: absolute; @@ -195,15 +185,28 @@ &--order::after { border-radius: var(--b3-border-radius); } + + ~ .h1, + ~ .h2, + ~ .h3, + ~ .h4, + ~ .h5, + ~ .h6 { + [spellcheck] { + min-height: unset; + } + } } } &.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; @@ -228,6 +231,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; + } } } @@ -307,6 +324,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;} @@ -351,6 +377,7 @@ &.table table { display: inline-block; + vertical-align: top; } .img { @@ -523,8 +550,6 @@ } div[data-type="NodeMathBlock"] { - margin-top: 0; - margin-bottom: 0; min-height: 62px !important; } diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts index b4b43deeb..1756e4fbf 100644 --- a/app/src/util/assets.ts +++ b/app/src/util/assets.ts @@ -288,13 +288,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,