From 86ae4869afaa561393c0b90aeb5825ca97dd149b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 5 Jan 2024 18:38:16 -0800
Subject: feat(css): blurred shadows

---
 src/app.css                        | 18 ++++++++++++++----
 src/lib/Tools/Schedule/Tool.svelte |  2 +-
 src/lib/Tools/Wrapped.svelte       |  4 ++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app.css b/src/app.css
index 13972546..e4add81c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,12 +5,13 @@ body {
 	font-family: 'Ubuntu', sans-serif;
 	font-size: 1rem;
 	line-height: 1.5;
+	text-shadow: 0 0 0.25em var(--base01);
 }
 
 details {
-	background-color: var(--base001);
+	background-color: var(--base0011);
 	padding: 1rem;
-	border-radius: 4px;
+	border-radius: 8px;
 	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
@@ -166,10 +167,17 @@ button:disabled:active {
 }
 
 .card {
-	background-color: var(--base001);
+	background-color: var(--base0011);
 	padding: 1rem;
-	border-radius: 4px;
+	border-radius: 8px;
 	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+}
+
+.card details,
+.no-shadow {
+	box-shadow: none;
 }
 
 code {
@@ -223,6 +231,7 @@ html {
 :root {
 	--base00: #f8f8f8;
 	--base001: #ffffff;
+	--base0011: #ffffff80;
 	--base01: #e8e8e8;
 	--base02: #d8d8d8;
 	--base03: #b8b8b8;
@@ -244,6 +253,7 @@ html {
 	:root {
 		--base00: #080808;
 		--base001: #0c0c0c;
+		--base0011: #0c0c0c80;
 		--base01: #181818;
 		--base02: #282828;
 		--base03: #484848;
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index cf859445..63817e3e 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -214,7 +214,7 @@
 	}
 
 	.today {
-		border: 1px solid var(--base0E);
+		box-shadow: 0 0 0 1px var(--base0E), 0 2px 4px var(--base0E);
 	}
 
 	.list {
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index a01d9934..b84b9adf 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -575,7 +575,7 @@
 					<details open>
 						<summary>Options</summary>
 						<div id="options">
-							<details open>
+							<details class="no-shadow" open>
 								<summary>Display</summary>
 
 								<input type="checkbox" bind:checked={watermark} /> Show watermark<br />
@@ -619,7 +619,7 @@
 								Width adjustment<br />
 							</details>
 
-							<details open>
+							<details class="no-shadow" open>
 								<summary>Calculation</summary>
 
 								<input type="checkbox" bind:checked={useFullActivityHistory} />
-- 
cgit v1.2.3