mirror of
https://github.com/Blah-IM/Weblah.git
synced 2025-07-08 23:15:33 +00:00
chore: upgrade to tailwindcss v4
This commit is contained in:
parent
88551053d9
commit
cd0bf37a68
22 changed files with 434 additions and 694 deletions
|
@ -27,7 +27,7 @@
|
|||
data-weblah-main-visible={mainVisible ? 'true' : undefined}
|
||||
>
|
||||
<aside
|
||||
class="relative h-[100dvh] min-h-0 overflow-hidden border-ss-primary bg-sb-primary shadow-lg [view-transition-name:chat-list] after:pointer-events-none after:absolute after:inset-0 after:size-full after:bg-transparent group-data-[weblah-main-visible]:after:bg-black/30 sm:w-1/3 sm:border-e sm:after:hidden lg:w-1/4"
|
||||
class="relative h-[100dvh] min-h-0 overflow-hidden border-ss-primary bg-sb-primary shadow-lg [view-transition-name:chat-list] after:pointer-events-none after:absolute after:inset-0 after:size-full after:bg-transparent group-data-weblah-main-visible:after:bg-black/30 sm:w-1/3 sm:border-e sm:after:hidden lg:w-1/4"
|
||||
>
|
||||
<ChatList />
|
||||
{#if isSettings}
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<header class="flex items-center justify-stretch gap-2 border-b border-ss-secondary p-2 shadow-sm">
|
||||
<header class="flex items-center justify-stretch gap-2 border-b border-ss-secondary p-2 shadow-xs">
|
||||
<a
|
||||
class={tw(
|
||||
'transition-[opacity,transform] duration-200',
|
||||
|
@ -34,7 +34,7 @@
|
|||
<input
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
class="w-full flex-1 bg-transparent text-sm leading-4 text-sf-primary focus:outline-none"
|
||||
class="w-full flex-1 bg-transparent text-sm leading-4 text-sf-primary focus:outline-hidden"
|
||||
bind:value={searchQuery}
|
||||
bind:this={inputElement}
|
||||
on:focus={() => {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class="relative z-10 box-border flex min-h-[calc(3rem+1px)] w-full items-center gap-2 border-b border-ss-secondary bg-sb-primary p-2 shadow-sm"
|
||||
class="relative z-10 box-border flex min-h-[calc(3rem+1px)] w-full items-center gap-2 border-b border-ss-secondary bg-sb-primary p-2 shadow-xs"
|
||||
>
|
||||
<Button href="/" class="rounded-full sm:hidden">
|
||||
<Icon src={ChevronLeft} />
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
</script>
|
||||
|
||||
<form
|
||||
class="flex w-full items-end gap-2 border-t border-ss-secondary bg-sb-primary p-2 shadow-sm"
|
||||
class="flex w-full items-end gap-2 border-t border-ss-secondary bg-sb-primary p-2 shadow-xs"
|
||||
bind:this={form}
|
||||
on:submit|preventDefault={submit}
|
||||
>
|
||||
|
|
|
@ -13,22 +13,22 @@
|
|||
class={tw(
|
||||
'relative flex-1',
|
||||
isMyself
|
||||
? '[--weblah-chat-bubble-bg:theme(colors.accent.100)] [--weblah-chat-bubble-stroke:theme(colors.accent.200)] dark:[--weblah-chat-bubble-bg:theme(colors.accent.900)] dark:[--weblah-chat-bubble-stroke:theme(colors.accent.950)]'
|
||||
: '[--weblah-chat-bubble-bg:theme(colors.sb.primary)] [--weblah-chat-bubble-stroke:theme(colors.ss.secondary)]',
|
||||
? '[--weblah-chat-bubble-bg:var(--color-accent-100)] [--weblah-chat-bubble-stroke:var(--color-accent-200)] dark:[--weblah-chat-bubble-bg:var(--color-accent-900)] dark:[--weblah-chat-bubble-stroke:var(--color-accent-950)]'
|
||||
: '[--weblah-chat-bubble-bg:var(--color-sb-primary)] [--weblah-chat-bubble-stroke:var(--color-ss-secondary)]',
|
||||
isMyself && 'text-end'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
class={tw(
|
||||
`relative inline-block max-w-[85%] rounded-2xl bg-[--weblah-chat-bubble-bg] shadow-sm ring-1 ring-[--weblah-chat-bubble-stroke]`,
|
||||
`relative inline-block max-w-[85%] rounded-2xl bg-(--weblah-chat-bubble-bg) shadow-xs ring-1 ring-(--weblah-chat-bubble-stroke)`,
|
||||
showBubbleTail && [
|
||||
// ::before: Fill of chat bubble tail
|
||||
'before:absolute before:-bottom-[1px] before:box-content before:h-6 before:w-5 before:border-[--weblah-chat-bubble-bg] before:text-[--weblah-chat-bubble-stroke]',
|
||||
'before:absolute before:-bottom-[1px] before:box-content before:h-6 before:w-5 before:border-(--weblah-chat-bubble-bg) before:text-(--weblah-chat-bubble-stroke)',
|
||||
isMyself
|
||||
? 'before:-end-5 before:rounded-es-[16px_12px] before:border-s-[10px] before:drop-shadow-[1px_0]'
|
||||
: `before:-start-5 before:rounded-ee-[16px_12px] before:border-e-[10px] before:drop-shadow-[-1px_0]`,
|
||||
// ::after: Stroke of chat bubble tail
|
||||
'after:absolute after:-bottom-[1px] after:-z-10 after:box-content after:h-6 after:w-5 after:text-[--weblah-chat-bubble-stroke]',
|
||||
'after:absolute after:-bottom-[1px] after:-z-10 after:box-content after:h-6 after:w-5 after:text-(--weblah-chat-bubble-stroke)',
|
||||
isMyself
|
||||
? 'after:-end-5 after:rounded-es-[16px_12px] after:border-s-[10px] after:drop-shadow-[0_1px]'
|
||||
: `after:-start-5 after:rounded-ee-[16px_12px] after:border-e-[10px] after:drop-shadow-[0_1px]`
|
||||
|
|
|
@ -89,7 +89,7 @@
|
|||
bind:value={name}
|
||||
placeholder="Your Name"
|
||||
disabled={isBusy}
|
||||
class="ms-3 flex-1 bg-transparent text-lg leading-loose caret-accent-500 outline-none placeholder:opacity-50"
|
||||
class="ms-3 flex-1 bg-transparent text-lg leading-loose caret-accent-500 outline-hidden placeholder:opacity-50"
|
||||
/>
|
||||
</GroupedListItem>
|
||||
</GroupedListSection>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue