From 4279595c20d578df7b1540b314616bf1bc89d596 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 15 Mar 2026 22:37:27 +0900
Subject: [PATCH] style

---
 src/styles/globals.css                          | 8 ++++++++
 src/views/MyAvatars/components/MyAvatarCard.vue | 2 +-
 src/views/Tools/Gallery.vue                     | 4 ++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index b1a092f8..19756440 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -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)
diff --git a/src/views/MyAvatars/components/MyAvatarCard.vue b/src/views/MyAvatars/components/MyAvatarCard.vue
index 949450b5..ddf72b9b 100644
--- a/src/views/MyAvatars/components/MyAvatarCard.vue
+++ b/src/views/MyAvatars/components/MyAvatarCard.vue
@@ -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"
diff --git a/src/views/Tools/Gallery.vue b/src/views/Tools/Gallery.vue
index 9efed88e..b8b722af 100644
--- a/src/views/Tools/Gallery.vue
+++ b/src/views/Tools/Gallery.vue
@@ -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"