From a44a6ad2eecf593eeb2f482d93b41e40af1fff4b Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 4 Feb 2024 10:17:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20=E5=8D=9A=E5=AE=A2=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20=E5=A4=96=E8=A7=82=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E8=BF=87=E6=B8=A1=E6=95=88=E6=9E=9C=EF=BC=8Chover=20=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/Archives.vue    |  7 ++++++
 theme/src/client/components/BackToTop.vue   |  6 ++---
 theme/src/client/components/Backdrop.vue    |  2 +-
 theme/src/client/components/Blog.vue        |  7 ++++++
 theme/src/client/components/BlogAside.vue   | 25 ++++++++++++++++++++-
 theme/src/client/components/BlogExtract.vue |  3 +++
 theme/src/client/components/Tags.vue        | 13 +++++++++--
 7 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/theme/src/client/components/Archives.vue b/theme/src/client/components/Archives.vue
index 7bdbf90d..bf218901 100644
--- a/theme/src/client/components/Archives.vue
+++ b/theme/src/client/components/Archives.vue
@@ -80,6 +80,12 @@ const { archives } = useArchives()
     background-color: var(--vp-c-bg);
     border-bottom: none;
     border-radius: 8px;
+    box-shadow: var(--vp-shadow-1);
+    transition: var(--t-color);
+    transition-property: border-bottom, box-shadow, background-color;
+  }
+
+  .archive:hover {
     box-shadow: var(--vp-shadow-2);
   }
 
@@ -87,6 +93,7 @@ const { archives } = useArchives()
     padding-bottom: 10px;
     margin-top: 0;
     border-bottom: solid 1px var(--vp-c-divider);
+    transition: border-bottom var(--t-color);
   }
 }
 
diff --git a/theme/src/client/components/BackToTop.vue b/theme/src/client/components/BackToTop.vue
index c8600f5a..4a56e2c0 100644
--- a/theme/src/client/components/BackToTop.vue
+++ b/theme/src/client/components/BackToTop.vue
@@ -86,8 +86,8 @@ function handleClick() {
   border-radius: 100%;
   box-shadow: var(--vp-shadow-2);
   transition:
-    background-color 0.25s ease,
-    box-shadow 0.25s ease;
+    background-color var(--t-color),
+    box-shadow var(--t-color);
 }
 
 .back-to-top-button .percent,
@@ -96,7 +96,7 @@ function handleClick() {
   top: 0;
   left: 0;
   opacity: 0;
-  transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease, color var(--t-color);
 }
 
 .back-to-top-button .percent.show,
diff --git a/theme/src/client/components/Backdrop.vue b/theme/src/client/components/Backdrop.vue
index 00b286d8..61cfd942 100644
--- a/theme/src/client/components/Backdrop.vue
+++ b/theme/src/client/components/Backdrop.vue
@@ -23,7 +23,7 @@ defineProps<{
   left: 0;
   z-index: var(--vp-z-index-backdrop);
   background: var(--vp-backdrop-bg-color);
-  transition: opacity 0.5s;
+  transition: opacity var(--t-color);
 }
 
 .backdrop.fade-enter-from,
diff --git a/theme/src/client/components/Blog.vue b/theme/src/client/components/Blog.vue
index 4cf21ca9..f9dc3289 100644
--- a/theme/src/client/components/Blog.vue
+++ b/theme/src/client/components/Blog.vue
@@ -24,6 +24,7 @@ const page = usePageData<PlumeThemePageData>()
 
 <style scoped>
 .blog-wrapper {
+  position: relative;
   min-height: calc(100vh - var(--vp-footer-height, 0px));
 }
 
@@ -45,6 +46,12 @@ const page = usePageData<PlumeThemePageData>()
     padding-top: var(--vp-nav-height);
     margin-top: calc(var(--vp-nav-height) * -1);
     background-color: var(--vp-c-bg-alt);
+    transition: background-color var(--t-color);
+  }
+
+  .blog-container {
+    position: relative;
+    z-index: 2;
   }
 }
 
