MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 22:33:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
pa
2026-03-15 22:37:27 +09:00
parent 0f738f25aa
commit 4279595c20
3 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/globals.css
View File

@@ -257,6 +257,14 @@ body {
* Use them when building new components.
* ==========================================================================*/
/* Active / Selected Highlight Ring
* Prominent focus ring for cards and items in an "active" or "selected" state.
* Use on gallery items, avatar cards, and similar selectable surfaces.
*/
.x-highlight-ring {
@apply ring-[3px] ring-ring border-ring;
}
/* Hover Transitions
* Smooth hover state changes to avoid harsh flickering.
* x-hover-card — Cards & panels (0.2s, bg + shadow)

2
src/views/MyAvatars/components/MyAvatarCard.vue
View File

@@ -6,7 +6,7 @@
<div class="avatar-card-wrapper rounded-lg" @click="$emit('click')">
<Card
class="avatar-card x-hover-card flex flex-col gap-0 p-0 cursor-pointer overflow-hidden rounded-lg relative hover:bg-accent hover:shadow-sm"
:class="isActive ? 'ring-[3px] ring-ring border-ring' : 'border border-border/50'">
:class="isActive ? 'x-highlight-ring' : 'border border-border/50'">
<div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
<img
v-if="avatar.thumbnailImageUrl && !imageLoadError"

4
src/views/Tools/Gallery.vue
View File

@@ -87,7 +87,7 @@
variant="outline"
size="sm"
class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
:class="compareCurrentProfilePic(image.id) ? 'ring-[3px] ring-ring border-ring' : ''"
:class="compareCurrentProfilePic(image.id) ? 'x-highlight-ring' : ''"
as-child>
<div
v-if="image.versions && image.versions.length > 0 && image.versions[image.versions.length - 1].file.url"
@@ -159,7 +159,7 @@
variant="outline"
size="sm"
class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
:class="compareCurrentVRCPlusIcon(image.id) ? 'ring-[3px] ring-ring border-ring' : ''"
:class="compareCurrentVRCPlusIcon(image.id) ? 'x-highlight-ring' : ''"
as-child>
<div
v-if="image.versions && image.versions.length > 0 && image.versions[image.versions.length - 1].file.url"