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

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

@ -23,55 +23,55 @@ const { site } = useData()
<style scoped>
.NotFound {
padding: 64px 24px 96px;
padding: 4rem 1.5rem 6rem;
text-align: center;
}
@media (min-width: 768px) {
.NotFound {
padding: 96px 32px 168px;
padding: 6rem 2rem 10.5rem;
}
}
.code {
line-height: 64px;
font-size: 64px;
line-height: 4rem;
font-size: 4rem;
font-weight: 600;
}
.title {
padding-top: 12px;
letter-spacing: 2px;
line-height: 20px;
font-size: 20px;
padding-top: .75rem;
letter-spacing: .125rem;
line-height: 1.25rem;
font-size: 1.25rem;
font-weight: 700;
}
.divider {
margin: 24px auto 18px;
width: 64px;
height: 1px;
margin: 1.5rem auto 1.125rem;
width: 4rem;
height: .0625rem;
background-color: var(--vp-c-divider)
}
.quote {
margin: 0 auto;
max-width: 256px;
font-size: 14px;
max-width: 16rem;
font-size: .875rem;
font-weight: 500;
color: var(--vp-c-text-2);
}
.action {
padding-top: 20px;
padding-top: 1.25rem;
}
.link {
display: inline-block;
border: 1px solid var(--vp-c-brand);
border: .0625rem solid var(--vp-c-brand);
border-radius: 16px;
padding: 3px 16px;
font-size: 14px;
padding: .1875rem 1rem;
font-size: .875rem;
font-weight: 500;
color: var(--vp-c-brand);
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>
.VPBox {
border: 1px solid var(--vp-c-divider-light);
border: .0625rem solid var(--vp-c-divider-light);
border-radius: 12px;
padding: 24px;
padding: 1.5rem;
height: 100%;
background-color: var(--vp-c-bg-soft);
}
@ -27,12 +27,12 @@ defineProps<{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
margin-bottom: 1.25rem;
border-radius: 6px;
background-color: var(--vp-c-gray-light-4);
width: 48px;
height: 48px;
font-size: 24px;
width: 3rem;
height: 3rem;
font-size: 1.5rem;
}
.dark .icon {
@ -40,15 +40,15 @@ defineProps<{
}
.title {
line-height: 24px;
font-size: 16px;
line-height: 1.5rem;
font-size: 1rem;
font-weight: 600;
}
.details {
padding-top: 8px;
line-height: 24px;
font-size: 14px;
padding-top: .5rem;
line-height: 1.5rem;
font-size: .875rem;
font-weight: 500;
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>
.VPButton {
display: inline-block;
border: 1px solid transparent;
border: .0625rem solid transparent;
text-align: center;
font-weight: 500;
white-space: nowrap;
@ -54,16 +54,16 @@ const component = computed(() => {
.VPButton.medium {
border-radius: 20px;
padding: 0 20px;
line-height: 38px;
font-size: 14px;
padding: 0 1.25rem;
line-height: 2.375rem;
font-size: .875rem;
}
.VPButton.big {
border-radius: 24px;
padding: 0 24px;
line-height: 46px;
font-size: 16px;
padding: 0 1.5rem;
line-height: 2.875rem;
font-size: 1rem;
}
.VPButton.brand {

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -19,8 +19,8 @@ const { hasSidebar } = useSidebar()
.VPFooter {
position: relative;
z-index: var(--vp-z-index-footer);
border-top: 1px solid var(--vp-c-divider-light);
padding: 32px 24px;
border-top: .0625rem solid var(--vp-c-divider-light);
padding: 2rem 1.5rem;
background-color: var(--vp-c-bg);
}
@ -30,7 +30,7 @@ const { hasSidebar } = useSidebar()
@media (min-width: 768px) {
.VPFooter {
padding: 32px;
padding: 2rem;
}
}
@ -42,8 +42,8 @@ const { hasSidebar } = useSidebar()
.message,
.copyright {
line-height: 24px;
font-size: 14px;
line-height: 1.5rem;
font-size: .875rem;
font-weight: 500;
color: var(--vp-c-text-2);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -32,9 +32,9 @@ const { page } = useData()
.VPNavBarMenuLink {
display: flex;
align-items: center;
padding: 0 12px;
padding: 0 .75rem;
line-height: var(--vp-nav-height-mobile);
font-size: 14px;
font-size: .875rem;
font-weight: 500;
color: var(--vp-c-text-1);
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) {
.VPNavBarSearch {
flex-grow: 1;
padding-left: 24px;
padding-left: 1.5rem;
}
}
@media (min-width: 960px) {
.VPNavBarSearch {
padding-left: 32px;
padding-left: 2rem;
}
}
@ -134,8 +134,8 @@ function load() {
align-items: center;
margin: 0;
padding: 0;
width: 32px;
height: 55px;
width: 2rem;
height: 3.4375rem;
background: transparent;
transition: border-color 0.25s;
}
@ -145,8 +145,8 @@ function load() {
}
.DocSearch-Button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
outline: .0625rem dotted;
outline: .3125rem auto -webkit-focus-ring-color;
}
.DocSearch-Button:focus:not(:focus-visible) {
@ -156,11 +156,11 @@ function load() {
@media (min-width: 768px) {
.DocSearch-Button {
justify-content: flex-start;
border: 1px solid transparent;
border: .0625rem solid transparent;
border-radius: 8px;
padding: 0 10px 0 12px;
padding: 0 .625rem 0 .75rem;
width: 100%;
height: 40px;
height: 2.5rem;
background-color: var(--vp-c-bg-alt);
}
@ -177,8 +177,8 @@ function load() {
.DocSearch-Button .DocSearch-Search-Icon {
position: relative;
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
color: var(--vp-c-text-1);
fill: currentColor;
transition: color 0.5s;
@ -190,19 +190,19 @@ function load() {
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Search-Icon {
top: 1px;
margin-right: 8px;
width: 14px;
height: 14px;
top: .0625rem;
margin-right: .5rem;
width: .875rem;
height: .875rem;
color: var(--vp-c-text-2);
}
}
.DocSearch-Button .DocSearch-Button-Placeholder {
display: none;
margin-top: 2px;
padding: 0 16px 0 0;
font-size: 13px;
margin-top: .125rem;
padding: 0 1rem 0 0;
font-size: .8125rem;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color 0.5s;
@ -232,35 +232,35 @@ function load() {
.DocSearch-Button .DocSearch-Button-Key {
display: block;
margin: 2px 0 0 0;
border: 1px solid var(--vp-c-divider);
margin: .125rem 0 0 0;
border: .0625rem solid var(--vp-c-divider);
border-right: none;
border-radius: 4px 0 0 4px;
padding-left: 6px;
padding-left: .375rem;
min-width: 0;
width: auto;
height: 22px;
line-height: 22px;
height: 1.375rem;
line-height: 1.375rem;
font-family: var(--vp-font-family-base);
font-size: 12px;
font-size: .75rem;
font-weight: 500;
transition: color 0.5s, border-color 0.5s;
}
.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-radius: 0 4px 4px 0;
padding-left: 2px;
padding-right: 6px;
padding-left: .125rem;
padding-right: .375rem;
}
.dark .DocSearch-Footer {
border-top: 1px solid var(--vp-c-divider);
border-top: .0625rem solid var(--vp-c-divider);
}
.DocSearch-Form {
border: 1px solid var(--vp-c-brand);
border: .0625rem solid var(--vp-c-brand);
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>
.VPNavBarTitle {
flex-shrink: 0;
border-bottom: 1px solid transparent;
border-bottom: .0625rem solid transparent;
transition: background-color 0.5s;
}
@media (min-width: 960px) {
.VPNavBarTitle.has-sidebar {
margin-right: 32px;
width: calc(var(--vp-sidebar-width) - 64px);
margin-right: 2rem;
width: calc(var(--vp-sidebar-width) - 4rem);
border-bottom-color: var(--vp-c-divider-light);
background-color: var(--vp-c-bg-alt);
}
@ -37,7 +37,7 @@ const { hasSidebar } = useSidebar()
align-items: center;
width: 100%;
height: var(--vp-nav-height);
font-size: 16px;
font-size: 1rem;
font-weight: 600;
color: var(--vp-c-text-1);
transition: opacity 0.25s;
@ -54,7 +54,7 @@ const { hasSidebar } = useSidebar()
}
.logo {
margin-right: 8px;
height: 24px;
margin-right: .5rem;
height: 1.5rem;
}
</style>

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

@ -36,9 +36,9 @@ const { theme } = useData()
}
.title {
padding: 0 24px 0 12px;
line-height: 32px;
font-size: 14px;
padding: 0 1.5rem 0 .75rem;
line-height: 2rem;
font-size: .875rem;
font-weight: 700;
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;
bottom: 0;
left: 0;
padding: 0 32px;
padding: 0 2rem;
width: 100%;
background-color: var(--vp-c-bg);
overflow-y: auto;
@ -69,7 +69,7 @@ function unlockBodyScroll() {
.VPNavScreen.fade-enter-from .container,
.VPNavScreen.fade-leave-to .container {
transform: translateY(-8px);
transform: translateY(-0.5rem);
}
@media (min-width: 768px) {
@ -80,21 +80,21 @@ function unlockBodyScroll() {
.container {
margin: 0 auto;
padding: 24px 0 96px;
max-width: 288px;
padding: 1.5rem 0 6rem;
max-width: 18rem;
}
.menu + .translations,
.menu + .appearance,
.translations + .appearance {
margin-top: 24px;
margin-top: 1.5rem;
}
.menu + .social-links {
margin-top: 16px;
margin-top: 1rem;
}
.appearance + .social-links {
margin-top: 16px;
margin-top: 1rem;
}
</style>

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

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

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

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

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

@ -26,8 +26,8 @@ defineProps<{
}
.title {
line-height: 32px;
font-size: 13px;
line-height: 2rem;
font-size: .8125rem;
font-weight: 700;
color: var(--vp-c-text-2);
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>
.VPNavScreenMenuLink {
display: block;
border-bottom: 1px solid var(--vp-c-divider-light);
padding: 12px 0 11px;
line-height: 24px;
font-size: 14px;
border-bottom: .0625rem solid var(--vp-c-divider-light);
padding: .75rem 0 .6875rem;
line-height: 1.5rem;
font-size: .875rem;
font-weight: 500;
color: var(--vp-c-text-1);
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>
.VPNavScreenTranslations {
height: 24px;
height: 1.5rem;
overflow: hidden;
}
@ -42,32 +42,32 @@ function toggle() {
.title {
display: flex;
align-items: center;
font-size: 14px;
font-size: .875rem;
font-weight: 500;
color: var(--vp-c-text-1);
}
.icon {
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
fill: currentColor;
}
.icon.lang {
margin-right: 8px;
margin-right: .5rem;
}
.icon.chevron {
margin-left: 4px;
margin-left: .25rem;
}
.list {
padding: 4px 0 0 24px;
padding: .25rem 0 0 1.5rem;
}
.link {
line-height: 32px;
font-size: 13px;
line-height: 2rem;
font-size: .8125rem;
color: var(--vp-c-text-1);
}
</style>

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

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

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

@ -48,10 +48,10 @@ function toggle() {
}
.title-text {
padding-top: 6px;
padding-bottom: 6px;
line-height: 20px;
font-size: 14px;
padding-top: .375rem;
padding-bottom: .375rem;
line-height: 1.25rem;
font-size: .875rem;
font-weight: 700;
color: var(--vp-c-text-1);
}
@ -59,10 +59,10 @@ function toggle() {
.action {
display: none;
position: relative;
margin-right: -8px;
margin-right: -0.5rem;
border-radius: 4px;
width: 32px;
height: 32px;
width: 2rem;
height: 2rem;
color: var(--vp-c-text-3);
transition: color 0.25s;
}
@ -77,10 +77,10 @@ function toggle() {
.icon {
position: absolute;
top: 8px;
left: 8px;
width: 16px;
height: 16px;
top: .5rem;
left: .5rem;
width: 1rem;
height: 1rem;
fill: currentColor;
}
@ -95,13 +95,13 @@ function toggle() {
}
.VPSidebarGroup.collapsed .items {
margin-bottom: -22px;
margin-bottom: -1.375rem;
max-height: 0;
}
@media (min-width: 960px) {
.VPSidebarGroup.collapsed .items {
margin-bottom: -14px;
margin-bottom: -0.875rem;
}
}
</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>
.link {
display: block;
padding: 6px 0;
padding: .375rem 0;
}
.link:hover .link-text {
@ -41,8 +41,8 @@ const closeSideBar = inject('close-sidebar') as () => void
}
.link-text {
line-height: 20px;
font-size: 14px;
line-height: 1.25rem;
font-size: .875rem;
font-weight: 500;
color: var(--vp-c-text-2);
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>
.VPSkipLink {
top: 8px;
left: 8px;
padding: 8px 16px;
top: .5rem;
left: .5rem;
padding: .5rem 1rem;
z-index: 999;
border-radius: 8px;
font-size: 12px;
font-size: .75rem;
font-weight: bold;
text-decoration: none;
color: var(--vp-c-brand);
@ -65,8 +65,8 @@ function focusOnTargetAnchor({ target }: Event) {
@media (min-width: 1280px) {
.VPSkipLink {
top: 14px;
left: 16px;
top: .875rem;
left: 1rem;
}
}
</style>

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

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

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

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

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

@ -1,5 +1,5 @@
<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,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" />

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

@ -3,9 +3,9 @@
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="24px"
height="1.5rem"
viewBox="0 0 24 24"
width="24px"
width="1.5rem"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<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 {
line-height: 1.4;
font-size: 16px;
font-size: 1rem;
-webkit-text-size-adjust: 100%;
}
@ -17,11 +17,11 @@ html.dark {
body {
margin: 0;
width: 100%;
min-width: 320px;
min-width: 20rem;
min-height: 100vh;
line-height: 24px;
line-height: 1.5rem;
font-family: var(--vp-font-family-base);
font-size: 16px;
font-size: 1rem;
font-weight: 400;
color: var(--vp-c-text-1);
background-color: var(--vp-c-bg);
@ -43,8 +43,8 @@ h4,
h5,
h6 {
margin: 0;
line-height: 24px;
font-size: 16px;
line-height: 1.5rem;
font-size: 1rem;
font-weight: 400;
}
@ -154,8 +154,8 @@ button,
button:focus,
button:focus-visible {
outline: 1px dotted;
outline: 4px auto -webkit-focus-ring-color;
outline: .0625rem dotted;
outline: .25rem auto -webkit-focus-ring-color;
}
button:focus:not(:focus-visible) {

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

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

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

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

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

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

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

@ -156,11 +156,11 @@
* -------------------------------------------------------------------------- */
:root {
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px 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-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px 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-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
--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 .1875rem .75rem rgba(0, 0, 0, 0.07), 0 .0625rem .25rem rgba(0, 0, 0, 0.07);
--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 .875rem 2.75rem rgba(0, 0, 0, 0.12), 0 .1875rem .5625rem rgba(0, 0, 0, 0.12);
--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 {
--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");
}
@ -189,7 +189,7 @@
* -------------------------------------------------------------------------- */
:root {
--vp-layout-max-width: 1440px;
--vp-layout-max-width: 90rem;
}
/**
@ -280,7 +280,7 @@
* -------------------------------------------------------------------------- */
: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-text: var(--vp-c-text-2);
@ -329,8 +329,8 @@
:root {
--vp-nav-height: var(--vp-nav-height-mobile);
--vp-nav-height-mobile: 56px;
--vp-nav-height-desktop: 72px;
--vp-nav-height-mobile: 3.5rem;
--vp-nav-height-desktop: 4.5rem;
}
@media (min-width: 960px) {

Write Preview
Loading…
Cancel
Save