From e3a9c07ed32565f325a3d9e5445704b93632a262 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Sun, 4 Feb 2024 10:19:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=20=E5=AF=BC=E8=88=AA=E6=A0=8F=20?= =?UTF-8?q?=E5=A4=96=E8=A7=82=E5=88=87=E6=8D=A2=E8=BF=87=E6=B8=A1=E6=95=88?= =?UTF-8?q?=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/client/components/DocOutlineItem.vue | 3 +-- theme/src/client/components/LocalNav.vue | 5 +++-- .../components/LocalNavOutlineDropdown.vue | 5 +++-- theme/src/client/components/Nav/NavBar.vue | 22 +++++++++---------- .../src/client/components/Nav/NavBarExtra.vue | 1 + .../client/components/Nav/NavBarHamburger.vue | 4 ++-- .../client/components/Nav/NavBarMenuLink.vue | 2 +- .../src/client/components/Nav/NavBarTitle.vue | 2 +- .../components/Nav/NavBarTranslations.vue | 1 + theme/src/client/components/Nav/NavScreen.vue | 6 ++--- .../components/Nav/NavScreenMenuGroup.vue | 4 ++-- .../components/Nav/NavScreenMenuGroupLink.vue | 2 +- .../Nav/NavScreenMenuGroupSection.vue | 2 +- .../components/Nav/NavScreenMenuLink.vue | 4 ++-- .../components/Nav/NavScreenTranslations.vue | 2 ++ 15 files changed, 34 insertions(+), 31 deletions(-) diff --git a/theme/src/client/components/DocOutlineItem.vue b/theme/src/client/components/DocOutlineItem.vue index 7b590336..65b675fe 100644 --- a/theme/src/client/components/DocOutlineItem.vue +++ b/theme/src/client/components/DocOutlineItem.vue @@ -42,13 +42,12 @@ function onClick({ target: el }: Event) { color: var(--vp-c-text-2); text-overflow: ellipsis; white-space: nowrap; - transition: color 0.5s; + transition: color var(--t-color); } .outline-link:hover, .outline-link.active { color: var(--vp-c-text-1); - transition: color 0.25s; } .outline-link.nested { diff --git a/theme/src/client/components/LocalNav.vue b/theme/src/client/components/LocalNav.vue index d6b5e015..f42fd34b 100644 --- a/theme/src/client/components/LocalNav.vue +++ b/theme/src/client/components/LocalNav.vue @@ -84,8 +84,9 @@ const showLocalNav = computed(() => { border-top: 1px solid var(--vp-c-gutter); border-bottom: 1px solid var(--vp-c-gutter); transition: - border-color 0.5s, - background-color 0.5s; + border-color var(--t-color), + background-color var(--t-color), + border var(--t-color); } .local-nav.fixed { diff --git a/theme/src/client/components/LocalNavOutlineDropdown.vue b/theme/src/client/components/LocalNavOutlineDropdown.vue index 90176529..59206313 100644 --- a/theme/src/client/components/LocalNavOutlineDropdown.vue +++ b/theme/src/client/components/LocalNavOutlineDropdown.vue @@ -84,12 +84,11 @@ function scrollToTop() { font-weight: 500; line-height: 24px; color: var(--vp-c-text-2); - transition: color 0.5s; + transition: color var(--t-color); } .local-nav-outline-dropdown button:hover { color: var(--vp-c-text-1); - transition: color 0.25s; } .local-nav-outline-dropdown button.open { @@ -127,6 +126,8 @@ function scrollToTop() { border: 1px solid var(--vp-c-border); border-radius: 8px; box-shadow: var(--vp-shadow-3); + transition: var(--t-color); + transition-property: background-color, border, box-shadow; } .header { diff --git a/theme/src/client/components/Nav/NavBar.vue b/theme/src/client/components/Nav/NavBar.vue index 9833ef29..8296a251 100644 --- a/theme/src/client/components/Nav/NavBar.vue +++ b/theme/src/client/components/Nav/NavBar.vue @@ -66,6 +66,8 @@ watchPostEffect(() => { white-space: nowrap; pointer-events: none; border-bottom: 1px solid transparent; + transition: var(--t-color); + transition-property: background-color, color, border-bottom; } @media (min-width: 768px) { @@ -107,7 +109,7 @@ watchPostEffect(() => { .title { flex-shrink: 0; height: calc(var(--vp-nav-height) - 1px); - transition: background-color 0.5s; + transition: background-color var(--t-color); } @media (min-width: 960px) { @@ -166,7 +168,8 @@ watchPostEffect(() => { align-items: center; justify-content: flex-end; height: calc(var(--vp-nav-height) - 1px); - transition: background-color 0.5s; + transition: var(--t-color); + transition-property: background-color; } @media (min-width: 960px) { @@ -193,6 +196,7 @@ watchPostEffect(() => { margin-left: 8px; content: ""; background-color: var(--vp-c-divider); + transition: background-color var(--t-color); } .menu + .appearance::before, @@ -212,17 +216,11 @@ watchPostEffect(() => { .navbar-wrapper.has-sidebar .curtain { position: absolute; right: 0; - bottom: -31px; + bottom: 0; width: calc(100% - var(--vp-sidebar-width)); - height: 32px; - } - - .navbar-wrapper.has-sidebar .curtain::before { - display: block; - width: 100%; - height: 32px; - content: ""; - background: linear-gradient(var(--vp-c-bg), transparent 70%); + height: 0; + border-bottom: solid 1px var(--vp-c-divider); + transition: border-bottom var(--t-color); } } diff --git a/theme/src/client/components/Nav/NavBarExtra.vue b/theme/src/client/components/Nav/NavBarExtra.vue index 8910d168..bd9a3a78 100644 --- a/theme/src/client/components/Nav/NavBarExtra.vue +++ b/theme/src/client/components/Nav/NavBarExtra.vue @@ -73,6 +73,7 @@ const hasExtraContent = computed( font-weight: 700; line-height: 32px; color: var(--vp-c-text-1); + transition: color var(--t-color); } .item.appearance, diff --git a/theme/src/client/components/Nav/NavBarHamburger.vue b/theme/src/client/components/Nav/NavBarHamburger.vue index 1a494e45..dd7787b7 100644 --- a/theme/src/client/components/Nav/NavBarHamburger.vue +++ b/theme/src/client/components/Nav/NavBarHamburger.vue @@ -55,7 +55,7 @@ defineEmits<(e: 'click') => void>() background-color: var(--vp-c-text-1); transition: top 0.25s, - background-color 0.5s, + background-color var(--t-color), transform 0.25s; } @@ -116,7 +116,7 @@ defineEmits<(e: 'click') => void>() background-color: var(--vp-c-text-2); transition: top 0.25s, - background-color 0.25s, + background-color var(--t-color), transform 0.25s; } diff --git a/theme/src/client/components/Nav/NavBarMenuLink.vue b/theme/src/client/components/Nav/NavBarMenuLink.vue index 3f1dc20d..a82bc13f 100644 --- a/theme/src/client/components/Nav/NavBarMenuLink.vue +++ b/theme/src/client/components/Nav/NavBarMenuLink.vue @@ -37,7 +37,7 @@ const page = usePageData() font-weight: 500; line-height: var(--vp-nav-height); color: var(--vp-c-text-1); - transition: color 0.25s; + transition: color var(--t-color); } .navbar-menu-link.active { diff --git a/theme/src/client/components/Nav/NavBarTitle.vue b/theme/src/client/components/Nav/NavBarTitle.vue index b6421d02..4bc77f3e 100644 --- a/theme/src/client/components/Nav/NavBarTitle.vue +++ b/theme/src/client/components/Nav/NavBarTitle.vue @@ -34,7 +34,7 @@ const routeLocale = useRouteLocale() font-weight: 600; color: var(--vp-c-text-1); border-bottom: 1px solid transparent; - transition: opacity 0.25s; + transition: opacity var(--t-color), color var(--t-color), border-bottom var(--t-color); } .title:hover { diff --git a/theme/src/client/components/Nav/NavBarTranslations.vue b/theme/src/client/components/Nav/NavBarTranslations.vue index 76df4419..336b1532 100644 --- a/theme/src/client/components/Nav/NavBarTranslations.vue +++ b/theme/src/client/components/Nav/NavBarTranslations.vue @@ -46,5 +46,6 @@ const { currentLang, localeLinks } = useLangs() font-weight: 700; line-height: 32px; color: var(--vp-c-text-1); + transition: color var(--t-color); } diff --git a/theme/src/client/components/Nav/NavScreen.vue b/theme/src/client/components/Nav/NavScreen.vue index facb9f42..56ca32ef 100644 --- a/theme/src/client/components/Nav/NavScreen.vue +++ b/theme/src/client/components/Nav/NavScreen.vue @@ -44,7 +44,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null) pointer-events: auto; background-color: var(--vp-nav-screen-bg-color); border-top: 1px solid var(--vp-c-divider); - transition: background-color 0.5s; + transition: background-color var(--t-color), border-top var(--t-color); } .container { @@ -55,12 +55,12 @@ const isLocked = useScrollLock(inBrowser ? document.body : null) .nav-screen.fade-enter-active, .nav-screen.fade-leave-active { - transition: opacity 0.25s; + transition: opacity var(--t-color); } .nav-screen.fade-enter-active .container, .nav-screen.fade-leave-active .container { - transition: transform 0.25s ease; + transition: transform var(--t-color); } .nav-screen.fade-enter-from, diff --git a/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/theme/src/client/components/Nav/NavScreenMenuGroup.vue index 2392319b..7d70d3b0 100644 --- a/theme/src/client/components/Nav/NavScreenMenuGroup.vue +++ b/theme/src/client/components/Nav/NavScreenMenuGroup.vue @@ -63,7 +63,7 @@ function toggle() { height: 48px; overflow: hidden; border-bottom: 1px solid var(--vp-c-divider); - transition: border-color 0.5s; + transition: border-color var(--t-color); } .nav-screen-menu-group .items { @@ -89,7 +89,7 @@ function toggle() { font-weight: 500; line-height: 24px; color: var(--vp-c-text-1); - transition: color 0.25s; + transition: color var(--t-color); } .button:hover { diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue b/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue index 904ff0c1..88647dc2 100644 --- a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue +++ b/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue @@ -30,7 +30,7 @@ const closeScreen = inject('close-screen') as () => void font-weight: 400; line-height: 32px; color: var(--vp-c-text-1); - transition: color 0.25s; + transition: color var(--t-color); } .nav-screen-menu-group-link:hover { diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue b/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue index 6cc42bbd..59ee61d8 100644 --- a/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue +++ b/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue @@ -35,6 +35,6 @@ defineProps<{ font-weight: 700; line-height: 32px; color: var(--vp-c-text-2); - transition: color 0.25s; + transition: color var(--t-color); } diff --git a/theme/src/client/components/Nav/NavScreenMenuLink.vue b/theme/src/client/components/Nav/NavScreenMenuLink.vue index bdf73c8d..876b8ea9 100644 --- a/theme/src/client/components/Nav/NavScreenMenuLink.vue +++ b/theme/src/client/components/Nav/NavScreenMenuLink.vue @@ -28,8 +28,8 @@ const closeScreen = inject('close-screen') as () => void color: var(--vp-c-text-1); border-bottom: 1px solid var(--vp-c-divider); transition: - border-color 0.25s, - color 0.25s; + border-color var(--t-color), + color var(--t-color); } .nav-screen-menu-link:hover { diff --git a/theme/src/client/components/Nav/NavScreenTranslations.vue b/theme/src/client/components/Nav/NavScreenTranslations.vue index 5bfa12d7..5613b40f 100644 --- a/theme/src/client/components/Nav/NavScreenTranslations.vue +++ b/theme/src/client/components/Nav/NavScreenTranslations.vue @@ -51,6 +51,7 @@ function toggle() { font-size: 14px; font-weight: 500; color: var(--vp-c-text-1); + transition: color var(--t-color); } .icon { @@ -75,5 +76,6 @@ function toggle() { font-size: 13px; line-height: 32px; color: var(--vp-c-text-1); + transition: color var(--t-color); }