Reworked the appearance of the copy button

Changed the copy button to default to be transparent.
When the MultiCodeBlock is hovered, the copy button will be visible.

More hover effects added to the button itself and a simple border.

Author: QuickWrite

resources/ext.multicodeblock/css/codeblock.css

@@ -143,13 +143,15 @@
 }
 
 .copy {
+    opacity: 0;
     position: absolute;
     right: 1px;
     padding: .7em;
     display: unset;
     cursor: pointer;
     z-index: 99;
     line-height: 0;
+    user-select: none;
 }
 
 .copy.anim {
@@ -176,8 +178,20 @@
 }
 
 .copy svg {
-    width: 100%;
-    height: 100%;
+    background-color: #fafbfc;
+    border: 1px solid;
+    border-radius: 6px;
+    border-color: rgba(27, 31, 35, .15);
+    cursor: pointer;
+    display: inline-block;
+    padding: 5px;
+    position: relative;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.copy:hover svg {
+    background-color: #f3f3f3;
 }
 
 .copy .tooltip::after {
@@ -191,6 +205,12 @@
     border-color: transparent transparent #555 transparent;
 }
 
+.multicodeblock:hover > .copy {
+    opacity: 1;
+
+    transition: all .2s cubic-bezier(.3,0,.5,1);
+}
+
 .table-header {
     transform: translateY(-5px);
 }
@@ -226,4 +246,10 @@
         opacity: 1;
         transform: scale(1);
     }
+}
+
+@media screen and (max-width: 767px) {
+    .copy {
+        opacity: 1;
+    }
 }