mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 16:38:20 +01:00
Revert "feat: ♻️ Rename dark to background, refactor themes"
This reverts commit 842033c950.
This commit is contained in:
Jesse Wierzbinski
parent
842033c950
commit
518104f47b
2
app.vue
2
app.vue
|
|
@ -52,7 +52,7 @@ useHead({
|
|||
},
|
||||
noscript: [
|
||||
{
|
||||
innerHTML: `<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" data-v-inspector="components/errors/noscript.vue:2:5"><svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true" data-v-inspector="components/graphics/square-pattern.vue:2:5"><defs data-v-inspector="components/graphics/square-pattern.vue:4:9"><pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse" data-v-inspector="components/graphics/square-pattern.vue:5:13"><path d="M.5 200V.5H200" fill="none" data-v-inspector="components/graphics/square-pattern.vue:7:17"></path></pattern></defs><svg x="50%" y="-1" class="overflow-visible fill-text-800/20" data-v-inspector="components/graphics/square-pattern.vue:9:16"><path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" data-v-inspector="components/graphics/square-pattern.vue:10:13"></path></svg><rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" data-v-inspector="components/graphics/square-pattern.vue:13:9"></rect></svg><div class="prose prose-invert max-w-lg" data-v-inspector="components/errors/noscript.vue:4:9"><h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl" data-v-inspector="components/errors/noscript.vue:5:13">JavaScript is disabled </h1><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:7:13"> This website requires JavaScript to function properly. Please enable JavaScript in your browser settings. </p><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:11:13"> 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" data-v-inspector="components/errors/noscript.vue:13:22">Firefox</a> or <a href="https://www.google.com/chrome/" class="underline" data-v-inspector="components/errors/noscript.vue:13:102">Chrome</a>. </p><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:16:13"> 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></div></div>`,
|
||||
innerHTML: `<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" data-v-inspector="components/errors/noscript.vue:2:5"><svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true" data-v-inspector="components/graphics/square-pattern.vue:2:5"><defs data-v-inspector="components/graphics/square-pattern.vue:4:9"><pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse" data-v-inspector="components/graphics/square-pattern.vue:5:13"><path d="M.5 200V.5H200" fill="none" data-v-inspector="components/graphics/square-pattern.vue:7:17"></path></pattern></defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20" data-v-inspector="components/graphics/square-pattern.vue:9:16"><path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" data-v-inspector="components/graphics/square-pattern.vue:10:13"></path></svg><rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" data-v-inspector="components/graphics/square-pattern.vue:13:9"></rect></svg><div class="prose prose-invert max-w-lg" data-v-inspector="components/errors/noscript.vue:4:9"><h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl" data-v-inspector="components/errors/noscript.vue:5:13">JavaScript is disabled </h1><p class="mt-6 text-base leading-7 text-gray-400" data-v-inspector="components/errors/noscript.vue:7:13"> 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" data-v-inspector="components/errors/noscript.vue:11:13"> 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" data-v-inspector="components/errors/noscript.vue:13:22">Firefox</a> or <a href="https://www.google.com/chrome/" class="underline" data-v-inspector="components/errors/noscript.vue:13:102">Chrome</a>. </p><p class="mt-6 text-base leading-7 text-gray-400" data-v-inspector="components/errors/noscript.vue:16:13"> 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></div></div>`,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-bind="$attrs" class="bg-background-700 overflow-hidden flex items-center justify-center">
|
||||
<div v-bind="$attrs" class="bg-dark-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-background-300 bg-background-800 fixed z-20" :style="{
|
||||
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-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-background-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
|
||||
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-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-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']">
|
||||
: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']">
|
||||
<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-background-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-dark-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-background-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-dark-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-background-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-dark-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-background-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-dark-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-background-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
|
||||
class="absolute top-1 left-1 p-1 bg-dark-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-background-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-text-300 !min-w-72">
|
||||
class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-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-background-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-dark-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-background-700 ring-1 ring-background-800 text-left shadow-xl transition-all w-full">
|
||||
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">
|
||||
<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-background-300 bg-background-800 absolute z-20 flex flex-col">
|
||||
<div class="w-full max-w-full rounded ring-1 ring-dark-300 bg-dark-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-background-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-dark-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-text-400 w-12 mx-auto"></div>
|
||||
<div class="rounded-full h-1 bg-gray-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-text-100 sm:text-5xl">{{ error.title }}
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-text-400" v-html="error.message"></p>
|
||||
<p class="mt-6 text-base leading-7 text-gray-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,22 +3,21 @@ 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-background-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-dark-900">
|
||||
<SquarePattern />
|
||||
<div class="prose prose-invert max-w-lg">
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">JavaScript is disabled
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">JavaScript is disabled
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-text-400">
|
||||
<p class="mt-6 text-base leading-7 text-gray-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-text-400">
|
||||
<p class="mt-6 text-base leading-7 text-gray-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-text-400">
|
||||
<p class="mt-6 text-base leading-7 text-gray-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-text-800/20">
|
||||
</defs><svg x="50%" y="-1" class="overflow-visible fill-gray-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-background-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
|
||||
<div v-if="identity" class="bg-dark-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-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>
|
||||
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>
|
||||
</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-text-100">
|
||||
class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-gray-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-text-300 font-semibold w-12">
|
||||
<Progress.Label class="text-xs text-gray-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-text-400">
|
||||
class="text-xs ml-auto block mt-2 font-semibold text-gray-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-text-300 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']"
|
||||
:class="['absolute bottom-0 right-0 p-2 text-gray-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-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',
|
||||
<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',
|
||||
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-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">
|
||||
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">
|
||||
<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-text-50">{{ toast.title }}</Toast.Title>
|
||||
<Toast.Description class="mt-1 text-sm text-text-400">{{
|
||||
<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.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-text-400 hover:text-text-300 duration-200">
|
||||
class="inline-flex rounded-md text-gray-400 hover:text-gray-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-background-800 rounded overflow-hidden">
|
||||
<div class="w-full ring-1 ring-white/5 pb-5 bg-dark-800 rounded overflow-hidden">
|
||||
<div class="px-4 py-4">
|
||||
<h3 class="font-semibold text-text-300 text-xl">Linked accounts</h3>
|
||||
<h3 class="font-semibold text-gray-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-background-700 rounded">
|
||||
class="flex items-center justify-between p-4 bg-dark-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-text-300">{{ provider.name }}</span>
|
||||
<span class="font-semibold text-gray-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-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"
|
||||
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"
|
||||
@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-background-700 !rounded-none" />
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-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-background-800" />
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-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-text-300 text-xs mt-2">
|
||||
<p class="text-gray-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-background-700 hover:bg-background-500 duration-100 h-full">
|
||||
<div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-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-text-300">{{
|
||||
class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
|
||||
setting.description }}
|
||||
</p>
|
||||
<Switch.Control :data-disabled="setting.notImplemented ? '' : undefined"
|
||||
|
|
|
|||
|
|
@ -2,19 +2,20 @@
|
|||
<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-text-200 text-sm line-clamp-1 break-all">
|
||||
<div class="font-semibold text-gray-200 text-sm line-clamp-1 break-all">
|
||||
{{
|
||||
identity.account.display_name }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-text-400 text-xs line-clamp-1 break-all w-full">
|
||||
<span class="text-gray-400 text-xs line-clamp-1 break-all w-full">
|
||||
Change account
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
</template>
|
||||
<template #items>
|
||||
<div class="p-2">
|
||||
<h3 class="text-text-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
|
||||
<h3 class="text-gray-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]">
|
||||
|
|
@ -40,12 +41,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-text-200 line-clamp-1 break-all">
|
||||
<div class="font-semibold text-gray-200 line-clamp-1 break-all">
|
||||
{{
|
||||
identity.account.display_name }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-text-400 text-sm line-clamp-1 break-all w-full">
|
||||
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
|
||||
@{{
|
||||
identity.account.acct
|
||||
}}
|
||||
|
|
@ -54,7 +55,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-text-200" width="none" />
|
||||
<iconify-icon icon="tabler:logout" class="size-6 text-gray-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-background-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
|
||||
class="bg-dark-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-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">
|
||||
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">
|
||||
<iconify-icon icon="tabler:chevron-right"
|
||||
:class="['text-text-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
|
||||
:class="['text-gray-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-background-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-background-500"
|
||||
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"
|
||||
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-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
<h3 class="font-semibold text-gray-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-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
<h3 class="font-semibold text-gray-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-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
class="font-semibold text-gray-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-background-500 font-mono px-1 flex flex-row ml-auto">
|
||||
<kbd class="text-xs font-semibold rounded bg-dark-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-background-900 ring-1 ring-white/10 text-text-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-dark-900 ring-1 ring-white/10 text-gray-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-background-800 relative ring-1 ring-white/5 overflow-x-auto">
|
||||
<Tabs.List class="flex flex-row p-4 gap-4 bg-dark-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-text-300 w-[--width] top-0 rounded-b" />
|
||||
<Tabs.Indicator class="h-1 bg-gray-300 w-[--width] top-0 rounded-b" />
|
||||
</Tabs.List>
|
||||
<Tabs.Content :value="page" v-for="page of SettingPages">
|
||||
<slot :name="page" />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div v-for="index of lines" :class="[
|
||||
'duration-200 animate-pulse bg-background-100 [&:not(:first-child)]:mt-2',
|
||||
'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
|
||||
|
|
|
|||
|
|
@ -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-background-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
|
||||
class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-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-text-200 font-semibold uppercase text-xs">Administrator</h2>
|
||||
<h2 class="text-gray-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-text-400 flex flex-row gap-3">
|
||||
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-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-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">
|
||||
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">
|
||||
{{ 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-background-800 w-full h-full rounded flex items-center justify-center"
|
||||
:href="attachment.url" target="_blank" download>
|
||||
<a v-else class="bg-dark-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-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">{{
|
||||
<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">{{
|
||||
formatBytes(Number(attachment.meta?.length)) }}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -25,12 +25,11 @@
|
|||
strategy: 'fixed',
|
||||
}" v-if="attachment.description">
|
||||
<Popover.Trigger aria-hidden="true"
|
||||
class="absolute top-2 right-2 p-1 bg-background-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
|
||||
class="absolute top-2 right-2 p-1 bg-dark-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-background-400 rounded text-sm ring-1 ring-background-100 shadow-lg text-text-300">
|
||||
<Popover.Content class="p-4 bg-dark-400 rounded text-sm ring-1 ring-dark-100 shadow-lg text-gray-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-text-200 line-clamp-1 break-all">
|
||||
<NuxtLink :href="accountUrl" class="font-semibold text-gray-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-text-300 ml-2 line-clamp-1 break-all shrink-0">
|
||||
<NuxtLink :href="noteUrl" class="text-gray-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-text-200 line-clamp-1 break-all">
|
||||
<NuxtLink :href="accountUrl" class="font-semibold text-gray-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-text-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
|
||||
<NuxtLink :href="noteUrl" class="text-gray-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-text-300 text-sm line-clamp-1 break-all w-full group">
|
||||
<span class="text-gray-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-text-200"
|
||||
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-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-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">
|
||||
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">
|
||||
<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-background-800 hover:bg-background-700 duration-200">
|
||||
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">
|
||||
<!-- 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-background-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-dark-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-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>
|
||||
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>
|
||||
</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-text-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
|
||||
class="size-5 text-gray-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-text-200" aria-hidden="true" />
|
||||
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
|
||||
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>
|
||||
</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-text-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
|
||||
class="size-5 text-gray-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-text-200" aria-hidden="true" />
|
||||
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.reblogs_count) }}</span>
|
||||
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>
|
||||
</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-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>
|
||||
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>
|
||||
</button>
|
||||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-text-200"
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-gray-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-text-300 opacity-70">
|
||||
<NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-gray-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-background-400">
|
||||
<div class="flex flex-col p-1 bg-dark-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-text-200" aria-hidden="true" />
|
||||
<iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-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-text-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
|
||||
<span class="text-gray-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-background-800">
|
||||
<div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-dark-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-background-800">
|
||||
<div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800">
|
||||
<Avatar :src="account?.header" :alt="`${account?.acct}'s header image'`"
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-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-background-800" />
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-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-text-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-gray-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-text-400 cursor-pointer align-text-top ml-1"
|
||||
class="text-gray-400 cursor-pointer align-text-top ml-1"
|
||||
title="This account manually approves its followers" />
|
||||
</Skeleton>
|
||||
</h2>
|
||||
<span class="text-text-300 block mt-2">
|
||||
<span class="text-gray-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-text-400" />
|
||||
<span class="text-text-400">Created {{ formattedJoin }}</span>
|
||||
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-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-text-400" />
|
||||
<span class="text-text-400">Bot</span>
|
||||
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-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-text-200">{{ account?.statuses_count }}</span>
|
||||
<span class="text-text-400">Posts</span>
|
||||
<span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
|
||||
<span class="text-gray-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-text-200">{{ account?.following_count }}</span>
|
||||
<span class="text-text-400">Following</span>
|
||||
<span class="font-bold text-gray-200">{{ account?.following_count }}</span>
|
||||
<span class="text-gray-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-text-200 prose prose-invert break-all" v-html="field.value"></span>
|
||||
<span class="text-gray-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-text-200" aria-hidden="true" />
|
||||
<iconify-icon width="unset" icon="tabler:dots" class="size-5 text-gray-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-background-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-dark-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-background-400 text-text-200 ring-1 ring-white/10 shadow-xl">
|
||||
class="rounded px-4 py-2 text-sm bg-dark-400 text-gray-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-text-200 line-clamp-1 break-all">
|
||||
<div class="font-semibold text-gray-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-text-400 text-sm line-clamp-1 break-all w-full">
|
||||
<span class="text-gray-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-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">
|
||||
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">
|
||||
<Avatar :src="account.header" :alt="`${account.acct}'s header image'`"
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-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-background-200" />
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-200" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2 px-4">
|
||||
<h2
|
||||
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">
|
||||
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">
|
||||
<span v-html="display_name"></span>
|
||||
<iconify-icon v-if="account.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
|
||||
class="text-text-400 cursor-pointer align-text-top ml-1"
|
||||
class="text-gray-400 cursor-pointer align-text-top ml-1"
|
||||
title="This account manually approves its followers" />
|
||||
</h2>
|
||||
<span class="text-text-300 block mt-2">
|
||||
<span class="text-gray-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-text-400" />
|
||||
<span class="text-text-400">Created {{ formattedJoin }}</span>
|
||||
class="text-gray-400" />
|
||||
<span class="text-gray-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-text-400" />
|
||||
<span class="text-text-400">Bot</span>
|
||||
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-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-text-200">{{ account.statuses_count }}</span>
|
||||
<span class="text-text-400">Posts</span>
|
||||
<span class="font-bold text-gray-200">{{ account.statuses_count }}</span>
|
||||
<span class="text-gray-400">Posts</span>
|
||||
</div>
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<span class="font-bold text-text-200">{{ account.following_count }}</span>
|
||||
<span class="text-text-400">Following</span>
|
||||
<span class="font-bold text-gray-200">{{ account.following_count }}</span>
|
||||
<span class="text-gray-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-text-200 prose prose-invert prose-sm break-all"
|
||||
<span class="text-gray-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-text-200 text-center p-10">
|
||||
class="flex flex-col items-center justify-center gap-2 text-gray-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-text-200 text-center p-10">
|
||||
class="flex flex-col items-center justify-center gap-2 text-gray-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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="from-background-600 to-background-900 bg-gradient-to-tl relative min-h-dvh">
|
||||
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl relative min-h-dvh">
|
||||
<SquarePattern />
|
||||
<Navigation />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<main class="from-background-600 to-background-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
|
||||
<main class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
|
||||
<Navigation />
|
||||
<slot />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const themes = {
|
|||
"[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:theme(colors.zinc.800)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5",
|
||||
// Gradient: bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400
|
||||
gradient:
|
||||
"bg-[image:--btn-bg] before:bg-[image:--btn-bg] [--btn-border:theme(colors.primary.950/90%)] [--btn-bg:linear-gradient(to_right,theme(colors.primary.300),theme(colors.purple.300),theme(colors.indigo.400))] [--btn-hover-overlay:theme(colors.white/10%)] [--btn-icon:theme(colors.text.100)] active:[--btn-icon:theme(colors.text.50)] hover:[--btn-icon:theme(colors.text.50)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] [&>[data-spinner]]:bg-[image:--btn-bg]",
|
||||
"bg-[image:--btn-bg] before:bg-[image:--btn-bg] [--btn-border:theme(colors.primary.950/90%)] [--btn-bg:linear-gradient(to_right,theme(colors.primary.300),theme(colors.purple.300),theme(colors.indigo.400))] [--btn-hover-overlay:theme(colors.white/10%)] [--btn-icon:theme(colors.gray.100)] active:[--btn-icon:theme(colors.gray.50)] hover:[--btn-icon:theme(colors.gray.50)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] [&>[data-spinner]]:bg-[image:--btn-bg]",
|
||||
outline:
|
||||
"[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:transparent] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.200)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] hover:ring-1 ring-white/5",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
|
||||
<img crossorigin="anonymous" :src="client.icon" class="h-10 w-10" :alt="`${client.name}'s logo'`" />
|
||||
<div class="flex flex-col justify-between items-start">
|
||||
<h2 class="text-text-100 font-semibold">{{ client.name }}</h2>
|
||||
<h2 class="text-gray-100 font-semibold">{{ client.name }}</h2>
|
||||
<span class="underline text-primary-700">{{ client.link }}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<div class="mx-auto max-w-2xl w-full">
|
||||
<div class="shrink-0 p-10 h-dvh" v-if="!identity">
|
||||
<button type="button"
|
||||
class="relative block h-full w-full rounded-lg border-2 border-dashed border-background-300 p-12 text-center">
|
||||
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-text-400" />
|
||||
<span class="mt-3 block text-sm font-semibold text-text-200 max-w-56 mx-auto">Notifications
|
||||
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
|
||||
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
|
||||
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
|
||||
will
|
||||
appear here
|
||||
when you
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
|
||||
<VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema"
|
||||
:action="redirectUrl.toString()">
|
||||
<h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Login to your account</h1>
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
|
||||
|
||||
<div v-if="params.error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
|
||||
<h2 class="font-bold text-lg">An error occured</h2>
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
|
||||
<div v-if="ssoConfig && ssoConfig.providers.length > 0" class="w-full space-y-3">
|
||||
<div
|
||||
class="flex items-center text-center w-full after:border-b after:border-background-200 after:flex-1 after:ml-2 before:border-b before:border-background-200 before:flex-1 before:mr-2">
|
||||
<h2 class="text-sm text-text-200 font-semibold">Or sign in with</h2>
|
||||
class="flex items-center text-center w-full after:border-b after:border-dark-200 after:flex-1 after:ml-2 before:border-b before:border-dark-200 before:flex-1 before:mr-2">
|
||||
<h2 class="text-sm text-gray-200 font-semibold">Or sign in with</h2>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 md:[&:has(>:last-child:nth-child(1))]:grid-cols-1 gap-4 w-full">
|
||||
<a v-for="provider of ssoConfig.providers" :key="provider.id"
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-text-300">
|
||||
<p class="text-xs text-gray-300">
|
||||
You are signing in to <strong>{{ hostname }}</strong>. If you did not intend to sign in
|
||||
here, please close this page.
|
||||
</p>
|
||||
|
|
@ -62,14 +62,14 @@
|
|||
</VeeForm>
|
||||
</div>
|
||||
<div v-else class="mx-auto max-w-md">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
||||
parameters
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
|
||||
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
|
||||
API</strong> client to access this page.
|
||||
</p>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">Here are some recommended clients:</p>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
|
||||
<ul class="w-full flex flex-col gap-3 mt-4">
|
||||
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
|
||||
<a :href="client.link" target="_blank"
|
||||
|
|
@ -77,18 +77,18 @@
|
|||
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
|
||||
class="h-10 w-10" />
|
||||
<div class="flex flex-col justify-between items-start">
|
||||
<h2 class="font-bold text-text-100">{{ client.name }}</h2>
|
||||
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
|
||||
<span class="underline text-primary-700">{{ client.link }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Many other clients exist, but <strong class="font-bold">they have not been tested for
|
||||
compatibility</strong>. Bug reports are nevertheless welcome.
|
||||
</p>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||
target="_blank" class="underline text-primary-700">the issue tracker</a>.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -2,19 +2,19 @@
|
|||
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
|
||||
|
||||
<div class="mx-auto max-w-md mt-10">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Here's your code
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">You have signed in successfully. Your code is
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
|
||||
</p>
|
||||
<div class="prose prose-invert select-all mt-6">
|
||||
<pre
|
||||
class="overflow-x-hidden whitespace-normal break-all bg-background-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
|
||||
class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
|
||||
</div>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">Paste this code into the application you are signing in
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
|
||||
to.
|
||||
</p>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||
target="_blank" class="underline text-primary-700">the issue tracker</a>.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@
|
|||
<form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
|
||||
<input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
|
||||
<div class="flex flex-col items-center gap-y-5">
|
||||
<h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Allow this application to
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
|
||||
access your
|
||||
account?</h1>
|
||||
<div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
|
||||
<h2 class="font-bold text-text-200">{{ application }}</h2>
|
||||
<h2 class="font-bold text-gray-200">{{ application }}</h2>
|
||||
<a v-if="website" :href="website" target="_blank" class="underline text-primary-700">{{ website
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-text-50 tracking-tight text-xl font-semibold">
|
||||
<h2 class="text-gray-50 tracking-tight text-xl font-semibold">
|
||||
This application will be able to:
|
||||
</h2>
|
||||
|
||||
|
|
@ -25,16 +25,16 @@
|
|||
<path
|
||||
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" />
|
||||
</svg>
|
||||
<h2 class="text-sm text-text-200">
|
||||
<h2 class="text-sm text-gray-200">
|
||||
<strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
|
||||
</h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex-col flex gap-y-1">
|
||||
<p class="text-sm text-text-200">You are signing in to <b>{{ application }}</b> with your
|
||||
<p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
|
||||
account.</p>
|
||||
<p class="text-sm text-text-200">This allows <b>{{ application }}</b> to perform the above
|
||||
<p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above
|
||||
account
|
||||
actions.</p>
|
||||
</div>
|
||||
|
|
@ -48,14 +48,14 @@
|
|||
</form>
|
||||
</div>
|
||||
<div v-else class="mx-auto max-w-md mt-10">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
||||
parameters
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
|
||||
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
|
||||
API</strong> client to access this page.
|
||||
</p>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">Here are some recommended clients:</p>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
|
||||
<ul class="w-full flex flex-col gap-3 mt-4">
|
||||
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
|
||||
<a :href="client.link" target="_blank"
|
||||
|
|
@ -63,18 +63,18 @@
|
|||
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
|
||||
class="h-10 w-10" />
|
||||
<div class="flex flex-col justify-between items-start">
|
||||
<h2 class="font-bold text-text-100">{{ client.name }}</h2>
|
||||
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
|
||||
<span class="underline text-primary-700">{{ client.link }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Many other clients exist, but <strong class="font-bold">they have not been tested for
|
||||
compatibility</strong>. Bug reports are nevertheless welcome.
|
||||
</p>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||
target="_blank" class="underline text-primary-700">the issue tracker</a>.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
|
||||
<input type="hidden" name="token" :value="params.token" />
|
||||
|
||||
<h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Reset your password</h1>
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
|
||||
|
||||
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
|
||||
<h2 class="font-bold text-lg">An error occured</h2>
|
||||
|
|
@ -43,22 +43,22 @@
|
|||
</VeeForm>
|
||||
</div>
|
||||
<div v-else-if="params.success">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Password reset
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
|
||||
successful!
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300 text-center">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300 text-center">
|
||||
You can now login to your account with your new password.
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="mx-auto max-w-md">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
||||
parameters
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
|
||||
through a valid password reset request. Please ask your admin to reset your password.
|
||||
</p>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-text-300">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||
target="_blank" class="underline text-primary-700">the issue tracker</a>.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<span class="text-sm">{{ errors.error }}</span>
|
||||
</div>
|
||||
<VeeForm class="flex flex-col gap-y-6" @submit="s => register((s as any))" :validation-schema="schema">
|
||||
<h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Account details</h1>
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Account details</h1>
|
||||
|
||||
<VeeField name="username" v-slot="{ errorMessage, field }" validate-on-change>
|
||||
<Field>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<Field>
|
||||
<div class="flex flex-row gap-x-2 items-center">
|
||||
<CheckboxInput :checked="true" id="tos" required :disabled="true" v-bind="field" />
|
||||
<Label for="tos" class="!text-text-200">
|
||||
<Label for="tos" class="!text-gray-200">
|
||||
I agree to the Terms of Service
|
||||
</Label>
|
||||
</div>
|
||||
|
|
@ -73,12 +73,12 @@
|
|||
<Button theme="secondary" class="w-full">View Terms of Service</Button>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content
|
||||
class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-background-700 rounded mt-3">
|
||||
class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3">
|
||||
<div v-html="tos?.content"></div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
|
||||
<p class="text-xs font-semibold text-text-300">
|
||||
<p class="text-xs font-semibold text-gray-300">
|
||||
Passwords are stored securely and hashed. We do not store your password in plain text.
|
||||
Administrators
|
||||
cannot see your password.
|
||||
|
|
@ -90,10 +90,10 @@
|
|||
</VeeForm>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Registrations are
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
|
||||
disabled
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-text-200 text-center">Ask this instance's admin to enable them in
|
||||
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
|
||||
config!
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Registration was a
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registration was a
|
||||
success!
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-text-300 text-center"> You can now login to your account in any
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300 text-center"> You can now login to your account in any
|
||||
Mastodon
|
||||
client </p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,25 @@
|
|||
/*
|
||||
* This file is used to define the theme colors for the application.
|
||||
* Each color is defined in the HSL format, without the hsl() function.
|
||||
* hsl(0deg 0% 0%) should be changed to 0deg 0% 0%.
|
||||
*
|
||||
* This format is due to limited support for Relative Colors in CSS.
|
||||
*/
|
||||
:root {
|
||||
--theme-background-50: 0deg 0% 29%;
|
||||
--theme-background-100: 0deg 0% 24%;
|
||||
--theme-background-200: 0deg 0% 20%;
|
||||
--theme-background-300: 0deg 0% 18%;
|
||||
--theme-background-400: 0deg 0% 13%;
|
||||
--theme-background-500: 0deg 0% 12%;
|
||||
--theme-background-600: 240deg 3% 11%;
|
||||
--theme-background-700: 0deg 0% 11%;
|
||||
--theme-background-800: 0deg 0% 9%;
|
||||
--theme-background-900: 0deg 0% 6%;
|
||||
--theme-background-950: 0deg 0% 3%;
|
||||
--theme-dark-50: #4a4a4a;
|
||||
--theme-dark-100: #3c3c3c;
|
||||
--theme-dark-200: #323232;
|
||||
--theme-dark-300: #2d2d2d;
|
||||
--theme-dark-400: #222222;
|
||||
--theme-dark-500: #1f1f1f;
|
||||
--theme-dark-600: #1c1c1e;
|
||||
--theme-dark-700: #1b1b1b;
|
||||
--theme-dark-800: #181818;
|
||||
--theme-dark-900: #0f0f0f;
|
||||
--theme-dark-950: #080808;
|
||||
|
||||
--theme-primary-50: 327deg 73% 97%;
|
||||
--theme-primary-100: 326deg 78% 95%;
|
||||
--theme-primary-200: 326deg 85% 90%;
|
||||
--theme-primary-300: 327deg 87% 82%;
|
||||
--theme-primary-400: 329deg 86% 70%;
|
||||
--theme-primary-500: 330deg 81% 60%;
|
||||
--theme-primary-600: 333deg 71% 51%;
|
||||
--theme-primary-700: 335deg 78% 42%;
|
||||
--theme-primary-800: 336deg 74% 35%;
|
||||
--theme-primary-900: 336deg 69% 30%;
|
||||
--theme-primary-950: 336deg 84% 17%;
|
||||
|
||||
--theme-text-50: 210 20% 98%;
|
||||
--theme-text-100: 220 14% 96%;
|
||||
--theme-text-200: 220 13% 91%;
|
||||
--theme-text-300: 216 12% 84%;
|
||||
--theme-text-400: 218 11% 65%;
|
||||
--theme-text-500: 220 9% 46%;
|
||||
--theme-text-600: 215 14% 34%;
|
||||
--theme-text-700: 217 19% 27%;
|
||||
--theme-text-800: 215 28% 17%;
|
||||
--theme-text-900: 221 39% 11%;
|
||||
--theme-text-950: 224 71% 4%;
|
||||
--theme-primary-50: #fdf2f8;
|
||||
--theme-primary-100: #fce7f3;
|
||||
--theme-primary-200: #fbcfe8;
|
||||
--theme-primary-300: #f9a8d4;
|
||||
--theme-primary-400: #f472b6;
|
||||
--theme-primary-500: #ec4899;
|
||||
--theme-primary-600: #db2777;
|
||||
--theme-primary-700: #be185d;
|
||||
--theme-primary-800: #9d174d;
|
||||
--theme-primary-900: #831843;
|
||||
--theme-primary-950: #500724;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,20 +2,26 @@ import forms from "@tailwindcss/forms";
|
|||
import typography from "@tailwindcss/typography";
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const themeVariables = (color: string) =>
|
||||
Object.fromEntries(
|
||||
[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].flatMap((n) => [
|
||||
[n, `hsl(var(--theme-${color}-${n}) / <alpha-value>)`],
|
||||
]),
|
||||
);
|
||||
const themeVariables = (color: string) => ({
|
||||
50: `var(--theme-${color}-50)`,
|
||||
100: `var(--theme-${color}-100)`,
|
||||
200: `var(--theme-${color}-200)`,
|
||||
300: `var(--theme-${color}-300)`,
|
||||
400: `var(--theme-${color}-400)`,
|
||||
500: `var(--theme-${color}-500)`,
|
||||
600: `var(--theme-${color}-600)`,
|
||||
700: `var(--theme-${color}-700)`,
|
||||
800: `var(--theme-${color}-800)`,
|
||||
900: `var(--theme-${color}-900)`,
|
||||
950: `var(--theme-${color}-950)`,
|
||||
});
|
||||
|
||||
export default (<Config>{
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: themeVariables("background"),
|
||||
dark: themeVariables("dark"),
|
||||
primary: themeVariables("primary"),
|
||||
text: themeVariables("text"),
|
||||
},
|
||||
animation: {
|
||||
like: "like 1s ease-in-out",
|
||||
|
|
|
|||
Loading…
Reference in a new issue