Ditch Inkscape.

[mlpccg.git] / main.css

diff --git a/main.css b/main.css
index de2ea55..7baf502 100644 (file)
--- a/main.css
+++ b/main.css
@@ -48,6 +48,9 @@ html {
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
+    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
+    -webkit-tap-highlight-color: transparent !important;
     padding: 0;
     margin: 0;
     text-decoration: none;
@@ -57,6 +60,7 @@ html {
     text-align: center;
     font-weight: normal;
     box-sizing: border-box;
+    outline: none !important;
 }
 
 [href], [onclick] {
@@ -77,40 +81,45 @@ body {
 }
 
 #overlay {
-    position: absolute;
+    position: fixed;
     left: -50%;
     right: -50%;
     top: -50%;
     bottom: -50%;
     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 {
@@ -253,7 +262,6 @@ body {
 
 a {
     display: inline-block;
-    min-width: 1em;
     line-height: 1em;
     border-radius: 0.5em;
 }