style: 改进字号 CSS 和列表项的伪元素布局 (#13959)

* style: 添加 --b3-font-size-editor 变量

* style: 添加 --b3-font-size-editor 变量
This commit is contained in:
Jeffrey Chen 2025-01-30 11:51:07 +08:00 committed by GitHub
parent beb6b804a6
commit 698698eec1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 10 additions and 7 deletions

View file

@ -9,6 +9,7 @@
font-variant-ligatures: no-common-ligatures;
display: flex;
flex-direction: column;
font-size: var(--b3-font-size-editor);
font-family: var(--b3-font-family-protyle);
img {

View file

@ -344,7 +344,7 @@
.protyle-title {
margin: 34px 16px 0 24px;
position: relative;
font-size: 16px;
font-size: var(--b3-font-size-editor);
font-family: var(--b3-font-family-protyle);
padding-left: 2px;
border-radius: var(--b3-border-radius);

View file

@ -180,14 +180,18 @@
&::after {
content: "";
position: absolute;
border-radius: 50%;
top: 50%;
transition: var(--b3-transition);
left: 50%;
height: max(14px, 1em);
width: max(14px, 1em);
margin: min(-7px, -.5em) 0 0 min(-7px, -.5em);
border-radius: 50%;
transition: var(--b3-transition);
}
svg {
width: 34px;
height: max(14px, 1em - 8px);
display: block;
z-index: 1;
position: relative;

View file

@ -82,7 +82,7 @@ export const loadAssets = (data: Config.IAppearance) => {
/// #if BROWSER
if (!window.webkit?.messageHandlers && !window.JSAndroid && !window.JSHarmony &&
("serviceWorker" in window.navigator) && ("caches" in window) && ("fetch" in window) && navigator.serviceWorker) {
document.head.insertAdjacentHTML("afterbegin", `<meta name="theme-color" content="${getComputedStyle(document.body).getPropertyValue("--b3-toolbar-background").trim()}">`)
document.head.insertAdjacentHTML("afterbegin", `<meta name="theme-color" content="${getComputedStyle(document.body).getPropertyValue("--b3-toolbar-background").trim()}">`);
}
/// #endif
setCodeTheme();
@ -288,13 +288,11 @@ 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 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 ~ [data-type="NodeHeading"] {line-height:${height + 8}px}
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ [data-type="NodeHeading"] > [spellcheck] {min-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 + 12}px);top:${(height + 12)}px}
.protyle-wysiwyg [data-node-id]:not([data-type="NodeHeading"]) > [spellcheck] {min-height:${height}px;}
.protyle-wysiwyg .p,