From 0eeef2b56bcf6bfe7322a1b50fa13c20d0817195 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?= Date: Mon, 18 Jul 2022 15:23:07 +0200 Subject: [PATCH] docs(fix): lang and copy in code blocks in light mode --- docs/.vitepress/theme/styles/main.css | 33 +++++++++++++++++++++++++-- docs/.vitepress/theme/styles/vars.css | 7 +++++- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/docs/.vitepress/theme/styles/main.css b/docs/.vitepress/theme/styles/main.css index 70070a81..914e413e 100644 --- a/docs/.vitepress/theme/styles/main.css +++ b/docs/.vitepress/theme/styles/main.css @@ -1,8 +1,10 @@ -.dark [img-light], .dark .logo[light-logo] { +.dark [img-light], +.dark .logo[light-logo] { display: none; } -html:not(.dark) [img-dark], html:not(.dark) .logo[dark-logo] { +html:not(.dark) [img-dark], +html:not(.dark) .logo[dark-logo] { display: none; } @@ -18,6 +20,33 @@ html:not(.dark) [img-dark], html:not(.dark) .logo[dark-logo] { border: 1px solid #8882; } +html:not(.dark) .vp-doc [class*=language-]:before { + color: var(--vp-custom-block-details-text); +} + +html:not(.dark) .vp-doc [class*='language-']:not(:hover) > span.copy, +html:not(.dark) .vp-doc [class*='language-']:not(:hover) > span.copy.copied:before { + background-color: var(--vp-code-block-hover-bg); + opacity: 0; +} + +html:not(.dark) .vp-doc [class*='language-']:hover > span.copy:hover { + opacity: 1; + background-color: var(--vp-code-block-hover-bg); +} + +html:not(.dark) .vp-doc [class*='language-']:hover > span.copy.copied, +html:not(.dark) .vp-doc [class*='language-']:hover > span.copy.copied:hover { + opacity: 1; + background-color: var(--vp-code-block-hover-bg); +} + +html:not(.dark) .vp-doc [class*='language-']:hover > span.copy.copied:before, +html:not(.dark) .vp-doc [class*='language-']:hover > span.copy.copied:hover:before { + color: var(--vp-custom-block-details-text); + background-color: var(--vp-code-block-hover-bg); +} + /* h3 breaks SEO => replaced with h2 with the same size */ .home-content h2 { margin-top: 2rem; diff --git a/docs/.vitepress/theme/styles/vars.css b/docs/.vitepress/theme/styles/vars.css index b3636e91..6f7ce335 100644 --- a/docs/.vitepress/theme/styles/vars.css +++ b/docs/.vitepress/theme/styles/vars.css @@ -10,12 +10,15 @@ --vp-c-brand-dark: #00586e; --vp-c-brand-darker: #00586e; --vp-c-text-code: #2c3e50; - --vp-code-block-bg: rgba(125, 125, 125, 0.04); + --vp-code-block-bg: rgba(125, 125, 125, 0.06); + --vp-code-block-hover-bg: rgba(125, 125, 125, 0.1); --vp-c-bg-mute: #f5f5f5; --vp-custom-block-tip-border: var(--vp-c-brand); --vp-custom-block-tip-text: var(--vp-c-brand-dark); --vp-custom-block-tip-bg: transparent; --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg); + --vp-code-copy-code-bg: initial; + --vp-code-copy-code-hover-bg: var(--vp-custom-block-details-text); } .dark { @@ -28,6 +31,8 @@ --vp-code-block-bg: rgba(0, 0, 0, 0.2); --vp-c-text-code: #f5f7fa; --vp-c-bg-mute: #2d2d2d; + --vp-code-copy-code-bg: initial; + --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05); } /**