feat(theme): add nav screen
This commit is contained in:
pengzhanbo
parent
4b0078d010
commit
f94c443b2d
@ -57,6 +57,7 @@
|
||||
"@vuepress/shared": "2.0.0-beta.60",
|
||||
"@vuepress/utils": "2.0.0-beta.60",
|
||||
"@vueuse/core": "^9.10.0",
|
||||
"body-scroll-lock": "4.0.0-beta.0",
|
||||
"date-fns": "^2.29.3",
|
||||
"nanoid": "^4.0.0",
|
||||
"ts-debounce": "^4.0.0",
|
||||
|
||||
0
packages/theme/src/client/components/BlogPage.vue
Normal file
0
packages/theme/src/client/components/BlogPage.vue
Normal file
@ -1 +1,101 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'
|
||||
import { ref } from 'vue'
|
||||
import NavScreenAppearance from './NavScreenAppearance.vue'
|
||||
import NavScreenMenu from './NavScreenMenu.vue'
|
||||
import NavScreenSocialLinks from './NavScreenSocialLinks.vue'
|
||||
|
||||
defineProps<{
|
||||
open: boolean
|
||||
}>()
|
||||
|
||||
const screen = ref<HTMLElement | null>(null)
|
||||
|
||||
function lockBodyScroll() {
|
||||
disableBodyScroll(screen.value!, { reserveScrollBarGap: true })
|
||||
}
|
||||
|
||||
function unlockBodyScroll() {
|
||||
clearAllBodyScrollLocks()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition
|
||||
name="fade"
|
||||
@enter="lockBodyScroll"
|
||||
@after-leave="unlockBodyScroll"
|
||||
>
|
||||
<div v-if="open" ref="screen" class="nav-screen">
|
||||
<div class="container">
|
||||
<NavScreenMenu class="menu" />
|
||||
<NavScreenAppearance class="appearance" />
|
||||
<NavScreenSocialLinks class="social-links" />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-screen {
|
||||
position: fixed;
|
||||
top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);
|
||||
/*rtl:ignore*/
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
padding: 0 32px;
|
||||
width: 100%;
|
||||
background-color: var(--vp-nav-screen-bg-color);
|
||||
overflow-y: auto;
|
||||
transition: background-color 0.5s;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-screen.fade-enter-active,
|
||||
.nav-screen.fade-leave-active {
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.nav-screen.fade-enter-active .container,
|
||||
.nav-screen.fade-leave-active .container {
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-screen.fade-enter-from,
|
||||
.nav-screen.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-screen.fade-enter-from .container,
|
||||
.nav-screen.fade-leave-to .container {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.nav-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 96px;
|
||||
max-width: 288px;
|
||||
}
|
||||
|
||||
.menu + .translations,
|
||||
.menu + .appearance,
|
||||
.translations + .appearance {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.menu + .social-links {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.appearance + .social-links {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<script lang="ts" setup>
|
||||
import { useThemeLocaleData } from '../../composables/index.js'
|
||||
import SwitchAppearance from '../SwitchAppearance.vue'
|
||||
|
||||
const theme = useThemeLocaleData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="theme.appearance" class="nav-screen-appearance">
|
||||
<p class="text">Appearance</p>
|
||||
<SwitchAppearance />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-screen-appearance {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px 12px 16px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
</style>
|
||||
20
packages/theme/src/client/components/Nav/NavScreenMenu.vue
Normal file
20
packages/theme/src/client/components/Nav/NavScreenMenu.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
import { useThemeLocaleData } from '../../composables/index.js'
|
||||
import NavScreenMenuGroup from './NavScreenMenuGroup.vue'
|
||||
import NavScreenMenuLink from './NavScreenMenuLink.vue'
|
||||
|
||||
const theme = useThemeLocaleData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav v-if="theme.navbar" class="nav-screen-menu">
|
||||
<template v-for="item in theme.navbar" :key="item.text">
|
||||
<NavScreenMenuLink
|
||||
v-if="'link' in item"
|
||||
:text="item.text"
|
||||
:link="item.link"
|
||||
/>
|
||||
<NavScreenMenuGroup v-else :text="item.text || ''" :items="item.items" />
|
||||
</template>
|
||||
</nav>
|
||||
</template>
|
||||
112
packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
Normal file
112
packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import IconPlus from '../icons/IconPlus.vue'
|
||||
import NavScreenMenuGroupLink from './NavScreenMenuGroupLink.vue'
|
||||
import NavScreenMenuGroupSection from './NavScreenMenuGroupSection.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
text: string
|
||||
items: any[]
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
|
||||
const groupId = computed(
|
||||
() => `nav-screen-menu-group-${props.text.replace(' ', '-').toLowerCase()}`
|
||||
)
|
||||
|
||||
function toggle() {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="nav-screen-menu-group" :class="{ open: isOpen }">
|
||||
<button
|
||||
class="button"
|
||||
:aria-controls="groupId"
|
||||
:aria-expanded="isOpen"
|
||||
@click="toggle"
|
||||
>
|
||||
<span class="button-text">{{ text }}</span>
|
||||
<IconPlus class="button-icon" />
|
||||
</button>
|
||||
|
||||
<div :id="groupId" class="items">
|
||||
<template v-for="item in items" :key="item.text">
|
||||
<div v-if="'link' in item" :key="item.text" class="item">
|
||||
<NavScreenMenuGroupLink :text="item.text" :link="item.link" />
|
||||
</div>
|
||||
|
||||
<div v-else class="group">
|
||||
<NavScreenMenuGroupSection :text="item.text" :items="item.items" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-screen-menu-group {
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group .items {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .items {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open {
|
||||
padding-bottom: 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button {
|
||||
padding-bottom: 6px;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button-icon {
|
||||
/*rtl:ignore*/
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 4px 11px 0;
|
||||
width: 100%;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--vp-c-text-2);
|
||||
transition: fill 0.5s, transform 0.25s;
|
||||
}
|
||||
|
||||
.group:first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.group + .group,
|
||||
.group + .item {
|
||||
padding-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue'
|
||||
import AutoLink from '../AutoLink.vue'
|
||||
|
||||
defineProps<{
|
||||
text: string
|
||||
link: string
|
||||
}>()
|
||||
|
||||
const closeScreen = inject('close-screen') as () => void
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AutoLink
|
||||
class="nav-screen-menu-group-link"
|
||||
:href="link"
|
||||
@click="closeScreen"
|
||||
>
|
||||
{{ text }}
|
||||
</AutoLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-screen-menu-group-link {
|
||||
display: block;
|
||||
margin-left: 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group-link:hover {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,35 @@
|
||||
<script lang="ts" setup>
|
||||
import type { NavItemWithLink } from '../../../shared/index.js'
|
||||
import NavScreenMenuGroupLink from './NavScreenMenuGroupLink.vue'
|
||||
|
||||
defineProps<{
|
||||
text?: string
|
||||
items: NavItemWithLink[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="nav-screen-menu-group-section">
|
||||
<p v-if="text" class="title">{{ text }}</p>
|
||||
<NavScreenMenuGroupLink
|
||||
v-for="item in items"
|
||||
:key="item.text"
|
||||
:text="item.text"
|
||||
:link="item.link"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-screen-menu-group-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue'
|
||||
import AutoLink from '../AutoLink.vue'
|
||||
|
||||
defineProps<{
|
||||
text: string
|
||||
link: string
|
||||
}>()
|
||||
|
||||
const closeScreen = inject('close-screen') as () => void
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AutoLink class="nav-screen-menu-link" :href="link" @click="closeScreen">
|
||||
{{ text }}
|
||||
</AutoLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-screen-menu-link {
|
||||
display: block;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
padding: 12px 0 11px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: border-color 0.25s, color 0.25s;
|
||||
}
|
||||
|
||||
.nav-screen-menu-link:hover {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
<script lang="ts" setup>
|
||||
import { useThemeData } from '../../composables/index.js'
|
||||
import SocialLinks from '../SocialLinks.vue'
|
||||
|
||||
const theme = useThemeData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SocialLinks
|
||||
v-if="theme.social"
|
||||
class="VPNavScreenSocialLinks"
|
||||
:links="theme.social"
|
||||
/>
|
||||
</template>
|
||||
@ -1,7 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { provide } from 'vue'
|
||||
import { useNav } from '../../composables/nav.js'
|
||||
import Navbar from './Navbar.vue'
|
||||
import Navbar from './NavBar.vue'
|
||||
import NavScreen from './NavScreen.vue'
|
||||
|
||||
const { isScreenOpen, closeScreen, toggleScreen } = useNav()
|
||||
|
||||
@ -9,6 +10,26 @@ provide('close-screen', closeScreen)
|
||||
</script>
|
||||
<template>
|
||||
<div class="nav-wrapper">
|
||||
<Navbar :is-screen-open="isScreenOpen"></Navbar>
|
||||
<Navbar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" />
|
||||
<NavScreen :open="isScreenOpen" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-wrapper {
|
||||
position: relative;
|
||||
top: var(--vp-layout-top-height, 0px);
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-nav);
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.nav-wrapper {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
11
packages/theme/src/client/components/Page.vue
Normal file
11
packages/theme/src/client/components/Page.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="plume-page">
|
||||
<Content class="plume-content" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.plume-page {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import Nav from '../components/Nav/index.vue'
|
||||
import Page from '../components/Page.vue'
|
||||
import { useScrollPromise, useThemeLocaleData } from '../composables/index.js'
|
||||
|
||||
// handle scrollBehavior with transition
|
||||
@ -8,7 +9,16 @@ const onBeforeEnter = scrollPromise.resolve
|
||||
const onBeforeLeave = scrollPromise.pending
|
||||
</script>
|
||||
<template>
|
||||
<div class="theme-plume relative min-h-100vh">
|
||||
<div class="theme-plume">
|
||||
<Nav />
|
||||
<Page></Page>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.theme-plume {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
501
packages/theme/src/client/styles/content.css
Normal file
501
packages/theme/src/client/styles/content.css
Normal file
@ -0,0 +1,501 @@
|
||||
/**
|
||||
* Headings
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.plume-content h1,
|
||||
.plume-content h2,
|
||||
.plume-content h3,
|
||||
.plume-content h4,
|
||||
.plume-content h5,
|
||||
.plume-content h6 {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.plume-content h1 {
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.plume-content h2 {
|
||||
margin: 48px 0 16px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 24px;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 32px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.plume-content h3 {
|
||||
margin: 32px 0 0;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.plume-content .header-anchor {
|
||||
float: left;
|
||||
margin-left: -0.87em;
|
||||
padding-right: 0.23em;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
transition: color 0.25s, opacity 0.25s;
|
||||
}
|
||||
|
||||
.plume-content h1:hover .header-anchor,
|
||||
.plume-content h1 .header-anchor:focus,
|
||||
.plume-content h2:hover .header-anchor,
|
||||
.plume-content h2 .header-anchor:focus,
|
||||
.plume-content h3:hover .header-anchor,
|
||||
.plume-content h3 .header-anchor:focus,
|
||||
.plume-content h4:hover .header-anchor,
|
||||
.plume-content h4 .header-anchor:focus,
|
||||
.plume-content h5:hover .header-anchor,
|
||||
.plume-content h5 .header-anchor:focus,
|
||||
.plume-content h6:hover .header-anchor,
|
||||
.plume-content h6 .header-anchor:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.plume-content h1 {
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 40px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Paragraph and inline elements
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.plume-content p,
|
||||
.plume-content summary {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.plume-content p {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.plume-content blockquote {
|
||||
margin: 16px 0;
|
||||
border-left: 2px solid var(--vp-c-divider);
|
||||
padding-left: 16px;
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
.plume-content blockquote > p {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.plume-content a {
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand);
|
||||
text-decoration-style: dotted;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.plume-content a:hover {
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
|
||||
.plume-content strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lists
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.plume-content ul,
|
||||
.plume-content ol {
|
||||
padding-left: 1.25rem;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.plume-content ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.plume-content ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.plume-content li + li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.plume-content li > ol,
|
||||
.plume-content li > ul {
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.plume-content table {
|
||||
display: block;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.plume-content tr {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
.plume-content tr:nth-child(2n) {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.plume-content th,
|
||||
.plume-content td {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.plume-content th {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.plume-content td {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Decorational elements
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.plume-content hr {
|
||||
margin: 16px 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom Block
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.plume-content .custom-block {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.plume-content .custom-block p {
|
||||
margin: 8px 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.plume-content .custom-block p:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.plume-content .custom-block a {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.plume-content .custom-block a:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.plume-content .custom-block code {
|
||||
font-size: var(--vp-custom-block-code-font-size);
|
||||
font-weight: 700;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.plume-content .custom-block div[class*='language-'] {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.plume-content .custom-block div[class*='language-'] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Code
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
/* inline code */
|
||||
.plume-content :not(pre, h1, h2, h3, h4, h5, h6) > code {
|
||||
font-size: var(--vp-code-font-size);
|
||||
}
|
||||
|
||||
.plume-content :not(pre) > code {
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
color: var(--vp-c-text-code);
|
||||
background-color: var(--vp-c-mute);
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
}
|
||||
|
||||
.plume-content h1 > code,
|
||||
.plume-content h2 > code,
|
||||
.plume-content h3 > code {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.plume-content a > code {
|
||||
color: var(--vp-c-brand);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.plume-content a:hover > code {
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
|
||||
.plume-content div[class*='language-'] {
|
||||
position: relative;
|
||||
margin: 16px -24px;
|
||||
background-color: var(--vp-code-block-bg);
|
||||
overflow-x: auto;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.plume-content div[class*='language-'] {
|
||||
border-radius: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.plume-content li div[class*='language-'] {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content div[class*='language-'] + div[class*='language-'],
|
||||
.plume-content div[class$='-api'] + div[class*='language-'],
|
||||
.plume-content
|
||||
div[class*='language-']
|
||||
+ div[class$='-api']
|
||||
> div[class*='language-'] {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] pre,
|
||||
.plume-content [class*='language-'] code {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
/*rtl:ignore*/
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] pre {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 16px 0;
|
||||
background: transparent;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code {
|
||||
display: block;
|
||||
padding: 0 24px;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
line-height: var(--vp-code-line-height);
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-block-color);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.plume-content [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);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .highlighted.error {
|
||||
background-color: var(--vp-code-line-error-color);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .highlighted.warning {
|
||||
background-color: var(--vp-code-line-warning-color);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff {
|
||||
transition: background-color 0.5s;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff::before {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0.095rem);
|
||||
opacity: 0.4;
|
||||
transition: filter 0.35s, opacity 0.35s;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
opacity: 0.7;
|
||||
transition: filter 0.35s, opacity 0.35s;
|
||||
}
|
||||
|
||||
.plume-content
|
||||
[class*='language-']:hover
|
||||
.has-focused-lines
|
||||
.line:not(.has-focus) {
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff.remove {
|
||||
background-color: var(--vp-code-line-diff-remove-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff.remove::before {
|
||||
content: '-';
|
||||
color: var(--vp-code-line-diff-remove-symbol-color);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff.add {
|
||||
background-color: var(--vp-code-line-diff-add-color);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff.add::before {
|
||||
content: '+';
|
||||
color: var(--vp-code-line-diff-add-symbol-color);
|
||||
}
|
||||
|
||||
.plume-content div[class*='language-'].line-numbers-mode {
|
||||
/*rtl:ignore*/
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.plume-content .line-numbers-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
/*rtl:ignore*/
|
||||
border-right: 1px solid var(--vp-code-block-divider-color);
|
||||
padding-top: 16px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
line-height: var(--vp-code-line-height);
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-line-number-color);
|
||||
transition: border-color 0.5s, color 0.5s;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] > button.copy {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
/*rtl:ignore*/
|
||||
right: 8px;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--vp-code-block-bg);
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
background-image: var(--vp-icon-copy);
|
||||
background-position: 50%;
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-']:hover > button.copy,
|
||||
.plume-content [class*='language-'] > button.copy:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] > button.copy:hover {
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] > button.copy.copied,
|
||||
.plume-content [class*='language-'] > button.copy:hover.copied {
|
||||
/*rtl:ignore*/
|
||||
border-radius: 0 4px 4px 0;
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
background-image: var(--vp-icon-copied);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] > button.copy.copied::before,
|
||||
.plume-content [class*='language-'] > button.copy:hover.copied::before {
|
||||
position: relative;
|
||||
/*rtl:ignore*/
|
||||
left: -65px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/*rtl:ignore*/
|
||||
border-radius: 4px 0 0 4px;
|
||||
width: 64px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-code-copy-code-active-text);
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
white-space: nowrap;
|
||||
content: 'Copied';
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] > span.lang {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
/*rtl:ignore*/
|
||||
right: 12px;
|
||||
z-index: 2;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-dark-3);
|
||||
transition: color 0.4s, opacity 0.4s;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-']:hover > button.copy + span.lang,
|
||||
.plume-content [class*='language-'] > button.copy:focus + span.lang {
|
||||
opacity: 0;
|
||||
}
|
||||
6
pnpm-lock.yaml
generated
6
pnpm-lock.yaml
generated
@ -297,6 +297,7 @@ importers:
|
||||
'@vuepress/shared': 2.0.0-beta.60
|
||||
'@vuepress/utils': 2.0.0-beta.60
|
||||
'@vueuse/core': ^9.10.0
|
||||
body-scroll-lock: 4.0.0-beta.0
|
||||
date-fns: ^2.29.3
|
||||
nanoid: ^4.0.0
|
||||
ts-debounce: ^4.0.0
|
||||
@ -332,6 +333,7 @@ importers:
|
||||
'@vuepress/shared': 2.0.0-beta.60
|
||||
'@vuepress/utils': 2.0.0-beta.60
|
||||
'@vueuse/core': 9.10.0_vue@3.2.47
|
||||
body-scroll-lock: 4.0.0-beta.0
|
||||
date-fns: 2.29.3
|
||||
nanoid: 4.0.0
|
||||
ts-debounce: 4.0.0
|
||||
@ -4522,6 +4524,10 @@ packages:
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/body-scroll-lock/4.0.0-beta.0:
|
||||
resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
|
||||
dev: false
|
||||
|
||||
/bonjour-service/1.0.13:
|
||||
resolution: {integrity: sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==}
|
||||
dependencies:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user