From 7519661da2f0e5213b2431d3b20e477d4133c396 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 14 Mar 2023 16:01:53 +0800
Subject: [PATCH] :lipstick: fix
 https://github.com/siyuan-note/siyuan/issues/7635

---
 app/src/assets/scss/export.scss           | 38 +-------------
 app/src/assets/scss/protyle/_attr.scss    | 62 +++++++++++++++++++++++
 app/src/assets/scss/protyle/_protyle.scss | 58 +--------------------
 app/src/assets/scss/protyle/_wysiwyg.scss |  1 +
 4 files changed, 65 insertions(+), 94 deletions(-)
 create mode 100644 app/src/assets/scss/protyle/_attr.scss

diff --git a/app/src/assets/scss/export.scss b/app/src/assets/scss/export.scss
index 4c55e0758..741ae490c 100644
--- a/app/src/assets/scss/export.scss
+++ b/app/src/assets/scss/export.scss
@@ -2,6 +2,7 @@
 @import "component/tooltips";
 @import "component/typography";
 @import "protyle/wysiwyg";
+@import "protyle/attr";
 @import "util/function";
 @import "business/history";
 @import "component/button";
@@ -32,40 +33,3 @@ svg {
 .b3-typography table, .protyle-wysiwyg table {
   display: table;
 }
-
-.protyle-attr {
-  position: absolute;
-  right: 0;
-  top: -9px;
-  display: flex;
-  opacity: 0;
-  font-size: 12px;
-  font-weight: normal;
-
-  & > div.protyle-attr--bookmark {
-    flex: 1;
-  }
-
-  & > div:not(.protyle-attr--refcount) {
-    margin: 0 4px;
-    display: flex;
-    align-items: center;
-    line-height: 16px;
-    color: var(--b3-theme-on-surface);
-
-    &:hover {
-      color: var(--b3-theme-on-background);
-    }
-
-    svg {
-      height: 12px;
-      width: 12px;
-      margin: 2px 2px 0 0;
-      float: left;
-    }
-  }
-
-  &:empty {
-    display: none;
-  }
-}
diff --git a/app/src/assets/scss/protyle/_attr.scss b/app/src/assets/scss/protyle/_attr.scss
new file mode 100644
index 000000000..bcce838d4
--- /dev/null
+++ b/app/src/assets/scss/protyle/_attr.scss
@@ -0,0 +1,62 @@
+.protyle-attr {
+  display: flex;
+  position: absolute;
+  right: 12px;
+  top: -12px;
+  opacity: 0;
+  font-size: 12px;
+  font-weight: normal;
+  align-items: center;
+  line-height: 16px;
+
+  & > div.protyle-attr--bookmark {
+    flex: 1;
+  }
+
+  & > div:not(.protyle-attr--refcount) {
+    margin: 0 4px;
+    line-height: 16px;
+    color: var(--b3-theme-on-surface);
+    min-width: 12px;
+
+    &.protyle-attr--memo svg {
+      margin-right: 0;
+    }
+
+    &:hover {
+      color: var(--b3-theme-on-background);
+    }
+
+    svg {
+      height: 12px;
+      width: 12px;
+      margin: 2px 2px 0 0;
+      float: left;
+    }
+  }
+
+  &--refcount {
+    right: -26px;
+    top: 18px;
+    position: absolute;
+    line-height: 16px;
+    padding: 0 4px;
+    color: var(--b3-theme-on-surface);
+    border-radius: 2px;
+    font-size: 12px;
+    user-select: none;
+    cursor: pointer;
+    height: 16px;
+    background-color: var(--b3-theme-surface);
+    z-index: 1; // 防止被 protyle-scroll 遮挡
+
+    &:hover {
+      color: var(--b3-theme-on-background);
+      background-color: var(--b3-theme-surface-lighter);
+    }
+  }
+
+  &:empty {
+    display: none;
+  }
+}
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index b7d846ef9..25ad62dbd 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -1,6 +1,7 @@
 @import "content";
 @import "toolbar";
 @import "wysiwyg";
+@import "attr";
 
 .protyle-scroll {
   --b3-dynamicscroll-width: 200px;
@@ -59,63 +60,6 @@
   }
 }
 
-.protyle-attr {
-  display: flex;
-  position: absolute;
-  right: 0;
-  top: -9px;
-  opacity: 0;
-  font-size: 12px;
-  font-weight: normal;
-
-  & > div.protyle-attr--bookmark {
-    flex: 1;
-  }
-
-  & > div:not(.protyle-attr--refcount) {
-    margin: 0 4px;
-    line-height: 16px;
-    color: var(--b3-theme-on-surface);
-    min-width: 12px;
-
-    &:hover {
-      color: var(--b3-theme-on-background);
-    }
-
-    svg {
-      height: 12px;
-      width: 12px;
-      margin: 2px 2px 0 0;
-      float: left;
-    }
-  }
-
-  &--refcount {
-    right: -16px;
-    top: 18px;
-    position: absolute;
-    line-height: 16px;
-    padding: 0 4px;
-    color: var(--b3-theme-on-surface);
-    border-radius: 2px;
-    font-size: 12px;
-    user-select: none;
-    cursor: pointer;
-    height: 16px;
-    background-color: var(--b3-theme-surface);
-    z-index: 1; // 防止被 protyle-scroll 遮挡
-
-    &:hover {
-      color: var(--b3-theme-on-background);
-      background-color: var(--b3-theme-surface-lighter);
-    }
-  }
-
-  &:empty {
-    display: none;
-  }
-}
-
 .protyle-gutters {
   cursor: pointer;
   user-select: none;
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index 20d411398..9966d557a 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -163,6 +163,7 @@
 
         & > div .protyle-attr--refcount {
           position: initial;
+          margin-left: 4px;
         }
       }
     }