ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 12:25:20 +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-20 00:56:25 -05:00
parent 820321ad55
commit 27a91cc80a
4 changed files with 108 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/lib/components/ChangelogModal.svelte
View file

@ -29,9 +29,9 @@
</script> </script>
<Modal bind:show size="xl"> <Modal bind:show size="xl">
<div class="px-5 pt-4 dark:text-gray-300 text-gray-700"> <div class="px-6 pt-5 dark:text-white text-black">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="text-xl font-semibold"> <div class="text-xl font-medium">
{$i18n.t("What's New in")} {$i18n.t("What's New in")}
{$WEBUI_NAME} {$WEBUI_NAME}
<Confetti x={[-1, -0.25]} y={[0, 0.5]} /> <Confetti x={[-1, -0.25]} y={[0, 0.5]} />
@ -51,7 +51,7 @@
</div> </div>
<div class="flex items-center mt-1"> <div class="flex items-center mt-1">
<div class="text-sm dark:text-gray-200">{$i18n.t('Release Notes')}</div> <div class="text-sm dark:text-gray-200">{$i18n.t('Release Notes')}</div>
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" /> <div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50/50 dark:bg-gray-850/50" />
<div class="text-sm dark:text-gray-200"> <div class="text-sm dark:text-gray-200">
v{WEBUI_VERSION} v{WEBUI_VERSION}
</div> </div>
@ -59,7 +59,7 @@
</div> </div>
<div class=" w-full p-4 px-5 text-gray-700 dark:text-gray-100"> <div class=" w-full p-4 px-5 text-gray-700 dark:text-gray-100">
<div class=" overflow-y-scroll max-h-[32rem] scrollbar-hidden"> <div class=" overflow-y-scroll max-h-[30rem] scrollbar-hidden">
<div class="mb-3"> <div class="mb-3">
{#if changelog} {#if changelog}
{#each Object.keys(changelog) as version} {#each Object.keys(changelog) as version}
@ -68,20 +68,20 @@
v{version} - {changelog[version].date} v{version} - {changelog[version].date}
</div> </div>
<hr class="border-gray-100 dark:border-gray-850 my-2" /> <hr class="border-gray-50/50 dark:border-gray-850/50 my-2" />
{#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section} {#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section}
<div class="w-full"> <div class="w-full">
<div <div
class="font-semibold uppercase text-xs {section === 'added' class="font-semibold uppercase text-xs {section === 'added'
? 'text-white bg-blue-600' ? 'bg-blue-500/20 text-blue-700 dark:text-blue-200'
: section === 'fixed' : section === 'fixed'
? 'text-white bg-green-600' ? 'bg-green-500/20 text-green-700 dark:text-green-200'
: section === 'changed' : section === 'changed'
? 'text-white bg-yellow-600' ? 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-200'
: section === 'removed' : section === 'removed'
? 'text-white bg-red-600' ? 'bg-red-500/20 text-red-700 dark:text-red-200'
: ''} w-fit px-3 rounded-full my-2.5" : ''} w-fit rounded-xl px-2 my-2.5"
> >
{section} {section}
</div> </div>

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

@ -569,9 +569,9 @@
}); });
</script> </script>
<Modal size="lg" bind:show> <Modal size="xl" bind:show>
<div class="text-gray-700 dark:text-gray-100 mx-1"> <div class="text-gray-700 dark:text-gray-100 mx-1">
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1"> <div class=" flex justify-between dark:text-gray-300 px-5 pt-4.5 pb-1.5">
<div class=" text-lg font-medium self-center">{$i18n.t('Settings')}</div> <div class=" text-lg font-medium self-center">{$i18n.t('Settings')}</div>
<button <button
aria-label={$i18n.t('Close settings modal')} aria-label={$i18n.t('Close settings modal')}
@ -584,11 +584,11 @@
</button> </button>
</div> </div>
<div class="flex flex-col md:flex-row w-full px-4 pt-1 pb-4 md:space-x-4"> <div class="flex flex-col md:flex-row w-full px-4.5 pt-1 pb-4 md:space-x-4">
<div <div
role="tablist" role="tablist"
id="settings-tabs-container" id="settings-tabs-container"
class="tabs flex flex-row overflow-x-auto gap-2.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-40 md:min-h-[32rem] md:max-h-[32rem] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1" class="tabs flex flex-row overflow-x-auto gap-2.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-40 md:min-h-[36rem] md:max-h-[36rem] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1"
> >
<div class="hidden md:flex w-full rounded-xl -mb-1 px-[0.5px] gap-2" id="settings-search"> <div class="hidden md:flex w-full rounded-xl -mb-1 px-[0.5px] gap-2" id="settings-search">
<div class="self-center rounded-l-xl bg-transparent"> <div class="self-center rounded-l-xl bg-transparent">
@ -855,7 +855,7 @@
</a> </a>
{/if} {/if}
</div> </div>
<div class="flex-1 md:min-h-[32rem] max-h-[32rem]"> <div class="flex-1 md:min-h-[36rem] max-h-[36rem]">
{#if selectedTab === 'general'} {#if selectedTab === 'general'}
<General <General
{getModels} {getModels}

6
src/lib/components/common/Modal.svelte
View file

@ -7,7 +7,7 @@
export let show = true; export let show = true;
export let size = 'md'; export let size = 'md';
export let containerClassName = 'p-3'; export let containerClassName = 'p-3';
export let className = 'bg-white dark:bg-gray-900 rounded-3xl'; export let className = 'bg-white dark:bg-gray-900 rounded-4xl';
let modalElement = null; let modalElement = null;
let mounted = false; let mounted = false;
@ -87,7 +87,7 @@
bind:this={modalElement} bind:this={modalElement}
aria-modal="true" aria-modal="true"
role="dialog" role="dialog"
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-9999 overflow-y-auto overscroll-contain" class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/30 dark:bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-9999 overflow-y-auto overscroll-contain"
in:fade={{ duration: 10 }} in:fade={{ duration: 10 }}
on:mousedown={() => { on:mousedown={() => {
show = false; show = false;
@ -96,7 +96,7 @@
<div <div
class="m-auto max-w-full {sizeToWidth(size)} {size !== 'full' class="m-auto max-w-full {sizeToWidth(size)} {size !== 'full'
? 'mx-2' ? 'mx-2'
: ''} shadow-3xl min-h-fit scrollbar-hidden {className}" : ''} shadow-3xl min-h-fit scrollbar-hidden {className} border border-white dark:border-gray-850"
in:flyAndScale in:flyAndScale
on:mousedown={(e) => { on:mousedown={(e) => {
e.stopPropagation(); e.stopPropagation();

39
src/lib/components/layout/Sidebar.svelte
View file

@ -528,7 +528,7 @@
placement="right" placement="right"
> >
<button <button
class="flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition group {isWindows class="flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group {isWindows
? 'cursor-pointer' ? 'cursor-pointer'
: 'cursor-[e-resize]'}" : 'cursor-[e-resize]'}"
aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')} aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
@ -551,7 +551,7 @@
<div class=""> <div class="">
<Tooltip content={$i18n.t('New Chat')} placement="right"> <Tooltip content={$i18n.t('New Chat')} placement="right">
<a <a
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition group" class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
href="/" href="/"
draggable="false" draggable="false"
on:click={async (e) => { on:click={async (e) => {
@ -573,7 +573,7 @@
<div class=""> <div class="">
<Tooltip content={$i18n.t('Search')} placement="right"> <Tooltip content={$i18n.t('Search')} placement="right">
<button <button
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition group" class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
on:click={(e) => { on:click={(e) => {
e.stopImmediatePropagation(); e.stopImmediatePropagation();
e.preventDefault(); e.preventDefault();
@ -594,7 +594,7 @@
<div class=""> <div class="">
<Tooltip content={$i18n.t('Notes')} placement="right"> <Tooltip content={$i18n.t('Notes')} placement="right">
<a <a
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition group" class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
href="/notes" href="/notes"
on:click={async (e) => { on:click={async (e) => {
e.stopImmediatePropagation(); e.stopImmediatePropagation();
@ -618,7 +618,7 @@
<div class=""> <div class="">
<Tooltip content={$i18n.t('Workspace')} placement="right"> <Tooltip content={$i18n.t('Workspace')} placement="right">
<a <a
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition group" class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
href="/workspace" href="/workspace"
on:click={async (e) => { on:click={async (e) => {
e.stopImmediatePropagation(); e.stopImmediatePropagation();
@ -666,7 +666,7 @@
}} }}
> >
<div <div
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition group" class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
> >
<div class=" self-center flex items-center justify-center size-9"> <div class=" self-center flex items-center justify-center size-9">
<img <img
@ -704,10 +704,10 @@
: 'invisible'}" : 'invisible'}"
> >
<div <div
class="sidebar px-1.5 pt-2 pb-1.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 bg-gray-50 dark:bg-gray-950" class="sidebar px-1.5 pt-2 pb-2 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 -mb-12"
> >
<a <a
class="flex items-center rounded-lg p-1.5 h-full justify-center hover:bg-gray-100 dark:hover:bg-gray-850 transition no-drag-region" class="flex items-center rounded-xl size-8.5 h-full justify-center hover:bg-gray-100/50 dark:hover:bg-gray-850/50 transition no-drag-region"
href="/" href="/"
draggable="false" draggable="false"
on:click={newChatHandler} on:click={newChatHandler}
@ -730,7 +730,7 @@
placement="bottom" placement="bottom"
> >
<button <button
class="flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition {isWindows class="flex rounded-xl size-8.5 justify-center items-center hover:bg-gray-100/50 dark:hover:bg-gray-850/50 transition {isWindows
? 'cursor-pointer' ? 'cursor-pointer'
: 'cursor-[w-resize]'}" : 'cursor-[w-resize]'}"
on:click={() => { on:click={() => {
@ -743,13 +743,18 @@
</div> </div>
</button> </button>
</Tooltip> </Tooltip>
<div
class=" bg-linear-to-b from-white dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10"
></div>
</div> </div>
<div class="relative flex flex-col flex-1 overflow-y-auto pt-12 pb-12">
<div class="pb-1.5"> <div class="pb-1.5">
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200"> <div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<a <a
id="sidebar-new-chat-button" id="sidebar-new-chat-button"
class="grow flex items-center space-x-3 rounded-lg px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none" class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
href="/" href="/"
draggable="false" draggable="false"
on:click={newChatHandler} on:click={newChatHandler}
@ -767,7 +772,7 @@
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200"> <div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<button <button
class="grow flex items-center space-x-3 rounded-lg px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none" class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
on:click={() => { on:click={() => {
showSearch.set(true); showSearch.set(true);
}} }}
@ -787,7 +792,7 @@
{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true))} {#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true))}
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200"> <div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<a <a
class="grow flex items-center space-x-3 rounded-lg px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/notes" href="/notes"
on:click={itemClickHandler} on:click={itemClickHandler}
draggable="false" draggable="false"
@ -807,7 +812,7 @@
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools} {#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools}
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200"> <div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<a <a
class="grow flex items-center space-x-3 rounded-lg px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/workspace" href="/workspace"
on:click={itemClickHandler} on:click={itemClickHandler}
draggable="false" draggable="false"
@ -838,7 +843,6 @@
{/if} {/if}
</div> </div>
<div class="relative flex flex-col flex-1">
{#if ($models ?? []).length > 0 && ($settings?.pinnedModels ?? []).length > 0} {#if ($models ?? []).length > 0 && ($settings?.pinnedModels ?? []).length > 0}
<PinnedModelList bind:selectedChatId {shiftKey} /> <PinnedModelList bind:selectedChatId {shiftKey} />
{/if} {/if}
@ -1157,7 +1161,10 @@
</Folder> </Folder>
</div> </div>
<div class="px-1.5 pt-1.5 pb-2 sticky bottom-0 z-10 bg-gray-50 dark:bg-gray-950 sidebar"> <div class="px-1.5 pt-1.5 pb-2 sticky bottom-0 z-10 -mt-12 sidebar">
<div
class=" bg-linear-to-t from-white dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10"
></div>
<div class="flex flex-col font-primary"> <div class="flex flex-col font-primary">
{#if $user !== undefined && $user !== null} {#if $user !== undefined && $user !== null}
<UserMenu <UserMenu
@ -1169,7 +1176,7 @@
}} }}
> >
<div <div
class=" flex items-center rounded-xl py-2 px-1.5 w-full hover:bg-gray-100 dark:hover:bg-gray-900 transition" class=" flex items-center rounded-2xl py-2 px-1.5 w-full hover:bg-gray-100/50 dark:hover:bg-gray-900/50 transition"
> >
<div class=" self-center mr-3"> <div class=" self-center mr-3">
<img <img