msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

feat(theme): refine overall styles (#1049) (#1790)

Browse Source 
close #1049
pull/1811/head
Kia King Ishii 3 years ago committed by GitHub
parent 4314b57959
commit 471f00a68d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 358 additions and 395 deletions
Show Stats Download Patch File Download Diff File

2
src/client/theme-default/components/VPBackdrop.vue
Unescape View File

@ -18,7 +18,7 @@ defineProps<{
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: var(--vp-z-index-backdrop); z-index: var(--vp-z-index-backdrop);
background: var(--vp-c-bg-backdrop); background: var(--vp-backdrop-bg-color);
transition: opacity 0.5s; transition: opacity 0.5s;
} }

2
src/client/theme-default/components/VPButton.vue
Unescape View File

@ -45,7 +45,7 @@ const component = computed(() => {
display: inline-block; display: inline-block;
border: 1px solid transparent; border: 1px solid transparent;
text-align: center; text-align: center;
font-weight: 500; font-weight: 600;
white-space: nowrap; white-space: nowrap;
transition: color 0.25s, border-color 0.25s, background-color 0.25s; transition: color 0.25s, border-color 0.25s, background-color 0.25s;
} }

23
src/client/theme-default/components/VPCarbonAds.vue
Unescape View File

@ -47,7 +47,7 @@ if (carbonOptions) {
<div class="VPCarbonAds" ref="container" /> <div class="VPCarbonAds" ref="container" />
</template> </template>
<style> <style scoped>
.VPCarbonAds { .VPCarbonAds {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -59,38 +59,37 @@ if (carbonOptions) {
line-height: 18px; line-height: 18px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
background-color: var(--vp-c-bg-soft); background-color: var(--vp-carbon-ads-bg-color);
transition: color 0.5s, background-color 0.5s;
} }
.VPCarbonAds img { .VPCarbonAds :deep(img) {
margin: 0 auto; margin: 0 auto;
border-radius: 6px; border-radius: 6px;
} }
.VPCarbonAds .carbon-text { .VPCarbonAds :deep(.carbon-text) {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
padding-top: 12px; padding-top: 12px;
color: var(--vp-c-text-1); color: var(--vp-carbon-ads-text-color);
transition: color 0.25s; transition: color 0.25s;
} }
.VPCarbonAds .carbon-text:hover { .VPCarbonAds :deep(.carbon-text:hover) {
color: var(--vp-c-brand); color: var(--vp-carbon-ads-hover-text-color);
} }
.VPCarbonAds .carbon-poweredby { .VPCarbonAds :deep(.carbon-poweredby) {
display: block; display: block;
padding-top: 6px; padding-top: 6px;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-carbon-ads-poweredby-color);
text-transform: uppercase; text-transform: uppercase;
transition: color 0.25s; transition: color 0.25s;
} }
.VPCarbonAds .carbon-poweredby:hover { .VPCarbonAds :deep(.carbon-poweredby:hover) {
color: var(--vp-c-text-1); color: var(--vp-carbon-ads-hover-poweredby-color);
} }
</style> </style>

6
src/client/theme-default/components/VPDoc.vue
Unescape View File

@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
.aside-container { .aside-container {
position: sticky; position: sticky;
top: 0; top: 0;
margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px)) * -1 - 32px); margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px); padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
height: 100vh; height: 100vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
.aside-content { .aside-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px)); min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));
padding-bottom: 32px; padding-bottom: 32px;
} }

2
src/client/theme-default/components/VPDocAsideOutline.vue
Unescape View File

