From 90f1c492271ba8a777988a4b41a53c095af9ae99 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Mon, 29 Apr 2024 07:16:01 +0300 Subject: [PATCH] Invert dark browse icons in dark mode --- app/assets/stylesheets/browse.scss | 86 +++++++++++++++--------------- app/assets/stylesheets/common.scss | 8 +++ 2 files changed, 51 insertions(+), 43 deletions(-) diff --git a/app/assets/stylesheets/browse.scss b/app/assets/stylesheets/browse.scss index 30cb25c00..5aa6a499c 100644 --- a/app/assets/stylesheets/browse.scss +++ b/app/assets/stylesheets/browse.scss @@ -4,74 +4,74 @@ $map-sidebar-icons: ( ".aeroway.aerodrome": ("filename": "aerodrome.p.16.png"), - ".amenity.atm": ("filename": "amenity_atm.16.png"), - ".amenity.bank": ("filename": "amenity_bank.16.png"), - ".amenity.bar": ("filename": "amenity_bar.16.png"), - ".amenity.bench": ("filename": "amenity_bench.16.png"), - ".amenity.biergarten": ("filename": "amenity_biergarten.16.png"), + ".amenity.atm": ("filename": "amenity_atm.16.png", "invert": true), + ".amenity.bank": ("filename": "amenity_bank.16.png", "invert": true), + ".amenity.bar": ("filename": "amenity_bar.16.png", "invert": true), + ".amenity.bench": ("filename": "amenity_bench.16.png", "invert": true), + ".amenity.biergarten": ("filename": "amenity_biergarten.16.png", "invert": true), ".amenity.bicycle_parking": ("filename": "amenity_bicycle_parking.16.png"), ".amenity.bicycle_rental": ("filename": "transport_rental_bicycle.16.png"), ".amenity.bus_station": ("filename": "bus_station.n.16.png"), - ".amenity.cafe": ("filename": "amenity_cafe.16.png"), + ".amenity.cafe": ("filename": "amenity_cafe.16.png", "invert": true), ".amenity.car_rental": ("filename": "transport_rental_car.16.png"), ".amenity.car_sharing": ("filename": "car_share.p.16.png"), - ".amenity.cinema": ("filename": "amenity_cinema.16.png"), - ".amenity.courthouse": ("filename": "amenity_courthouse.16.png"), + ".amenity.cinema": ("filename": "amenity_cinema.16.png", "invert": true), + ".amenity.courthouse": ("filename": "amenity_courthouse.16.png", "invert": true), ".amenity.dentist": ("filename": "amenity_dentist.16.png"), ".amenity.doctors": ("filename": "amenity_doctors.16.png"), - ".amenity.drinking_water": ("filename": "amenity_drinking_water.16.png"), + ".amenity.drinking_water": ("filename": "amenity_drinking_water.16.png", "invert": true), ".amenity.embassy": ("filename": "amenity_embassy.16.png"), - ".amenity.fast_food": ("filename": "amenity_fast_food.16.png"), - ".amenity.fire_station": ("filename": "amenity_fire_station.16.png"), + ".amenity.fast_food": ("filename": "amenity_fast_food.16.png", "invert": true), + ".amenity.fire_station": ("filename": "amenity_fire_station.16.png", "invert": true), ".amenity.fuel": ("filename": "amenity_fuel.16.png"), ".amenity.hospital": ("filename": "amenity_hospital.16.png"), - ".amenity.library": ("filename": "library.p.16.png"), + ".amenity.library": ("filename": "library.p.16.png", "invert": true), ".amenity.nursery": ("filename": "education_nursery.p.16.png"), - ".amenity.nightclub": ("filename": "amenity_nightclub.16.png"), + ".amenity.nightclub": ("filename": "amenity_nightclub.16.png", "invert": true), ".amenity.parking": ("filename": "parking.p.16.png"), ".amenity.pharmacy": ("filename": "amenity_pharmacy.16.png"), - ".amenity.place_of_worship": ("filename": "amenity_place_of_worship.16.png"), - ".amenity.police": ("filename": "amenity_police.16.png"), - ".amenity.post_box": ("filename": "post_box.p.16.png"), - ".amenity.post_office": ("filename": "post_office.p.16.png"), - ".amenity.prison": ("filename": "amenity_prison.16.png"), - ".amenity.pub": ("filename": "amenity_pub.16.png"), - ".amenity.restaurant": ("filename": "amenity_restaurant.16.png"), - ".amenity.recycling": ("filename": "amenity_recycling.16.png"), + ".amenity.place_of_worship": ("filename": "amenity_place_of_worship.16.png", "invert": true), + ".amenity.police": ("filename": "amenity_police.16.png", "invert": true), + ".amenity.post_box": ("filename": "post_box.p.16.png", "invert": true), + ".amenity.post_office": ("filename": "post_office.p.16.png", "invert": true), + ".amenity.prison": ("filename": "amenity_prison.16.png", "invert": true), + ".amenity.pub": ("filename": "amenity_pub.16.png", "invert": true), + ".amenity.restaurant": ("filename": "amenity_restaurant.16.png", "invert": true), + ".amenity.recycling": ("filename": "amenity_recycling.16.png", "invert": true), ".amenity.school": ("filename": "education_school.p.16.png"), ".amenity.shelter": ("filename": "shelter2.p.16.png"), ".amenity.taxi": ("filename": "amenity_taxi.16.png"), - ".amenity.telephone": ("filename": "telephone.p.16.png"), - ".amenity.theatre": ("filename": "amenity_theatre.16.png"), - ".amenity.toilets": ("filename": "amenity_toilets.16.png"), - ".amenity.townhall": ("filename": "amenity_townhall.16.png"), + ".amenity.telephone": ("filename": "telephone.p.16.png", "invert": true), + ".amenity.theatre": ("filename": "amenity_theatre.16.png", "invert": true), + ".amenity.toilets": ("filename": "amenity_toilets.16.png", "invert": true), + ".amenity.townhall": ("filename": "amenity_townhall.16.png", "invert": true), ".amenity.university": ("filename": "education_university.p.16.png"), ".amenity.veterinary": ("filename": "health_veterinary.p.16.png"), - ".amenity.waste_basket": ("filename": "amenity_waste_basket.16.png"), + ".amenity.waste_basket": ("filename": "amenity_waste_basket.16.png", "invert": true), - ".barrier.gate": ("filename": "gate2.p.16.png"), + ".barrier.gate": ("filename": "gate2.p.16.png", "invert": true), ".highway.bus_stop": ("filename": "highway_bus_stop.16.png"), ".highway.mini_roundabout": ("filename": "mini_round.p.16.png"), - ".highway.traffic_signals": ("filename": "traffic_light.png"), + ".highway.traffic_signals": ("filename": "traffic_light.png", "invert": true), ".highway.turning_circle": ("filename": "turning_circle.p.16.png"), - ".historic.archaeological_site": ("filename": "historic_archaeological_site.16.png"), - ".historic.castle": ("filename": "tourist_castle.p.16.png"), - ".historic.memorial": ("filename": "historic_memorial.16.png"), - ".historic.monument": ("filename": "historic_monument.16.png"), - ".historic.ruins": ("filename": "tourist_ruins.p.16.png"), - ".historic.wreck": ("filename": "tourist_wreck.p.16.png"), + ".historic.archaeological_site": ("filename": "historic_archaeological_site.16.png", "invert": true), + ".historic.castle": ("filename": "tourist_castle.p.16.png", "invert": true), + ".historic.memorial": ("filename": "historic_memorial.16.png", "invert": true), + ".historic.monument": ("filename": "historic_monument.16.png", "invert": true), + ".historic.ruins": ("filename": "tourist_ruins.p.16.png", "invert": true), + ".historic.wreck": ("filename": "tourist_wreck.p.16.png", "invert": true), ".man_made.lighthouse": ("filename": "man_made_lighthouse.16.png"), - ".man_made.water_tower": ("filename": "man_made_water_tower.16.png"), - ".man_made.windmill": ("filename": "man_made_windmill.16.png"), + ".man_made.water_tower": ("filename": "man_made_water_tower.16.png", "invert": true), + ".man_made.windmill": ("filename": "man_made_windmill.16.png", "invert": true), ".natural.tree": ("filename": "tree.p.16.png"), ".railway.halt": ("filename": "halt.p.16.png"), ".railway.station": ("filename": "station.p.16.png"), - ".railway.level_crossing": ("filename": "level_crossing.p.16.png"), + ".railway.level_crossing": ("filename": "level_crossing.p.16.png", "invert": true), ".shop": ("filename": "shop_convenience.p.16.png"), ".shop.alcohol": ("filename": "shop_alcohol.16.png"), @@ -109,9 +109,9 @@ $map-sidebar-icons: ( ".tourism.hostel": ("filename": "tourism_hostel.16.png"), ".tourism.hotel": ("filename": "tourism_hotel.16.png"), ".tourism.motel": ("filename": "tourism_motel.16.png"), - ".tourism.museum": ("filename": "tourism_museum.16.png"), - ".tourism.picnic_site": ("filename": "tourism_picnic_site.16.png"), - ".tourism.viewpoint": ("filename": "view_point.p.16.png"), + ".tourism.museum": ("filename": "tourism_museum.16.png", "invert": true), + ".tourism.picnic_site": ("filename": "tourism_picnic_site.16.png", "invert": true), + ".tourism.viewpoint": ("filename": "view_point.p.16.png", "invert": true), ".tourism.wilderness_hut": ("filename": "tourism_wilderness_hut.16.png"), /* Ways */ @@ -158,11 +158,11 @@ $map-sidebar-icons: ( ".leisure.golf_course": ("filename": "golf.png"), ".leisure.park": ("filename": "park.png"), - ".leisure.picnic_table": ("filename": "tourism_picnic_site.16.png"), - ".leisure.playground": ("filename": "leisure_playground.16.png"), + ".leisure.picnic_table": ("filename": "tourism_picnic_site.16.png", "invert": true), + ".leisure.playground": ("filename": "leisure_playground.16.png", "invert": true), ".leisure.pitch": ("filename": "pitch.png"), ".leisure.nature_reserve": ("filename": "reserve.png"), - ".leisure.water_park": ("filename": "leisure_water_park.16.png"), + ".leisure.water_park": ("filename": "leisure_water_park.16.png", "invert": true), ".natural.grassland": ("filename": "grassland.png"), ".natural.heath": ("filename": "heathland.png"), diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 8a5aa142c..eba3df61b 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1032,4 +1032,12 @@ img.trace_image { .browse-section #{$class}::before { content: image-url('browse/#{map.get($item, "filename")}'); } + + @if map.get($item, "invert") { + @include color-mode(dark) { + .browse-section #{$class}::before { + filter: invert(.8) hue-rotate(180deg); + } + } + } } -- 2.45.2