diff --git a/main.css b/main.css index c662fee..3761d10 100644 --- a/main.css +++ b/main.css @@ -69,6 +69,22 @@ html, body cursor: pointer; } +@keyFrames vanish +{ + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.vanish +{ + animation-duration: 1s; + animation-name: vanish; +} + .retry { position: relative; @@ -304,11 +320,16 @@ html, body padding: 5px; } -#dateSelection +#dateSelection, #displaySelection { display: flex; } +#dateSelection +{ + margin-top: 5px; +} + button { background-color: #fff; @@ -318,11 +339,6 @@ button padding: 5px 5px; } -#dateSelection:first-child -{ - margin-left: 1px; -} - button:hover { background-color: #eee; diff --git a/map.js b/map.js index 4b8a8cf..cb57f58 100644 --- a/map.js +++ b/map.js @@ -268,7 +268,7 @@ closeButton.className = "close"; closeButton.innerHTML = "x"; closeButton.addEventListener("click", function() { - box.style.display = "none"; + vanish(); }); box.appendChild(closeButton); @@ -282,6 +282,17 @@ box.appendChild(customDiv); } + function vanish() { + box.classList.add("vanish"); + setTimeout(function() { + if (box.classList.contains("vanish")) { + box.style.display = "none"; + } + }, 1000); + } + + setTimeout(vanish, 7000); + const topNotification = notificationArea.firstChild; notificationArea.insertBefore(box, topNotification); }