@ -67,7 +67,7 @@ function handleClick({ target: el }: Event) {
.content { .content {
position: relative; position: relative;
border-left: 1px solid var(--vp-c-divider-light); border-left: 1px solid var(--vp-c-divider);
padding-left: 16px; padding-left: 16px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;

8
src/client/theme-default/components/VPDocFooter.vue
Unescape View File

@ -97,7 +97,7 @@ const showFooter = computed(() => {
} }
.prev-next { .prev-next {
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
padding-top: 24px; padding-top: 24px;
} }
@ -127,7 +127,7 @@ const showFooter = computed(() => {
.pager-link { .pager-link {
display: block; display: block;
border: 1px solid var(--vp-c-divider-light); border: 1px solid var(--vp-c-divider);
border-radius: 8px; border-radius: 8px;
padding: 11px 16px 13px; padding: 11px 16px 13px;
width: 100%; width: 100%;
@ -139,10 +139,6 @@ const showFooter = computed(() => {
border-color: var(--vp-c-brand); border-color: var(--vp-c-brand);
} }
.pager-link:hover .title {
color: var(--vp-c-brand-dark);
}
.pager-link.next { .pager-link.next {
margin-left: auto; margin-left: auto;
text-align: right; text-align: right;

17
src/client/theme-default/components/VPFeature.vue
Unescape View File

@ -48,11 +48,7 @@ defineProps<{
.VPFeature.link:hover { .VPFeature.link:hover {
border-color: var(--vp-c-brand); border-color: var(--vp-c-brand);
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg-soft-up);
}
.dark .VPFeature.link:hover {
background-color: var(--vp-c-bg-mute);
} }
.box { .box {
@ -73,17 +69,13 @@ defineProps<{
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 6px; border-radius: 6px;
background-color: var(--vp-c-gray-light-4); background-color: var(--vp-c-bg-soft-down);
width: 48px; width: 48px;
height: 48px; height: 48px;
font-size: 24px; font-size: 24px;
transition: background-color 0.25s; transition: background-color 0.25s;
} }
.dark .icon {
background-color: var(--vp-c-gray-dark-5);
}
.title { .title {
line-height: 24px; line-height: 24px;
font-size: 16px; font-size: 16px;
@ -109,11 +101,6 @@ defineProps<{
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--vp-c-brand); color: var(--vp-c-brand);
transition: color 0.25s;
}
.VPFeature.link:hover .link-text-value {
color: var(--vp-c-brand-dark);
} }
.link-text-icon { .link-text-icon {

24
src/client/theme-default/components/VPFlyout.vue
Unescape View File

@ -91,33 +91,21 @@ function onBlur() {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
height: var(--vp-nav-height-mobile); height: var(--vp-nav-height);
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
transition: color 0.5s; transition: color 0.5s;
} }
@media (min-width: 960px) {
.button {
height: var(--vp-nav-height-desktop);
}
}
.text { .text {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: var(--vp-nav-height-mobile); line-height: var(--vp-nav-height);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
transition: color 0.25s; transition: color 0.25s;
} }
@media (min-width: 960px) {
.text {
line-height: var(--vp-nav-height-desktop);
}
}
.option-icon { .option-icon {
margin-right: 0px; margin-right: 0px;
width: 16px; width: 16px;
@ -141,16 +129,10 @@ function onBlur() {
.menu { .menu {
position: absolute; position: absolute;
top: calc(var(--vp-nav-height-mobile) / 2 + 20px); top: calc(var(--vp-nav-height) / 2 + 20px);
right: 0; right: 0;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 0.25s, visibility 0.25s, transform 0.25s; transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
} }
@media (min-width: 960px) {
.menu {
top: calc(var(--vp-nav-height-desktop) / 2 + 20px);
}
}
</style> </style>

2
src/client/theme-default/components/VPFooter.vue
Unescape View File

@ -19,7 +19,7 @@ const { hasSidebar } = useSidebar()
.VPFooter { .VPFooter {
position: relative; position: relative;
z-index: var(--vp-z-index-footer); z-index: var(--vp-z-index-footer);
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-gutter);
padding: 32px 24px; padding: 32px 24px;
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
} }

2
src/client/theme-default/components/VPHomeSponsors.vue
Unescape View File

@ -48,7 +48,7 @@ defineProps<{
<style scoped> <style scoped>
.VPHomeSponsors { .VPHomeSponsors {
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-gutter);
padding: 88px 24px 96px; padding: 88px 24px 96px;
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
} }

6
src/client/theme-default/components/VPLocalNav.vue
Unescape View File

@ -44,11 +44,11 @@ function scrollToTop() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--vp-c-divider-light); border-bottom: 1px solid var(--vp-c-gutter);
padding-top: var(--vp-layout-top-height, 0px);
width: 100%; width: 100%;
background-color: var(--vp-c-bg); background-color: var(--vp-local-nav-bg-color);
transition: border-color 0.5s, background-color 0.5s; transition: border-color 0.5s, background-color 0.5s;
padding-top: var(--vp-layout-top-height, 0px);
} }
@media (min-width: 960px) { @media (min-width: 960px) {

20
src/client/theme-default/components/VPMenu.vue
Unescape View File

@ -25,31 +25,21 @@ defineProps<{
border-radius: 12px; border-radius: 12px;
padding: 12px; padding: 12px;
min-width: 128px; min-width: 128px;
border: 1px solid var(--vp-c-divider-light); border: 1px solid var(--vp-c-divider);
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg-elv);
box-shadow: var(--vp-shadow-3); box-shadow: var(--vp-shadow-3);
transition: background-color 0.5s; transition: background-color 0.5s;
max-height: calc(100vh - var(--vp-nav-height-mobile)); max-height: calc(100vh - var(--vp-nav-height));
overflow-y: auto; overflow-y: auto;
} }
@media (min-width: 960px) {
.VPMenu {
max-height: calc(100vh - var(--vp-nav-height-desktop));
}
}
.dark .VPMenu {
box-shadow: var(--vp-shadow-2);
}
.VPMenu :deep(.group) { .VPMenu :deep(.group) {
margin: 0 -12px; margin: 0 -12px;
padding: 0 12px 12px; padding: 0 12px 12px;
} }
.VPMenu :deep(.group + .group) { .VPMenu :deep(.group + .group) {
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
padding: 11px 12px 12px; padding: 11px 12px 12px;
} }
@ -58,7 +48,7 @@ defineProps<{
} }
.VPMenu :deep(.group + .item) { .VPMenu :deep(.group + .item) {
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
padding: 11px 16px 0; padding: 11px 16px 0;
} }

4
src/client/theme-default/components/VPMenuGroup.vue
Unescape View File

@ -20,7 +20,7 @@ defineProps<{
<style scoped> <style scoped>
.VPMenuGroup { .VPMenuGroup {
margin: 12px -12px 0; margin: 12px -12px 0;
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
padding: 12px 12px 0; padding: 12px 12px 0;
} }
@ -32,7 +32,7 @@ defineProps<{
.VPMenuGroup + .VPMenuGroup { .VPMenuGroup + .VPMenuGroup {
margin-top: 12px; margin-top: 12px;
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
} }
.title { .title {

8
src/client/theme-default/components/VPMenuLink.vue
Unescape View File

@ -24,7 +24,7 @@ const { page } = useData()
<style scoped> <style scoped>
.VPMenuGroup + .VPMenuLink { .VPMenuGroup + .VPMenuLink {
margin: 12px -12px 0; margin: 12px -12px 0;
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
padding: 12px 12px 0; padding: 12px 12px 0;
} }
@ -42,11 +42,7 @@ const { page } = useData()
.link:hover { .link:hover {
color: var(--vp-c-brand); color: var(--vp-c-brand);
background-color: var(--vp-c-bg-mute); background-color: var(--vp-c-bg-elv-mute);
}
.dark .link:hover {
background-color: var(--vp-c-bg-soft);
} }
.link.active { .link.active {

37
src/client/theme-default/components/VPNav.vue
Unescape View File

@ -1,18 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { provide } from 'vue' import { computed, provide } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { useNav } from '../composables/nav.js' import { useNav } from '../composables/nav.js'
import { useSidebar } from '../composables/sidebar.js' import { useSidebar } from '../composables/sidebar.js'
import VPNavBar from './VPNavBar.vue' import VPNavBar from './VPNavBar.vue'
import VPNavScreen from './VPNavScreen.vue' import VPNavScreen from './VPNavScreen.vue'
const { y } = useWindowScroll()
const { isScreenOpen, closeScreen, toggleScreen } = useNav() const { isScreenOpen, closeScreen, toggleScreen } = useNav()
const { hasSidebar } = useSidebar() const { hasSidebar } = useSidebar()
provide('close-screen', closeScreen) provide('close-screen', closeScreen)
const classes = computed(() => ({
'no-sidebar': !hasSidebar.value,
'fill-bg': y.value > 0
}))
</script> </script>
<template> <template>
<header class="VPNav" :class="{ 'no-sidebar' : !hasSidebar }"> <header class="VPNav" :class="classes">
<VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen"> <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
<template #nav-bar-title-before><slot name="nav-bar-title-before" /></template> <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
<template #nav-bar-title-after><slot name="nav-bar-title-after" /></template> <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
@ -33,27 +41,22 @@ provide('close-screen', closeScreen)
left: 0; left: 0;
z-index: var(--vp-z-index-nav); z-index: var(--vp-z-index-nav);
width: 100%; width: 100%;
background-color: var(--vp-nav-bg-color);
pointer-events: none; pointer-events: none;
transition: background-color 0.5s;
}
.VPNav.no-sidebar {
background-color: transparent;
}
.VPNav.fill-bg {
background-color: var(--vp-nav-bg-color);
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.VPNav { .VPNav {
position: fixed; position: fixed;
} }
.VPNav.no-sidebar {
background: var(--vp-c-bg-alpha-without-backdrop);
}
@supports (
(backdrop-filter: saturate(50%) blur(8px)) or
(-webkit-backdrop-filter: saturate(50%) blur(8px))
) {
.VPNav.no-sidebar {
-webkit-backdrop-filter: saturate(50%) blur(8px);
backdrop-filter: saturate(50%) blur(8px);
background: var(--vp-c-bg-alpha-with-backdrop);
}
}
} }
</style> </style>

118
src/client/theme-default/components/VPNavBar.vue
Unescape View File

@ -23,12 +23,15 @@ const { hasSidebar } = useSidebar()
<template> <template>
<div class="VPNavBar" :class="{ 'has-sidebar' : hasSidebar }"> <div class="VPNavBar" :class="{ 'has-sidebar' : hasSidebar }">
<div class="container"> <div class="container">
<VPNavBarTitle> <div class="title">
<template #nav-bar-title-before><slot name="nav-bar-title-before" /></template> <VPNavBarTitle>
<template #nav-bar-title-after><slot name="nav-bar-title-after" /></template> <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
</VPNavBarTitle> <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
</VPNavBarTitle>
</div>
<div class="content"> <div class="content">
<div class="curtain" />
<slot name="nav-bar-content-before" /> <slot name="nav-bar-content-before" />
<VPNavBarSearch class="search" /> <VPNavBarSearch class="search" />
<VPNavBarMenu class="menu" /> <VPNavBarMenu class="menu" />
@ -37,11 +40,7 @@ const { hasSidebar } = useSidebar()
<VPNavBarSocialLinks class="social-links" /> <VPNavBarSocialLinks class="social-links" />
<VPNavBarExtra class="extra" /> <VPNavBarExtra class="extra" />
<slot name="nav-bar-content-after" /> <slot name="nav-bar-content-after" />
<VPNavBarHamburger <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
class="hamburger"
:active="isScreenOpen"
@click="$emit('toggle-screen')"
/>
</div> </div>
</div> </div>
</div> </div>
@ -50,9 +49,9 @@ const { hasSidebar } = useSidebar()
<style scoped> <style scoped>
.VPNavBar { .VPNavBar {
position: relative; position: relative;
border-bottom: 1px solid var(--vp-c-divider-light); border-bottom: 1px solid var(--vp-c-gutter);
padding: 0 8px 0 24px; padding: 0 8px 0 24px;
height: var(--vp-nav-height-mobile); height: var(--vp-nav-height);
transition: border-color 0.5s, background-color 0.5s; transition: border-color 0.5s, background-color 0.5s;
pointer-events: none; pointer-events: none;
} }
@ -64,26 +63,9 @@ const { hasSidebar } = useSidebar()
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.VPNavBar { .VPNavBar.has-sidebar {
height: var(--vp-nav-height-desktop); border-bottom-color: transparent;
border-bottom: 0; padding: 0;
}
.VPNavBar.has-sidebar .content {
margin-right: -100vw;
padding-right: 100vw;
background: var(--vp-c-bg-alpha-without-backdrop);
}
@supports (
(backdrop-filter: saturate(50%) blur(8px)) or
(-webkit-backdrop-filter: saturate(50%) blur(8px))
) {
.VPNavBar.has-sidebar .content {
-webkit-backdrop-filter: saturate(50%) blur(8px);
backdrop-filter: saturate(50%) blur(8px);
background: var(--vp-c-bg-alpha-with-backdrop);
}
} }
} }
@ -92,9 +74,40 @@ const { hasSidebar } = useSidebar()
justify-content: space-between; justify-content: space-between;
margin: 0 auto; margin: 0 auto;
max-width: calc(var(--vp-layout-max-width) - 64px); max-width: calc(var(--vp-layout-max-width) - 64px);
height: var(--vp-nav-height);
pointer-events: none; pointer-events: none;
} }
@media (min-width: 960px) {
.VPNavBar.has-sidebar .container {
max-width: 100%;
}
}
.title {
flex-shrink: 0;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .title {
position: absolute;
top: 0;
left: 0;
z-index: 2;
padding: 0 32px;
width: var(--vp-sidebar-width);
height: var(--vp-nav-height);
background-color: var(--vp-c-bg-alt);
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .title {
padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
}
}
.container :deep(*) { .container :deep(*) {
pointer-events: auto; pointer-events: auto;
} }
@ -106,6 +119,22 @@ const { hasSidebar } = useSidebar()
flex-grow: 1; flex-grow: 1;
} }
@media (min-width: 960px) {
.VPNavBar.has-sidebar .content {
position: relative;
z-index: 1;
padding-right: 32px;
padding-left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .content {
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}
.menu + .translations::before, .menu + .translations::before,
.menu + .appearance::before, .menu + .appearance::before,
.menu + .social-links::before, .menu + .social-links::before,
@ -115,7 +144,7 @@ const { hasSidebar } = useSidebar()
margin-left: 8px; margin-left: 8px;
width: 1px; width: 1px;
height: 24px; height: 24px;
background-color: var(--vp-c-divider-light); background-color: var(--vp-c-divider);
content: ""; content: "";
} }
@ -131,4 +160,29 @@ const { hasSidebar } = useSidebar()
.social-links { .social-links {
margin-right: -8px; margin-right: -8px;
} }
@media (min-width: 960px) {
.VPNavBar.has-sidebar .curtain {
position: absolute;
right: 0;
bottom: -32px;
padding-left: var(--vp-sidebar-width);
width: 100%;
height: 32px;
}
.VPNavBar.has-sidebar .curtain::before {
display: block;
width: 100%;
height: 32px;
background: linear-gradient(var(--vp-c-bg), transparent 70%);
content: "";
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .curtain {
padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}
</style> </style>

8
src/client/theme-default/components/VPNavBarMenuLink.vue
Unescape View File

@ -33,7 +33,7 @@ const { page } = useData()
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
line-height: var(--vp-nav-height-mobile); line-height: var(--vp-nav-height);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
@ -47,10 +47,4 @@ const { page } = useData()
.VPNavBarMenuLink:hover { .VPNavBarMenuLink:hover {
color: var(--vp-c-brand); color: var(--vp-c-brand);
} }
@media (min-width: 1280px) {
.VPNavBarMenuLink {
line-height: var(--vp-nav-height-desktop);
}
}
</style> </style>

4
src/client/theme-default/components/VPNavBarSearch.vue
Unescape View File

@ -123,7 +123,7 @@ function load() {
--docsearch-modal-shadow: none; --docsearch-modal-shadow: none;
--docsearch-footer-shadow: none; --docsearch-footer-shadow: none;
--docsearch-logo-color: var(--vp-c-text-2); --docsearch-logo-color: var(--vp-c-text-2);
--docsearch-hit-background: var(--vp-c-bg-mute); --docsearch-hit-background: var(--vp-c-bg-soft-mute);
--docsearch-hit-color: var(--vp-c-text-2); --docsearch-hit-color: var(--vp-c-text-2);
--docsearch-hit-shadow: none; --docsearch-hit-shadow: none;
} }
@ -282,6 +282,6 @@ function load() {
} }
.dark .DocSearch-Form { .dark .DocSearch-Form {
background-color: var(--vp-c-bg-mute); background-color: var(--vp-c-bg-soft-mute);
} }
</style> </style>

19
src/client/theme-default/components/VPNavBarTitle.vue
Unescape View File

@ -20,23 +20,10 @@ const { hasSidebar } = useSidebar()
</template> </template>
<style scoped> <style scoped>
.VPNavBarTitle {
flex-shrink: 0;
border-bottom: 1px solid transparent;
}
@media (min-width: 960px) {
.VPNavBarTitle.has-sidebar {
margin-right: 32px;
width: calc(var(--vp-sidebar-width) - 64px);
border-bottom-color: var(--vp-c-divider-light);
background-color: var(--vp-c-bg-alt);
}
}
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid transparent;
width: 100%; width: 100%;
height: var(--vp-nav-height); height: var(--vp-nav-height);
font-size: 16px; font-size: 16px;
@ -53,6 +40,10 @@ const { hasSidebar } = useSidebar()
.title { .title {
flex-shrink: 0; flex-shrink: 0;
} }
.VPNavBarTitle.has-sidebar .title {
border-bottom-color: var(--vp-c-divider);
}
} }
:deep(.logo) { :deep(.logo) {

4
src/client/theme-default/components/VPNavScreen.vue
Unescape View File

@ -43,13 +43,13 @@ function unlockBodyScroll() {
<style scoped> <style scoped>
.VPNavScreen { .VPNavScreen {
position: fixed; position: fixed;
top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0px)); top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: 0 32px; padding: 0 32px;
width: 100%; width: 100%;
background-color: var(--vp-c-bg); background-color: var(--vp-nav-screen-bg-color);
overflow-y: auto; overflow-y: auto;
transition: background-color 0.5s; transition: background-color 0.5s;
pointer-events: auto; pointer-events: auto;

2
src/client/theme-default/components/VPNavScreenAppearance.vue
Unescape View File

@ -20,7 +20,6 @@ const { site } = useData()
border-radius: 8px; border-radius: 8px;
padding: 12px 14px 12px 16px; padding: 12px 14px 12px 16px;
background-color: var(--vp-c-bg-soft); background-color: var(--vp-c-bg-soft);
transition: background-color 0.5s;
} }
.text { .text {
@ -28,6 +27,5 @@ const { site } = useData()
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.5s;
} }
</style> </style>

2
src/client/theme-default/components/VPNavScreenMenuGroup.vue
Unescape View File

@ -54,7 +54,7 @@ function toggle() {
<style scoped> <style scoped>
.VPNavScreenMenuGroup { .VPNavScreenMenuGroup {
border-bottom: 1px solid var(--vp-c-divider-light); border-bottom: 1px solid var(--vp-c-divider);
height: 48px; height: 48px;
overflow: hidden; overflow: hidden;
transition: border-color 0.5s; transition: border-color 0.5s;

4
src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
Unescape View File

@ -19,12 +19,12 @@ const closeScreen = inject('close-screen') as () => void
<style scoped> <style scoped>
.VPNavScreenMenuGroupLink { .VPNavScreenMenuGroupLink {
display: block; display: block;
margin-left: 12px;
line-height: 32px; line-height: 32px;
font-size: 13px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
transition: color 0.25s; transition: color 0.25s;
margin-left: 12px;
} }
.VPNavScreenMenuGroupLink:hover { .VPNavScreenMenuGroupLink:hover {

4
src/client/theme-default/components/VPNavScreenMenuLink.vue
Unescape View File

@ -19,13 +19,13 @@ const closeScreen = inject('close-screen') as () => void
<style scoped> <style scoped>
.VPNavScreenMenuLink { .VPNavScreenMenuLink {
display: block; display: block;
border-bottom: 1px solid var(--vp-c-divider-light); border-bottom: 1px solid var(--vp-c-divider);
padding: 12px 0 11px; padding: 12px 0 11px;
line-height: 24px; line-height: 24px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
transition: border-color 0.5s, color 0.25s; transition: border-color 0.25s, color 0.25s;
} }
.VPNavScreenMenuLink:hover { .VPNavScreenMenuLink:hover {

8
src/client/theme-default/components/VPSidebar.vue
Unescape View File

@ -70,7 +70,7 @@ watchPostEffect(async () => {
padding: 32px 32px 96px; padding: 32px 32px 96px;
width: calc(100vw - 64px); width: calc(100vw - 64px);
max-width: 320px; max-width: 320px;
background-color: var(--vp-c-bg); background-color: var(--vp-sidebar-bg-color);
opacity: 0; opacity: 0;
box-shadow: var(--vp-c-shadow-3); box-shadow: var(--vp-c-shadow-3);
overflow-x: hidden; overflow-x: hidden;
@ -94,11 +94,11 @@ watchPostEffect(async () => {
@media (min-width: 960px) { @media (min-width: 960px) {
.VPSidebar { .VPSidebar {
z-index: 1; z-index: 1;
padding-top: var(--vp-nav-height-desktop); padding-top: var(--vp-nav-height);
padding-bottom: 128px; padding-bottom: 128px;
width: var(--vp-sidebar-width); width: var(--vp-sidebar-width);
max-width: 100%; max-width: 100%;
background-color: var(--vp-c-bg-alt); background-color: var(--vp-sidebar-bg-color);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
box-shadow: none; box-shadow: none;
@ -119,7 +119,7 @@ watchPostEffect(async () => {
.group + .group { .group + .group {
margin-top: 32px; margin-top: 32px;
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
padding-top: 10px; padding-top: 10px;
} }

12
src/client/theme-default/components/VPSwitch.vue
Unescape View File

@ -16,13 +16,13 @@
width: 40px; width: 40px;
height: 22px; height: 22px;
flex-shrink: 0; flex-shrink: 0;
border: 1px solid var(--vp-c-divider); border: 1px solid var(--vp-input-border-color);
background-color: var(--vp-c-bg-mute); background-color: var(--vp-input-switch-bg-color);
transition: border-color 0.25s; transition: border-color 0.25s;
} }
.VPSwitch:hover { .VPSwitch:hover {
border-color: var(--vp-c-gray); border-color: var(--vp-input-hover-border-color);
} }
.check { .check {
@ -32,15 +32,11 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
background-color: var(--vp-c-white); background-color: var(--vp-c-neutral-inverse);
box-shadow: var(--vp-shadow-1); box-shadow: var(--vp-shadow-1);
transition: transform 0.25s; transition: transform 0.25s;
} }
.dark .check {
background-color: var(--vp-c-black);
}
.icon { .icon {
position: relative; position: relative;
display: block; display: block;

6
src/client/theme-default/components/VPTeamMembersItem.vue
Unescape View File

@ -199,10 +199,10 @@ defineProps<{
transition: color 0.25s, background-color 0.25s; transition: color 0.25s, background-color 0.25s;
} }
.sp-link:hover, .sp .sp-link.link:hover,
.sp-link:focus { .sp .sp-link.link:focus {
outline: none; outline: none;
color: var(--vp-c-text-dark-1); color: var(--vp-c-white);
background-color: var(--vp-c-sponsor); background-color: var(--vp-c-sponsor);
} }

2
src/client/theme-default/components/VPTeamPageSection.vue
Unescape View File

@ -46,7 +46,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: var(--vp-c-divider-light); background-color: var(--vp-c-divider);
} }
.title-text { .title-text {

2
src/client/theme-default/styles/components/custom-block.css
Unescape View File

@ -3,7 +3,7 @@
border-radius: 8px; border-radius: 8px;
padding: 16px 16px 8px; padding: 16px 16px 8px;
line-height: 24px; line-height: 24px;
font-size: 14px; font-size: var(--vp-custom-block-font-size);
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }

20
src/client/theme-default/styles/components/vp-doc.css
Unescape View File

@ -21,7 +21,7 @@
.vp-doc h2 { .vp-doc h2 {
margin: 48px 0 16px; margin: 48px 0 16px;
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
padding-top: 24px; padding-top: 24px;
letter-spacing: -0.02em; letter-spacing: -0.02em;
line-height: 32px; line-height: 32px;
@ -160,17 +160,19 @@
.vp-doc th, .vp-doc th,
.vp-doc td { .vp-doc td {
border: 1px solid var(--vp-c-divider); border: 1px solid var(--vp-c-divider);
padding: 12px 16px; padding: 8px 16px;
} }
.vp-doc th { .vp-doc th {
font-size: 16px; text-align: left;
font-size: 14px;
font-weight: 600; font-weight: 600;
background-color: var(--vp-c-white-soft); color: var(--vp-c-text-2);
background-color: var(--vp-c-bg-soft);
} }
.dark .vp-doc th { .vp-doc td {
background-color: var(--vp-c-black); font-size: 14px;
} }
/** /**
@ -180,7 +182,7 @@
.vp-doc hr { .vp-doc hr {
margin: 16px 0; margin: 16px 0;
border: none; border: none;
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider);
} }
/** /**
@ -239,7 +241,7 @@
border-radius: 4px; border-radius: 4px;
padding: 3px 6px; padding: 3px 6px;
color: var(--vp-c-text-code); color: var(--vp-c-text-code);
background-color: var(--vp-c-bg-mute); background-color: var(--vp-c-mute);
transition: color 0.5s, background-color 0.5s; transition: color 0.5s, background-color 0.5s;
} }
@ -396,7 +398,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 3; z-index: 3;
border-right: 1px solid var(--vp-c-divider-dark-2); border-right: 1px solid var(--vp-code-block-divider-color);
padding-top: 16px; padding-top: 16px;
width: 32px; width: 32px;
text-align: center; text-align: center;

6
src/client/theme-default/styles/components/vp-sponsor.css
Unescape View File

@ -114,7 +114,7 @@
} }
.vp-sponsor-grid-item:hover { .vp-sponsor-grid-item:hover {
background-color: var(--vp-c-bg-mute); background-color: var(--vp-c-bg-soft-down);
} }
.vp-sponsor-grid-item:hover .vp-sponsor-grid-image { .vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
@ -126,11 +126,11 @@
} }
.dark .vp-sponsor-grid-item:hover { .dark .vp-sponsor-grid-item:hover {
background-color: var(--vp-c-white-soft); background-color: var(--vp-c-white);
} }
.dark .vp-sponsor-grid-item.empty:hover { .dark .vp-sponsor-grid-item.empty:hover {
background-color: var(--vp-c-black-mute); background-color: var(--vp-c-bg-soft);
} }
.vp-sponsor-grid-link { .vp-sponsor-grid-link {

369
src/client/theme-default/styles/vars.css
Unescape View File

@ -8,74 +8,46 @@
:root { :root {
--vp-c-white: #ffffff; --vp-c-white: #ffffff;
--vp-c-white-soft: #f9f9f9; --vp-c-black: #000000;
--vp-c-white-mute: #f1f1f1;
--vp-c-gray: #8e8e93;
--vp-c-black: #1a1a1a;
--vp-c-black-pure: #000000; --vp-c-text-light-1: rgba(60, 60, 67, 0.92);
--vp-c-black-soft: #242424; --vp-c-text-light-2: rgba(60, 60, 67, 0.7);
--vp-c-black-mute: #2f2f2f; --vp-c-text-light-3: rgba(60, 60, 67, 0.33);
--vp-c-gray: #8e8e8e; --vp-c-text-dark-1: rgba(255, 255, 245, 0.86);
--vp-c-gray-light-1: #aeaeae; --vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
--vp-c-gray-light-2: #c7c7c7; --vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
--vp-c-gray-light-3: #d1d1d1;
--vp-c-gray-light-4: #e5e5e5; --vp-c-green: #10b981;
--vp-c-gray-light-5: #f2f2f2; --vp-c-green-light: #34d399;
--vp-c-gray-dark-1: #636363; --vp-c-green-lighter: #6ee7b7;
--vp-c-gray-dark-2: #484848; --vp-c-green-dark: #059669;
--vp-c-gray-dark-3: #3a3a3a; --vp-c-green-darker: #047857;
--vp-c-gray-dark-4: #282828; --vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
--vp-c-gray-dark-5: #202020; --vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
--vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
--vp-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vp-c-divider-light-2: rgba(60, 60, 60, 0.12); --vp-c-yellow: #eab308;
--vp-c-divider-dark-1: rgba(84, 84, 84, 0.65); --vp-c-yellow-light: #facc15;
--vp-c-divider-dark-2: rgba(84, 84, 84, 0.48); --vp-c-yellow-lighter: #fde047;
--vp-c-yellow-dark: #ca8a04;
--vp-c-text-light-1: var(--vp-c-indigo); --vp-c-yellow-darker: #a16207;
--vp-c-text-light-2: rgba(60, 60, 60, 0.7); --vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
--vp-c-text-light-3: rgba(60, 60, 60, 0.33); --vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
--vp-c-text-light-4: rgba(60, 60, 60, 0.18); --vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
--vp-c-text-dark-1: rgba(255, 255, 255, 0.87); --vp-c-red: #f43f5e;
--vp-c-text-dark-2: rgba(235, 235, 235, 0.6); --vp-c-red-light: #fb7185;
--vp-c-text-dark-3: rgba(235, 235, 235, 0.38); --vp-c-red-lighter: #fda4af;
--vp-c-text-dark-4: rgba(235, 235, 235, 0.18); --vp-c-red-dark: #e11d48;
--vp-c-red-darker: #be123c;
--vp-c-indigo: #213547; --vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
--vp-c-indigo-soft: #476582; --vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
--vp-c-indigo-light: #aac8e4; --vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
--vp-c-indigo-lighter: #c9def1;
--vp-c-indigo-dark: #1d2f3f; --vp-c-sponsor: #db2777;
--vp-c-indigo-darker: #14212e;
--vp-c-green: #42b883;
--vp-c-green-light: #42d392;
--vp-c-green-lighter: #35eb9a;
--vp-c-green-dark: #33a06f;
--vp-c-green-darker: #155f3e;
--vp-c-green-dimm-1: rgba(66, 184, 131, 0.5);
--vp-c-green-dimm-2: rgba(66, 184, 131, 0.25);
--vp-c-green-dimm-3: rgba(66, 184, 131, 0.05);
--vp-c-yellow: #ffc517;
--vp-c-yellow-light: #fcd253;
--vp-c-yellow-lighter: #fcfc7c;
--vp-c-yellow-dark: #e0ad15;
--vp-c-yellow-darker: #ad850e;
--vp-c-yellow-dimm-1: rgba(255, 197, 23, 0.5);
--vp-c-yellow-dimm-2: rgba(255, 197, 23, 0.25);
--vp-c-yellow-dimm-3: rgba(255, 197, 23, 0.05);
--vp-c-red: #ed3c50;
--vp-c-red-light: #f54e82;
--vp-c-red-lighter: #fd1d7c;
--vp-c-red-dark: #cd2d3f;
--vp-c-red-darker: #ab2131;
--vp-c-red-dimm-1: rgba(237, 60, 80, 0.5);
--vp-c-red-dimm-2: rgba(237, 60, 80, 0.25);
--vp-c-red-dimm-3: rgba(237, 60, 80, 0.05);
} }
/** /**
@ -83,33 +55,36 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-c-bg: var(--vp-c-white); --vp-c-bg: #ffffff;
--vp-c-bg-soft: var(--vp-c-white-soft);
--vp-c-bg-mute: var(--vp-c-white-mute);
--vp-c-bg-alt: var(--vp-c-white-soft);
--vp-c-bg-alpha-with-backdrop: rgba(255, 255, 255, 0.7); --vp-c-bg-elv: #ffffff;
--vp-c-bg-alpha-without-backdrop: rgba(255, 255, 255, 0.95); --vp-c-bg-elv-up: #ffffff;
--vp-c-bg-elv-down: #f6f6f7;
--vp-c-bg-elv-mute: #f6f6f7;
--vp-c-bg-backdrop: rgba(0, 0, 0, 0.6); --vp-c-bg-soft: #f6f6f7;
--vp-c-bg-soft-up: #ffffff;
--vp-c-bg-soft-down: #e3e3e5;
--vp-c-bg-soft-mute: #e3e3e5;
--vp-c-divider: var(--vp-c-divider-light-1); --vp-c-bg-alt: #f6f6f7;
--vp-c-divider-light: var(--vp-c-divider-light-2);
--vp-c-divider-inverse: var(--vp-c-divider-dark-1); --vp-c-border: rgba(60, 60, 67, 0.29);
--vp-c-divider-inverse-light: var(--vp-c-divider-dark-2); --vp-c-divider: rgba(60, 60, 67, 0.12);
--vp-c-gutter: rgba(60, 60, 67, 0.12);
--vp-c-neutral: var(--vp-c-black);
--vp-c-neutral-inverse: var(--vp-c-white);
--vp-c-text-1: var(--vp-c-text-light-1); --vp-c-text-1: var(--vp-c-text-light-1);
--vp-c-text-2: var(--vp-c-text-light-2); --vp-c-text-2: var(--vp-c-text-light-2);
--vp-c-text-3: var(--vp-c-text-light-3); --vp-c-text-3: var(--vp-c-text-light-3);
--vp-c-text-4: var(--vp-c-text-light-4);
--vp-c-text-inverse-1: var(--vp-c-text-dark-1); --vp-c-text-inverse-1: var(--vp-c-text-dark-1);
--vp-c-text-inverse-2: var(--vp-c-text-dark-2); --vp-c-text-inverse-2: var(--vp-c-text-dark-2);
--vp-c-text-inverse-3: var(--vp-c-text-dark-3); --vp-c-text-inverse-3: var(--vp-c-text-dark-3);
--vp-c-text-inverse-4: var(--vp-c-text-dark-4);
--vp-c-text-code: var(--vp-c-indigo-soft); --vp-c-text-code: #476582;
--vp-c-brand: var(--vp-c-green); --vp-c-brand: var(--vp-c-green);
--vp-c-brand-light: var(--vp-c-green-light); --vp-c-brand-light: var(--vp-c-green-light);
@ -117,35 +92,50 @@
--vp-c-brand-dark: var(--vp-c-green-dark); --vp-c-brand-dark: var(--vp-c-green-dark);
--vp-c-brand-darker: var(--vp-c-green-darker); --vp-c-brand-darker: var(--vp-c-green-darker);
--vp-c-sponsor: #fd1d7c; --vp-c-mute: #f6f6f7;
--vp-c-mute-light: #f9f9fc;
--vp-c-mute-lighter: #ffffff;
--vp-c-mute-dark: #e3e3e5;
--vp-c-mute-darker: #d7d7d9;
} }
.dark { .dark {
--vp-c-bg: var(--vp-c-black-soft); --vp-c-bg: #1e1e20;
--vp-c-bg-soft: var(--vp-c-black-mute);
--vp-c-bg-mute: var(--vp-c-gray-dark-3); --vp-c-bg-elv: #252529;
--vp-c-bg-alt: var(--vp-c-black); --vp-c-bg-elv-up: #313136;
--vp-c-bg-elv-down: #1e1e20;
--vp-c-bg-elv-mute: #313136;
--vp-c-bg-soft: #252529;
--vp-c-bg-soft-up: #313136;
--vp-c-bg-soft-down: #1e1e20;
--vp-c-bg-soft-mute: #313136;
--vp-c-bg-alpha-with-backdrop: rgba(36, 36, 36, 0.7); --vp-c-bg-alt: #161618;
--vp-c-bg-alpha-without-backdrop: rgba(36, 36, 36, 0.95);
--vp-c-divider: var(--vp-c-divider-dark-1); --vp-c-border: rgba(82, 82, 89, 0.68);
--vp-c-divider-light: var(--vp-c-divider-dark-2); --vp-c-divider: rgba(82, 82, 89, 0.32);
--vp-c-gutter: #000000;
--vp-c-divider-inverse: var(--vp-c-divider-light-1); --vp-c-neutral: var(--vp-c-white);
--vp-c-divider-inverse-light: var(--vp-c-divider-light-2); --vp-c-neutral-inverse: var(--vp-c-black);
--vp-c-text-1: var(--vp-c-text-dark-1); --vp-c-text-1: var(--vp-c-text-dark-1);
--vp-c-text-2: var(--vp-c-text-dark-2); --vp-c-text-2: var(--vp-c-text-dark-2);
--vp-c-text-3: var(--vp-c-text-dark-3); --vp-c-text-3: var(--vp-c-text-dark-3);
--vp-c-text-4: var(--vp-c-text-dark-4);
--vp-c-text-inverse-1: var(--vp-c-text-light-1); --vp-c-text-inverse-1: var(--vp-c-text-light-1);
--vp-c-text-inverse-2: var(--vp-c-text-light-2); --vp-c-text-inverse-2: var(--vp-c-text-light-2);
--vp-c-text-inverse-3: var(--vp-c-text-light-3); --vp-c-text-inverse-3: var(--vp-c-text-light-3);
--vp-c-text-inverse-4: var(--vp-c-text-light-4);
--vp-c-text-code: var(--vp-c-indigo-lighter); --vp-c-text-code: #c9def1;
--vp-c-mute: #313136;
--vp-c-mute-light: #3a3a3c;
--vp-c-mute-lighter: #505053;
--vp-c-mute-dark: #2c2c30;
--vp-c-mute-darker: #252529;
} }
/** /**
@ -212,36 +202,34 @@
--vp-code-font-size: 0.875em; --vp-code-font-size: 0.875em;
--vp-code-block-color: var(--vp-c-text-dark-1); --vp-code-block-color: var(--vp-c-text-dark-1);
--vp-code-block-bg: #292d3e; --vp-code-block-bg: #292b30;
--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);
--vp-code-line-number-color: var(--vp-c-text-dark-3); --vp-code-line-number-color: var(--vp-c-text-dark-3);
--vp-code-line-diff-add-color: rgba(125, 191, 123, 0.1); --vp-code-line-diff-add-color: var(--vp-c-green-dimm-2);
--vp-code-line-diff-add-symbol-color: rgba(125, 191, 123, 0.5); --vp-code-line-diff-add-symbol-color: var(--vp-c-green);
--vp-code-line-diff-remove-color: rgba(255, 128, 128, 0.05); --vp-code-line-diff-remove-color: var(--vp-c-red-dimm-2);
--vp-code-line-diff-remove-symbol-color: rgba(255, 128, 128, 0.5); --vp-code-line-diff-remove-symbol-color: var(--vp-c-red);
--vp-code-line-error-color: var(--vp-c-red-dimm-2);
--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-copy-code-hover-bg: rgba(255, 255, 255, 0.05); --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
--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-text-color: var(--vp-c-text-dark-2); --vp-code-tab-text-color: var(--vp-c-text-dark-2);
--vp-code-tab-bg: var(--vp-code-block-bg); --vp-code-tab-bg: var(--vp-code-block-bg);
--vp-code-tab-divider: var(--vp-c-divider-dark-2);
--vp-code-tab-hover-text-color: var(--vp-c-text-dark-1); --vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);
--vp-code-tab-active-text-color: var(--vp-c-text-dark-1); --vp-code-tab-active-text-color: var(--vp-c-text-dark-1);
--vp-code-tab-active-bar-color: var(--vp-c-brand); --vp-code-tab-active-bar-color: var(--vp-c-brand);
} }
.dark { .dark {
--vp-code-block-bg: var(--vp-c-black); --vp-code-block-bg: #161618;
/* --vp-code-tab: var(--vp-c-black-mute);*/
/* --vp-code-tab-hover: var(--vp-c-gray-dark-4);*/
} }
/** /**
@ -249,25 +237,25 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-button-brand-border: var(--vp-c-brand-light); --vp-button-brand-border: var(--vp-c-brand-lighter);
--vp-button-brand-text: var(--vp-c-text-dark-1); --vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand); --vp-button-brand-bg: var(--vp-c-brand);
--vp-button-brand-hover-border: var(--vp-c-brand-light); --vp-button-brand-hover-border: var(--vp-c-brand-lighter);
--vp-button-brand-hover-text: var(--vp-c-text-dark-1); --vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-light); --vp-button-brand-hover-bg: var(--vp-c-brand-dark);
--vp-button-brand-active-border: var(--vp-c-brand-light); --vp-button-brand-active-border: var(--vp-c-brand-lighter);
--vp-button-brand-active-text: var(--vp-c-text-dark-1); --vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-button-brand-bg); --vp-button-brand-active-bg: var(--vp-c-brand-darker);
--vp-button-alt-border: var(--vp-c-gray-light-3); --vp-button-alt-border: var(--vp-c-border);
--vp-button-alt-text: var(--vp-c-text-light-1); --vp-button-alt-text: var(--vp-c-neutral);
--vp-button-alt-bg: var(--vp-c-gray-light-5); --vp-button-alt-bg: var(--vp-c-mute);
--vp-button-alt-hover-border: var(--vp-c-gray-light-3); --vp-button-alt-hover-border: var(--vp-c-border);
--vp-button-alt-hover-text: var(--vp-c-text-light-1); --vp-button-alt-hover-text: var(--vp-c-neutral);
--vp-button-alt-hover-bg: var(--vp-c-gray-light-4); --vp-button-alt-hover-bg: var(--vp-c-mute-dark);
--vp-button-alt-active-border: var(--vp-c-gray-light-3); --vp-button-alt-active-border: var(--vp-c-border);
--vp-button-alt-active-text: var(--vp-c-text-light-1); --vp-button-alt-active-text: var(--vp-c-neutral);
--vp-button-alt-active-bg: var(--vp-c-gray-light-3); --vp-button-alt-active-bg: var(--vp-c-mute-darker);
--vp-button-sponsor-border: var(--vp-c-gray-light-3); --vp-button-sponsor-border: var(--vp-c-gray-light-3);
--vp-button-sponsor-text: var(--vp-c-text-light-2); --vp-button-sponsor-text: var(--vp-c-text-light-2);
@ -281,26 +269,6 @@
} }
.dark { .dark {
--vp-button-brand-border: var(--vp-c-brand-light);
--vp-button-brand-text: var(--vp-c-text-dark-1);
--vp-button-brand-bg: var(--vp-c-brand-dark);
--vp-button-brand-hover-border: var(--vp-c-brand-lighter);
--vp-button-brand-hover-text: var(--vp-c-text-dark-1);
--vp-button-brand-hover-bg: var(--vp-c-brand);
--vp-button-brand-active-border: var(--vp-c-brand-lighter);
--vp-button-brand-active-text: var(--vp-c-text-dark-1);
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
--vp-button-alt-border: var(--vp-c-gray-dark-2);
--vp-button-alt-text: var(--vp-c-text-dark-1);
--vp-button-alt-bg: var(--vp-c-bg-mute);
--vp-button-alt-hover-border: var(--vp-c-gray-dark-2);
--vp-button-alt-hover-text: var(--vp-c-text-dark-1);
--vp-button-alt-hover-bg: var(--vp-c-gray-dark-2);
--vp-button-alt-active-border: var(--vp-c-gray-dark-2);
--vp-button-alt-active-text: var(--vp-c-text-dark-1);
--vp-button-alt-active-bg: var(--vp-button-alt-bg);
--vp-button-sponsor-border: var(--vp-c-gray-dark-1); --vp-button-sponsor-border: var(--vp-c-gray-dark-1);
--vp-button-sponsor-text: var(--vp-c-text-dark-2); --vp-button-sponsor-text: var(--vp-c-text-dark-2);
} }
@ -310,26 +278,27 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-custom-block-font-size: 14px;
--vp-custom-block-code-font-size: 13px; --vp-custom-block-code-font-size: 13px;
--vp-custom-block-info-border: var(--vp-c-divider-light); --vp-custom-block-info-border: var(--vp-c-border);
--vp-custom-block-info-text: var(--vp-c-text-2); --vp-custom-block-info-text: var(--vp-c-text-2);
--vp-custom-block-info-bg: var(--vp-c-white-soft); --vp-custom-block-info-bg: var(--vp-c-bg-soft);
--vp-custom-block-info-code-bg: var(--vp-c-gray-light-4); --vp-custom-block-info-code-bg: var(--vp-c-mute);
--vp-custom-block-tip-border: var(--vp-c-green-dimm-1); --vp-custom-block-tip-border: var(--vp-c-green-dimm-3);
--vp-custom-block-tip-text: var(--vp-c-green-darker); --vp-custom-block-tip-text: var(--vp-c-green);
--vp-custom-block-tip-bg: var(--vp-c-green-dimm-3); --vp-custom-block-tip-bg: var(--vp-c-green-dimm-1);
--vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg); --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
--vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1); --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-3);
--vp-custom-block-warning-text: var(--vp-c-yellow-darker); --vp-custom-block-warning-text: var(--vp-c-yellow);
--vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3); --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-1);
--vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg); --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
--vp-custom-block-danger-border: var(--vp-c-red-dimm-1); --vp-custom-block-danger-border: var(--vp-c-red-dimm-3);
--vp-custom-block-danger-text: var(--vp-c-red-darker); --vp-custom-block-danger-text: var(--vp-c-red);
--vp-custom-block-danger-bg: var(--vp-c-red-dimm-3); --vp-custom-block-danger-bg: var(--vp-c-red-dimm-1);
--vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg); --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
--vp-custom-block-details-border: var(--vp-custom-block-info-border); --vp-custom-block-details-border: var(--vp-custom-block-info-border);
@ -338,19 +307,16 @@
--vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg); --vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg);
} }
.dark { /**
--vp-custom-block-info-border: var(--vp-c-divider-light); * Component: Input
--vp-custom-block-info-bg: var(--vp-c-black-mute); * -------------------------------------------------------------------------- */
--vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);
--vp-custom-block-tip-border: var(--vp-c-green-dimm-2);
--vp-custom-block-tip-text: var(--vp-c-green-light);
--vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2); :root {
--vp-custom-block-warning-text: var(--vp-c-yellow-light); --vp-input-border-color: var(--vp-c-border);
--vp-input-bg-color: var(--vp-c-bg-alt);
--vp-input-hover-border-color: var(--vp-c-gray);
--vp-custom-block-danger-border: var(--vp-c-red-dimm-2); --vp-input-switch-bg-color: var(--vp-c-mute);
--vp-custom-block-danger-text: var(--vp-c-red-light);
} }
/** /**
@ -358,15 +324,17 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-nav-height: var(--vp-nav-height-mobile); --vp-nav-height: 64px;
--vp-nav-height-mobile: 56px; --vp-nav-bg-color: var(--vp-c-bg);
--vp-nav-height-desktop: 72px; --vp-nav-screen-bg-color: var(--vp-c-bg);
} }
@media (min-width: 960px) { /**
:root { * Component: Local Nav
--vp-nav-height: var(--vp-nav-height-desktop); * -------------------------------------------------------------------------- */
}
:root {
--vp-local-nav-bg-color: var(--vp-c-bg);
} }
/** /**
@ -375,6 +343,15 @@
:root { :root {
--vp-sidebar-width: 272px; --vp-sidebar-width: 272px;
--vp-sidebar-bg-color: var(--vp-c-bg-alt);
}
/**
* Colors Backdrop
* -------------------------------------------------------------------------- */
:root {
--vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
} }
/** /**
@ -394,33 +371,31 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-badge-info-border: var(--vp-c-divider-light); --vp-badge-info-border: var(--vp-c-border);
--vp-badge-info-text: var(--vp-c-text-2); --vp-badge-info-text: var(--vp-c-text-2);
--vp-badge-info-bg: var(--vp-c-white-soft); --vp-badge-info-bg: var(--vp-c-bg-soft);
--vp-badge-tip-border: var(--vp-c-green-dimm-1); --vp-badge-tip-border: var(--vp-c-green-dark);
--vp-badge-tip-text: var(--vp-c-green-darker); --vp-badge-tip-text: var(--vp-c-green);
--vp-badge-tip-bg: var(--vp-c-green-dimm-3); --vp-badge-tip-bg: var(--vp-c-green-dimm-1);
--vp-badge-warning-border: var(--vp-c-yellow-dimm-1); --vp-badge-warning-border: var(--vp-c-yellow-dark);
--vp-badge-warning-text: var(--vp-c-yellow-darker); --vp-badge-warning-text: var(--vp-c-yellow);
--vp-badge-warning-bg: var(--vp-c-yellow-dimm-3); --vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);
--vp-badge-danger-border: var(--vp-c-red-dimm-1); --vp-badge-danger-border: var(--vp-c-red-dark);
--vp-badge-danger-text: var(--vp-c-red-darker); --vp-badge-danger-text: var(--vp-c-red);
--vp-badge-danger-bg: var(--vp-c-red-dimm-3); --vp-badge-danger-bg: var(--vp-c-red-dimm-1);
} }
.dark { /**
--vp-badge-info-border: var(--vp-c-divider-light); * Component: CarbonAds
--vp-badge-info-bg: var(--vp-c-black-mute); * -------------------------------------------------------------------------- */
--vp-badge-tip-border: var(--vp-c-green-dimm-2);
--vp-badge-tip-text: var(--vp-c-green-light);
--vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
--vp-badge-warning-text: var(--vp-c-yellow-light);
--vp-badge-danger-border: var(--vp-c-red-dimm-2); :root {
--vp-badge-danger-text: var(--vp-c-red-light); --vp-carbon-ads-text-color: var(--vp-c-text-1);
--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
--vp-carbon-ads-hover-text-color: var(--vp-c-brand);
--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
} }

Write Preview
Loading…
Cancel
Save