feat: cool styles

5 files changed, 52 insertions, 6 deletions

diff --git a/src/app.css b/src/app.css
new file mode 100644
index 00000000..f6b051d7
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,47 @@
+details {
+	background-color: var(--base001);
+	padding: 1rem;
+	border-radius: 4px;
+}
+
+ul {
+	margin: 0;
+}
+
+input,
+select {
+	cursor: pointer;
+	position: relative;
+	background-color: #fff;
+	/* margin: 0; */
+	/* width: 1.15em;
+	height: 1.15em; */
+	padding: 0.25em;
+	border: none;
+	border-radius: 4px;
+	transform: translateY(0.175em);
+	place-content: center;
+}
+
+select {
+	transform: translateY(0em);
+	margin-top: 0.25em;
+	margin-bottom: 0.25em;
+}
+
+input[type='checkbox'] {
+	-webkit-appearance: none;
+	appearance: none;
+	margin: 0;
+	width: 1.15em;
+	height: 1.15em;
+}
+
+input[type='checkbox']:checked:before {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	content: '†';
+	color: black;
+}
diff --git a/src/app.html b/src/app.html
index 55214f6f..3616e3cb 100644
--- a/src/app.html
+++ b/src/app.html
@@ -143,6 +143,7 @@
 
 			:root {
 				--base00: #f8f8f8;
+				--base001: #ffffff;
 				--base01: #e8e8e8;
 				--base02: #d8d8d8;
 				--base03: #b8b8b8;
@@ -163,6 +164,7 @@
 			@media (prefers-color-scheme: dark) {
 				:root {
 					--base00: #080808;
+					--base001: #0c0c0c;
 					--base01: #181818;
 					--base02: #282828;
 					--base03: #484848;
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index 53eb0821..d9bdeb94 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -166,8 +166,6 @@
 									</li>
 								{/each}
 							</ul>
-
-							<p />
 						</details>
 					{/each}
 				</div>
@@ -199,10 +197,6 @@
 		column-width: 250px;
 	}
 
-	.list {
-		overflow-y: auto;
-	}
-
 	.entry::after {
 		content: '';
 		display: table;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 093c7d40..f9e74429 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
 	import settings from '$stores/settings';
 	import { browser } from '$app/environment';
 	import HeadTitle from '$lib/HeadTitle.svelte';
+	import '../app.css';
 
 	export let data;
 
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index 3e324b6d..3bc6729e 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -67,6 +67,8 @@
 	#list-container {
 		display: flex;
 		flex-wrap: wrap;
+		align-items: start;
+		gap: 1em;
 	}
 
 	.list {