changes

app/components/common/Avatarbox.vue

@@ -9,9 +9,9 @@ const props = defineProps({
 <template>
   <div
     @click="$emit('justclick')"
-    class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
+    class="avatarbox rounded-full mx-0 px-0 size-9 font-bold is-flex is-justify-content-center is-align-items-center"
     :style="{
-      border: image ? 'none' : '1px solid var(--bulma-grey-70)',
+      border: image ? 'none' : '1px solid var(--bulma-grey-90)',
     }"
   >
     <figure
@@ -26,3 +26,11 @@ const props = defineProps({
     <span v-else>{{ text }}</span>
   </div>
 </template>
+<style scoped>
+.avatarbox:hover {
+  background-color: var(--bulma-grey-100);
+  &:hover {
+    background-color: var(--bulma-grey-95);
+  }
+}
+</style>