diff --git a/theme/src/client/components/BlogAside.vue b/theme/src/client/components/BlogAside.vue
index de07ff0a..e4e666fa 100644
--- a/theme/src/client/components/BlogAside.vue
+++ b/theme/src/client/components/BlogAside.vue
@@ -78,7 +78,21 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   margin-bottom: 24px;
   background-color: var(--vp-c-bg);
   border-radius: 8px;
+  box-shadow: var(--vp-shadow-1);
+  transition: var(--t-color);
+  transition-property: background-color, color, box-shadow, transform;
+  transform: scale(1);
+}
+
+.avatar-profile:hover {
   box-shadow: var(--vp-shadow-2);
+  transform: scale(1.002);
+}
+
+.avatar-profile h3,
+.avatar-profile p {
+  color: var(--vp-c-text-1);
+  transition: color var(--t-color);
 }
 
 .avatar-profile .circle img {
@@ -102,8 +116,15 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg);
   border-radius: 8px;
+  box-shadow: var(--vp-shadow-1);
+  transition: var(--t-color);
+  transition-property: background-color, color, box-shadow, transform;
+  transform: scale(1);
+}
+
+.nav-link:hover {
   box-shadow: var(--vp-shadow-2);
-  transition: color var(--t-color);
+  transform: scale(1.002);
 }
 
 .nav-link:hover,
@@ -120,6 +141,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
 .nav-link .total {
   padding-right: 8px;
   color: var(--vp-c-text-3);
+  transition: color var(--t-color);
 }
 
 .nav-link .icon {
@@ -127,6 +149,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   height: 1em;
   font-size: 1.2em;
   color: var(--vp-c-text-3);
+  transition: color var(--t-color);
 }
 
 .nav-link .icon-logo {
diff --git a/theme/src/client/components/BlogExtract.vue b/theme/src/client/components/BlogExtract.vue
index e195b4cb..44c29448 100644
--- a/theme/src/client/components/BlogExtract.vue
+++ b/theme/src/client/components/BlogExtract.vue
@@ -98,11 +98,14 @@ const showBlogExtract = computed(() => {
   border-top-left-radius: 99px;
   border-bottom-left-radius: 99px;
   box-shadow: var(--vp-shadow-2);
+  transition: var(--t-color);
+  transition-property: background-color, border, box-shadow;
 }
 
 .blog-extract .icon {
   font-size: 16px;
   color: var(--vp-c-text-2);
+  transition: color var(--t-color);
 }
 
 @media (min-width: 768px) {
diff --git a/theme/src/client/components/Tags.vue b/theme/src/client/components/Tags.vue
index 5fb0e872..9187cda1 100644
--- a/theme/src/client/components/Tags.vue
+++ b/theme/src/client/components/Tags.vue
@@ -58,6 +58,7 @@ const { tags: tagsLink } = useBlogExtract()
   font-size: 20px;
   font-weight: 700;
   color: var(--vp-c-text-1);
+  transition: color var(--t-color);
 }
 
 .tags-title .icon {
@@ -95,6 +96,7 @@ const { tags: tagsLink } = useBlogExtract()
   font-size: 20px;
   font-weight: 600;
   border-bottom: 1px solid var(--vp-c-divider);
+  transition: border-bottom var(--t-color);
 }
 
 .tag-count {
@@ -103,7 +105,7 @@ const { tags: tagsLink } = useBlogExtract()
   margin-left: 4px;
   color: var(--vp-c-bg);
   border-left: 1px solid var(--vp-c-bg);
-  transition: all var(--t-color);
+  transition: color var(--t-color), border-left var(--t-color);
 }
 
 .tags .tag:hover,
@@ -129,7 +131,9 @@ const { tags: tagsLink } = useBlogExtract()
     padding: 20px;
     background-color: var(--vp-c-bg);
     border-radius: 8px;
-    box-shadow: var(--vp-shadow-2);
+    box-shadow: var(--vp-shadow-1);
+    transition: var(--t-color);
+    transition-property: background-color, box-shadow;
   }
 
   .tags-container {
@@ -137,6 +141,11 @@ const { tags: tagsLink } = useBlogExtract()
     margin-bottom: 24px;
   }
 
+  .tags-nav:hover,
+  .tags-container:hover {
+    box-shadow: var(--vp-shadow-2);
+  }
+
   .tags-container .tag-title {
     margin-top: 0;
   }