fix style

This commit is contained in:
pa
2026-03-11 22:24:00 +09:00
parent 4b7db5f890
commit c72209f56d
5 changed files with 100 additions and 37 deletions
@@ -1,17 +1,21 @@
<template>
<ContextMenu>
<ContextMenuTrigger as-child>
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
<Item
variant="outline"
class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
:style="itemStyle"
@click="handleViewDetails">
<ItemMedia variant="image">
<img
v-if="smallThumbnail"
:src="smallThumbnail"
loading="lazy"
decoding="async"
fetchpriority="low"
class="object-cover" />
<Avatar v-else>
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
<Avatar class="rounded-sm size-full">
<AvatarImage
v-if="smallThumbnail"
:src="smallThumbnail"
loading="lazy"
decoding="async"
fetchpriority="low"
class="rounded-sm object-cover" />
<AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
</Avatar>
</ItemMedia>
<ItemContent class="min-w-0">
@@ -90,7 +94,7 @@
DropdownMenuSeparator,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
@@ -181,3 +185,14 @@
favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
}
</script>
<style scoped>
.favorites-item :deep(img) {
filter: saturate(0.8) contrast(0.8);
transition: filter 0.2s ease;
}
.favorites-item:hover :deep(img) {
filter: saturate(1) contrast(1);
}
</style>