fix(theme): "copy code" button not readable on hover state (#819) (#1892) (#1998)

fix #819
fix #1892

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
pull/2005/head
Kia King Ishii 2 years ago committed by GitHub
parent d9a2e6e897
commit c2de4caa34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -310,7 +310,7 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
margin: 0; margin: 0;
padding: 16px 0; padding: 20px 0;
background: transparent; background: transparent;
overflow-x: auto; overflow-x: auto;
} }
@ -419,24 +419,25 @@
/*rtl:ignore*/ /*rtl:ignore*/
direction: ltr; direction: ltr;
position: absolute; position: absolute;
top: 8px; top: 12px;
/*rtl:ignore*/ /*rtl:ignore*/
right: 8px; right: 12px;
z-index: 3; z-index: 3;
display: block; display: block;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid var(--vp-code-copy-code-border-color);
border-radius: 4px; border-radius: 4px;
width: 40px; width: 40px;
height: 40px; height: 40px;
background-color: var(--vp-code-block-bg); background-color: var(--vp-code-copy-code-bg);
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
background-image: var(--vp-icon-copy); background-image: var(--vp-icon-copy);
background-position: 50%; background-position: 50%;
background-size: 20px; background-size: 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
transition: opacity 0.4s; transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;
} }
.vp-doc [class*='language-']:hover > button.copy, .vp-doc [class*='language-']:hover > button.copy,
@ -444,7 +445,9 @@
opacity: 1; opacity: 1;
} }
.vp-doc [class*='language-'] > button.copy:hover { .vp-doc [class*='language-'] > button.copy:hover,
.vp-doc [class*='language-'] > button.copy.copied {
border-color: var(--vp-code-copy-code-hover-border-color);
background-color: var(--vp-code-copy-code-hover-bg); background-color: var(--vp-code-copy-code-hover-bg);
} }
@ -459,12 +462,15 @@
.vp-doc [class*='language-'] > button.copy.copied::before, .vp-doc [class*='language-'] > button.copy.copied::before,
.vp-doc [class*='language-'] > button.copy:hover.copied::before { .vp-doc [class*='language-'] > button.copy:hover.copied::before {
position: relative; position: relative;
top: -1px;
/*rtl:ignore*/ /*rtl:ignore*/
left: -65px; left: -65px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid var(--vp-code-copy-code-hover-border-color);
/*rtl:ignore*/ /*rtl:ignore*/
border-right: 0;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
width: 64px; width: 64px;
height: 40px; height: 40px;
@ -479,9 +485,9 @@
.vp-doc [class*='language-'] > span.lang { .vp-doc [class*='language-'] > span.lang {
position: absolute; position: absolute;
top: 6px; top: 2px;
/*rtl:ignore*/ /*rtl:ignore*/
right: 12px; right: 8px;
z-index: 2; z-index: 2;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;

@ -203,6 +203,7 @@
--vp-code-block-color: var(--vp-c-text-dark-1); --vp-code-block-color: var(--vp-c-text-dark-1);
--vp-code-block-bg: #292b30; --vp-code-block-bg: #292b30;
--vp-code-block-bg-light: #1e1e20;
--vp-code-block-divider-color: #000000; --vp-code-block-divider-color: #000000;
--vp-code-line-highlight-color: rgba(0, 0, 0, 0.5); --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
@ -217,7 +218,10 @@
--vp-code-line-warning-color: var(--vp-c-yellow-dimm-2); --vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);
--vp-code-line-error-color: var(--vp-c-red-dimm-2); --vp-code-line-error-color: var(--vp-c-red-dimm-2);
--vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05); --vp-code-copy-code-border-color: transparent;
--vp-code-copy-code-bg: var(--vp-code-block-bg-light);
--vp-code-copy-code-hover-border-color: var(--vp-c-divider);
--vp-code-copy-code-hover-bg: var(--vp-code-block-bg-light);
--vp-code-copy-code-active-text: var(--vp-c-text-dark-2); --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
--vp-code-tab-divider: var(--vp-code-block-divider-color); --vp-code-tab-divider: var(--vp-code-block-divider-color);

Loading…
Cancel
Save