X-Git-Url: https://git.yukkurigames.com/?p=mlpccg.git;a=blobdiff_plain;f=main.css;h=7baf502a8f53da3017a040f3a3afff9475877c25;hp=0ef3b19e9d4c849d931eac6488084209828729c4;hb=HEAD;hpb=50b194bba1b5bb0e372253ca0e35c08519361345 diff --git a/main.css b/main.css index 0ef3b19..7baf502 100644 --- a/main.css +++ b/main.css @@ -81,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 { @@ -257,7 +262,6 @@ body { a { display: inline-block; - min-width: 1em; line-height: 1em; border-radius: 0.5em; }