improve: code block misc improve

KawaiiZapic · Nov 5, 2024 · 81d5aa4 · 81d5aa4
1 parent 40d45af
commit 81d5aa4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/src/pages/post/code-block.ts b/src/pages/post/code-block.ts
@@ -187,6 +187,15 @@ export function initCodeBlockAction(wrapper: HTMLElement) {
     const wrapper = Object.assign(document.createElement("div"), {
       className: "matecho-code-action-wrapper"
     } as Partial<HTMLDivElement>);
+
+    const copyBtn = document.createElement("mdui-button-icon");
+    copyBtn.addEventListener("click", () => {
+      ClipboardJS.copy(codeEl.innerText);
+      openSnackbar("已复制到剪切板");
+    });
+    copyBtn.appendChild(document.createElement("mdui-icon-copy-all"));
+    wrapper.appendChild(copyBtn);
+
     // ! the languages class name render by Typecho is lang-xxx, but it will be changed to language-xxx after Prism highlighted it.
     const codeLangCls = Array.from(codeEl.classList).filter(c =>
       c.startsWith("lang-")
@@ -262,14 +271,6 @@ export function initCodeBlockAction(wrapper: HTMLElement) {
       wrapper.appendChild(runBtn);
     }
 
-    const copyBtn = document.createElement("mdui-button-icon");
-    copyBtn.addEventListener("click", () => {
-      ClipboardJS.copy(codeEl.innerText);
-      openSnackbar("已复制到剪切板");
-    });
-    copyBtn.appendChild(document.createElement("mdui-icon-copy-all"));
-    wrapper.appendChild(copyBtn);
-
     el.appendChild(wrapper);
 
     if (!el.classList.contains("line-numbers")) {

diff --git a/src/style/post.less b/src/style/post.less
@@ -74,21 +74,19 @@
   align-items: center;
   user-select: none;
   gap: 0.25rem;
-  opacity: 0;
   transition: 0.2s;
 
-  .code-running &,
-  pre:hover & {
-    opacity: 1;
-  }
-
   mdui-button-icon {
-    opacity: 0.3;
+    opacity: 0;
     transition: opacity 0.2s;
 
-    [loading],
+    &[loading],
     &:hover {
-      opacity: 1;
+      opacity: 1 !important;
+    }
+
+    pre:hover & {
+      opacity: 0.3;
     }
   }
 }