mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
feat: ♻️ Rename dark to background, refactor themes
This commit is contained in:
Jesse Wierzbinski
parent
4f2c1901d1
commit
842033c950
54 changed files with 244 additions and 230 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="flex flex-col p-10 gap-4 h-full">
|
||||
<div
|
||||
class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
|
||||
class="aspect-video shrink-0 w-full rounded ring-white/5 bg-background-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
|
||||
<img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
|
||||
v-if="instance?.banner.url" alt="Instance banner" :src="instance.banner.url" />
|
||||
</div>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
|
||||
<div v-if="instance?.contact.account" class="flex flex-col gap-2 mt-auto">
|
||||
<h2 class="text-gray-200 font-semibold uppercase text-xs">Administrator</h2>
|
||||
<h2 class="text-text-200 font-semibold uppercase text-xs">Administrator</h2>
|
||||
<SmallCard :account="instance.contact.account" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<Dialog.Content
|
||||
class="w-screen h-screen flex !z-50 justify-center items-center flex-col overflow-hidden p-10 fixed inset-0">
|
||||
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
|
||||
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-text-400 flex flex-row gap-3">
|
||||
<a @click.stop :href="attachment?.url" target="_blank" download class="ml-auto">
|
||||
<iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
|
||||
<span class="sr-only">Close</span>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
:title="attachment.description ?? ''" />
|
||||
</HeadlessTransitionChild>
|
||||
<span @click.stop v-if="attachment?.description"
|
||||
class="text-gray-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-dark-900 max-h-40 overflow-y-auto">
|
||||
class="text-text-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-background-900 max-h-40 overflow-y-auto">
|
||||
{{ attachment.description }}
|
||||
</span>
|
||||
</Dialog.Content>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@
|
|||
controls :alt="attachment.description ?? undefined" :src="attachment.url">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<a v-else class="bg-dark-800 w-full h-full rounded flex items-center justify-center" :href="attachment.url"
|
||||
target="_blank" download>
|
||||
<a v-else class="bg-background-800 w-full h-full rounded flex items-center justify-center"
|
||||
:href="attachment.url" target="_blank" download>
|
||||
<div class="flex flex-col items-center gap-2 text-center max-w-56 overflow-hidden text-ellipsis">
|
||||
<iconify-icon icon="tabler:file" width="none" class="size-10 text-gray-300" />
|
||||
<p class="text-gray-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
|
||||
<p class="text-gray-300 text-xs" v-if="attachment.meta?.length">{{
|
||||
<iconify-icon icon="tabler:file" width="none" class="size-10 text-text-300" />
|
||||
<p class="text-text-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
|
||||
<p class="text-text-300 text-xs" v-if="attachment.meta?.length">{{
|
||||
formatBytes(Number(attachment.meta?.length)) }}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -25,11 +25,12 @@
|
|||
strategy: 'fixed',
|
||||
}" v-if="attachment.description">
|
||||
<Popover.Trigger aria-hidden="true"
|
||||
class="absolute top-2 right-2 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
|
||||
class="absolute top-2 right-2 p-1 bg-background-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
|
||||
<iconify-icon icon="tabler:alt" width="none" class="size-6" />
|
||||
</Popover.Trigger>
|
||||
<Popover.Positioner class="!z-10">
|
||||
<Popover.Content class="p-4 bg-dark-400 rounded text-sm ring-1 ring-dark-100 shadow-lg text-gray-300">
|
||||
<Popover.Content
|
||||
class="p-4 bg-background-400 rounded text-sm ring-1 ring-background-100 shadow-lg text-text-300">
|
||||
<Popover.Description>{{ attachment.description }}</Popover.Description>
|
||||
</Popover.Content>
|
||||
</Popover.Positioner>
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
</NuxtLink>
|
||||
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
|
||||
<div class="flex flex-row text-sm items-center justify-between w-full">
|
||||
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
|
||||
<NuxtLink :href="accountUrl" class="font-semibold text-text-200 line-clamp-1 break-all">
|
||||
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
|
||||
{{
|
||||
note?.account.display_name }}
|
||||
</Skeleton>
|
||||
</NuxtLink>
|
||||
<NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
|
||||
<NuxtLink :href="noteUrl" class="text-text-300 ml-2 line-clamp-1 break-all shrink-0">
|
||||
<Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
|
||||
{{ timeAgo }}
|
||||
</Skeleton>
|
||||
|
|
@ -31,20 +31,20 @@
|
|||
</UserCard>
|
||||
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
|
||||
<NuxtLink :href="accountUrl" class="font-semibold text-text-200 line-clamp-1 break-all">
|
||||
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
|
||||
{{
|
||||
note?.account.display_name }}
|
||||
</Skeleton>
|
||||
</NuxtLink>
|
||||
<NuxtLink :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
|
||||
<NuxtLink :href="noteUrl" class="text-text-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
|
||||
:alt="fullTime" :title="fullTime">
|
||||
<Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
|
||||
{{ timeAgo }}
|
||||
</Skeleton>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<span class="text-gray-300 text-sm line-clamp-1 break-all w-full group">
|
||||
<span class="text-text-300 text-sm line-clamp-1 break-all w-full group">
|
||||
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
|
||||
<span class="group-hover:hidden">
|
||||
@{{
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}}</span>
|
||||
<span @click="copyAccount" v-if="!hasCopied"
|
||||
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
|
||||
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
|
||||
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-text-200"
|
||||
aria-hidden="true" />
|
||||
Click to copy
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<a :href="`/@${account.acct}`" target="_blank"
|
||||
class="shrink break-all rounded bg-dark-200 ring-1 ring-white/5 ring-inset text-primary-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-primary-600/30">
|
||||
class="shrink break-all rounded bg-background-200 ring-1 ring-white/5 ring-inset text-primary-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-primary-600/30">
|
||||
<img class="size-[1em] rounded ring-1 ring-white/5 !inline align-middle mb-1 mr-1" :src="account.avatar"
|
||||
:alt="`${account.acct}'s avatar'`" />
|
||||
{{ account.display_name || account.acct }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<article
|
||||
class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
|
||||
class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-background-800 hover:bg-background-700 duration-200">
|
||||
<!-- Overlay that blocks clicks for disabled notes -->
|
||||
<div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
|
||||
</div>
|
||||
|
|
@ -18,36 +18,36 @@
|
|||
:should-hide="shouldHide" />
|
||||
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.element || !loaded" v-if="!small || !showInteractions">
|
||||
<div v-if="showInteractions"
|
||||
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-background-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
<button class="group" @click="outputtedNote && useEvent('note:reply', outputtedNote)"
|
||||
:disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
|
||||
class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.replies_count) }}</span>
|
||||
class="text-text-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.replies_count) }}</span>
|
||||
</button>
|
||||
<button class="group" @click="likeFn" :disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!outputtedNote?.favourited"
|
||||
class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
|
||||
class="size-5 text-text-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
|
||||
class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
|
||||
class="size-5 text-primary-600 group-hover:group-enabled:text-text-200" aria-hidden="true" />
|
||||
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
|
||||
</button>
|
||||
<button class="group" @click="reblogFn" :disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!outputtedNote?.reblogged"
|
||||
class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
|
||||
class="size-5 text-text-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
|
||||
class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.reblogs_count) }}</span>
|
||||
class="size-5 text-green-600 group-hover:group-enabled:text-text-200" aria-hidden="true" />
|
||||
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.reblogs_count) }}</span>
|
||||
</button>
|
||||
<button class="group" @click="outputtedNote && useEvent('note:quote', outputtedNote)"
|
||||
:disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
|
||||
class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
|
||||
class="size-5 text-text-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
|
||||
</button>
|
||||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-gray-200"
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-text-200"
|
||||
aria-hidden="true" />
|
||||
<span class="sr-only">Open menu</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70">
|
||||
<NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-text-300 opacity-70">
|
||||
<Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
|
||||
<iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
|
||||
<span class="shrink-0">Replying to</span>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<div class="flex flex-col p-1 bg-dark-400">
|
||||
<div class="flex flex-col p-1 bg-background-400">
|
||||
<div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
|
||||
<Skeleton :enabled="!element" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
|
||||
<iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
|
||||
<iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-text-200" aria-hidden="true" />
|
||||
<Avatar v-if="element?.account?.avatar" :src="element?.account.avatar"
|
||||
:alt="`${element?.account.acct}'s avatar'`" class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
|
||||
<span class="text-gray-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
|
||||
<span class="text-text-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
|
||||
}}</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<div>
|
||||
<Note v-if="element?.status || !element" :element="element?.status" :small="true" />
|
||||
<div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
|
||||
<div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-background-800">
|
||||
<SmallCard :account="element.account" />
|
||||
</div>
|
||||
<div v-if="element?.type === 'follow_request' && relationship?.requested_by"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800">
|
||||
<div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-background-800">
|
||||
<Avatar :src="account?.header" :alt="`${account?.acct}'s header image'`"
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
|
||||
|
||||
<div class="flex items-start justify-between px-4 py-3">
|
||||
<Avatar :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-background-800" />
|
||||
|
||||
<div class="flex gap-x-2">
|
||||
<Button theme="secondary" v-if="account && account?.id === identity?.account?.id">Edit Profile
|
||||
|
|
@ -30,15 +30,15 @@
|
|||
|
||||
<div class="mt-2 px-4">
|
||||
<h2
|
||||
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
|
||||
class="text-xl font-bold text-text-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
|
||||
<Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
|
||||
<span v-html="display_name"></span>
|
||||
<iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
|
||||
class="text-gray-400 cursor-pointer align-text-top ml-1"
|
||||
class="text-text-400 cursor-pointer align-text-top ml-1"
|
||||
title="This account manually approves its followers" />
|
||||
</Skeleton>
|
||||
</h2>
|
||||
<span class="text-gray-300 block mt-2">
|
||||
<span class="text-text-300 block mt-2">
|
||||
<Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
|
||||
</span>
|
||||
<div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
|
||||
|
|
@ -59,27 +59,27 @@
|
|||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="flex items-center space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
|
||||
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-400">Created {{ formattedJoin }}</span>
|
||||
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-text-400" />
|
||||
<span class="text-text-400">Created {{ formattedJoin }}</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<div v-if="account?.bot" class="flex items-center space-x-1">
|
||||
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-400">Bot</span>
|
||||
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-text-400" />
|
||||
<span class="text-text-400">Bot</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
|
||||
<span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
|
||||
<span class="text-gray-400">Posts</span>
|
||||
<span class="font-bold text-text-200">{{ account?.statuses_count }}</span>
|
||||
<span class="text-text-400">Posts</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
|
||||
<span class="font-bold text-gray-200">{{ account?.following_count }}</span>
|
||||
<span class="text-gray-400">Following</span>
|
||||
<span class="font-bold text-text-200">{{ account?.following_count }}</span>
|
||||
<span class="text-text-400">Following</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
<div v-if="!skeleton && fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
|
||||
<div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
|
||||
<span class="text-primary-500 font-semibold" v-html="field.name"></span>
|
||||
<span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
|
||||
<span class="text-text-200 prose prose-invert break-all" v-html="field.value"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
<Button theme="secondary" class="h-full">
|
||||
<iconify-icon width="unset" icon="tabler:dots" class="size-5 text-gray-200" aria-hidden="true" />
|
||||
<iconify-icon width="unset" icon="tabler:dots" class="size-5 text-text-200" aria-hidden="true" />
|
||||
<span class="sr-only">Open menu</span>
|
||||
</Button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Tooltip.Root @update:open="(o) => open = o" :open="open" :open-delay="0">
|
||||
<Tooltip.Trigger><span
|
||||
class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-dark-300 text-primary-200 ring-white/5 ring-1">
|
||||
class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-background-300 text-primary-200 ring-white/5 ring-1">
|
||||
<svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
|
||||
class="size-4 fill-primary-500">
|
||||
<g>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95">
|
||||
<Tooltip.Content v-if="open"
|
||||
class="rounded px-4 py-2 text-sm bg-dark-400 text-gray-200 ring-1 ring-white/10 shadow-xl">
|
||||
class="rounded px-4 py-2 text-sm bg-background-400 text-text-200 ring-1 ring-white/10 shadow-xl">
|
||||
<svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
|
||||
class="size-4 fill-primary-500 inline mb-0.5">
|
||||
<g>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@
|
|||
</Skeleton>
|
||||
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<div class="font-semibold text-gray-200 line-clamp-1 break-all">
|
||||
<div class="font-semibold text-text-200 line-clamp-1 break-all">
|
||||
<Skeleton :enabled="!account" :min-width="90" :max-width="170" shape="rect">
|
||||
{{
|
||||
account?.display_name }}
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
|
||||
<span class="text-text-400 text-sm line-clamp-1 break-all w-full">
|
||||
<Skeleton :enabled="!account" :min-width="130" :max-width="250" shape="rect">
|
||||
@{{
|
||||
account?.acct
|
||||
|
|
|
|||
|
|
@ -14,24 +14,24 @@
|
|||
</Transition>
|
||||
<HoverCard.Positioner>
|
||||
<HoverCard.Content
|
||||
class="bg-dark-700 pb-4 w-96 z-20 overflow-y-auto rounded overflow-x-hidden ring-1 ring-white/20 shadow-xl max-h-[60vh] text-sm">
|
||||
class="bg-background-700 pb-4 w-96 z-20 overflow-y-auto rounded overflow-x-hidden ring-1 ring-white/20 shadow-xl max-h-[60vh] text-sm">
|
||||
<Avatar :src="account.header" :alt="`${account.acct}'s header image'`"
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
|
||||
|
||||
<div class="flex items-start justify-between px-4 py-3">
|
||||
<Avatar :src="account.avatar" :alt="`${account.acct}'s avatar'`"
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-200" />
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-background-200" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2 px-4">
|
||||
<h2
|
||||
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
|
||||
class="text-xl font-bold text-text-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
|
||||
<span v-html="display_name"></span>
|
||||
<iconify-icon v-if="account.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
|
||||
class="text-gray-400 cursor-pointer align-text-top ml-1"
|
||||
class="text-text-400 cursor-pointer align-text-top ml-1"
|
||||
title="This account manually approves its followers" />
|
||||
</h2>
|
||||
<span class="text-gray-300 block mt-2">
|
||||
<span class="text-text-300 block mt-2">
|
||||
@{{ account.acct }}
|
||||
</span>
|
||||
<div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
|
||||
|
|
@ -49,30 +49,30 @@
|
|||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="flex items-center space-x-1">
|
||||
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem"
|
||||
class="text-gray-400" />
|
||||
<span class="text-gray-400">Created {{ formattedJoin }}</span>
|
||||
class="text-text-400" />
|
||||
<span class="text-text-400">Created {{ formattedJoin }}</span>
|
||||
</div>
|
||||
<div v-if="account.bot" class="flex items-center space-x-1">
|
||||
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-400">Bot</span>
|
||||
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-text-400" />
|
||||
<span class="text-text-400">Bot</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<span class="font-bold text-gray-200">{{ account.statuses_count }}</span>
|
||||
<span class="text-gray-400">Posts</span>
|
||||
<span class="font-bold text-text-200">{{ account.statuses_count }}</span>
|
||||
<span class="text-text-400">Posts</span>
|
||||
</div>
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<span class="font-bold text-gray-200">{{ account.following_count }}</span>
|
||||
<span class="text-gray-400">Following</span>
|
||||
<span class="font-bold text-text-200">{{ account.following_count }}</span>
|
||||
<span class="text-text-400">Following</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
|
||||
<div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
|
||||
<span class="text-primary-500 font-semibold" v-html="field.name"></span>
|
||||
<span class="text-gray-200 prose prose-invert prose-sm break-all"
|
||||
<span class="text-text-200 prose prose-invert prose-sm break-all"
|
||||
v-html="field.value"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue