diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index 4a03acd36..aa4fc2873 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/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 { diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 419aae302..8d2dc5bbd 100644 --- a/docs/assets/styles/docs.css +++ b/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; diff --git a/docs/index.html b/docs/index.html index 8e9ea8a0d..4a100ee09 100644 --- a/docs/index.html +++ b/docs/index.html @@ -52,7 +52,7 @@ }, auto2top: true, copyCode: { - buttonText: 'Copy Code', + buttonText: 'Copy', errorText: 'Failed to copy', successText: 'Copied' },