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

perf(a11y): make font size follow user brower settings

Browse Source 
close https://github.com/vuejs/vitepress/issues/570
pull/703/head
Percy Ma 3 years ago
parent 6e53be6575
commit 790f51839c
No known key found for this signature in database
GPG Key ID: A1803D3315E6CCBC
49 changed files with 508 additions and 509 deletions
Show Stats Download Patch File Download Diff File

24
src/client/app/components/Debug.vue
Unescape View File

@ -27,11 +27,11 @@ watch(open, (value) => {
.debug { .debug {
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
right: 8px; right: .5rem;
bottom: 8px; bottom: .5rem;
z-index: 9999; z-index: 9999;
border-radius: 4px; border-radius: 4px;
width: 74px; width: 4.625rem;
height: 32px; height: 32px;
color: #eeeeee; color: #eeeeee;
overflow: hidden; overflow: hidden;
@ -57,7 +57,7 @@ watch(open, (value) => {
@media (min-width: 512px) { @media (min-width: 512px) {
.debug.open { .debug.open {
width: 512px; width: 32rem;
} }
} }
@ -67,20 +67,20 @@ watch(open, (value) => {
.title { .title {
margin: 0; margin: 0;
padding: 6px 16px 6px; padding: .375rem 1rem .375rem;
line-height: 20px; line-height: 1.25rem;
font-size: 13px; font-size: .8125rem;
} }
.block { .block {
margin: 2px 0 0; margin: .125rem 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.16); border-top: .0625rem solid rgba(255, 255, 255, 0.16);
padding: 8px 16px; padding: .5rem 1rem;
font-family: Hack, monospace; font-family: Hack, monospace;
font-size: 13px; font-size: .8125rem;
} }
.block + .block { .block + .block {
margin-top: 8px; margin-top: .5rem;
} }
</style> </style>

34
src/client/theme-default/NotFound.vue
Unescape View File

@ -23,55 +23,55 @@ const { site } = useData()
<style scoped> <style scoped>
.NotFound { .NotFound {
padding: 64px 24px 96px; padding: 4rem 1.5rem 6rem;
text-align: center; text-align: center;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.NotFound { .NotFound {
padding: 96px 32px 168px; padding: 6rem 2rem 10.5rem;
} }
} }
.code { .code {
line-height: 64px; line-height: 4rem;
font-size: 64px; font-size: 4rem;
font-weight: 600; font-weight: 600;
} }
.title { .title {
padding-top: 12px; padding-top: .75rem;
letter-spacing: 2px; letter-spacing: .125rem;
line-height: 20px; line-height: 1.25rem;
font-size: 20px; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
} }
.divider { .divider {
margin: 24px auto 18px; margin: 1.5rem auto 1.125rem;
width: 64px; width: 4rem;
height: 1px; height: .0625rem;
background-color: var(--vp-c-divider) background-color: var(--vp-c-divider)
} }
.quote { .quote {
margin: 0 auto; margin: 0 auto;
max-width: 256px; max-width: 16rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
.action { .action {
padding-top: 20px; padding-top: 1.25rem;
} }
.link { .link {
display: inline-block; display: inline-block;
border: 1px solid var(--vp-c-brand); border: .0625rem solid var(--vp-c-brand);
border-radius: 16px; border-radius: 16px;
padding: 3px 16px; padding: .1875rem 1rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-brand); color: var(--vp-c-brand);
transition: border-color 0.25s, color .25s; transition: border-color 0.25s, color .25s;

22
src/client/theme-default/components/VPBox.vue
Unescape View File

@ -16,9 +16,9 @@ defineProps<{
<style scoped> <style scoped>
.VPBox { .VPBox {
border: 1px solid var(--vp-c-divider-light); border: .0625rem solid var(--vp-c-divider-light);
border-radius: 12px; border-radius: 12px;
padding: 24px; padding: 1.5rem;
height: 100%; height: 100%;
background-color: var(--vp-c-bg-soft); background-color: var(--vp-c-bg-soft);
} }
@ -27,12 +27,12 @@ defineProps<{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 1.25rem;
border-radius: 6px; border-radius: 6px;
background-color: var(--vp-c-gray-light-4); background-color: var(--vp-c-gray-light-4);
width: 48px; width: 3rem;
height: 48px; height: 3rem;
font-size: 24px; font-size: 1.5rem;
} }
.dark .icon { .dark .icon {
@ -40,15 +40,15 @@ defineProps<{
} }
.title { .title {
line-height: 24px; line-height: 1.5rem;
font-size: 16px; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
.details { .details {
padding-top: 8px; padding-top: .5rem;
line-height: 24px; line-height: 1.5rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }

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

@ -41,7 +41,7 @@ const component = computed(() => {
<style scoped> <style scoped>
.VPButton { .VPButton {
display: inline-block; display: inline-block;
border: 1px solid transparent; border: .0625rem solid transparent;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
@ -54,16 +54,16 @@ const component = computed(() => {
.VPButton.medium { .VPButton.medium {
border-radius: 20px; border-radius: 20px;
padding: 0 20px; padding: 0 1.25rem;
line-height: 38px; line-height: 2.375rem;
font-size: 14px; font-size: .875rem;
} }
.VPButton.big { .VPButton.big {
border-radius: 24px; border-radius: 24px;
padding: 0 24px; padding: 0 1.5rem;
line-height: 46px; line-height: 2.875rem;
font-size: 16px; font-size: 1rem;
} }
.VPButton.brand { .VPButton.brand {

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

@ -46,12 +46,12 @@ if (carbonOptions) {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 24px; padding: 1.5rem;
border-radius: 12px; border-radius: 12px;
min-height: 240px; min-height: 15rem;
text-align: center; text-align: center;
line-height: 18px; line-height: 1.125rem;
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
background-color: var(--vp-c-bg-soft); background-color: var(--vp-c-bg-soft);
transition: color 0.5s, background-color 0.5s; transition: color 0.5s, background-color 0.5s;
@ -65,7 +65,7 @@ if (carbonOptions) {
.VPCarbonAds .carbon-text { .VPCarbonAds .carbon-text {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
padding-top: 12px; padding-top: .75rem;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
transition: color 0.25s; transition: color 0.25s;
} }
@ -76,8 +76,8 @@ if (carbonOptions) {
.VPCarbonAds .carbon-poweredby { .VPCarbonAds .carbon-poweredby {
display: block; display: block;
padding-top: 6px; padding-top: .375rem;
font-size: 11px; font-size: .6875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
text-transform: uppercase; text-transform: uppercase;

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

@ -47,25 +47,25 @@ const pageName = computed(() => {
<style scoped> <style scoped>
.VPDoc { .VPDoc {
padding: 32px 24px 96px; padding: 2rem 1.5rem 6rem;
width: 100%; width: 100%;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.VPDoc { .VPDoc {
padding: 48px 32px 128px; padding: 3rem 2rem 8rem;
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.VPDoc { .VPDoc {
padding: 32px 32px 0; padding: 2rem 2rem 0;
} }
.VPDoc:not(.has-sidebar) .container { .VPDoc:not(.has-sidebar) .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
max-width: 992px; max-width: 62rem;
} }
.VPDoc:not(.has-sidebar) .aside { .VPDoc:not(.has-sidebar) .aside {
@ -73,7 +73,7 @@ const pageName = computed(() => {
} }
.VPDoc:not(.has-sidebar) .content { .VPDoc:not(.has-sidebar) .content {
max-width: 752px; max-width: 47rem;
} }
} }
@ -90,11 +90,11 @@ const pageName = computed(() => {
@media (min-width: 1440px) { @media (min-width: 1440px) {
.VPDoc:not(.has-sidebar) .content { .VPDoc:not(.has-sidebar) .content {
max-width: 784px; max-width: 49rem;
} }
.VPDoc:not(.has-sidebar) .container { .VPDoc:not(.has-sidebar) .container {
max-width: 1104px; max-width: 69rem;
} }
} }
@ -108,7 +108,7 @@ const pageName = computed(() => {
display: none; display: none;
order: 2; order: 2;
flex-grow: 1; flex-grow: 1;
padding-left: 32px; padding-left: 2rem;
width: 100%; width: 100%;
max-width: 256px; max-width: 256px;
} }
@ -116,8 +116,8 @@ const pageName = computed(() => {
.aside-container { .aside-container {
position: sticky; position: sticky;
top: 0; top: 0;
margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px); margin-top: calc(var(--vp-nav-height-desktop) * -1 - 2rem);
padding-top: calc(var(--vp-nav-height-desktop) + 32px); padding-top: calc(var(--vp-nav-height-desktop) + 2rem);
height: 100vh; height: 100vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -132,16 +132,16 @@ const pageName = computed(() => {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
width: 224px; width: 14rem;
height: 32px; height: 2rem;
background: linear-gradient(transparent, var(--vp-c-bg) 70%); background: linear-gradient(transparent, var(--vp-c-bg) 70%);
} }
.aside-content { .aside-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px)); min-height: calc(100vh - (var(--vp-nav-height-desktop) + 2rem));
padding-bottom: 32px; padding-bottom: 2rem;
} }
.content { .content {
@ -152,7 +152,7 @@ const pageName = computed(() => {
@media (min-width: 960px) { @media (min-width: 960px) {
.content { .content {
padding: 0 32px 128px; padding: 0 2rem 8rem;
} }
} }
@ -166,26 +166,26 @@ const pageName = computed(() => {
.content-container { .content-container {
margin: 0 auto; margin: 0 auto;
max-width: 688px; max-width: 43rem;
} }
.edit-link { .edit-link {
margin: 0 0 32px; margin: 0 0 2rem;
} }
.edit-link .vt-link { .edit-link .vt-link {
font-size: 14px; font-size: .875rem;
color: var(--vt-c-brand); color: var(--vt-c-brand);
font-weight: 500; font-weight: 500;
} }
.vt-icon { .vt-icon {
width: 18px; width: 1.125rem;
height: 18px; height: 1.125rem;
color: var(--vt-c-brand); color: var(--vt-c-brand);
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: .5rem;
position: relative; position: relative;
top: -1px; top: -.0625rem;
} }
</style> </style>

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

@ -37,10 +37,10 @@ const { page, theme } = useData()
.VPDocAside :deep(.spacer + .VPDocAsideSponsors), .VPDocAside :deep(.spacer + .VPDocAsideSponsors),
.VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) { .VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) {
margin-top: 24px; margin-top: 1.5rem;
} }
.VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) { .VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
margin-top: 16px; margin-top: 1rem;
} }
</style> </style>

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

@ -72,34 +72,34 @@ function handleClick({ target: el }: Event) {
.content { .content {
position: relative; position: relative;
border-left: 1px solid var(--vp-c-divider-light); border-left: .0625rem solid var(--vp-c-divider-light);
padding-left: 16px; padding-left: 1rem;
font-size: 13px; font-size: .8125rem;
font-weight: 500; font-weight: 500;
} }
.outline-marker { .outline-marker {
position: absolute; position: absolute;
top: 32px; top: 2rem;
left: -1px; left: -0.0625rem;
z-index: 0; z-index: 0;
opacity: 0; opacity: 0;
width: 1px; width: .0625rem;
height: 18px; height: 1.125rem;
background-color: var(--vp-c-brand); background-color: var(--vp-c-brand);
transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s; transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
} }
.outline-title { .outline-title {
letter-spacing: 0.4px; letter-spacing: .025rem;
line-height: 28px; line-height: 1.75rem;
font-size: 13px; font-size: .8125rem;
font-weight: 600; font-weight: 600;
} }
.outline-link { .outline-link {
display: block; display: block;
line-height: 28px; line-height: 1.75rem;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -114,7 +114,7 @@ function handleClick({ target: el }: Event) {
} }
.outline-link.nested { .outline-link.nested {
padding-left: 13px; padding-left: .8125rem;
} }
.root { .root {

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

@ -47,25 +47,24 @@ const control = usePrevNext()
<style scoped> <style scoped>
.VPDocFooter { .VPDocFooter {
margin-top: 64px; margin-top: 4rem;
} }
.edit-info { .edit-info {
padding-bottom: 18px; padding-bottom: 1.125rem;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.edit-info { .edit-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; padding-bottom: .875rem;
padding-bottom: 14px;
} }
} }
.edit-link { .edit-link {
line-height: 32px; line-height: 2rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
} }
@ -82,15 +81,15 @@ const control = usePrevNext()
} }
.edit-link-icon { .edit-link-icon {
margin-right: 8px; margin-right: .5rem;
width: 14px; width: .875rem;
height: 14px; height: .875rem;
fill: currentColor; fill: currentColor;
} }
.prev-next { .prev-next {
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
padding-top: 24px; padding-top: 1.5rem;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
@ -100,7 +99,7 @@ const control = usePrevNext()
} }
.pager.has-prev { .pager.has-prev {
padding-top: 8px; padding-top: .5rem;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
@ -113,15 +112,15 @@ const control = usePrevNext()
.pager.has-prev { .pager.has-prev {
padding-top: 0; padding-top: 0;
padding-left: 16px; padding-left: 1rem;
} }
} }
.pager-link { .pager-link {
display: block; display: block;
border: 1px solid var(--vp-c-divider-light); border: .0625rem solid var(--vp-c-divider-light);
border-radius: 8px; border-radius: 8px;
padding: 11px 16px 13px; padding: .6875rem 1rem .8125rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: border-color 0.25s; transition: border-color 0.25s;
@ -142,16 +141,16 @@ const control = usePrevNext()
.desc { .desc {
display: block; display: block;
line-height: 20px; line-height: 1.25rem;
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
.title { .title {
display: block; display: block;
line-height: 20px; line-height: 1.25rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-brand); color: var(--vp-c-brand);
transition: color 0.25s; transition: color 0.25s;

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

@ -27,16 +27,16 @@ onMounted(() => {
<style scoped> <style scoped>
.VPLastUpdated { .VPLastUpdated {
line-height: 24px; line-height: 1.5rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.VPLastUpdated { .VPLastUpdated {
line-height: 32px; line-height: 2rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
} }
} }

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

@ -82,7 +82,7 @@ function onBlur() {
.button { .button {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 .75rem;
height: var(--vp-nav-height-mobile); height: var(--vp-nav-height-mobile);
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
transition: color 0.5s; transition: color 0.5s;
@ -98,7 +98,7 @@ function onBlur() {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: var(--vp-nav-height-mobile); line-height: var(--vp-nav-height-mobile);
font-size: 13px; font-size: .8125rem;
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;
@ -111,29 +111,29 @@ function onBlur() {
} }
.option-icon { .option-icon {
margin-right: 0px; margin-right: 0rem;
width: 16px; width: 1rem;
height: 16px; height: 1rem;
fill: currentColor; fill: currentColor;
} }
.text-icon { .text-icon {
margin-left: 4px; margin-left: .25rem;
width: 14px; width: .875rem;
height: 14px; height: .875rem;
fill: currentColor; fill: currentColor;
} }
.icon { .icon {
width: 20px; width: 1.25rem;
height: 20px; height: 1.25rem;
fill: currentColor; fill: currentColor;
transition: fill 0.25s; transition: fill 0.25s;
} }
.menu { .menu {
position: absolute; position: absolute;
top: calc(var(--vp-nav-height-mobile) / 2 + 20px); top: calc(var(--vp-nav-height-mobile) / 2 + 1.25rem);
right: 0; right: 0;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@ -142,7 +142,7 @@ function onBlur() {
@media (min-width: 960px) { @media (min-width: 960px) {
.menu { .menu {
top: calc(var(--vp-nav-height-desktop) / 2 + 20px); top: calc(var(--vp-nav-height-desktop) / 2 + 1.25rem);
} }
} }
</style> </style>

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

@ -19,8 +19,8 @@ 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: .0625rem solid var(--vp-c-divider-light);
padding: 32px 24px; padding: 2rem 1.5rem;
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
} }
@ -30,7 +30,7 @@ const { hasSidebar } = useSidebar()
@media (min-width: 768px) { @media (min-width: 768px) {
.VPFooter { .VPFooter {
padding: 32px; padding: 2rem;
} }
} }
@ -42,8 +42,8 @@ const { hasSidebar } = useSidebar()
.message, .message,
.copyright { .copyright {
line-height: 24px; line-height: 1.5rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }

86
src/client/theme-default/components/VPHero.vue
Unescape View File

@ -55,12 +55,12 @@ defineProps<{
<style scoped> <style scoped>
.VPHero { .VPHero {
margin-top: calc(var(--vp-nav-height) * -1); margin-top: calc(var(--vp-nav-height) * -1);
padding: calc(var(--vp-nav-height) + 48px) 24px 48px; padding: calc(var(--vp-nav-height) + 3rem) 1.5rem 3rem;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.VPHero { .VPHero {
padding: calc(var(--vp-nav-height) + 80px) 48px 64px; padding: calc(var(--vp-nav-height) + 5rem) 3rem 4rem;
} }
} }
@ -68,7 +68,7 @@ defineProps<{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
max-width: 960px; max-width: 60rem;
} }
@media (min-width: 960px) { @media (min-width: 960px) {
@ -110,10 +110,10 @@ defineProps<{
.name, .name,
.text { .text {
max-width: 392px; max-width: 24.5rem;
letter-spacing: -0.4px; letter-spacing: -0.025rem;
line-height: 40px; line-height: 2.5rem;
font-size: 32px; font-size: 2rem;
font-weight: 700; font-weight: 700;
} }
@ -136,17 +136,17 @@ defineProps<{
@media (min-width: 640px) { @media (min-width: 640px) {
.name, .name,
.text { .text {
max-width: 576px; max-width: 36rem;
line-height: 56px; line-height: 3.5rem;
font-size: 48px; font-size: 3rem;
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.name, .name,
.text { .text {
line-height: 64px; line-height: 4rem;
font-size: 56px; font-size: 3.5rem;
} }
.VPHero.has-image .name, .VPHero.has-image .name,
@ -156,10 +156,10 @@ defineProps<{
} }
.tagline { .tagline {
padding-top: 16px; padding-top: 1rem;
max-width: 392px; max-width: 24.5rem;
line-height: 28px; line-height: 1.75rem;
font-size: 18px; font-size: 1.125rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
@ -170,18 +170,18 @@ defineProps<{
@media (min-width: 640px) { @media (min-width: 640px) {
.tagline { .tagline {
padding-top: 24px; padding-top: 1.5rem;
max-width: 576px; max-width: 36rem;
line-height: 32px; line-height: 2rem;
font-size: 20px; font-size: 1.25rem;
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.tagline { .tagline {
padding-top: 24px; padding-top: 1.5rem;
line-height: 36px; line-height: 2.25rem;
font-size: 24px; font-size: 1.5rem;
} }
.VPHero.has-image .tagline { .VPHero.has-image .tagline {
@ -192,8 +192,8 @@ defineProps<{
.actions { .actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: -6px; margin: -0.375rem;
padding-top: 24px; padding-top: 1.5rem;
} }
.VPHero.has-image .actions { .VPHero.has-image .actions {
@ -202,7 +202,7 @@ defineProps<{
@media (min-width: 640px) { @media (min-width: 640px) {
.actions { .actions {
padding-top: 32px; padding-top: 2rem;
} }
} }
@ -214,17 +214,17 @@ defineProps<{
.action { .action {
flex-shrink: 0; flex-shrink: 0;
padding: 6px; padding: .375rem;
} }
.image { .image {
order: 1; order: 1;
margin: -76px -24px -48px; margin: -4.75rem -1.5rem -3rem;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.image { .image {
margin: -108px -24px -48px; margin: -6.75rem -1.5rem -3rem;
} }
} }
@ -240,14 +240,14 @@ defineProps<{
.image-container { .image-container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 320px; width: 20rem;
height: 320px; height: 20rem;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.image-container { .image-container {
width: 392px; width: 24.5rem;
height: 392px; height: 24.5rem;
} }
} }
@ -258,7 +258,7 @@ defineProps<{
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: translate(-32px, -32px); transform: translate(-2rem, -2rem);
} }
} }
@ -267,8 +267,8 @@ defineProps<{
top: 50%; top: 50%;
left: 50%; left: 50%;
border-radius: 50%; border-radius: 50%;
width: 192px; width: 12rem;
height: 192px; height: 12rem;
background-image: var(--vp-home-hero-image-background-image); background-image: var(--vp-home-hero-image-background-image);
filter: var(--vp-home-hero-image-filter); filter: var(--vp-home-hero-image-filter);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -276,15 +276,15 @@ defineProps<{
@media (min-width: 640px) { @media (min-width: 640px) {
.image-bg { .image-bg {
width: 256px; width: 16rem;
height: 256px; height: 16rem;
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.image-bg { .image-bg {
width: 320px; width: 20rem;
height: 320px; height: 20rem;
} }
} }
@ -292,19 +292,19 @@ defineProps<{
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
max-width: 192px; max-width: 12rem;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.image-src { .image-src {
max-width: 256px; max-width: 16rem;
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.image-src { .image-src {
max-width: 320px; max-width: 20rem;
} }
} }
</style> </style>

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

@ -17,17 +17,17 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
<style scoped> <style scoped>
.VPHome { .VPHome {
padding-bottom: 96px; padding-bottom: 6rem;
} }
.VPHome :deep(.VPHomeSponsors) { .VPHome :deep(.VPHomeSponsors) {
margin-top: 112px; margin-top: 7rem;
margin-bottom: -128px; margin-bottom: -8rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.VPHome { .VPHome {
padding-bottom: 128px; padding-bottom: 8rem;
} }
} }
</style> </style>

10
src/client/theme-default/components/VPHomeFeatures.vue
Unescape View File

@ -43,28 +43,28 @@ const grid = computed(() => {
<style scoped> <style scoped>
.VPHomeFeatures { .VPHomeFeatures {
position: relative; position: relative;
padding: 0 24px; padding: 0 1.5rem;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.VPHomeFeatures { .VPHomeFeatures {
padding: 0 48px; padding: 0 3rem;
} }
} }
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 960px; max-width: 60rem;
} }
.items { .items {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: -8px; margin: -0.5rem;
} }
.item { .item {
padding: 8px; padding: .5rem;
width: 100%; width: 100%;
} }

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

@ -48,46 +48,46 @@ defineProps<{
<style scoped> <style scoped>
.VPHomeSponsors { .VPHomeSponsors {
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
padding: 88px 24px 96px; padding: 5.5rem 1.5rem 6rem;
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
} }
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 960px; max-width: 60rem;
} }
.love { .love {
margin: 0 auto; margin: 0 auto;
width: 28px; width: 1.75rem;
height: 28px; height: 1.75rem;
color: var(--vp-c-text-3); color: var(--vp-c-text-3);
} }
.icon { .icon {
width: 28px; width: 1.75rem;
height: 28px; height: 1.75rem;
fill: currentColor; fill: currentColor;
} }
.message { .message {
margin: 0 auto; margin: 0 auto;
padding-top: 10px; padding-top: .625rem;
max-width: 320px; max-width: 20rem;
text-align: center; text-align: center;
line-height: 24px; line-height: 1.5rem;
font-size: 16px; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
.sponsors { .sponsors {
padding-top: 32px; padding-top: 2rem;
} }
.action { .action {
padding-top: 40px; padding-top: 2.5rem;
text-align: center; text-align: center;
} }
</style> </style>

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

@ -28,10 +28,10 @@ const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
<style scoped> <style scoped>
.icon { .icon {
display: inline-block; display: inline-block;
margin-top: -1px; margin-top: -0.0625rem;
margin-left: 4px; margin-left: .25rem;
width: 11px; width: .6875rem;
height: 11px; height: .6875rem;
fill: var(--vp-c-text-3); fill: var(--vp-c-text-3);
transition: fill 0.25s; transition: fill 0.25s;
} }

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

@ -44,7 +44,7 @@ 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: .0625rem solid var(--vp-c-divider-light);
width: 100%; width: 100%;
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
transition: border-color 0.5s, background-color 0.5s; transition: border-color 0.5s, background-color 0.5s;
@ -59,9 +59,9 @@ function scrollToTop() {
.menu { .menu {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 24px 11px; padding: .75rem 1.5rem .6875rem;
line-height: 24px; line-height: 1.5rem;
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.5s; transition: color 0.5s;
@ -74,22 +74,22 @@ function scrollToTop() {
@media (min-width: 768px) { @media (min-width: 768px) {
.menu { .menu {
padding: 0 32px; padding: 0 2rem;
} }
} }
.menu-icon { .menu-icon {
margin-right: 8px; margin-right: .5rem;
width: 16px; width: 1rem;
height: 16px; height: 1rem;
fill: currentColor; fill: currentColor;
} }
.top-link { .top-link {
display: block; display: block;
padding: 12px 24px 11px; padding: .75rem 1.5rem .6875rem;
line-height: 24px; line-height: 1.5rem;
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.5s; transition: color 0.5s;
@ -102,7 +102,7 @@ function scrollToTop() {
@media (min-width: 768px) { @media (min-width: 768px) {
.top-link { .top-link {
padding: 12px 32px 11px; padding: .75rem 2rem .6875rem;
} }
} }
</style> </style>

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

@ -23,9 +23,9 @@ defineProps<{
<style scoped> <style scoped>
.VPMenu { .VPMenu {
border-radius: 12px; border-radius: 12px;
padding: 12px; padding: .75rem;
min-width: 128px; min-width: 8rem;
border: 1px solid var(--vp-c-divider-light); border: .0625rem solid var(--vp-c-divider-light);
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
box-shadow: var(--vp-shadow-3); box-shadow: var(--vp-shadow-3);
transition: background-color 0.5s; transition: background-color 0.5s;
@ -36,13 +36,13 @@ defineProps<{
} }
.VPMenu :deep(.group) { .VPMenu :deep(.group) {
margin: 0 -12px; margin: 0 -0.75rem;
padding: 0 12px 12px; padding: 0 .75rem .75rem;
} }
.VPMenu :deep(.group + .group) { .VPMenu :deep(.group + .group) {
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
padding: 11px 12px 12px; padding: .6875rem .75rem .75rem;
} }
.VPMenu :deep(.group:last-child) { .VPMenu :deep(.group:last-child) {
@ -50,25 +50,25 @@ defineProps<{
} }
.VPMenu :deep(.group + .item) { .VPMenu :deep(.group + .item) {
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
padding: 11px 16px 0; padding: .6875rem 1rem 0;
} }
.VPMenu :deep(.item) { .VPMenu :deep(.item) {
padding: 0 16px; padding: 0 1rem;
white-space: nowrap; white-space: nowrap;
} }
.VPMenu :deep(.label) { .VPMenu :deep(.label) {
flex-grow: 1; flex-grow: 1;
line-height: 28px; line-height: 1.75rem;
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color .5s; transition: color .5s;
} }
.VPMenu :deep(.action) { .VPMenu :deep(.action) {
padding-left: 24px; padding-left: 1.5rem;
} }
</style> </style>

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

@ -19,9 +19,9 @@ defineProps<{
<style scoped> <style scoped>
.VPMenuGroup { .VPMenuGroup {
margin: 12px -12px 0; margin: .75rem -0.75rem 0;
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
padding: 12px 12px 0; padding: .75rem .75rem 0;
} }
.VPMenuGroup:first-child { .VPMenuGroup:first-child {
@ -31,14 +31,14 @@ defineProps<{
} }
.VPMenuGroup + .VPMenuGroup { .VPMenuGroup + .VPMenuGroup {
margin-top: 12px; margin-top: .75rem;
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
} }
.title { .title {
padding: 0 12px; padding: 0 .75rem;
line-height: 32px; line-height: 2rem;
font-size: 14px; font-size: .875rem;
font-weight: 600; font-weight: 600;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.25s; transition: color 0.25s;

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

@ -23,17 +23,17 @@ const { page } = useData()
<style scoped> <style scoped>
.VPMenuGroup + .VPMenuLink { .VPMenuGroup + .VPMenuLink {
margin: 12px -12px 0; margin: .75rem -0.75rem 0;
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
padding: 12px 12px 0; padding: .75rem .75rem 0;
} }
.link { .link {
display: block; display: block;
border-radius: 6px; border-radius: 6px;
padding: 0 12px; padding: 0 .75rem;
line-height: 32px; line-height: 2rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
white-space: nowrap; white-space: nowrap;

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

@ -45,8 +45,8 @@ const { hasSidebar } = useSidebar()
<style scoped> <style scoped>
.VPNavBar { .VPNavBar {
position: relative; position: relative;
border-bottom: 1px solid var(--vp-c-divider-light); border-bottom: .0625rem solid var(--vp-c-divider-light);
padding: 0 8px 0 24px; padding: 0 .5rem 0 1.5rem;
height: var(--vp-nav-height-mobile); height: var(--vp-nav-height-mobile);
background-color: var(--vt-c-bg); background-color: var(--vt-c-bg);
transition: border-color 0.5s, background-color 0.5s; transition: border-color 0.5s, background-color 0.5s;
@ -54,7 +54,7 @@ const { hasSidebar } = useSidebar()
@media (min-width: 768px) { @media (min-width: 768px) {
.VPNavBar { .VPNavBar {
padding: 0 32px; padding: 0 2rem;
} }
} }
@ -84,7 +84,7 @@ const { hasSidebar } = useSidebar()
display: flex; display: flex;
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) - 4rem);
} }
.content { .content {
@ -99,24 +99,24 @@ const { hasSidebar } = useSidebar()
.menu + .social-links::before, .menu + .social-links::before,
.translations + .appearance::before, .translations + .appearance::before,
.appearance + .social-links::before { .appearance + .social-links::before {
margin-right: 8px; margin-right: .5rem;
margin-left: 8px; margin-left: .5rem;
width: 1px; width: .0625rem;
height: 24px; height: 1.5rem;
background-color: var(--vp-c-divider-light); background-color: var(--vp-c-divider-light);
content: ""; content: "";
} }
.menu + .appearance::before, .menu + .appearance::before,
.translations + .appearance::before { .translations + .appearance::before {
margin-right: 16px; margin-right: 1rem;
} }
.appearance + .social-links::before { .appearance + .social-links::before {
margin-left: 16px; margin-left: 1rem;
} }
.social-links { .social-links {
margin-right: -8px; margin-right: -0.5rem;
} }
</style> </style>

16
src/client/theme-default/components/VPNavBarExtra.vue
Unescape View File

@ -38,7 +38,7 @@ const { site, theme } = useData()
<style scoped> <style scoped>
.VPNavBarExtra { .VPNavBarExtra {
display: none; display: none;
margin-right: -12px; margin-right: -0.75rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -54,9 +54,9 @@ const { site, theme } = useData()
} }
.trans-title { .trans-title {
padding: 0 24px 0 12px; padding: 0 1.5rem 0 .75rem;
line-height: 32px; line-height: 2rem;
font-size: 14px; font-size: .875rem;
font-weight: 700; font-weight: 700;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
} }
@ -65,18 +65,18 @@ const { site, theme } = useData()
.item.social-links { .item.social-links {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 .75rem;
} }
.item.appearance { .item.appearance {
min-width: 176px; min-width: 11rem;
} }
.appearance-action { .appearance-action {
margin-right: -2px; margin-right: -0.125rem;
} }
.social-links-list { .social-links-list {
margin: -4px -8px; margin: -0.25rem -0.5rem;
} }
</style> </style>

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

@ -31,7 +31,7 @@ defineEmits<{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 48px; width: 3rem;
height: var(--vp-nav-height); height: var(--vp-nav-height);
} }
@ -43,8 +43,8 @@ defineEmits<{
.container { .container {
position: relative; position: relative;
width: 16px; width: 1rem;
height: 14px; height: .875rem;
overflow: hidden; overflow: hidden;
} }
@ -52,9 +52,9 @@ defineEmits<{
.container:hover .middle { top: 6; left: 0; transform: translateX(0); } .container:hover .middle { top: 6; left: 0; transform: translateX(0); }
.container:hover .bottom { top: 12px; left: 0; transform: translateX(8px); } .container:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
.container.active .top { top: 6px; transform: translateX(0) rotate(225deg); } .container.active .top { top: .375rem; transform: translateX(0) rotate(225deg); }
.container.active .middle { top: 6px; transform: translateX(16px); } .container.active .middle { top: .375rem; transform: translateX(16px); }
.container.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); } .container.active .bottom { top: .375rem; transform: translateX(0) rotate(135deg); }
.container.active:hover .top, .container.active:hover .top,
.container.active:hover .middle, .container.active:hover .middle,
@ -67,13 +67,13 @@ defineEmits<{
.middle, .middle,
.bottom { .bottom {
position: absolute; position: absolute;
width: 16px; width: 1rem;
height: 2px; height: .125rem;
background-color: var(--vp-c-text-1); background-color: var(--vp-c-text-1);
transition: top .25s, background-color .5s, transform .25s; transition: top .25s, background-color .5s, transform .25s;
} }
.top { top: 0; left: 0; transform: translateX(0); } .top { top: 0; left: 0; transform: translateX(0); }
.middle { top: 6px; left: 0; transform: translateX(8px); } .middle { top: .375rem; left: 0; transform: translateX(8px); }
.bottom { top: 12px; left: 0; transform: translateX(4px); } .bottom { top: .75rem; left: 0; transform: translateX(4px); }
</style> </style>

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

@ -32,9 +32,9 @@ const { page } = useData()
.VPNavBarMenuLink { .VPNavBarMenuLink {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 .75rem;
line-height: var(--vp-nav-height-mobile); line-height: var(--vp-nav-height-mobile);
font-size: 14px; font-size: .875rem;
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;

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

@ -96,13 +96,13 @@ function load() {
@media (min-width: 768px) { @media (min-width: 768px) {
.VPNavBarSearch { .VPNavBarSearch {
flex-grow: 1; flex-grow: 1;
padding-left: 24px; padding-left: 1.5rem;
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.VPNavBarSearch { .VPNavBarSearch {
padding-left: 32px; padding-left: 2rem;
} }
} }
@ -134,8 +134,8 @@ function load() {
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 32px; width: 2rem;
height: 55px; height: 3.4375rem;
background: transparent; background: transparent;
transition: border-color 0.25s; transition: border-color 0.25s;
} }
@ -145,8 +145,8 @@ function load() {
} }
.DocSearch-Button:focus { .DocSearch-Button:focus {
outline: 1px dotted; outline: .0625rem dotted;
outline: 5px auto -webkit-focus-ring-color; outline: .3125rem auto -webkit-focus-ring-color;
} }
.DocSearch-Button:focus:not(:focus-visible) { .DocSearch-Button:focus:not(:focus-visible) {
@ -156,11 +156,11 @@ function load() {
@media (min-width: 768px) { @media (min-width: 768px) {
.DocSearch-Button { .DocSearch-Button {
justify-content: flex-start; justify-content: flex-start;
border: 1px solid transparent; border: .0625rem solid transparent;
border-radius: 8px; border-radius: 8px;
padding: 0 10px 0 12px; padding: 0 .625rem 0 .75rem;
width: 100%; width: 100%;
height: 40px; height: 2.5rem;
background-color: var(--vp-c-bg-alt); background-color: var(--vp-c-bg-alt);
} }
@ -177,8 +177,8 @@ function load() {
.DocSearch-Button .DocSearch-Search-Icon { .DocSearch-Button .DocSearch-Search-Icon {
position: relative; position: relative;
width: 16px; width: 1rem;
height: 16px; height: 1rem;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
fill: currentColor; fill: currentColor;
transition: color 0.5s; transition: color 0.5s;
@ -190,19 +190,19 @@ function load() {
@media (min-width: 768px) { @media (min-width: 768px) {
.DocSearch-Button .DocSearch-Search-Icon { .DocSearch-Button .DocSearch-Search-Icon {
top: 1px; top: .0625rem;
margin-right: 8px; margin-right: .5rem;
width: 14px; width: .875rem;
height: 14px; height: .875rem;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
} }
.DocSearch-Button .DocSearch-Button-Placeholder { .DocSearch-Button .DocSearch-Button-Placeholder {
display: none; display: none;
margin-top: 2px; margin-top: .125rem;
padding: 0 16px 0 0; padding: 0 1rem 0 0;
font-size: 13px; font-size: .8125rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.5s; transition: color 0.5s;
@ -232,35 +232,35 @@ function load() {
.DocSearch-Button .DocSearch-Button-Key { .DocSearch-Button .DocSearch-Button-Key {
display: block; display: block;
margin: 2px 0 0 0; margin: .125rem 0 0 0;
border: 1px solid var(--vp-c-divider); border: .0625rem solid var(--vp-c-divider);
border-right: none; border-right: none;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
padding-left: 6px; padding-left: .375rem;
min-width: 0; min-width: 0;
width: auto; width: auto;
height: 22px; height: 1.375rem;
line-height: 22px; line-height: 1.375rem;
font-family: var(--vp-font-family-base); font-family: var(--vp-font-family-base);
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
transition: color 0.5s, border-color 0.5s; transition: color 0.5s, border-color 0.5s;
} }
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key { .DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
border-right: 1px solid var(--vp-c-divider); border-right: .0625rem solid var(--vp-c-divider);
border-left: none; border-left: none;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
padding-left: 2px; padding-left: .125rem;
padding-right: 6px; padding-right: .375rem;
} }
.dark .DocSearch-Footer { .dark .DocSearch-Footer {
border-top: 1px solid var(--vp-c-divider); border-top: .0625rem solid var(--vp-c-divider);
} }
.DocSearch-Form { .DocSearch-Form {
border: 1px solid var(--vp-c-brand); border: .0625rem solid var(--vp-c-brand);
background-color: var(--vp-c-white); background-color: var(--vp-c-white);
} }

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

@ -19,14 +19,14 @@ const { hasSidebar } = useSidebar()
<style scoped> <style scoped>
.VPNavBarTitle { .VPNavBarTitle {
flex-shrink: 0; flex-shrink: 0;
border-bottom: 1px solid transparent; border-bottom: .0625rem solid transparent;
transition: background-color 0.5s; transition: background-color 0.5s;
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.VPNavBarTitle.has-sidebar { .VPNavBarTitle.has-sidebar {
margin-right: 32px; margin-right: 2rem;
width: calc(var(--vp-sidebar-width) - 64px); width: calc(var(--vp-sidebar-width) - 4rem);
border-bottom-color: var(--vp-c-divider-light); border-bottom-color: var(--vp-c-divider-light);
background-color: var(--vp-c-bg-alt); background-color: var(--vp-c-bg-alt);
} }
@ -37,7 +37,7 @@ const { hasSidebar } = useSidebar()
align-items: center; align-items: center;
width: 100%; width: 100%;
height: var(--vp-nav-height); height: var(--vp-nav-height);
font-size: 16px; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
transition: opacity 0.25s; transition: opacity 0.25s;
@ -54,7 +54,7 @@ const { hasSidebar } = useSidebar()
} }
.logo { .logo {
margin-right: 8px; margin-right: .5rem;
height: 24px; height: 1.5rem;
} }
</style> </style>

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

@ -36,9 +36,9 @@ const { theme } = useData()
} }
.title { .title {
padding: 0 24px 0 12px; padding: 0 1.5rem 0 .75rem;
line-height: 32px; line-height: 2rem;
font-size: 14px; font-size: .875rem;
font-weight: 700; font-weight: 700;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
} }

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

@ -45,7 +45,7 @@ function unlockBodyScroll() {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: 0 32px; padding: 0 2rem;
width: 100%; width: 100%;
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
overflow-y: auto; overflow-y: auto;
@ -69,7 +69,7 @@ function unlockBodyScroll() {
.VPNavScreen.fade-enter-from .container, .VPNavScreen.fade-enter-from .container,
.VPNavScreen.fade-leave-to .container { .VPNavScreen.fade-leave-to .container {
transform: translateY(-8px); transform: translateY(-0.5rem);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -80,21 +80,21 @@ function unlockBodyScroll() {
.container { .container {
margin: 0 auto; margin: 0 auto;
padding: 24px 0 96px; padding: 1.5rem 0 6rem;
max-width: 288px; max-width: 18rem;
} }
.menu + .translations, .menu + .translations,
.menu + .appearance, .menu + .appearance,
.translations + .appearance { .translations + .appearance {
margin-top: 24px; margin-top: 1.5rem;
} }
.menu + .social-links { .menu + .social-links {
margin-top: 16px; margin-top: 1rem;
} }
.appearance + .social-links { .appearance + .social-links {
margin-top: 16px; margin-top: 1rem;
} }
</style> </style>

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

@ -18,14 +18,14 @@ const { site } = useData()
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
padding: 12px 14px 12px 16px; padding: .75rem .875rem .75rem 1rem;
background-color: var(--vp-c-bg-soft); background-color: var(--vp-c-bg-soft);
transition: background-color 0.5s; transition: background-color 0.5s;
} }
.text { .text {
line-height: 24px; line-height: 1.5rem;
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.5s; transition: color 0.5s;

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

@ -54,8 +54,8 @@ function toggle() {
<style scoped> <style scoped>
.VPNavScreenMenuGroup { .VPNavScreenMenuGroup {
border-bottom: 1px solid var(--vp-c-divider-light); border-bottom: .0625rem solid var(--vp-c-divider-light);
height: 48px; height: 3rem;
overflow: hidden; overflow: hidden;
transition: border-color 0.5s; transition: border-color 0.5s;
} }
@ -69,12 +69,12 @@ function toggle() {
} }
.VPNavScreenMenuGroup.open { .VPNavScreenMenuGroup.open {
padding-bottom: 10px; padding-bottom: .625rem;
height: auto; height: auto;
} }
.VPNavScreenMenuGroup.open .button { .VPNavScreenMenuGroup.open .button {
padding-bottom: 6px; padding-bottom: .375rem;
color: var(--vp-c-brand); color: var(--vp-c-brand);
} }
@ -86,10 +86,10 @@ function toggle() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 12px 4px 11px 0; padding: .75rem .25rem .6875rem 0;
width: 100%; width: 100%;
line-height: 24px; line-height: 1.5rem;
font-size: 14px; font-size: .875rem;
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;
@ -100,18 +100,18 @@ function toggle() {
} }
.button-icon { .button-icon {
width: 14px; width: .875rem;
height: 14px; height: .875rem;
fill: var(--vp-c-text-2); fill: var(--vp-c-text-2);
transition: fill 0.5s, transform 0.25s; transition: fill 0.5s, transform 0.25s;
} }
.group:first-child { .group:first-child {
padding-top: 0px; padding-top: 0rem;
} }
.group + .group, .group + .group,
.group + .item { .group + .item {
padding-top: 4px; padding-top: .25rem;
} }
</style> </style>

6
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;
line-height: 32px; line-height: 2rem;
font-size: 13px; font-size: .8125rem;
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; margin-left: .75rem;
} }
.VPNavScreenMenuGroupLink:hover { .VPNavScreenMenuGroupLink:hover {

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

@ -26,8 +26,8 @@ defineProps<{
} }
.title { .title {
line-height: 32px; line-height: 2rem;
font-size: 13px; font-size: .8125rem;
font-weight: 700; font-weight: 700;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.25s; transition: color 0.25s;

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

@ -19,10 +19,10 @@ 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: .0625rem solid var(--vp-c-divider-light);
padding: 12px 0 11px; padding: .75rem 0 .6875rem;
line-height: 24px; line-height: 1.5rem;
font-size: 14px; font-size: .875rem;
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.5s, color 0.25s;

18
src/client/theme-default/components/VPNavScreenTranslations.vue
Unescape View File

@ -31,7 +31,7 @@ function toggle() {
<style scoped> <style scoped>
.VPNavScreenTranslations { .VPNavScreenTranslations {
height: 24px; height: 1.5rem;
overflow: hidden; overflow: hidden;
} }
@ -42,32 +42,32 @@ function toggle() {
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
} }
.icon { .icon {
width: 16px; width: 1rem;
height: 16px; height: 1rem;
fill: currentColor; fill: currentColor;
} }
.icon.lang { .icon.lang {
margin-right: 8px; margin-right: .5rem;
} }
.icon.chevron { .icon.chevron {
margin-left: 4px; margin-left: .25rem;
} }
.list { .list {
padding: 4px 0 0 24px; padding: .25rem 0 0 1.5rem;
} }
.link { .link {
line-height: 32px; line-height: 2rem;
font-size: 13px; font-size: .8125rem;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
} }
</style> </style>

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

@ -52,9 +52,9 @@ watchPostEffect(async () => {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: var(--vp-z-index-sidebar); z-index: var(--vp-z-index-sidebar);
padding: 32px 32px 96px; padding: 2rem 2rem 6rem;
width: calc(100vw - 64px); width: calc(100vw - 4rem);
max-width: 320px; max-width: 20rem;
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
opacity: 0; opacity: 0;
box-shadow: var(--vp-c-shadow-3); box-shadow: var(--vp-c-shadow-3);
@ -81,7 +81,7 @@ watchPostEffect(async () => {
.VPSidebar { .VPSidebar {
z-index: 1; z-index: 1;
padding-top: var(--vp-nav-height-desktop); padding-top: var(--vp-nav-height-desktop);
padding-bottom: 128px; padding-bottom: 8rem;
width: var(--vp-sidebar-width); width: var(--vp-sidebar-width);
max-width: 100%; max-width: 100%;
width: var(--vp-sidebar-width); width: var(--vp-sidebar-width);
@ -96,8 +96,8 @@ watchPostEffect(async () => {
@media (min-width: 1440px) { @media (min-width: 1440px) {
.VPSidebar { .VPSidebar {
padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2); padding-left: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2);
width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px); width: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2 + var(--vp-sidebar-width) - 2rem);
} }
} }
@ -106,19 +106,19 @@ watchPostEffect(async () => {
} }
.group + .group { .group + .group {
margin-top: 32px; margin-top: 2rem;
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
padding-top: 10px; padding-top: .625rem;
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.group { .group {
padding-top: 10px; padding-top: .625rem;
width: calc(var(--vp-sidebar-width) - 64px); width: calc(var(--vp-sidebar-width) - 4rem);
} }
.group + .group { .group + .group {
margin-top: 24px; margin-top: 1.5rem;
} }
} }
</style> </style>

26
src/client/theme-default/components/VPSidebarGroup.vue
Unescape View File

@ -48,10 +48,10 @@ function toggle() {
} }
.title-text { .title-text {
padding-top: 6px; padding-top: .375rem;
padding-bottom: 6px; padding-bottom: .375rem;
line-height: 20px; line-height: 1.25rem;
font-size: 14px; font-size: .875rem;
font-weight: 700; font-weight: 700;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
} }
@ -59,10 +59,10 @@ function toggle() {
.action { .action {
display: none; display: none;
position: relative; position: relative;
margin-right: -8px; margin-right: -0.5rem;
border-radius: 4px; border-radius: 4px;
width: 32px; width: 2rem;
height: 32px; height: 2rem;
color: var(--vp-c-text-3); color: var(--vp-c-text-3);
transition: color 0.25s; transition: color 0.25s;
} }
@ -77,10 +77,10 @@ function toggle() {
.icon { .icon {
position: absolute; position: absolute;
top: 8px; top: .5rem;
left: 8px; left: .5rem;
width: 16px; width: 1rem;
height: 16px; height: 1rem;
fill: currentColor; fill: currentColor;
} }
@ -95,13 +95,13 @@ function toggle() {
} }
.VPSidebarGroup.collapsed .items { .VPSidebarGroup.collapsed .items {
margin-bottom: -22px; margin-bottom: -1.375rem;
max-height: 0; max-height: 0;
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.VPSidebarGroup.collapsed .items { .VPSidebarGroup.collapsed .items {
margin-bottom: -14px; margin-bottom: -0.875rem;
} }
} }
</style> </style>

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

@ -27,7 +27,7 @@ const closeSideBar = inject('close-sidebar') as () => void
<style scoped> <style scoped>
.link { .link {
display: block; display: block;
padding: 6px 0; padding: .375rem 0;
} }
.link:hover .link-text { .link:hover .link-text {
@ -41,8 +41,8 @@ const closeSideBar = inject('close-sidebar') as () => void
} }
.link-text { .link-text {
line-height: 20px; line-height: 1.25rem;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.5s; transition: color 0.5s;

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

@ -39,12 +39,12 @@ function focusOnTargetAnchor({ target }: Event) {
<style scoped> <style scoped>
.VPSkipLink { .VPSkipLink {
top: 8px; top: .5rem;
left: 8px; left: .5rem;
padding: 8px 16px; padding: .5rem 1rem;
z-index: 999; z-index: 999;
border-radius: 8px; border-radius: 8px;
font-size: 12px; font-size: .75rem;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: var(--vp-c-brand); color: var(--vp-c-brand);
@ -65,8 +65,8 @@ function focusOnTargetAnchor({ target }: Event) {
@media (min-width: 1280px) { @media (min-width: 1280px) {
.VPSkipLink { .VPSkipLink {
top: 14px; top: .875rem;
left: 16px; left: 1rem;
} }
} }
</style> </style>

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

@ -44,8 +44,8 @@ const icons = {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 36px; width: 2.25rem;
height: 36px; height: 2.25rem;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color .5s; transition: color .5s;
} }
@ -56,8 +56,8 @@ const icons = {
} }
.icon { .icon {
width: 20px; width: 1.25rem;
height: 20px; height: 1.25rem;
fill: currentColor; fill: currentColor;
} }
</style> </style>

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

@ -13,10 +13,10 @@
position: relative; position: relative;
border-radius: 11px; border-radius: 11px;
display: block; display: block;
width: 40px; width: 2.5rem;
height: 22px; height: 1.375rem;
flex-shrink: 0; flex-shrink: 0;
border: 1px solid var(--vp-c-divider); border: .0625rem solid var(--vp-c-divider);
background-color: var(--vp-c-bg-mute); background-color: var(--vp-c-bg-mute);
transition: border-color 0.25s, background-color 0.25s; transition: border-color 0.25s, background-color 0.25s;
} }
@ -27,10 +27,10 @@
.check { .check {
position: absolute; position: absolute;
top: 1px; top: .0625rem;
left: 1px; left: .0625rem;
width: 18px; width: 1.125rem;
height: 18px; height: 1.125rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--vp-c-white); background-color: var(--vp-c-white);
box-shadow: var(--vp-shadow-1); box-shadow: var(--vp-shadow-1);
@ -44,18 +44,18 @@
.icon { .icon {
position: relative; position: relative;
display: block; display: block;
width: 18px; width: 1.125rem;
height: 18px; height: 1.125rem;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
} }
.icon :deep(svg) { .icon :deep(svg) {
position: absolute; position: absolute;
top: 3px; top: .1875rem;
left: 3px; left: .1875rem;
width: 12px; width: .75rem;
height: 12px; height: .75rem;
fill: var(--vp-c-text-2); fill: var(--vp-c-text-2);
} }

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

@ -1,5 +1,5 @@
<template> <template>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" height="1.5rem" width="1.5rem">
<path d="M21,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,11,21,11z" /> <path d="M21,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
<path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" /> <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
<path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" /> <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />

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

@ -3,9 +3,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true" aria-hidden="true"
focusable="false" focusable="false"
height="24px" height="1.5rem"
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="24px" width="1.5rem"
> >
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" /> <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" />

16
src/client/theme-default/styles/base.css
Unescape View File

@ -6,7 +6,7 @@
html { html {
line-height: 1.4; line-height: 1.4;
font-size: 16px; font-size: 1rem;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
@ -17,11 +17,11 @@ html.dark {
body { body {
margin: 0; margin: 0;
width: 100%; width: 100%;
min-width: 320px; min-width: 20rem;
min-height: 100vh; min-height: 100vh;
line-height: 24px; line-height: 1.5rem;
font-family: var(--vp-font-family-base); font-family: var(--vp-font-family-base);
font-size: 16px; font-size: 1rem;
font-weight: 400; font-weight: 400;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
@ -43,8 +43,8 @@ h4,
h5, h5,
h6 { h6 {
margin: 0; margin: 0;
line-height: 24px; line-height: 1.5rem;
font-size: 16px; font-size: 1rem;
font-weight: 400; font-weight: 400;
} }
@ -154,8 +154,8 @@ button,
button:focus, button:focus,
button:focus-visible { button:focus-visible {
outline: 1px dotted; outline: .0625rem dotted;
outline: 4px auto -webkit-focus-ring-color; outline: .25rem auto -webkit-focus-ring-color;
} }
button:focus:not(:focus-visible) { button:focus:not(:focus-visible) {

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

@ -1,9 +1,9 @@
.custom-block { .custom-block {
border: 1px solid transparent; border: .0625rem solid transparent;
border-radius: 8px; border-radius: 8px;
padding: 16px 16px 8px; padding: 1rem 1rem .5rem;
line-height: 24px; line-height: 1.5rem;
font-size: 14px; font-size: .875rem;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
@ -62,16 +62,16 @@
} }
.custom-block p + p { .custom-block p + p {
margin: 8px 0; margin: .5rem 0;
} }
.custom-block.details summary { .custom-block.details summary {
margin: 0 0 8px; margin: 0 0 .5rem;
font-weight: 700; font-weight: 700;
} }
.custom-block.details summary + p { .custom-block.details summary + p {
margin: 8px 0; margin: .5rem 0;
} }
.custom-block a { .custom-block a {

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

@ -15,24 +15,24 @@
.vp-doc h1 { .vp-doc h1 {
letter-spacing: -0.02em; letter-spacing: -0.02em;
line-height: 40px; line-height: 2.5rem;
font-size: 28px; font-size: 1.75rem;
} }
.vp-doc h2 { .vp-doc h2 {
margin: 48px 0 0; margin: 3rem 0 0;
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
padding-top: 24px; padding-top: 1.5rem;
letter-spacing: -0.02em; letter-spacing: -0.02em;
line-height: 32px; line-height: 2rem;
font-size: 24px; font-size: 1.5rem;
} }
.vp-doc h3 { .vp-doc h3 {
margin: 32px 0 0; margin: 2rem 0 0;
letter-spacing: -0.01em; letter-spacing: -0.01em;
line-height: 28px; line-height: 1.75rem;
font-size: 20px; font-size: 1.25rem;
} }
.vp-doc .header-anchor { .vp-doc .header-anchor {
@ -62,8 +62,8 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.vp-doc h1 { .vp-doc h1 {
letter-spacing: -0.02em; letter-spacing: -0.02em;
line-height: 40px; line-height: 2.5rem;
font-size: 32px; font-size: 2rem;
} }
} }
@ -73,23 +73,23 @@
.vp-doc p, .vp-doc p,
.vp-doc summary { .vp-doc summary {
margin: 16px 0; margin: 1rem 0;
} }
.vp-doc p { .vp-doc p {
line-height: 28px; line-height: 1.75rem;
} }
.vp-doc blockquote { .vp-doc blockquote {
margin: 16px 0; margin: 1rem 0;
border-left: 2px solid var(--vp-c-divider); border-left: .125rem solid var(--vp-c-divider);
padding-left: 16px; padding-left: 1rem;
transition: border-color 0.5s; transition: border-color 0.5s;
} }
.vp-doc blockquote > p { .vp-doc blockquote > p {
margin: 0; margin: 0;
font-size: 16px; font-size: 1rem;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.5s; transition: color 0.5s;
} }
@ -116,7 +116,7 @@
.vp-doc ul, .vp-doc ul,
.vp-doc ol { .vp-doc ol {
padding-left: 1.25rem; padding-left: 1.25rem;
margin: 16px 0; margin: 1rem 0;
} }
.vp-doc ul { .vp-doc ul {
@ -128,12 +128,12 @@
} }
.vp-doc li + li { .vp-doc li + li {
margin-top: 8px; margin-top: .5rem;
} }
.vp-doc li > ol, .vp-doc li > ol,
.vp-doc li > ul { .vp-doc li > ul {
margin: 8px 0 0; margin: .5rem 0 0;
} }
/** /**
@ -143,12 +143,12 @@
.vp-doc table { .vp-doc table {
display: block; display: block;
border-collapse: collapse; border-collapse: collapse;
margin: 20px 0; margin: 1.25rem 0;
overflow-x: auto; overflow-x: auto;
} }
.vp-doc tr { .vp-doc tr {
border-top: 1px solid var(--vp-c-divider); border-top: .0625rem solid var(--vp-c-divider);
transition: background-color 0.5s; transition: background-color 0.5s;
} }
@ -158,12 +158,12 @@
.vp-doc th, .vp-doc th,
.vp-doc td { .vp-doc td {
border: 1px solid var(--vp-c-divider); border: .0625rem solid var(--vp-c-divider);
padding: 12px 16px; padding: .75rem 1rem;
} }
.vp-doc th { .vp-doc th {
font-size: 16px; font-size: 1rem;
font-weight: 600; font-weight: 600;
background-color: var(--vp-c-white-soft); background-color: var(--vp-c-white-soft);
} }
@ -177,9 +177,9 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
.vp-doc hr { .vp-doc hr {
margin: 16px 0; margin: 1rem 0;
border: none; border: none;
border-top: 1px solid var(--vp-c-divider-light); border-top: .0625rem solid var(--vp-c-divider-light);
} }
/** /**
@ -187,12 +187,12 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
.vp-doc .custom-block { .vp-doc .custom-block {
margin: 16px 0; margin: 1rem 0;
} }
.vp-doc .custom-block p { .vp-doc .custom-block p {
margin: 8px 0; margin: .5rem 0;
line-height: 24px; line-height: 1.5rem;
} }
.vp-doc .custom-block p:first-child { .vp-doc .custom-block p:first-child {
@ -217,7 +217,7 @@
} }
.vp-doc .custom-block div[class*='language-'] { .vp-doc .custom-block div[class*='language-'] {
margin: 8px 0; margin: .5rem 0;
} }
.vp-doc .custom-block div[class*='language-'] code { .vp-doc .custom-block div[class*='language-'] code {
@ -236,7 +236,7 @@
.vp-doc :not(pre) > code { .vp-doc :not(pre) > code {
border-radius: 4px; border-radius: 4px;
padding: 3px 6px; padding: .1875rem .375rem;
color: var(--vp-c-text-code); color: var(--vp-c-text-code);
background-color: var(--vp-c-bg-mute); background-color: var(--vp-c-bg-mute);
transition: color 0.5s, background-color 0.5s; transition: color 0.5s, background-color 0.5s;
@ -259,7 +259,7 @@
.vp-doc div[class*='language-'] { .vp-doc div[class*='language-'] {
position: relative; position: relative;
margin: 16px -24px; margin: 1rem -1.5rem;
background-color: var(--vp-code-block-bg); background-color: var(--vp-code-block-bg);
overflow-x: auto; overflow-x: auto;
transition: background-color 0.5s; transition: background-color 0.5s;
@ -268,7 +268,7 @@
@media (min-width: 640px) { @media (min-width: 640px) {
.vp-doc div[class*='language-'] { .vp-doc div[class*='language-'] {
border-radius: 8px; border-radius: 8px;
margin: 16px 0; margin: 1rem 0;
} }
} }
@ -281,7 +281,7 @@
.vp-doc div[class*='language-'] + div[class*='language-'], .vp-doc div[class*='language-'] + div[class*='language-'],
.vp-doc div[class$='-api'] + div[class*='language-'], .vp-doc div[class$='-api'] + div[class*='language-'],
.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] { .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
margin-top: -8px; margin-top: -0.5rem;
} }
.vp-doc [class*='language-'] pre, .vp-doc [class*='language-'] pre,
@ -304,14 +304,14 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
margin: 0; margin: 0;
padding: 16px 0; padding: 1rem 0;
background: transparent; background: transparent;
overflow-x: auto; overflow-x: auto;
} }
.vp-doc [class*='language-'] code { .vp-doc [class*='language-'] code {
display: block; display: block;
padding: 0 24px; padding: 0 1.5rem;
width: fit-content; width: fit-content;
line-height: var(--vp-code-line-height); line-height: var(--vp-code-line-height);
font-size: var(--vp-code-font-size); font-size: var(--vp-code-font-size);
@ -324,7 +324,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding-top: 16px; padding-top: 1rem;
width: 100%; width: 100%;
line-height: var(--vp-code-line-height); line-height: var(--vp-code-line-height);
font-family: var(--vp-font-family-mono); font-family: var(--vp-font-family-mono);
@ -339,11 +339,11 @@
} }
.vp-doc div[class*='language-'].line-numbers-mode { .vp-doc div[class*='language-'].line-numbers-mode {
padding-left: 32px; padding-left: 2rem;
} }
.vp-doc div[class*='language-'].line-numbers-mode pre { .vp-doc div[class*='language-'].line-numbers-mode pre {
padding-left: 16px; padding-left: 1rem;
} }
.vp-doc .line-numbers-wrapper { .vp-doc .line-numbers-wrapper {
@ -352,9 +352,9 @@
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: .0625rem solid var(--vp-c-divider-dark-2);
padding-top: 16px; padding-top: 1rem;
width: 32px; width: 2rem;
text-align: center; text-align: center;
font-family: var(--vp-font-family-mono); font-family: var(--vp-font-family-mono);
line-height: var(--vp-code-line-height); line-height: var(--vp-code-line-height);
@ -365,21 +365,21 @@
.vp-doc [class*='language-'] > span.copy { .vp-doc [class*='language-'] > span.copy {
position: absolute; position: absolute;
top: 8px; top: .5rem;
right: 8px; right: .5rem;
z-index: 2; z-index: 2;
display: block; display: block;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
width: 40px; width: 2.5rem;
height: 40px; height: 2.5rem;
background-color: var(--vp-code-block-bg); background-color: var(--vp-code-block-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: 1.25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
transition: opacity 0.25s; transition: opacity 0.25s;
} }
@ -402,14 +402,14 @@
.vp-doc [class*='language-'] > span.copy.copied::before, .vp-doc [class*='language-'] > span.copy.copied::before,
.vp-doc [class*='language-'] > span.copy:hover.copied::before { .vp-doc [class*='language-'] > span.copy:hover.copied::before {
position: relative; position: relative;
left: -65px; left: -4.0625rem;
display: block; display: block;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
padding-top: 8px; padding-top: .5rem;
width: 64px; width: 4rem;
height: 40px; height: 2.5rem;
text-align: center; text-align: center;
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
color: var(--vp-code-copy-code-active-text); color: var(--vp-code-copy-code-active-text);
background-color: var(--vp-code-copy-code-hover-bg); background-color: var(--vp-code-copy-code-hover-bg);
@ -419,10 +419,10 @@
.vp-doc [class*='language-']:before { .vp-doc [class*='language-']:before {
position: absolute; position: absolute;
top: 6px; top: .375rem;
right: 12px; right: .75rem;
z-index: 2; z-index: 2;
font-size: 12px; font-size: .75rem;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-dark-3); color: var(--vp-c-text-dark-3);
transition: color 0.5s, opacity 0.5s; transition: color 0.5s, opacity 0.5s;

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

@ -12,14 +12,14 @@
} }
.vp-sponsor-section + .vp-sponsor-section { .vp-sponsor-section + .vp-sponsor-section {
margin-top: 4px; margin-top: .25rem;
} }
.vp-sponsor-tier { .vp-sponsor-tier {
margin-bottom: 4px; margin-bottom: .25rem;
text-align: center; text-align: center;
letter-spacing: 1px; letter-spacing: .0625rem;
line-height: 24px; line-height: 1.5rem;
width: 100%; width: 100%;
font-weight: 600; font-weight: 600;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
@ -27,58 +27,58 @@
} }
.vp-sponsor.normal .vp-sponsor-tier { .vp-sponsor.normal .vp-sponsor-tier {
padding: 13px 0 11px; padding: .8125rem 0 .6875rem;
font-size: 14px; font-size: .875rem;
} }
.vp-sponsor.aside .vp-sponsor-tier { .vp-sponsor.aside .vp-sponsor-tier {
padding: 9px 0 7px; padding: .5625rem 0 .4375rem;
font-size: 12px; font-size: .75rem;
} }
.vp-sponsor-grid + .vp-sponsor-tier { .vp-sponsor-grid + .vp-sponsor-tier {
margin-top: 4px; margin-top: .25rem;
} }
.vp-sponsor-grid { .vp-sponsor-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px; gap: .25rem;
} }
.vp-sponsor-grid.xmini .vp-sponsor-grid-link { height: 64px; } .vp-sponsor-grid.xmini .vp-sponsor-grid-link { height: 4rem; }
.vp-sponsor-grid.xmini .vp-sponsor-grid-image { max-width: 64px; max-height: 22px } .vp-sponsor-grid.xmini .vp-sponsor-grid-image { max-width: 4rem; max-height: 1.375rem }
.vp-sponsor-grid.mini .vp-sponsor-grid-link { height: 72px; } .vp-sponsor-grid.mini .vp-sponsor-grid-link { height: 4.5rem; }
.vp-sponsor-grid.mini .vp-sponsor-grid-image { max-width: 96px; max-height: 24px } .vp-sponsor-grid.mini .vp-sponsor-grid-image { max-width: 6rem; max-height: 1.5rem }
.vp-sponsor-grid.small .vp-sponsor-grid-link { height: 96px; } .vp-sponsor-grid.small .vp-sponsor-grid-link { height: 6rem; }
.vp-sponsor-grid.small .vp-sponsor-grid-image { max-width: 96px; max-height: 24px } .vp-sponsor-grid.small .vp-sponsor-grid-image { max-width: 6rem; max-height: 1.5rem }
.vp-sponsor-grid.medium .vp-sponsor-grid-link { height: 112px; } .vp-sponsor-grid.medium .vp-sponsor-grid-link { height: 7rem; }
.vp-sponsor-grid.medium .vp-sponsor-grid-image { max-width: 120px; max-height: 36px } .vp-sponsor-grid.medium .vp-sponsor-grid-image { max-width: 7.5rem; max-height: 2.25rem }
.vp-sponsor-grid.big .vp-sponsor-grid-link { height: 184px; } .vp-sponsor-grid.big .vp-sponsor-grid-link { height: 11.5rem; }
.vp-sponsor-grid.big .vp-sponsor-grid-image { max-width: 192px; max-height: 56px } .vp-sponsor-grid.big .vp-sponsor-grid-image { max-width: 12rem; max-height: 3.5rem }
.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item { .vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item {
width: calc((100% - 4px) / 2); width: calc((100% - .25rem) / 2);
} }
.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item { .vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item {
width: calc((100% - 4px * 2) / 3); width: calc((100% - .25rem * 2) / 3);
} }
.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item { .vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item {
width: calc((100% - 4px * 3) / 4); width: calc((100% - .25rem * 3) / 4);
} }
.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item { .vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item {
width: calc((100% - 4px * 4) / 5); width: calc((100% - .25rem * 4) / 5);
} }
.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item { .vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item {
width: calc((100% - 4px * 5) / 6); width: calc((100% - .25rem * 5) / 6);
} }
.vp-sponsor-grid-item { .vp-sponsor-grid-item {

4
src/client/theme-default/styles/utils.css
Unescape View File

@ -1,7 +1,7 @@
.visually-hidden { .visually-hidden {
position: absolute; position: absolute;
width: 1px; width: .0625rem;
height: 1px; height: .0625rem;
white-space: nowrap; white-space: nowrap;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
clip-path: inset(50%); clip-path: inset(50%);

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

@ -156,11 +156,11 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --vp-shadow-1: 0 .0625rem .125rem rgba(0, 0, 0, 0.04), 0 .0625rem .125rem rgba(0, 0, 0, 0.06);
--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07); --vp-shadow-2: 0 .1875rem .75rem rgba(0, 0, 0, 0.07), 0 .0625rem .25rem rgba(0, 0, 0, 0.07);
--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08); --vp-shadow-3: 0 .75rem 2rem rgba(0, 0, 0, 0.1), 0 .125rem .375rem rgba(0, 0, 0, 0.08);
--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12); --vp-shadow-4: 0 .875rem 2.75rem rgba(0, 0, 0, 0.12), 0 .1875rem .5625rem rgba(0, 0, 0, 0.12);
--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16); --vp-shadow-5: 0 1.125rem 3.5rem rgba(0, 0, 0, 0.16), 0 .25rem .75rem rgba(0, 0, 0, 0.16);
} }
/** /**
@ -180,7 +180,7 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"); --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20px' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"); --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
} }
@ -189,7 +189,7 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-layout-max-width: 1440px; --vp-layout-max-width: 90rem;
} }
/** /**
@ -280,7 +280,7 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-custom-block-code-font-size: 13px; --vp-custom-block-code-font-size: .8125rem;
--vp-custom-block-info-border: var(--vp-c-divider-light); --vp-custom-block-info-border: var(--vp-c-divider-light);
--vp-custom-block-info-text: var(--vp-c-text-2); --vp-custom-block-info-text: var(--vp-c-text-2);
@ -329,8 +329,8 @@
:root { :root {
--vp-nav-height: var(--vp-nav-height-mobile); --vp-nav-height: var(--vp-nav-height-mobile);
--vp-nav-height-mobile: 56px; --vp-nav-height-mobile: 3.5rem;
--vp-nav-height-desktop: 72px; --vp-nav-height-desktop: 4.5rem;
} }
@media (min-width: 960px) { @media (min-width: 960px) {

Write Preview
Loading…
Cancel
Save