style(locale): one and only for OSCAR (1)

style(about): one and only for OSCAR
This commit is contained in:
무라쿠모 2024-06-25 00:32:08 +09:00
parent 2620ea4340
commit 9e798c5085
No known key found for this signature in database
GPG key ID: 139D6573F92DA9F7
4 changed files with 215 additions and 152 deletions

View file

@ -118,16 +118,30 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormSplit>
<MkKeyValue>
<template #key>{{ i18n.ts.users }}</template>
<template #value>{{ number(stats.originalUsersCount) }}</template>
<template #value>{{ number(stats?.originalUsersCount ?? 0) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.notes }}</template>
<template #value>{{ number(stats.originalNotesCount) }}</template>
<template #value>{{ number(stats?.originalNotesCount ?? 0) }}</template>
</MkKeyValue>
</FormSplit>
</FormSection>
</FormSuspense>
<FormSection>
<template #label>{{ i18n.ts.credits }}</template>
<div :class="$style.contributors">
<MkA to="/@oscar" :class="$style.contributor">
<img src="https://ocean.oscar.surf/contents/webpublic-7d8cefdf-cb70-448c-8e9e-1d5c95a18f96.webp" :class="$style.contributorAvatar" alt="Profile image of @oscar@oscar.surf">
<span :class="$style.contributorUsername">@oscar
<span :class="$style.contributorClient">
<span :class="$style.oscar">オスカー</span>
</span>
</span>
</MkA>
</div>
</FormSection>
<FormSection>
<template #label>Well-known resources</template>
<div class="_gaps_s">
@ -165,6 +179,7 @@ import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue';
import FormSuspense from '@/components/form/suspense.vue';
import FormSplit from '@/components/form/split.vue';
import MkA from '@/components/global/MkA.vue'
import MkFolder from '@/components/MkFolder.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkInfo from '@/components/MkInfo.vue';
@ -295,4 +310,47 @@ definePageMetadata(() => ({
.ruleText {
padding-top: 6px;
}
.contributors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 12px;
}
.contributor {
display: flex;
align-items: center;
padding: 12px;
background: var(--buttonBg);
border-radius: 6px;
&:hover {
text-decoration: none;
background: var(--buttonHoverBg);
}
&.active {
color: var(--accent);
background: var(--buttonHoverBg);
}
}
.contributorAvatar {
width: 30px;
border-radius: 100%;
}
.contributorUsername {
margin-left: 12px;
}
.contributorClient {
display: block;
font-size: 11px;
font-weight: bold;
> .oscar {
color: #00ff63;
}
}
</style>