feat: better modal window

examples/web/index.css

@@ -346,12 +346,12 @@ p {
     position: fixed;
     text-align: center;
     top: 0px;
-    transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -o-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -ms-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -moz-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -khtml-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -webkit-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -o-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -ms-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -moz-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -khtml-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -webkit-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
     width: 100%;
     z-index: 10;
 }
@@ -394,12 +394,13 @@ p {
     -moz-transform: scale(0.96);
     -khtml-transform: scale(0.96);
     -webkit-transform: scale(0.96);
-    transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -o-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -ms-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -moz-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -khtml-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -webkit-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+    margin-top: 30px;
+    transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
     width: 480px;
 }
 
@@ -411,12 +412,13 @@ p {
     -moz-transform: scale(1);
     -khtml-transform: scale(1);
     -webkit-transform: scale(1);
-    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    margin-top: 0px;
+    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
 }
 
 .modal-container > .modal .modal-top-buttons {
@@ -451,6 +453,7 @@ p {
 .modal-container > .modal .modal-buttons > .button.simple {
     margin-right: 12px;
     min-width: 120px;
+    display: inline-block;
 }
 
 .modal-container > .modal .modal-buttons > .button.simple:last-child {