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

feat(theme): use native CSS for RTL instead of using `rtlcss` package

Browse Source
pull/5034/head
Rami Yushuvaev 8 months ago
parent d16d1970bc
commit 30f0e2735f
54 changed files with 195 additions and 209 deletions
Show Stats Download Patch File Download Diff File

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

@ -208,16 +208,16 @@ describe('node/markdown/plugins/snippet', () => {
const lines = [
'.body-content {',
'/* #region foo */',
' padding-left: 15px;',
' padding-inline-start: 15px;',
'/* #endregion foo */',
' padding-right: 15px;',
' padding-inline-end: 15px;',
'}'
]
const result = findRegion(lines, 'foo')
expect(result).not.toBeNull()
if (result) {
expect(lines.slice(result.start, result.end).join('\n')).toBe(
' padding-left: 15px;'
' padding-inline-start: 15px;'
)
}
})

4
docs/components/ModalDemo.vue
Unescape View File

@ -48,8 +48,8 @@ const showModal = ref(false)
}
.model-footer {
margin-top: 8px;
text-align: right;
margin-block-start: 8px;
text-align: end;
}
.modal-button {

2
docs/en/guide/what-is-vitepress.md
Unescape View File

@ -2,7 +2,7 @@
VitePress is a [Static Site Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in [Markdown](https://en.wikipedia.org/wiki/Markdown), applies a theme to it, and generates static HTML pages that can be easily deployed anywhere.
<div class="tip custom-block" style="padding-top: 8px">
<div class="tip custom-block" style="padding-block-start: 8px">
Just want to try it out? Skip to the [Quickstart](./getting-started).

2
docs/es/guide/what-is-vitepress.md
Unescape View File

@ -2,7 +2,7 @@
VitePress es un [Generador de Sitios Estáticos](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) diseñado para construir sitios web rápidos y enfocados en el contenido. En pocas palabras, VitePress toma tu contenido fuente escrito en [Markdown](https://en.wikipedia.org/wiki/Markdown), le aplica un tema y genera páginas HTML estáticas que se pueden desplegar fácilmente en cualquier lugar.
<div class="tip custom-block" style="padding-top: 8px">
<div class="tip custom-block" style="padding-block-start: 8px">
¿Quieres probarlo? Ve directo al [Inicio Rápido](./getting-started).

2
docs/fa/guide/what-is-vitepress.md
Unescape View File

@ -2,7 +2,7 @@
ویت‌پرس یک [تولید کننده سایت ایستا](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML ایستا تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند.
<div class="tip custom-block" style="padding-top: 8px">
<div class="tip custom-block" style="padding-block-start: 8px">
فقط می‌خواهید آن را امتحان کنید؟ به [شروع سریع](./getting-started) بروید.

2
docs/ja/guide/what-is-vitepress.md
Unescape View File

@ -2,7 +2,7 @@
VitePress は、高速でコンテンツ中心の Web サイトを構築するための [静的サイトジェネレーター（SSG）](https://en.wikipedia.org/wiki/Static_site_generator) です。要するに、VitePress は [Markdown](https://en.wikipedia.org/wiki/Markdown) で書かれたソースコンテンツにテーマを適用し、どこにでも簡単にデプロイできる静的 HTML ページを生成します。
<div class="tip custom-block" style="padding-top: 8px">
<div class="tip custom-block" style="padding-block-start: 8px">
まずは試してみたい？ [クイックスタート](./getting-started) へどうぞ。

2
docs/ko/guide/what-is-vitepress.md
Unescape View File

@ -2,7 +2,7 @@
VitePress는 빠르고 컨텐츠 중심의 웹사이트를 구축하기 위해 설계된 [정적 사이트 생성기](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)입니다. 다시말해 VitePress는 [마크다운](https://en.wikipedia.org/wiki/Markdown)으로 작성된 소스 컨텐츠를 가져와서 테마를 적용하고, 어디에나 쉽게 배포할 수 있는 정적 HTML 페이지를 생성합니다.
<div class="tip custom-block" style="padding-top: 8px">
<div class="tip custom-block" style="padding-block-start: 8px">
그냥 한번 사용해보고 싶으신가요? [빠른 시작](./getting-started)으로 건너뛰세요.

2
docs/pt/guide/what-is-vitepress.md
Unescape View File

@ -2,7 +2,7 @@
O VitePress é um [Gerador de Site Estático](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) projetado para criar sites rápidos e centrados em conteúdo. Em suma, VitePress utiliza seu conteúdo-fonte escrito em [Markdown](https://en.wikipedia.org/wiki/Markdown), aplica um tema a ele e gera páginas HTML estáticas que podem ser facilmente implantadas em qualquer lugar.
<div class="tip custom-block" style="padding-top: 8px">
<div class="tip custom-block" style="padding-block-start: 8px">
Quer apenas experimentar? Pule para o [Início Rápido](./getting-started).

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

@ -50,8 +50,8 @@ const showModal = ref(false)
}
.model-footer {
margin-top: 8px;
text-align: right;
margin-block-start: 8px;
text-align: end;
}
.modal-button {

2
docs/ru/guide/what-is-vitepress.md
Unescape View File

@ -2,7 +2,7 @@
VitePress — это [Генератор статических сайтов](https://ru.wikipedia.org/wiki/%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B_%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85_%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2) (ГСС), предназначенный для быстрого создания сайтов, ориентированных на контент. В двух словах, VitePress берёт ваш исходный контент, написанный на [Markdown](https://ru.wikipedia.org/wiki/Markdown), применяет к нему тему и генерирует статические HTML-страницы, которые можно легко развернуть в любом месте.
<div class="tip custom-block" style="padding-top: 8px">
<div class="tip custom-block" style="padding-block-start: 8px">
Хотите попробовать прямо сейчас? Перейдите к главе [Первые шаги](./getting-started).

2
docs/zh/guide/what-is-vitepress.md
Unescape View File

@ -2,7 +2,7 @@
VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
<div class="tip custom-block" style="padding-top: 8px">
<div class="tip custom-block" style="padding-block-start: 8px">
只是想尝试一下？跳到[快速开始](./getting-started)。

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

@ -50,7 +50,7 @@ const { currentLang } = useLangs()
}
.title {
padding-top: 12px;
padding-block-start: 12px;
letter-spacing: 2px;
line-height: 20px;
font-size: 20px;
@ -73,7 +73,7 @@ const { currentLang } = useLangs()
}
.action {
padding-top: 20px;
padding-block-start: 20px;
}
.link {

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

@ -13,12 +13,7 @@ defineProps<{
<style scoped>
.VPBackdrop {
position: fixed;
top: 0;
/*rtl:ignore*/
right: 0;
bottom: 0;
/*rtl:ignore*/
left: 0;
inset: 0;
z-index: var(--vp-z-index-backdrop);
background: var(--vp-backdrop-bg-color);
transition: opacity 0.5s;

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

@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
<style>
.VPBadge {
display: inline-block;
margin-left: 2px;
margin-inline-start: 2px;
border: 1px solid transparent;
border-radius: 12px;
padding: 0 10px;
@ -40,12 +40,12 @@ withDefaults(defineProps<Props>(), {
}
.vp-doc h1 > .VPBadge {
margin-top: 4px;
margin-block-start: 4px;
vertical-align: top;
}
.vp-doc h2 > .VPBadge {
margin-top: 3px;
margin-block-start: 3px;
padding: 0 8px;
vertical-align: top;
}

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

@ -76,7 +76,7 @@ if (carbonOptions) {
.VPCarbonAds :deep(.carbon-text) {
display: block;
margin: 0 auto;
padding-top: 12px;
padding-block-start: 12px;
color: var(--vp-carbon-ads-text-color);
transition: color 0.25s;
}
@ -87,7 +87,7 @@ if (carbonOptions) {
.VPCarbonAds :deep(.carbon-poweredby) {
display: block;
padding-top: 6px;
padding-block-start: 6px;
font-size: 11px;
font-weight: 500;
color: var(--vp-carbon-ads-poweredby-color);

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

@ -77,19 +77,19 @@ const { isHome, hasSidebar } = useLayout()
@media (min-width: 960px) {
.VPContent {
padding-top: var(--vp-nav-height);
padding-block-start: var(--vp-nav-height);
}
.VPContent.has-sidebar {
margin: var(--vp-layout-top-height, 0px) 0 0;
padding-left: var(--vp-sidebar-width);
padding-inline-start: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.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));
padding-inline-end: calc((100% - var(--vp-layout-max-width)) / 2);
padding-inline-start: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}
</style>

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

@ -121,21 +121,21 @@ const pageName = computed(() =>
display: none;
order: 2;
flex-grow: 1;
padding-left: 32px;
padding-inline-start: 32px;
width: 100%;
max-width: 256px;
}
.left-aside {
order: 1;
padding-left: unset;
padding-right: 32px;
padding-inline-start: unset;
padding-inline-end: 32px;
}
.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);
padding-block-start: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
width: 224px;
height: 100vh;
overflow-x: hidden;
@ -161,7 +161,7 @@ const pageName = computed(() =>
display: flex;
flex-direction: column;
min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
padding-bottom: 32px;
padding-block-end: 32px;
}
.content {

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-block-start: 24px;
}
.VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
margin-top: 16px;
margin-block-start: 16px;
}
</style>

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

@ -50,8 +50,8 @@ useActiveAnchor(container, marker)
.content {
position: relative;
border-left: 1px solid var(--vp-c-divider);
padding-left: 16px;
border-inline-start: 1px solid var(--vp-c-divider);
padding-inline-start: 16px;
font-size: 13px;
font-weight: 500;
}

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

@ -80,11 +80,11 @@ const showFooter = computed(
<style scoped>
.VPDocFooter {
margin-top: 64px;
margin-block-start: 64px;
}
.edit-info {
padding-bottom: 18px;
padding-block-end: 18px;
}
@media (min-width: 640px) {
@ -92,7 +92,7 @@ const showFooter = computed(
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
padding-block-end: 14px;
}
}
@ -112,12 +112,12 @@ const showFooter = computed(
}
.edit-link-icon {
margin-right: 8px;
margin-inline-end: 8px;
}
.prev-next {
border-top: 1px solid var(--vp-c-divider);
padding-top: 24px;
border-block-start: 1px solid var(--vp-c-divider);
padding-block-start: 24px;
display: grid;
grid-row-gap: 8px;
}
@ -144,8 +144,8 @@ const showFooter = computed(
}
.pager-link.next {
margin-left: auto;
text-align: right;
margin-inline-start: auto;
text-align: end;
}
.desc {

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

@ -27,8 +27,8 @@ defineProps<{
}
.nested {
padding-right: 16px;
padding-left: 16px;
padding-inline-end: 16px;
padding-inline-start: 16px;
}
.outline-link {
@ -50,6 +50,6 @@ defineProps<{
}
.outline-link.nested {
padding-left: 13px;
padding-inline-start: 13px;
}
</style>

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

@ -74,14 +74,14 @@ defineProps<{
}
.box > :deep(.VPImage) {
margin-bottom: 20px;
margin-block-end: 20px;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
margin-block-end: 20px;
border-radius: 6px;
background-color: var(--vp-c-default-soft);
width: 48px;
@ -98,7 +98,7 @@ defineProps<{
.details {
flex-grow: 1;
padding-top: 8px;
padding-block-start: 8px;
line-height: 24px;
font-size: 14px;
font-weight: 500;
@ -106,7 +106,7 @@ defineProps<{
}
.link-text {
padding-top: 8px;
padding-block-start: 8px;
}
.link-text-value {
@ -118,6 +118,6 @@ defineProps<{
}
.link-text-icon {
margin-left: 6px;
margin-inline-start: 6px;
}
</style>

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

@ -112,12 +112,12 @@ function onBlur() {
}
.option-icon {
margin-right: 0px;
margin-inline-end: 0px;
font-size: 16px;
}
.text-icon {
margin-left: 4px;
margin-inline-start: 4px;
font-size: 14px;
}

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

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

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

@ -68,7 +68,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
<style scoped>
.VPHero {
margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
margin-block-start: 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;
}
@ -111,7 +111,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
@media (min-width: 960px) {
.VPHero.has-image .container {
text-align: left;
text-align: start;
}
}
@ -181,7 +181,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
}
.tagline {
padding-top: 8px;
padding-block-start: 8px;
max-width: 392px;
line-height: 28px;
font-size: 18px;
@ -196,7 +196,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
@media (min-width: 640px) {
.tagline {
padding-top: 12px;
padding-block-start: 12px;
max-width: 576px;
line-height: 32px;
font-size: 20px;
@ -218,7 +218,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
display: flex;
flex-wrap: wrap;
margin: -6px;
padding-top: 24px;
padding-block-start: 24px;
}
.VPHero.has-image .actions {
@ -227,7 +227,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
@media (min-width: 640px) {
.actions {
padding-top: 32px;
padding-block-start: 32px;
}
}

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

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

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

@ -39,12 +39,12 @@ const { width: vw } = useWindowSize({
.vp-doc :deep(.VPHomeSponsors),
.vp-doc :deep(.VPTeamPage) {
margin-left: var(--vp-offset, calc(50% - 50vw));
margin-right: var(--vp-offset, calc(50% - 50vw));
margin-inline-start: var(--vp-offset, calc(50% - 50vw));
margin-inline-end: var(--vp-offset, calc(50% - 50vw));
}
.vp-doc :deep(.VPHomeSponsors h2) {
border-top: none;
border-block-start: none;
letter-spacing: normal;
}

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

@ -48,8 +48,8 @@ withDefaults(defineProps<Props>(), {
<style scoped>
.VPHomeSponsors {
border-top: 1px solid var(--vp-c-gutter);
padding-top: 88px !important;
border-block-start: 1px solid var(--vp-c-gutter);
padding-block-start: 88px !important;
}
.VPHomeSponsors {
@ -96,7 +96,7 @@ withDefaults(defineProps<Props>(), {
.message {
margin: 0 auto;
padding-top: 10px;
padding-block-start: 10px;
max-width: 320px;
text-align: center;
line-height: 24px;
@ -106,11 +106,11 @@ withDefaults(defineProps<Props>(), {
}
.sponsors {
padding-top: 32px;
padding-block-start: 32px;
}
.action {
padding-top: 40px;
padding-block-start: 40px;
text-align: center;
}
</style>

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

@ -68,8 +68,8 @@ const classes = computed(() => {
/*rtl:ignore*/
left: 0;
z-index: var(--vp-z-index-local-nav);
border-bottom: 1px solid var(--vp-c-gutter);
padding-top: var(--vp-layout-top-height, 0px);
border-block-end: 1px solid var(--vp-c-gutter);
padding-block-start: var(--vp-layout-top-height, 0px);
width: 100%;
background-color: var(--vp-local-nav-bg-color);
}
@ -84,7 +84,7 @@ const classes = computed(() => {
}
.VPLocalNav.has-sidebar {
padding-left: var(--vp-sidebar-width);
padding-inline-start: var(--vp-sidebar-width);
}
.VPLocalNav.empty {
@ -126,7 +126,7 @@ const classes = computed(() => {
}
.menu-icon {
margin-right: 8px;
margin-inline-end: 8px;
font-size: 14px;
}

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

@ -114,10 +114,10 @@ function scrollToTop() {
.icon {
display: inline-block;
vertical-align: middle;
margin-left: 2px;
margin-inline-start: 2px;
font-size: 14px;
transform: rotate(0) /*rtl:rotate(180deg)*/;
transition: transform 0.25s;
scale: calc(1 * var(--vp-direction-multiplier)) 1; /* Flip in RTL */
transition: scale 0.25s;
}
@media (min-width: 960px) {
@ -131,15 +131,13 @@ function scrollToTop() {
}
.open > .icon {
/*rtl:ignore*/
transform: rotate(90deg);
transform: rotate(calc(90deg * var(--vp-direction-multiplier)));
}
.items {
position: absolute;
top: 40px;
right: 16px;
left: 16px;
inset-inline: 16px;
display: grid;
gap: 1px;
border: 1px solid var(--vp-c-border);

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

@ -812,7 +812,7 @@ function onMouseMove(e: MouseEvent) {
max-height: 140px;
overflow: hidden;
position: relative;
margin-top: 4px;
margin-block-start: 4px;
}
.result.selected .excerpt {

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

@ -45,16 +45,16 @@ defineProps<{
}
.VPMenu :deep(.group + .group) {
border-top: 1px solid var(--vp-c-divider);
border-block-start: 1px solid var(--vp-c-divider);
padding: 11px 12px 12px;
}
.VPMenu :deep(.group:last-child) {
padding-bottom: 0;
padding-block-end: 0;
}
.VPMenu :deep(.group + .item) {
border-top: 1px solid var(--vp-c-divider);
border-block-start: 1px solid var(--vp-c-divider);
padding: 11px 16px 0;
}
@ -73,6 +73,6 @@ defineProps<{
}
.VPMenu :deep(.action) {
padding-left: 24px;
padding-inline-start: 24px;
}
</style>

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

@ -21,19 +21,19 @@ defineProps<{
<style scoped>
.VPMenuGroup {
margin: 12px -12px 0;
border-top: 1px solid var(--vp-c-divider);
border-block-start: 1px solid var(--vp-c-divider);
padding: 12px 12px 0;
}
.VPMenuGroup:first-child {
margin-top: 0;
border-top: 0;
padding-top: 0;
margin-block-start: 0;
border-block-start: 0;
padding-block-start: 0;
}
.VPMenuGroup + .VPMenuGroup {
margin-top: 12px;
border-top: 1px solid var(--vp-c-divider);
margin-block-start: 12px;
border-block-start: 1px solid var(--vp-c-divider);
}
.title {

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

@ -44,7 +44,7 @@ defineOptions({ inheritAttrs: false })
<style scoped>
.VPMenuGroup + .VPMenuLink {
margin: 12px -12px 0;
border-top: 1px solid var(--vp-c-divider);
border-block-start: 1px solid var(--vp-c-divider);
padding: 12px 12px 0;
}
@ -56,7 +56,7 @@ defineOptions({ inheritAttrs: false })
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-1);
text-align: left;
text-align: start;
white-space: nowrap;
transition:
background-color 0.25s,

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

@ -79,7 +79,7 @@ watchPostEffect(() => {
.VPNavBar.screen-open {
transition: none;
background-color: var(--vp-nav-bg-color);
border-bottom: 1px solid var(--vp-c-divider);
border-block-end: 1px solid var(--vp-c-divider);
}
.VPNavBar:not(.home) {
@ -157,7 +157,7 @@ watchPostEffect(() => {
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .title {
padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
padding-inline-start: 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);
}
}
@ -170,15 +170,15 @@ watchPostEffect(() => {
.VPNavBar.has-sidebar .content {
position: relative;
z-index: 1;
padding-left: var(--vp-sidebar-width);
padding-right: 32px;
padding-inline-start: var(--vp-sidebar-width);
padding-inline-end: 32px;
}
}
@media (min-width: 1440px) {
.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-inline-start: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
padding-inline-end: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
}
}
@ -187,8 +187,8 @@ watchPostEffect(() => {
justify-content: flex-end;
align-items: center;
height: var(--vp-nav-height);
margin-right: -100vw;
padding-right: 100vw;
margin-inline-end: -100vw;
padding-inline-end: 100vw;
transition: background-color 0.5s;
}
@ -214,8 +214,8 @@ watchPostEffect(() => {
.menu + .social-links::before,
.translations + .appearance::before,
.appearance + .social-links::before {
margin-right: 8px;
margin-left: 8px;
margin-inline-end: 8px;
margin-inline-start: 8px;
width: 1px;
height: 24px;
background-color: var(--vp-c-divider);
@ -224,15 +224,15 @@ watchPostEffect(() => {
.menu + .appearance::before,
.translations + .appearance::before {
margin-right: 16px;
margin-inline-end: 16px;
}
.appearance + .social-links::before {
margin-left: 16px;
margin-inline-start: 16px;
}
.social-links {
margin-right: -8px;
margin-inline-end: -8px;
}
.divider {
@ -242,13 +242,13 @@ watchPostEffect(() => {
@media (min-width: 960px) {
.VPNavBar.has-sidebar .divider {
padding-left: var(--vp-sidebar-width);
padding-inline-start: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .divider {
padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
padding-inline-start: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}

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

@ -64,7 +64,7 @@ const hasExtraContent = computed(
<style scoped>
.VPNavBarExtra {
display: none;
margin-right: -12px;
margin-inline-end: -12px;
}
@media (min-width: 768px) {
@ -99,7 +99,7 @@ const hasExtraContent = computed(
}
.appearance-action {
margin-right: -2px;
margin-inline-end: -2px;
}
.social-links-list {

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

@ -160,13 +160,13 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
@media (min-width: 768px) {
.VPNavBarSearch {
flex-grow: 1;
padding-left: 24px;
padding-inline-start: 24px;
}
}
@media (min-width: 960px) {
.VPNavBarSearch {
padding-left: 32px;
padding-inline-start: 32px;
}
}
</style>

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

@ -50,7 +50,7 @@ const target = computed(() =>
.title {
display: flex;
align-items: center;
border-bottom: 1px solid transparent;
border-block-end: 1px solid transparent;
width: 100%;
height: var(--vp-nav-height);
font-size: 16px;
@ -70,7 +70,7 @@ const target = computed(() =>
}
:deep(.logo) {
margin-right: 8px;
margin-inline-end: 8px;
height: var(--vp-nav-logo-height);
}
</style>

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

@ -37,12 +37,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
<style scoped>
.VPNavScreen {
position: fixed;
top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
/*rtl:ignore*/
right: 0;
bottom: 0;
/*rtl:ignore*/
left: 0;
inset: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) 0 0;
padding: 0 32px;
width: 100%;
background-color: var(--vp-nav-screen-bg-color);
@ -86,14 +81,14 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
.menu + .translations,
.menu + .appearance,
.translations + .appearance {
margin-top: 24px;
margin-block-start: 24px;
}
.menu + .social-links {
margin-top: 16px;
margin-block-start: 16px;
}
.appearance + .social-links {
margin-top: 16px;
margin-block-start: 16px;
}
</style>

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

@ -51,7 +51,7 @@ function toggle() {
<style scoped>
.VPNavScreenMenuGroup {
border-bottom: 1px solid var(--vp-c-divider);
border-block-end: 1px solid var(--vp-c-divider);
height: 48px;
overflow: hidden;
transition: border-color 0.5s;
@ -66,18 +66,17 @@ function toggle() {
}
.VPNavScreenMenuGroup.open {
padding-bottom: 10px;
padding-block-end: 10px;
height: auto;
}
.VPNavScreenMenuGroup.open .button {
padding-bottom: 6px;
padding-block-end: 6px;
color: var(--vp-c-brand-1);
}
.VPNavScreenMenuGroup.open .button-icon {
/*rtl:ignore*/
transform: rotate(45deg);
transform: rotate(calc(45deg * var(--vp-direction-multiplier)));
}
.button {
@ -102,11 +101,11 @@ function toggle() {
}
.group:first-child {
padding-top: 0px;
padding-block-start: 0px;
}
.group + .group,
.group + .item {
padding-top: 4px;
padding-block-start: 4px;
}
</style>

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

@ -36,7 +36,7 @@ const { closeScreen } = inject(navInjectionKey)!
<style scoped>
.VPNavScreenMenuGroupLink {
display: block;
margin-left: 12px;
margin-inline-start: 12px;
line-height: 32px;
font-size: 14px;
font-weight: 400;

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

@ -36,7 +36,7 @@ const { closeScreen } = inject(navInjectionKey)!
<style scoped>
.VPNavScreenMenuLink {
display: block;
border-bottom: 1px solid var(--vp-c-divider);
border-block-end: 1px solid var(--vp-c-divider);
padding: 12px 0 11px;
line-height: 24px;
font-size: 14px;

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

@ -61,11 +61,11 @@ function toggle() {
}
.icon.lang {
margin-right: 8px;
margin-inline-end: 8px;
}
.icon.chevron {
margin-left: 4px;
margin-inline-start: 4px;
}
.list {

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

@ -98,7 +98,7 @@ watch(
@media (min-width: 960px) {
.VPSidebar {
padding-top: var(--vp-nav-height);
padding-block-start: var(--vp-nav-height);
width: var(--vp-sidebar-width);
max-width: 100%;
background-color: var(--vp-sidebar-bg-color);
@ -111,7 +111,7 @@ watch(
@media (min-width: 1440px) {
.VPSidebar {
padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
padding-inline-start: 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);
}
}
@ -122,9 +122,9 @@ watch(
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-block-start: calc(var(--vp-nav-height) * -1);
margin-inline-end: -32px;
margin-inline-start: -32px;
height: var(--vp-nav-height);
background-color: var(--vp-sidebar-bg-color);
}

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

@ -43,13 +43,13 @@ onBeforeUnmount(() => {
}
.group + .group {
border-top: 1px solid var(--vp-c-divider);
padding-top: 10px;
border-block-start: 1px solid var(--vp-c-divider);
padding-block-start: 10px;
}
@media (min-width: 960px) {
.group {
padding-top: 10px;
padding-block-start: 10px;
width: calc(var(--vp-sidebar-width) - 64px);
}
}

13
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-block-end: 24px;
}
.VPSidebarItem.collapsed.level-0 {
padding-bottom: 10px;
padding-block-end: 10px;
}
.item {
@ -208,7 +208,7 @@ function onCaretClick() {
display: flex;
justify-content: center;
align-items: center;
margin-right: -7px;
margin-inline-end: -7px;
width: 32px;
height: 32px;
color: var(--vp-c-text-3);
@ -227,8 +227,7 @@ function onCaretClick() {
.caret-icon {
font-size: 18px;
/*rtl:ignore*/
transform: rotate(90deg);
transform: rotate(calc(90deg * var(--vp-direction-multiplier)));
transition: transform 0.25s;
}
@ -241,8 +240,8 @@ function onCaretClick() {
.VPSidebarItem.level-3 .items,
.VPSidebarItem.level-4 .items,
.VPSidebarItem.level-5 .items {
border-left: 1px solid var(--vp-c-divider);
padding-left: 16px;
border-inline-start: 1px solid var(--vp-c-divider);
padding-inline-start: 16px;
}
.VPSidebarItem.collapsed .items {

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

@ -68,7 +68,7 @@ withDefaults(defineProps<Props>(), {
}
.VPTeamMembersItem.small .data {
padding-top: 20px;
padding-block-start: 20px;
}
.VPTeamMembersItem.small .avatar {
@ -82,13 +82,13 @@ withDefaults(defineProps<Props>(), {
}
.VPTeamMembersItem.small .affiliation {
padding-top: 4px;
padding-block-start: 4px;
line-height: 20px;
font-size: 14px;
}
.VPTeamMembersItem.small .desc {
padding-top: 12px;
padding-block-start: 12px;
line-height: 20px;
font-size: 14px;
}
@ -103,7 +103,7 @@ withDefaults(defineProps<Props>(), {
}
.VPTeamMembersItem.medium .data {
padding-top: 24px;
padding-block-start: 24px;
text-align: center;
}
@ -119,12 +119,12 @@ withDefaults(defineProps<Props>(), {
}
.VPTeamMembersItem.medium .affiliation {
padding-top: 4px;
padding-block-start: 4px;
font-size: 16px;
}
.VPTeamMembersItem.medium .desc {
padding-top: 16px;
padding-block-start: 16px;
max-width: 288px;
font-size: 16px;
}
@ -153,10 +153,7 @@ withDefaults(defineProps<Props>(), {
.avatar-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
border-radius: 50%;
object-fit: cover;
}
@ -219,7 +216,7 @@ withDefaults(defineProps<Props>(), {
}
.sp-icon {
margin-right: 8px;
margin-inline-end: 8px;
font-size: 16px;
}
</style>

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

@ -16,27 +16,27 @@
}
.VPHome :slotted(.VPTeamPageTitle) {
border-top: 1px solid var(--vp-c-gutter);
padding-top: 88px !important;
border-block-start: 1px solid var(--vp-c-gutter);
padding-block-start: 88px !important;
}
:slotted(.VPTeamPageSection + .VPTeamPageSection),
:slotted(.VPTeamMembers + .VPTeamPageSection) {
margin-top: 64px;
margin-block-start: 64px;
}
:slotted(.VPTeamMembers + .VPTeamMembers) {
margin-top: 24px;
margin-block-start: 24px;
}
@media (min-width: 768px) {
:slotted(.VPTeamPageTitle + .VPTeamPageSection) {
margin-top: 16px;
margin-block-start: 16px;
}
:slotted(.VPTeamPageSection + .VPTeamPageSection),
:slotted(.VPTeamMembers + .VPTeamPageSection) {
margin-top: 96px;
margin-block-start: 96px;
}
}

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

@ -63,7 +63,7 @@
.lead {
margin: 0 auto;
max-width: 480px;
padding-top: 12px;
padding-block-start: 12px;
text-align: center;
line-height: 24px;
font-size: 16px;
@ -72,6 +72,6 @@
}
.members {
padding-top: 40px;
padding-block-start: 40px;
}
</style>

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

@ -45,7 +45,7 @@
.lead {
margin: 0 auto;
max-width: 512px;
padding-top: 12px;
padding-block-start: 12px;
line-height: 24px;
font-size: 16px;
font-weight: 500;

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

@ -249,3 +249,11 @@ mjx-container > svg {
display: inline-block;
margin: auto;
}
:root {
--vp-direction-multiplier: 1; /* 1 for LTR, -1 for RTL */
}
[dir='rtl'] {
--vp-direction-multiplier: -1;
}

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

@ -1,12 +1,11 @@
.vp-code-group {
margin-top: 16px;
margin-block-start: 16px;
}
.vp-code-group .tabs {
position: relative;
display: flex;
margin-right: -24px;
margin-left: -24px;
margin-inline: -24px;
padding: 0 12px;
background-color: var(--vp-code-tab-bg);
overflow-x: auto;
@ -16,8 +15,7 @@
@media (min-width: 640px) {
.vp-code-group .tabs {
margin-right: 0;
margin-left: 0;
margin-inline: 0;
border-radius: 8px 8px 0 0;
}
}
@ -31,7 +29,7 @@
.vp-code-group .tabs label {
position: relative;
display: inline-block;
border-bottom: 1px solid transparent;
border-block-end: 1px solid transparent;
padding: 0 12px;
line-height: 48px;
font-size: 14px;
@ -70,9 +68,9 @@
.vp-code-group div[class*='language-'],
.vp-block {
display: none;
margin-top: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
margin-block-start: 0 !important;
border-start-start-radius: 0 !important;
border-start-end-radius: 0 !important;
}
.vp-code-group div[class*='language-'].active,

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

@ -21,8 +21,8 @@
.vp-doc h2 {
margin: 48px 0 16px;
border-top: 1px solid var(--vp-c-divider);
padding-top: 24px;
border-block-start: 1px solid var(--vp-c-divider);
padding-block-start: 24px;
letter-spacing: -0.02em;
line-height: 32px;
font-size: 24px;
@ -46,7 +46,7 @@
position: absolute;
top: 0;
left: 0;
margin-left: -0.87em;
margin-inline-start: -0.87em;
font-weight: 500;
user-select: none;
opacity: 0;
@ -102,8 +102,8 @@
.vp-doc blockquote {
margin: 16px 0;
border-left: 2px solid var(--vp-c-divider);
padding-left: 16px;
border-inline-start: 2px solid var(--vp-c-divider);
padding-inline-start: 16px;
transition: border-color 0.5s;
color: var(--vp-c-text-2);
}
@ -138,7 +138,7 @@
.vp-doc ul,
.vp-doc ol {
padding-left: 1.25rem;
padding-inline-start: 1.25rem;
margin: 16px 0;
}
@ -151,7 +151,7 @@
}
.vp-doc li + li {
margin-top: 8px;
margin-block-start: 8px;
}
.vp-doc li > ol,
@ -172,7 +172,7 @@
.vp-doc tr {
background-color: var(--vp-c-bg);
border-top: 1px solid var(--vp-c-divider);
border-block-start: 1px solid var(--vp-c-divider);
transition: background-color 0.5s;
}
@ -187,7 +187,7 @@
}
.vp-doc th {
text-align: left;
text-align: start;
font-size: 14px;
font-weight: 600;
color: var(--vp-c-text-2);
@ -205,7 +205,7 @@
.vp-doc hr {
margin: 16px 0;
border: none;
border-top: 1px solid var(--vp-c-divider);
border-block-start: 1px solid var(--vp-c-divider);
}
/**
@ -300,7 +300,7 @@
.vp-doc div[class*='language-'] + div[class*='language-'],
.vp-doc div[class$='-api'] + div[class*='language-'],
.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
margin-top: -8px;
margin-block-start: -8px;
}
.vp-doc [class*='language-'] pre,
@ -318,7 +318,7 @@
background: transparent;
overflow-x: auto;
/*rtl:ignore*/
text-align: left;
text-align: start;
}
.vp-doc [class*='language-'] code {
@ -402,8 +402,7 @@
}
.vp-doc div[class*='language-'].line-numbers-mode {
/*rtl:ignore*/
padding-left: 32px;
padding-inline-start: 32px;
}
.vp-doc .line-numbers-wrapper {
@ -413,9 +412,8 @@
/*rtl:ignore*/
left: 0;
z-index: 3;
/*rtl:ignore*/
border-right: 1px solid var(--vp-code-block-divider-color);
padding-top: 20px;
border-inline-end: 1px solid var(--vp-code-block-divider-color);
padding-block-start: 20px;
width: 32px;
text-align: center;
font-family: var(--vp-font-family-mono);
@ -481,8 +479,7 @@
justify-content: center;
align-items: center;
border: 1px solid var(--vp-code-copy-code-hover-border-color);
/*rtl:ignore*/
border-right: 0;
border-inline-end: 0;
/*rtl:ignore*/
border-radius: 4px 0 0 4px;
padding: 0 10px;
@ -522,7 +519,7 @@
* -------------------------------------------------------------------------- */
.vp-doc .VPTeamMembers {
margin-top: 24px;
margin-block-start: 24px;
}
.vp-doc .VPTeamMembers.small.count-1 .container {
@ -547,8 +544,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-block;
margin-top: -1px;
margin-left: 4px;
margin-block-start: -1px;
margin-inline-start: 4px;
width: 11px;
height: 11px;
background: currentColor;

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

@ -12,7 +12,7 @@
}
.vp-sponsor-section + .vp-sponsor-section {
margin-top: 4px;
margin-block-start: 4px;
}
.vp-sponsor-tier {
@ -37,7 +37,7 @@
}
.vp-sponsor-grid + .vp-sponsor-tier {
margin-top: 4px;
margin-block-start: 4px;
}
.vp-sponsor-grid {

Write Preview
Loading…
Cancel
Save