From fcf8ea5014c45a9c03fd1cc2a473f14ca15faca1 Mon Sep 17 00:00:00 2001 From: Kia King Ishii Date: Mon, 27 Feb 2023 19:24:21 +0900 Subject: [PATCH 1/3] fix(theme): "copy code" button not readable on hover state --- .../styles/components/vp-doc.css | 22 ++++++++++++------- src/client/theme-default/styles/vars.css | 6 ++++- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index 30f6ce55766c..f1c9f870934c 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -310,7 +310,7 @@ position: relative; z-index: 1; margin: 0; - padding: 16px 0; + padding: 20px 0; background: transparent; overflow-x: auto; } @@ -419,24 +419,25 @@ /*rtl:ignore*/ direction: ltr; position: absolute; - top: 8px; + top: 12px; /*rtl:ignore*/ - right: 8px; + right: 12px; z-index: 3; display: block; justify-content: center; align-items: center; + border: 1px solid var(--vp-code-copy-code-border-color); border-radius: 4px; width: 40px; height: 40px; - background-color: var(--vp-code-block-bg); + background-color: var(--vp-code-copy-code-bg); opacity: 0; cursor: pointer; background-image: var(--vp-icon-copy); background-position: 50%; background-size: 20px; 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, @@ -444,7 +445,9 @@ 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); } @@ -460,11 +463,14 @@ .vp-doc [class*='language-'] > button.copy:hover.copied::before { position: relative; /*rtl:ignore*/ + top: -1px; left: -65px; display: flex; justify-content: center; align-items: center; /*rtl:ignore*/ + border: 1px solid var(--vp-code-copy-code-hover-border-color); + border-right: 0; border-radius: 4px 0 0 4px; width: 64px; height: 40px; @@ -479,9 +485,9 @@ .vp-doc [class*='language-'] > span.lang { position: absolute; - top: 6px; + top: 2px; /*rtl:ignore*/ - right: 12px; + right: 8px; z-index: 2; font-size: 12px; font-weight: 500; diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css index 70b579508ecb..fe5aa22761a4 100644 --- a/src/client/theme-default/styles/vars.css +++ b/src/client/theme-default/styles/vars.css @@ -203,6 +203,7 @@ --vp-code-block-color: var(--vp-c-text-dark-1); --vp-code-block-bg: #292b30; + --vp-code-block-bg-light: #1e1e20; --vp-code-block-divider-color: #000000; --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-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-tab-divider: var(--vp-code-block-divider-color); From 377bab68d5a36b2bb0becddac7bb8a54c67aa62e Mon Sep 17 00:00:00 2001 From: Kia King Ishii Date: Mon, 27 Feb 2023 19:37:36 +0900 Subject: [PATCH 2/3] adjust Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> --- src/client/theme-default/styles/components/vp-doc.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index f1c9f870934c..3ac01e6bf9b9 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -468,8 +468,8 @@ display: flex; justify-content: center; align-items: center; - /*rtl:ignore*/ border: 1px solid var(--vp-code-copy-code-hover-border-color); + /*rtl:ignore*/ border-right: 0; border-radius: 4px 0 0 4px; width: 64px; From 12ca911a0618df8b46597b1d02107e821e3d22c8 Mon Sep 17 00:00:00 2001 From: Kia King Ishii Date: Mon, 27 Feb 2023 19:37:44 +0900 Subject: [PATCH 3/3] adjust Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> --- src/client/theme-default/styles/components/vp-doc.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index 3ac01e6bf9b9..c6b9993f8321 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -462,8 +462,8 @@ .vp-doc [class*='language-'] > button.copy.copied::before, .vp-doc [class*='language-'] > button.copy:hover.copied::before { position: relative; - /*rtl:ignore*/ top: -1px; + /*rtl:ignore*/ left: -65px; display: flex; justify-content: center;