MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-12 19:33: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;
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 {

4
src/components/StatusBar.vue
View File

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

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

@@ -80,18 +80,28 @@
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
<Badge
class="text-[#8e8e93] border-[#8e8e93]"
class="text-platform-ios border-platform-ios"
variant="outline"
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
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
>
<span
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
>
</Badge>
@@ -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',

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

@@ -144,8 +144,8 @@
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
<Badge variant="outline" class="text-[#8e8e93] border-[#8e8e93]">
<Apple class="m-0.5 text-[#8e8e93]" />
<Badge variant="outline" class="text-platform-ios border-platform-ios">
<Apple class="m-0.5 text-platform-ios" />
</Badge>
</TooltipWrapper>
<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">
<Badge
class="text-[#8e8e93] border-[#8e8e93]"
class="text-platform-ios border-platform-ios"
variant="outline"
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
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 }}
</span>
</Badge>

41
src/styles/globals.css
View File

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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 <span style={{ color }}>{label}</span>;
? 'text-destructive'
: '';
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;
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 <span style={{ color }}>{label}</span>;
? 'text-destructive'
: '';
return <span class={colorClass}>{label}</span>;
}
},
{

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

@@ -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 {

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

@@ -193,7 +193,7 @@ export function getColumns({
)}
{platforms.isIos && (
<Badge
class="text-[#8e8e93] border-[#8e8e93]"
class="text-platform-ios border-platform-ios"
variant="outline"
>
<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">
<span
v-if="platformInfo.isPC"
class="size-2.5 rounded-full border opacity-70"
style="background: #0078d4" />
class="size-2.5 rounded-full border opacity-70 bg-platform-pc" />
<span
v-if="platformInfo.isQuest"
class="size-2.5 rounded-full border opacity-70"
style="background: #3ddc84" />
class="size-2.5 rounded-full border opacity-70 bg-platform-quest" />
<span
v-if="platformInfo.isIos"
class="size-2.5 rounded-full border opacity-70"
style="background: #8e8e93" />
class="size-2.5 rounded-full border opacity-70 bg-platform-ios" />
</div>
</div>
<div
@@ -175,7 +172,10 @@
<Badge v-if="platformInfo.isQuest" class="x-tag-platform-quest" variant="outline">
<Smartphone class="h-3 w-3" />
</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" />
</Badge>
</div>

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

@@ -78,11 +78,14 @@
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
<Badge class="text-[#8e8e93] border-[#8e8e93]" variant="outline" style="margin-right: 5px"
><Apple class="h-4 w-4 text-[#8e8e93]" />
<Badge
class="text-platform-ios border-platform-ios"
variant="outline"
style="margin-right: 5px"
><Apple class="h-4 w-4 text-platform-ios" />
<span
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
>
</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-if="feed.avatar.releaseStatus === 'public'"
style="margin-left: 10px; color: #67c23a"
style="margin-left: 10px; color: var(--status-online)"
>(Public)</span
>
<span
@@ -1353,11 +1353,19 @@
</template>
<template v-else-if="feed.type === 'OnPlayerJoined'">
<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
>
<span v-else-if="feed.platform === 'VR'" style="color: #00b8ff; margin-left: 10px">VR</span>
<span v-else-if="feed.platform === 'Quest'" style="color: #67c23a; margin-left: 10px"
<span
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
>
<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:
'Noto Sans JP Variable', 'Noto Sans SC 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'] {
--font-primary-cjk:
@@ -387,30 +401,30 @@ i.x-user-status {
display: inline-block;
width: 13px;
height: 13px;
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);
}