refac: styling

src/lib/components/admin/Settings/Audio.svelte

@@ -181,7 +181,7 @@
 					<div>
 						<div class="mt-1 flex gap-2 mb-1">
 							<input
-								class="flex-1 w-full rounded-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+								class="flex-1 w-full bg-transparent outline-none"
 								placeholder={$i18n.t('API Base URL')}
 								bind:value={STT_OPENAI_API_BASE_URL}
 								required
@@ -334,7 +334,7 @@
 					<div>
 						<div class="mt-1 flex gap-2 mb-1">
 							<input
-								class="flex-1 w-full rounded-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+								class="flex-1 w-full bg-transparent outline-none"
 								placeholder={$i18n.t('API Base URL')}
 								bind:value={TTS_OPENAI_API_BASE_URL}
 								required

src/lib/components/admin/Settings/Connections.svelte

@@ -27,6 +27,7 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { getModels as _getModels } from '$lib/apis';
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
+	import Cog6 from '$lib/components/icons/Cog6.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -178,148 +179,183 @@
 		dispatch('save');
 	}}
 >
-	<div class="space-y-3 overflow-y-scroll scrollbar-hidden h-full">
+	<div class=" overflow-y-scroll scrollbar-hidden h-full">
 		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null}
-			<div class=" space-y-3">
+			<div class="my-2">
 				<div class="mt-2 space-y-2 pr-1.5">
 					<div class="flex justify-between items-center text-sm">
 						<div class="  font-medium">{$i18n.t('OpenAI API')}</div>
 
