From 698698eec11ac09bcabd3fc7360f411a9de89b95 Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Thu, 30 Jan 2025 11:51:07 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=94=B9=E8=BF=9B=E5=AD=97=E5=8F=B7?=
 =?UTF-8?q?=20CSS=20=E5=92=8C=E5=88=97=E8=A1=A8=E9=A1=B9=E7=9A=84=E4=BC=AA?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E5=B8=83=E5=B1=80=20(#13959)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* style: 添加 --b3-font-size-editor 变量
---
 app/src/assets/scss/component/_typography.scss | 1 +
 app/src/assets/scss/protyle/_protyle.scss      | 2 +-
 app/src/assets/scss/protyle/_wysiwyg.scss      | 8 ++++++--
 app/src/util/assets.ts                         | 6 ++----
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index c56973bf957..47bf65a6282 100644
--- 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
index 99282f4792c..c46c49162a1 100644
--- 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
index 6cbd2622644..37158f28309 100644
--- 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
index b18c29bff4d..d9328f522e3 100644
--- 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,