From 2822cd30d97b997f7b0516a85b41324ed5cd9e45 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sat, 20 Jul 2024 02:04:39 +0800
Subject: [PATCH] feat(dock): add hover effect for theme switcher button

---
 src/components/Dock/Dock.vue | 45 ++++++++++++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index e3836c82..eaa1a91a 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -152,7 +152,10 @@ function handleBackToTopOrRefresh() {
           <Tooltip :content="$t(dockItem.i18nKey)" :placement="tooltipPlacement">
             <button
               class="dock-item group"
-              :class="{ active: activatedPage === dockItem.page }"
+              :class="{
+                active: activatedPage === dockItem.page,
+                inactive: hoveringDockItem.themeMode && isDark,
+              }"
               @click="emit('changePage', dockItem.page)"
             >
               <div
@@ -175,9 +178,22 @@ function handleBackToTopOrRefresh() {
         <Tooltip
           v-if="!settings.disableLightDarkModeSwitcherOnDock"
           :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement"
+          class="group"
         >
+          <!-- moon -->
+          <div
+            v-if="isDark"
+            pos="absolute top-0 left-0 group-hover:top-2px group-hover:left--4px"
+            w-full h-full bg-white rounded="1/2"
+            z--2 pointer-events-none
+            shadow="group-hover:[-8px_4px_160px_20px_hsla(226deg,85%,77%,1),-8px_4px_100px_12px_hsla(226deg,85%,77%,0.8),-8px_4px_60px_10px_hsla(226deg,85%,77%,0.6),-8px_4px_20px_4px_hsla(226deg,85%,77%,0.4),-4px_2px_8px_0_hsla(226deg,85%,77%,0.8)]"
+            opacity-0 group-hover:opacity-100
+            duration-600
+          />
+
           <button
             class="dock-item"
+            bg="!dark-hover:$bew-bg" transform="!dark-hover:scale-100" shadow="!dark-hover:[inset_0_0_8px_hsla(226deg,85%,77%,1)]"
             @click="toggleDark"
             @mouseenter="hoveringDockItem.themeMode = true"
             @mouseleave="hoveringDockItem.themeMode = false"
@@ -198,7 +214,13 @@ function handleBackToTopOrRefresh() {
         </Tooltip>
 
         <Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
-          <button class="dock-item group" @click="emit('settingsVisibilityChange')">
+          <button
+            class="dock-item group"
+            :class="{
+              inactive: hoveringDockItem.themeMode && isDark,
+            }"
+            @click="emit('settingsVisibilityChange')"
+          >
             <div i-mingcute:settings-3-line text-xl group-hover:rotate-180 transition="all 2000 ease-out" />
           </button>
         </Tooltip>
@@ -207,6 +229,9 @@ function handleBackToTopOrRefresh() {
       <button
         v-if="settings.moveBackToTopOrRefreshButtonToDock && activatedPage !== AppPage.Search"
         class="back-to-top-or-refresh-btn"
+        :class="{
+          inactive: hoveringDockItem.themeMode && isDark,
+        }"
         @click="handleBackToTopOrRefresh"
       >
         <Transition name="fade">
@@ -312,7 +337,8 @@ function handleBackToTopOrRefresh() {
       transform 300ms cubic-bezier(0.34, 2, 0.6, 1),
       background 300ms ease,
       color 300ms ease,
-      box-shadow 300ms ease;
+      box-shadow 300ms ease,
+      opacity 600ms ease;
     box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
 
     &.active {
@@ -320,6 +346,10 @@ function handleBackToTopOrRefresh() {
       --uno: "shadow-$shadow-active dark:shadow-$shadow-dark";
       --uno: "active:shadow-$shadow-active-active dark-active:shadow-$shadow-dark-active";
     }
+
+    &.inactive {
+      --uno: "opacity-80 !shadow-none";
+    }
   }
 
   &.bottom .back-to-top-or-refresh-btn {
@@ -333,7 +363,7 @@ function handleBackToTopOrRefresh() {
   --shadow-dark-active: 0 4px 20px rgba(255, 255, 255, 0.8);
   --shadow-active-active: 0 4px 20px var(--bew-theme-color-90);
 
-  --uno: "transform active:important-scale-90 hover:scale-110";
+  --uno: "relative transform active:important-scale-90 hover:scale-110";
   --uno: "md:w-45px w-35px";
   --uno: "md:lh-45px lh-35px";
   --uno: "p-0 flex items-center justify-center";
@@ -348,7 +378,8 @@ function handleBackToTopOrRefresh() {
     transform 300ms cubic-bezier(0.34, 2, 0.6, 1),
     background 300ms ease,
     color 300ms ease,
-    box-shadow 600ms ease;
+    box-shadow 600ms ease,
+    opacity 600ms ease;
 
   &:hover {
     box-shadow:
@@ -363,6 +394,10 @@ function handleBackToTopOrRefresh() {
     --uno: "active:shadow-$shadow-active-active dark-active:shadow-$shadow-dark-active";
   }
 
+  &.inactive {
+    --uno: "opacity-80 !shadow-none";
+  }
+
   svg {
     --uno: "md:w-22px w-18px md:h-22px h-18px block align-middle";
   }