Migrate centermessage to Tailwind

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…).
This commit is contained in:
Tobias 2021-01-20 22:14:26 +01:00
parent 66cb835ff0
commit f5504d28f4
2 changed files with 3 additions and 20 deletions

View file

@ -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;
}

View file

@ -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>