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,5 +1,5 @@
|
|||
<template>
|
||||
<div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
|
||||
<div v-bind="$attrs" class="bg-background-700 overflow-hidden flex items-center justify-center">
|
||||
<Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
|
||||
<img class="cursor-pointer ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
|
||||
</Skeleton>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
|
||||
enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
|
||||
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
|
||||
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
|
||||
<div class="max-h-40 max-w-full rounded ring-1 ring-background-300 bg-background-800 fixed z-20" :style="{
|
||||
left: `${x}px`,
|
||||
top: `${y}px`,
|
||||
width: `${width}px`,
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
|
||||
@click="emit('autocomplete', suggestion.key)"
|
||||
:ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
|
||||
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
|
||||
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-background-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
|
||||
<slot :suggestion="suggestion"></slot>
|
||||
</div>
|
||||
</OverlayScrollbarsComponent>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button v-bind="$props"
|
||||
:class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
|
||||
:class="['rounded text-text-300 hover:bg-background-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<!-- Content warning textbox -->
|
||||
<div v-if="cw" class="mb-4">
|
||||
<input type="text" v-model="cwContent" placeholder="Add a content warning"
|
||||
class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
|
||||
class="w-full p-2 mt-1 text-sm prose prose-invert bg-background-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
|
||||
aria-label="Content warning" />
|
||||
</div>
|
||||
<FileUploader v-model:files="files" ref="uploader" />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<input type="file" ref="fileInput" @change="handleFileInput" style="display: none" multiple />
|
||||
<div class="flex flex-row gap-2 overflow-x-auto *:shrink-0 p-1 mb-4" v-if="files.length > 0">
|
||||
<div v-for="(data) in files" :key="data.id" role="button" tabindex="0"
|
||||
:class="['size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
|
||||
:class="['size-28 bg-background-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
|
||||
@keydown.enter="removeFile(data.id)">
|
||||
<template v-if="data.file.type.startsWith('image/')">
|
||||
<img :src="createObjectURL(data.file)" class="w-full h-full object-cover cursor-default"
|
||||
|
|
@ -17,15 +17,15 @@
|
|||
</template>
|
||||
<!-- Shadow on media to better see buttons -->
|
||||
<div class="absolute inset-0 bg-black/70"></div>
|
||||
<div class="absolute bottom-1 right-1 p-1 bg-dark-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
|
||||
<div class="absolute bottom-1 right-1 p-1 bg-background-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
|
||||
aria-label="File size">
|
||||
{{ formatBytes(data.file.size) }}
|
||||
<!-- Loader spinner -->
|
||||
<iconify-icon v-if="data.progress < 1.0" icon="tabler:loader-2" width="none"
|
||||
class="size-4 animate-spin text-primary-500" />
|
||||
</div>
|
||||
<button class="absolute top-1 right-1 p-1 bg-dark-800 text-white text-xs rounded size-6" role="button"
|
||||
tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
|
||||
<button class="absolute top-1 right-1 p-1 bg-background-800 text-white text-xs rounded size-6"
|
||||
role="button" tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
|
||||
<iconify-icon icon="tabler:x" width="none" class="size-4" />
|
||||
</button>
|
||||
<!-- Alt text editor -->
|
||||
|
|
@ -33,15 +33,15 @@
|
|||
strategy: 'fixed',
|
||||
}" v-if="data.api_id" @update:open="o => !o && updateAltText(data.id, data.alt_text)">
|
||||
<Popover.Trigger aria-hidden="true"
|
||||
class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
|
||||
class="absolute top-1 left-1 p-1 bg-background-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
|
||||
<iconify-icon icon="tabler:alt" width="none" class="size-4" />
|
||||
</Popover.Trigger>
|
||||
<Popover.Positioner class="!z-[100]">
|
||||
<Popover.Content
|
||||
class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 !min-w-72">
|
||||
class="p-1 bg-background-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-text-300 !min-w-72">
|
||||
<textarea :disabled="data.progress < 1.0" @keydown.enter.stop v-model="data.alt_text"
|
||||
placeholder="Add alt text"
|
||||
class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
|
||||
class="w-full p-2 text-sm prose prose-invert bg-background-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
|
||||
<Button theme="secondary" @click="updateAltText(data.id, data.alt_text)" class="w-full"
|
||||
:loading="data.progress < 1.0">
|
||||
<span>Edit</span>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
|
||||
<Dialog.Content class="overflow-y-auto w-full max-h-full md:py-16">
|
||||
<div
|
||||
class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all w-full">
|
||||
class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-background-700 ring-1 ring-background-800 text-left shadow-xl transition-all w-full">
|
||||
<Composer v-if="instance" :instance="instance as any" />
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="w-full max-w-full rounded ring-1 ring-dark-300 bg-dark-800 absolute z-20 flex flex-col">
|
||||
<div class="w-full max-w-full rounded ring-1 ring-background-300 bg-background-800 absolute z-20 flex flex-col">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
leave-active-class="transition ease-out duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
|
||||
<Menu.Content v-if="open"
|
||||
:class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
|
||||
:class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-background-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
|
||||
<div v-if="isSmallScreen" class="w-full py-2">
|
||||
<div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
|
||||
<div class="rounded-full h-1 bg-text-400 w-12 mx-auto"></div>
|
||||
</div>
|
||||
<slot name="items"></slot>
|
||||
</Menu.Content>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<slot name="error" v-if="error" v-bind="{ error }">
|
||||
<div id="error" class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8">
|
||||
<div class="text-center prose prose-invert max-w-md w-full">
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">{{ error.title }}
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-gray-400" v-html="error.message"></p>
|
||||
<p class="mt-6 text-base leading-7 text-text-400" v-html="error.message"></p>
|
||||
<div class="mt-10 grid grid-cols-2 gap-x-6 mx-auto max-w-md">
|
||||
<Button theme="primary" class="w-full" @click="back">Go back</Button>
|
||||
<a href="https://github.com/lysand-org/frontend/issues" target="_blank">
|
||||
|
|
|
|||
|
|
@ -3,21 +3,22 @@ import SquarePattern from "../graphics/square-pattern.vue";
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-dark-900">
|
||||
<div
|
||||
class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-background-900">
|
||||
<SquarePattern />
|
||||
<div class="prose prose-invert max-w-lg">
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">JavaScript is disabled
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">JavaScript is disabled
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-gray-400">
|
||||
<p class="mt-6 text-base leading-7 text-text-400">
|
||||
This website requires JavaScript to function properly. Please enable JavaScript in your browser
|
||||
settings.
|
||||
</p>
|
||||
<p class="mt-6 text-base leading-7 text-gray-400">
|
||||
<p class="mt-6 text-base leading-7 text-text-400">
|
||||
If you are using a browser that does not support JavaScript, please consider using a modern browser
|
||||
like <a href="https://www.mozilla.org/firefox/new/" class="underline">Firefox</a> or <a
|
||||
href="https://www.google.com/chrome/" class="underline">Chrome</a>.
|
||||
</p>
|
||||
<p class="mt-6 text-base leading-7 text-gray-400">
|
||||
<p class="mt-6 text-base leading-7 text-text-400">
|
||||
This application does not track you, collect user data, use cookies of any kind or send requests to
|
||||
servers outside of your account's instance.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
patternUnits="userSpaceOnUse">
|
||||
<path d="M.5 200V.5H200" fill="none"></path>
|
||||
</pattern>
|
||||
</defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
|
||||
</defs><svg x="50%" y="-1" class="overflow-visible fill-text-800/20">
|
||||
<path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
||||
stroke-width="0"></path>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
|
||||
<div v-if="identity" class="bg-background-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
|
||||
<div class="sm:flex sm:items-center sm:justify-between gap-3">
|
||||
<div class="sm:flex sm:space-x-5 grow">
|
||||
<Avatar :src="identity.account.avatar"
|
||||
class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
|
||||
:alt="'Your avatar'" />
|
||||
<div
|
||||
class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
|
||||
<p class="text-sm font-medium text-gray-300">Welcome back,</p>
|
||||
<p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
|
||||
class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-background-800 py-2 px-4 rounded grow ring-1 ring-white/10">
|
||||
<p class="text-sm font-medium text-text-300">Welcome back,</p>
|
||||
<p class="text-xl font-bold text-text-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="flex flex-row justify-between">
|
||||
<label v-bind="$attrs"
|
||||
class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-gray-100">
|
||||
class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-text-100">
|
||||
<slot />
|
||||
</label>
|
||||
<div :id="`${$attrs.for}-label-slot`"></div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<TextInput @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
|
||||
:type="showPassword ? 'text' : 'password'" :spellcheck="false" />
|
||||
<Progress.Root class="flex flex-row items-center gap-x-2" v-if="showStrength">
|
||||
<Progress.Label class="text-xs text-gray-300 font-semibold w-12">
|
||||
<Progress.Label class="text-xs text-text-300 font-semibold w-12">
|
||||
{{ text }}
|
||||
</Progress.Label>
|
||||
<Progress.Track class="rounded-sm w-full h-2 duration-300" :style="{
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</Progress.Root>
|
||||
<Teleport :to="`#${$attrs.id}-label-slot`" v-if="teleport">
|
||||
<button type="button" @click="showPassword = !showPassword"
|
||||
class="text-xs ml-auto block mt-2 font-semibold text-gray-400">
|
||||
class="text-xs ml-auto block mt-2 font-semibold text-text-400">
|
||||
<iconify-icon icon="tabler:eye" class="size-4 align-text-top" height="none" />
|
||||
{{ showPassword ? "Hide password" : "Show password" }}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
class="resize-none min-h-48 prose prose-invert w-full p-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 bg-transparent appearance-none focus:!border-none focus:!outline-none disabled:cursor-not-allowed"
|
||||
aria-label="Compose your message" :autofocus="true"></textarea>
|
||||
<div v-if="maxCharacters"
|
||||
:class="['absolute bottom-0 right-0 p-2 text-gray-300 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']"
|
||||
:class="['absolute bottom-0 right-0 p-2 text-text-300 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']"
|
||||
aria-live="polite">
|
||||
{{ remainingCharacters }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
|
||||
<input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-background-500 rounded-md border-0 py-1.5 text-text-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-text-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
|
||||
isInvalid && '!ring-red-600 ring-2']">
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<Teleport to="body">
|
||||
<Toaster :toaster="toaster" v-slot="toast">
|
||||
<Toast.Root
|
||||
class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-dark-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
|
||||
class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-background-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
|
||||
<div class="grid grid-cols-[auto_1fr_auto]">
|
||||
<div class="shrink-0 h-6 w-6">
|
||||
<iconify-icon v-if="toast.type === 'success'" icon="tabler:check" height="none"
|
||||
|
|
@ -15,13 +15,13 @@
|
|||
class="h-6 w-6 text-blue-500" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3 flex-1 pt-0.5 shrink-0 min-w-48">
|
||||
<Toast.Title class="text-sm font-semibold text-gray-50">{{ toast.title }}</Toast.Title>
|
||||
<Toast.Description class="mt-1 text-sm text-gray-400">{{
|
||||
<Toast.Title class="text-sm font-semibold text-text-50">{{ toast.title }}</Toast.Title>
|
||||
<Toast.Description class="mt-1 text-sm text-text-400">{{
|
||||
toast.description }}</Toast.Description>
|
||||
</div>
|
||||
<div class="ml-4 flex shrink-0">
|
||||
<Toast.CloseTrigger type="button" title="Close this notification"
|
||||
class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
|
||||
class="inline-flex rounded-md text-text-400 hover:text-text-300 duration-200">
|
||||
<iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
|
||||
</Toast.CloseTrigger>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<!-- OIDC linked accounts manager -->
|
||||
<div class="w-full ring-1 ring-white/5 pb-5 bg-dark-800 rounded overflow-hidden">
|
||||
<div class="w-full ring-1 ring-white/5 pb-5 bg-background-800 rounded overflow-hidden">
|
||||
<div class="px-4 py-4">
|
||||
<h3 class="font-semibold text-gray-300 text-xl">Linked accounts</h3>
|
||||
<h3 class="font-semibold text-text-300 text-xl">Linked accounts</h3>
|
||||
</div>
|
||||
<div class="px-4 py-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
|
||||
<div v-for="provider of ssoConfig?.providers" :key="provider.id"
|
||||
class="flex items-center justify-between p-4 bg-dark-700 rounded">
|
||||
class="flex items-center justify-between p-4 bg-background-700 rounded">
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar :src="provider.icon" :alt="provider.name" class="h-8 w-8" />
|
||||
<span class="font-semibold text-gray-300">{{ provider.name }}</span>
|
||||
<span class="font-semibold text-text-300">{{ provider.name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<Button theme="primary" :loading="loading"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div
|
||||
class="w-full md:px-8 px-4 py-4 bg-dark-700 grid justify-center lg:grid-cols-[minmax(auto,_36rem)_1fr] grid-cols-1 gap-4">
|
||||
<form class="w-full ring-1 ring-inset ring-white/5 pb-5 bg-dark-800 rounded overflow-hidden"
|
||||
class="w-full md:px-8 px-4 py-4 bg-background-700 grid justify-center lg:grid-cols-[minmax(auto,_36rem)_1fr] grid-cols-1 gap-4">
|
||||
<form class="w-full ring-1 ring-inset ring-white/5 pb-5 bg-background-800 rounded overflow-hidden"
|
||||
@submit.prevent="save">
|
||||
<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>
|
||||
|
||||
<div class="mt-2 px-4">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<TextInput @input="acct = ($event.target as HTMLInputElement).value" :value="acct"
|
||||
aria-label="Username" :disabled="loading" />
|
||||
</div>
|
||||
<p class="text-gray-300 text-xs mt-2">
|
||||
<p class="text-text-300 text-xs mt-2">
|
||||
Changing your username will break all links to your profile.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100 h-full">
|
||||
<div class="w-full px-8 py-4 bg-background-700 hover:bg-background-500 duration-100 h-full">
|
||||
<div class="max-w-7xl mx-auto h-full">
|
||||
<SettingBoolean v-if="setting.type === SettingType.Boolean" :id="id" />
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
implemented
|
||||
</p>
|
||||
<p v-else :data-disabled="setting.notImplemented ? '' : undefined"
|
||||
class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
|
||||
class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-text-300">{{
|
||||
setting.description }}
|
||||
</p>
|
||||
<Switch.Control :data-disabled="setting.notImplemented ? '' : undefined"
|
||||
|
|
|
|||
|
|
@ -2,20 +2,19 @@
|
|||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
<slot>
|
||||
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%] duration-100"
|
||||
v-if="identity">
|
||||
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%] duration-100" v-if="identity">
|
||||
<div class="shrink-0">
|
||||
<Avatar class="size-12 rounded ring-1 ring-white/5" :src="identity.account.avatar"
|
||||
:alt="`${identity.account.acct}'s avatar'`" />
|
||||
</div>
|
||||
<div class="flex flex-col items-start p-1 justify-around grow overflow-hidden">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<div class="font-semibold text-gray-200 text-sm line-clamp-1 break-all">
|
||||
<div class="font-semibold text-text-200 text-sm line-clamp-1 break-all">
|
||||
{{
|
||||
identity.account.display_name }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-xs line-clamp-1 break-all w-full">
|
||||
<span class="text-text-400 text-xs line-clamp-1 break-all w-full">
|
||||
Change account
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -28,7 +27,7 @@
|
|||
</template>
|
||||
<template #items>
|
||||
<div class="p-2">
|
||||
<h3 class="text-gray-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
|
||||
<h3 class="text-text-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
|
||||
</h3>
|
||||
</div>
|
||||
<div class="px-2 py-4 md:py-2 flex flex-col gap-3 max-w-[100vw]">
|
||||
|
|
@ -41,12 +40,12 @@
|
|||
<div data-part="item" class="flex flex-col items-start justify-around grow overflow-hidden"
|
||||
@click="useEvent('identity:change', identity)">
|
||||
<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">
|
||||
{{
|
||||
identity.account.display_name }}
|
||||
</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">
|
||||
@{{
|
||||
identity.account.acct
|
||||
}}
|
||||
|
|
@ -55,7 +54,7 @@
|
|||
<button data-part="item"
|
||||
class="shrink-0 ml-6 size-12 ring-white/5 ring-1 flex items-center justify-center rounded"
|
||||
@click="$emit('signOut', identity.id)">
|
||||
<iconify-icon icon="tabler:logout" class="size-6 text-gray-200" width="none" />
|
||||
<iconify-icon icon="tabler:logout" class="size-6 text-text-200" width="none" />
|
||||
</button>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<aside v-bind="$props" role="complementary" :aria-expanded="open ? 'true' : 'false'"
|
||||
:class="['flex max-h-dvh overflow-hidden duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
|
||||
<OverlayScrollbarsComponent :defer="true"
|
||||
class="bg-dark-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
|
||||
class="bg-background-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
|
||||
<slot />
|
||||
</OverlayScrollbarsComponent>
|
||||
<button @click="open = !open" aria-label="Toggle sidebar"
|
||||
class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
|
||||
class="h-full bg-background-700 hover:bg-background-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
|
||||
<iconify-icon icon="tabler:chevron-right"
|
||||
:class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
|
||||
:class="['text-text-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
|
||||
aria-hidden="true" />
|
||||
</button>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<aside
|
||||
class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
|
||||
class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-background-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-background-500"
|
||||
aria-label="Navigation" role="complementary">
|
||||
<NuxtLink href="/">
|
||||
<img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</NuxtLink>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
<h3 class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
Timelines</h3>
|
||||
|
||||
<NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3 mt-auto">
|
||||
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
<h3 class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
Account</h3>
|
||||
|
||||
<AccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
|
||||
|
|
@ -39,13 +39,13 @@
|
|||
</ButtonBase>
|
||||
</NuxtLink>
|
||||
<h3 v-if="identity"
|
||||
class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
Posts</h3>
|
||||
<ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)" theme="gradient"
|
||||
class="!justify-start overflow-hidden">
|
||||
<Icon icon="tabler:writing" class="!size-6" />
|
||||
<span class="shrink-0 line-clamp-1">Compose</span>
|
||||
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row ml-auto">
|
||||
<kbd class="text-xs font-semibold rounded bg-background-500 font-mono px-1 flex flex-row ml-auto">
|
||||
<iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline" aria-hidden="true" />
|
||||
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
|
||||
aria-hidden="true" />
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
</aside>
|
||||
<!-- Mobile bottom navbar -->
|
||||
<nav
|
||||
:class="['fixed bottom-0 left-0 right-0 z-20 h-16 md:hidden grid gap-3 p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
|
||||
:class="['fixed bottom-0 left-0 right-0 z-20 h-16 md:hidden grid gap-3 p-2 *:shadow-xl bg-background-900 ring-1 ring-white/10 text-text-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
|
||||
|
||||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<Tabs.Root v-model="tab">
|
||||
<Tabs.List class="flex flex-row p-4 gap-4 bg-dark-800 relative ring-1 ring-white/5 overflow-x-auto">
|
||||
<Tabs.List class="flex flex-row p-4 gap-4 bg-background-800 relative ring-1 ring-white/5 overflow-x-auto">
|
||||
<Tabs.Trigger :value="page" v-for="page of SettingPages" :as-child="true">
|
||||
<ButtonBase class="capitalize hover:bg-white/5">
|
||||
{{ page }}
|
||||
</ButtonBase>
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Indicator class="h-1 bg-gray-300 w-[--width] top-0 rounded-b" />
|
||||
<Tabs.Indicator class="h-1 bg-text-300 w-[--width] top-0 rounded-b" />
|
||||
</Tabs.List>
|
||||
<Tabs.Content :value="page" v-for="page of SettingPages">
|
||||
<slot :name="page" />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div v-for="index of lines" :class="[
|
||||
'duration-200 animate-pulse bg-dark-100 [&:not(:first-child)]:mt-2',
|
||||
shape === 'circle' ? 'rounded-full' : 'rounded',
|
||||
['text', 'content'].includes(type) && 'h-[1em]',
|
||||
props.class
|
||||
]" v-if="enabled" :style="{
|
||||
'duration-200 animate-pulse bg-background-100 [&:not(:first-child)]:mt-2',
|
||||
shape === 'circle' ? 'rounded-full' : 'rounded',
|
||||
['text', 'content'].includes(type) && 'h-[1em]',
|
||||
props.class
|
||||
]" v-if="enabled" :style="{
|
||||
width: getWidth(index, lines),
|
||||
}">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
</div>
|
||||
|
||||
<div v-if="hasReachedEnd && items.length > 0"
|
||||
class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
|
||||
class="flex flex-col items-center justify-center gap-2 text-text-200 text-center p-10">
|
||||
<span class="text-lg font-semibold">You've scrolled so far, there's nothing left to show.</span>
|
||||
<span class="text-sm">You can always go back and see what you missed.</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="hasReachedEnd && items.length === 0"
|
||||
class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
|
||||
class="flex flex-col items-center justify-center gap-2 text-text-200 text-center p-10">
|
||||
<span class="text-lg font-semibold">There's nothing to show here.</span>
|
||||
<span class="text-sm">Either you're all caught up or there's nothing to show.</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue