mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-21 15:26:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge d6ea82384c into 07eea0f484

Browse source
This commit is contained in:
Chris 2025-04-13 04:09:12 +02:00 • committed by GitHub
commit 6d324716a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 24 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/pages/Home.page.vue
View file

@ -50,7 +50,7 @@ function onUpdateFavoriteTools() {
<h3 class="mb-5px mt-25px text-neutral-400 font-500">
{{ $t('home.categories.favoriteTools') }}
<c-tooltip :tooltip="$t('home.categories.favoritesDndToolTip')">
<n-icon :component="IconDragDrop" size="18" />
<n-icon :component="IconDragDrop" size="18" class="icon-wobble" />
</c-tooltip>
</h3>
<Draggable
@ -107,18 +107,36 @@ function onUpdateFavoriteTools() {
background-color: #ccc;
border: 2px dashed #666;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
animation: ghost-favorites-draggable-animation 0.2s ease-out;
animation: ghost-favorites-draggable-animation 0.1s ease-out;
}
@keyframes ghost-favorites-draggable-animation {
0% {
opacity: 0;
transform: scale(0.9);
transform: scale(0.9) rotate(-2deg);
}
50% {
opacity: 0.4;
transform: scale(1.0) rotate(4deg);
}
100% {
opacity: 0.4;
transform: scale(1.0);
transform: scale(1.0) rotate(-2deg);
}
}
.icon-wobble:hover {
transform: scale(1.3);
animation: icon-wobble-animation 0.2s ease-in-out;
}
@keyframes icon-wobble-animation {
0% {
transform: scale(1.3) rotate(-10deg);
}
50% {
transform: scale(1.3) rotate(20deg);
}
100% {
transform: scale(1.3) rotate(-10deg);
}
}
</style>