style(locale): one and only for OSCAR (1)
style(about): one and only for OSCAR
This commit is contained in:
parent
2620ea4340
commit
9e798c5085
4 changed files with 215 additions and 152 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue