docs: share tweak copy button

1 files changed, 18 insertions, 34 deletions

diff --git a/packages/web/src/components/share/copy-button.module.css b/packages/web/src/components/share/copy-button.module.css
index 7494c2b81..9da67a1ba 100644
--- a/packages/web/src/components/share/copy-button.module.css
+++ b/packages/web/src/components/share/copy-button.module.css
@@ -1,47 +1,31 @@
-.copyButtonWrapper {
+.root {
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s ease;
-}
 
-.copyButton {
-  width: 18px;
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--sl-color-text-secondary);
+  button {
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0.125rem;
+    background-color: var(--sl-color-bg);
+    color: var(--sl-color-text-secondary);
 
-  svg {
-    display: block;
-    width: 16px;
-    height: 16px;
-  }
+    svg {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+    }
 
-  &[data-copied="true"] {
-    color: var(--sl-color-green-high);
+    &[data-copied="true"] {
+      color: var(--sl-color-green-high);
+    }
   }
 }
 
 /* Show copy button when parent is hovered */
-*:hover > .copyButtonWrapper {
-  opacity: 0.65;
+*:hover > .root {
+  opacity: 1;
   visibility: visible;
 }
-
-.copyTooltip {
-  position: absolute;
-  top: 50%;
-  left: calc(100% + 12px);
-  transform: translate(0, -50%);
-  padding: 0.375em 0.5em;
-  background: var(--sl-color-white);
-  color: var(--sl-color-text-invert);
-  font-size: 0.6875rem;
-  border-radius: 7px;
-  white-space: nowrap;
-  z-index: 11;
-}