hover css

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -237,3 +237,14 @@
         favoriteRequest.deleteFavorite({ objectId });
     }
 </script>
+
+<style scoped>
+    .favorites-search-card img {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-search-card:hover img {
+        filter: saturate(1) contrast(1);
+    }
+</style>

src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue

@@ -98,3 +98,14 @@
         return props.favorite.thumbnailImageUrl.replace('256', '128');
     });
 </script>
+
+<style scoped>
+    .favorites-search-card img {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-search-card:hover img {
+        filter: saturate(1) contrast(1);
+    }
+</style>

src/views/Favorites/components/FavoritesFriendItem.vue

@@ -145,3 +145,14 @@
         }
     }
 </script>
+
+<style scoped>
+    .favorites-search-card img {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-search-card:hover img {
+        filter: saturate(1) contrast(1);
+    }
+</style>

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -237,4 +237,13 @@
     }
 </script>
 
-<style scoped></style>
+<style scoped>
+    .favorites-search-card img {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-search-card:hover img {
+        filter: saturate(1) contrast(1);
+    }
+</style>

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -200,4 +200,13 @@
     }
 </script>
 
-<style scoped></style>
+<style scoped>
+    .favorites-search-card img {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-search-card:hover img {
+        filter: saturate(1) contrast(1);
+    }
+</style>

src/views/MyAvatars/MyAvatars.vue

@@ -250,7 +250,7 @@
                     :ref="virtualizer.measureElement"
                     :style="{ transform: `translateY(${vItem.virtualItem.start}px)` }">
                     <div
-                        class="grid gap-[var(--avatar-card-gap,12px)] p-0.5"
+                        class="grid gap-(--avatar-card-gap,12px) p-0.5"
                         :style="{
                             gridTemplateColumns: `repeat(var(--avatar-grid-columns, 1), minmax(var(--avatar-card-min-width, 200px), var(--avatar-card-target-width, 1fr)))`,
                             ...gridStyle(filteredAvatars.length)
@@ -258,6 +258,7 @@
                         <MyAvatarCard
                             v-for="avatar in vItem.row.items"
                             :key="avatar.id"
+                            v-memo="[currentAvatarId, cardScale]"
                             :avatar="avatar"
                             :current-avatar-id="currentAvatarId"
                             :card-scale="cardScale"
@@ -877,3 +878,14 @@
         refreshAvatars();
     });
 </script>
+
+<style scoped>
+    :deep(.avatar-table-thumbnail) {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    :deep(tr:hover .avatar-table-thumbnail) {
+        filter: saturate(1) contrast(1);
+    }
+</style>

src/views/MyAvatars/columns.jsx

@@ -94,7 +94,7 @@ export function getColumns({
                 return (
                     <img
                         src={ref.thumbnailImageUrl}
-                        class="cursor-pointer rounded-sm object-cover"
+                        class="avatar-table-thumbnail cursor-pointer rounded-sm object-cover"
                         style="width: 34px; height: 22px;"
                         loading="lazy"
                         onClick={() => onShowAvatarDialog(ref.id)}