From 0f4ac56ec74b949d081325e7b8dc729ed4ecf022 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Tue, 18 Nov 2025 15:07:23 +0200 Subject: [PATCH] feat(theme): use native CSS for RTL instead of using `rtlcss` package --- .../.vitepress/theme/components/ApiPreference.vue | 4 ++-- docs/components/ModalDemo.vue | 4 ++-- docs/ru/components/ModalDemo.vue | 4 ++-- src/client/theme-default/components/VPDoc.vue | 4 ++-- .../theme-default/components/VPDocAsideOutline.vue | 6 +++--- src/client/theme-default/components/VPFlyout.vue | 4 ++-- .../components/VPLocalNavOutlineDropdown.vue | 6 +++--- .../theme-default/components/VPLocalSearchBox.vue | 8 ++++---- src/client/theme-default/components/VPNavBar.vue | 4 ++-- src/client/theme-default/components/VPSidebar.vue | 10 +++++----- .../theme-default/components/VPSidebarItem.vue | 12 ++++++++---- src/client/theme-default/components/VPSkipLink.vue | 8 ++++---- .../theme-default/components/VPTeamPageSection.vue | 4 ++-- .../styles/components/vp-code-group.css | 6 +++--- .../theme-default/styles/components/vp-doc.css | 8 ++++---- 15 files changed, 48 insertions(+), 44 deletions(-) diff --git a/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue b/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue index c286640b..9d634bfa 100644 --- a/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue +++ b/__tests__/e2e/.vitepress/theme/components/ApiPreference.vue @@ -50,11 +50,11 @@ function removeSpaces(str: string) { } .VPApiPreference:first-child { - margin-top: 0; + margin-block-start: 0; } .VPApiPreference:last-child { - margin-bottom: 0; + margin-block-end: 0; } .VPApiPreference.screen-menu { diff --git a/docs/components/ModalDemo.vue b/docs/components/ModalDemo.vue index 13fbf57d..58e9e764 100644 --- a/docs/components/ModalDemo.vue +++ b/docs/components/ModalDemo.vue @@ -26,8 +26,8 @@ const showModal = ref(false) .modal-mask { position: fixed; z-index: 200; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); diff --git a/docs/ru/components/ModalDemo.vue b/docs/ru/components/ModalDemo.vue index 8f7c3ac2..54c580f9 100644 --- a/docs/ru/components/ModalDemo.vue +++ b/docs/ru/components/ModalDemo.vue @@ -28,8 +28,8 @@ const showModal = ref(false) .modal-mask { position: fixed; z-index: 200; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue index fc9f3b88..62a7a6f0 100644 --- a/src/client/theme-default/components/VPDoc.vue +++ b/src/client/theme-default/components/VPDoc.vue @@ -134,7 +134,7 @@ const pageName = computed(() => .aside-container { position: fixed; - top: 0; + inset-block-start: 0; 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; @@ -149,7 +149,7 @@ const pageName = computed(() => .aside-curtain { position: fixed; - bottom: 0; + inset-block-end: 0; z-index: 10; width: 224px; height: 32px; diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue index b5ac5db0..a0389908 100644 --- a/src/client/theme-default/components/VPDocAsideOutline.vue +++ b/src/client/theme-default/components/VPDocAsideOutline.vue @@ -58,8 +58,8 @@ useActiveAnchor(container, marker) .outline-marker { position: absolute; - top: 32px; - left: -1px; + inset-block-start: 32px; + inset-inline-start: -1px; z-index: 0; opacity: 0; width: 2px; @@ -67,7 +67,7 @@ useActiveAnchor(container, marker) height: 18px; background-color: var(--vp-c-brand-1); transition: - top 0.25s cubic-bezier(0, 1, 0.5, 1), + inset-block-start 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s; } diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue index 5ca86573..4c6c0f6b 100644 --- a/src/client/theme-default/components/VPFlyout.vue +++ b/src/client/theme-default/components/VPFlyout.vue @@ -128,8 +128,8 @@ function onBlur() { .menu { position: absolute; - top: calc(var(--vp-nav-height) / 2 + 20px); - right: 0; + inset-block-start: calc(var(--vp-nav-height) / 2 + 20px); + inset-inline-end: 0; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s, transform 0.25s; diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue index 2dbbd37b..98e06818 100644 --- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue +++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue @@ -136,7 +136,7 @@ function scrollToTop() { .items { position: absolute; - top: 40px; + inset-block-start: 40px; inset-inline: 16px; display: grid; gap: 1px; @@ -150,8 +150,8 @@ function scrollToTop() { @media (min-width: 960px) { .items { - right: auto; - left: calc(var(--vp-sidebar-width) + 32px); + inset-inline-end: auto; + inset-inline-start: calc(var(--vp-sidebar-width) + 32px); width: 320px; } } diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue index 57e680d0..208e82e7 100644 --- a/src/client/theme-default/components/VPLocalSearchBox.vue +++ b/src/client/theme-default/components/VPLocalSearchBox.vue @@ -842,8 +842,8 @@ function onMouseMove(e: MouseEvent) { .excerpt-gradient-bottom { position: absolute; - bottom: -1px; - left: 0; + inset-block-end: -1px; + inset-inline-start: 0; width: 100%; height: 8px; background: linear-gradient(transparent, var(--vp-local-search-result-bg)); @@ -852,8 +852,8 @@ function onMouseMove(e: MouseEvent) { .excerpt-gradient-top { position: absolute; - top: -1px; - left: 0; + inset-block-start: -1px; + inset-inline-start: 0; width: 100%; height: 8px; background: linear-gradient(var(--vp-local-search-result-bg), transparent); diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index a951a43a..042e6656 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -145,8 +145,8 @@ watchPostEffect(() => { @media (min-width: 960px) { .VPNavBar.has-sidebar .title { position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; z-index: 2; padding: 0 32px; width: var(--vp-sidebar-width); diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue index ea38bbe4..4d6b3e0f 100644 --- a/src/client/theme-default/components/VPSidebar.vue +++ b/src/client/theme-default/components/VPSidebar.vue @@ -67,9 +67,9 @@ watch( diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue index 7ddbbe8a..a51bbce3 100644 --- a/src/client/theme-default/components/VPTeamPageSection.vue +++ b/src/client/theme-default/components/VPTeamPageSection.vue @@ -42,8 +42,8 @@ .title-line { position: absolute; - top: 16px; - left: 0; + inset-block-start: 16px; + inset-inline-start: 0; width: 100%; height: 1px; background-color: var(--vp-c-divider); 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 1f313b93..c1f2af4e 100644 --- a/src/client/theme-default/styles/components/vp-code-group.css +++ b/src/client/theme-default/styles/components/vp-code-group.css @@ -42,9 +42,9 @@ .vp-code-group .tabs label::after { position: absolute; - right: 8px; - bottom: -1px; - left: 8px; + inset-inline-end: 8px; + inset-block-end: -1px; + inset-inline-start: 8px; z-index: 1; height: 2px; border-radius: 2px; diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index d0a67d11..22af09b1 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -44,8 +44,8 @@ .vp-doc .header-anchor { position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; margin-inline-start: -0.87em; font-weight: 500; user-select: none; @@ -84,7 +84,7 @@ } .vp-doc h2 .header-anchor { - top: 24px; + inset-block-start: 24px; } /** @@ -358,7 +358,7 @@ .vp-doc [class*='language-'] code .diff::before { position: absolute; - left: 10px; + inset-inline-start: 10px; } .vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {