Rework dialog open/close.

[mlpccg.git] / main.css

diff --git a/main.css b/main.css
index 0ef3b19..74250b8 100644 (file)
--- a/main.css
+++ b/main.css
@@ -81,40 +81,45 @@ body {
 }
 
 #overlay {
-    position: absolute;
-    left: -50%;
-    right: -50%;
-    top: -50%;
-    bottom: -50%;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     background-color: black;
     opacity: 0;
-    -webkit-animation: fadein 0.5s forwards;
-    animation: fadein 0.5s forwards;
+    transition: opacity 0.5s;
+    -webkit-transition: opacity 0.5s;
+    z-index: 3;
+    pointer-events: none;
 }
 
-@keyframes fadein { to { opacity: 0.5; } }
-@-webkit-keyframes fadein { to { opacity: 0.5; } }
-
 .dialog {
     font-size: 8vmin;
     position: absolute;
     bottom: 10%;
-    width: 66.6667%;
-    margin-left: -6px;
+    left: 16.6667%;
+    right: 16.6667%;
     border-style: solid;
     border-width: 3px;
     border-radius: 9px;
     background-color: inherit;
     padding-bottom: 3vh;
-    transform: translateX(160%);
-    -webkit-transform: translateX(160%);
+    transform: translateX(150%);
+    -webkit-transform: translateX(150%);
     transition: transform 0.5s;
     -webkit-transition: -webkit-transform 0.5s;
+    z-index: 4;
+}
+
+.dialog.open {
+    transform: translateX(0);
+    -webkit-transform: translateX(0);
 }
 
-#overlay + .dialog {
-    transform: translateX(25%);
-    -webkit-transform: translateX(25%);
+.dialog.open ~ #overlay {
+    opacity: 0.5;
+    pointer-events: auto;
 }
 
 .dialog p {
@@ -257,7 +262,6 @@ body {
 
 a {
     display: inline-block;
-    min-width: 1em;
     line-height: 1em;
     border-radius: 0.5em;
 }