fix: codeblock COPY position

Author: Innei

src/components/ui/code-highlighter/CodeHighlighter.module.css

@@ -6,41 +6,53 @@
 
     background: transparent !important;
   }
-}
 
-.copy-tip {
-  position: absolute;
-  right: 2em;
-  top: 4em;
-  opacity: 0.4;
-  font-size: 0.6em;
-  font-weight: 600;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: opacity 0.5s;
-  will-change: opacity;
-  user-select: none;
+  & {
+    &:hover .copy-tip {
+      opacity: 0.4;
+      visibility: visible;
+    }
 
-  &:hover {
-    opacity: 1;
-  }
+    .copy-tip {
+      position: absolute;
+      right: 2em;
+      top: 3em;
+      opacity: 0.4;
+      font-size: 0.6em;
+      font-weight: 600;
+      text-transform: uppercase;
+      cursor: pointer;
+      transition: opacity 0.5s;
+      will-change: opacity;
+      user-select: none;
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 0.3s ease-in-out,
+        visibility 0.3s ease-in-out;
 
-  &::after {
-    content: '';
-    bottom: -3px;
-    position: absolute;
-    left: 3px;
-    right: 3px;
-    height: 1px;
-    background-color: currentColor;
-  }
-}
+      &:hover {
+        opacity: 1;
+      }
+
+      &::after {
+        content: '';
+        bottom: -3px;
+        position: absolute;
+        left: 3px;
+        right: 3px;
+        height: 1px;
+        background-color: currentColor;
+      }
+    }
 
-.language-tip {
-  position: absolute;
-  right: 1em;
-  transform: translate(-0.5em, 1.2em);
-  font-size: 0.8em;
-  opacity: 0.7;
-  z-index: 1;
+    .language-tip {
+      position: absolute;
+      right: 1em;
+      transform: translate(-0.5em, 0.5em);
+      font-size: 0.8em;
+      opacity: 0.7;
+      z-index: 1;
+    }
+  }
 }