sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-12-22 10:25:01 +00:00
Code Issues Releases Wiki Activity

Make some minor UI adjustments

Browse source 
We also add initial prefers-color-scheme: dark support
This commit is contained in:
Starbeamrainbowlabs 2019-07-20 14:13:21 +01:00
parent 14f9cf4a60
commit 63bc4e536d
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
4 changed files with 50 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
client_src/css/dark.css Normal file
View file

@ -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%);
}
}

13
client_src/css/index.css Normal file
View file

@ -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";

16
client_src/css/main.css
View file

@ -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 **/ /** Ensure that some assets are copied that aren't by default **/
.non-existent { .non-existent {
background: url(../../node_modules/leaflet/dist/images/marker-icon-2x.png), background: url(../../node_modules/leaflet/dist/images/marker-icon-2x.png),
@ -77,3 +66,8 @@ button.selected {
cursor: progress !important; cursor: progress !important;
pointer-events: none; pointer-events: none;
} }
.leaflet-control-attribution a {
color: #0050B6;
}

2
client_src/js/index.mjs
View file

@ -1,6 +1,6 @@
"use strict"; "use strict";
import '../css/main.css'; import '../css/index.css';
// import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css'; // import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css';
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------