improved css

src/routePlanner/style.css

@@ -14,28 +14,71 @@ section.route-planner > section.markers {
 	grid-area: markers;
 }
 
+section.route-planner > section.markers ol {
+	padding: 0
+}
+
+section.route-planner > section.markers li::before {
+	content: '⋮';
+}
+
+section.route-planner > section.markers li {
+	list-style-type: none;
+	width: 100%;
+	text-align: left;
+	cursor: grab;
+}
+
+section.route-planner > section.markers li:active {
+	cursor: grabbing;
+}
+
+section.route-planner > section.markers li .buttons {
+	float: right;
+}
+
+section.route-planner > section.markers li button {
+	background: transparent;
+	border: 0;
+}
+
+section.route-planner > section.markers li button[disabled] {
+	visibility: hidden;
+}
+
 section.route-planner > section.export {
 	grid-area: export;
 }
 
+section.route-planner > section.export > button {
+	width: 100%;
+	background-color: lime;
+	padding: 0.5em;
+	font-weight: bold;
+}
+
+section.route-planner > section.export > button[disabled] {
+	visibility: hidden;
+}
+
 section.route-planner > section.map {
 	grid-area: map;
 }
 
 section.route-planner .map-container {
-	width: 500px;
+	width: 700px;
-	height: 500px;
+	height: 700px;
 }
 
 section.route-planner .map-container .leaflet-tooltip-pane .text {
 	background: transparent;
-	border:0;
+	border: 0;
 	box-shadow: none;
 	color: white;
 	font-weight: bold;
 }
 
-@media (max-width: 639px) {
+@media (max-width: 1000px) {
 	section.route-planner {
 		grid-template-columns: 1fr;
 		grid-template-rows: 1fr min-content 2fr;

src/style.css

@@ -3,8 +3,8 @@
 	line-height: 1.5;
 	font-weight: 400;
 
-	color: #222;
+	color: white;
-	background-color: #ffffff;
+	background-color: darkgreen;
 
 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
@@ -32,32 +32,3 @@ img {
 img:hover {
 	filter: drop-shadow(0 0 2em #673ab8aa);
 }
-
-.resource {
-	padding: 0.75rem 1.5rem;
-	border-radius: 0.5rem;
-	text-align: left;
-	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
-}
-
-.resource:hover {
-	border: 1px solid #000;
-	box-shadow: 0 25px 50px -12px #673ab888;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		color: #ccc;
-		background-color: #1a1a1a;
-	}
-	.resource {
-		color: #ccc;
-		background-color: #161616;
-	}
-	.resource:hover {
-		border: 1px solid #bbb;
-	}
-}