diff --git a/src/app.css b/src/app.css index c6bf1341..a60d7710 100644 --- a/src/app.css +++ b/src/app.css @@ -129,35 +129,35 @@ img.friends-list-avatar { width: 9px; height: 9px; content: ''; - background: #909399; + background: var(--status-offline); border-radius: 50%; } .x-friend-item .status-icon.active::after { - background: #f4e05e; + background: var(--status-active); } .x-friend-item .status-icon.online::after { - background: #67c23a; + background: var(--status-online); } .x-friend-item .status-icon.joinme::after { - background: #00b8ff; + background: var(--status-joinme); mask-image: url(/images/masks/joinme.svg); } .x-friend-item .status-icon.askme::after { - background: #ff9500; + background: var(--status-askme); mask-image: url(/images/masks/askme.svg); } .x-friend-item .status-icon.busy::after { - background: #ff2c2c; + background: var(--status-busy); mask-image: url(/images/masks/busy.svg); } .x-friend-item .status-icon.offline::after { - background: #909399; + background: var(--status-offline); } .x-friend-item > .detail { @@ -211,57 +211,57 @@ i.x-status-icon { display: inline-block; width: 10px; height: 10px; - background: #808080; + background: var(--status-offline-alt); border-radius: 50%; } i.x-user-status.active { - background: #f4e05e; + background: var(--status-active); } i.x-user-status.online { - background: #67c23a; + background: var(--status-online); } i.x-user-status.joinme { - background: #00b8ff; + background: var(--status-joinme); mask-image: url(/images/masks/joinme.svg); } i.x-user-status.askme { - background: #ff9500; + background: var(--status-askme); mask-image: url(/images/masks/askme.svg); } i.x-user-status.busy { - background: #ff2c2c; + background: var(--status-busy); mask-image: url(/images/masks/busy.svg); } i.x-status-icon.green { - background: #67c23a; + background: var(--status-online); } i.x-status-icon.blue { - background: #00b8ff; + background: var(--status-joinme); } i.x-status-icon.orange { - background: #ff9500; + background: var(--status-askme); } i.x-status-icon.red { - background: #ff2c2c; + background: var(--status-busy); } .x-tag-platform-pc { - color: #0078d4; - border-color: #0078d4 !important; + color: var(--platform-pc); + border-color: var(--platform-pc) !important; } .x-tag-platform-quest { - color: #3ddc84; - border-color: #3ddc84 !important; + color: var(--platform-quest); + border-color: var(--platform-quest) !important; } .x-tag-friend { diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue index de22cc79..f06c30da 100644 --- a/src/components/StatusBar.vue +++ b/src/components/StatusBar.vue @@ -593,11 +593,11 @@ } .dot-green { - background: #67c23a; + background: var(--status-online); } .dot-gray { - background: #808080; + background: var(--status-offline-alt); } .status-label { diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue index d1c7e5c4..207994bd 100644 --- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue +++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue @@ -80,18 +80,28 @@ + > {{ avatarDialog.platformInfo.ios.performanceRating }} {{ avatarDialog.fileAnalysis.ios._fileSize }} @@ -738,6 +748,10 @@ } ); + /** + * + * @param tabName + */ function handleAvatarDialogTab(tabName) { avatarDialog.value.lastActiveTab = tabName; if (tabName === 'JSON') { @@ -745,10 +759,17 @@ } } + /** + * + */ function loadLastActiveTab() { handleAvatarDialogTab(avatarDialog.value.lastActiveTab); } + /** + * + * @param tabName + */ function avatarDialogTabClick(tabName) { if (tabName === avatarDialog.value.lastActiveTab) { if (tabName === 'JSON') { @@ -759,10 +780,17 @@ handleAvatarDialogTab(tabName); } + /** + * + * @param imageId + */ function getImageUrlFromImageId(imageId) { return `${AppDebug.endpointDomain}/file/${imageId}/1/`; } + /** + * + */ function handleDialogOpen() { setAvatarTagsDialog.value.visible = false; avatarDialog.value.timeSpent = 0; @@ -772,6 +800,9 @@ getAvatarMemo(); } + /** + * + */ function getAvatarTimeSpent() { const D = avatarDialog.value; avatarDialog.value.timeSpent = 0; @@ -785,6 +816,9 @@ }); } + /** + * + */ function getAvatarMemo() { const D = avatarDialog.value; database.getAvatarMemoDB(D.id).then((res) => { @@ -794,6 +828,10 @@ }); } + /** + * + * @param command + */ function avatarDialogCommand(command) { const D = avatarDialog.value; switch (command) { @@ -988,10 +1026,17 @@ } } + /** + * + */ function showChangeAvatarImageDialog() { document.getElementById('AvatarImageUploadButton').click(); } + /** + * + * @param e + */ function onFileChangeAvatarImage(e) { const { file, clearInput } = handleImageUploadInput(e, { inputSelector: '#AvatarImageUploadButton', @@ -1010,6 +1055,10 @@ cropDialogOpen.value = true; } + /** + * + * @param blob + */ async function onCropConfirmAvatar(blob) { changeAvatarImageLoading.value = true; try { @@ -1047,6 +1096,10 @@ } } + /** + * + * @param avatar + */ function promptChangeAvatarDescription(avatar) { modalStore .prompt({ @@ -1075,6 +1128,10 @@ .catch(() => {}); } + /** + * + * @param avatar + */ function promptRenameAvatar(avatar) { modalStore .prompt({ @@ -1103,6 +1160,9 @@ .catch(() => {}); } + /** + * + */ function onAvatarMemoChange() { if (memo.value) { database.setAvatarMemo({ @@ -1115,18 +1175,33 @@ } } + /** + * + * @param id + */ function copyAvatarId(id) { copyToClipboard(id); } + /** + * + * @param id + */ function copyAvatarUrl(id) { copyToClipboard(`https://vrchat.com/home/avatar/${id}`); } + /** + * + */ function refreshAvatarDialogTreeData() { treeData.value = formatJsonVars(avatarDialog.value.ref); } + /** + * + * @param avatarId + */ function showSetAvatarTagsDialog(avatarId) { const D = setAvatarTagsDialog.value; D.selectedAvatarIds = [avatarId]; @@ -1175,6 +1250,9 @@ }); } + /** + * + */ function showSetAvatarStylesDialog() { const D = setAvatarStylesDialog.value; D.visible = true; @@ -1199,10 +1277,17 @@ }); } + /** + * + */ function displayAvatarGalleryUpload() { document.getElementById('AvatarGalleryUploadButton').click(); } + /** + * + * @param e + */ function onFileChangeAvatarGallery(e) { const { file, clearInput } = handleImageUploadInput(e, { inputSelector: '#AvatarGalleryUploadButton', diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue index ab0e2327..35dd0035 100644 --- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue +++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue @@ -144,8 +144,8 @@ - - + + diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue index 00269587..9436cf77 100644 --- a/src/components/dialogs/WorldDialog/WorldDialog.vue +++ b/src/components/dialogs/WorldDialog/WorldDialog.vue @@ -83,13 +83,18 @@ - + + :class="[ + 'x-grey', + 'x-tag-border-left', + 'text-platform-ios', + 'border-platform-ios' + ]"> {{ worldDialog.fileAnalysis.ios._fileSize }} diff --git a/src/styles/globals.css b/src/styles/globals.css index 9b444c92..703b2f85 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -48,6 +48,27 @@ --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 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: 'ellipsis-font', -apple-system, var(--font-western-primary), 'Segoe UI', @@ -158,6 +179,26 @@ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --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 { diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue index 12328693..ee3ea95f 100644 --- a/src/views/Favorites/FavoritesAvatar.vue +++ b/src/views/Favorites/FavoritesAvatar.vue @@ -1767,15 +1767,15 @@ } .group-item--public { - border-left: 3px solid #22c55e; + border-left: 3px solid var(--visibility-public); } .group-item--friends { - border-left: 3px solid #0ea5e9; + border-left: 3px solid var(--visibility-friends); } .group-item--private { - border-left: 3px solid #ef4444; + border-left: 3px solid var(--visibility-private); } .group-item--placeholder { diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue index 65d73b98..9edf14c7 100644 --- a/src/views/Favorites/FavoritesFriend.vue +++ b/src/views/Favorites/FavoritesFriend.vue @@ -1407,15 +1407,15 @@ } .group-item--public { - border-left: 3px solid #22c55e; + border-left: 3px solid var(--visibility-public); } .group-item--friends { - border-left: 3px solid #0ea5e9; + border-left: 3px solid var(--visibility-friends); } .group-item--private { - border-left: 3px solid #ef4444; + border-left: 3px solid var(--visibility-private); } .group-item.is-active { diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue index 58ee3c92..aa691c6a 100644 --- a/src/views/Favorites/FavoritesWorld.vue +++ b/src/views/Favorites/FavoritesWorld.vue @@ -1638,15 +1638,15 @@ } .group-item--public { - border-left: 3px solid #22c55e; + border-left: 3px solid var(--visibility-public); } .group-item--friends { - border-left: 3px solid #0ea5e9; + border-left: 3px solid var(--visibility-friends); } .group-item--private { - border-left: 3px solid #ef4444; + border-left: 3px solid var(--visibility-private); } .group-item.is-active { diff --git a/src/views/Favorites/dialogs/avatarImportColumns.jsx b/src/views/Favorites/dialogs/avatarImportColumns.jsx index d3f2834e..2d7aaa56 100644 --- a/src/views/Favorites/dialogs/avatarImportColumns.jsx +++ b/src/views/Favorites/dialogs/avatarImportColumns.jsx @@ -5,7 +5,12 @@ import { i18n } from '../../../plugin'; const { t } = i18n.global; -export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullscreenImage }) => [ +export const createColumns = ({ + onShowAvatar, + onShowUser, + onDelete, + onShowFullscreenImage +}) => [ { id: 'image', header: () => t('table.import.image'), @@ -85,13 +90,13 @@ export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullsc const label = status ? status.charAt(0).toUpperCase() + status.slice(1) : ''; - const color = + const colorClass = status === 'public' - ? '#67c23a' + ? 'text-status-online' : status === 'private' - ? '#f56c6c' - : undefined; - return {label}; + ? 'text-destructive' + : ''; + return {label}; } }, { diff --git a/src/views/Favorites/dialogs/worldImportColumns.jsx b/src/views/Favorites/dialogs/worldImportColumns.jsx index 183f1485..0313578d 100644 --- a/src/views/Favorites/dialogs/worldImportColumns.jsx +++ b/src/views/Favorites/dialogs/worldImportColumns.jsx @@ -5,7 +5,12 @@ import { i18n } from '../../../plugin'; const { t } = i18n.global; -export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscreenImage }) => [ +export const createColumns = ({ + onShowWorld, + onShowUser, + onDelete, + onShowFullscreenImage +}) => [ { id: 'image', header: () => t('table.import.image'), @@ -85,13 +90,13 @@ export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscr const label = status ? status.charAt(0).toUpperCase() + status.slice(1) : ''; - const color = + const colorClass = status === 'public' - ? '#67c23a' + ? 'text-status-online' : status === 'private' - ? '#f56c6c' - : undefined; - return {label}; + ? 'text-destructive' + : ''; + return {label}; } }, { diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue index 3c9a9017..aa80f2f3 100644 --- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue +++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue @@ -277,51 +277,51 @@ } .friend-card__status-dot--online { - background: #67c23a; - box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #67c23a 40%, transparent); + background: var(--status-online); + box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-online) 40%, transparent); } .friend-card__status-dot--active { background: transparent; - border: calc(2px * var(--card-scale)) solid #67c23a; - box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #67c23a 40%, transparent); + border: calc(2px * var(--card-scale)) solid var(--status-online); + box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-online) 40%, transparent); } .friend-card__status-dot--active-join { background: transparent; - border: calc(2px * var(--card-scale)) solid #00b8ff; - box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #00b8ff 40%, transparent); + border: calc(2px * var(--card-scale)) solid var(--status-joinme); + box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-joinme) 40%, transparent); } .friend-card__status-dot--active-ask { background: transparent; - border: calc(2px * var(--card-scale)) solid #ff9500; - box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff9500 40%, transparent); + border: calc(2px * var(--card-scale)) solid var(--status-askme); + box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-askme) 40%, transparent); } .friend-card__status-dot--active-busy { background: transparent; - border: calc(2px * var(--card-scale)) solid #ff2c2c; - box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff2c2c 40%, transparent); + border: calc(2px * var(--card-scale)) solid var(--status-busy); + box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-busy) 40%, transparent); } .friend-card__status-dot--join { - background: #00b8ff; - box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #00b8ff 40%, transparent); + background: var(--status-joinme); + box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-joinme) 40%, transparent); } .friend-card__status-dot--busy { - background: #ff2c2c; - box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff2c2c 40%, transparent); + background: var(--status-busy); + box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-busy) 40%, transparent); } .friend-card__status-dot--ask { - background: #ff9500; - box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff9500 40%, transparent); + background: var(--status-askme); + box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, var(--status-askme) 40%, transparent); } .friend-card__status-dot--offline { - background: #737f8d; + background: var(--status-offline-card); } .friend-card__body { diff --git a/src/views/MyAvatars/columns.jsx b/src/views/MyAvatars/columns.jsx index 6b817c41..43d55bdd 100644 --- a/src/views/MyAvatars/columns.jsx +++ b/src/views/MyAvatars/columns.jsx @@ -193,7 +193,7 @@ export function getColumns({ )} {platforms.isIos && ( diff --git a/src/views/MyAvatars/components/MyAvatarCard.vue b/src/views/MyAvatars/components/MyAvatarCard.vue index 897e5cd6..e6eaae1b 100644 --- a/src/views/MyAvatars/components/MyAvatarCard.vue +++ b/src/views/MyAvatars/components/MyAvatarCard.vue @@ -25,16 +25,13 @@ class="absolute top-1 right-1 flex -space-x-1"> + class="size-2.5 rounded-full border opacity-70 bg-platform-pc" /> + class="size-2.5 rounded-full border opacity-70 bg-platform-quest" /> + class="size-2.5 rounded-full border opacity-70 bg-platform-ios" />
- +
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue index a5e4253b..1b6df228 100644 --- a/src/views/PlayerList/PlayerList.vue +++ b/src/views/PlayerList/PlayerList.vue @@ -78,11 +78,14 @@ - + {{ currentInstanceWorld.fileAnalysis.ios._fileSize }} diff --git a/src/vr/Vr.vue b/src/vr/Vr.vue index e05ba380..e4daafdf 100644 --- a/src/vr/Vr.vue +++ b/src/vr/Vr.vue @@ -1305,7 +1305,7 @@ (Public)