Custom styling for natuurpunt

UI/BigComponents/FilterView.ts

@@ -65,12 +65,12 @@ export default class FilterView extends VariableUiElement {
                 Translations.t.general.layerSelection.zoomInToSeeThisLayer.Clone()
                     .SetClass("alert")
                     .SetStyle("display: block ruby;width:min-content;"),
-                State.state.locationControl.map(location =>location.zoom > filteredLayer.layerDef.minzoom )
+                State.state.locationControl.map(location =>location.zoom >= filteredLayer.layerDef.minzoom )
             )
             
 
         const style =
-            "display:flex;align-items:center;color:#007759;padding:0.5rem 0;";
+            "display:flex;align-items:center;padding:0.5rem 0;";
         const layerChecked = new Combine([icon, styledNameChecked, zoomStatus])
             .SetStyle(style)
             .onClick(() => filteredLayer.isDisplayed.setData(false));

assets/layers/trail/trail.json

@@ -38,7 +38,8 @@
         "nl": "Deze wandeling is {_length:km} kilometer lang"
       }
     },
-    {"#": "Name",
+    {
+      "#": "Name",
       "question": {
         "nl": "Wat is de naam van deze wandeling?"
       },
@@ -147,8 +148,8 @@
         }
       ]
     },
-    { "#": "pushchair access",
-     
+    {
+      "#": "pushchair access",
       "question": {
         "nl": "Is deze wandeltocht toegankelijk met de buggy?"
       },

assets/themes/natuurpunt/natuurpunt.css

@@ -0,0 +1,17 @@
+:root {
+    --subtle-detail-color: #007759;
+    --subtle-detail-color-contrast: #ffffff;
+    --subtle-detail-color-light-contrast: lightgrey;
+
+    --catch-detail-color: #0fff00;
+    --catch-detail-color-contrast: #ffffff;
+    --alert-color: #fee4d1;
+    --background-color: white;
+    --foreground-color: #007759;
+    --popup-border: white;
+    --shadow-color: #00000066;
+    --variable-title-height: 0px; /* Set by javascript */
+    --return-to-the-map-height: 2em;
+
+    --image-carousel-height: 350px;
+}

assets/themes/natuurpunt/natuurpunt.json

@@ -1,5 +1,6 @@
 {
   "id": "natuurpunt",
+  "customCss": "./assets/themes/natuurpunt/natuurpunt.css",
   "title": {
     "nl": "Natuurgebieden",
     "en": "Nature Reserves"
@@ -253,4 +254,4 @@
     }
   ],
   "roamingRenderings": []
-}
+}

index.css

@@ -94,13 +94,25 @@ svg, img {
 }
 
 .mapcontrol svg path{
-    fill: var(--subtle-detail-color-contrast);
+    fill: var(--subtle-detail-color-contrast) !important;
 }
 
 a {
     color: var(--foreground-color);
 }
 
+btn {
+    margin-top: 0.25rem;
+    margin-right: 0.25rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    --tw-text-opacity: 1;
+    color: var(--catch-detail-color-contrast);
+    --tw-bg-opacity: 1;
+    background-color: var(--catch-detail-color);
+}
+
 .h-min {
     height: min-content;
 }