mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 22:33:50 +02:00
tidy up
This commit is contained in:
pa
Natsumi
278
src/app.css
278
src/app.css
@@ -1,72 +1,11 @@
|
||||
@import 'animate.css/animate.min.css';
|
||||
@import 'noty/lib/noty.css';
|
||||
@import 'remixicon/fonts/remixicon.css';
|
||||
@import 'vue-sonner/style.css';
|
||||
@import 'vue-json-pretty/lib/styles.css';
|
||||
|
||||
@import './styles/flags.css';
|
||||
@import './styles/animated-emoji.css';
|
||||
@import './styles/fonts.css';
|
||||
@import './styles/noty.css';
|
||||
|
||||
:root {
|
||||
--font-western:
|
||||
'ellipsis-font', -apple-system, 'Inter', 'Segoe UI', 'Roboto', 'Ubuntu',
|
||||
'Cantarell', 'DejaVu Sans', sans-serif;
|
||||
--font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--font-fallback-cjk: sans-serif;
|
||||
--font-primary-cjk:
|
||||
'Noto Sans JP Variable', 'Noto Sans SC Variable',
|
||||
'Noto Sans KR Variable', 'Noto Sans TC Variable';
|
||||
}
|
||||
:root[lang='zh-CN'] {
|
||||
--font-primary-cjk:
|
||||
'Noto Sans SC Variable', 'Noto Sans JP Variable',
|
||||
'Noto Sans KR Variable', 'Noto Sans TC Variable';
|
||||
}
|
||||
:root[lang='ja'] {
|
||||
--font-primary-cjk:
|
||||
'Noto Sans JP Variable', 'Noto Sans KR Variable',
|
||||
'Noto Sans TC Variable', 'Noto Sans SC Variable';
|
||||
}
|
||||
:root[lang='ko'] {
|
||||
--font-primary-cjk:
|
||||
'Noto Sans KR Variable', 'Noto Sans JP Variable',
|
||||
'Noto Sans TC Variable', 'Noto Sans SC Variable';
|
||||
}
|
||||
:root[lang='zh-TW'] {
|
||||
--font-primary-cjk:
|
||||
'Noto Sans TC Variable', 'Noto Sans JP Variable',
|
||||
'Noto Sans KR Variable', 'Noto Sans SC Variable';
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
var(--font-western), var(--font-symbol), var(--font-primary-cjk),
|
||||
var(--font-fallback-cjk);
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.lucide.is-loading {
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.x-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.x-app {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
@@ -84,95 +23,6 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.x-login-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.x-login {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
align-items: center;
|
||||
max-width: clamp(600px, 60svw, 800px);
|
||||
}
|
||||
|
||||
.x-login-form-container {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.x-login-form-container:has(> div:nth-child(3)) {
|
||||
grid-template-columns: 1fr 1px 1fr;
|
||||
}
|
||||
|
||||
.x-login-form-container > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.x-scroll-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
hr.x-vertical-divider {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.x-saved-account-list {
|
||||
display: grid;
|
||||
|
||||
> .x-friend-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.x-legal-notice-container {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.x-menu-container {
|
||||
flex: none;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.notify::after {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 8px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pending-update {
|
||||
height: 56px;
|
||||
width: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.x-aside-container {
|
||||
display: flex;
|
||||
flex: none;
|
||||
flex-direction: column;
|
||||
padding: 13px 5px 5px 5px;
|
||||
order: 99;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.x-friend-list {
|
||||
padding: 0 10px;
|
||||
@@ -183,10 +33,6 @@ hr.x-vertical-divider {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.x-aside-container > .x-friend-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.x-dialog .x-friend-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -339,32 +185,15 @@ img.friends-list-avatar {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.x-friend-item > .detail > .extra,
|
||||
.extra {
|
||||
.x-friend-item > .detail > .extra {
|
||||
font-size: 12px;
|
||||
& > span > span:first-child {
|
||||
scale: 0.9;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.x-friend-item > .vrcplus-icon {
|
||||
border-radius: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
.x-friend-item > .detail > .extra > span > span:first-child {
|
||||
scale: 0.9;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.x-friend-item > .current-vrcplus-icon {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.x-friend-item > .vrcplus-icon > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.x-friend-item:hover {
|
||||
border-radius: 8px;
|
||||
@@ -381,31 +210,10 @@ img.friends-list-avatar {
|
||||
border-bottom-left-radius: 25px;
|
||||
}
|
||||
|
||||
.x-aside-container > .x-friend-list > .x-friend-item:hover {
|
||||
}
|
||||
|
||||
.x-dialog .x-friend-item {
|
||||
width: 167px;
|
||||
}
|
||||
|
||||
.x-user-badge-hidden {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.x-user-badge:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.x-change-image-item {
|
||||
display: inline-block;
|
||||
padding: 4px 4px 0 4px;
|
||||
}
|
||||
|
||||
.x-change-image-item:hover {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
i.x-user-status,
|
||||
i.x-status-icon {
|
||||
@@ -470,7 +278,6 @@ i.x-status-icon.red {
|
||||
border-color: var(--color-amber-400) !important;
|
||||
}
|
||||
|
||||
|
||||
.x-tag-age-verification {
|
||||
color: #3b82f6;
|
||||
border-color: #3b82f6 !important;
|
||||
@@ -483,13 +290,6 @@ i.x-status-icon.red {
|
||||
padding-bottom: 0.5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.x-popover-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
margin-top: 30px;
|
||||
padding: 0 10px 10px 10px;
|
||||
@@ -522,77 +322,7 @@ i.x-status-icon.red {
|
||||
width: 235px;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.toggle-list {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.toggle-list .toggle-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.toggle-list .toggle-name {
|
||||
display: inline-block;
|
||||
min-width: 190px;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
font-size: 18px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.avatar-info {
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.photon-event-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.current-instance-table img.friends-list-avatar {
|
||||
width: unset;
|
||||
height: 16px;
|
||||
margin-right: 0;
|
||||
margin-left: 1px;
|
||||
margin-top: 4px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vrc-instance-queue-message {
|
||||
padding: 3px;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.x-app > .x-container {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.x-text-removed {
|
||||
text-decoration: line-through;
|
||||
|
||||
padding: 2px 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.x-text-added {
|
||||
padding: 2px 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div @click="confirm" class="avatar-info">
|
||||
<div @click="confirm" class="cursor-pointer w-fit align-top">
|
||||
<span v-if="avatarType" :class="color" class="mr-2">
|
||||
<Lock v-if="avatarType === '(own)'" class="h-4 w-4" />
|
||||
<Unlock v-else-if="avatarType === '(public)'" class="h-4 w-4" />
|
||||
|
||||
@@ -743,4 +743,14 @@
|
||||
max-height: 360px;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.notify::after {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 8px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<div style="flex: 1">
|
||||
<div>
|
||||
<span
|
||||
class="dialog-title"
|
||||
class="font-bold"
|
||||
style="margin-right: 5px; cursor: pointer"
|
||||
v-text="avatarDialog.ref.name"
|
||||
@click="copyToClipboard(avatarDialog.ref.name)"></span>
|
||||
@@ -76,18 +76,18 @@
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
|
||||
<Badge
|
||||
class="x-tag-platform-ios"
|
||||
class="text-[#8e8e93] border-[#8e8e93]"
|
||||
variant="outline"
|
||||
style="margin-right: 5px; margin-top: 5px"
|
||||
><Apple class="h-4 w-4 x-tag-platform-ios" />
|
||||
><Apple class="h-4 w-4 text-[#8e8e93]" />
|
||||
<span
|
||||
v-if="avatarDialog.platformInfo.ios"
|
||||
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
|
||||
:class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"
|
||||
>{{ avatarDialog.platformInfo.ios.performanceRating }}</span
|
||||
>
|
||||
<span
|
||||
v-if="avatarDialog.bundleSizes['ios']"
|
||||
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
|
||||
:class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"
|
||||
>{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
|
||||
>
|
||||
</Badge>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
{{ t('dialog.change_content_image.upload') }}
|
||||
</Button>
|
||||
<br />
|
||||
<div class="x-change-image-item">
|
||||
<div class="inline-block p-1 pb-0 hover:rounded-sm">
|
||||
<img :src="previousImageUrl" class="img-size" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,14 +78,14 @@
|
||||
<span class="name" v-text="avatar.name"></span>
|
||||
<span
|
||||
v-if="avatar.releaseStatus === 'public'"
|
||||
class="extra"
|
||||
class="block truncate text-xs"
|
||||
v-text="avatar.releaseStatus"></span>
|
||||
<span
|
||||
v-else-if="avatar.releaseStatus === 'private'"
|
||||
class="extra"
|
||||
class="block truncate text-xs"
|
||||
v-text="avatar.releaseStatus"></span>
|
||||
<span v-else class="extra" v-text="avatar.releaseStatus"></span>
|
||||
<span class="extra" v-text="avatarTagStrings.get(avatar.id)"></span>
|
||||
<span v-else class="block truncate text-xs" v-text="avatar.releaseStatus"></span>
|
||||
<span class="block truncate text-xs" v-text="avatarTagStrings.get(avatar.id)"></span>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost" style="margin-left: 5px" @click.stop>
|
||||
<Checkbox
|
||||
|
||||
@@ -42,13 +42,13 @@
|
||||
<template v-if="image.versions && image.versions.length > 0">
|
||||
<div
|
||||
v-if="image.versions[image.versions.length - 1].file.url"
|
||||
class="vrcplus-icon"
|
||||
class="h-[200px] w-[200px] rounded-[20px] cursor-pointer overflow-hidden"
|
||||
@click="
|
||||
selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)
|
||||
">
|
||||
<img
|
||||
:src="image.versions[image.versions.length - 1].file.url"
|
||||
class="avatar"
|
||||
class="h-full w-full rounded-[15px] object-cover"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="group-header" style="flex: 1">
|
||||
<span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
|
||||
<span
|
||||
class="dialog-title"
|
||||
class="font-bold"
|
||||
style="margin-right: 5px; cursor: pointer"
|
||||
v-text="groupDialog.ref.name"
|
||||
@click="copyToClipboard(groupDialog.ref.name)"></span>
|
||||
@@ -1133,7 +1133,7 @@
|
||||
class="p-0 overflow-hidden transition-shadow hover:shadow-md">
|
||||
<img
|
||||
:src="image.imageUrl"
|
||||
:class="['x-link', 'x-popover-image']"
|
||||
:class="['x-link', 'max-w-full', 'max-h-full']"
|
||||
@click="showFullscreenImageDialog(image.imageUrl)"
|
||||
loading="lazy" />
|
||||
</Card>
|
||||
|
||||
@@ -444,7 +444,7 @@
|
||||
<span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
|
||||
<InputGroupTextareaField
|
||||
v-model="note"
|
||||
class="extra"
|
||||
class="text-xs"
|
||||
:rows="2"
|
||||
:placeholder="t('dialog.group_member_moderation.note_placeholder')"
|
||||
style="margin-top: 5px"
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
image.versions.length > 0 &&
|
||||
image.versions[image.versions.length - 1].file.url
|
||||
"
|
||||
class="x-popover-image"
|
||||
class="max-w-full max-h-full"
|
||||
style="padding: 8px">
|
||||
<Emoji :imageUrl="image.versions[image.versions.length - 1].file.url" :size="100"></Emoji>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
:maxlength="256"
|
||||
:rows="6"
|
||||
:placeholder="t('dialog.user.info.note_placeholder')"
|
||||
input-class="extra resize-none"
|
||||
input-class="text-xs resize-none"
|
||||
class="my-2"
|
||||
show-count />
|
||||
</template>
|
||||
@@ -28,7 +28,7 @@
|
||||
<span class="name">{{ t('dialog.user.info.memo') }}</span>
|
||||
<InputGroupTextareaField
|
||||
v-model="memo"
|
||||
class="extra mt-2"
|
||||
class="text-xs mt-2"
|
||||
:rows="6"
|
||||
:placeholder="t('dialog.user.info.memo_placeholder')"
|
||||
input-class="resize-none min-h-0" />
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
<span
|
||||
class="dialog-title"
|
||||
class="font-bold"
|
||||
style="margin-left: 5px; margin-right: 5px; cursor: pointer"
|
||||
v-text="userDialog.ref.displayName"
|
||||
@click="copyUserDisplayName(userDialog.ref.displayName)"></span>
|
||||
@@ -152,8 +152,11 @@
|
||||
</Badge>
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
|
||||
<Badge variant="outline" class="x-tag-platform-ios" style="margin-right: 5px; margin-top: 5px">
|
||||
<Apple class="h-4 w-4 x-tag-platform-ios" />
|
||||
<Badge
|
||||
variant="outline"
|
||||
class="text-[#8e8e93] border-[#8e8e93]"
|
||||
style="margin-right: 5px; margin-top: 5px">
|
||||
<Apple class="h-4 w-4 text-[#8e8e93]" />
|
||||
</Badge>
|
||||
</TooltipWrapper>
|
||||
<Badge
|
||||
@@ -185,7 +188,7 @@
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<img
|
||||
class="x-link x-user-badge"
|
||||
class="x-link hover:grayscale-0"
|
||||
:src="badge.badgeImageUrl"
|
||||
style="
|
||||
flex: none;
|
||||
@@ -196,13 +199,13 @@
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
:class="{ 'x-user-badge-hidden': badge.hidden }"
|
||||
:class="{ grayscale: badge.hidden }"
|
||||
loading="lazy" />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="bottom" class="w-75">
|
||||
<img
|
||||
:src="badge.badgeImageUrl"
|
||||
:class="['x-link', 'x-popover-image']"
|
||||
:class="['x-link', 'max-w-full', 'max-h-full']"
|
||||
@click="showFullscreenImageDialog(badge.badgeImageUrl)"
|
||||
loading="lazy" />
|
||||
<br />
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
{{ t('dialog.change_content_image.upload') }}
|
||||
</Button>
|
||||
<br />
|
||||
<div class="x-change-image-item">
|
||||
<div class="inline-block p-1 pb-0 hover:rounded-sm">
|
||||
<img :src="previousImageUrl" class="img-size" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<div style="flex: 1">
|
||||
<div>
|
||||
<span
|
||||
class="dialog-title"
|
||||
class="font-bold"
|
||||
style="margin-right: 5px; cursor: pointer"
|
||||
@click="copyWorldName">
|
||||
<Home
|
||||
@@ -87,13 +87,13 @@
|
||||
|
||||
<TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
|
||||
<Badge
|
||||
class="x-tag-platform-ios"
|
||||
class="text-[#8e8e93] border-[#8e8e93]"
|
||||
variant="outline"
|
||||
style="margin-right: 5px; margin-top: 5px">
|
||||
<Apple class="h-4 w-4 x-tag-platform-ios" />
|
||||
<Apple class="h-4 w-4 text-[#8e8e93]" />
|
||||
><span
|
||||
v-if="worldDialog.bundleSizes['ios']"
|
||||
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']">
|
||||
:class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']">
|
||||
{{ worldDialog.bundleSizes['ios'].fileSize }}
|
||||
</span>
|
||||
</Badge>
|
||||
|
||||
@@ -1,10 +1,20 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@import 'animate.css/animate.min.css';
|
||||
@import 'noty/lib/noty.css';
|
||||
@import 'remixicon/fonts/remixicon.css';
|
||||
@import 'vue-sonner/style.css';
|
||||
@import 'vue-json-pretty/lib/styles.css';
|
||||
|
||||
@import './flags.css';
|
||||
@import './animated-emoji.css';
|
||||
@import './fonts.css';
|
||||
@import './noty.css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
@@ -38,6 +48,38 @@
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--font-western:
|
||||
'ellipsis-font', -apple-system, 'Inter', 'Segoe UI', 'Roboto', 'Ubuntu',
|
||||
'Cantarell', 'DejaVu Sans', sans-serif;
|
||||
--font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--font-fallback-cjk: sans-serif;
|
||||
--font-primary-cjk:
|
||||
'Noto Sans JP Variable', 'Noto Sans SC Variable',
|
||||
'Noto Sans KR Variable', 'Noto Sans TC Variable';
|
||||
}
|
||||
|
||||
:root[lang='zh-CN'] {
|
||||
--font-primary-cjk:
|
||||
'Noto Sans SC Variable', 'Noto Sans JP Variable',
|
||||
'Noto Sans KR Variable', 'Noto Sans TC Variable';
|
||||
}
|
||||
|
||||
:root[lang='ja'] {
|
||||
--font-primary-cjk:
|
||||
'Noto Sans JP Variable', 'Noto Sans KR Variable',
|
||||
'Noto Sans TC Variable', 'Noto Sans SC Variable';
|
||||
}
|
||||
|
||||
:root[lang='ko'] {
|
||||
--font-primary-cjk:
|
||||
'Noto Sans KR Variable', 'Noto Sans JP Variable',
|
||||
'Noto Sans TC Variable', 'Noto Sans SC Variable';
|
||||
}
|
||||
|
||||
:root[lang='zh-TW'] {
|
||||
--font-primary-cjk:
|
||||
'Noto Sans TC Variable', 'Noto Sans JP Variable',
|
||||
'Noto Sans KR Variable', 'Noto Sans SC Variable';
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -120,6 +162,10 @@
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family:
|
||||
var(--font-western), var(--font-symbol), var(--font-primary-cjk),
|
||||
var(--font-fallback-cjk);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
0
src/styles/options.css
Normal file
0
src/styles/options.css
Normal file
@@ -189,6 +189,7 @@
|
||||
|
||||
import InstanceActivityDetail from './InstanceActivityDetail.vue';
|
||||
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const appearanceSettingsStore = useAppearanceSettingsStore();
|
||||
|
||||
@@ -166,6 +166,7 @@
|
||||
import { database } from '../../../service/database';
|
||||
import { userRequest } from '../../../api';
|
||||
|
||||
|
||||
import configRepository from '../../../service/config';
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
@@ -435,7 +435,7 @@
|
||||
<div class="favorites-search-card__title">
|
||||
<span class="name">{{ favorite.name }}</span>
|
||||
</div>
|
||||
<span class="extra">{{ favorite.authorName }}</span>
|
||||
<span class="text-xs">{{ favorite.authorName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -292,7 +292,7 @@
|
||||
:traveling="favorite.travelingToLocation"
|
||||
:link="false" />
|
||||
</div>
|
||||
<span v-else class="extra">{{ favorite.statusDescription }}</span>
|
||||
<span v-else class="text-xs">{{ favorite.statusDescription }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -370,7 +370,7 @@
|
||||
</div>
|
||||
<div class="favorites-search-card__detail">
|
||||
<span class="name">{{ favorite.name || favorite.id }}</span>
|
||||
<span class="extra">
|
||||
<span class="text-xs">
|
||||
{{ favorite.authorName }}
|
||||
<template v-if="favorite.occupants">
|
||||
({{ favorite.occupants }})
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
</div>
|
||||
<span class="extra">{{ localFavFakeRef.authorName }}</span>
|
||||
<span class="text-xs">{{ localFavFakeRef.authorName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="favorites-search-card__title">
|
||||
<span class="name">{{ favorite.name }}</span>
|
||||
</div>
|
||||
<span class="extra">{{ favorite.authorName }}</span>
|
||||
<span class="text-xs">{{ favorite.authorName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
:traveling="favorite.ref.travelingToLocation"
|
||||
:link="false" />
|
||||
</div>
|
||||
<span v-else class="extra">{{ favorite.ref.statusDescription }}</span>
|
||||
<span v-else class="text-xs">{{ favorite.ref.statusDescription }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
class="h-4 w-4" />
|
||||
</span>
|
||||
</div>
|
||||
<span class="extra">
|
||||
<span class="text-xs">
|
||||
{{ props.favorite.ref.authorName }}
|
||||
<template v-if="props.favorite.ref.occupants"> ({{ props.favorite.ref.occupants }}) </template>
|
||||
</span>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<div class="favorites-search-card__title">
|
||||
<span class="name">{{ props.favorite.name }}</span>
|
||||
</div>
|
||||
<span class="extra">
|
||||
<span class="text-xs">
|
||||
{{ props.favorite.authorName }}
|
||||
<template v-if="props.favorite.occupants"> ({{ props.favorite.occupants }}) </template>
|
||||
</span>
|
||||
|
||||
@@ -135,9 +135,3 @@
|
||||
table.setPageSize(size);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-user {
|
||||
color: var(--x-table-user-text-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -210,9 +210,3 @@
|
||||
table.setPageSize(size);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-user {
|
||||
color: var(--x-table-user-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
<template v-if="virtualRows[vRow.index]?.type === 'header'">
|
||||
<header class="friend-view__instance-header">
|
||||
<Location
|
||||
class="extra"
|
||||
class="text-xs"
|
||||
:location="virtualRows[vRow.index].instanceId"
|
||||
style="display: inline" />
|
||||
<span class="friend-view__instance-count">{{ virtualRows[vRow.index].count }}</span>
|
||||
|
||||
@@ -202,9 +202,3 @@
|
||||
table.setPageSize(size);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-user {
|
||||
color: var(--x-table-user-text-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -138,8 +138,8 @@
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="user.user.displayName"></span>
|
||||
<span class="extra" v-text="user.user.username"></span>
|
||||
<span class="extra" v-text="user.loginParams.endpoint"></span>
|
||||
<span class="block truncate text-xs" v-text="user.user.username"></span>
|
||||
<span class="block truncate text-xs" v-text="user.loginParams.endpoint"></span>
|
||||
</div>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
@@ -310,3 +310,64 @@
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-login-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.x-login {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
align-items: center;
|
||||
max-width: clamp(600px, 60svw, 800px);
|
||||
}
|
||||
|
||||
.x-login-form-container {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.x-login-form-container:has(> div:nth-child(3)) {
|
||||
grid-template-columns: 1fr 1px 1fr;
|
||||
}
|
||||
|
||||
.x-login-form-container > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.x-scroll-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
hr.x-vertical-divider {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.x-saved-account-list {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.x-saved-account-list > .x-friend-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.x-legal-notice-container {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -507,7 +507,4 @@
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.table-user-text {
|
||||
color: var(--x-table-user-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -78,11 +78,11 @@
|
||||
</Badge>
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
|
||||
<Badge class="x-tag-platform-ios" variant="outline" style="margin-right: 5px"
|
||||
><Apple class="h-4 w-4" />
|
||||
<Badge class="text-[#8e8e93] border-[#8e8e93]" variant="outline" style="margin-right: 5px"
|
||||
><Apple class="h-4 w-4 text-[#8e8e93]" />
|
||||
<span
|
||||
v-if="currentInstanceWorld.bundleSizes['ios']"
|
||||
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
|
||||
:class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"
|
||||
>{{ currentInstanceWorld.bundleSizes['ios'].fileSize }}</span
|
||||
>
|
||||
</Badge>
|
||||
@@ -110,7 +110,7 @@
|
||||
<div style="margin-top: 5px">
|
||||
<span
|
||||
v-show="currentInstanceWorld.ref.name !== currentInstanceWorld.ref.description"
|
||||
class="description"
|
||||
class="inline-block max-w-full truncate align-middle text-xs"
|
||||
v-text="currentInstanceWorld.ref.description"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,7 +118,7 @@
|
||||
<div class="x-friend-item" style="cursor: default">
|
||||
<div class="detail">
|
||||
<span class="name">{{ t('dialog.world.info.capacity') }}</span>
|
||||
<span class="extra"
|
||||
<span class="block truncate text-xs"
|
||||
>{{ commaNumber(currentInstanceWorld.ref.recommendedCapacity) }} ({{
|
||||
commaNumber(currentInstanceWorld.ref.capacity)
|
||||
}})</span
|
||||
@@ -128,13 +128,13 @@
|
||||
<div class="x-friend-item" style="cursor: default">
|
||||
<div class="detail">
|
||||
<span class="name">{{ t('dialog.world.info.last_updated') }}</span>
|
||||
<span class="extra">{{ formatDateFilter(currentInstanceWorld.lastUpdated, 'long') }}</span>
|
||||
<span class="block truncate text-xs">{{ formatDateFilter(currentInstanceWorld.lastUpdated, 'long') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="x-friend-item" style="cursor: default">
|
||||
<div class="detail">
|
||||
<span class="name">{{ t('dialog.world.info.created_at') }}</span>
|
||||
<span class="extra">{{
|
||||
<span class="block truncate text-xs">{{
|
||||
formatDateFilter(currentInstanceWorld.ref.created_at, 'long')
|
||||
}}</span>
|
||||
</div>
|
||||
@@ -309,15 +309,3 @@
|
||||
getCurrentInstanceUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.description {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -115,14 +115,7 @@ export const createColumns = ({
|
||||
const style = randomUserColours?.value
|
||||
? { color: userRef?.$userColour }
|
||||
: null;
|
||||
return (
|
||||
<span
|
||||
class="text-(--x-table-user-text-color)"
|
||||
style={style}
|
||||
>
|
||||
{userRef?.displayName ?? ''}
|
||||
</span>
|
||||
);
|
||||
return <span style={style}>{userRef?.displayName ?? ''}</span>;
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="photon-event-table">
|
||||
<div class="mt-5">
|
||||
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap">
|
||||
<Select
|
||||
:model-value="photonEventTableTypeFilter"
|
||||
|
||||
@@ -43,12 +43,12 @@
|
||||
<span class="name" v-text="user.displayName"></span>
|
||||
<span
|
||||
v-if="randomUserColours"
|
||||
class="extra"
|
||||
class="block truncate text-xs"
|
||||
:class="user.$trustClass"
|
||||
v-text="user.$trustLevel"></span>
|
||||
<span
|
||||
v-else
|
||||
class="extra"
|
||||
class="block truncate text-xs"
|
||||
:style="{ color: user.$userColour }"
|
||||
v-text="user.$trustLevel"></span>
|
||||
</div>
|
||||
@@ -111,10 +111,10 @@
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="world.name"></span>
|
||||
<span v-if="world.occupants" class="extra"
|
||||
<span v-if="world.occupants" class="block truncate text-xs"
|
||||
>{{ world.authorName }} ({{ world.occupants }})</span
|
||||
>
|
||||
<span v-else class="extra" v-text="world.authorName"></span>
|
||||
<span v-else class="block truncate text-xs" v-text="world.authorName"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,14 +262,14 @@
|
||||
<span class="name" v-text="avatar.name"></span>
|
||||
<span
|
||||
v-if="avatar.releaseStatus === 'public'"
|
||||
class="extra"
|
||||
class="block truncate text-xs"
|
||||
v-text="avatar.releaseStatus"></span>
|
||||
<span
|
||||
v-else-if="avatar.releaseStatus === 'private'"
|
||||
class="extra"
|
||||
class="block truncate text-xs"
|
||||
v-text="avatar.releaseStatus"></span>
|
||||
<span v-else class="extra" v-text="avatar.releaseStatus"></span>
|
||||
<span class="extra" v-text="avatar.authorName"></span>
|
||||
<span v-else class="block truncate text-xs" v-text="avatar.releaseStatus"></span>
|
||||
<span class="block truncate text-xs" v-text="avatar.authorName"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -322,7 +322,7 @@
|
||||
>{{ group.shortCode }}.{{ group.discriminator }}</span
|
||||
>
|
||||
</span>
|
||||
<span class="extra" v-text="group.description"></span>
|
||||
<span class="block truncate text-xs" v-text="group.description"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
import { TabsUnderline } from '@/components/ui/tabs';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
import AdvancedTab from './components/Tabs/AdvancedTab.vue';
|
||||
import AppearanceTab from './components/Tabs/AppearanceTab.vue';
|
||||
import DiscordPresenceTab from './components/Tabs/DiscordPresenceTab.vue';
|
||||
|
||||
@@ -90,10 +90,10 @@
|
||||
<div class="x-friend-item">
|
||||
<div class="detail" @click="getVisits">
|
||||
<span class="name">{{ t('view.profile.game_info.online_users') }}</span>
|
||||
<span v-if="visits" class="extra">{{
|
||||
<span v-if="visits" class="block truncate text-xs">{{
|
||||
t('view.profile.game_info.user_online', { count: visits })
|
||||
}}</span>
|
||||
<span v-else class="extra">{{ t('view.profile.game_info.refresh') }}</span>
|
||||
<span v-else class="block truncate text-xs">{{ t('view.profile.game_info.refresh') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -356,49 +356,49 @@
|
||||
:model-value="trustColor.untrusted"
|
||||
:presets="['#CCCCCC']"
|
||||
@change="updateTrustColor('untrusted', $event)" />
|
||||
<span class="color-picker x-tag-untrusted">Visitor</span>
|
||||
<span class="text-[18px] align-top x-tag-untrusted">Visitor</span>
|
||||
</div>
|
||||
<div>
|
||||
<PresetColorPicker
|
||||
:model-value="trustColor.basic"
|
||||
:presets="['#1778ff']"
|
||||
@change="updateTrustColor('basic', $event)" />
|
||||
<span class="color-picker x-tag-basic">New User</span>
|
||||
<span class="text-[18px] align-top x-tag-basic">New User</span>
|
||||
</div>
|
||||
<div>
|
||||
<PresetColorPicker
|
||||
:model-value="trustColor.known"
|
||||
:presets="['#2bcf5c']"
|
||||
@change="updateTrustColor('known', $event)" />
|
||||
<span class="color-picker x-tag-known">User</span>
|
||||
<span class="text-[18px] align-top x-tag-known">User</span>
|
||||
</div>
|
||||
<div>
|
||||
<PresetColorPicker
|
||||
:model-value="trustColor.trusted"
|
||||
:presets="['#ff7b42']"
|
||||
@change="updateTrustColor('trusted', $event)" />
|
||||
<span class="color-picker x-tag-trusted">Known User</span>
|
||||
<span class="text-[18px] align-top x-tag-trusted">Known User</span>
|
||||
</div>
|
||||
<div>
|
||||
<PresetColorPicker
|
||||
:model-value="trustColor.veteran"
|
||||
:presets="['#b18fff', '#8143e6', '#ff69b4', '#b52626', '#ffd000', '#abcdef']"
|
||||
@change="updateTrustColor('veteran', $event)" />
|
||||
<span class="color-picker x-tag-veteran">Trusted User</span>
|
||||
<span class="text-[18px] align-top x-tag-veteran">Trusted User</span>
|
||||
</div>
|
||||
<div>
|
||||
<PresetColorPicker
|
||||
:model-value="trustColor.vip"
|
||||
:presets="['#ff2626']"
|
||||
@change="updateTrustColor('vip', $event)" />
|
||||
<span class="color-picker x-tag-vip">VRChat Team</span>
|
||||
<span class="text-[18px] align-top x-tag-vip">VRChat Team</span>
|
||||
</div>
|
||||
<div>
|
||||
<PresetColorPicker
|
||||
:model-value="trustColor.troll"
|
||||
:presets="['#782f2f']"
|
||||
@change="updateTrustColor('troll', $event)" />
|
||||
<span class="color-picker x-tag-troll">Nuisance</span>
|
||||
<span class="text-[18px] align-top x-tag-troll">Nuisance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
<div class="x-friend-item" style="cursor: default">
|
||||
<div class="detail">
|
||||
<span class="name">{{ t('view.settings.general.general.version') }}</span>
|
||||
<span class="extra" v-text="appVersion"></span>
|
||||
<span class="block truncate text-xs" v-text="appVersion"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="x-friend-item" @click="checkForVRCXUpdate">
|
||||
<div class="detail">
|
||||
<span class="name">{{ t('view.settings.general.general.latest_app_version') }}</span>
|
||||
<span v-if="latestAppVersion" class="extra" v-text="latestAppVersion"></span>
|
||||
<span v-else class="extra">{{
|
||||
<span v-if="latestAppVersion" class="block truncate text-xs" v-text="latestAppVersion"></span>
|
||||
<span v-else class="block truncate text-xs">{{
|
||||
t('view.settings.general.general.latest_app_version_refresh')
|
||||
}}</span>
|
||||
</div>
|
||||
@@ -21,13 +21,13 @@
|
||||
<div class="x-friend-item" @click="openExternalLink(links.github)">
|
||||
<div class="detail">
|
||||
<span class="name">{{ t('view.settings.general.general.repository_url') }}</span>
|
||||
<span v-once class="extra">{{ links.github }}</span>
|
||||
<span v-once class="block truncate text-xs">{{ links.github }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="x-friend-item" @click="openExternalLink(links.discord)">
|
||||
<div class="detail">
|
||||
<span class="name">{{ t('view.settings.general.general.support') }}</span>
|
||||
<span v-once class="extra">{{ links.discord }}</span>
|
||||
<span v-once class="block truncate text-xs">{{ links.discord }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ dialogTitle }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="toggle-list" style="height: 75vh; overflow-y: auto">
|
||||
<div v-for="setting in currentOptions" :key="setting.key" class="toggle-item">
|
||||
<span class="toggle-name"
|
||||
<div class="text-[15px] h-[75vh] overflow-y-auto">
|
||||
<div v-for="setting in currentOptions" :key="setting.key" class="mb-[5px] flex items-center">
|
||||
<span class="inline-block min-w-[190px] pr-2.5 text-right"
|
||||
>{{ setting.name
|
||||
}}<TooltipWrapper
|
||||
v-if="setting.tooltip"
|
||||
@@ -38,11 +38,14 @@
|
||||
|
||||
<template v-if="photonLoggingEnabled">
|
||||
<br />
|
||||
<div class="toggle-item">
|
||||
<span class="toggle-name">Photon Event Logging</span>
|
||||
<div class="mb-[5px] flex items-center">
|
||||
<span class="inline-block min-w-[190px] pr-2.5 text-right">Photon Event Logging</span>
|
||||
</div>
|
||||
<div v-for="setting in photonFeedFiltersOptions" :key="setting.key" class="toggle-item">
|
||||
<span class="toggle-name">{{ setting.name }}</span>
|
||||
<div
|
||||
v-for="setting in photonFeedFiltersOptions"
|
||||
:key="setting.key"
|
||||
class="mb-[5px] flex items-center">
|
||||
<span class="inline-block min-w-[190px] pr-2.5 text-right">{{ setting.name }}</span>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
@@ -154,11 +157,3 @@
|
||||
emit('update:feedFiltersDialogMode', '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toggle-list .toggle-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,16 +26,16 @@
|
||||
<span class="name" :style="{ color: item.ref.$userColour }">{{
|
||||
item.ref.displayName
|
||||
}}</span>
|
||||
<span v-if="!item.ref.isFriend" class="extra"></span>
|
||||
<span v-else-if="item.ref.state === 'offline'" class="extra">{{
|
||||
<span v-if="!item.ref.isFriend" class="block truncate text-xs"></span>
|
||||
<span v-else-if="item.ref.state === 'offline'" class="block truncate text-xs">{{
|
||||
t('side_panel.search_result_active')
|
||||
}}</span>
|
||||
<span v-else-if="item.ref.state === 'active'" class="extra">{{
|
||||
<span v-else-if="item.ref.state === 'active'" class="block truncate text-xs">{{
|
||||
t('side_panel.search_result_offline')
|
||||
}}</span>
|
||||
<Location
|
||||
v-else
|
||||
class="extra"
|
||||
class="text-xs"
|
||||
:location="item.ref.location"
|
||||
:traveling="item.ref.travelingToLocation"
|
||||
:link="false" />
|
||||
@@ -178,6 +178,16 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-aside-container {
|
||||
display: flex;
|
||||
flex: none;
|
||||
flex-direction: column;
|
||||
padding: 13px 5px 5px 5px;
|
||||
order: 99;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sidebar-tab-count {
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
|
||||
@@ -14,23 +14,23 @@
|
||||
>{{ friend.ref.displayName }}{{ isGroupByInstance && friend.isVIP ? ' ⭐' : '' }}</span
|
||||
>
|
||||
|
||||
<span v-if="isFriendActiveOrOffline" class="extra">{{ friend.ref.statusDescription }}</span>
|
||||
<span v-if="isFriendActiveOrOffline" class="block truncate text-xs">{{ friend.ref.statusDescription }}</span>
|
||||
<template v-else>
|
||||
<div v-if="friend.pendingOffline" class="extra">
|
||||
<div v-if="friend.pendingOffline" class="text-xs">
|
||||
<AlertTriangle class="inline-block" /> {{ t('side_panel.pending_offline') }}
|
||||
</div>
|
||||
<template v-else-if="isGroupByInstance">
|
||||
<div class="flex items-center">
|
||||
<Loader2 v-if="isFriendTraveling" class="is-loading" style="margin-right: 3px" />
|
||||
<Timer
|
||||
class="extra"
|
||||
class="text-xs"
|
||||
:epoch="epoch"
|
||||
:style="
|
||||
isFriendTraveling ? { display: 'inline-block', overflow: 'unset' } : undefined
|
||||
" />
|
||||
</div>
|
||||
</template>
|
||||
<Location v-else class="extra" :location="locationProp" :traveling="travelingProp" :link="false" />
|
||||
<Location v-else class="text-xs" :location="locationProp" :traveling="travelingProp" :link="false" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -89,23 +89,3 @@
|
||||
const locationProp = computed(() => props.friend.ref?.location || '');
|
||||
const travelingProp = computed(() => props.friend.ref?.travelingToLocation || '');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.skeleton {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
& > div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
& > div {
|
||||
width: calc(100% - 48px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<span class="name" :style="{ color: currentUser.$userColour }">{{ currentUser.displayName }}</span>
|
||||
<Location
|
||||
v-if="isGameRunning && !gameLogDisabled"
|
||||
class="extra"
|
||||
class="text-xs"
|
||||
:location="lastLocation.location"
|
||||
:traveling="lastLocationDestination"
|
||||
:link="false" />
|
||||
@@ -27,12 +27,12 @@
|
||||
v-else-if="
|
||||
isRealInstance(currentUser.$locationTag) || isRealInstance(currentUser.$travelingToLocation)
|
||||
"
|
||||
class="extra"
|
||||
class="text-xs"
|
||||
:location="currentUser.$locationTag"
|
||||
:traveling="currentUser.$travelingToLocation"
|
||||
:link="false" />
|
||||
|
||||
<span v-else class="extra">{{ currentUser.statusDescription }}</span>
|
||||
<span v-else class="text-xs">{{ currentUser.statusDescription }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,8 +54,8 @@
|
||||
<div v-for="group in vipFriendsDivideByGroup" :key="group[0].key">
|
||||
<transition name="el-fade-in-linear">
|
||||
<div v-show="group[0].groupName !== ''" style="margin-bottom: 3px">
|
||||
<span class="extra">{{ group[0].groupName }}</span>
|
||||
<span class="extra" style="margin-left: 5px">{{ `(${group.length})` }}</span>
|
||||
<span class="text-xs">{{ group[0].groupName }}</span>
|
||||
<span class="text-xs" style="margin-left: 5px">{{ `(${group.length})` }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<div v-if="group.length" style="margin-bottom: 10px">
|
||||
@@ -91,10 +91,10 @@
|
||||
<div v-for="friendArr in friendsInSameInstance" :key="friendArr[0].ref.$location.tag">
|
||||
<div class="mb-1 flex items-center">
|
||||
<Location
|
||||
class="extra text-muted-foreground!"
|
||||
class="text-xs text-muted-foreground"
|
||||
:location="getFriendsLocations(friendArr)"
|
||||
style="display: inline" />
|
||||
<span class="extra" style="margin-left: 5px">{{ `(${friendArr.length})` }}</span>
|
||||
<span class="text-xs" style="margin-left: 5px">{{ `(${friendArr.length})` }}</span>
|
||||
</div>
|
||||
<div v-if="friendArr && friendArr.length">
|
||||
<friend-item
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
>({{ ref.instance.userCount }}/{{ ref.instance.capacity }})</span
|
||||
>
|
||||
</span>
|
||||
<Location class="extra" :location="ref.instance.location" :link="false" />
|
||||
<Location class="text-xs" :location="ref.instance.location" :link="false" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -90,12 +90,12 @@
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<template v-if="image.versions && image.versions.length > 0">
|
||||
<div
|
||||
class="vrcplus-icon"
|
||||
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
|
||||
v-if="image.versions[image.versions.length - 1].file.url"
|
||||
@click="setProfilePicOverride(image.id)"
|
||||
:class="{ 'current-vrcplus-icon': compareCurrentProfilePic(image.id) }">
|
||||
:class="compareCurrentProfilePic(image.id) ? 'cursor-default' : 'cursor-pointer'">
|
||||
<img
|
||||
class="avatar"
|
||||
class="h-full w-full rounded-[15px] object-cover"
|
||||
:src="image.versions[image.versions.length - 1].file.url"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
@@ -163,12 +163,12 @@
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<template v-if="image.versions && image.versions.length > 0"
|
||||
><div
|
||||
class="vrcplus-icon"
|
||||
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
|
||||
v-if="image.versions[image.versions.length - 1].file.url"
|
||||
@click="setVRCPlusIcon(image.id)"
|
||||
:class="{ 'current-vrcplus-icon': compareCurrentVRCPlusIcon(image.id) }">
|
||||
:class="compareCurrentVRCPlusIcon(image.id) ? 'cursor-default' : 'cursor-pointer'">
|
||||
<img
|
||||
class="avatar"
|
||||
class="h-full w-full rounded-[15px] object-cover"
|
||||
:src="image.versions[image.versions.length - 1].file.url"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
@@ -301,9 +301,8 @@
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<template v-if="image.versions && image.versions.length > 0">
|
||||
<div
|
||||
class="vrcplus-icon"
|
||||
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
|
||||
v-if="image.versions[image.versions.length - 1].file.url"
|
||||
style="overflow: hidden"
|
||||
@click="
|
||||
showFullscreenImageDialog(
|
||||
image.versions[image.versions.length - 1].file.url,
|
||||
@@ -383,12 +382,11 @@
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<template v-if="image.versions && image.versions.length > 0">
|
||||
<div
|
||||
class="vrcplus-icon"
|
||||
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
|
||||
v-if="image.versions[image.versions.length - 1].file.url"
|
||||
style="overflow: hidden"
|
||||
@click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
|
||||
<img
|
||||
class="avatar"
|
||||
class="h-full w-full rounded-[15px] object-cover"
|
||||
:src="image.versions[image.versions.length - 1].file.url"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
@@ -459,35 +457,30 @@
|
||||
:key="image.id"
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<div
|
||||
class="vrcplus-icon"
|
||||
style="overflow: hidden"
|
||||
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
|
||||
@click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
|
||||
<img class="avatar" :src="image.files.image" loading="lazy" />
|
||||
<img class="h-full w-full rounded-[15px] object-cover" :src="image.files.image" loading="lazy" />
|
||||
</div>
|
||||
<div style="margin-top: 5px; width: 208px">
|
||||
<span
|
||||
class="x-ellipsis"
|
||||
v-if="image.note"
|
||||
v-text="image.note"
|
||||
style="display: block"></span>
|
||||
<span v-else style="display: block"> </span>
|
||||
<span class="block truncate" v-if="image.note" v-text="image.note"></span>
|
||||
<span v-else class="block"> </span>
|
||||
<Location
|
||||
class="x-ellipsis"
|
||||
class="block truncate"
|
||||
v-if="image.worldId"
|
||||
:location="image.worldId"
|
||||
:hint="image.worldName"
|
||||
style="display: block" />
|
||||
<span v-else style="display: block"> </span>
|
||||
/>
|
||||
<span v-else class="block"> </span>
|
||||
<DisplayName
|
||||
class="x-ellipsis gallery-meta"
|
||||
class="block truncate gallery-meta"
|
||||
v-if="image.authorId"
|
||||
:userid="image.authorId"
|
||||
:hint="image.authorName" />
|
||||
<span v-else class="gallery-meta"> </span>
|
||||
<span v-if="image.createdAt" class="x-ellipsis gallery-meta gallery-meta--small">
|
||||
<span v-if="image.createdAt" class="block truncate gallery-meta gallery-meta--small">
|
||||
{{ formatDateFilter(image.createdAt, 'long') }}
|
||||
</span>
|
||||
<span v-else style="display: block"> </span>
|
||||
<span v-else class="block"> </span>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<Button
|
||||
@@ -531,18 +524,18 @@
|
||||
v-for="item in inventoryTable"
|
||||
:key="item.id"
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<div class="vrcplus-icon" style="overflow: hidden; cursor: default">
|
||||
<img class="avatar" :src="item.imageUrl" loading="lazy" />
|
||||
<div class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-default">
|
||||
<img class="h-full w-full rounded-[15px] object-cover" :src="item.imageUrl" loading="lazy" />
|
||||
</div>
|
||||
<div style="margin-top: 5px; width: 208px">
|
||||
<span class="x-ellipsis" v-text="item.name" style="display: block"></span>
|
||||
<span class="block truncate" v-text="item.name"></span>
|
||||
<span
|
||||
v-if="item.description"
|
||||
class="x-ellipsis"
|
||||
class="block truncate"
|
||||
v-text="item.description"
|
||||
style="display: block"></span>
|
||||
<span v-else style="display: block"> </span>
|
||||
<span class="x-ellipsis gallery-meta gallery-meta--small">
|
||||
></span>
|
||||
<span v-else class="block"> </span>
|
||||
<span class="block truncate gallery-meta gallery-meta--small">
|
||||
{{ formatDateFilter(item.created_at, 'long') }}
|
||||
</span>
|
||||
<span v-if="item.itemType === 'prop'">{{ t('dialog.gallery_icons.item') }}</span>
|
||||
|
||||
@@ -220,6 +220,7 @@
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
import { useFriendStore, useGalleryStore } from '../../stores';
|
||||
|
||||
const GroupCalendarDialog = defineAsyncComponent(() => import('./dialogs/GroupCalendarDialog.vue'));
|
||||
|
||||
@@ -20,7 +20,6 @@ function getAssetLanguage(assetId) {
|
||||
}
|
||||
|
||||
const language =
|
||||
assetId.split('element-plus/es/locale/lang/')[1]?.split('.')[0] ||
|
||||
// Font assets, e.g., noto-sans-jp-regular.woff2 mapped to language code.
|
||||
{
|
||||
jp: 'ja',
|
||||
|
||||
Reference in New Issue
Block a user