From 617ad8ea7c81b42a27df84bd153fca75f6d2a5d4 Mon Sep 17 00:00:00 2001 From: hairlesshobo Date: Thu, 17 Dec 2020 08:07:09 -0500 Subject: [PATCH] Darkened map tiles for the three dark themes --- assets/css/cyborg/overrides.css | 25 ++++++++++++++++++++++- assets/css/darkly/overrides.css | 25 ++++++++++++++++++++++- assets/css/superhero/overrides.css | 25 ++++++++++++++++++++++- assets/js/leaflet/L.Maidenhead.js | 6 +++--- assets/js/leaflet/L.MaidenheadColoured.js | 12 +++++------ 5 files changed, 80 insertions(+), 13 deletions(-) diff --git a/assets/css/cyborg/overrides.css b/assets/css/cyborg/overrides.css index 54451185..58c9875c 100644 --- a/assets/css/cyborg/overrides.css +++ b/assets/css/cyborg/overrides.css @@ -1,3 +1,26 @@ /*! * No overrides for the default theme as it aligns with general.css -*/ \ No newline at end of file +*/ + +.leaflet-tile { + filter: invert() hue-rotate(180deg) grayscale(0.8) !important; +} + +path.grid-rectangle { + stroke: rgba(200, 200, 200, 0.5); +} + +span.grid-text > font { + color: rgba(220, 220, 220, 0.7) !important; + -webkit-text-stroke: 1px black !important; +} + +path.grid-confirmed { + fill: rgba(144, 238, 144, 0.15) !important; + stroke: rgba(144, 238, 144, 0.15) !important; +} + +path.grid-worked { + fill: rgba(220, 50, 50, 0.25) !important; + stroke: rgba(220, 50, 50, 0.25) !important; +} diff --git a/assets/css/darkly/overrides.css b/assets/css/darkly/overrides.css index 54451185..08446ba2 100644 --- a/assets/css/darkly/overrides.css +++ b/assets/css/darkly/overrides.css @@ -1,3 +1,26 @@ /*! * No overrides for the default theme as it aligns with general.css -*/ \ No newline at end of file +*/ + +.leaflet-tile { + filter: invert() hue-rotate(180deg) grayscale(0.8) brightness(1.2) !important; +} + +path.grid-rectangle { + stroke: rgba(200, 200, 200, 0.5); +} + +span.grid-text > font { + color: rgba(220, 220, 220, 0.85) !important; + -webkit-text-stroke: 1px black !important; +} + +path.grid-confirmed { + fill: rgba(144, 238, 144, 0.15) !important; + stroke: rgba(144, 238, 144, 0.15) !important; +} + +path.grid-worked { + fill: rgba(220, 50, 50, 0.25) !important; + stroke: rgba(220, 50, 50, 0.25) !important; +} diff --git a/assets/css/superhero/overrides.css b/assets/css/superhero/overrides.css index 54451185..fb252342 100644 --- a/assets/css/superhero/overrides.css +++ b/assets/css/superhero/overrides.css @@ -1,3 +1,26 @@ /*! * No overrides for the default theme as it aligns with general.css -*/ \ No newline at end of file +*/ + +.leaflet-tile { + filter: brightness(0.7) grayscale(0.6) !important; +} +path.grid-rectangle { + stroke: rgba(200, 200, 200, 0.5); +} + +span.grid-text > font { + color: rgba(220, 220, 220, 0.85) !important; + -webkit-text-stroke: 1px black !important; +} + +path.grid-confirmed { + fill: rgba(144, 238, 144, 0.3) !important; + stroke: rgba(144, 238, 144, 0.3) !important; +} + +path.grid-worked { + fill: rgba(220, 50, 50, 0.4) !important; + stroke: rgba(220, 50, 50, 0.4) !important; +} + diff --git a/assets/js/leaflet/L.Maidenhead.js b/assets/js/leaflet/L.Maidenhead.js index 0b0bde27..dad24553 100644 --- a/assets/js/leaflet/L.Maidenhead.js +++ b/assets/js/leaflet/L.Maidenhead.js @@ -56,7 +56,7 @@ L.Maidenhead = L.LayerGroup.extend({ for (var lon = left; lon < right; lon += (unit*2)) { for (var lat = bottom; lat < top; lat += unit) { var bounds = [[lat,lon],[lat+unit,lon+(unit*2)]]; - this.addLayer(L.rectangle(bounds, {color: this.options.color, weight: 1, fill:false, interactive: false})); + this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false})); //var pont = map.latLngToLayerPoint([lat,lon]); //console.log(pont.x); this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c))); @@ -66,10 +66,10 @@ L.Maidenhead = L.LayerGroup.extend({ }, _getLabel: function(lon,lat) { - var title_size = new Array(0 ,10,12,16,20,26,12,16,24,36,12 ,14 ,20 ,36 ,60 ,12 ,20 ,36 ,60 ,12 ,24 ); + var title_size = new Array(0 ,10,12,16,20,26,15,16,24,36,12 ,14 ,20 ,36 ,60 ,12 ,20 ,36 ,60 ,12 ,24 ); var zoom = map.getZoom(); var size = title_size[zoom]+'px'; - var title = '' + this._getLocator(lon,lat) + ''; + var title = '' + this._getLocator(lon,lat) + ''; var myIcon = L.divIcon({className: 'my-div-icon', html: title}); var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false); return marker; diff --git a/assets/js/leaflet/L.MaidenheadColoured.js b/assets/js/leaflet/L.MaidenheadColoured.js index 0fd8967a..a12e490b 100644 --- a/assets/js/leaflet/L.MaidenheadColoured.js +++ b/assets/js/leaflet/L.MaidenheadColoured.js @@ -61,14 +61,12 @@ L.Maidenhead = L.LayerGroup.extend({ if(grid_two.includes(this._getLocator(lon,lat)) || grid_four.includes(this._getLocator(lon,lat)) || grid_six.includes(this._getLocator(lon,lat))) { if(grid_two_confirmed.includes(this._getLocator(lon,lat)) || grid_four_confirmed.includes(this._getLocator(lon,lat)) || grid_six_confirmed.includes(this._getLocator(lon,lat))) { - - this.addLayer(L.rectangle(bounds, {color: 'rgb(144,238,144)', weight: 1, fillOpacity: 0.6, fill:true, interactive: false})); + this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle grid-confirmed', color: 'rgba(144,238,144, 0.6)', weight: 1, fillOpacity: 1, fill:true, interactive: false})); } else { - - this.addLayer(L.rectangle(bounds, {color: this.options.color, weight: 1, fillOpacity: 0.6, fill:true, interactive: false})); + this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle grid-worked', color: this.options.color, weight: 1, fillOpacity: 1, fill:true, interactive: false})); } } else { - this.addLayer(L.rectangle(bounds, {color: this.options.color, weight: 1, fill:false, interactive: false})); + this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false})); } //var pont = map.latLngToLayerPoint([lat,lon]); //console.log(pont.x); @@ -79,10 +77,10 @@ L.Maidenhead = L.LayerGroup.extend({ }, _getLabel: function(lon,lat) { - var title_size = new Array(0 ,10,12,16,20,26,12,16,24,36,12 ,14 ,20 ,36 ,60 ,12 ,20 ,36 ,60 ,12 ,24 ); + var title_size = new Array(0 ,10,12,16,20,26,15,16,24,36,12 ,14 ,20 ,36 ,60 ,12 ,20 ,36 ,60 ,12 ,24 ); var zoom = map.getZoom(); var size = title_size[zoom]+'px'; - var title = '' + this._getLocator(lon,lat) + ''; + var title = '' + this._getLocator(lon,lat) + ''; var myIcon = L.divIcon({className: 'my-div-icon', html: title}); var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false); return marker;