-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;
text-align: center;
font-weight: normal;
box-sizing: border-box;
+ outline: none !important;
}
[href], [onclick] {
}
#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 {
a {
display: inline-block;
- min-width: 1em;
line-height: 1em;
border-radius: 0.5em;
}