From a3974c8bb648dc44e0099558d16a1ac3d378002c Mon Sep 17 00:00:00 2001
From: Alaskan Puffin <alaskanpuffin@protonmail.com>
Date: Fri, 30 Jun 2023 11:34:55 -0800
Subject: [PATCH] Change styling on map control layers

Signed-off-by: Alaskan Puffin <alaskanpuffin@protonmail.com>
---
 src/components/Map.vue | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index c72f1298d..a9db1c394 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -1242,13 +1242,44 @@ export default {
 	margin-left: 0px;
 }
 
-::v-deep .leaflet-control-layers-base span,
-::v-deep .leaflet-control-layers-overlays span {
+::v-deep .leaflet-control-layers-expanded {
+	padding: 4px 0px !important;
+}
+
+::v-deep .leaflet-control-layers-base span:nth-child(1),
+::v-deep .leaflet-control-layers-overlays span:nth-child(1) {
+	display: block;
+	height: 38px;
+	padding: 4px 10px;
+	border-top: 1px solid transparent;
+	border-bottom: 1px solid transparent;
+	color: var(--color-text-lighter) !important;
 	cursor: pointer !important;
 }
 
-::v-deep .leaflet-control-layers-selector {
-	min-height: 0;
+::v-deep .leaflet-control-layers-base span:hover,
+::v-deep .leaflet-control-layers-overlays span:hover {
+	color: var(--color-main-text) !important;
+	background-color: var(--color-background-hover) !important;
+	border-color: var(--color-border) !important;
+}
+
+::v-deep .leaflet-control-layers-base span:nth-child(2),
+::v-deep .leaflet-control-layers-overlays span:nth-child(2) {
+	display: inline-block;
+	vertical-align: top;
+	line-height: 30px;
+	margin: 0px 10px;
 	cursor: pointer !important;
 }
+
+::v-deep .leaflet-control-layers-selector {
+	display: inline-block;
+	height: 30px;
+	margin: 0px;
+}
+
+::v-deep .leaflet-control-layers-separator {
+	border-color: var(--color-border) !important;
+}
 </style>