From f5504d28f413fe427091a2d2a256e02e3c4f2011 Mon Sep 17 00:00:00 2001
From: Tobias <t@tobiasjordans.de>
Date: Wed, 20 Jan 2021 22:14:26 +0100
Subject: [PATCH] Migrate centermessage to Tailwind
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrate most attributes to Tailwind classes. The box is a bit wider now, which is OK IMO. The z-index could be migrated to a custom Tailwind config-entry later. The transition has probably a Tailwind version as well (to be checked later…).
---
 index.css  | 19 -------------------
 index.html |  4 +++-
 2 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/index.css b/index.css
index 66703ba8c..077aea41e 100644
--- a/index.css
+++ b/index.css
@@ -362,28 +362,9 @@ a {
 
 
 #centermessage {
-    position: absolute;
-    top: 30%;
-
-    left: 25%;
-    width: 50%;
-
-    font-size: large;
-
-    padding: 2em;
-    border-radius: 2em;
     z-index: 4000;
     pointer-events: none;
-
-    opacity: 1;
-    background-color: var(--background-color);
-    color: var(--foreground-color);
-
     transition: opacity 500ms linear;
-
-    text-align: center;
-    horiz-align: center;
-    font-weight: bold;
 }
 
 
diff --git a/index.html b/index.html
index 506c0dfde..00f9e5dbe 100644
--- a/index.html
+++ b/index.html
@@ -59,7 +59,9 @@
 
 <div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl overflow-hidden"></div>
 
-<div id="centermessage">Loading MapComplete, hang on...</div>
+<div id="centermessage" class="absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">
+    Loading MapComplete, hang on...
+</div>
 
 <div id="geolocate-button"></div>
 <div id="leafletDiv"></div>