forked from open-webui/open-webui
refac: styling
This commit is contained in:
Timothy J. Baek
parent
d1656d5da8
commit
8f4a12b479
3 changed files with 21 additions and 53 deletions
|
|
@ -41,7 +41,7 @@
|
|||
}}
|
||||
>
|
||||
<div
|
||||
class=" modal-content m-auto rounded-xl max-w-full {sizeToWidth(
|
||||
class=" modal-content m-auto rounded-2xl max-w-full {sizeToWidth(
|
||||
size
|
||||
)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl"
|
||||
in:fade={{ duration: 10 }}
|
||||
|
|
|
|||
|
|
@ -100,10 +100,10 @@
|
|||
? ''
|
||||
: 'invisible'}"
|
||||
>
|
||||
<div class="px-2.5 flex justify-center space-x-2">
|
||||
<div class="px-2 flex justify-center space-x-2">
|
||||
<button
|
||||
id="sidebar-new-chat-button"
|
||||
class="flex-grow flex justify-between rounded-md px-3 py-2 hover:bg-gray-900 transition"
|
||||
class="flex-grow flex justify-between rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
|
||||
on:click={async () => {
|
||||
goto('/');
|
||||
|
||||
|
|
@ -145,9 +145,9 @@
|
|||
</div>
|
||||
|
||||
{#if $user?.role === 'admin'}
|
||||
<div class="px-2.5 flex justify-center mt-0.5">
|
||||
<div class="px-2 flex justify-center mt-0.5">
|
||||
<a
|
||||
class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
|
||||
class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
|
||||
href="/modelfiles"
|
||||
>
|
||||
<div class="self-center">
|
||||
|
|
@ -173,9 +173,9 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="px-2.5 flex justify-center">
|
||||
<div class="px-2 flex justify-center">
|
||||
<a
|
||||
class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
|
||||
class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
|
||||
href="/prompts"
|
||||
>
|
||||
<div class="self-center">
|
||||
|
|
@ -201,9 +201,9 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="px-2.5 flex justify-center mb-1">
|
||||
<div class="px-2 flex justify-center mb-1">
|
||||
<a
|
||||
class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
|
||||
class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
|
||||
href="/documents"
|
||||
>
|
||||
<div class="self-center">
|
||||
|
|
@ -272,9 +272,9 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="px-2.5 mt-1 mb-2 flex justify-center space-x-2">
|
||||
<div class="px-2 mt-1 mb-2 flex justify-center space-x-2">
|
||||
<div class="flex w-full" id="chat-search">
|
||||
<div class="self-center pl-3 py-2 rounded-l bg-gray-950">
|
||||
<div class="self-center pl-3 py-2 rounded-l-xl bg-gray-950">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
|
|
@ -290,7 +290,7 @@
|
|||
</div>
|
||||
|
||||
<input
|
||||
class="w-full rounded-r py-1.5 pl-2.5 pr-4 text-sm text-gray-300 bg-gray-950 outline-none"
|
||||
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm text-gray-300 bg-gray-950 outline-none"
|
||||
placeholder="Search"
|
||||
bind:value={search}
|
||||
on:focus={() => {
|
||||
|
|
@ -345,7 +345,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="pl-2.5 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto">
|
||||
<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto">
|
||||
{#each $chats.filter((chat) => {
|
||||
if (search === '') {
|
||||
return true;
|
||||
|
|
@ -367,7 +367,7 @@
|
|||
}) as chat, i}
|
||||
<div class=" w-full pr-2 relative">
|
||||
<a
|
||||
class=" w-full flex justify-between rounded-md px-3 py-2 hover:bg-gray-900 {chat.id ===
|
||||
class=" w-full flex justify-between rounded-xl px-3 py-2 hover:bg-gray-900 {chat.id ===
|
||||
$chatId
|
||||
? 'bg-gray-900'
|
||||
: ''} transition whitespace-nowrap text-ellipsis"
|
||||
|
|
@ -534,12 +534,12 @@
|
|||
</div>
|
||||
|
||||
<div class="px-2.5">
|
||||
<hr class=" border-gray-900 mb-1 w-full" />
|
||||
<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->
|
||||
|
||||
<div class="flex flex-col">
|
||||
{#if $user !== undefined}
|
||||
<button
|
||||
class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
|
||||
class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-900 transition"
|
||||
on:click={() => {
|
||||
showDropdown = !showDropdown;
|
||||
}}
|
||||
|
|
@ -557,7 +557,7 @@
|
|||
{#if showDropdown}
|
||||
<div
|
||||
id="dropdownDots"
|
||||
class="absolute z-40 bottom-[70px] 4.5rem rounded-lg shadow w-[240px] bg-gray-900"
|
||||
class="absolute z-40 bottom-[70px] 4.5rem rounded-xl shadow w-[240px] bg-gray-900"
|
||||
in:slide={{ duration: 150 }}
|
||||
>
|
||||
<div class="py-2 w-full">
|
||||
|
|
@ -656,36 +656,6 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<button
|
||||
class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
|
||||
on:click={async () => {
|
||||
await showSettings.set(true);
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class=" self-center font-medium">Settings</div>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -74,13 +74,11 @@
|
|||
|
||||
<SettingsModal bind:show={showSettingsModal} />
|
||||
|
||||
<div
|
||||
class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white bg-white dark:bg-gray-900 font-mona"
|
||||
>
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white font-mona">
|
||||
{#if loaded}
|
||||
<div class="overflow-y-auto w-full flex justify-center">
|
||||
<div class="w-full max-w-3xl px-6 md:px-16 flex flex-col">
|
||||
<div class="py-10 w-full">
|
||||
<div class=" flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
|
||||
<div class="w-full">
|
||||
<div class=" flex flex-col justify-center">
|
||||
<div class=" flex justify-between items-center">
|
||||
<div class="flex items-center text-2xl font-semibold">
|
||||
|
|
|
|||
Loading…
Reference in a new issue