From 03fa3a53277ec1cfabb6baa29fc7d7cb1d1cadb6 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Tue, 18 Nov 2025 17:39:03 +0200 Subject: [PATCH] feat(theme): use native CSS for RTL instead of using `rtlcss` package --- .../theme/components/ApiPreference.vue | 3 ++- .../theme-default/components/VPNavBar.vue | 3 ++- .../components/VPNavBarExtra.vue | 3 ++- .../components/VPNavBarTranslations.vue | 3 ++- .../components/VPNavScreenAppearance.vue | 3 ++- .../components/VPNavScreenMenuGroup.vue | 6 ++++-- .../components/VPNavScreenTranslations.vue | 3 ++- .../theme-default/components/VPSidebar.vue | 3 ++- .../styles/components/vp-code-group.css | 5 ++++- .../styles/components/vp-doc.css | 21 ++++++++++++++----- 10 files changed, 38 insertions(+), 15 deletions(-) diff --git a/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue b/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue index 9d634bfa..457eab58 100644 --- a/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue +++ b/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue @@ -58,7 +58,8 @@ function removeSpaces(str: string) { } .VPApiPreference.screen-menu { - margin: 12px 0 0 12px; + margin-block: 12px 0; + margin-inline: 12px 0; } .VPApiPreference input[type='radio'] { diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index 042e6656..e7a13fef 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -97,7 +97,8 @@ watchPostEffect(() => { } .wrapper { - padding: 0 8px 0 24px; + padding-block: 0; + padding-inline: 24px 8px; } @media (min-width: 768px) { diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue index e7e62547..07d696de 100644 --- a/src/client/theme-default/components/VPNavBarExtra.vue +++ b/src/client/theme-default/components/VPNavBarExtra.vue @@ -80,7 +80,8 @@ const hasExtraContent = computed( } .trans-title { - padding: 0 24px 0 12px; + padding-block: 0; + padding-inline: 12px 24px; line-height: 32px; font-size: 14px; font-weight: 700; diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue index 4f61458a..41100c63 100644 --- a/src/client/theme-default/components/VPNavBarTranslations.vue +++ b/src/client/theme-default/components/VPNavBarTranslations.vue @@ -38,7 +38,8 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true }) } .title { - padding: 0 24px 0 12px; + padding-block: 0; + padding-inline: 12px 24px; line-height: 32px; font-size: 14px; font-weight: 700; diff --git a/src/client/theme-default/components/VPNavScreenAppearance.vue b/src/client/theme-default/components/VPNavScreenAppearance.vue index 4f7d2640..eee5ee64 100644 --- a/src/client/theme-default/components/VPNavScreenAppearance.vue +++ b/src/client/theme-default/components/VPNavScreenAppearance.vue @@ -27,7 +27,8 @@ const { site, theme } = useData() justify-content: space-between; align-items: center; border-radius: 8px; - padding: 12px 14px 12px 16px; + padding-block: 12px; + padding-inline: 16px 14px; background-color: var(--vp-c-bg-soft); } diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue index c518431c..0fd27916 100644 --- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue +++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue @@ -76,14 +76,16 @@ function toggle() { } .VPNavScreenMenuGroup.open .button-icon { - transform: rotate(calc(45deg * var(--vp-direction-multiplier))); + /*rtl:ignore*/ + transform: rotate(45deg) } .button { display: flex; justify-content: space-between; align-items: center; - padding: 12px 4px 11px 0; + padding-block: 12px 11px; + padding-inline: 0 4px; width: 100%; line-height: 24px; font-size: 14px; diff --git a/src/client/theme-default/components/VPNavScreenTranslations.vue b/src/client/theme-default/components/VPNavScreenTranslations.vue index eb513a42..178c4e87 100644 --- a/src/client/theme-default/components/VPNavScreenTranslations.vue +++ b/src/client/theme-default/components/VPNavScreenTranslations.vue @@ -69,7 +69,8 @@ function toggle() { } .list { - padding: 4px 0 0 24px; + padding-block: 4px 0; + padding-inline: 24px 0; } .link { diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue index 4d6b3e0f..89316243 100644 --- a/src/client/theme-default/components/VPSidebar.vue +++ b/src/client/theme-default/components/VPSidebar.vue @@ -79,7 +79,8 @@ watch( box-shadow: var(--vp-c-shadow-3); overflow-x: hidden; overflow-y: auto; - transform: translateX(-100%); + /*rtl:ignore*/ + transform: translateX(calc(-100% * var(--vp-direction-multiplier))); transition: opacity 0.5s, transform 0.25s ease; overscroll-behavior: contain; } 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 c1f2af4e..0cc334db 100644 --- a/src/client/theme-default/styles/components/vp-code-group.css +++ b/src/client/theme-default/styles/components/vp-code-group.css @@ -16,7 +16,10 @@ @media (min-width: 640px) { .vp-code-group .tabs { margin-inline: 0; - border-radius: 8px 8px 0 0; + border-start-start-radius: 8px; + border-start-end-radius: 8px; + border-end-end-radius: 0; + border-end-start-radius: 0; } } diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index bec07335..7bd909c8 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -237,7 +237,10 @@ .vp-doc .custom-block .vp-code-group .tabs { margin: 0; - border-radius: 8px 8px 0 0; + border-start-start-radius: 8px; + border-start-end-radius: 8px; + border-end-end-radius: 0; + border-end-start-radius: 0; } /** @@ -293,7 +296,10 @@ @media (max-width: 639px) { .vp-doc li div[class*='language-'] { - border-radius: 8px 0 0 8px; + border-start-start-radius: 8px; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 8px; } } @@ -464,8 +470,10 @@ .vp-doc [class*='language-'] > button.copy.copied, .vp-doc [class*='language-'] > button.copy:hover.copied { - /*rtl:ignore*/ - border-radius: 0 4px 4px 0; + border-start-start-radius: 0; + border-start-end-radius: 4px; + border-end-end-radius: 4px; + border-end-start-radius: 0; background-color: var(--vp-code-copy-code-hover-bg); background-image: var(--vp-icon-copied); } @@ -482,7 +490,10 @@ border: 1px solid var(--vp-code-copy-code-hover-border-color); /*rtl:ignore*/ border-right: 0; - border-radius: 4px 0 0 4px; + border-start-start-radius: 4px; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 4px; padding: 0 10px; width: fit-content; height: 40px;