mirror of
https://github.com/siyuan-note/siyuan.git
synced 2026-01-07 09:18:49 +01:00
style: Improve block styles (#13564)
* 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: 减小列表内的标题块行高
This commit is contained in:
Jeffrey Chen
GitHub
parent
d98d62dcc5
commit
d9d48273fb
3 changed files with 69 additions and 26 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue