srizan/lofi
1
0
Fork 0
mirror of https://github.com/SrIzan10/lofi.git synced 2026-06-06 00:56:53 +00:00
Code Issues 2 Packages Projects Releases Wiki Activity

feat: glassmorphized slider

Browse Source
This commit is contained in:
Izan Gil
2025-04-19 00:02:32 +02:00
parent 8e1c5b1950
commit 5763cafcba
4 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.css
View File

@@ -36,7 +36,7 @@
--text-color: rgba(0, 0, 0, 0.85);
--text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
--glass-bg: rgba(0, 0, 0, 0.1);
--glass-hover: rgba(0, 0, 0, 0.2);
--glass-hover: rgba(0, 0, 0, 0.15);
--glass-border: rgba(0, 0, 0, 0.2);
}
@@ -68,10 +68,11 @@
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--text-color: rgba(255, 255, 255, 0.95);
--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-hover: rgba(255, 255, 255, 0.2);
--glass-hover: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
}
}

2
src/lib/components/ui/dialog/dialog-content.svelte
View File

@@ -23,7 +23,7 @@
class={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
"backdrop-blur-md text-dynamic border drop-shadow-md shadow-lg",
"bg-[var(--glass-bg)] hover:bg-[var(--glass-hover)] border-[var(--glass-border)]",
"bg-[var(--glass-bg)] transition hover:bg-[var(--glass-hover)] border-[var(--glass-border)]",
className
)}
{...restProps}

1
src/lib/components/ui/popover/popover-content.svelte
View File

@@ -21,6 +21,7 @@
{sideOffset}
class={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
"bg-[var(--glass-bg)] transition hover:bg-[var(--glass-hover)] border-[var(--glass-border)]",
className
)}
{...restProps}

29
src/lib/components/ui/slider/slider.svelte
View File

@@ -26,19 +26,22 @@ get along, so we shut typescript up by casting `value` to `never`.
{...restProps}
>
{#snippet children({ thumbs })}
<span
data-orientation={orientation}
class="bg-primary/20 relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-1.5 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-1.5"
>
<SliderPrimitive.Range
class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
/>
</span>
<span
data-orientation={orientation}
class="bg-primary/20 relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-1.5 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-1.5 z-10"
>
<SliderPrimitive.Range
class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
/>
</span>
{#each thumbs as thumb (thumb)}
<SliderPrimitive.Thumb
index={thumb}
class="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
/>
{/each}
<SliderPrimitive.Thumb
index={thumb}
class={cn(
"border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
"bg-white/10 backdrop-blur-md hover:bg-white/15 text-foreground border border-white/20 shadow-lg translate-z-0 relative z-20",
)}
/>
{/each}
{/snippet}
</SliderPrimitive.Root>