midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Migrate centermessage to Tailwind

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

19
index.css
View file

@ -362,28 +362,9 @@ a {
#centermessage { #centermessage {
position: absolute;
top: 30%;
left: 25%;
width: 50%;
font-size: large;
padding: 2em;
border-radius: 2em;
z-index: 4000; z-index: 4000;
pointer-events: none; pointer-events: none;
opacity: 1;
background-color: var(--background-color);
color: var(--foreground-color);
transition: opacity 500ms linear; transition: opacity 500ms linear;
text-align: center;
horiz-align: center;
font-weight: bold;
} }

4
index.html
View file

@ -59,7 +59,9 @@
<div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl overflow-hidden"></div> <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="geolocate-button"></div>
<div id="leafletDiv"></div> <div id="leafletDiv"></div>