projects
/
mlpccg.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
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 {
}
#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;
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%;
.dialog {
font-size: 8vmin;
position: absolute;
bottom: 10%;
-
width: 6
6.6667%;
-
margin-left: -6px
;
+
left: 1
6.6667%;
+
right: 16.6667%
;
border-style: solid;
border-width: 3px;
border-radius: 9px;
background-color: inherit;
padding-bottom: 3vh;
border-style: solid;
border-width: 3px;
border-radius: 9px;
background-color: inherit;
padding-bottom: 3vh;
- transform: translateX(1
6
0%);
- -webkit-transform: translateX(1
6
0%);
+ transform: translateX(1
5
0%);
+ -webkit-transform: translateX(1
5
0%);
transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;
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 {
}
.dialog p {
@@
-257,7
+262,6
@@
body {
a {
display: inline-block;
a {
display: inline-block;
- min-width: 1em;
line-height: 1em;
border-radius: 0.5em;
}
line-height: 1em;
border-radius: 0.5em;
}