From 2ffe57c38a00afbe8d816d8e8df6da8695580af1 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 24 May 2021 21:57:53 +0100
Subject: [PATCH] Add shadows to UI elements

---
 index.html                            | 1 +
 src/components/Sidebar.vue            | 1 +
 src/components/map/MapContextMenu.vue | 1 +
 src/scss/_placeholders.scss           | 1 +
 src/scss/leaflet/_controls.scss       | 7 +++++++
 5 files changed, 11 insertions(+)

diff --git a/index.html b/index.html
index 5646e47..b8c11f2 100644
--- a/index.html
+++ b/index.html
@@ -128,6 +128,7 @@
 
             --border-radius: 1rem;
             --border-color: #333333; /* Control borders */
+            --box-shadow: 2px 2px 0px #111111;
 
             --text-base: #cccccc; /* Normal text */
             --text-emphasis: #eeeeee; /* Chat messages/:focus inputs */
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 80bd666..0d9bf65 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -128,6 +128,7 @@ export default defineComponent({
 		button {
 			width: 5rem;
 			height: 5rem;
+			box-shadow: var(--box-shadow);
 
 			& + button {
 				margin-left: 1rem;
diff --git a/src/components/map/MapContextMenu.vue b/src/components/map/MapContextMenu.vue
index e9d87e9..baaad78 100644
--- a/src/components/map/MapContextMenu.vue
+++ b/src/components/map/MapContextMenu.vue
@@ -179,6 +179,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 	#map-context-menu {
 		background-color: var(--background-base);
+		box-shadow: var(--box-shadow);
 		color: var(--text-base);
 		border-radius: var(--border-radius);
 		position: fixed;
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index 858ff4e..4ab1ffe 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -78,6 +78,7 @@
 	background-color: var(--background-base);
 	color: var(--text-base);
 	border-radius: var(--border-radius);
+	box-shadow: var(--box-shadow);
 	display: flex;
 	flex-direction: column;
 	padding: 1.5rem;
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 180e0af..ea2331f 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -17,6 +17,7 @@
 .leaflet-control {
 	background-color: var(--background-base);
 	border-radius: var(--border-radius);
+	box-shadow: var(--box-shadow);
 	margin: 0;
 	box-sizing: border-box;
 	overflow: hidden;
@@ -36,6 +37,7 @@
 	align-items: center;
 	padding: 0;
 	border: none;
+	box-shadow: var(--box-shadow);
 
 	a {
 		border-radius: 0;
@@ -215,6 +217,7 @@
 
 	.leaflet-bar {
 		flex-direction: column;
+		box-shadow: var(--box-shadow);
 
 		a {
 			width: 5rem;
@@ -223,6 +226,10 @@
 		}
 	}
 
+	.leaflet-control-layers {
+		box-shadow: var(--box-shadow);
+	}
+
 	.leaflet-control-logo {
 		order: 1;
 		margin-bottom: 1rem;