From 30f0e2735f828d7e5f7883ab9618d1aebd98de40 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Tue, 18 Nov 2025 11:39:34 +0200 Subject: [PATCH] feat(theme): use native CSS for RTL instead of using `rtlcss` package --- .../node/markdown/plugins/snippet.test.ts | 6 +-- docs/components/ModalDemo.vue | 4 +- docs/en/guide/what-is-vitepress.md | 2 +- docs/es/guide/what-is-vitepress.md | 2 +- docs/fa/guide/what-is-vitepress.md | 2 +- docs/ja/guide/what-is-vitepress.md | 2 +- docs/ko/guide/what-is-vitepress.md | 2 +- docs/pt/guide/what-is-vitepress.md | 2 +- docs/ru/components/ModalDemo.vue | 4 +- docs/ru/guide/what-is-vitepress.md | 2 +- docs/zh/guide/what-is-vitepress.md | 2 +- src/client/theme-default/NotFound.vue | 4 +- .../theme-default/components/VPBackdrop.vue | 7 +--- .../theme-default/components/VPBadge.vue | 6 +-- .../theme-default/components/VPCarbonAds.vue | 4 +- .../theme-default/components/VPContent.vue | 8 ++-- src/client/theme-default/components/VPDoc.vue | 10 ++--- .../theme-default/components/VPDocAside.vue | 4 +- .../components/VPDocAsideOutline.vue | 4 +- .../theme-default/components/VPDocFooter.vue | 16 ++++---- .../components/VPDocOutlineItem.vue | 6 +-- .../theme-default/components/VPFeature.vue | 10 ++--- .../theme-default/components/VPFlyout.vue | 4 +- .../theme-default/components/VPFooter.vue | 2 +- .../theme-default/components/VPHero.vue | 12 +++--- .../theme-default/components/VPHome.vue | 4 +- .../components/VPHomeContent.vue | 6 +-- .../components/VPHomeSponsors.vue | 10 ++--- .../theme-default/components/VPLocalNav.vue | 8 ++-- .../components/VPLocalNavOutlineDropdown.vue | 12 +++--- .../components/VPLocalSearchBox.vue | 2 +- .../theme-default/components/VPMenu.vue | 8 ++-- .../theme-default/components/VPMenuGroup.vue | 12 +++--- .../theme-default/components/VPMenuLink.vue | 4 +- .../theme-default/components/VPNavBar.vue | 30 +++++++------- .../components/VPNavBarExtra.vue | 4 +- .../components/VPNavBarSearch.vue | 4 +- .../components/VPNavBarTitle.vue | 4 +- .../theme-default/components/VPNavScreen.vue | 13 ++---- .../components/VPNavScreenMenuGroup.vue | 13 +++--- .../components/VPNavScreenMenuGroupLink.vue | 2 +- .../components/VPNavScreenMenuLink.vue | 2 +- .../components/VPNavScreenTranslations.vue | 4 +- .../theme-default/components/VPSidebar.vue | 10 ++--- .../components/VPSidebarGroup.vue | 6 +-- .../components/VPSidebarItem.vue | 13 +++--- .../components/VPTeamMembersItem.vue | 19 ++++----- .../theme-default/components/VPTeamPage.vue | 12 +++--- .../components/VPTeamPageSection.vue | 4 +- .../components/VPTeamPageTitle.vue | 2 +- src/client/theme-default/styles/base.css | 8 ++++ .../styles/components/vp-code-group.css | 16 ++++---- .../styles/components/vp-doc.css | 41 +++++++++---------- .../styles/components/vp-sponsor.css | 4 +- 54 files changed, 195 insertions(+), 209 deletions(-) diff --git a/__tests__/unit/node/markdown/plugins/snippet.test.ts b/__tests__/unit/node/markdown/plugins/snippet.test.ts index aa940784a..f0704fe80 100644 --- a/__tests__/unit/node/markdown/plugins/snippet.test.ts +++ b/__tests__/unit/node/markdown/plugins/snippet.test.ts @@ -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;' ) } }) diff --git a/docs/components/ModalDemo.vue b/docs/components/ModalDemo.vue index 93dbab8f6..13fbf57d7 100644 --- a/docs/components/ModalDemo.vue +++ b/docs/components/ModalDemo.vue @@ -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 { diff --git a/docs/en/guide/what-is-vitepress.md b/docs/en/guide/what-is-vitepress.md index 0a5d76f89..a6bc59a00 100644 --- a/docs/en/guide/what-is-vitepress.md +++ b/docs/en/guide/what-is-vitepress.md @@ -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. -
+
Just want to try it out? Skip to the [Quickstart](./getting-started). diff --git a/docs/es/guide/what-is-vitepress.md b/docs/es/guide/what-is-vitepress.md index 1c38d02ca..4a90ba8c2 100644 --- a/docs/es/guide/what-is-vitepress.md +++ b/docs/es/guide/what-is-vitepress.md @@ -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. -
+
¿Quieres probarlo? Ve directo al [Inicio Rápido](./getting-started). diff --git a/docs/fa/guide/what-is-vitepress.md b/docs/fa/guide/what-is-vitepress.md index 4fb560090..5dd931b67 100644 --- a/docs/fa/guide/what-is-vitepress.md +++ b/docs/fa/guide/what-is-vitepress.md @@ -2,7 +2,7 @@ ویت‌پرس یک [تولید کننده سایت ایستا](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML ایستا تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند. -
+
فقط می‌خواهید آن را امتحان کنید؟ به [شروع سریع](./getting-started) بروید. diff --git a/docs/ja/guide/what-is-vitepress.md b/docs/ja/guide/what-is-vitepress.md index 75d433286..8a1a1b711 100644 --- a/docs/ja/guide/what-is-vitepress.md +++ b/docs/ja/guide/what-is-vitepress.md @@ -2,7 +2,7 @@ VitePress は、高速でコンテンツ中心の Web サイトを構築するための [静的サイトジェネレーター（SSG）](https://en.wikipedia.org/wiki/Static_site_generator) です。要するに、VitePress は [Markdown](https://en.wikipedia.org/wiki/Markdown) で書かれたソースコンテンツにテーマを適用し、どこにでも簡単にデプロイできる静的 HTML ページを生成します。 -
+
まずは試してみたい？ [クイックスタート](./getting-started) へどうぞ。 diff --git a/docs/ko/guide/what-is-vitepress.md b/docs/ko/guide/what-is-vitepress.md index d6c7d6307..77c27cc8a 100644 --- a/docs/ko/guide/what-is-vitepress.md +++ b/docs/ko/guide/what-is-vitepress.md @@ -2,7 +2,7 @@ VitePress는 빠르고 컨텐츠 중심의 웹사이트를 구축하기 위해 설계된 [정적 사이트 생성기](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)입니다. 다시말해 VitePress는 [마크다운](https://en.wikipedia.org/wiki/Markdown)으로 작성된 소스 컨텐츠를 가져와서 테마를 적용하고, 어디에나 쉽게 배포할 수 있는 정적 HTML 페이지를 생성합니다. -
+
그냥 한번 사용해보고 싶으신가요? [빠른 시작](./getting-started)으로 건너뛰세요. diff --git a/docs/pt/guide/what-is-vitepress.md b/docs/pt/guide/what-is-vitepress.md index 2ccd319d0..c3e49230c 100644 --- a/docs/pt/guide/what-is-vitepress.md +++ b/docs/pt/guide/what-is-vitepress.md @@ -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. -
+
Quer apenas experimentar? Pule para o [Início Rápido](./getting-started). diff --git a/docs/ru/components/ModalDemo.vue b/docs/ru/components/ModalDemo.vue index 85c9dec12..8f7c3ac2e 100644 --- a/docs/ru/components/ModalDemo.vue +++ b/docs/ru/components/ModalDemo.vue @@ -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 { diff --git a/docs/ru/guide/what-is-vitepress.md b/docs/ru/guide/what-is-vitepress.md index 90b07e9e5..52d21b7e0 100644 --- a/docs/ru/guide/what-is-vitepress.md +++ b/docs/ru/guide/what-is-vitepress.md @@ -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-страницы, которые можно легко развернуть в любом месте. -
+
Хотите попробовать прямо сейчас? Перейдите к главе [Первые шаги](./getting-started). diff --git a/docs/zh/guide/what-is-vitepress.md b/docs/zh/guide/what-is-vitepress.md index 4839f49d0..56955e587 100644 --- a/docs/zh/guide/what-is-vitepress.md +++ b/docs/zh/guide/what-is-vitepress.md @@ -2,7 +2,7 @@ VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。 -
+
只是想尝试一下？跳到[快速开始](./getting-started)。 diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue index f65d3a6db..a2dd2ceba 100644 --- a/src/client/theme-default/NotFound.vue +++ b/src/client/theme-default/NotFound.vue @@ -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 { diff --git a/src/client/theme-default/components/VPBackdrop.vue b/src/client/theme-default/components/VPBackdrop.vue index 8b0757d40..e28437a1d 100644 --- a/src/client/theme-default/components/VPBackdrop.vue +++ b/src/client/theme-default/components/VPBackdrop.vue @@ -13,12 +13,7 @@ defineProps<{ diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue index 4ac18bd93..fc9f3b881 100644 --- a/src/client/theme-default/components/VPDoc.vue +++ b/src/client/theme-default/components/VPDoc.vue @@ -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 { diff --git a/src/client/theme-default/components/VPDocAside.vue b/src/client/theme-default/components/VPDocAside.vue index 314e8a4b5..1df2fe1c2 100644 --- a/src/client/theme-default/components/VPDocAside.vue +++ b/src/client/theme-default/components/VPDocAside.vue @@ -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; } diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue index efaadc095..b5ac5db02 100644 --- a/src/client/theme-default/components/VPDocAsideOutline.vue +++ b/src/client/theme-default/components/VPDocAsideOutline.vue @@ -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; } diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue index 0b6ff2a88..1d17846c4 100644 --- a/src/client/theme-default/components/VPDocFooter.vue +++ b/src/client/theme-default/components/VPDocFooter.vue @@ -80,11 +80,11 @@ const showFooter = computed( diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue index ff36fe978..903216848 100644 --- a/src/client/theme-default/components/VPFeature.vue +++ b/src/client/theme-default/components/VPFeature.vue @@ -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; } diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue index c05c579cf..5ca865734 100644 --- a/src/client/theme-default/components/VPFlyout.vue +++ b/src/client/theme-default/components/VPFlyout.vue @@ -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; } diff --git a/src/client/theme-default/components/VPFooter.vue b/src/client/theme-default/components/VPFooter.vue index 636380448..d1f088fd0 100644 --- a/src/client/theme-default/components/VPFooter.vue +++ b/src/client/theme-default/components/VPFooter.vue @@ -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); } diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue index 4e1e2e9b0..06a2204c5 100644 --- a/src/client/theme-default/components/VPHero.vue +++ b/src/client/theme-default/components/VPHero.vue @@ -68,7 +68,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)! diff --git a/src/client/theme-default/components/VPHomeContent.vue b/src/client/theme-default/components/VPHomeContent.vue index 3e0262351..9132ee8de 100644 --- a/src/client/theme-default/components/VPHomeContent.vue +++ b/src/client/theme-default/components/VPHomeContent.vue @@ -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; } diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue index d4eaacd29..04abce7ff 100644 --- a/src/client/theme-default/components/VPHomeSponsors.vue +++ b/src/client/theme-default/components/VPHomeSponsors.vue @@ -48,8 +48,8 @@ withDefaults(defineProps(), { diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue index f80bb3611..8e5930cd4 100644 --- a/src/client/theme-default/components/VPLocalNav.vue +++ b/src/client/theme-default/components/VPLocalNav.vue @@ -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; } diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue index cf842baa3..2dbbd37b2 100644 --- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue +++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue @@ -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); diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue index 825a22b58..57e680d03 100644 --- a/src/client/theme-default/components/VPLocalSearchBox.vue +++ b/src/client/theme-default/components/VPLocalSearchBox.vue @@ -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 { diff --git a/src/client/theme-default/components/VPMenu.vue b/src/client/theme-default/components/VPMenu.vue index 91ebb404d..93c1bed24 100644 --- a/src/client/theme-default/components/VPMenu.vue +++ b/src/client/theme-default/components/VPMenu.vue @@ -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; } diff --git a/src/client/theme-default/components/VPMenuGroup.vue b/src/client/theme-default/components/VPMenuGroup.vue index 7d12eb757..3e4804711 100644 --- a/src/client/theme-default/components/VPMenuGroup.vue +++ b/src/client/theme-default/components/VPMenuGroup.vue @@ -21,19 +21,19 @@ defineProps<{ diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue index 9679f8a5c..75af74f0f 100644 --- a/src/client/theme-default/components/VPNavBarTitle.vue +++ b/src/client/theme-default/components/VPNavBarTitle.vue @@ -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); } diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue index fec143d86..6e89dd1f4 100644 --- a/src/client/theme-default/components/VPNavScreen.vue +++ b/src/client/theme-default/components/VPNavScreen.vue @@ -37,12 +37,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null) diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue index f5d78e663..c518431c3 100644 --- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue +++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue @@ -51,7 +51,7 @@ function toggle() { diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue index 32e97c83b..03c769f6f 100644 --- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue +++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue @@ -36,7 +36,7 @@ const { closeScreen } = inject(navInjectionKey)! diff --git a/src/client/theme-default/components/VPTeamPage.vue b/src/client/theme-default/components/VPTeamPage.vue index 71d9bdb51..408a29b5e 100644 --- a/src/client/theme-default/components/VPTeamPage.vue +++ b/src/client/theme-default/components/VPTeamPage.vue @@ -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; } } diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue index 2bb52ab9a..7ddbbe8ad 100644 --- a/src/client/theme-default/components/VPTeamPageSection.vue +++ b/src/client/theme-default/components/VPTeamPageSection.vue @@ -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; } diff --git a/src/client/theme-default/components/VPTeamPageTitle.vue b/src/client/theme-default/components/VPTeamPageTitle.vue index 9751a1886..84292c41e 100644 --- a/src/client/theme-default/components/VPTeamPageTitle.vue +++ b/src/client/theme-default/components/VPTeamPageTitle.vue @@ -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; diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css index 8041b6bc3..4b443351c 100644 --- a/src/client/theme-default/styles/base.css +++ b/src/client/theme-default/styles/base.css @@ -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; +} diff --git a/src/client/theme-default/styles/components/vp-code-group.css b/src/client/theme-default/styles/components/vp-code-group.css index 4f23a4169..1f313b932 100644 --- a/src/client/theme-default/styles/components/vp-code-group.css +++ b/src/client/theme-default/styles/components/vp-code-group.css @@ -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, diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index abc58243e..59a567ccc 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -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; diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css index 9e677ab9b..aee65d372 100644 --- a/src/client/theme-default/styles/components/vp-sponsor.css +++ b/src/client/theme-default/styles/components/vp-sponsor.css @@ -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 {