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

refactor define css var

Browse Source
This commit is contained in:
pa
2026-03-08 19:24:35 +09:00
parent f9ab04ed17
commit 08033e99b6
17 changed files with 257 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/app.css
View File

@@ -129,35 +129,35 @@ img.friends-list-avatar {
width: 9px; width: 9px;
height: 9px; height: 9px;
content: ''; content: '';
background: #909399; background: var(--status-offline);
border-radius: 50%; border-radius: 50%;
} }
.x-friend-item .status-icon.active::after { .x-friend-item .status-icon.active::after {
background: #f4e05e; background: var(--status-active);
} }
.x-friend-item .status-icon.online::after { .x-friend-item .status-icon.online::after {
background: #67c23a; background: var(--status-online);
} }
.x-friend-item .status-icon.joinme::after { .x-friend-item .status-icon.joinme::after {
background: #00b8ff; background: var(--status-joinme);
mask-image: url(/images/masks/joinme.svg); mask-image: url(/images/masks/joinme.svg);
} }
.x-friend-item .status-icon.askme::after { .x-friend-item .status-icon.askme::after {
background: #ff9500; background: var(--status-askme);
mask-image: url(/images/masks/askme.svg); mask-image: url(/images/masks/askme.svg);
} }
.x-friend-item .status-icon.busy::after { .x-friend-item .status-icon.busy::after {
background: #ff2c2c; background: var(--status-busy);
mask-image: url(/images/masks/busy.svg); mask-image: url(/images/masks/busy.svg);
} }
.x-friend-item .status-icon.offline::after { .x-friend-item .status-icon.offline::after {
background: #909399; background: var(--status-offline);
} }
.x-friend-item > .detail { .x-friend-item > .detail {
@@ -211,57 +211,57 @@ i.x-status-icon {
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
background: #808080; background: var(--status-offline-alt);
border-radius: 50%; border-radius: 50%;
} }
i.x-user-status.active { i.x-user-status.active {
background: #f4e05e; background: var(--status-active);
} }
i.x-user-status.online { i.x-user-status.online {
background: #67c23a; background: var(--status-online);
} }
i.x-user-status.joinme { i.x-user-status.joinme {
background: #00b8ff; background: var(--status-joinme);
mask-image: url(/images/masks/joinme.svg); mask-image: url(/images/masks/joinme.svg);
} }
i.x-user-status.askme { i.x-user-status.askme {
background: #ff9500; background: var(--status-askme);
mask-image: url(/images/masks/askme.svg); mask-image: url(/images/masks/askme.svg);
} }
i.x-user-status.busy { i.x-user-status.busy {
background: #ff2c2c; background: var(--status-busy);
mask-image: url(/images/masks/busy.svg); mask-image: url(/images/masks/busy.svg);
} }
i.x-status-icon.green { i.x-status-icon.green {
background: #67c23a; background: var(--status-online);
} }
i.x-status-icon.blue { i.x-status-icon.blue {
background: #00b8ff; background: var(--status-joinme);
} }
i.x-status-icon.orange { i.x-status-icon.orange {
background: #ff9500; background: var(--status-askme);
} }
i.x-status-icon.red { i.x-status-icon.red {
background: #ff2c2c; background: var(--status-busy);
} }
.x-tag-platform-pc { .x-tag-platform-pc {
color: #0078d4; color: var(--platform-pc);
border-color: #0078d4 !important; border-color: var(--platform-pc) !important;
} }
.x-tag-platform-quest { .x-tag-platform-quest {
color: #3ddc84; color: var(--platform-quest);
border-color: #3ddc84 !important; border-color: var(--platform-quest) !important;
} }
.x-tag-friend { .x-tag-friend {

4
src/components/StatusBar.vue
View File

@@ -593,11 +593,11 @@
} }
.dot-green { .dot-green {
background: #67c23a; background: var(--status-online);
} }
.dot-gray { .dot-gray {
background: #808080; background: var(--status-offline-alt);
} }
.status-label { .status-label {

93
src/components/dialogs/AvatarDialog/AvatarDialog.vue
View File

@@ -80,18 +80,28 @@
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS"> <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
<Badge <Badge
class="text-[#8e8e93] border-[#8e8e93]" class="text-platform-ios border-platform-ios"
variant="outline" variant="outline"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
><Apple class="h-4 w-4 text-[#8e8e93]" /> ><Apple class="h-4 w-4 text-platform-ios" />
<span <span
v-if="avatarDialog.platformInfo.ios" v-if="avatarDialog.platformInfo.ios"
:class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']" :class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]"
>{{ avatarDialog.platformInfo.ios.performanceRating }}</span >{{ avatarDialog.platformInfo.ios.performanceRating }}</span
> >
<span <span
v-if="avatarDialog.fileAnalysis.ios?._fileSize" v-if="avatarDialog.fileAnalysis.ios?._fileSize"
:class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']" :class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]"
>{{ avatarDialog.fileAnalysis.ios._fileSize }}</span >{{ avatarDialog.fileAnalysis.ios._fileSize }}</span
> >
</Badge> </Badge>
@@ -738,6 +748,10 @@
} }
); );
/**
*
* @param tabName
*/
function handleAvatarDialogTab(tabName) { function handleAvatarDialogTab(tabName) {
avatarDialog.value.lastActiveTab = tabName; avatarDialog.value.lastActiveTab = tabName;
if (tabName === 'JSON') { if (tabName === 'JSON') {
@@ -745,10 +759,17 @@
} }
} }
/**
*
*/
function loadLastActiveTab() { function loadLastActiveTab() {
handleAvatarDialogTab(avatarDialog.value.lastActiveTab); handleAvatarDialogTab(avatarDialog.value.lastActiveTab);
} }
/**
*
* @param tabName
*/
function avatarDialogTabClick(tabName) { function avatarDialogTabClick(tabName) {
if (tabName === avatarDialog.value.lastActiveTab) { if (tabName === avatarDialog.value.lastActiveTab) {
if (tabName === 'JSON') { if (tabName === 'JSON') {
@@ -759,10 +780,17 @@
handleAvatarDialogTab(tabName); handleAvatarDialogTab(tabName);
} }
/**
*
* @param imageId
*/
function getImageUrlFromImageId(imageId) { function getImageUrlFromImageId(imageId) {
return `${AppDebug.endpointDomain}/file/${imageId}/1/`; return `${AppDebug.endpointDomain}/file/${imageId}/1/`;
} }
/**
*
*/
function handleDialogOpen() { function handleDialogOpen() {
setAvatarTagsDialog.value.visible = false; setAvatarTagsDialog.value.visible = false;
avatarDialog.value.timeSpent = 0; avatarDialog.value.timeSpent = 0;
@@ -772,6 +800,9 @@
getAvatarMemo(); getAvatarMemo();
} }
/**
*
*/
function getAvatarTimeSpent() { function getAvatarTimeSpent() {
const D = avatarDialog.value; const D = avatarDialog.value;
avatarDialog.value.timeSpent = 0; avatarDialog.value.timeSpent = 0;
@@ -785,6 +816,9 @@
}); });
} }
/**
*
*/
function getAvatarMemo() { function getAvatarMemo() {
const D = avatarDialog.value; const D = avatarDialog.value;
database.getAvatarMemoDB(D.id).then((res) => { database.getAvatarMemoDB(D.id).then((res) => {
@@ -794,6 +828,10 @@
}); });
} }
/**
*
* @param command
*/
function avatarDialogCommand(command) { function avatarDialogCommand(command) {
const D = avatarDialog.value; const D = avatarDialog.value;
switch (command) { switch (command) {
@@ -988,10 +1026,17 @@
} }
} }
/**
*
*/
function showChangeAvatarImageDialog() { function showChangeAvatarImageDialog() {
document.getElementById('AvatarImageUploadButton').click(); document.getElementById('AvatarImageUploadButton').click();
} }
/**
*
* @param e
*/
function onFileChangeAvatarImage(e) { function onFileChangeAvatarImage(e) {
const { file, clearInput } = handleImageUploadInput(e, { const { file, clearInput } = handleImageUploadInput(e, {
inputSelector: '#AvatarImageUploadButton', inputSelector: '#AvatarImageUploadButton',
@@ -1010,6 +1055,10 @@
cropDialogOpen.value = true; cropDialogOpen.value = true;
} }
/**
*
* @param blob
*/
async function onCropConfirmAvatar(blob) { async function onCropConfirmAvatar(blob) {
changeAvatarImageLoading.value = true; changeAvatarImageLoading.value = true;
try { try {
@@ -1047,6 +1096,10 @@
} }
} }
/**
*
* @param avatar
*/
function promptChangeAvatarDescription(avatar) { function promptChangeAvatarDescription(avatar) {
modalStore modalStore
.prompt({ .prompt({
@@ -1075,6 +1128,10 @@
.catch(() => {}); .catch(() => {});
} }
/**
*
* @param avatar
*/
function promptRenameAvatar(avatar) { function promptRenameAvatar(avatar) {
modalStore modalStore
.prompt({ .prompt({
@@ -1103,6 +1160,9 @@
.catch(() => {}); .catch(() => {});
} }
/**
*
*/
function onAvatarMemoChange() { function onAvatarMemoChange() {
if (memo.value) { if (memo.value) {
database.setAvatarMemo({ database.setAvatarMemo({
@@ -1115,18 +1175,33 @@
} }
} }
/**
*
* @param id
*/
function copyAvatarId(id) { function copyAvatarId(id) {
copyToClipboard(id); copyToClipboard(id);
} }
/**
*
* @param id
*/
function copyAvatarUrl(id) { function copyAvatarUrl(id) {
copyToClipboard(`https://vrchat.com/home/avatar/${id}`); copyToClipboard(`https://vrchat.com/home/avatar/${id}`);
} }
/**
*
*/
function refreshAvatarDialogTreeData() { function refreshAvatarDialogTreeData() {
treeData.value = formatJsonVars(avatarDialog.value.ref); treeData.value = formatJsonVars(avatarDialog.value.ref);
} }
/**
*
* @param avatarId
*/
function showSetAvatarTagsDialog(avatarId) { function showSetAvatarTagsDialog(avatarId) {
const D = setAvatarTagsDialog.value; const D = setAvatarTagsDialog.value;
D.selectedAvatarIds = [avatarId]; D.selectedAvatarIds = [avatarId];
@@ -1175,6 +1250,9 @@
}); });
} }
/**
*
*/
function showSetAvatarStylesDialog() { function showSetAvatarStylesDialog() {
const D = setAvatarStylesDialog.value; const D = setAvatarStylesDialog.value;
D.visible = true; D.visible = true;
@@ -1199,10 +1277,17 @@
}); });
} }
/**
*
*/
function displayAvatarGalleryUpload() { function displayAvatarGalleryUpload() {
document.getElementById('AvatarGalleryUploadButton').click(); document.getElementById('AvatarGalleryUploadButton').click();
} }
/**
*
* @param e
*/
function onFileChangeAvatarGallery(e) { function onFileChangeAvatarGallery(e) {
const { file, clearInput } = handleImageUploadInput(e, { const { file, clearInput } = handleImageUploadInput(e, {
inputSelector: '#AvatarGalleryUploadButton', inputSelector: '#AvatarGalleryUploadButton',

4
src/components/dialogs/UserDialog/UserSummaryHeader.vue
View File

@@ -144,8 +144,8 @@
</Badge> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS"> <TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
<Badge variant="outline" class="text-[#8e8e93] border-[#8e8e93]"> <Badge variant="outline" class="text-platform-ios border-platform-ios">
<Apple class="m-0.5 text-[#8e8e93]" /> <Apple class="m-0.5 text-platform-ios" />
</Badge> </Badge>
</TooltipWrapper> </TooltipWrapper>
<Badge v-else-if="userDialog.ref.$platform" variant="outline" class="x-tag-platform-other"> <Badge v-else-if="userDialog.ref.$platform" variant="outline" class="x-tag-platform-other">

11
src/components/dialogs/WorldDialog/WorldDialog.vue
View File

@@ -83,13 +83,18 @@
<TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS"> <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
<Badge <Badge
class="text-[#8e8e93] border-[#8e8e93]" class="text-platform-ios border-platform-ios"
variant="outline" variant="outline"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<Apple class="h-4 w-4 text-[#8e8e93]" /> <Apple class="h-4 w-4 text-platform-ios" />
<span <span
v-if="worldDialog.fileAnalysis.ios?._fileSize" v-if="worldDialog.fileAnalysis.ios?._fileSize"
:class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"> :class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]">
{{ worldDialog.fileAnalysis.ios._fileSize }} {{ worldDialog.fileAnalysis.ios._fileSize }}
</span> </span>
</Badge> </Badge>

41
src/styles/globals.css
View File

@@ -48,6 +48,27 @@
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0); --sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0); --sidebar-ring: oklch(0.708 0 0);
/* VRChat Status Colors */
--status-online: #67c23a;
--status-joinme: #00b8ff;
--status-askme: #ff9500;
--status-busy: #ff2c2c;
--status-active: #f4e05e;
--status-offline: #909399;
--status-offline-alt: #808080;
--status-offline-card: #737f8d;
/* Platform Colors */
--platform-pc: #0078d4;
--platform-quest: #3ddc84;
--platform-ios: #8e8e93;
/* Favorite Group Visibility Colors */
--visibility-public: #22c55e;
--visibility-friends: #0ea5e9;
--visibility-private: #ef4444;
--font-western-primary: 'Inter Variable'; --font-western-primary: 'Inter Variable';
--font-western: --font-western:
'ellipsis-font', -apple-system, var(--font-western-primary), 'Segoe UI', 'ellipsis-font', -apple-system, var(--font-western-primary), 'Segoe UI',
@@ -158,6 +179,26 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
/* VRChat Status Colors */
--color-status-online: var(--status-online);
--color-status-joinme: var(--status-joinme);
--color-status-askme: var(--status-askme);
--color-status-busy: var(--status-busy);
--color-status-active: var(--status-active);
--color-status-offline: var(--status-offline);
--color-status-offline-alt: var(--status-offline-alt);
--color-status-offline-card: var(--status-offline-card);
/* Platform Colors */
--color-platform-pc: var(--platform-pc);
--color-platform-quest: var(--platform-quest);
--color-platform-ios: var(--platform-ios);
/* Favorite Group Visibility Colors */
--color-visibility-public: var(--visibility-public);
--color-visibility-friends: var(--visibility-friends);
--color-visibility-private: var(--visibility-private);
} }
@layer base { @layer base {

6
src/views/Favorites/FavoritesAvatar.vue
View File

@@ -1767,15 +1767,15 @@
} }
.group-item--public { .group-item--public {
border-left: 3px solid #22c55e; border-left: 3px solid var(--visibility-public);
} }
.group-item--friends { .group-item--friends {
border-left: 3px solid #0ea5e9; border-left: 3px solid var(--visibility-friends);
} }
.group-item--private { .group-item--private {
border-left: 3px solid #ef4444; border-left: 3px solid var(--visibility-private);
} }
.group-item--placeholder { .group-item--placeholder {

6
src/views/Favorites/FavoritesFriend.vue
View File

@@ -1407,15 +1407,15 @@
} }
.group-item--public { .group-item--public {
border-left: 3px solid #22c55e; border-left: 3px solid var(--visibility-public);
} }
.group-item--friends { .group-item--friends {
border-left: 3px solid #0ea5e9; border-left: 3px solid var(--visibility-friends);
} }
.group-item--private { .group-item--private {
border-left: 3px solid #ef4444; border-left: 3px solid var(--visibility-private);
} }
.group-item.is-active { .group-item.is-active {

6
src/views/Favorites/FavoritesWorld.vue
View File

@@ -1638,15 +1638,15 @@
} }
.group-item--public { .group-item--public {
border-left: 3px solid #22c55e; border-left: 3px solid var(--visibility-public);
} }
.group-item--friends { .group-item--friends {
border-left: 3px solid #0ea5e9; border-left: 3px solid var(--visibility-friends);
} }
.group-item--private { .group-item--private {
border-left: 3px solid #ef4444; border-left: 3px solid var(--visibility-private);
} }
.group-item.is-active { .group-item.is-active {

17
src/views/Favorites/dialogs/avatarImportColumns.jsx
View File

@@ -5,7 +5,12 @@ import { i18n } from '../../../plugin';
const { t } = i18n.global; const { t } = i18n.global;
export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullscreenImage }) => [ export const createColumns = ({
onShowAvatar,
onShowUser,
onDelete,
onShowFullscreenImage
}) => [
{ {
id: 'image', id: 'image',
header: () => t('table.import.image'), header: () => t('table.import.image'),
@@ -85,13 +90,13 @@ export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullsc
const label = status const label = status
? status.charAt(0).toUpperCase() + status.slice(1) ? status.charAt(0).toUpperCase() + status.slice(1)
: ''; : '';
const color = const colorClass =
status === 'public' status === 'public'
? '#67c23a' ? 'text-status-online'
: status === 'private' : status === 'private'
? '#f56c6c' ? 'text-destructive'
: undefined; : '';
return <span style={{ color }}>{label}</span>; return <span class={colorClass}>{label}</span>;
} }
}, },
{ {

17
src/views/Favorites/dialogs/worldImportColumns.jsx
View File

@@ -5,7 +5,12 @@ import { i18n } from '../../../plugin';
const { t } = i18n.global; const { t } = i18n.global;
export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscreenImage }) => [ export const createColumns = ({
onShowWorld,
onShowUser,
onDelete,
onShowFullscreenImage
}) => [
{ {
id: 'image', id: 'image',
header: () => t('table.import.image'), header: () => t('table.import.image'),
@@ -85,13 +90,13 @@ export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscr
const label = status const label = status
? status.charAt(0).toUpperCase() + status.slice(1) ? status.charAt(0).toUpperCase() + status.slice(1)
: ''; : '';
const color = const colorClass =
status === 'public' status === 'public'
? '#67c23a' ? 'text-status-online'
: status === 'private' : status === 'private'
? '#f56c6c' ? 'text-destructive'
: undefined; : '';
return <span style={{ color }}>{label}</span>; return <span class={colorClass}>{label}</span>;
} }
}, },
{ {

34
src/views/FriendsLocations/components/FriendsLocationsCard.vue
View File

@@ -277,51 +277,51 @@
} }
.friend-card__status-dot--online { .friend-card__status-dot--online {
background: #67c23a; background: var(--status-online);
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #67c23a 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-online) 40%, transparent);
} }
.friend-card__status-dot--active { .friend-card__status-dot--active {
background: transparent; background: transparent;
border: calc(2px * var(--card-scale)) solid #67c23a; border: calc(2px * var(--card-scale)) solid var(--status-online);
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #67c23a 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-online) 40%, transparent);
} }
.friend-card__status-dot--active-join { .friend-card__status-dot--active-join {
background: transparent; background: transparent;
border: calc(2px * var(--card-scale)) solid #00b8ff; border: calc(2px * var(--card-scale)) solid var(--status-joinme);
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #00b8ff 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-joinme) 40%, transparent);
} }
.friend-card__status-dot--active-ask { .friend-card__status-dot--active-ask {
background: transparent; background: transparent;
border: calc(2px * var(--card-scale)) solid #ff9500; border: calc(2px * var(--card-scale)) solid var(--status-askme);
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff9500 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-askme) 40%, transparent);
} }
.friend-card__status-dot--active-busy { .friend-card__status-dot--active-busy {
background: transparent; background: transparent;
border: calc(2px * var(--card-scale)) solid #ff2c2c; border: calc(2px * var(--card-scale)) solid var(--status-busy);
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff2c2c 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-busy) 40%, transparent);
} }
.friend-card__status-dot--join { .friend-card__status-dot--join {
background: #00b8ff; background: var(--status-joinme);
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #00b8ff 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-joinme) 40%, transparent);
} }
.friend-card__status-dot--busy { .friend-card__status-dot--busy {
background: #ff2c2c; background: var(--status-busy);
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff2c2c 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-busy) 40%, transparent);
} }
.friend-card__status-dot--ask { .friend-card__status-dot--ask {
background: #ff9500; background: var(--status-askme);
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff9500 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-askme) 40%, transparent);
} }
.friend-card__status-dot--offline { .friend-card__status-dot--offline {
background: #737f8d; background: var(--status-offline-card);
} }
.friend-card__body { .friend-card__body {

2
src/views/MyAvatars/columns.jsx
View File

@@ -193,7 +193,7 @@ export function getColumns({
)} )}
{platforms.isIos && ( {platforms.isIos && (
<Badge <Badge
class="text-[#8e8e93] border-[#8e8e93]" class="text-platform-ios border-platform-ios"
variant="outline" variant="outline"
> >
<Apple class="h-3.5 w-3.5" /> <Apple class="h-3.5 w-3.5" />

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

@@ -25,16 +25,13 @@
class="absolute top-1 right-1 flex -space-x-1"> class="absolute top-1 right-1 flex -space-x-1">
<span <span
v-if="platformInfo.isPC" v-if="platformInfo.isPC"
class="size-2.5 rounded-full border opacity-70" class="size-2.5 rounded-full border opacity-70 bg-platform-pc" />
style="background: #0078d4" />
<span <span
v-if="platformInfo.isQuest" v-if="platformInfo.isQuest"
class="size-2.5 rounded-full border opacity-70" class="size-2.5 rounded-full border opacity-70 bg-platform-quest" />
style="background: #3ddc84" />
<span <span
v-if="platformInfo.isIos" v-if="platformInfo.isIos"
class="size-2.5 rounded-full border opacity-70" class="size-2.5 rounded-full border opacity-70 bg-platform-ios" />
style="background: #8e8e93" />
</div> </div>
</div> </div>
<div <div
@@ -175,7 +172,10 @@
<Badge v-if="platformInfo.isQuest" class="x-tag-platform-quest" variant="outline"> <Badge v-if="platformInfo.isQuest" class="x-tag-platform-quest" variant="outline">
<Smartphone class="h-3 w-3" /> <Smartphone class="h-3 w-3" />
</Badge> </Badge>
<Badge v-if="platformInfo.isIos" class="text-[#8e8e93] border-[#8e8e93]" variant="outline"> <Badge
v-if="platformInfo.isIos"
class="text-platform-ios border-platform-ios"
variant="outline">
<Apple class="h-3 w-3" /> <Apple class="h-3 w-3" />
</Badge> </Badge>
</div> </div>

9
src/views/PlayerList/PlayerList.vue
View File

@@ -78,11 +78,14 @@
</Badge> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS"> <TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
<Badge class="text-[#8e8e93] border-[#8e8e93]" variant="outline" style="margin-right: 5px" <Badge
><Apple class="h-4 w-4 text-[#8e8e93]" /> class="text-platform-ios border-platform-ios"
variant="outline"
style="margin-right: 5px"
><Apple class="h-4 w-4 text-platform-ios" />
<span <span
v-if="currentInstanceWorld.fileAnalysis.ios?._fileSize" v-if="currentInstanceWorld.fileAnalysis.ios?._fileSize"
:class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']" :class="['x-grey', 'x-tag-border-left', 'text-platform-ios', 'border-platform-ios']"
>{{ currentInstanceWorld.fileAnalysis.ios._fileSize }}</span >{{ currentInstanceWorld.fileAnalysis.ios._fileSize }}</span
> >
</Badge> </Badge>

16
src/vr/Vr.vue
View File

@@ -1305,7 +1305,7 @@
<span v-text="feed.avatar.name" style="margin-left: 10px"></span> <span v-text="feed.avatar.name" style="margin-left: 10px"></span>
<span <span
v-if="feed.avatar.releaseStatus === 'public'" v-if="feed.avatar.releaseStatus === 'public'"
style="margin-left: 10px; color: #67c23a" style="margin-left: 10px; color: var(--status-online)"
>(Public)</span >(Public)</span
> >
<span <span
@@ -1353,11 +1353,19 @@
</template> </template>
<template v-else-if="feed.type === 'OnPlayerJoined'"> <template v-else-if="feed.type === 'OnPlayerJoined'">
<span style="margin-left: 10px; color: #a3a3a3">has joined</span> <span style="margin-left: 10px; color: #a3a3a3">has joined</span>
<span v-if="feed.platform === 'Desktop'" style="color: #00b8ff; margin-left: 10px" <span
v-if="feed.platform === 'Desktop'"
style="color: var(--status-joinme); margin-left: 10px"
>Desktop</span >Desktop</span
> >
<span v-else-if="feed.platform === 'VR'" style="color: #00b8ff; margin-left: 10px">VR</span> <span
<span v-else-if="feed.platform === 'Quest'" style="color: #67c23a; margin-left: 10px" v-else-if="feed.platform === 'VR'"
style="color: var(--status-joinme); margin-left: 10px"
>VR</span
>
<span
v-else-if="feed.platform === 'Quest'"
style="color: var(--platform-quest); margin-left: 10px"
>Android</span >Android</span
> >
<span v-else-if="feed.platform === 'iOS'" style="color: #c7c7ce; margin-left: 10px" <span v-else-if="feed.platform === 'iOS'" style="color: #c7c7ce; margin-left: 10px"

26
src/vr/vr.css
View File

@@ -31,6 +31,20 @@ body {
--font-primary-cjk: --font-primary-cjk:
'Noto Sans JP Variable', 'Noto Sans SC Variable', 'Noto Sans JP Variable', 'Noto Sans SC Variable',
'Noto Sans KR Variable', 'Noto Sans TC Variable'; 'Noto Sans KR Variable', 'Noto Sans TC Variable';
/* VRChat Status Colors (duplicated from globals.css for VR panel independence) */
--status-online: #67c23a;
--status-joinme: #00b8ff;
--status-askme: #ff9500;
--status-busy: #ff2c2c;
--status-active: #f4e05e;
--status-offline: #909399;
--status-offline-alt: #808080;
/* Platform Colors */
--platform-pc: #0078d4;
--platform-quest: #3ddc84;
--platform-ios: #8e8e93;
} }
:root[lang='zh-CN'] { :root[lang='zh-CN'] {
--font-primary-cjk: --font-primary-cjk:
@@ -387,30 +401,30 @@ i.x-user-status {
display: inline-block; display: inline-block;
width: 13px; width: 13px;
height: 13px; height: 13px;
background: #808080; background: var(--status-offline-alt);
border-radius: 50%; border-radius: 50%;
} }
i.x-user-status.active { i.x-user-status.active {
background: #f4e05e; background: var(--status-active);
} }
i.x-user-status.online { i.x-user-status.online {
background: #67c23a; background: var(--status-online);
} }
i.x-user-status.joinme { i.x-user-status.joinme {
background: #00b8ff; background: var(--status-joinme);
mask-image: url(/images/masks/joinme.svg); mask-image: url(/images/masks/joinme.svg);
} }
i.x-user-status.askme { i.x-user-status.askme {
background: #ff9500; background: var(--status-askme);
mask-image: url(/images/masks/askme.svg); mask-image: url(/images/masks/askme.svg);
} }
i.x-user-status.busy { i.x-user-status.busy {
background: #ff2c2c; background: var(--status-busy);
mask-image: url(/images/masks/busy.svg); mask-image: url(/images/masks/busy.svg);
} }