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); } /**