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

feat(theme): use relative length units (#5323)

Browse Source 
Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
pull/5194/merge
Bjorn Lu 1 month ago committed by GitHub
parent 8dbd782c75
commit 2a91caa78e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
76 changed files with 874 additions and 880 deletions
Show Stats Download Patch File Download Diff File

6
__tests__/unit/node/plugins/localSearchPlugin.test.ts
Unescape View File

@ -46,7 +46,7 @@ describe('node/plugins/localSearchPlugin', () => {
'# Chinese home\n\nlocaleonlytoken\n'
)
await writeFile(
path.join(configDir, 'config.ts'),
path.join(configDir, 'config.mjs'),
[
'export default {',
' rewrites: {',
@ -120,7 +120,7 @@ describe('node/plugins/localSearchPlugin', () => {
`# Chinese home\n\n${content}`
)
await writeFile(
path.join(configDir, 'config.ts'),
path.join(configDir, 'config.mjs'),
[
'export default {',
' locales: {',
@ -195,7 +195,7 @@ describe('node/plugins/localSearchPlugin', () => {
'# Broken\n\n<!-- @include: ./missing.md -->\n'
)
await writeFile(
path.join(configDir, 'config.ts'),
path.join(configDir, 'config.mjs'),
"export default { themeConfig: { search: { provider: 'local' } } }"
)

14
docs/.vitepress/config.ts
Unescape View File

@ -9,13 +9,13 @@ import {
localIconLoader
} from 'vitepress-plugin-group-icons'
import llmstxt from 'vitepress-plugin-llms'
import { markdown as esMarkdown } from '../es/config'
import { markdown as faMarkdown } from '../fa/config'
import { markdown as jaMarkdown } from '../ja/config'
import { markdown as koMarkdown } from '../ko/config'
import { markdown as ptMarkdown } from '../pt/config'
import { markdown as ruMarkdown } from '../ru/config'
import { markdown as zhMarkdown } from '../zh/config'
import { markdown as esMarkdown } from '../es/config.js'
import { markdown as faMarkdown } from '../fa/config.js'
import { markdown as jaMarkdown } from '../ja/config.js'
import { markdown as koMarkdown } from '../ko/config.js'
import { markdown as ptMarkdown } from '../pt/config.js'
import { markdown as ruMarkdown } from '../ru/config.js'
import { markdown as zhMarkdown } from '../zh/config.js'
const prod = !!process.env.NETLIFY
const siteUrl = 'https://vitepress.dev'

6
docs/.vitepress/theme/styles.css
Unescape View File

@ -40,13 +40,13 @@
--vp-home-hero-image-filter: blur(44px);
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
:root {
--vp-home-hero-image-filter: blur(68px);
}
@ -54,7 +54,7 @@
.VPHero .VPImage {
filter: drop-shadow(-2px 4px 6px rgba(0, 0, 0, 0.2));
padding: 18px;
padding: 1.125rem;
}
.VPFeature .icon span {

12
docs/components/ModalDemo.vue
Unescape View File

@ -38,23 +38,23 @@ const showModal = ref(false)
}
.modal-container {
width: 300px;
width: 18.75rem;
margin: auto;
padding: 20px 30px;
padding: 1.25rem 1.875rem;
background-color: var(--vp-c-bg);
border-radius: 2px;
border-radius: 0.125rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.model-footer {
margin-top: 8px;
margin-top: 0.5rem;
text-align: right;
}
.modal-button {
padding: 4px 8px;
border-radius: 4px;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
border-color: var(--vp-button-alt-border);
color: var(--vp-button-alt-text);
background-color: var(--vp-button-alt-bg);

12
docs/ru/components/ModalDemo.vue
Unescape View File

@ -40,23 +40,23 @@ const showModal = ref(false)
}
.modal-container {
width: 300px;
width: 18.75rem;
margin: auto;
padding: 20px 30px;
padding: 1.25rem 1.875rem;
background-color: var(--vp-c-bg);
border-radius: 2px;
border-radius: 0.125rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.model-footer {
margin-top: 8px;
margin-top: 0.5rem;
text-align: right;
}
.modal-button {
padding: 4px 8px;
border-radius: 4px;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
border-color: var(--vp-button-alt-border);
color: var(--vp-button-alt-text);
background-color: var(--vp-button-alt-bg);

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

@ -33,55 +33,55 @@ const { currentLang } = useLangs()
<style scoped>
.NotFound {
padding: 64px 24px 96px;
padding: 4rem 1.5rem 6rem;
text-align: center;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.NotFound {
padding: 96px 32px 168px;
padding: 6rem 2rem 10.5rem;
}
}
.code {
line-height: 64px;
font-size: 64px;
line-height: 1;
font-size: 4rem;
font-weight: 600;
}
.title {
padding-top: 12px;
letter-spacing: 2px;
line-height: 20px;
font-size: 20px;
padding-top: 0.75rem;
letter-spacing: 0.1em;
line-height: 1;
font-size: 1.25rem;
font-weight: 700;
}
.divider {
margin: 24px auto 18px;
width: 64px;
margin: 1.5rem auto 1.125rem;
width: 4rem;
height: 1px;
background-color: var(--vp-c-divider);
}
.quote {
margin: 0 auto;
max-width: 256px;
font-size: 14px;
max-width: 16rem;
font-size: 0.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-1);
border-radius: 16px;
padding: 3px 16px;
font-size: 14px;
border-radius: 1rem;
padding: 0.1875rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-brand-1);
transition:

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

@ -33,7 +33,7 @@ defineProps<{
transition-duration: .25s;
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.VPBackdrop {
display: none;
}

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

@ -17,22 +17,22 @@ withDefaults(defineProps<Props>(), {
<style>
.VPBadge {
display: inline-block;
margin-left: 2px;
margin-left: 0.125rem;
border: 1px solid transparent;
border-radius: 12px;
padding: 0 10px;
line-height: 22px;
font-size: 12px;
border-radius: 0.75rem;
padding: 0 0.625rem;
line-height: 1.8333333;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
transform: translateY(-2px);
transform: translateY(-0.125rem);
}
.VPBadge.small {
padding: 0 6px;
line-height: 18px;
font-size: 10px;
transform: translateY(-8px);
padding: 0 0.375rem;
line-height: 1.8;
font-size: 0.625rem;
transform: translateY(-0.5rem);
}
.VPDocFooter .VPBadge {
@ -41,12 +41,12 @@ withDefaults(defineProps<Props>(), {
.vp-doc h1 > .VPBadge,
.vp-doc h2 > .VPBadge {
margin: 0 0 0 2px;
margin: 0 0 0 0.125rem;
vertical-align: middle;
}
.vp-doc h2 > .VPBadge {
padding: 0 8px;
padding: 0 0.5rem;
}
.vp-doc h3 > .VPBadge {
@ -57,7 +57,7 @@ withDefaults(defineProps<Props>(), {
.vp-doc h5 > .VPBadge,
.vp-doc h6 > .VPBadge {
vertical-align: middle;
line-height: 18px;
line-height: 1.5;
}
.VPBadge.info {

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

@ -54,17 +54,17 @@ const component = computed(() => {
}
.VPButton.medium {
border-radius: 20px;
padding: 0 20px;
line-height: 38px;
font-size: 14px;
border-radius: 1.25rem;
padding: 0 1.25rem;
line-height: 2.7142857;
font-size: 0.875rem;
}
.VPButton.big {
border-radius: 24px;
padding: 0 24px;
line-height: 46px;
font-size: 16px;
border-radius: 1.5rem;
padding: 0 1.5rem;
line-height: 2.875;
font-size: 1rem;
}
.VPButton.brand {

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

@ -1,8 +1,8 @@
<script setup lang="ts">
import { useMediaQuery } from '@vueuse/core'
import { useRoute } from 'vitepress'
import type { DefaultTheme } from 'vitepress/theme'
import { onMounted, ref, watch } from 'vue'
import { useAside } from '../composables/aside'
const route = useRoute()
const props = defineProps<{
@ -11,7 +11,7 @@ const props = defineProps<{
const carbonOptions = props.carbonAds
const { isAsideEnabled } = useAside()
const isAsideVisible = useMediaQuery('(min-width: 80rem)')
const container = ref()
let isInitialized = false
@ -33,7 +33,7 @@ function init() {
}
watch(() => route.data.relativePath, () => {
if (isInitialized && isAsideEnabled.value) {
if (isInitialized && isAsideVisible.value) {
;(window as any)._carbonads?.refresh()
}
})
@ -45,10 +45,10 @@ if (carbonOptions) {
// if the page is loaded when aside is active, load carbon directly.
// otherwise, only load it if the page resizes to wide enough. this avoids
// loading carbon at all on mobile where it's never shown
if (isAsideEnabled.value) {
if (isAsideVisible.value) {
init()
} else {
watch(isAsideEnabled, (wide) => wide && init())
watch(isAsideVisible, (visible) => visible && init())
}
})
}
@ -63,25 +63,25 @@ if (carbonOptions) {
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
border-radius: 12px;
min-height: 256px;
padding: 1.5rem;
border-radius: 0.75rem;
min-height: 16rem;
text-align: center;
line-height: 18px;
font-size: 12px;
line-height: 1.5;
font-size: 0.75rem;
font-weight: 500;
background-color: var(--vp-carbon-ads-bg-color);
}
.VPCarbonAds :deep(img) {
margin: 0 auto;
border-radius: 6px;
border-radius: 0.375rem;
}
.VPCarbonAds :deep(.carbon-text) {
display: block;
margin: 0 auto;
padding-top: 12px;
padding-top: 0.75rem;
color: var(--vp-carbon-ads-text-color);
transition: color 0.25s;
}
@ -92,8 +92,8 @@ if (carbonOptions) {
.VPCarbonAds :deep(.carbon-poweredby) {
display: block;
padding-top: 6px;
font-size: 11px;
padding-top: 0.375rem;
font-size: 0.6875rem;
font-weight: 500;
color: var(--vp-carbon-ads-poweredby-color);
text-transform: uppercase;

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

@ -78,7 +78,7 @@ function isRegistered(component: string): boolean {
margin: 0;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPContent {
padding-top: var(--vp-nav-height);
}
@ -89,7 +89,7 @@ function isRegistered(component: string): boolean {
}
}
@media (min-width: 1440px) {
@media (min-width: 90rem) {
.VPContent.has-sidebar {
padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));

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

@ -63,33 +63,33 @@ const pageName = computed(() =>
<style scoped>
.VPDoc {
padding: 32px 24px 96px;
padding: 2rem 1.5rem 6rem;
width: 100%;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPDoc {
padding: 48px 32px 128px;
padding: 3rem 2rem 8rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPDoc {
padding: 48px 32px 0;
padding: 3rem 2rem 0;
}
.VPDoc:not(.has-sidebar) .container {
display: flex;
justify-content: center;
max-width: 992px;
max-width: 62rem;
}
.VPDoc:not(.has-sidebar) .content {
max-width: 752px;
max-width: 47rem;
}
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.VPDoc .container {
display: flex;
justify-content: center;
@ -100,13 +100,13 @@ const pageName = computed(() =>
}
}
@media (min-width: 1440px) {
@media (min-width: 90rem) {
.VPDoc:not(.has-sidebar) .content {
max-width: 784px;
max-width: 49rem;
}
.VPDoc:not(.has-sidebar) .container {
max-width: 1104px;
max-width: 69rem;
}
}
@ -120,22 +120,22 @@ const pageName = computed(() =>
display: none;
order: 2;
flex-grow: 1;
padding-left: 32px;
padding-left: 2rem;
width: 100%;
max-width: 256px;
max-width: 16rem;
}
.left-aside {
order: 1;
padding-left: unset;
padding-right: 32px;
padding-right: 2rem;
}
.aside-container {
position: fixed;
top: 0;
padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
width: 224px;
padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 3rem);
width: 14rem;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
@ -150,8 +150,8 @@ 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%);
pointer-events: none;
}
@ -159,8 +159,8 @@ const pageName = computed(() =>
.aside-content {
display: flex;
flex-direction: column;
min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
padding-bottom: 32px;
min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 3rem));
padding-bottom: 2rem;
}
.content {
@ -169,17 +169,17 @@ const pageName = computed(() =>
width: 100%;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.content {
padding: 0 32px 128px;
padding: 0 2rem 8rem;
}
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.content {
order: 1;
margin: 0;
min-width: 640px;
min-width: 40rem;
}
}
@ -188,6 +188,6 @@ const pageName = computed(() =>
}
.VPDoc.has-aside .content-container {
max-width: 688px;
max-width: 43rem;
}
</style>

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

@ -37,10 +37,10 @@ const { 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>

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

@ -51,20 +51,20 @@ useActiveAnchor(container, marker)
.content {
position: relative;
border-left: 1px solid var(--vp-c-divider);
padding-left: 16px;
font-size: 13px;
padding-left: 1rem;
font-size: 0.8125rem;
font-weight: 500;
}
.outline-marker {
position: absolute;
top: 32px;
top: 2rem;
left: -1px;
z-index: 0;
opacity: 0;
width: 2px;
border-radius: 2px;
height: 18px;
height: 1.125rem;
background-color: var(--vp-c-brand-1);
transition:
top 0.25s cubic-bezier(0, 1, 0.5, 1),
@ -73,8 +73,8 @@ useActiveAnchor(container, marker)
}
.outline-title {
line-height: 32px;
font-size: 14px;
line-height: 2.2857143;
font-size: 0.875rem;
font-weight: 600;
}
</style>

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

@ -84,19 +84,19 @@ const showFooter = computed(
<style scoped>
.VPDocFooter {
margin-top: 64px;
margin-top: 4rem;
}
.edit-info {
padding-bottom: 18px;
padding-bottom: 1.125rem;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.edit-info {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
padding-bottom: 0.875rem;
}
}
@ -104,8 +104,8 @@ const showFooter = computed(
display: flex;
align-items: center;
border: 0;
line-height: 32px;
font-size: 14px;
line-height: 2.2857143;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-brand-1);
transition: color 0.25s;
@ -116,28 +116,28 @@ const showFooter = computed(
}
.edit-link-icon {
margin-right: 8px;
margin-right: 0.5rem;
}
.prev-next {
border-top: 1px solid var(--vp-c-divider);
padding-top: 24px;
padding-top: 1.5rem;
display: grid;
grid-row-gap: 8px;
grid-row-gap: 0.5rem;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.prev-next {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 16px;
grid-column-gap: 1rem;
}
}
.pager-link {
display: block;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 11px 16px 13px;
border-radius: 0.5rem;
padding: 0.6875rem 1rem 0.8125rem;
width: 100%;
height: 100%;
transition: border-color 0.25s;
@ -154,16 +154,16 @@ const showFooter = computed(
.desc {
display: block;
line-height: 20px;
font-size: 12px;
line-height: 1.6666667;
font-size: 0.75rem;
font-weight: 500;
color: var(--vp-c-text-2);
}
.title {
display: block;
line-height: 20px;
font-size: 14px;
line-height: 1.4285714;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-brand-1);
transition: color 0.25s;

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

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

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

@ -27,14 +27,14 @@ defineProps<{
}
.nested {
padding-right: 16px;
padding-left: 16px;
padding-right: 1rem;
padding-left: 1rem;
}
.outline-link {
display: block;
line-height: 32px;
font-size: 14px;
line-height: 2.2857143;
font-size: 0.875rem;
font-weight: 400;
color: var(--vp-c-text-2);
white-space: nowrap;
@ -50,6 +50,6 @@ defineProps<{
}
.outline-link.nested {
padding-left: 13px;
padding-left: 0.8125rem;
}
</style>

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

@ -58,7 +58,7 @@ defineProps<{
.VPFeature {
display: block;
border: 1px solid var(--vp-c-bg-soft);
border-radius: 12px;
border-radius: 0.75rem;
height: 100%;
background-color: var(--vp-c-bg-soft);
transition: border-color 0.25s, background-color 0.25s;
@ -71,60 +71,60 @@ defineProps<{
.box {
display: flex;
flex-direction: column;
padding: 24px;
padding: 1.5rem;
height: 100%;
}
.box > :deep(.VPImage) {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
border-radius: 6px;
margin-bottom: 1.25rem;
border-radius: 0.375rem;
background-color: var(--vp-c-default-soft);
width: 48px;
height: 48px;
font-size: 24px;
width: 3rem;
height: 3rem;
font-size: 1.5rem;
transition: background-color 0.25s;
}
.title {
line-height: 24px;
font-size: 16px;
line-height: 1.5;
font-size: 1rem;
font-weight: 600;
}
.details {
flex-grow: 1;
padding-top: 8px;
line-height: 24px;
font-size: 14px;
padding-top: 0.5rem;
line-height: 1.7142857;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-text-2);
}
ul.details {
list-style-type: disc;
padding-left: 14px;
padding-left: 0.875rem;
}
.link-text {
padding-top: 8px;
padding-top: 0.5rem;
}
.link-text-value {
display: flex;
align-items: center;
font-size: 14px;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-brand-1);
}
.link-text-icon {
margin-left: 6px;
margin-left: 0.375rem;
}
</style>

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

@ -62,38 +62,38 @@ const grid = computed(() => {
<style scoped>
.VPFeatures {
position: relative;
padding: 0 24px;
padding: 0 1.5rem;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.VPFeatures {
padding: 0 48px;
padding: 0 3rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPFeatures {
padding: 0 64px;
padding: 0 4rem;
}
}
.container {
margin: 0 auto;
max-width: 1152px;
max-width: 72rem;
}
.items {
display: flex;
flex-wrap: wrap;
margin: -8px;
margin: -0.5rem;
}
.item {
padding: 8px;
padding: 0.5rem;
width: 100%;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.item.grid-2,
.item.grid-4,
.item.grid-6 {
@ -101,7 +101,7 @@ const grid = computed(() => {
}
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.item.grid-2,
.item.grid-4 {
width: calc(100% / 2);
@ -113,7 +113,7 @@ const grid = computed(() => {
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.item.grid-4 {
width: calc(100% / 4);
}

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

@ -95,7 +95,7 @@ function onBlur() {
.button {
display: flex;
align-items: center;
padding: 0 12px;
padding: 0 0.75rem;
height: var(--vp-nav-height);
color: var(--vp-c-text-1);
transition: color 0.5s;
@ -105,7 +105,7 @@ function onBlur() {
display: flex;
align-items: center;
line-height: var(--vp-nav-height);
font-size: 14px;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color 0.25s;
@ -113,22 +113,22 @@ function onBlur() {
.option-icon {
margin-right: 0px;
font-size: 16px;
font-size: 1rem;
}
.text-icon {
margin-left: 4px;
font-size: 14px;
margin-left: 0.25rem;
font-size: 0.875rem;
}
.icon {
font-size: 20px;
font-size: 1.25rem;
transition: fill 0.25s;
}
.menu {
position: absolute;
top: calc(var(--vp-nav-height) / 2 + 20px);
top: calc(var(--vp-nav-height) / 2 + 1.25rem);
right: 0;
opacity: 0;
visibility: hidden;

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

@ -20,7 +20,7 @@ const { hasSidebar } = useLayout()
position: relative;
z-index: var(--vp-z-index-footer);
border-top: 1px solid var(--vp-c-gutter);
padding: 32px 24px;
padding: 2rem 1.5rem;
background-color: var(--vp-c-bg);
}
@ -30,7 +30,7 @@ const { hasSidebar } = useLayout()
.VPFooter :deep(a) {
text-decoration-line: underline;
text-underline-offset: 2px;
text-underline-offset: 0.125rem;
transition: color 0.25s;
}
@ -38,9 +38,9 @@ const { hasSidebar } = useLayout()
color: var(--vp-c-text-1);
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPFooter {
padding: 32px;
padding: 2rem;
}
}
@ -52,8 +52,8 @@ const { hasSidebar } = useLayout()
.message,
.copyright {
line-height: 24px;
font-size: 14px;
line-height: 1.7142857;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-text-2);
}

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

@ -73,18 +73,18 @@ const { heroImageSlotExists } = inject(
<style scoped>
.VPHero {
margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 3rem) 1.5rem 3rem;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.VPHero {
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 5rem) 3rem 4rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPHero {
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 5rem) 4rem 4rem;
}
}
@ -92,10 +92,10 @@ const { heroImageSlotExists } = inject(
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 1152px;
max-width: 72rem;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.container {
flex-direction: row;
}
@ -113,20 +113,20 @@ const { heroImageSlotExists } = inject(
text-align: center;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPHero.has-image .container {
text-align: left;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.main {
order: 1;
width: calc((100% / 3) * 2);
}
.VPHero.has-image .main {
max-width: 592px;
max-width: 37rem;
}
}
@ -138,10 +138,10 @@ const { heroImageSlotExists } = inject(
.name,
.text {
width: fit-content;
max-width: 392px;
letter-spacing: -0.4px;
line-height: 40px;
font-size: 32px;
max-width: 24.5rem;
letter-spacing: -0.025rem;
line-height: 1.25;
font-size: 2rem;
font-weight: 700;
white-space: pre-wrap;
@ -167,20 +167,20 @@ const { heroImageSlotExists } = inject(
-webkit-text-fill-color: var(--vp-home-hero-name-color);
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.name,
.text {
max-width: 576px;
line-height: 56px;
font-size: 48px;
max-width: 36rem;
line-height: 1.1666667;
font-size: 3rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.name,
.text {
line-height: 64px;
font-size: 56px;
line-height: 1.1428571;
font-size: 3.5rem;
}
.VPHero.has-image .name,
@ -190,10 +190,10 @@ const { heroImageSlotExists } = inject(
}
.tagline {
padding-top: 8px;
max-width: 392px;
line-height: 28px;
font-size: 18px;
padding-top: 0.5rem;
max-width: 24.5rem;
line-height: 1.5555556;
font-size: 1.125rem;
font-weight: 500;
white-space: pre-wrap;
color: var(--vp-c-text-2);
@ -203,19 +203,19 @@ const { heroImageSlotExists } = inject(
margin: 0 auto;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.tagline {
padding-top: 12px;
max-width: 576px;
line-height: 32px;
font-size: 20px;
padding-top: 0.75rem;
max-width: 36rem;
line-height: 1.6;
font-size: 1.25rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.tagline {
line-height: 36px;
font-size: 24px;
line-height: 1.5;
font-size: 1.5rem;
}
.VPHero.has-image .tagline {
@ -226,21 +226,21 @@ const { heroImageSlotExists } = inject(
.actions {
display: flex;
flex-wrap: wrap;
margin: -6px;
padding-top: 24px;
margin: -0.375rem;
padding-top: 1.5rem;
}
.VPHero.has-image .actions {
justify-content: center;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.actions {
padding-top: 32px;
padding-top: 2rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPHero.has-image .actions {
justify-content: flex-start;
}
@ -248,21 +248,21 @@ const { heroImageSlotExists } = inject(
.action {
flex-shrink: 0;
padding: 6px;
padding: 0.375rem;
}
.image {
order: 1;
margin: -76px -24px -48px;
margin: -4.75rem -1.5rem -3rem;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.image {
margin: -108px -24px -48px;
margin: -6.75rem -1.5rem -3rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.image {
flex-grow: 1;
order: 2;
@ -274,18 +274,18 @@ const { heroImageSlotExists } = inject(
.image-container {
position: relative;
margin: 0 auto;
width: 320px;
height: 320px;
width: 20rem;
height: 20rem;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.image-container {
width: 392px;
height: 392px;
width: 24.5rem;
height: 24.5rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.image-container {
display: flex;
justify-content: center;
@ -293,7 +293,7 @@ const { heroImageSlotExists } = inject(
width: 100%;
height: 100%;
/*rtl:ignore*/
transform: translate(-32px, -32px);
transform: translate(-2rem, -2rem);
}
}
@ -303,25 +303,25 @@ const { heroImageSlotExists } = inject(
/*rtl:ignore*/
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);
/*rtl:ignore*/
transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.image-bg {
width: 256px;
height: 256px;
width: 16rem;
height: 16rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.image-bg {
width: 320px;
height: 320px;
width: 20rem;
height: 20rem;
}
}
@ -330,8 +330,8 @@ const { heroImageSlotExists } = inject(
top: 50%;
/*rtl:ignore*/
left: 50%;
max-width: 192px;
max-height: 192px;
max-width: 12rem;
max-height: 12rem;
width: 100%;
height: 100%;
object-fit: contain;
@ -339,17 +339,17 @@ const { heroImageSlotExists } = inject(
transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
:deep(.image-src) {
max-width: 256px;
max-height: 256px;
max-width: 16rem;
max-height: 16rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
:deep(.image-src) {
max-width: 320px;
max-height: 320px;
max-width: 20rem;
max-height: 20rem;
}
}
</style>

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

@ -37,12 +37,12 @@ const { frontmatter, theme } = useData()
<style scoped>
.VPHome {
margin-bottom: 96px;
margin-bottom: 6rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPHome {
margin-bottom: 128px;
margin-bottom: 8rem;
}
}
</style>

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

@ -21,20 +21,20 @@ const { width: vw } = useWindowSize({
.container {
margin: auto;
width: 100%;
max-width: 1280px;
padding: 0 24px;
max-width: 80rem;
padding: 0 1.5rem;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.container {
padding: 0 48px;
padding: 0 3rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.container {
width: 100%;
padding: 0 64px;
padding: 0 4rem;
}
}

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

@ -49,44 +49,44 @@ withDefaults(defineProps<Props>(), {
<style scoped>
.VPHomeSponsors {
border-top: 1px solid var(--vp-c-gutter);
padding-top: 88px !important;
padding-top: 5.5rem !important;
}
.VPHomeSponsors {
margin: 96px 0;
margin: 6rem 0;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPHomeSponsors {
margin: 128px 0;
margin: 8rem 0;
}
}
.VPHomeSponsors {
padding: 0 24px;
padding: 0 1.5rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPHomeSponsors {
padding: 0 48px;
padding: 0 3rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPHomeSponsors {
padding: 0 64px;
padding: 0 4rem;
}
}
.container {
margin: 0 auto;
max-width: 1152px;
max-width: 72rem;
}
.love {
margin: 0 auto;
width: fit-content;
font-size: 28px;
font-size: 1.75rem;
color: var(--vp-c-text-3);
}
@ -96,21 +96,21 @@ withDefaults(defineProps<Props>(), {
.message {
margin: 0 auto;
padding-top: 10px;
max-width: 320px;
padding-top: 0.625rem;
max-width: 20rem;
text-align: center;
line-height: 24px;
font-size: 16px;
line-height: 1.5;
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>

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

@ -20,11 +20,14 @@ const { y } = useWindowScroll()
const navHeight = ref(0)
onMounted(() => {
navHeight.value = parseInt(
getComputedStyle(document.documentElement).getPropertyValue(
'--vp-nav-height'
)
)
// getComputedStyle returns custom properties as their raw token ("4rem"),
// so resolve the height by measuring instead of parsing
const probe = document.createElement('div')
probe.style.cssText =
'position: absolute; visibility: hidden; height: var(--vp-nav-height)'
document.body.appendChild(probe)
navHeight.value = probe.offsetHeight
probe.remove()
})
const classes = computed(() => {
@ -78,7 +81,7 @@ const classes = computed(() => {
position: fixed;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPLocalNav {
top: var(--vp-nav-height);
}
@ -92,7 +95,7 @@ const classes = computed(() => {
}
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.VPLocalNav {
display: none;
}
@ -107,8 +110,8 @@ const classes = computed(() => {
.menu {
display: flex;
align-items: center;
line-height: 24px;
font-size: 12px;
line-height: 2;
font-size: 0.75rem;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color 0.5s;
@ -119,26 +122,26 @@ const classes = computed(() => {
transition: color 0.25s;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.menu {
display: none;
}
}
.menu-icon {
margin-right: 8px;
font-size: 14px;
margin-right: 0.5rem;
font-size: 0.875rem;
}
.menu,
:deep(.VPLocalNavOutlineDropdown > button) {
padding: 12px 24px 11px;
padding: 0.75rem 1.5rem 0.6875rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.menu,
:deep(.VPLocalNavOutlineDropdown > button) {
padding: 12px 32px 11px;
padding: 0.75rem 2rem 0.6875rem;
}
}
</style>

40
src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
Unescape View File

@ -95,9 +95,9 @@ function scrollToTop() {
<style scoped>
.VPLocalNavOutlineDropdown button {
display: block;
font-size: 12px;
font-size: 0.75rem;
font-weight: 500;
line-height: 24px;
line-height: 2;
color: var(--vp-c-text-2);
transition: color 0.5s;
position: relative;
@ -115,19 +115,19 @@ function scrollToTop() {
.icon {
display: inline-block;
vertical-align: middle;
margin-left: 2px;
font-size: 14px;
margin-left: 0.125rem;
font-size: 0.875rem;
transform: rotate(0) /*rtl:rotate(180deg)*/;
transition: transform 0.25s;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPLocalNavOutlineDropdown button {
font-size: 14px;
font-size: 0.875rem;
}
.icon {
font-size: 16px;
font-size: 1rem;
}
}
@ -138,24 +138,24 @@ function scrollToTop() {
.items {
position: absolute;
top: 40px;
right: 16px;
left: 16px;
top: 2.5rem;
right: 1rem;
left: 1rem;
display: grid;
gap: 1px;
border: 1px solid var(--vp-c-border);
border-radius: 8px;
border-radius: 0.5rem;
background-color: var(--vp-c-gutter);
max-height: calc(var(--vp-vh, 100vh) - 86px);
max-height: calc(var(--vp-vh, 100vh) - 5.375rem);
overflow: hidden auto;
box-shadow: var(--vp-shadow-3);
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.items {
right: auto;
left: calc(var(--vp-sidebar-width) + 32px);
width: 320px;
left: calc(var(--vp-sidebar-width) + 2rem);
width: 20rem;
}
}
@ -165,15 +165,15 @@ function scrollToTop() {
.top-link {
display: block;
padding: 0 16px;
line-height: 48px;
font-size: 14px;
padding: 0 1rem;
line-height: 3.4285714;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-brand-1);
}
.outline {
padding: 8px 0;
padding: 0.5rem 0;
background-color: var(--vp-c-bg-soft);
}
@ -188,6 +188,6 @@ function scrollToTop() {
.flyout-enter-from,
.flyout-leave-to {
opacity: 0;
transform: translateY(-16px);
transform: translateY(-1rem);
}
</style>

102
src/client/theme-default/components/VPLocalSearchBox.vue
Unescape View File

@ -641,19 +641,19 @@ function onMouseMove(e: MouseEvent) {
.shell {
position: relative;
padding: 12px;
margin: 64px auto;
padding: 0.75rem;
margin: 4rem auto;
display: flex;
flex-direction: column;
gap: 16px;
gap: 1rem;
background: var(--vp-local-search-bg);
width: min(100vw - 60px, 900px);
width: min(100vw - 3.75rem, 56.25rem);
height: min-content;
max-height: min(100vh - 128px, 900px);
border-radius: 6px;
max-height: min(100vh - 8rem, 56.25rem);
border-radius: 0.375rem;
}
@media (max-width: 767px) {
@media not all and (min-width: 48rem) {
.shell {
margin: 0;
width: 100vw;
@ -665,16 +665,16 @@ function onMouseMove(e: MouseEvent) {
.search-bar {
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
border-radius: 0.25rem;
display: flex;
align-items: center;
padding: 0 12px;
padding: 0 0.75rem;
cursor: text;
}
@media (max-width: 767px) {
@media not all and (min-width: 48rem) {
.search-bar {
padding: 0 8px;
padding: 0 0.5rem;
}
}
@ -684,26 +684,26 @@ function onMouseMove(e: MouseEvent) {
.local-search-icon {
display: block;
font-size: 18px;
font-size: 1.125rem;
}
.navigate-icon {
display: block;
font-size: 14px;
font-size: 0.875rem;
}
.search-icon {
margin: 8px;
margin: 0.5rem;
}
@media (max-width: 767px) {
@media not all and (min-width: 48rem) {
.search-icon {
display: none;
}
}
.search-input {
padding: 6px 12px;
padding: 0.375rem 0.75rem;
font-size: inherit;
width: 100%;
}
@ -712,31 +712,31 @@ function onMouseMove(e: MouseEvent) {
display: none;
}
@media (max-width: 767px) {
@media not all and (min-width: 48rem) {
.search-input {
padding: 6px 4px;
padding: 0.375rem 0.25rem;
}
}
.search-actions {
display: flex;
gap: 4px;
gap: 0.25rem;
}
@media (any-pointer: coarse) {
.search-actions {
gap: 8px;
gap: 0.5rem;
}
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.search-actions.before {
display: none;
}
}
.search-actions button {
padding: 8px;
padding: 0.5rem;
}
.search-actions button:not([disabled]):hover,
@ -750,9 +750,9 @@ function onMouseMove(e: MouseEvent) {
.search-loading {
visibility: hidden;
margin: 8px;
width: 18px;
height: 18px;
margin: 0.5rem;
width: 1.125rem;
height: 1.125rem;
flex: none;
border: 2px solid var(--vp-c-divider);
border-top-color: var(--vp-c-brand-1);
@ -781,17 +781,17 @@ function onMouseMove(e: MouseEvent) {
opacity: 75%;
display: flex;
flex-wrap: wrap;
gap: 16px;
line-height: 14px;
gap: 1rem;
line-height: 1.09375;
}
.search-keyboard-shortcuts span {
display: flex;
align-items: center;
gap: 4px;
gap: 0.25rem;
}
@media (max-width: 767px) {
@media not all and (min-width: 48rem) {
.search-keyboard-shortcuts {
display: none;
}
@ -799,9 +799,9 @@ function onMouseMove(e: MouseEvent) {
.search-keyboard-shortcuts kbd {
background: rgba(128, 128, 128, 0.1);
border-radius: 4px;
padding: 3px 6px;
min-width: 24px;
border-radius: 0.25rem;
padding: 0.1875rem 0.375rem;
min-width: 1.5rem;
display: inline-block;
text-align: center;
vertical-align: middle;
@ -812,7 +812,7 @@ function onMouseMove(e: MouseEvent) {
.results {
display: flex;
flex-direction: column;
gap: 6px;
gap: 0.375rem;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
@ -821,39 +821,39 @@ function onMouseMove(e: MouseEvent) {
.result {
display: flex;
align-items: center;
gap: 8px;
border-radius: 4px;
gap: 0.5rem;
border-radius: 0.25rem;
transition: none;
line-height: 1rem;
line-height: 1;
border: solid 2px var(--vp-local-search-result-border);
outline: none;
}
.result > div {
margin: 12px;
margin: 0.75rem;
width: 100%;
overflow: hidden;
}
@media (max-width: 767px) {
@media not all and (min-width: 48rem) {
.result > div {
margin: 8px;
margin: 0.5rem;
}
}
.titles {
display: flex;
flex-wrap: wrap;
gap: 4px;
gap: 0.25rem;
position: relative;
z-index: 1001;
padding: 2px 0;
padding: 0.125rem 0;
}
.title {
display: flex;
align-items: center;
gap: 4px;
gap: 0.25rem;
}
.title.main {
@ -882,10 +882,10 @@ function onMouseMove(e: MouseEvent) {
.excerpt {
opacity: 50%;
pointer-events: none;
max-height: 140px;
max-height: 8.75rem;
overflow: hidden;
position: relative;
margin-top: 4px;
margin-top: 0.25rem;
}
.result.selected .excerpt {
@ -894,15 +894,15 @@ function onMouseMove(e: MouseEvent) {
.excerpt :deep(*) {
font-size: 0.8rem !important;
line-height: 130% !important;
line-height: 1.3 !important;
}
.titles :deep(mark),
.excerpt :deep(mark) {
background-color: var(--vp-local-search-highlight-bg);
color: var(--vp-local-search-highlight-text);
border-radius: 2px;
padding: 0 2px;
border-radius: 0.125rem;
padding: 0 0.125rem;
}
.excerpt :deep(.vp-code-group) .tabs {
@ -910,7 +910,7 @@ function onMouseMove(e: MouseEvent) {
}
.excerpt :deep(.vp-code-group) div[class*='language-'] {
border-radius: 8px !important;
border-radius: 0.5rem !important;
}
.excerpt-gradient-bottom {
@ -918,7 +918,7 @@ function onMouseMove(e: MouseEvent) {
bottom: -1px;
left: 0;
width: 100%;
height: 8px;
height: 0.5rem;
background: linear-gradient(transparent, var(--vp-local-search-result-bg));
z-index: 1000;
}
@ -928,7 +928,7 @@ function onMouseMove(e: MouseEvent) {
top: -1px;
left: 0;
width: 100%;
height: 8px;
height: 0.5rem;
background: linear-gradient(var(--vp-local-search-result-bg), transparent);
z-index: 1000;
}
@ -941,7 +941,7 @@ function onMouseMove(e: MouseEvent) {
.no-results {
font-size: 0.9rem;
text-align: center;
padding: 12px;
padding: 0.75rem;
}
svg {

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

@ -28,9 +28,9 @@ defineProps<{
<style scoped>
.VPMenu {
border-radius: 12px;
padding: 12px;
min-width: 128px;
border-radius: 0.75rem;
padding: 0.75rem;
min-width: 8rem;
border: 1px solid var(--vp-c-divider);
background-color: var(--vp-c-bg-elv);
box-shadow: var(--vp-shadow-3);
@ -40,13 +40,13 @@ defineProps<{
}
.VPMenu :deep(.group) {
margin: 0 -12px;
padding: 0 12px 12px;
margin: 0 -0.75rem;
padding: 0 0.75rem 0.75rem;
}
.VPMenu :deep(.group + .group) {
border-top: 1px solid var(--vp-c-divider);
padding: 11px 12px 12px;
padding: 0.6875rem 0.75rem 0.75rem;
}
.VPMenu :deep(.group:last-child) {
@ -55,24 +55,24 @@ defineProps<{
.VPMenu :deep(.group + .item) {
border-top: 1px solid var(--vp-c-divider);
padding: 11px 16px 0;
padding: 0.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: 2.3333333;
font-size: 0.75rem;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color 0.5s;
}
.VPMenu :deep(.action) {
padding-left: 24px;
padding-left: 1.5rem;
}
</style>

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

@ -20,9 +20,9 @@ defineProps<{
<style scoped>
.VPMenuGroup {
margin: 12px -12px 0;
margin: 0.75rem -0.75rem 0;
border-top: 1px solid var(--vp-c-divider);
padding: 12px 12px 0;
padding: 0.75rem 0.75rem 0;
}
.VPMenuGroup:first-child {
@ -32,14 +32,14 @@ defineProps<{
}
.VPMenuGroup + .VPMenuGroup {
margin-top: 12px;
margin-top: 0.75rem;
border-top: 1px solid var(--vp-c-divider);
}
.title {
padding: 0 12px;
line-height: 32px;
font-size: 14px;
padding: 0 0.75rem;
line-height: 2.2857143;
font-size: 0.875rem;
font-weight: 600;
color: var(--vp-c-text-2);
white-space: nowrap;

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

@ -47,17 +47,17 @@ defineOptions({ inheritAttrs: false })
<style scoped>
.VPMenuGroup + .VPMenuLink {
margin: 12px -12px 0;
margin: 0.75rem -0.75rem 0;
border-top: 1px solid var(--vp-c-divider);
padding: 12px 12px 0;
padding: 0.75rem 0.75rem 0;
}
.link {
display: block;
border-radius: 6px;
padding: 0 12px;
line-height: 32px;
font-size: 14px;
border-radius: 0.375rem;
padding: 0 0.75rem;
line-height: 2.2857143;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-text-1);
text-align: left;

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

@ -49,7 +49,7 @@ watchEffect(() => {
transition: background-color 0.5s;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNav {
position: fixed;
}

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

@ -86,7 +86,7 @@ const { isHome, hasSidebar } = useLayout()
background-color: var(--vp-nav-bg-color);
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBar:not(.home) {
background-color: transparent;
}
@ -97,16 +97,16 @@ const { isHome, hasSidebar } = useLayout()
}
.wrapper {
padding: 0 8px 0 24px;
padding: 0 0.5rem 0 1.5rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.wrapper {
padding: 0 32px;
padding: 0 2rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBar.has-sidebar .wrapper {
padding: 0;
}
@ -116,7 +116,7 @@ const { isHome, hasSidebar } = useLayout()
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);
height: var(--vp-nav-height);
pointer-events: none;
}
@ -130,7 +130,7 @@ const { isHome, hasSidebar } = useLayout()
pointer-events: auto;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBar.has-sidebar .container {
max-width: 100%;
}
@ -142,23 +142,23 @@ const { isHome, hasSidebar } = useLayout()
transition: background-color 0.5s;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBar.has-sidebar .title {
position: absolute;
top: 0;
left: 0;
z-index: 2;
padding: 0 32px;
padding: 0 2rem;
width: var(--vp-sidebar-width);
height: var(--vp-nav-height);
background-color: transparent;
}
}
@media (min-width: 1440px) {
@media (min-width: 90rem) {
.VPNavBar.has-sidebar .title {
padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
padding-left: max(2rem, calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2));
width: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2 + var(--vp-sidebar-width) - 2rem);
}
}
@ -166,19 +166,19 @@ const { isHome, hasSidebar } = useLayout()
flex-grow: 1;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBar.has-sidebar .content {
position: relative;
z-index: 1;
padding-left: var(--vp-sidebar-width);
padding-right: 32px;
padding-right: 2rem;
}
}
@media (min-width: 1440px) {
@media (min-width: 90rem) {
.VPNavBar.has-sidebar .content {
padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 2rem);
}
}
@ -190,7 +190,7 @@ const { isHome, hasSidebar } = useLayout()
transition: background-color 0.5s;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBar:not(.home.top) .content-body {
position: relative;
background-color: var(--vp-nav-bg-color);
@ -211,25 +211,25 @@ const { isHome, hasSidebar } = useLayout()
.menu + .social-links::before,
.translations + .appearance::before,
.appearance + .social-links::before {
margin-right: 8px;
margin-left: 8px;
margin-right: 0.5rem;
margin-left: 0.5rem;
width: 1px;
height: 24px;
height: 1.5rem;
background-color: var(--vp-c-divider);
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;
}
.divider {
@ -237,13 +237,13 @@ const { isHome, hasSidebar } = useLayout()
height: 1px;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBar.has-sidebar .divider {
padding-left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
@media (min-width: 90rem) {
.VPNavBar.has-sidebar .divider {
padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
@ -259,7 +259,7 @@ const { isHome, hasSidebar } = useLayout()
background-color: var(--vp-c-gutter);
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBar:not(.home.top) .divider-line {
background-color: var(--vp-c-gutter);
}

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

@ -23,7 +23,7 @@ const { site } = useData()
display: none;
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.VPNavBarAppearance {
display: flex;
align-items: center;

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

@ -9,18 +9,18 @@
display: flex;
align-items: center;
height: var(--vp-nav-height);
padding: 8px 14px;
font-size: 20px;
padding: 0.5rem 0.875rem;
font-size: 1.25rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPNavBarAskAiButton {
height: auto;
padding: 11.5px;
padding: 0.71875rem;
transition: color 0.3s ease;
background-color: var(--vp-c-bg-alt);
border-radius: 8px;
font-size: 15px;
border-radius: 0.5rem;
font-size: 0.9375rem;
color: var(--vp-c-text-2);
}

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

@ -74,25 +74,25 @@ const hasExtraContent = computed(
<style scoped>
.VPNavBarExtra {
display: none;
margin-right: -12px;
margin-right: -0.75rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPNavBarExtra {
display: block;
}
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.VPNavBarExtra {
display: none;
}
}
.trans-title {
padding: 0 24px 0 12px;
line-height: 32px;
font-size: 14px;
padding: 0 1.5rem 0 0.75rem;
line-height: 2.2857143;
font-size: 0.875rem;
font-weight: 700;
color: var(--vp-c-text-1);
}
@ -101,18 +101,18 @@ const hasExtraContent = computed(
.item.social-links {
display: flex;
align-items: center;
padding: 0 12px;
padding: 0 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>

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

@ -31,11 +31,11 @@ defineEmits<{
display: flex;
justify-content: center;
align-items: center;
width: 48px;
width: 3rem;
height: var(--vp-nav-height);
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPNavBarHamburger {
display: none;
}
@ -43,18 +43,18 @@ defineEmits<{
.container {
position: relative;
width: 16px;
height: 14px;
width: 1rem;
height: 0.875rem;
overflow: hidden;
}
.VPNavBarHamburger:hover .top { top: 0; left: 0; transform: translateX(4px); }
.VPNavBarHamburger:hover .middle { top: 6px; left: 0; transform: translateX(0); }
.VPNavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
.VPNavBarHamburger:hover .top { top: 0; left: 0; transform: translateX(0.25rem); }
.VPNavBarHamburger:hover .middle { top: 0.375rem; left: 0; transform: translateX(0); }
.VPNavBarHamburger:hover .bottom { top: 0.75rem; left: 0; transform: translateX(0.5rem); }
.VPNavBarHamburger.active .top { top: 6px; transform: translateX(0) rotate(225deg); }
.VPNavBarHamburger.active .middle { top: 6px; transform: translateX(16px); }
.VPNavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
.VPNavBarHamburger.active .top { top: 0.375rem; transform: translateX(0) rotate(225deg); }
.VPNavBarHamburger.active .middle { top: 0.375rem; transform: translateX(1rem); }
.VPNavBarHamburger.active .bottom { top: 0.375rem; transform: translateX(0) rotate(135deg); }
.VPNavBarHamburger.active:hover .top,
.VPNavBarHamburger.active:hover .middle,
@ -67,13 +67,13 @@ defineEmits<{
.middle,
.bottom {
position: absolute;
width: 16px;
height: 2px;
width: 1rem;
height: 0.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: 0.375rem; left: 0; transform: translateX(0.5rem); }
.bottom { top: 0.75rem; left: 0; transform: translateX(0.25rem); }
</style>

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

@ -38,7 +38,7 @@ const { theme } = useData()
display: flex;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPNavBarMenu {
display: block;
}

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

@ -44,9 +44,9 @@ const isActiveLink = computed(() => {
.VPNavBarMenuLink {
display: flex;
align-items: center;
padding: 0 12px;
padding: 0 0.75rem;
line-height: var(--vp-nav-height);
font-size: 14px;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color 0.25s;

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

@ -200,17 +200,17 @@ function isEditingContent(event: KeyboardEvent): boolean {
align-items: center;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPNavBarSearch {
gap: 8px;
gap: 0.5rem;
flex-grow: 1;
padding-left: 24px;
padding-left: 1.5rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPNavBarSearch {
padding-left: 32px;
padding-left: 2rem;
}
}
</style>

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

@ -20,10 +20,10 @@ defineProps<{
.VPNavBarSearchButton {
display: flex;
align-items: center;
gap: 8px;
gap: 0.5rem;
height: var(--vp-nav-height);
padding: 8px 14px;
font-size: 20px;
padding: 0.5rem 0.875rem;
font-size: 1.25rem;
}
.text,
@ -38,30 +38,30 @@ kbd {
font-weight: 500;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPNavBarSearchButton {
height: auto;
padding: 8px 12px;
padding: 0.5rem 0.75rem;
background-color: var(--vp-c-bg-alt);
border-radius: 8px;
font-size: 14px;
border-radius: 0.5rem;
font-size: 0.875rem;
line-height: 1;
color: var(--vp-c-text-2);
}
.text {
display: inline;
font-size: 13px;
font-size: 0.8125rem;
}
.keys {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 6px;
gap: 0.25rem;
padding: 0.25rem 0.375rem;
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
font-size: 12px;
border-radius: 0.25rem;
font-size: 0.75rem;
}
}
</style>

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

@ -18,7 +18,7 @@ const { theme } = useData()
display: none;
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.VPNavBarSocialLinks {
display: flex;
align-items: center;

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

@ -53,13 +53,13 @@ const target = computed(() =>
border-bottom: 1px solid transparent;
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;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.title {
flex-shrink: 0;
}
@ -70,7 +70,7 @@ const target = computed(() =>
}
:deep(.logo) {
margin-right: 8px;
margin-right: 0.5rem;
height: var(--vp-nav-logo-height);
}
</style>

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

@ -40,7 +40,7 @@ const { localeLinks, currentLang } = useLangs({
display: none;
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.VPNavBarTranslations {
display: flex;
align-items: center;
@ -48,9 +48,9 @@ const { localeLinks, currentLang } = useLangs({
}
.title {
padding: 0 24px 0 12px;
line-height: 32px;
font-size: 14px;
padding: 0 1.5rem 0 0.75rem;
line-height: 2.2857143;
font-size: 0.875rem;
font-weight: 700;
color: var(--vp-c-text-1);
}

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

@ -41,7 +41,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
bottom: 0;
/*rtl:ignore*/
left: 0;
padding: 0 32px;
padding: 0 2rem;
width: 100%;
background-color: var(--vp-nav-screen-bg-color);
overflow-y: auto;
@ -66,10 +66,10 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
.VPNavScreen.fade-enter-from .container,
.VPNavScreen.fade-leave-to .container {
transform: translateY(-8px);
transform: translateY(-0.5rem);
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPNavScreen {
display: none;
}
@ -77,21 +77,21 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
.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>

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

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

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

@ -52,7 +52,7 @@ function toggle() {
<style scoped>
.VPNavScreenMenuGroup {
border-bottom: 1px solid var(--vp-c-divider);
height: 48px;
height: 3rem;
overflow: hidden;
transition: border-color 0.5s;
}
@ -66,12 +66,12 @@ function toggle() {
}
.VPNavScreenMenuGroup.open {
padding-bottom: 10px;
padding-bottom: 0.625rem;
height: auto;
}
.VPNavScreenMenuGroup.open .button {
padding-bottom: 6px;
padding-bottom: 0.375rem;
color: var(--vp-c-brand-1);
}
@ -84,10 +84,10 @@ function toggle() {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 4px 11px 0;
padding: 0.75rem 0.25rem 0.6875rem 0;
width: 100%;
line-height: 24px;
font-size: 14px;
line-height: 1.7142857;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color 0.25s;
@ -107,6 +107,6 @@ function toggle() {
.group + .group,
.group + .item {
padding-top: 4px;
padding-top: 0.25rem;
}
</style>

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

@ -46,9 +46,9 @@ const { closeScreen } = inject(navInjectionKey)!
<style scoped>
.VPNavScreenMenuGroupLink {
display: block;
margin-left: 12px;
line-height: 32px;
font-size: 14px;
margin-left: 0.75rem;
line-height: 2.2857143;
font-size: 0.875rem;
font-weight: 400;
color: var(--vp-c-text-1);
transition: color 0.25s;

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

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

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

@ -47,9 +47,9 @@ const { closeScreen } = inject(navInjectionKey)!
.VPNavScreenMenuLink {
display: block;
border-bottom: 1px solid var(--vp-c-divider);
padding: 12px 0 11px;
line-height: 24px;
font-size: 14px;
padding: 0.75rem 0 0.6875rem;
line-height: 1.7142857;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-text-1);
transition:

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

@ -46,7 +46,7 @@ function toggle() {
<style scoped>
.VPNavScreenTranslations {
height: 24px;
height: 1.5rem;
overflow: hidden;
}
@ -57,30 +57,30 @@ function toggle() {
.title {
display: flex;
align-items: center;
font-size: 14px;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-text-1);
}
.icon {
font-size: 16px;
font-size: 1rem;
}
.icon.lang {
margin-right: 8px;
margin-right: 0.5rem;
}
.icon.chevron {
margin-left: 4px;
margin-left: 0.25rem;
}
.list {
padding: 4px 0 0 24px;
padding: 0.25rem 0 0 1.5rem;
}
.link {
line-height: 32px;
font-size: 13px;
line-height: 2.4615385;
font-size: 0.8125rem;
color: var(--vp-c-text-1);
}
</style>

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

@ -71,9 +71,9 @@ watch(
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-sidebar-bg-color);
opacity: 0;
box-shadow: var(--vp-c-shadow-3);
@ -96,7 +96,7 @@ watch(
box-shadow: var(--vp-shadow-1);
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPSidebar {
padding-top: var(--vp-nav-height);
width: var(--vp-sidebar-width);
@ -109,22 +109,22 @@ watch(
}
}
@media (min-width: 1440px) {
@media (min-width: 90rem) {
.VPSidebar {
padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
padding-left: max(2rem, calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2));
width: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2 + var(--vp-sidebar-width) - 2rem);
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.curtain {
position: sticky;
top: calc(var(--vp-nav-height) * -1);
left: 0;
z-index: 1;
margin-top: calc(var(--vp-nav-height) * -1);
margin-right: -32px;
margin-left: -32px;
margin-right: -2rem;
margin-left: -2rem;
height: var(--vp-nav-height);
background-color: var(--vp-sidebar-bg-color);
}

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

@ -44,13 +44,13 @@ onBeforeUnmount(() => {
.group + .group {
border-top: 1px solid var(--vp-c-divider);
padding-top: 10px;
padding-top: 0.625rem;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.group {
padding-top: 10px;
width: calc(var(--vp-sidebar-width) - 64px);
padding-top: 0.625rem;
width: calc(var(--vp-sidebar-width) - 4rem);
}
}
</style>

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

@ -109,11 +109,11 @@ function onCaretClick() {
<style scoped>
.VPSidebarItem.level-0 {
padding-bottom: 24px;
padding-bottom: 1.5rem;
}
.VPSidebarItem.collapsed.level-0 {
padding-bottom: 10px;
padding-bottom: 0.625rem;
}
.item {
@ -128,9 +128,9 @@ function onCaretClick() {
.indicator {
position: absolute;
top: 6px;
bottom: 6px;
left: -17px;
top: 0.375rem;
bottom: 0.375rem;
left: calc(-1rem - 1px);
width: 2px;
border-radius: 2px;
transition: background-color 0.25s;
@ -151,9 +151,9 @@ function onCaretClick() {
.text {
flex-grow: 1;
padding: 4px 0;
line-height: 24px;
font-size: 14px;
padding: 0.25rem 0;
line-height: 1.7142857;
font-size: 0.875rem;
transition: color 0.25s;
}
@ -208,9 +208,9 @@ function onCaretClick() {
display: flex;
justify-content: center;
align-items: center;
margin-right: -7px;
width: 32px;
height: 32px;
margin-right: -0.4375rem;
width: 2rem;
height: 2rem;
color: var(--vp-c-text-3);
cursor: pointer;
transition: color 0.25s;
@ -226,7 +226,7 @@ function onCaretClick() {
}
.caret-icon {
font-size: 18px;
font-size: 1.125rem;
/*rtl:ignore*/
transform: rotate(90deg);
transition: transform 0.25s;
@ -242,7 +242,7 @@ function onCaretClick() {
.VPSidebarItem.level-4 .items,
.VPSidebarItem.level-5 .items {
border-left: 1px solid var(--vp-c-divider);
padding-left: 16px;
padding-left: 1rem;
}
.VPSidebarItem.collapsed .items {

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

@ -20,12 +20,12 @@ watch(() => route.path, () => backToTop.value.focus())
<style scoped>
.VPSkipLink {
position: fixed;
top: 8px;
left: 8px;
padding: 8px 16px;
top: 0.5rem;
left: 0.5rem;
padding: 0.5rem 1rem;
z-index: 999;
border-radius: 8px;
font-size: 12px;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: bold;
text-decoration: none;
color: var(--vp-c-brand-1);
@ -40,10 +40,10 @@ watch(() => route.path, () => backToTop.value.focus())
clip-path: none;
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
.VPSkipLink {
top: 14px;
left: 16px;
top: 0.875rem;
left: 1rem;
}
}
</style>

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

@ -57,8 +57,8 @@ if (import.meta.env.SSR) {
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 0.5s;
}
@ -70,8 +70,8 @@ if (import.meta.env.SSR) {
.VPSocialLink > :deep(svg),
.VPSocialLink > :deep([class^="vpi-social-"]) {
width: 20px;
height: 20px;
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
}
</style>

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

@ -11,10 +11,10 @@
<style scoped>
.VPSwitch {
position: relative;
border-radius: 11px;
border-radius: 0.6875rem;
display: block;
width: 40px;
height: 22px;
width: 2.5rem;
height: 1.375rem;
flex-shrink: 0;
border: 1px solid var(--vp-input-border-color);
background-color: var(--vp-input-switch-bg-color);
@ -30,8 +30,8 @@
top: 1px;
/*rtl:ignore*/
left: 1px;
width: 18px;
height: 18px;
width: 1.125rem;
height: 1.125rem;
border-radius: 50%;
background-color: var(--vp-c-neutral-inverse);
box-shadow: var(--vp-shadow-1);
@ -41,18 +41,18 @@
.icon {
position: relative;
display: block;
width: 18px;
height: 18px;
width: 1.125rem;
height: 1.125rem;
border-radius: 50%;
overflow: hidden;
}
.icon :deep([class^='vpi-']) {
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
top: 0.1875rem;
left: 0.1875rem;
width: 0.75rem;
height: 0.75rem;
color: var(--vp-c-text-2);
}

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

@ -49,6 +49,6 @@ watchPostEffect(() => {
.dark .VPSwitchAppearance :deep(.check) {
/*rtl:ignore*/
transform: translateX(18px);
transform: translateX(1.125rem);
}
</style>

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

@ -27,41 +27,41 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
<style scoped>
.VPTeamMembers.small .container {
grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.VPTeamMembers.small.count-1 .container {
max-width: 276px;
max-width: 17.25rem;
}
.VPTeamMembers.small.count-2 .container {
max-width: calc(276px * 2 + 24px);
max-width: calc(17.25rem * 2 + 1.5rem);
}
.VPTeamMembers.small.count-3 .container {
max-width: calc(276px * 3 + 24px * 2);
max-width: calc(17.25rem * 3 + 1.5rem * 2);
}
.VPTeamMembers.medium .container {
grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
@media (min-width: 375px) {
@media (min-width: 23.4375rem) {
.VPTeamMembers.medium .container {
grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
}
.VPTeamMembers.medium.count-1 .container {
max-width: 368px;
max-width: 23rem;
}
.VPTeamMembers.medium.count-2 .container {
max-width: calc(368px * 2 + 24px);
max-width: calc(23rem * 2 + 1.5rem);
}
.container {
display: grid;
gap: 24px;
gap: 1.5rem;
margin: 0 auto;
max-width: 1152px;
max-width: 72rem;
}
/* Reset styles from vp-doc if used in markdown */

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

@ -56,82 +56,82 @@ withDefaults(defineProps<Props>(), {
.VPTeamMembersItem {
display: flex;
flex-direction: column;
gap: 2px;
border-radius: 12px;
gap: 0.125rem;
border-radius: 0.75rem;
width: 100%;
height: 100%;
overflow: hidden;
}
.VPTeamMembersItem.small .profile {
padding: 32px;
padding: 2rem;
}
.VPTeamMembersItem.small .data {
padding-top: 20px;
padding-top: 1.25rem;
}
.VPTeamMembersItem.small .avatar {
width: 64px;
height: 64px;
width: 4rem;
height: 4rem;
}
.VPTeamMembersItem.small .name {
line-height: 24px;
font-size: 16px;
line-height: 1.5;
font-size: 1rem;
}
.VPTeamMembersItem.small .affiliation {
padding-top: 4px;
line-height: 20px;
font-size: 14px;
padding-top: 0.25rem;
line-height: 1.4285714;
font-size: 0.875rem;
}
.VPTeamMembersItem.small .desc {
padding-top: 12px;
line-height: 20px;
font-size: 14px;
padding-top: 0.75rem;
line-height: 1.4285714;
font-size: 0.875rem;
}
.VPTeamMembersItem.small .links {
margin: 0 -16px -20px;
padding: 10px 0 0;
margin: 0 -1rem -1.25rem;
padding: 0.625rem 0 0;
}
.VPTeamMembersItem.medium .profile {
padding: 48px 32px;
padding: 3rem 2rem;
}
.VPTeamMembersItem.medium .data {
padding-top: 24px;
padding-top: 1.5rem;
text-align: center;
}
.VPTeamMembersItem.medium .avatar {
width: 96px;
height: 96px;
width: 6rem;
height: 6rem;
}
.VPTeamMembersItem.medium .name {
letter-spacing: 0.15px;
line-height: 28px;
font-size: 20px;
letter-spacing: 0.0075em;
line-height: 1.4;
font-size: 1.25rem;
}
.VPTeamMembersItem.medium .affiliation {
padding-top: 4px;
font-size: 16px;
padding-top: 0.25rem;
font-size: 1rem;
}
.VPTeamMembersItem.medium .desc {
padding-top: 16px;
max-width: 288px;
font-size: 16px;
padding-top: 1rem;
max-width: 18rem;
font-size: 1rem;
}
.VPTeamMembersItem.medium .links {
margin: 0 -16px -12px;
padding: 16px 12px 0;
margin: 0 -1rem -0.75rem;
padding: 1rem 0.75rem 0;
}
.profile {
@ -193,7 +193,7 @@ withDefaults(defineProps<Props>(), {
.links {
display: flex;
justify-content: center;
height: 56px;
height: 3.5rem;
}
.sp-link {
@ -201,8 +201,8 @@ withDefaults(defineProps<Props>(), {
justify-content: center;
align-items: center;
text-align: center;
padding: 16px;
font-size: 14px;
padding: 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-c-sponsor);
background-color: var(--vp-c-bg-soft);
@ -217,7 +217,7 @@ withDefaults(defineProps<Props>(), {
}
.sp-icon {
margin-right: 8px;
font-size: 16px;
margin-right: 0.5rem;
font-size: 1rem;
}
</style>

28
src/client/theme-default/components/VPTeamPage.vue
Unescape View File

@ -6,53 +6,53 @@
<style scoped>
.VPTeamPage {
margin: 96px 0;
margin: 6rem 0;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPTeamPage {
margin: 128px 0;
margin: 8rem 0;
}
}
.VPHome :slotted(.VPTeamPageTitle) {
border-top: 1px solid var(--vp-c-gutter);
padding-top: 88px !important;
padding-top: 5.5rem !important;
}
:slotted(.VPTeamPageSection + .VPTeamPageSection),
:slotted(.VPTeamMembers + .VPTeamPageSection) {
margin-top: 64px;
margin-top: 4rem;
}
:slotted(.VPTeamMembers + .VPTeamMembers) {
margin-top: 24px;
margin-top: 1.5rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
:slotted(.VPTeamPageTitle + .VPTeamPageSection) {
margin-top: 16px;
margin-top: 1rem;
}
:slotted(.VPTeamPageSection + .VPTeamPageSection),
:slotted(.VPTeamMembers + .VPTeamPageSection) {
margin-top: 96px;
margin-top: 6rem;
}
}
:slotted(.VPTeamMembers) {
padding: 0 24px;
padding: 0 1.5rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
:slotted(.VPTeamMembers) {
padding: 0 48px;
padding: 0 3rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
:slotted(.VPTeamMembers) {
padding: 0 64px;
padding: 0 4rem;
}
}
</style>

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

@ -17,32 +17,32 @@
<style scoped>
.VPTeamPageSection {
padding: 0 32px;
padding: 0 2rem;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPTeamPageSection {
padding: 0 48px;
padding: 0 3rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPTeamPageSection {
padding: 0 64px;
padding: 0 4rem;
}
}
.title {
position: relative;
margin: 0 auto;
max-width: 1152px;
max-width: 72rem;
text-align: center;
color: var(--vp-c-text-2);
}
.title-line {
position: absolute;
top: 16px;
top: 1rem;
left: 0;
width: 100%;
height: 1px;
@ -52,26 +52,26 @@
.title-text {
position: relative;
display: inline-block;
padding: 0 24px;
padding: 0 1.5rem;
letter-spacing: 0;
line-height: 32px;
font-size: 20px;
line-height: 1.6;
font-size: 1.25rem;
font-weight: 500;
background-color: var(--vp-c-bg);
}
.lead {
margin: 0 auto;
max-width: 480px;
padding-top: 12px;
max-width: 30rem;
padding-top: 0.75rem;
text-align: center;
line-height: 24px;
font-size: 16px;
line-height: 1.5;
font-size: 1rem;
font-weight: 500;
color: var(--vp-c-text-2);
}
.members {
padding-top: 40px;
padding-top: 2.5rem;
}
</style>

40
src/client/theme-default/components/VPTeamPageTitle.vue
Unescape View File

@ -11,53 +11,53 @@
<style scoped>
.VPTeamPageTitle {
padding: 48px 32px;
padding: 3rem 2rem;
text-align: center;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.VPTeamPageTitle {
padding: 64px 48px 48px;
padding: 4rem 3rem 3rem;
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
.VPTeamPageTitle {
padding: 80px 64px 48px;
padding: 5rem 4rem 3rem;
}
}
.title {
letter-spacing: 0;
line-height: 44px;
font-size: 36px;
line-height: 1.2222222;
font-size: 2.25rem;
font-weight: 500;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.title {
letter-spacing: -0.5px;
line-height: 56px;
font-size: 48px;
letter-spacing: -0.0104167em;
line-height: 1.1666667;
font-size: 3rem;
}
}
.lead {
margin: 0 auto;
max-width: 512px;
padding-top: 12px;
line-height: 24px;
font-size: 16px;
max-width: 32rem;
padding-top: 0.75rem;
line-height: 1.5;
font-size: 1rem;
font-weight: 500;
color: var(--vp-c-text-2);
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.lead {
max-width: 592px;
letter-spacing: 0.15px;
line-height: 28px;
font-size: 20px;
max-width: 37rem;
letter-spacing: 0.0075em;
line-height: 1.4;
font-size: 1.25rem;
}
}
</style>

21
src/client/theme-default/composables/aside.ts
Unescape View File

@ -1,21 +0,0 @@
import { useMediaQuery } from '@vueuse/core'
import { computed } from 'vue'
import { useLayout } from './layout'
export function useAside() {
const { hasSidebar } = useLayout()
const is960 = useMediaQuery('(min-width: 960px)')
const is1280 = useMediaQuery('(min-width: 1280px)')
const isAsideEnabled = computed(() => {
if (!is1280.value && !is960.value) {
return false
}
return hasSidebar.value ? is1280.value : is960.value
})
return {
isAsideEnabled
}
}

20
src/client/theme-default/composables/layout.ts
Unescape View File

@ -1,4 +1,5 @@
import { inBrowser, onContentUpdated, useRoute } from 'vitepress'
import { useMediaQuery } from '@vueuse/core'
import { onContentUpdated, useRoute } from 'vitepress'
import type { DefaultTheme, useLayout as expected } from 'vitepress/theme'
import {
computed,
@ -16,7 +17,7 @@ import { useCloseSidebarOnEscape } from './sidebar'
const headers = shallowRef<DefaultTheme.OutlineItem[]>([])
const sidebar = shallowRef<DefaultTheme.SidebarItem[]>([])
const is960 = shallowRef(false)
const isDesktop = useMediaQuery('(min-width: 60rem)')
export function useLayout(): ReturnType<typeof expected> {
const { frontmatter, theme } = useData()
@ -33,7 +34,7 @@ export function useLayout(): ReturnType<typeof expected> {
)
})
const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
const isSidebarEnabled = computed(() => hasSidebar.value && isDesktop.value)
const sidebarGroups = computed(() => {
return hasSidebar.value ? getSidebarGroups(sidebar.value) : []
@ -93,21 +94,10 @@ export function registerWatchers({ closeSidebar }: RegisterWatchersOptions) {
headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
})
if (inBrowser) {
is960.value = window.innerWidth >= 960
window.addEventListener(
'resize',
() => {
is960.value = window.innerWidth >= 960
},
{ passive: true }
)
}
const route = useRoute()
watch(() => route.path, closeSidebar)
watch(is960, closeSidebar)
watch(isDesktop, closeSidebar)
useCloseSidebarOnEscape(closeSidebar)
}

18
src/client/theme-default/composables/outline.ts
Unescape View File

@ -1,7 +1,7 @@
import { useMediaQuery } from '@vueuse/core'
import type { DefaultTheme } from 'vitepress/theme'
import { onMounted, onUnmounted, onUpdated, type Ref } from 'vue'
import { throttleAndDebounce } from '../support/utils'
import { useAside } from './aside'
const ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/
@ -79,7 +79,7 @@ export function useActiveAnchor(
container: Ref<HTMLElement>,
marker: Ref<HTMLElement>
): void {
const { isAsideEnabled } = useAside()
const isAsideVisible = useMediaQuery('(min-width: 80rem)')
const onScroll = throttleAndDebounce(setActiveLink, 100)
@ -102,7 +102,7 @@ export function useActiveAnchor(
})
function onClick(e: MouseEvent) {
if (!isAsideEnabled.value) {
if (!isAsideVisible.value) {
return
}
@ -116,7 +116,7 @@ export function useActiveAnchor(
}
function setActiveLink() {
if (!isAsideEnabled.value) {
if (!isAsideVisible.value) {
return
}
@ -187,10 +187,16 @@ export function useActiveAnchor(
if (activeLink) {
activeLink.classList.add('active')
marker.value.style.top = activeLink.offsetTop + 39 + 'px'
// the links' offsetParent (.root) sits below the outline title while the
// marker is offset from .content, so re-align their origins
marker.value.style.top =
activeLink.offsetTop +
((activeLink.offsetParent as HTMLElement)?.offsetTop ?? 0) +
(activeLink.offsetHeight - marker.value.offsetHeight) / 2 +
'px'
marker.value.style.opacity = '1'
} else {
marker.value.style.top = '33px'
marker.value.style.top = ''
marker.value.style.opacity = '0'
}
}

29
src/client/theme-default/composables/sponsor-grid.ts
Unescape View File

@ -15,10 +15,10 @@ export interface UseSponsorsGridOptions {
/**
* Defines grid configuration for each sponsor size in tuple.
*
* [Screen width, Column size]
* [Screen width (rem), Column size]
*
* It sets grid size on matching screen size. For example, `[768, 5]` will
* set 5 columns when screen size is bigger or equal to 768px.
* It sets grid size on matching screen size. For example, `[48, 5]` will
* set 5 columns when the screen is at least 48rem wide.
*
* Column will set only when item size is bigger than the column size. For
* example, even we define 5 columns, if we only have 1 sponsor yet, we would
@ -28,21 +28,21 @@ const GridSettings: GridSetting = {
xmini: [[0, 2]],
mini: [],
small: [
[920, 6],
[768, 5],
[640, 4],
[480, 3],
[57.5, 6],
[48, 5],
[40, 4],
[30, 3],
[0, 2]
],
medium: [
[960, 5],
[832, 4],
[640, 3],
[480, 2]
[60, 5],
[52, 4],
[40, 3],
[30, 2]
],
big: [
[832, 3],
[640, 2]
[52, 3],
[40, 2]
]
}
@ -77,12 +77,11 @@ function adjustSlots(el: HTMLElement, size: GridSize) {
function setGrid(el: HTMLElement, size: GridSize, items: number) {
const settings = GridSettings[size]
const screen = window.innerWidth
let grid = 1
settings.some(([breakpoint, value]) => {
if (screen >= breakpoint) {
if (window.matchMedia(`(min-width: ${breakpoint}rem)`).matches) {
grid = items < value ? items : value
return true
}

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

@ -150,11 +150,11 @@
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
padding-inline-start: 1.25rem;
}
::file-selector-button {
margin-inline-end: 4px;
margin-inline-end: 0.25rem;
}
::placeholder {
@ -244,10 +244,6 @@
}
:root {
/* FIXME: pins rem-sized bits while the theme is px-based - remove when
moving to relative units (#570) */
font-size: 16px;
&:is(.dark) {
color-scheme: dark;
}
@ -257,9 +253,6 @@
}
body {
/* FIXME: unlike html's unitless 1.5, this is inherited as-is by elements
with other font sizes - make unitless with #570 */
line-height: 24px;
color: var(--vp-c-text-1);
background-color: var(--vp-c-bg);
text-rendering: optimizeLegibility;

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

@ -1,15 +1,15 @@
.custom-block {
border: 1px solid transparent;
border-radius: 8px;
padding: 8px 16px;
line-height: 24px;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
line-height: 1.7142857;
font-size: var(--vp-custom-block-font-size);
color: var(--vp-c-text-2);
}
/* containers rendered with `{no-title}` keep the reduced padding */
.custom-block:has(> .custom-block-title, > summary) {
padding-top: 16px;
padding-top: 1rem;
}
.custom-block.info {
@ -176,25 +176,25 @@
}
.custom-block p + p {
margin: 8px 0;
margin: 0.5rem 0;
}
.custom-block.details summary {
margin: 0 0 8px;
margin: 0 0 0.5rem;
font-weight: 700;
cursor: pointer;
user-select: none;
}
.custom-block.details summary + p {
margin: 8px 0;
margin: 0.5rem 0;
}
.custom-block a {
color: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
text-underline-offset: 0.125rem;
transition: opacity 0.25s;
}

24
src/client/theme-default/styles/components/vp-code-group.css
Unescape View File

@ -1,24 +1,24 @@
.vp-code-group {
margin-top: 16px;
margin-top: 1rem;
}
.vp-code-group .tabs {
position: relative;
display: flex;
margin-right: -24px;
margin-left: -24px;
padding: 0 12px;
margin-right: -1.5rem;
margin-left: -1.5rem;
padding: 0 0.75rem;
background-color: var(--vp-code-tab-bg);
overflow-x: auto;
overflow-y: hidden;
box-shadow: inset 0 -1px var(--vp-code-tab-divider);
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.vp-code-group .tabs {
margin-right: 0;
margin-left: 0;
border-radius: 8px 8px 0 0;
border-radius: 0.5rem 0.5rem 0 0;
}
}
@ -32,9 +32,9 @@
position: relative;
display: inline-block;
border-bottom: 1px solid transparent;
padding: 0 12px;
line-height: 48px;
font-size: 14px;
padding: 0 0.75rem;
line-height: 3.4285714;
font-size: 0.875rem;
font-weight: 500;
color: var(--vp-code-tab-text-color);
white-space: nowrap;
@ -44,9 +44,9 @@
.vp-code-group .tabs label::after {
position: absolute;
right: 8px;
right: 0.5rem;
bottom: -1px;
left: 8px;
left: 0.5rem;
z-index: 1;
height: 2px;
border-radius: 2px;
@ -81,5 +81,5 @@
}
.vp-block {
padding: 20px 24px;
padding: 1.25rem 1.5rem;
}

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

@ -4,21 +4,21 @@
.vp-doc [id] {
scroll-margin-top: calc(
47px + var(--vp-layout-top-height, 0px) +
var(--vp-extra-scroll-margin, 24px)
2.9375rem + var(--vp-layout-top-height, 0px) +
var(--vp-extra-scroll-margin, 1.5rem)
);
@media (min-width: 960px) {
@media (min-width: 60rem) {
scroll-margin-top: calc(
var(--vp-nav-height) + 47px + var(--vp-layout-top-height, 0px) +
var(--vp-extra-scroll-margin, 24px)
var(--vp-nav-height) + 2.9375rem + var(--vp-layout-top-height, 0px) +
var(--vp-extra-scroll-margin, 1.5rem)
);
}
@media (min-width: 1280px) {
@media (min-width: 80rem) {
scroll-margin-top: calc(
var(--vp-nav-height) + var(--vp-layout-top-height, 0px) +
var(--vp-extra-scroll-margin, 24px)
var(--vp-extra-scroll-margin, 1.5rem)
);
}
}
@ -40,33 +40,33 @@
.vp-doc h1 {
letter-spacing: -0.02em;
line-height: 40px;
font-size: 28px;
line-height: 1.4285714;
font-size: 1.75rem;
}
.vp-doc h2 {
margin: 48px 0 16px;
margin: 3rem 0 1rem;
border-top: 1px solid var(--vp-c-divider);
padding-top: 24px;
padding-top: 1.5rem;
letter-spacing: -0.02em;
line-height: 32px;
font-size: 24px;
/* since it already has a top padding of 24px, we don't need extra scroll margin */
line-height: 1.3333333;
font-size: 1.5rem;
/* since it already has a top padding of 1.5rem, we don't need extra scroll margin */
--vp-extra-scroll-margin: 0px;
}
.vp-doc h3 {
margin: 32px 0 0;
margin: 2rem 0 0;
letter-spacing: -0.01em;
line-height: 28px;
font-size: 20px;
line-height: 1.4;
font-size: 1.25rem;
}
.vp-doc h4 {
margin: 24px 0 0;
margin: 1.5rem 0 0;
letter-spacing: -0.01em;
line-height: 24px;
font-size: 18px;
line-height: 1.3333333;
font-size: 1.125rem;
}
.vp-doc .header-anchor {
@ -102,16 +102,16 @@
opacity: 1;
}
@media (min-width: 768px) {
@media (min-width: 48rem) {
.vp-doc h1 {
letter-spacing: -0.02em;
line-height: 40px;
font-size: 32px;
line-height: 1.25;
font-size: 2rem;
}
}
.vp-doc h2 .header-anchor {
top: 24px;
top: 1.5rem;
}
/**
@ -121,24 +121,24 @@
.vp-doc p,
.vp-doc img,
.vp-doc summary {
margin: 16px 0;
margin: 1rem 0;
}
.vp-doc p {
line-height: 28px;
line-height: 1.75;
}
.vp-doc blockquote {
margin: 16px 0;
margin: 1rem 0;
border-left: 2px solid var(--vp-c-divider);
padding-left: 16px;
padding-left: 1rem;
transition: border-color 0.5s;
color: var(--vp-c-text-2);
}
.vp-doc blockquote > p {
margin: 0;
font-size: 16px;
font-size: 1rem;
transition: color 0.5s;
}
@ -146,7 +146,7 @@
font-weight: 500;
color: var(--vp-c-brand-1);
text-decoration: underline;
text-underline-offset: 2px;
text-underline-offset: 0.125rem;
transition:
color 0.25s,
opacity 0.25s;
@ -167,7 +167,7 @@
.vp-doc ul,
.vp-doc ol {
padding-left: 1.25rem;
margin: 16px 0;
margin: 1rem 0;
}
.vp-doc ul {
@ -179,12 +179,12 @@
}
.vp-doc li + li {
margin-top: 8px;
margin-top: 0.5rem;
}
.vp-doc li > ol,
.vp-doc li > ul {
margin: 8px 0 0;
margin: 0.5rem 0 0;
}
.vp-doc li > p:first-child {
@ -200,7 +200,7 @@
}
.vp-doc .task-list-item-checkbox {
margin: 0 4px 2px -1.25rem;
margin: 0 0.25rem 0.125rem -1.25rem;
vertical-align: middle;
accent-color: var(--vp-c-brand-1);
}
@ -215,7 +215,7 @@
}
.vp-doc .footnotes {
font-size: 14px;
font-size: 0.875rem;
}
/**
@ -225,7 +225,7 @@
.vp-doc table {
display: block;
border-collapse: collapse;
margin: 20px 0;
margin: 1.25rem 0;
overflow-x: auto;
}
@ -242,19 +242,19 @@
.vp-doc th,
.vp-doc td {
border: 1px solid var(--vp-c-divider);
padding: 8px 16px;
padding: 0.5rem 1rem;
}
.vp-doc th {
text-align: left;
font-size: 14px;
font-size: 0.875rem;
font-weight: 600;
color: var(--vp-c-text-2);
background-color: var(--vp-c-bg-soft);
}
.vp-doc td {
font-size: 14px;
font-size: 0.875rem;
}
/**
@ -262,7 +262,7 @@
* -------------------------------------------------------------------------- */
.vp-doc hr {
margin: 16px 0;
margin: 1rem 0;
border: none;
border-top: 1px solid var(--vp-c-divider);
}
@ -272,12 +272,12 @@
* -------------------------------------------------------------------------- */
.vp-doc .custom-block {
margin: 16px 0;
margin: 1rem 0;
}
.vp-doc .custom-block p {
margin: 8px 0;
line-height: 24px;
margin: 0.5rem 0;
line-height: 1.7142857;
}
.vp-doc .custom-block p:first-child {
@ -285,8 +285,8 @@
}
.vp-doc .custom-block div[class*='language-'] {
margin: 8px 0 !important;
border-radius: 8px;
margin: 0.5rem 0 !important;
border-radius: 0.5rem;
}
.vp-doc .custom-block div[class*='language-'] code {
@ -296,12 +296,12 @@
.vp-doc .custom-block .vp-code-group,
.vp-doc .custom-block [class*='vp-code-block'] {
margin-top: 8px;
margin-top: 0.5rem;
}
.vp-doc .custom-block .vp-code-group .tabs {
margin: 0;
border-radius: 8px 8px 0 0;
border-radius: 0.5rem 0.5rem 0 0;
}
.vp-doc .custom-block .vp-code-group div[class*='language-'],
@ -320,8 +320,8 @@
}
.vp-doc :not(pre) > code {
border-radius: 4px;
padding: 3px 6px;
border-radius: 0.25rem;
padding: 0.1875rem 0.375rem;
background-color: var(--vp-code-bg);
transition:
color 0.25s,
@ -346,30 +346,30 @@
.vp-doc div[class*='language-'],
.vp-block {
position: relative;
margin: 16px -24px;
margin: 1rem -1.5rem;
background-color: var(--vp-code-block-bg);
overflow-x: auto;
transition: background-color 0.5s;
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
.vp-doc div[class*='language-'],
.vp-block {
border-radius: 8px;
margin: 16px 0;
border-radius: 0.5rem;
margin: 1rem 0;
}
}
@media (max-width: 639px) {
@media not all and (min-width: 40rem) {
.vp-doc li div[class*='language-'] {
border-radius: 8px 0 0 8px;
border-radius: 0.5rem 0 0 0.5rem;
}
}
.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,
@ -383,7 +383,7 @@
position: relative;
z-index: 1;
margin: 0;
padding: 20px 0;
padding: 1.25rem 0;
background: transparent;
overflow-x: auto;
/*rtl:ignore*/
@ -392,7 +392,7 @@
.vp-doc [class*='language-'] code {
display: block;
padding: 0 24px;
padding: 0 1.5rem;
width: fit-content;
min-width: 100%;
line-height: var(--vp-code-line-height);
@ -404,9 +404,9 @@
.vp-doc [class*='language-'] code .highlighted {
background-color: var(--vp-code-line-highlight-color);
transition: background-color 0.5s;
margin: 0 -24px;
padding: 0 24px;
width: calc(100% + 2 * 24px);
margin: 0 -1.5rem;
padding: 0 1.5rem;
width: calc(100% + 2 * 1.5rem);
display: inline-block;
}
@ -420,15 +420,15 @@
.vp-doc [class*='language-'] code .diff {
transition: background-color 0.5s;
margin: 0 -24px;
padding: 0 24px;
width: calc(100% + 2 * 24px);
margin: 0 -1.5rem;
padding: 0 1.5rem;
width: calc(100% + 2 * 1.5rem);
display: inline-block;
}
.vp-doc [class*='language-'] code .diff::before {
position: absolute;
left: 10px;
left: 0.625rem;
}
.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
@ -472,7 +472,7 @@
.vp-doc div[class*='language-'].line-numbers-mode {
/*rtl:ignore*/
padding-left: 32px;
padding-left: 2rem;
}
.vp-doc .line-numbers-wrapper {
@ -484,8 +484,8 @@
z-index: 3;
/*rtl:ignore*/
border-right: 1px solid var(--vp-code-block-divider-color);
padding-top: 20px;
width: 32px;
padding-top: 1.25rem;
width: 2rem;
text-align: center;
font-family: var(--vp-font-family-mono);
line-height: var(--vp-code-line-height);
@ -500,20 +500,20 @@
/*rtl:ignore*/
direction: ltr;
position: absolute;
top: 12px;
top: 0.75rem;
/*rtl:ignore*/
right: 12px;
right: 0.75rem;
z-index: 3;
border: 1px solid var(--vp-code-copy-code-border-color);
border-radius: 4px;
width: 40px;
height: 40px;
border-radius: 0.25rem;
width: 2.5rem;
height: 2.5rem;
background-color: var(--vp-code-copy-code-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:
border-color 0.25s,
@ -535,7 +535,7 @@
.vp-doc [class*='language-'] > button.copy.copied,
.vp-doc [class*='language-'] > button.copy:hover.copied {
/*rtl:ignore*/
border-radius: 0 4px 4px 0;
border-radius: 0 0.25rem 0.25rem 0;
background-color: var(--vp-code-copy-code-hover-bg);
background-image: var(--vp-icon-copied);
}
@ -553,12 +553,12 @@
/*rtl:ignore*/
border-right: 0;
/*rtl:ignore*/
border-radius: 4px 0 0 4px;
padding: 0 10px;
border-radius: 0.25rem 0 0 0.25rem;
padding: 0 0.625rem;
width: fit-content;
height: 40px;
height: 2.5rem;
text-align: center;
font-size: 12px;
font-size: 0.75rem;
font-weight: 500;
color: var(--vp-code-copy-code-active-text);
background-color: var(--vp-code-copy-code-hover-bg);
@ -568,11 +568,11 @@
.vp-doc [class*='language-'] > span.lang {
position: absolute;
top: 2px;
top: 0.125rem;
/*rtl:ignore*/
right: 8px;
right: 0.5rem;
z-index: 2;
font-size: 12px;
font-size: 0.75rem;
font-weight: 500;
user-select: none;
color: var(--vp-code-lang-color);
@ -591,12 +591,12 @@
* -------------------------------------------------------------------------- */
.vp-doc .VPTeamMembers {
margin-top: 24px;
margin-top: 1.5rem;
}
.vp-doc .VPTeamMembers.small.count-1 .container {
margin: 0 !important;
max-width: calc((100% - 24px) / 2) !important;
max-width: calc((100% - 1.5rem) / 2) !important;
}
.vp-doc .VPTeamMembers.small.count-2 .container,
@ -606,7 +606,7 @@
.vp-doc .VPTeamMembers.medium.count-1 .container {
margin: 0 !important;
max-width: calc((100% - 24px) / 2) !important;
max-width: calc((100% - 1.5rem) / 2) !important;
}
/**
@ -616,8 +616,8 @@
/* prettier-ignore */
:is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
display: inline;
margin-left: 4px;
padding-left: 11px;
margin-left: 0.25rem;
padding-left: 0.6875rem;
background: currentColor;
color: var(--vp-c-text-3);
flex-shrink: 0;
@ -628,11 +628,11 @@
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 11px 11px;
mask-size: 11px 11px;
-webkit-mask-size: 0.6875rem 0.6875rem;
mask-size: 0.6875rem 0.6875rem;
/*rtl:raw:transform: scaleX(-1);*/
vertical-align: bottom;
font-size: 10px;
font-size: 0.625rem;
}
.vp-external-link-icon::after {

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

@ -3,23 +3,23 @@
* allied in onMounted` hook and we can't use scoped style.
*/
.vp-sponsor {
border-radius: 16px;
border-radius: 1rem;
overflow: hidden;
}
.vp-sponsor.aside {
border-radius: 12px;
border-radius: 0.75rem;
}
.vp-sponsor-section + .vp-sponsor-section {
margin-top: 4px;
margin-top: 0.25rem;
}
.vp-sponsor-tier {
margin: 0 0 4px !important;
margin: 0 0 0.25rem !important;
text-align: center;
letter-spacing: 1px !important;
line-height: 24px;
letter-spacing: 0.0625rem !important;
line-height: 1.5;
width: 100%;
font-weight: 600;
color: var(--vp-c-text-2);
@ -27,83 +27,83 @@
}
.vp-sponsor.normal .vp-sponsor-tier {
padding: 13px 0 11px;
font-size: 14px;
padding: 0.8125rem 0 0.6875rem;
font-size: 0.875rem;
}
.vp-sponsor.aside .vp-sponsor-tier {
padding: 9px 0 7px;
font-size: 12px;
padding: 0.5625rem 0 0.4375rem;
font-size: 0.75rem;
}
.vp-sponsor-grid + .vp-sponsor-tier {
margin-top: 4px;
margin-top: 0.25rem;
}
.vp-sponsor-grid {
display: flex;
flex-wrap: wrap;
gap: 4px;
gap: 0.25rem;
}
.vp-sponsor-grid.xmini .vp-sponsor-grid-link {
height: 64px;
height: 4rem;
}
.vp-sponsor-grid.xmini .vp-sponsor-grid-image {
max-width: 64px;
max-height: 22px;
max-width: 4rem;
max-height: 1.375rem;
}
.vp-sponsor-grid.mini .vp-sponsor-grid-link {
height: 72px;
height: 4.5rem;
}
.vp-sponsor-grid.mini .vp-sponsor-grid-image {
max-width: 96px;
max-height: 24px;
max-width: 6rem;
max-height: 1.5rem;
}
.vp-sponsor-grid.small .vp-sponsor-grid-link {
height: 96px;
height: 6rem;
}
.vp-sponsor-grid.small .vp-sponsor-grid-image {
max-width: 96px;
max-height: 24px;
max-width: 6rem;
max-height: 1.5rem;
}
.vp-sponsor-grid.medium .vp-sponsor-grid-link {
height: 112px;
height: 7rem;
}
.vp-sponsor-grid.medium .vp-sponsor-grid-image {
max-width: 120px;
max-height: 36px;
max-width: 7.5rem;
max-height: 2.25rem;
}
.vp-sponsor-grid.big .vp-sponsor-grid-link {
height: 184px;
height: 11.5rem;
}
.vp-sponsor-grid.big .vp-sponsor-grid-image {
max-width: 192px;
max-height: 56px;
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% - 0.25rem) / 2);
}
.vp-sponsor-grid[data-vp-grid='3'] .vp-sponsor-grid-item {
width: calc((100% - 4px * 2) / 3);
width: calc((100% - 0.25rem * 2) / 3);
}
.vp-sponsor-grid[data-vp-grid='4'] .vp-sponsor-grid-item {
width: calc((100% - 4px * 3) / 4);
width: calc((100% - 0.25rem * 3) / 4);
}
.vp-sponsor-grid[data-vp-grid='5'] .vp-sponsor-grid-item {
width: calc((100% - 4px * 4) / 5);
width: calc((100% - 0.25rem * 4) / 5);
}
.vp-sponsor-grid[data-vp-grid='6'] .vp-sponsor-grid-item {
width: calc((100% - 4px * 5) / 6);
width: calc((100% - 0.25rem * 5) / 6);
}
.vp-sponsor-grid-item {

39
src/client/theme-default/styles/docsearch.css
Unescape View File

@ -11,58 +11,75 @@
--docsearch-actions-height: auto;
--docsearch-actions-width: auto;
--docsearch-background-color: var(--vp-c-bg-soft);
--docsearch-border-radius: 0.25rem;
--docsearch-container-background: var(--vp-backdrop-bg-color);
--docsearch-dropdown-menu-background: var(--vp-c-bg-elv);
--docsearch-dropdown-menu-item-hover-background: var(--vp-c-default-soft);
--docsearch-focus-color: var(--vp-c-brand-1);
--docsearch-footer-background: var(--vp-c-bg-alt);
--docsearch-footer-height: 3.25rem;
--docsearch-highlight-color: var(--vp-c-brand-1);
--docsearch-hit-background: var(--vp-c-bg);
--docsearch-hit-color: var(--vp-c-text-1);
--docsearch-hit-height: 3.5rem;
--docsearch-hit-highlight-color: var(--vp-c-brand-soft);
--docsearch-icon-color: var(--vp-c-text-2);
--docsearch-key-background: var(--vp-code-bg);
--docsearch-modal-background: var(--vp-c-bg-soft);
--docsearch-modal-height: 37.5rem;
--docsearch-modal-width: 50rem;
--docsearch-muted-color: var(--vp-c-text-2);
--docsearch-primary-color: var(--vp-c-brand-1);
--docsearch-searchbox-background: var(--vp-c-bg-alt);
--docsearch-searchbox-focus-background: transparent;
--docsearch-searchbox-height: 3.5rem;
--docsearch-searchbox-initial-height: 3.5rem;
--docsearch-secondary-text-color: var(--vp-c-text-2);
--docsearch-sidepanel-accent-muted: var(--vp-c-text-3);
--docsearch-sidepanel-text-base: var(--vp-c-text-1);
--docsearch-soft-muted-color: var(--vp-c-default-soft);
--docsearch-soft-primary-color: var(--vp-c-brand-soft);
--docsearch-spacing: 0.75rem;
--docsearch-subtle-color: var(--vp-c-divider);
--docsearch-success-color: var(--vp-c-brand-soft);
--docsearch-text-color: var(--vp-c-text-1);
}
/* mirror the tightened mobile values from @docsearch/css, which the
higher-specificity overrides above would otherwise mask */
@media not all and (min-width: 48rem) {
:root:root {
--docsearch-footer-height: 3rem;
--docsearch-spacing: 0.625rem;
}
}
:root.dark {
--docsearch-modal-shadow: none;
}
.DocSearch-AskAiScreen-RelatedSources-Item-Link {
padding: 8px 12px 8px 10px;
padding: 0.5rem 0.75rem 0.5rem 0.625rem;
}
.DocSearch-AskAiScreen-RelatedSources-Item-Link svg {
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
}
.DocSearch-AskAiScreen-RelatedSources-Title {
padding-bottom: 0;
font-size: 12px;
font-size: 0.75rem;
}
.DocSearch-Clear {
padding-right: 6px;
padding-right: 0.375rem;
}
.DocSearch-Commands-Key {
padding: 4px;
padding: 0.25rem;
border: 1px solid var(--docsearch-subtle-color);
border-radius: 4px;
border-radius: 0.25rem;
}
.DocSearch-Hit a:focus-visible {
@ -78,15 +95,15 @@
}
.DocSearch-Menu-content {
margin-top: -4px;
padding: 6px;
margin-top: -0.25rem;
padding: 0.375rem;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
border-radius: 0.375rem;
box-shadow: var(--vp-shadow-2);
}
.DocSearch-Menu-item {
border-radius: 4px;
border-radius: 0.25rem;
}
.DocSearch-SearchBar + .DocSearch-Footer {

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

@ -308,7 +308,7 @@
--vp-z-index-sidebar: 60;
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
:root {
--vp-z-index-sidebar: 25;
}
@ -319,7 +319,7 @@
* -------------------------------------------------------------------------- */
:root {
--vp-layout-max-width: 1440px;
--vp-layout-max-width: 90rem;
}
/**
@ -415,8 +415,8 @@
* -------------------------------------------------------------------------- */
:root {
--vp-custom-block-font-size: 14px;
--vp-custom-block-code-font-size: 13px;
--vp-custom-block-font-size: 0.875rem;
--vp-custom-block-code-font-size: 0.8125rem;
--vp-custom-block-info-border: transparent;
--vp-custom-block-info-text: var(--vp-c-text-1);
@ -475,10 +475,10 @@
* -------------------------------------------------------------------------- */
:root {
--vp-nav-height: 64px;
--vp-nav-height: 4rem;
--vp-nav-bg-color: var(--vp-c-bg);
--vp-nav-screen-bg-color: var(--vp-c-bg);
--vp-nav-logo-height: 24px;
--vp-nav-logo-height: 1.5rem;
}
.hide-nav {
@ -486,7 +486,7 @@
}
.hide-nav .VPSidebar {
--vp-nav-height: 22px;
--vp-nav-height: 1.375rem;
}
/**
@ -502,7 +502,7 @@
* -------------------------------------------------------------------------- */
:root {
--vp-sidebar-width: 272px;
--vp-sidebar-width: 17rem;
--vp-sidebar-bg-color: var(--vp-c-bg-alt);
}

11
src/node/plugin.ts
Unescape View File

@ -257,8 +257,15 @@ export async function createVitePressPlugin(
if (docsearchRE.test(normalizePath(id))) {
return code
.replaceAll('[data-theme=dark]', '.dark')
.replaceAll(/\(max-width:\s*768px\)/g, '(max-width: 767px)')
.replaceAll(/\(min-width:\s*769px\)/g, '(min-width: 768px)')
.replaceAll(
/@media (?:screen and )?\(max-width:\s*768px\)/g,
'@media not all and (min-width: 48rem)'
)
.replaceAll(
/\(max-width:\s*768px\)/g,
'not all and (min-width: 48rem)'
)
.replaceAll(/\(min-width:\s*769px\)/g, '(min-width: 48rem)')
}
}
},

4
template/.vitepress/theme/style.css
Unescape View File

@ -106,13 +106,13 @@
--vp-home-hero-image-filter: blur(44px);
}
@media (min-width: 640px) {
@media (min-width: 40rem) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}
@media (min-width: 960px) {
@media (min-width: 60rem) {
:root {
--vp-home-hero-image-filter: blur(68px);
}

Write Preview
Loading…
Cancel
Save