feat(css): shadows

1 files changed, 59 insertions, 0 deletions

diff --git a/src/app.css b/src/app.css
index 4ee2049d..13972546 100644
--- a/src/app.css
+++ b/src/app.css
@@ -11,6 +11,7 @@ details {
 	background-color: var(--base001);
 	padding: 1rem;
 	border-radius: 4px;
+	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
 summary {
@@ -39,6 +40,8 @@ select {
 	border-radius: 4px;
 	transform: translateY(0.175em);
 	place-content: center;
+	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
+	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -100,6 +103,7 @@ button {
 	border: none;
 	border-radius: 4px;
 	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
+	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
 button:hover {
@@ -165,6 +169,7 @@ button:disabled:active {
 	background-color: var(--base001);
 	padding: 1rem;
 	border-radius: 4px;
+	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
 code {
@@ -210,3 +215,57 @@ li::marker {
 	flex-direction: column;
 	justify-content: center;
 }
+
+html {
+	transition: 300ms;
+}
+
+:root {
+	--base00: #f8f8f8;
+	--base001: #ffffff;
+	--base01: #e8e8e8;
+	--base02: #d8d8d8;
+	--base03: #b8b8b8;
+	--base04: #585858;
+	--base05: #383838;
+	--base06: #282828;
+	--base07: #181818;
+	--base08: #ab4642;
+	--base09: #dc9656;
+	--base0A: #f7ca88;
+	--base0B: #a1b56c;
+	--base0C: #86c1b9;
+	--base0D: #7cafc2;
+	--base0E: #ba8baf;
+	--base0F: #a16946;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--base00: #080808;
+		--base001: #0c0c0c;
+		--base01: #181818;
+		--base02: #282828;
+		--base03: #484848;
+		--base04: #a8a8a8;
+		--base05: #c8c8c8;
+		--base06: #d8d8d8;
+		--base07: #f8f8f8;
+		--base08: #9a4541;
+		--base09: #cb9555;
+		--base0A: #f6c987;
+		--base0B: #a0b45b;
+		--base0C: #85c0b8;
+		--base0D: #7baeb1;
+		--base0E: #b98aae;
+		--base0F: #a06845;
+	}
+}
+
+#mai {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	height: auto;
+	width: 10vh;
+}