Add shadows to UI elements

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 */

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;

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;

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;

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;