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

* style: 添加 --b3-font-size-editor 变量 * style: 添加 --b3-font-size-editor 变量
siyuan-note · Jan 30, 2025 · 698698e · 698698e
1 parent beb6b80
commit 698698e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
@@ -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 {

diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
@@ -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);

diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -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;

diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts
@@ -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,