From bce557cc2dc767628bed6aac87301a1be7c5431b Mon Sep 17 00:00:00 2001
From: rxliuli <rxliuli@gmail.com>
Date: Tue, 4 Nov 2025 05:03:50 +0800
Subject: init commit

---
 src/components/GradientOverlay.svelte | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/components/GradientOverlay.svelte

(limited to 'src/components/GradientOverlay.svelte')

diff --git a/src/components/GradientOverlay.svelte b/src/components/GradientOverlay.svelte
new file mode 100644
index 0000000..5827a2c
--- /dev/null
+++ b/src/components/GradientOverlay.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    export let shouldDarken: boolean = true;
+</script>
+
+<div class="gradient-overlay" style:--brightness={shouldDarken ? 0.85 : 1} />
+
+<style>
+    .gradient-overlay {
+        position: absolute;
+        z-index: 1;
+        bottom: 0;
+        width: 100%;
+        height: var(--height, 60%);
+        border-radius: var(--border-radius, var(--global-border-radius-large));
+        background: linear-gradient(
+            transparent,
+            var(--color, var(--systemSecondary-onLight)) var(--height, 100%)
+        );
+        backdrop-filter: blur(10px);
+        filter: saturate(1.5) brightness(var(--brightness));
+        mask-image: linear-gradient(180deg, transparent 6%, rgb(0, 0, 0.5) 85%);
+    }
+</style>
-- 
cgit v1.2.3

