From 63bc4e536d7c04583a0242ab5ac1c2ad0eba5457 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Sat, 20 Jul 2019 14:13:21 +0100
Subject: [PATCH] Make some minor UI adjustments

We also add initial prefers-color-scheme: dark support
---
 client_src/css/dark.css  | 31 +++++++++++++++++++++++++++++++
 client_src/css/index.css | 13 +++++++++++++
 client_src/css/main.css  | 16 +++++-----------
 client_src/js/index.mjs  |  2 +-
 4 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 client_src/css/dark.css
 create mode 100644 client_src/css/index.css

diff --git a/client_src/css/dark.css b/client_src/css/dark.css
new file mode 100644
index 0000000..2a800db
--- /dev/null
+++ b/client_src/css/dark.css
@@ -0,0 +1,31 @@
+@media (prefers-color-scheme: dark) {
+	.nanoModal {
+		background: #333;
+		color: #efefef;
+	}
+	.nanoModal a { color: hsl(240, 90%, 80%); }
+	.nanoModal a:visited { color: hsl(240, 90%, 70%); }
+	.nanoModal a:link { color: hsl(240, 90%, 80%); }
+	.nanoModal a:active { color: hsl(217, 89%, 80%); }
+	
+	.nanoModalBtn.nanoModalBtnPrimary { background-color: #1b79cb; }
+	
+	body > h1 {
+		background: rgba(0, 0, 0, 0.5);
+		color: #efefef;
+	}
+	
+	
+	.leaflet-control-attribution {
+		background: rgba(0, 0, 0, 0.7) !important;
+		color: #efefef;
+	}
+	.leaflet-control-attribution a { color: hsl(240, 90%, 90%) !important; }
+	.leaflet-control-attribution a:visited { color: hsl(240, 90%, 80%) !important; }
+	.leaflet-control-attribution a:link { color: hsl(240, 90%, 90%) !important; }
+	.leaflet-control-attribution a:active { color: hsl(217, 89%, 90%) !important; }
+	
+	.leaflet-top.leaflet-left {
+		filter: invert(100%);
+	}
+}
diff --git a/client_src/css/index.css b/client_src/css/index.css
new file mode 100644
index 0000000..73a7db5
--- /dev/null
+++ b/client_src/css/index.css
@@ -0,0 +1,13 @@
+@import "../../node_modules/leaflet/dist/leaflet.css";
+
+@import "../../node_modules/leaflet-fullscreen/dist/leaflet.fullscreen.css";
+
+@import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
+@import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+@import "./main.css";
+
+@import "./nanomodal.css";
+@import "./popup.css";
+@import "./guage.css";
+@import "./dark.css";
diff --git a/client_src/css/main.css b/client_src/css/main.css
index 776e91f..fa649e0 100644
--- a/client_src/css/main.css
+++ b/client_src/css/main.css
@@ -1,14 +1,3 @@
-@import "../../node_modules/leaflet/dist/leaflet.css";
-
-@import "../../node_modules/leaflet-fullscreen/dist/leaflet.fullscreen.css";
-
-@import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
-@import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
-
-@import "./nanomodal.css";
-@import "./popup.css";
-@import "./guage.css";
-
 /** Ensure that some assets are copied that aren't by default **/
 .non-existent {
     background: url(../../node_modules/leaflet/dist/images/marker-icon-2x.png),
@@ -77,3 +66,8 @@ button.selected {
     cursor: progress !important;
     pointer-events: none;
 }
+
+
+.leaflet-control-attribution a {
+    color: #0050B6;
+}
diff --git a/client_src/js/index.mjs b/client_src/js/index.mjs
index ac36be4..aca2c19 100644
--- a/client_src/js/index.mjs
+++ b/client_src/js/index.mjs
@@ -1,6 +1,6 @@
 "use strict";
 
-import '../css/main.css';
+import '../css/index.css';
 // import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css';
 
 // ----------------------------------------------------------------------------