MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 06:56:04 +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/App.vue
-1
View File
@@ -34,7 +34,6 @@
import VRCXUpdateDialog from './components/dialogs/VRCXUpdateDialog.vue'; import VRCXUpdateDialog from './components/dialogs/VRCXUpdateDialog.vue';
import '@/styles/globals.css'; import '@/styles/globals.css';
import '@/app.css';
console.log(`isLinux: ${LINUX}`); console.log(`isLinux: ${LINUX}`);
src/app.css
-32
View File
@@ -1,32 +0,0 @@
html {
overflow: hidden;
}
.lucide.is-loading {
animation: rotating 2s linear infinite;
}
.x-container {
position: relative;
padding: 8px;
overflow: hidden auto;
box-sizing: border-box;
min-width: 0;
background: var(--background);
height: calc(100% - 20px);
margin: 8px 0 8px 0;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.aside-collapsed .x-container {
margin-right: 8px;
}
html.dark .x-container {
background: var(--sidebar);
}
[data-sonner-toast] [data-content] [data-description] {
white-space: pre-line;
}
src/styles/fonts.css
+36
View File
@@ -10,3 +10,39 @@
src: local('Times New Roman'); src: local('Times New Roman');
unicode-range: U+2026; unicode-range: U+2026;
} }
:root {
--font-western-primary: 'Inter Variable';
--font-western:
'ellipsis-font', -apple-system, var(--font-western-primary), 'Segoe UI',
'Roboto', 'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
--font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--font-fallback-cjk: sans-serif;
--font-primary-cjk:
'Noto Sans JP Variable', 'Noto Sans SC Variable',
'Noto Sans KR Variable', 'Noto Sans TC Variable';
}
:root[lang='zh-CN'] {
--font-primary-cjk:
'Noto Sans SC Variable', 'Noto Sans JP Variable',
'Noto Sans KR Variable', 'Noto Sans TC Variable';
}
:root[lang='ja'] {
--font-primary-cjk:
'Noto Sans JP Variable', 'Noto Sans KR Variable',
'Noto Sans TC Variable', 'Noto Sans SC Variable';
}
:root[lang='ko'] {
--font-primary-cjk:
'Noto Sans KR Variable', 'Noto Sans JP Variable',
'Noto Sans TC Variable', 'Noto Sans SC Variable';
}
:root[lang='zh-TW'] {
--font-primary-cjk:
'Noto Sans TC Variable', 'Noto Sans JP Variable',
'Noto Sans KR Variable', 'Noto Sans SC Variable';
}
src/styles/globals.css
+81 -57
View File
@@ -16,30 +16,6 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root[lang='zh-CN'] {
--font-primary-cjk:
'Noto Sans SC Variable', 'Noto Sans JP Variable',
'Noto Sans KR Variable', 'Noto Sans TC Variable';
}
:root[lang='ja'] {
--font-primary-cjk:
'Noto Sans JP Variable', 'Noto Sans KR Variable',
'Noto Sans TC Variable', 'Noto Sans SC Variable';
}
:root[lang='ko'] {
--font-primary-cjk:
'Noto Sans KR Variable', 'Noto Sans JP Variable',
'Noto Sans TC Variable', 'Noto Sans SC Variable';
}
:root[lang='zh-TW'] {
--font-primary-cjk:
'Noto Sans TC Variable', 'Noto Sans JP Variable',
'Noto Sans KR Variable', 'Noto Sans SC Variable';
}
:root { :root {
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.145 0 0); --foreground: oklch(0.145 0 0);
@@ -95,16 +71,6 @@
--visibility-public: #22c55e; --visibility-public: #22c55e;
--visibility-friends: #0ea5e9; --visibility-friends: #0ea5e9;
--visibility-private: #ef4444; --visibility-private: #ef4444;
--font-western-primary: 'Inter Variable';
--font-western:
'ellipsis-font', -apple-system, var(--font-western-primary), 'Segoe UI',
'Roboto', 'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
--font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--font-fallback-cjk: sans-serif;
--font-primary-cjk:
'Noto Sans JP Variable', 'Noto Sans SC Variable',
'Noto Sans KR Variable', 'Noto Sans TC Variable';
} }
.dark { .dark {
@@ -202,19 +168,51 @@
--color-visibility-private: var(--visibility-private); --color-visibility-private: var(--visibility-private);
} }
@layer base { html {
* { overflow: hidden;
@apply border-border outline-ring/50; }
scrollbar-width: thin;
scrollbar-color: var(--border) transparent; .lucide.is-loading {
} animation: rotating 2s linear infinite;
body { }
@apply bg-background text-foreground;
font-family: .x-container {
var(--font-western), var(--font-symbol), var(--font-primary-cjk), position: relative;
var(--font-fallback-cjk); padding: 8px;
margin: 0; overflow: hidden auto;
} box-sizing: border-box;
min-width: 0;
background: var(--background);
height: calc(100% - 20px);
margin: 8px 0 8px 0;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.aside-collapsed .x-container {
margin-right: 8px;
}
html.dark .x-container {
background: var(--sidebar);
}
[data-sonner-toast] [data-content] [data-description] {
white-space: pre-line;
}
* {
@apply border-border outline-ring/50;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
body {
@apply bg-background text-foreground;
font-family:
var(--font-western), var(--font-symbol), var(--font-primary-cjk),
var(--font-fallback-cjk);
margin: 0;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -233,17 +231,15 @@
background-clip: content-box; background-clip: content-box;
} }
@layer utilities { .scrollbar-hidden {
.scrollbar-hidden { scrollbar-width: none;
scrollbar-width: none; -ms-overflow-style: none;
-ms-overflow-style: none; }
}
.scrollbar-hidden::-webkit-scrollbar { .scrollbar-hidden::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
display: none; display: none;
}
} }
[data-slot='table-header'], [data-slot='table-header'],
@@ -255,3 +251,31 @@
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
/* ==========================================================================
* VRCX UI Standards
* These are project-wide conventions.
* Use them when building new components.
* ==========================================================================*/
/* Hover Transitions
* Smooth hover state changes to avoid harsh flickering.
* x-hover-card — Cards & panels (0.2s, bg + shadow)
* x-hover-list — List items (0.15s, bg). Skip for high-density lists (e.g. friend sidebar).
* x-hover-icon — Icon buttons (0.1s, bg + color)
*/
.x-hover-card {
transition:
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.x-hover-list {
transition: background-color 0.15s ease;
}
.x-hover-icon {
transition:
background-color 0.1s ease,
color 0.1s ease;
}
src/views/Favorites/FavoritesAvatar.vue
+6 -6
View File
@@ -51,7 +51,7 @@
v-for="group in favoriteAvatarGroups" v-for="group in favoriteAvatarGroups"
:key="group.key" :key="group.key"
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
`group-item--${group.visibility}`, `group-item--${group.visibility}`,
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) } { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]" ]"
@@ -123,7 +123,7 @@
v-for="group in avatarGroupPlaceholders" v-for="group in avatarGroupPlaceholders"
:key="group.key" :key="group.key"
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
'pointer-events-none opacity-70', 'pointer-events-none opacity-70',
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) } { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]"> ]">
@@ -162,7 +162,7 @@
v-for="group in localAvatarFavoriteGroups" v-for="group in localAvatarFavoriteGroups"
:key="group" :key="group"
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
{ 'is-active': !hasSearchInput && isGroupActive('local', group) } { 'is-active': !hasSearchInput && isGroupActive('local', group) }
]" ]"
@click="handleGroupClick('local', group)"> @click="handleGroupClick('local', group)">
@@ -211,7 +211,7 @@
:content="t('view.favorite.avatars.local_favorites')"> :content="t('view.favorite.avatars.local_favorites')">
<div <div
:class="[ :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', 'border-dashed flex items-center justify-center gap-2 text-sm',
{ 'opacity-50 cursor-not-allowed': !isLocalUserVrcPlusSupporter } { 'opacity-50 cursor-not-allowed': !isLocalUserVrcPlusSupporter }
]" ]"
@@ -253,7 +253,7 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div <div
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
{ 'is-active': !hasSearchInput && isGroupActive('history', historyGroupKey) } { 'is-active': !hasSearchInput && isGroupActive('history', historyGroupKey) }
]" ]"
@click="handleGroupClick('history', historyGroupKey)"> @click="handleGroupClick('history', historyGroupKey)">
@@ -314,7 +314,7 @@
<div <div
v-for="favorite in avatarFavoriteSearchResults" v-for="favorite in avatarFavoriteSearchResults"
:key="favorite.id" :key="favorite.id"
class="favorites-search-card hover:shadow-sm" class="favorites-search-card x-hover-card hover:shadow-sm"
@click="showAvatarDialog(favorite.id)"> @click="showAvatarDialog(favorite.id)">
<div class="favorites-search-card__content"> <div class="favorites-search-card__content">
<div <div
src/views/Favorites/FavoritesFriend.vue
+4 -4
View File
@@ -51,7 +51,7 @@
v-for="group in favoriteFriendGroups" v-for="group in favoriteFriendGroups"
:key="group.key" :key="group.key"
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
`group-item--${group.visibility}`, `group-item--${group.visibility}`,
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) } { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]" ]"
@@ -140,7 +140,7 @@
v-for="group in localFriendFavoriteGroups" v-for="group in localFriendFavoriteGroups"
:key="group" :key="group"
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
{ 'is-active': !hasSearchInput && isGroupActive('local', group) } { 'is-active': !hasSearchInput && isGroupActive('local', group) }
]" ]"
@click="handleGroupClick('local', group)"> @click="handleGroupClick('local', group)">
@@ -184,7 +184,7 @@
</div> </div>
<div <div
v-if="!isCreatingLocalGroup" 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"> @click="startLocalGroupCreation">
<Plus /> <Plus />
<span>{{ t('view.favorite.worlds.new_group') }}</span> <span>{{ t('view.favorite.worlds.new_group') }}</span>
@@ -289,7 +289,7 @@
<div <div
v-for="favorite in friendFavoriteSearchResults" v-for="favorite in friendFavoriteSearchResults"
:key="favorite.id" :key="favorite.id"
class="favorites-search-card hover:shadow-sm" class="favorites-search-card x-hover-card hover:shadow-sm"
@click="showUserDialog(favorite.id)"> @click="showUserDialog(favorite.id)">
<div class="favorites-search-card__content"> <div class="favorites-search-card__content">
<div class="favorites-search-card__avatar"> <div class="favorites-search-card__avatar">
src/views/Favorites/FavoritesWorld.vue
+5 -5
View File
@@ -51,7 +51,7 @@
v-for="group in favoriteWorldGroups" v-for="group in favoriteWorldGroups"
:key="group.key" :key="group.key"
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
`group-item--${group.visibility}`, `group-item--${group.visibility}`,
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) } { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]" ]"
@@ -123,7 +123,7 @@
v-for="group in worldGroupPlaceholders" v-for="group in worldGroupPlaceholders"
:key="group.key" :key="group.key"
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
'pointer-events-none opacity-70', 'pointer-events-none opacity-70',
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) } { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
]"> ]">
@@ -160,7 +160,7 @@
v-for="group in localWorldFavoriteGroups" v-for="group in localWorldFavoriteGroups"
:key="group" :key="group"
:class="[ :class="[
'group-item hover:shadow-sm', 'group-item x-hover-card hover:shadow-sm',
{ 'is-active': !hasSearchInput && isGroupActive('local', group) } { 'is-active': !hasSearchInput && isGroupActive('local', group) }
]" ]"
@click="handleGroupClick('local', group)"> @click="handleGroupClick('local', group)">
@@ -204,7 +204,7 @@
</div> </div>
<div <div
v-if="!isCreatingLocalGroup" 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"> @click="startLocalGroupCreation">
<Plus /> <Plus />
<span>{{ t('view.favorite.worlds.new_group') }}</span> <span>{{ t('view.favorite.worlds.new_group') }}</span>
@@ -262,7 +262,7 @@
<div <div
v-for="favorite in worldFavoriteSearchResults" v-for="favorite in worldFavoriteSearchResults"
:key="favorite.id" :key="favorite.id"
class="favorites-search-card hover:shadow-sm" class="favorites-search-card x-hover-card hover:shadow-sm"
@click="showWorldDialog(favorite.id)"> @click="showWorldDialog(favorite.id)">
<div class="favorites-search-card__content"> <div class="favorites-search-card__content">
<div <div
src/views/Favorites/components/favorites-card.css
+1 -1
View File
@@ -12,7 +12,6 @@
padding: var(--favorites-card-padding-y, 8px) padding: var(--favorites-card-padding-y, 8px)
var(--favorites-card-padding-x, 8px); var(--favorites-card-padding-x, 8px);
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease;
width: 100%; width: 100%;
min-width: var(--favorites-card-min-width, 240px); min-width: var(--favorites-card-min-width, 240px);
max-width: var(--favorites-card-target-width, 320px); max-width: var(--favorites-card-target-width, 320px);
@@ -20,6 +19,7 @@
.favorites-search-card:hover { .favorites-search-card:hover {
background-color: var(--accent); background-color: var(--accent);
box-shadow: var(--shadow-sm);
} }
.favorites-search-card__content { .favorites-search-card__content {
src/views/Favorites/favorites-layout.css
+1 -1
View File
@@ -22,11 +22,11 @@
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 8px; padding: 8px;
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease;
} }
.group-item:hover { .group-item:hover {
background-color: var(--accent); background-color: var(--accent);
box-shadow: var(--shadow-sm);
} }
.group-item--public { .group-item--public {
src/views/FriendsLocations/components/FriendsLocationsCard.vue
+4 -7
View File
@@ -1,7 +1,10 @@
<template> <template>
<ContextMenu> <ContextMenu>
<ContextMenuTrigger as-child> <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 class="friend-card__header">
<div> <div>
<Avatar <Avatar
@@ -241,16 +244,10 @@
display: grid; display: grid;
gap: calc(14px * var(--card-scale) * var(--card-spacing)); gap: calc(14px * var(--card-scale) * var(--card-spacing));
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
transition: background-color 0.15s ease;
width: 100%; width: 100%;
max-width: var(--friend-card-target-width, 220px); max-width: var(--friend-card-target-width, 220px);
min-width: var(--friend-card-min-width, 220px); min-width: var(--friend-card-min-width, 220px);
box-sizing: border-box; box-sizing: border-box;
&:hover {
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
} }
.friend-card__header { .friend-card__header {
src/views/MyAvatars/components/MyAvatarCard.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<ContextMenuTrigger as="div"> <ContextMenuTrigger as="div">
<div class="avatar-card-wrapper rounded-lg" @click="$emit('click')"> <div class="avatar-card-wrapper rounded-lg" @click="$emit('click')">
<Card <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'"> :class="isActive ? 'border-2 border-primary' : 'border border-border/50'">
<div class="w-full aspect-5/2 overflow-hidden bg-muted relative"> <div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
<img <img
src/views/Tools/Tools.vue
+1 -7
View File
@@ -12,7 +12,7 @@
<span class="category-title">{{ t('view.tools.pictures.header') }}</span> <span class="category-title">{{ t('view.tools.pictures.header') }}</span>
</div> </div>
<div class="tools-grid" v-show="!categoryCollapsed['image']"> <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-content text-2xl" @click="showScreenshotMetadataPage">
<div class="tool-icon"> <div class="tool-icon">
<Camera /> <Camera />
@@ -554,18 +554,12 @@
} }
.tool-card { .tool-card {
transition: background-color 0.15s ease;
position: relative; position: relative;
overflow: visible; overflow: visible;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
&:hover {
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.tool-content { .tool-content {
display: flex; display: flex;
align-items: center; align-items: center;
src/views/Tools/components/GroupCalendarEventCard.vue
+1 -7
View File
@@ -2,7 +2,7 @@
<Popover :open="eventPopoverOpen"> <Popover :open="eventPopoverOpen">
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Card <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" :class="cardClass"
@mouseenter="openEventPopover" @mouseenter="openEventPopover"
@mouseleave="scheduleCloseEventPopover"> @mouseleave="scheduleCloseEventPopover">
@@ -275,18 +275,12 @@
<style scoped> <style scoped>
.event-card { .event-card {
transition: background-color 0.15s ease;
position: relative; position: relative;
overflow: visible; overflow: visible;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
width: 100%; width: 100%;
} }
.event-card:hover {
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.event-card.grouped-card { .event-card.grouped-card {
margin-bottom: 0; margin-bottom: 0;
} }