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-08-08 11:53:06 +04:00
parent e2ce735d12
commit b084613004
1 changed files with 382 additions and 376 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -60,6 +60,7 @@
import Sidebar from '../icons/Sidebar.svelte'; import Sidebar from '../icons/Sidebar.svelte';
import PinnedModelList from './Sidebar/PinnedModelList.svelte'; import PinnedModelList from './Sidebar/PinnedModelList.svelte';
import Note from '../icons/Note.svelte'; import Note from '../icons/Note.svelte';
import { slide } from 'svelte/transition';
const BREAKPOINT = 768; const BREAKPOINT = 768;
@ -495,8 +496,8 @@
{#if !$mobile} {#if !$mobile}
<div <div
class="{$showSidebar class="{$showSidebar
? 'md:hidden' ? 'hidden'
: ''} py-2 px-1.5 flex flex-col justify-between text-black dark:text-white h-full border-e border-gray-50 dark:border-gray-850" : ''} py-2 px-1.5 flex flex-col justify-between text-black dark:text-white h-full border-e border-gray-50 dark:border-gray-850 z-10"
> >
<button <button
class="flex flex-col flex-1 cursor-[e-resize]" class="flex flex-col flex-1 cursor-[e-resize]"
@ -657,15 +658,17 @@
</div> </div>
{/if} {/if}
{#if $showSidebar}
<div <div
bind:this={navElement} bind:this={navElement}
id="sidebar" id="sidebar"
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
? 'md:relative w-[260px] max-w-[260px] bg-gray-50 dark:bg-gray-950' ? 'bg-gray-50 dark:bg-gray-950 z-50'
: 'w-[0px] md:relative md:w-[40px] bg-transparent'} {$isApp : ' bg-transparent z-0 '} {$isApp
? `ml-[4.5rem] md:ml-0 ` ? `ml-[4.5rem] md:ml-0 `
: 'transition-width transition-all duration-200 '} shrink-0 text-gray-900 dark:text-gray-200 text-sm fixed z-50 top-0 left-0 overflow-x-hidden : 'transition-[width] duration-300 '} shrink-0 text-gray-900 dark:text-gray-200 text-sm fixed top-0 left-0 overflow-x-hidden
" "
transition:slide={{ duration: 200, axis: 'x' }}
data-state={$showSidebar} data-state={$showSidebar}
> >
<div <div
@ -1075,7 +1078,9 @@
</Loader> </Loader>
{/if} {/if}
{:else} {:else}
<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"> <div
class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"
>
<Spinner className=" size-4" /> <Spinner className=" size-4" />
<div class=" ">Loading...</div> <div class=" ">Loading...</div>
</div> </div>
@ -1115,6 +1120,7 @@
</div> </div>
</div> </div>
</div> </div>
{/if}
<style> <style>
.scrollbar-hidden:active::-webkit-scrollbar-thumb, .scrollbar-hidden:active::-webkit-scrollbar-thumb,