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

View File

@@ -2,17 +2,21 @@
<template v-if="localFavFakeRef">
<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">
@@ -79,7 +83,7 @@
</ContextMenu>
</template>
<template v-else>
<Item variant="outline" :style="itemStyle">
<Item variant="outline" class="favorites-item hover:bg-muted x-hover-list" :style="itemStyle">
<ItemMedia variant="image" />
<ItemContent class="min-w-0">
<ItemTitle class="truncate max-w-full">{{ favorite.name || favorite.id }}</ItemTitle>
@@ -95,7 +99,7 @@
<script setup>
import { AlertTriangle, Lock, MoreHorizontal, Trash2 } from 'lucide-vue-next';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
@@ -199,3 +203,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>

View File

@@ -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">
@@ -62,7 +66,7 @@
<script setup>
import { MoreHorizontal } from 'lucide-vue-next';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
ContextMenu,
@@ -120,3 +124,14 @@
showAvatarDialog(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>

View File

@@ -2,7 +2,11 @@
<template v-if="favorite.ref">
<ContextMenu>
<ContextMenuTrigger as-child>
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleOpenProfile">
<Item
variant="outline"
class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
:style="itemStyle"
@click="handleOpenProfile">
<ItemMedia variant="image">
<Avatar>
<AvatarImage :src="userImage(favorite.ref, true)" loading="lazy" />
@@ -107,7 +111,7 @@
</ContextMenu>
</template>
<template v-else>
<Item variant="outline" :style="itemStyle">
<Item variant="outline" class="favorites-item hover:bg-muted x-hover-list" :style="itemStyle">
<ItemMedia variant="image">
<Avatar>
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
@@ -303,3 +307,14 @@
}
}
</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>

View File

@@ -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>

View File

@@ -1,7 +1,10 @@
<template>
<ContextMenu>
<ContextMenuTrigger as-child>
<Card class="friend-card x-hover-card relative" :style="cardStyle" @click="showUserDialog(friend.id)">
<Card
class="friend-card x-hover-card hover:bg-muted relative"
:style="cardStyle"
@click="showUserDialog(friend.id)">
<div class="friend-card__header grid items-center mb-1.75">
<div>
<Avatar :style="{ width: `${avatarSize}px`, height: `${avatarSize}px` }">