chore: upgrade to tailwindcss v4

This commit is contained in:
Shibo Lyu 2025-03-17 00:25:07 +08:00
parent 88551053d9
commit cd0bf37a68
22 changed files with 434 additions and 694 deletions

View file

@ -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}

View file

@ -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={() => {

View file

@ -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} />

View file

@ -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}
>

View file

@ -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]`

View file

@ -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>