MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-24 17:23: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

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>