glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(appliedFontsStore): implement the logic to update font link when font weight changes

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-20 14:17:41 +03:00
parent c2542026a4
commit 55a560b785
2 changed files with 118 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/shared/ui/ComparisonSlider/components/SliderLine.svelte
View File

@@ -1,26 +1,55 @@
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
interface Props {
sliderPos: number;
isDragging: boolean;
}
let { sliderPos }: Props = $props();
let { sliderPos, isDragging }: Props = $props();
</script>
<!-- Vertical Divider & Knobs -->
<div
class="absolute top-0 bottom-0 z-30 pointer-events-none"
class="absolute inset-y-0 pointer-events-none -translate-x-1/2 z-30"
style:left="{sliderPos}%"
>
<!-- Vertical Line -->
<div class="absolute inset-y-0 -left-px w-0.5 bg-indigo-500 shadow-[0_0_10px_rgba(99,102,241,0.5)]">
<!-- Subtle wave glow zone -->
<div
class={cn(
'absolute inset-y-0 w-24 -left-12 bg-linear-to-r from-transparent via-indigo-500/8 to-transparent transition-all duration-300',
isDragging ? 'via-indigo-500/12' : '',
)}
>
</div>
<!-- Top Knob -->
<div class="absolute top-6 left-0 -translate-x-1/2">
<div class="w-2.5 h-2.5 bg-indigo-500 rounded-full shadow ring-2 ring-white"></div>
<!-- Vertical divider line -->
<div
class="absolute inset-y-0 w-0.5 bg-linear-to-b from-indigo-400/30 via-indigo-500 to-indigo-400/30 shadow-[0_0_12px_rgba(99,102,241,0.5)] transition-shadow duration-200"
class:shadow-[0_0_20px_rgba(99,102,241,0.7)]={isDragging}
>
</div>
<!-- Bottom Knob -->
<div class="absolute bottom-6 left-0 -translate-x-1/2">
<div class="w-2.5 h-2.5 bg-indigo-500 rounded-full shadow ring-2 ring-white"></div>
<!-- Top knob -->
<div
class="absolute top-6 left-0 -translate-x-1/2 transition-transform duration-200"
class:scale-125={isDragging}
>
<div class="w-3 h-3 bg-indigo-500 rounded-full shadow-lg ring-2 ring-white"></div>
</div>
<!-- Bottom knob -->
<div
class="absolute bottom-6 left-0 -translate-x-1/2 transition-transform duration-200"
class:scale-125={isDragging}
>
<div class="w-3 h-3 bg-indigo-500 rounded-full shadow-lg ring-2 ring-white"></div>
</div>
</div>
<!--
<style>
div {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
</style>
-->