ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 04:15:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-15 14:08:07 -05:00
parent 879778361d
commit adaa467f75
8 changed files with 34 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/lib/components/channel/Channel.svelte
View file

@ -279,11 +279,12 @@
{/if} {/if}
{:else if threadId !== null} {:else if threadId !== null}
<PaneResizer <PaneResizer
class="relative flex w-[3px] items-center justify-center bg-background group bg-gray-50 dark:bg-gray-850" class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
id="controls-resizer"
> >
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs"> <div
<EllipsisVertical className="size-4 invisible group-hover:visible" /> class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
</div> />
</PaneResizer> </PaneResizer>
<Pane defaultSize={50} minSize={30} class="h-full w-full"> <Pane defaultSize={50} minSize={30} class="h-full w-full">

6
src/lib/components/channel/MessageInput.svelte
View file

@ -56,6 +56,8 @@
export let acceptFiles = true; export let acceptFiles = true;
export let showFormattingToolbar = true; export let showFormattingToolbar = true;
export let typingUsersClassName = 'from-white dark:from-gray-900';
let loaded = false; let loaded = false;
let draggedOver = false; let draggedOver = false;
@ -693,9 +695,9 @@
{#if typingUsers.length > 0} {#if typingUsers.length > 0}
<div <div
class=" absolute -top-6 pb-2.5 w-full bg-gradient-to-t to-transparent from-white dark:from-gray-900 pointer-events-none select-none" class=" -mt-7 pb-2.5 bg-gradient-to-t to-transparent {typingUsersClassName} pointer-events-none select-none"
> >
<div class=" text-xs px-2 mt-1 flex items-center gap-1.5"> <div class=" text-xs px-1 mt-1.5 flex items-center gap-1.5">
<Skeleton size="xs" /> <Skeleton size="xs" />
<div> <div>

10
src/lib/components/channel/Thread.svelte
View file

@ -198,8 +198,14 @@
}} }}
/> />
<div class=" pb-[1rem] px-2.5"> <div class=" pb-[1rem] px-2.5 w-full">
<MessageInput id={threadId} {typingUsers} {onChange} onSubmit={submitHandler} /> <MessageInput
id={threadId}
typingUsersClassName="from-gray-50 dark:from-gray-850"
{typingUsers}
{onChange}
onSubmit={submitHandler}
/>
</div> </div>
</div> </div>
</div> </div>

9
src/lib/components/chat/Artifacts.svelte
View file

@ -213,15 +213,6 @@
<div <div
class="pointer-events-auto z-20 flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white" class="pointer-events-auto z-20 flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white"
> >
<button
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
on:click={() => {
showArtifacts.set(false);
}}
>
<ArrowLeft className="size-3.5 text-gray-900 dark:text-white" />
</button>
<div class="flex-1 flex items-center justify-between pr-1"> <div class="flex-1 flex items-center justify-between pr-1">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr"> <div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">

10
src/lib/components/chat/ChatControls.svelte
View file

@ -205,12 +205,12 @@
{#if $showControls} {#if $showControls}
<PaneResizer <PaneResizer
class="relative flex w-2 items-center justify-center bg-white dark:bg-gray-850 border-l border-gray-100 dark:border-gray-850 group" class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
id="controls-resizer" id="controls-resizer"
> >
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs"> <div
<EllipsisVertical className="size-4 invisible group-hover:visible" /> class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
</div> />
</PaneResizer> </PaneResizer>
{/if} {/if}
@ -243,7 +243,7 @@
<div <div
class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay
? ' ' ? ' '
: 'pl-3 pr-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 '} z-40 pointer-events-auto overflow-y-auto scrollbar-hidden" : 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 '} z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
id="controls-container" id="controls-container"
> >
{#if $showCallOverlay} {#if $showCallOverlay}

8
src/lib/components/notes/NoteEditor/Chat.svelte
View file

@ -327,8 +327,8 @@ Based on the user's instruction, update and enhance the existing notes or select
}); });
</script> </script>
<div class="flex items-center mb-1.5 pt-1.5 pl-1.5 pr-2.5"> <div class="flex items-center mb-1.5 pt-1.5 px-2.5">
<div class=" -translate-x-1.5 flex items-center"> <div class="flex items-center mr-1">
<button <button
class="p-0.5 bg-transparent transition rounded-lg" class="p-0.5 bg-transparent transition rounded-lg"
on:click={() => { on:click={() => {
@ -358,7 +358,7 @@ Based on the user's instruction, update and enhance the existing notes or select
</div> </div>
</div> </div>
<div class="flex flex-col items-center flex-1 @container"> <div class="flex flex-col items-center flex-1 @container px-2.5">
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full"> <div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
<div class="mx-auto w-full md:px-0 h-full relative"> <div class="mx-auto w-full md:px-0 h-full relative">
<div class=" flex flex-col h-full"> <div class=" flex flex-col h-full">
@ -375,7 +375,7 @@ Based on the user's instruction, update and enhance the existing notes or select
</div> </div>
</div> </div>
<div class=" pb-[1rem] pl-1.5 pr-2.5"> <div class=" pb-[1rem]">
{#if selectedContent} {#if selectedContent}
<div class="text-xs rounded-xl px-3.5 py-3 w-full markdown-prose-xs"> <div class="text-xs rounded-xl px-3.5 py-3 w-full markdown-prose-xs">
<blockquote> <blockquote>

6
src/lib/components/notes/NoteEditor/Controls.svelte
View file

@ -17,8 +17,8 @@
}; };
</script> </script>
<div class="flex items-center mb-1.5 pt-1.5 pl-1.5 pr-2.5"> <div class="flex items-center mb-1.5 pt-1.5 px-2.5">
<div class=" -translate-x-1.5 flex items-center"> <div class=" mr-1 flex items-center">
<button <button
class="p-0.5 bg-transparent transition rounded-lg" class="p-0.5 bg-transparent transition rounded-lg"
on:click={() => { on:click={() => {
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<div class="mt-1 pl-1.5 pr-2.5"> <div class="mt-1 px-2.5">
<div class="pb-10"> <div class="pb-10">
{#if files.length > 0} {#if files.length > 0}
<div class=" text-xs font-medium pb-1">{$i18n.t('Files')}</div> <div class=" text-xs font-medium pb-1">{$i18n.t('Files')}</div>

9
src/lib/components/notes/NotePanel.svelte
View file

@ -78,11 +78,12 @@
{/if} {/if}
{:else if show} {:else if show}
<PaneResizer <PaneResizer
class="relative flex w-2 items-center justify-center bg-background group bg-white dark:shadow-lg dark:bg-gray-850 border-l border-gray-50 dark:border-gray-850" class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
id="controls-resizer"
> >
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs"> <div
<EllipsisVertical className="size-4 invisible group-hover:visible" /> class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
</div> />
</PaneResizer> </PaneResizer>
<Pane <Pane