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

src/client/theme-default/styles/components/vp-doc.css

@@ -477,7 +477,7 @@
   position: relative;
   top: -1px;
   /*rtl:ignore*/
-  left: -65px;
+  transform: translateX(calc(-100% - 1px));
   display: flex;
   justify-content: center;
   align-items: center;
@@ -485,7 +485,8 @@
   /*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;
@@ -493,7 +494,7 @@
   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 {

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);