-						<div class="mt-1">
-							<Switch
-								bind:state={ENABLE_OPENAI_API}
-								on:change={async () => {
-									updateOpenAIConfig(localStorage.token, ENABLE_OPENAI_API);
-								}}
-							/>
+						<div class="flex items-center">
+							<div class="">
+								<Switch
+									bind:state={ENABLE_OPENAI_API}
+									on:change={async () => {
+										updateOpenAIConfig(localStorage.token, ENABLE_OPENAI_API);
+									}}
+								/>
+							</div>
 						</div>
 					</div>
 
 					{#if ENABLE_OPENAI_API}
-						<div class="flex flex-col gap-1">
-							{#each OPENAI_API_BASE_URLS as url, idx}
-								<div class="flex w-full gap-2">
-									<div class="flex-1 relative">
-										<input
-											class="w-full rounded-lg py-2 px-4 {pipelineUrls[url]
-												? 'pr-8'
-												: ''} text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
-											placeholder={$i18n.t('API Base URL')}
-											bind:value={url}
-											autocomplete="off"
+						<hr class=" border-gray-50 dark:border-gray-850" />
+
+						<div class="">
+							<div class="flex justify-between items-center mb-1.5">
+								<div class="font-medium">{$i18n.t('Manage OpenAI API Connections')}</div>
+
+								<button
+									class="px-1"
+									on:click={() => {
+										OPENAI_API_BASE_URLS = [...OPENAI_API_BASE_URLS, ''];
+										OPENAI_API_KEYS = [...OPENAI_API_KEYS, ''];
+									}}
+									type="button"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
 										/>
+									</svg>
+								</button>
+							</div>
+
+							<div class="flex flex-col gap-1.5">
+								{#each OPENAI_API_BASE_URLS as url, idx}
+									<div class="flex w-full gap-2 items-center">
+										<Tooltip
+											className="w-full"
+											content={$i18n.t(`WebUI will make requests to "{{url}}/chat/completions"`, {
+												url
+											})}
+											placement="top-start"
+										>
+											<div class="flex w-full">
+												<div class="flex-1 relative">
+													<input
+														class=" outline-none w-full bg-transparent {pipelineUrls[url]
+															? 'pr-8'
+															: ''}"
+														placeholder={$i18n.t('API Base URL')}
+														bind:value={url}
+														autocomplete="off"
+													/>
+
+													{#if pipelineUrls[url]}
+														<div class=" absolute top-2.5 right-2.5">
+															<Tooltip content="Pipelines">
+																<svg
+																	xmlns="http://www.w3.org/2000/svg"
+																	viewBox="0 0 24 24"
+																	fill="currentColor"
+																	class="size-4"
+																>
+																	<path
+																		d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"
+																	/>
+																	<path
+																		d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"
+																	/>
+																	<path
+																		d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"
+																	/>
+																</svg>
+															</Tooltip>
+														</div>
+													{/if}
+												</div>
+
+												<SensitiveInput
+													inputClassName=" outline-none bg-transparent w-full"
+													placeholder={$i18n.t('API Key')}
+													bind:value={OPENAI_API_KEYS[idx]}
+												/>
+											</div>
+										</Tooltip>
 
-										{#if pipelineUrls[url]}
-											<div class=" absolute top-2.5 right-2.5">
-												<Tooltip content="Pipelines">
+										<div class="flex gap-1">
+											<Tooltip content="Verify" className="self-start">
+												<button
+													class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
+													on:click={() => {
+														verifyOpenAIHandler(idx);
+													}}
+													type="button"
+												>
 													<svg
 														xmlns="http://www.w3.org/2000/svg"
-														viewBox="0 0 24 24"
+														viewBox="0 0 20 20"
 														fill="currentColor"
-														class="size-4"
+														class="w-4 h-4"
 													>
 														<path
-															d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"
-														/>
-														<path
-															d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"
-														/>
-														<path
-															d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"
+															fill-rule="evenodd"
+															d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+															clip-rule="evenodd"
 														/>
 													</svg>
-												</Tooltip>
-											</div>
-										{/if}
-									</div>
-
-									<SensitiveInput
-										placeholder={$i18n.t('API Key')}
-										bind:value={OPENAI_API_KEYS[idx]}
-									/>
-									<div class="self-center flex items-center">
-										{#if idx === 0}
-											<button
-												class="px-1"
-												on:click={() => {
-													OPENAI_API_BASE_URLS = [...OPENAI_API_BASE_URLS, ''];
-													OPENAI_API_KEYS = [...OPENAI_API_KEYS, ''];
-												}}
-												type="button"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
+												</button>
+											</Tooltip>
+
+											<!-- <Tooltip content={$i18n.t('Configure')} className="self-start">
+												<button
+													class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
+													on:click={() => {
+														OPENAI_API_BASE_URLS = OPENAI_API_BASE_URLS.filter(
+															(url, urlIdx) => idx !== urlIdx
+														);
+														OPENAI_API_KEYS = OPENAI_API_KEYS.filter(
+															(key, keyIdx) => idx !== keyIdx
+														);
+													}}
+													type="button"
 												>
-													<path
-														d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
-													/>
-												</svg>
-											</button>
-										{:else}
-											<button
-												class="px-1"
-												on:click={() => {
-													OPENAI_API_BASE_URLS = OPENAI_API_BASE_URLS.filter(
-														(url, urlIdx) => idx !== urlIdx
-													);
-													OPENAI_API_KEYS = OPENAI_API_KEYS.filter((key, keyIdx) => idx !== keyIdx);
-												}}
-												type="button"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
+													<Cog6 />
+												</button>
+											</Tooltip> -->
+
+											<Tooltip content={$i18n.t('Remove')} className="self-start">
+												<button
+													class="self-center p-1 bg-gray-200 hover:bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
+													on:click={() => {
+														OPENAI_API_BASE_URLS = OPENAI_API_BASE_URLS.filter(
+															(url, urlIdx) => idx !== urlIdx
+														);
+														OPENAI_API_KEYS = OPENAI_API_KEYS.filter(
+															(key, keyIdx) => idx !== keyIdx
+														);
+													}}
+													type="button"
 												>
-													<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
-												</svg>
-											</button>
-										{/if}
-									</div>
-
-									<div class="flex">
-										<Tooltip content="Verify connection" className="self-start mt-0.5">
-											<button
-												class="self-center p-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
-												on:click={() => {
-													verifyOpenAIHandler(idx);
-												}}
-												type="button"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 20 20"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</button>
-										</Tooltip>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														viewBox="0 0 16 16"
+														fill="currentColor"
+														class="w-4 h-4"
+													>
+														<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
+													</svg>
+												</button>
+											</Tooltip>
+										</div>
 									</div>
-								</div>
-								<div class=" mb-1 text-xs text-gray-400 dark:text-gray-500">
-									{$i18n.t('WebUI will make requests to')}
-									<span class=" text-gray-200">'{url}/models'</span>
-								</div>
-							{/each}
+								{/each}
+							</div>
 						</div>
 					{/if}
 				</div>
 			</div>
 
-			<hr class=" dark:border-gray-850" />
+			<hr class=" border-gray-50 dark:border-gray-850" />
 
-			<div class="pr-1.5 space-y-2">
-				<div class="flex justify-between items-center text-sm">
+			<div class="pr-1.5 my-2">
+				<div class="flex justify-between items-center text-sm mb-2">
 					<div class="  font-medium">{$i18n.t('Ollama API')}</div>
 
 					<div class="mt-1">
@@ -335,97 +371,104 @@
 						/>
 					</div>
 				</div>
+
 				{#if ENABLE_OLLAMA_API}
-					<div class="flex w-full gap-1.5">
-						<div class="flex-1 flex flex-col gap-2">
-							{#each OLLAMA_BASE_URLS as url, idx}
-								<div class="flex gap-1.5">
-									<input
-										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
-										placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
-										bind:value={url}
+					<hr class=" border-gray-50 dark:border-gray-850 my-2" />
+
+					<div class="">
+						<div class="flex justify-between items-center mb-1.5">
+							<div class="font-medium">{$i18n.t('Manage Ollama API Connections')}</div>
+
+							<button
+								class="px-1"
+								on:click={() => {
+									OLLAMA_BASE_URLS = [...OLLAMA_BASE_URLS, ''];
+								}}
+								type="button"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
 									/>
+								</svg>
+							</button>
+						</div>
 
-									<div class="self-center flex items-center">
-										{#if idx === 0}
-											<button
-												class="px-1"
-												on:click={() => {
-													OLLAMA_BASE_URLS = [...OLLAMA_BASE_URLS, ''];
-												}}
-												type="button"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
-													/>
-												</svg>
-											</button>
-										{:else}
-											<button
-												class="px-1"
-												on:click={() => {
-													OLLAMA_BASE_URLS = OLLAMA_BASE_URLS.filter(
-														(url, urlIdx) => idx !== urlIdx
-													);
-												}}
-												type="button"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
-												</svg>
-											</button>
-										{/if}
-									</div>
+						<div class="flex w-full gap-1.5">
+							<div class="flex-1 flex flex-col gap-2">
+								{#each OLLAMA_BASE_URLS as url, idx}
+									<div class="flex gap-1.5">
+										<input
+											class="w-full text-sm bg-transparent outline-none"
+											placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
+											bind:value={url}
+										/>
 
-									<div class="flex">
-										<Tooltip content="Verify connection" className="self-start mt-0.5">
-											<button
-												class="self-center p-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
-												on:click={() => {
-													verifyOllamaHandler(idx);
-												}}
-												type="button"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 20 20"
-													fill="currentColor"
-													class="w-4 h-4"
+										<div class="flex gap-1">
+											<Tooltip content="Verify" className="self-start">
+												<button
+													class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
+													on:click={() => {
+														verifyOllamaHandler(idx);
+													}}
+													type="button"
 												>
-													<path
-														fill-rule="evenodd"
-														d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</button>
-										</Tooltip>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														viewBox="0 0 20 20"
+														fill="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												</button>
+											</Tooltip>
+
+											<Tooltip content={$i18n.t('Remove')} className="self-start">
+												<button
+													class="self-center p-1 bg-gray-200 hover:bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
+													on:click={() => {
+														OLLAMA_BASE_URLS = OLLAMA_BASE_URLS.filter(
+															(url, urlIdx) => idx !== urlIdx
+														);
+													}}
+													type="button"
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														viewBox="0 0 16 16"
+														fill="currentColor"
+														class="w-4 h-4"
+													>
+														<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
+													</svg>
+												</button>
+											</Tooltip>
+										</div>
 									</div>
-								</div>
-							{/each}
+								{/each}
+							</div>
 						</div>
-					</div>
 
-					<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-						{$i18n.t('Trouble accessing Ollama?')}
-						<a
-							class=" text-gray-300 font-medium underline"
-							href="https://github.com/open-webui/open-webui#troubleshooting"
-							target="_blank"
-						>
-							{$i18n.t('Click here for help.')}
-						</a>
+						<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
+							{$i18n.t('Trouble accessing Ollama?')}
+							<a
+								class=" text-gray-300 font-medium underline"
+								href="https://github.com/open-webui/open-webui#troubleshooting"
+								target="_blank"
+							>
+								{$i18n.t('Click here for help.')}
+							</a>
+						</div>
 					</div>
 				{/if}
 			</div>

src/lib/components/admin/Settings/Images.svelte

@@ -566,7 +566,7 @@
 
 						<div class="flex gap-2 mb-1">
 							<input
-								class="flex-1 w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+								class="flex-1 w-full text-sm bg-transparent outline-none"
 								placeholder={$i18n.t('API Base URL')}
 								bind:value={config.openai.OPENAI_API_BASE_URL}
 								required

src/lib/components/admin/Settings/Users.svelte

@@ -158,7 +158,7 @@
 									{$i18n.t('Label')}
 								</div>
 								<input
-									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+									class="w-full bg-transparent outline-none py-0.5"
 									required
 									placeholder={$i18n.t('Enter server label')}
 									bind:value={LDAP_SERVER.label}
@@ -172,7 +172,7 @@
 									{$i18n.t('Host')}
 								</div>
 								<input
-									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+									class="w-full bg-transparent outline-none py-0.5"
 									required
 									placeholder={$i18n.t('Enter server host')}
 									bind:value={LDAP_SERVER.host}
@@ -188,7 +188,7 @@
 									className="w-full"
 								>
 									<input
-										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+										class="w-full bg-transparent outline-none py-0.5"
 										type="number"
 										placeholder={$i18n.t('Enter server port')}
 										bind:value={LDAP_SERVER.port}
@@ -206,7 +206,7 @@
 									placement="top-start"
 								>
 									<input
-										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+										class="w-full bg-transparent outline-none py-0.5"
 										required
 										placeholder={$i18n.t('Enter Application DN')}
 										bind:value={LDAP_SERVER.app_dn}
@@ -235,7 +235,7 @@
 									placement="top-start"
 								>
 									<input
-										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+										class="w-full bg-transparent outline-none py-0.5"
 										required
 										placeholder={$i18n.t('Example: sAMAccountName or uid or userPrincipalName')}
 										bind:value={LDAP_SERVER.attribute_for_username}
@@ -250,7 +250,7 @@
 								</div>
 								<Tooltip content={$i18n.t('The base to search for users')} placement="top-start">
 									<input
-										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+										class="w-full bg-transparent outline-none py-0.5"
 										required
 										placeholder={$i18n.t('Example: ou=users,dc=foo,dc=example')}
 										bind:value={LDAP_SERVER.search_base}
@@ -264,13 +264,13 @@
 									{$i18n.t('Search Filters')}
 								</div>
 								<input
-									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+									class="w-full bg-transparent outline-none py-0.5"
 									placeholder={$i18n.t('Example: (&(objectClass=inetOrgPerson)(uid=%s))')}
 									bind:value={LDAP_SERVER.search_filters}
 								/>
 							</div>
 						</div>
-						<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+						<div class="text-xs text-gray-400 dark:text-gray-500">
 							<a
 								class=" text-gray-300 font-medium underline"
 								href="https://ldap.com/ldap-filters/"
@@ -294,7 +294,7 @@
 											{$i18n.t('Certificate Path')}
 										</div>
 										<input
-											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+											class="w-full bg-transparent outline-none py-0.5"
 											required
 											placeholder={$i18n.t('Enter certificate path')}
 											bind:value={LDAP_SERVER.certificate_path}
@@ -308,7 +308,7 @@
 										</div>
 										<Tooltip content={$i18n.t('Default to ALL')} placement="top-start">
 											<input
-												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+												class="w-full bg-transparent outline-none py-0.5"
 												placeholder={$i18n.t('Example: ALL')}
 												bind:value={LDAP_SERVER.ciphers}
 											/>
@@ -341,7 +341,7 @@
 
 					<div class="flex-1 mr-2">
 						<select
-							class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+							class="w-full bg-transparent outline-none py-0.5"
 							bind:value={defaultModelId}
 							placeholder="Select a model"
 						>
@@ -369,7 +369,7 @@
 									<div class="flex w-full">
 										<div class="flex-1 mr-2">
 											<select
-												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+												class="w-full bg-transparent outline-none py-0.5"
 												bind:value={modelId}
 												placeholder="Select a model"
 											>

src/lib/components/common/SensitiveInput.svelte

@@ -3,10 +3,9 @@
 	export let placeholder = '';
 	export let required = true;
 	export let readOnly = false;
-	export let outerClassName = 'flex flex-1';
-	export let inputClassName =
-		'w-full rounded-l-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none';
-	export let showButtonClassName = 'px-2 transition rounded-r-lg bg-gray-50 dark:bg-gray-850';
+	export let outerClassName = 'flex flex-1 bg-transparent';
+	export let inputClassName = 'w-full text-sm py-0.5 bg-transparent outline-none';
+	export let showButtonClassName = 'pl-1.5  transition bg-transparent';
 
 	let show = false;
 </script>
@@ -33,7 +32,7 @@
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 16 16"
 				fill="currentColor"
-				class="w-4 h-4"
+				class="size-4"
 			>
 				<path
 					fill-rule="evenodd"
@@ -49,7 +48,7 @@
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 16 16"
 				fill="currentColor"
-				class="w-4 h-4"
+				class="size-4"
 			>
 				<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
 				<path