MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-02 13:06:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor css and add UI Standards class

Browse Source
This commit is contained in:
pa
2026-03-09 16:28:05 +09:00
parent 493713b79a
commit 3dadc84179
13 changed files with 141 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Favorites/FavoritesAvatar.vue
+6 -6
View File
@@ -51,7 +51,7 @@
v-for="group in favoriteAvatarGroups"
:key="group.key"
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
`group-item--${group.visibility}`,
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]"
@@ -123,7 +123,7 @@
v-for="group in avatarGroupPlaceholders"
:key="group.key"
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
'pointer-events-none opacity-70',
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]">
@@ -162,7 +162,7 @@
v-for="group in localAvatarFavoriteGroups"
:key="group"
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
{ 'is-active': !hasSearchInput && isGroupActive('local', group) }
]"
@click="handleGroupClick('local', group)">
@@ -211,7 +211,7 @@
:content="t('view.favorite.avatars.local_favorites')">
<div
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
'border-dashed flex items-center justify-center gap-2 text-sm',
{ 'opacity-50 cursor-not-allowed': !isLocalUserVrcPlusSupporter }
]"
@@ -253,7 +253,7 @@
<div class="flex flex-col gap-2">
<div
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
{ 'is-active': !hasSearchInput && isGroupActive('history', historyGroupKey) }
]"
@click="handleGroupClick('history', historyGroupKey)">
@@ -314,7 +314,7 @@
<div
v-for="favorite in avatarFavoriteSearchResults"
:key="favorite.id"
class="favorites-search-card hover:shadow-sm"
class="favorites-search-card x-hover-card hover:shadow-sm"
@click="showAvatarDialog(favorite.id)">
<div class="favorites-search-card__content">
<div
src/views/Favorites/FavoritesFriend.vue
+4 -4
View File
@@ -51,7 +51,7 @@
v-for="group in favoriteFriendGroups"
:key="group.key"
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
`group-item--${group.visibility}`,
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]"
@@ -140,7 +140,7 @@
v-for="group in localFriendFavoriteGroups"
:key="group"
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
{ 'is-active': !hasSearchInput && isGroupActive('local', group) }
]"
@click="handleGroupClick('local', group)">
@@ -184,7 +184,7 @@
</div>
<div
v-if="!isCreatingLocalGroup"
class="group-item hover:shadow-sm border-dashed flex items-center justify-center gap-2 text-sm"
class="group-item x-hover-card hover:shadow-sm border-dashed flex items-center justify-center gap-2 text-sm"
@click="startLocalGroupCreation">
<Plus />
<span>{{ t('view.favorite.worlds.new_group') }}</span>
@@ -289,7 +289,7 @@
<div
v-for="favorite in friendFavoriteSearchResults"
:key="favorite.id"
class="favorites-search-card hover:shadow-sm"
class="favorites-search-card x-hover-card hover:shadow-sm"
@click="showUserDialog(favorite.id)">
<div class="favorites-search-card__content">
<div class="favorites-search-card__avatar">
src/views/Favorites/FavoritesWorld.vue
+5 -5
View File
@@ -51,7 +51,7 @@
v-for="group in favoriteWorldGroups"
:key="group.key"
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
`group-item--${group.visibility}`,
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]"
@@ -123,7 +123,7 @@
v-for="group in worldGroupPlaceholders"
:key="group.key"
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
'pointer-events-none opacity-70',
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]">
@@ -160,7 +160,7 @@
v-for="group in localWorldFavoriteGroups"
:key="group"
:class="[
'group-item hover:shadow-sm',
'group-item x-hover-card hover:shadow-sm',
{ 'is-active': !hasSearchInput && isGroupActive('local', group) }
]"
@click="handleGroupClick('local', group)">
@@ -204,7 +204,7 @@
</div>
<div
v-if="!isCreatingLocalGroup"
class="group-item hover:shadow-sm border-dashed flex items-center justify-center gap-2 text-sm"
class="group-item x-hover-card hover:shadow-sm border-dashed flex items-center justify-center gap-2 text-sm"
@click="startLocalGroupCreation">
<Plus />
<span>{{ t('view.favorite.worlds.new_group') }}</span>
@@ -262,7 +262,7 @@
<div
v-for="favorite in worldFavoriteSearchResults"
:key="favorite.id"
class="favorites-search-card hover:shadow-sm"
class="favorites-search-card x-hover-card hover:shadow-sm"
@click="showWorldDialog(favorite.id)">
<div class="favorites-search-card__content">
<div
src/views/Favorites/components/favorites-card.css
+1 -1
View File
@@ -12,7 +12,6 @@
padding: var(--favorites-card-padding-y, 8px)
var(--favorites-card-padding-x, 8px);
cursor: pointer;
transition: background-color 0.15s ease;
width: 100%;
min-width: var(--favorites-card-min-width, 240px);
max-width: var(--favorites-card-target-width, 320px);
@@ -20,6 +19,7 @@
.favorites-search-card:hover {
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.favorites-search-card__content {
src/views/Favorites/favorites-layout.css
+1 -1
View File
@@ -22,11 +22,11 @@
border: 1px solid var(--border);
padding: 8px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.group-item:hover {
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.group-item--public {
src/views/FriendsLocations/components/FriendsLocationsCard.vue
+4 -7
View File
@@ -1,7 +1,10 @@
<template>
<ContextMenu>
<ContextMenuTrigger as-child>
<Card class="friend-card p-0 gap-0" :style="cardStyle" @click="showUserDialog(friend.id)">
<Card
class="friend-card x-hover-card p-0 gap-0 hover:bg-accent hover:shadow-sm"
:style="cardStyle"
@click="showUserDialog(friend.id)">
<div class="friend-card__header">
<div>
<Avatar
@@ -241,16 +244,10 @@
display: grid;
gap: calc(14px * var(--card-scale) * var(--card-spacing));
border-radius: var(--radius-lg);
transition: background-color 0.15s ease;
width: 100%;
max-width: var(--friend-card-target-width, 220px);
min-width: var(--friend-card-min-width, 220px);
box-sizing: border-box;
&:hover {
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
}
.friend-card__header {
src/views/MyAvatars/components/MyAvatarCard.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<ContextMenuTrigger as="div">
<div class="avatar-card-wrapper rounded-lg" @click="$emit('click')">
<Card
class="avatar-card flex flex-col gap-0 p-0 cursor-pointer overflow-hidden rounded-lg relative transition-colors hover:bg-accent hover:shadow-md"
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 ? 'border-2 border-primary' : 'border border-border/50'">
<div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
<img
src/views/Tools/Tools.vue
+1 -7
View File
@@ -12,7 +12,7 @@
<span class="category-title">{{ t('view.tools.pictures.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['image']">
<Card class="tool-card p-0 gap-0">
<Card class="tool-card x-hover-card p-0 gap-0 hover:bg-accent hover:shadow-sm">
<div class="tool-content text-2xl" @click="showScreenshotMetadataPage">
<div class="tool-icon">
<Camera />
@@ -554,18 +554,12 @@
}
.tool-card {
transition: background-color 0.15s ease;
position: relative;
overflow: visible;
border-radius: var(--radius-lg);
cursor: pointer;
width: 100%;
&:hover {
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.tool-content {
display: flex;
align-items: center;
src/views/Tools/components/GroupCalendarEventCard.vue
+1 -7
View File
@@ -2,7 +2,7 @@
<Popover :open="eventPopoverOpen">
<PopoverTrigger as-child>
<Card
class="event-card p-0 gap-0"
class="event-card x-hover-card p-0 gap-0 hover:bg-accent hover:shadow-sm"
:class="cardClass"
@mouseenter="openEventPopover"
@mouseleave="scheduleCloseEventPopover">
@@ -275,18 +275,12 @@
<style scoped>
.event-card {
transition: background-color 0.15s ease;
position: relative;
overflow: visible;
border-radius: var(--radius-lg);
width: 100%;
}
.event-card:hover {
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.event-card.grouped-card {
margin-bottom: 0;
}