This commit is contained in:
Timothy Jaeryang Baek committed 2026-10-16 01:55:24 +04:00
1 parent 8e9519240f
commit c13de6395f
1 file changed
+13 -14
@@ -2,7 +2,6 @@
import { createEventDispatcher, getContext } from 'svelte';
import type { ModelControl } from '$lib/apis';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
const i18n: any = getContext('i18n');
const dispatch = createEventDispatcher<{ change: string }>();
@@ -22,19 +21,19 @@
<div class="space-y-2 px-2 py-2 text-xs">
<div class="flex items-center gap-2">
<span class="text-gray-700 dark:text-gray-100">{control.label}</span>
<span class="min-w-0 flex-1 truncate text-gray-500 dark:text-gray-400">{label}</span>
{#if control.description}
<Tooltip content={control.description}>
<Tooltip as="span" content={control.description} allowHTML={false}>
<button
type="button"
aria-label={control.description}
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
class="cursor-help text-gray-700 underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:text-gray-100 dark:decoration-gray-500"
>
<QuestionMarkCircle className="size-3.5" />
{control.label}
</button>
</Tooltip>
{:else}
<span class="text-gray-700 dark:text-gray-100">{control.label}</span>
{/if}
<span class="min-w-0 flex-1 truncate text-gray-500 dark:text-gray-400">{label}</span>
</div>
<div class="space-y-1">
<div
@@ -59,7 +58,7 @@
{disabled}
aria-label={control.label}
aria-valuetext={label}
class="control-slider h-5 w-full cursor-pointer appearance-none rounded-md bg-gray-100 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 disabled:cursor-wait [--slider-fill:var(--color-gray-300)] dark:bg-gray-800 dark:[--slider-fill:var(--color-gray-600)]"
class="control-slider h-5 w-full border-y border-transparent bg-clip-padding cursor-pointer appearance-none rounded-md bg-gray-100 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 disabled:cursor-wait [--slider-fill:var(--color-gray-500)] dark:bg-gray-800 dark:[--slider-fill:var(--color-gray-600)]"
style:background-image={`linear-gradient(to right, var(--slider-fill) ${progress}%, transparent ${progress}%)`}
on:input={() => (editing = true)}
on:change={() => {
@@ -87,17 +86,17 @@
<style>
.control-slider::-webkit-slider-thumb {
appearance: none;
width: 1rem;
height: 1.25rem;
border-radius: 0.375rem;
width: 0.9375rem;
height: 1.1875rem;
border-radius: 0.25rem;
background: white;
box-shadow: 0 1px 3px #0003;
}
.control-slider::-moz-range-thumb {
width: 1rem;
height: 1.25rem;
width: 0.9375rem;
height: 1.1875rem;
border: 0;
border-radius: 0.375rem;
border-radius: 0.25rem;
background: white;
box-shadow: 0 1px 3px #0003;
}