Styles

De VEMAP frontend maakt gebruik van TailwindCSS ^v4. Daarnaast is voor de styling van de Flatpickr daterange picker een custom css bestand aanwezig voor het overschrijven van de style defaults met de VEMAP brand kleuren.

Bestanden

Bestand	Doel
`src/styles/global.css`	Globale thema-instellingen en utilities
`src/styles/flatpickr.custom.css`	Flatpickr overrides in VEMAP-stijl

Tailwind & thema

@import "tailwindcss";

@theme {
  --color-map-orange: #ff763f;
  --color-map-blue: #131d33;
}

Tailwind 4 wordt rechtstreeks vanuit CSS geïmporteerd.
Thema-kleuren leveren utility classes zoals bg-map-orange en text-map-blue.

Utility selectors

[x-cloak] {
  display: none !important;
}
.input-container {
  /* semitransparante achtergrond + focus outline */
}
.input-error {
  font-size: 0.75rem;
  color: #fca5a5;
  font-style: italic;
}
.custom-scrollbar {
  /* smalle scrollbar met hover reveal */
}

Gebruik .input-container en .input-error consequent in formulieren.
Combineer .custom-scrollbar met overflow-y-auto voor lange lijsten.

Flatpickr overrides

De Flatpickr bibliotheek wordt gebruikt in het DateRangePicker.astro component. Het custom css bestand wordt direct in het component geïmporteerd, zo worden de stijlbestanden alleen geïmporteerd wanneer het component wordt gebruikt.

import "flatpickr/dist/themes/dark.css";
import "@styles/flatpickr.custom.css";