renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(dock): add hover effect for theme switcher button

Browse Source
This commit is contained in:
Hakadao
2024-07-20 02:04:39 +08:00
parent 7596980c55
commit 2822cd30d9
1 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Dock/Dock.vue
View File

@@ -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";
}