Formatting and style tweaks

css/index-tailwind-output.css

@@ -1260,6 +1260,10 @@ video {
   flex-wrap: wrap;
 }
 
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -1353,10 +1357,6 @@ video {
   border-radius: 1.5rem;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1365,6 +1365,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -1809,23 +1813,38 @@ video {
 }
 
 :root {
+  /* The main colour scheme of mapcomplete is configured here.
+     * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these.
+     */
+  /* Main color of the application: the background and text colours */
+  --background-color: white;
+  /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */
+  --foreground-color: black;
+  /* A colour to indicate an error or warning */
+  --alert-color: #fee4d1;
+  /**
+     * Base colour of interactive elements, mainly the 'subtle button'
+     * 
+     */
   --subtle-detail-color: #DBEAFE;
   --subtle-detail-color-contrast: black;
   --subtle-detail-color-light-contrast: lightgrey;
+  /**
+     * A stronger variant of the 'subtle-detail-colour'
+     * Used as subtle button hover
+     */
   --unsubtle-detail-color: #BFDBFE;
   --unsubtle-detail-color-contrast: black;
   --catch-detail-color: #3a3aeb;
   --catch-detail-color-contrast: white;
-  --alert-color: #fee4d1;
-  --background-color: white;
-  --foreground-color: black;
-  --popup-border: white;
   --non-active-tab-svg: var(--foreground-color);
   --shadow-color: #00000066;
-  --variable-title-height: 0px;
-  /* Set by javascript */
   --return-to-the-map-height: 2em;
   --image-carousel-height: 350px;
+  /* The border colour of the leaflet popup */
+  --popup-border: white;
+  /* Technical variable to make some dynamic behaviour possible; set by javascript. */
+  --variable-title-height: 0px;
 }
 
 html, body {
@@ -1902,8 +1921,6 @@ a {
 }
 
 .btn {
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
   line-height: 1.25rem;
   --tw-text-opacity: 1;
   color: var(--catch-detail-color-contrast);
@@ -1917,6 +1934,7 @@ a {
   padding-right: 1.25rem;
   font-size: large;
   font-weight: bold;
+  transition: 100ms;
   /*-- invisible border: rendered on hover*/
   border: 3px solid var(--unsubtle-detail-color);
 }
@@ -1927,11 +1945,12 @@ a {
 
 .btn-secondary {
   background-color: var(--catch-detail-color);
-  filter: saturate(0.8);
+  filter: saturate(0.5);
 }
 
 .btn-secondary:hover {
   background-color: var(--catch-detail-color);
+  filter: unset;
 }
 
 .btn-disabled {
@@ -2358,6 +2377,7 @@ input {
 .layer-filters {
   /* If needed, the panel which contains the extra filters for a layer */
   margin-bottom: 1rem;
+  border-bottom: 2px solid var(--foreground-color);
 }
 
 .filter-panel {