improve copy styles

docs/assets/plugins/code-block/code-block.css

@@ -78,8 +78,34 @@
   display: none;
 }
 
-.code-block__source .docsify-copy-code-button {
-  border-top-right-radius: 0;
+.code-block .docsify-copy-code-button {
+  top: var(--sl-spacing-x-small);
+  right: var(--sl-spacing-x-small);
+  background-color: rgb(var(--sl-color-neutral-500));
+  font-family: var(--sl-font-sans);
+  font-size: var(--sl-font-size-x-small);
+  font-weight: var(--sl-font-weight-semibold);
+  border-radius: var(--sl-border-radius-small);
+  padding: 5px 8px;
+  opacity: 1;
+  cursor: copy;
+}
+
+.code-block .docsify-copy-code-button .label {
+  transition: none;
+}
+
+.code-block .docsify-copy-code-button .error,
+.code-block .docsify-copy-code-button .success {
+  display: none;
+}
+
+.code-block .docsify-copy-code-button:focus {
+  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-neutral) / var(--sl-focus-ring-alpha));
+}
+
+.code-block .docsify-copy-code-button:active {
+  background-color: rgb(var(--sl-color-neutral-600));
 }
 
 .code-block--expanded .code-block__source {

docs/assets/styles/docs.css

@@ -583,13 +583,6 @@ strong {
   line-height: 1.6;
 }
 
-/* Copy button */
-.docsify-copy-code-button {
-  font-size: var(--sl-font-size-small) !important;
-  border-top-right-radius: var(--sl-border-radius-medium) !important;
-  border-bottom-left-radius: var(--sl-border-radius-medium) !important;
-}
-
 /* Repo buttons */
 html .repo-button {
   display: inline-flex;

docs/index.html

@@ -52,7 +52,7 @@
         },
         auto2top: true,
         copyCode: {
-          buttonText: 'Copy Code',
+          buttonText: 'Copy',
           errorText: 'Failed to copy',
           successText: 'Copied'
         },