improve: improve mermaid style

KawaiiZapic · Sep 24, 2024 · b500ebe · b500ebe
1 parent 468866b
commit b500ebe
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/style/editor.less b/src/style/editor.less
@@ -3,5 +3,11 @@
 }
 
 #wmd-preview pre.mermaid {
-  background: transparent;
+  &:first-child {
+    margin-top: 0.5rem;
+  }
+
+  &[data-processed="true"] {
+    background: transparent;
+  }
 }
diff --git a/src/style/post.less b/src/style/post.less
@@ -191,7 +191,7 @@ pre.line-numbers {
 
 pre.mermaid[data-processed=""] {
   height: 120px;
-  font-size: 0;
+  font-size: 0 !important;
   overflow: hidden;
   user-select: none;
   background-color: rgb(var(--mdui-color-surface-container));
@@ -200,16 +200,25 @@ pre.mermaid[data-processed=""] {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 0.5rem;
 
   &::after {
     content: "正在加载Mermaid...";
     font-size: 1rem;
     opacity: 0.6;
   }
+
+  &:first-child {
+    margin-top: 0;
+  }
 }
 
 pre.mermaid[data-processed="true"] {
   text-align: center;
+
+  & [id^="container-mermaid"][style*="flex"] {
+    justify-content: center;
+  }
 }
 
 pre.block-editable {