refactor css

This commit is contained in:
pa
2026-03-08 21:32:16 +09:00
parent 2b2dbc898e
commit ddee396376
15 changed files with 335 additions and 411 deletions

View File

@@ -80,11 +80,12 @@
<br /><br />
</template>
<span>
<span class="x-tag-platform-pc">PC: </span>{{ instance?.platforms?.standalonewindows }}
<span class="text-platform-pc border-platform-pc!">PC: </span
>{{ instance?.platforms?.standalonewindows }}
</span>
<br />
<span>
<span class="x-tag-platform-quest">Android: </span>{{ instance?.platforms?.android }}
<span class="text-platform-quest border-platform-quest!">Android: </span
>{{ instance?.platforms?.android }}
</span>
<br />
<span><span>iOS: </span>{{ instance?.platforms?.ios }}</span>

View File

@@ -44,36 +44,36 @@
</Badge>
<TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
<Badge
class="x-tag-platform-pc"
class="text-platform-pc border-platform-pc!"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
><Monitor class="h-4 w-4 x-tag-platform-pc" />
><Monitor class="h-4 w-4 text-platform-pc" />
<span
v-if="avatarDialog.platformInfo.pc"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.platformInfo.pc.performanceRating }}</span
>
<span
v-if="avatarDialog.fileAnalysis.standalonewindows?._fileSize"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.fileAnalysis.standalonewindows._fileSize }}</span
>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
<Badge
class="x-tag-platform-quest"
class="text-platform-quest border-platform-quest!"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
><Smartphone class="h-4 w-4 x-tag-platform-quest" />
><Smartphone class="h-4 w-4 text-platform-quest" />
<span
v-if="avatarDialog.platformInfo.android"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.platformInfo.android.performanceRating }}</span
>
<span
v-if="avatarDialog.fileAnalysis.android?._fileSize"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.fileAnalysis.android._fileSize }}</span
>
</Badge>
@@ -86,22 +86,12 @@
><Apple class="h-4 w-4 text-platform-ios" />
<span
v-if="avatarDialog.platformInfo.ios"
:class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]"
class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.platformInfo.ios.performanceRating }}</span
>
<span
v-if="avatarDialog.fileAnalysis.ios?._fileSize"
:class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]"
class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.fileAnalysis.ios._fileSize }}</span
>
</Badge>
@@ -120,12 +110,14 @@
variant="outline"
style="margin-right: 5px; margin-top: 5px"
>{{ t('view.favorite.avatars.styles') }}
<span v-if="avatarDialog.ref.styles.primary" :class="['x-grey', 'x-tag-border-left']">{{
avatarDialog.ref.styles.primary
}}</span>
<span
v-if="avatarDialog.ref.styles.primary"
class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.ref.styles.primary }}</span
>
<span
v-if="avatarDialog.ref.styles.secondary"
:class="['x-grey', 'x-tag-border-left']"
class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.ref.styles.secondary }}</span
>
</Badge>
@@ -140,7 +132,9 @@
variant="outline"
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.impostor') }}
<span v-if="avatarDialog.imposterVersion" :class="['x-grey', 'x-tag-border-left']"
<span
v-if="avatarDialog.imposterVersion"
class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>v{{ avatarDialog.imposterVersion }}</span
>
</Badge>

View File

@@ -84,7 +84,7 @@
v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
side="top"
:content="t('dialog.user.tags.age_verified')">
<Badge variant="outline" class="x-tag-age-verification">
<Badge variant="outline" class="text-[#3b82f6] border-[#3b82f6]!">
<template v-if="userDialog.ref.ageVerificationStatus === '18+'">
<IdCard class="h-4 w-4" /> 18+
</template>
@@ -97,7 +97,7 @@
v-if="userDialog.isFriend && userDialog.friend"
side="top"
:content="t('dialog.user.tags.friend_number')">
<Badge variant="outline" class="x-tag-friend">
<Badge variant="outline" class="text-amber-400 border-amber-400!">
<UserPlus class="h-4 w-4" />
{{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
</Badge>
@@ -106,7 +106,7 @@
v-if="userDialog.mutualFriendCount"
side="top"
:content="t('dialog.user.tags.mutual_friends')">
<Badge variant="outline" class="x-tag-mutual-friend border-zinc-500/50! dark:border-zinc-400!">
<Badge variant="outline" class="border-zinc-500/50! dark:border-zinc-400!">
<Users class="h-4 w-4" />
{{ userDialog.mutualFriendCount }}
</Badge>
@@ -117,7 +117,7 @@
:content="t('dialog.user.tags.open_in_discord')">
<Badge
variant="outline"
class="x-tag-discord cursor-pointer"
class="text-[#7289da] border-[#7289da]! cursor-pointer"
@click="openDiscordProfile(userDialog.ref.discordId)">
<i class="ri-discord-line text-xs"></i>
{{ t('dialog.user.tags.discord') }}
@@ -134,13 +134,13 @@
</Badge>
<TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
<Badge variant="outline" class="x-tag-platform-pc">
<Monitor class="m-0.5 x-tag-platform-pc" />
<Badge variant="outline" class="text-platform-pc border-platform-pc!">
<Monitor class="m-0.5 text-platform-pc" />
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
<Badge variant="outline" class="x-tag-platform-quest">
<Smartphone class="m-0.5 x-tag-platform-quest" />
<Badge variant="outline" class="text-platform-quest border-platform-quest!">
<Smartphone class="m-0.5 text-platform-quest" />
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
@@ -148,7 +148,7 @@
<Apple class="m-0.5 text-platform-ios" />
</Badge>
</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="text-muted-foreground">
{{ userDialog.ref.$platform }}
</Badge>

View File

@@ -55,13 +55,13 @@
</Badge>
<TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
<Badge
class="x-tag-platform-pc"
class="text-platform-pc border-platform-pc!"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Monitor class="h-4 w-4 x-tag-platform-pc" />
<Monitor class="h-4 w-4 text-platform-pc" />
<span
v-if="worldDialog.fileAnalysis.standalonewindows?._fileSize"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
{{ worldDialog.fileAnalysis.standalonewindows._fileSize }}
</span>
</Badge>
@@ -69,13 +69,13 @@
<TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
<Badge
class="x-tag-platform-quest"
class="text-platform-quest border-platform-quest!"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Smartphone class="h-4 w-4 x-tag-platform-quest" />
<Smartphone class="h-4 w-4 text-platform-quest" />
<span
v-if="worldDialog.fileAnalysis.android?._fileSize"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
{{ worldDialog.fileAnalysis.android._fileSize }}
</span>
</Badge>
@@ -89,12 +89,7 @@
<Apple class="h-4 w-4 text-platform-ios" />
<span
v-if="worldDialog.fileAnalysis.ios?._fileSize"
:class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]">
class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
{{ worldDialog.fileAnalysis.ios._fileSize }}
</span>
</Badge>