feat(theme): allow overriding code copied text from css (#2833)

vuejs · Aug 23, 2023 · e8ef1aa · e8ef1aa
1 parent d98e2c5
commit e8ef1aa
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
@@ -477,23 +477,24 @@
   position: relative;
   top: -1px;
   /*rtl:ignore*/
-  left: -65px;
+  transform: translateX(calc(-100% - 1px));
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid var(--vp-code-copy-code-hover-border-color);
   /*rtl:ignore*/
   border-right: 0;
   border-radius: 4px 0 0 4px;
-  width: 64px;
+  padding: 0 10px;
+  width: fit-content;
   height: 40px;
   text-align: center;
   font-size: 12px;
   font-weight: 500;
   color: var(--vp-code-copy-code-active-text);
   background-color: var(--vp-code-copy-code-hover-bg);
   white-space: nowrap;
-  content: 'Copied';
+  content: var(--vp-code-copy-copied-text-content);
 }
 
 .vp-doc [class*='language-'] > span.lang {

diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
@@ -324,6 +324,7 @@
   --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
   --vp-code-copy-code-hover-bg: var(--vp-c-bg);
   --vp-code-copy-code-active-text: var(--vp-c-text-2);
+  --vp-code-copy-copied-text-content: 'Copied';
 
   --vp-code-tab-divider: var(--vp-code-block-divider-color);
   --vp-code-tab-text-color: var(--vp-c-text-2);