Revert "fix: copy button position"

2 files changed, 24 insertions, 34 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 63fa220..033e3cc 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -66,7 +66,7 @@ li {
     list-style-type: none;
   }
 
-  &>input[type="checkbox"] {
+  & > input[type="checkbox"] {
     width: var(--li-checkbox-size);
     height: var(--li-checkbox-size);
     margin: 0 0.2em 0.15em -1.25em;
@@ -86,24 +86,17 @@ input {
 
 /* Code blocks */
 
-.highlight {
-  position: relative;
-}
-
-
-.copy-code-container {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 10;
-}
-
 .copy-code-button {
   background-color: var(--background);
   font-family: var(--font-mono);
   padding: 3px 6px;
-  font-size: .8em;
+  font-size: 0.8em;
   border-radius: var(--copy-code-button-border-radius);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+  display: none;
   border: 1px solid var(--code-border);
 }
 
@@ -606,4 +599,4 @@ blockquote {
 blockquote p {
   margin-left: 1rem;
   margin-right: 1rem;
-}
\ No newline at end of file
+}
diff --git a/static/js/copy-code.js b/static/js/copy-code.js
index ee7cdc7..2de3cda 100644
--- a/static/js/copy-code.js
+++ b/static/js/copy-code.js
@@ -1,37 +1,34 @@
 document.addEventListener("DOMContentLoaded", function () {
-  const codeBlocks = document.querySelectorAll(".highlight")
+  const codeBlocks = document.querySelectorAll("pre");
 
   codeBlocks.forEach((codeBlock) => {
-    if (codeBlock.className == "mermaid") return
-    const copyButton = document.createElement("button")
-    copyButton.className = "copy-code-button"
-    copyButton.textContent = "copy"
-    const copyButtonContainer = document.createElement("div")
-    copyButtonContainer.className = "copy-code-container"
-    copyButtonContainer.appendChild(copyButton)
+    if (codeBlock.className == "mermaid") return;
+    const copyButton = document.createElement("button");
+    copyButton.className = "copy-code-button";
+    copyButton.textContent = "copy";
 
     // Insert the button inside the <pre> block
-    codeBlock.appendChild(copyButton)
+    codeBlock.appendChild(copyButton);
 
     copyButton.addEventListener("click", function () {
-      const code = codeBlock.querySelector("code")
+      const code = codeBlock.querySelector("code");
       // Get the code content
-      const textToCopy = code.textContent || code.innerText
+      const textToCopy = code.textContent || code.innerText;
 
       // Use the Clipboard API to copy the text
       navigator.clipboard
         .writeText(textToCopy)
         .then(() => {
           // Change button text to "Copied"
-          copyButton.textContent = "copied"
+          copyButton.textContent = "copied";
 
           setTimeout(() => {
-            copyButton.textContent = "copy"
-          }, 2000) // Reset the button text after 2 seconds
+            copyButton.textContent = "copy";
+          }, 2000); // Reset the button text after 2 seconds
         })
         .catch((err) => {
-          console.error("Unable to copy text:", err)
-        })
-    })
-  })
-})
+          console.error("Unable to copy text:", err);
+        });
+    });
+  });
+});