center help overlay with flexbox
parent
ddd0e85f41
commit
52aec94800
|
@ -111,24 +111,40 @@ html:-moz-full-screen-ancestor {
|
||||||
text-decoration: line-through; }
|
text-decoration: line-through; }
|
||||||
|
|
||||||
.reveal .slides section .fragment.fade-up {
|
.reveal .slides section .fragment.fade-up {
|
||||||
transform: translate(0, 20%); }
|
-webkit-transform: translate(0, 20%);
|
||||||
|
-ms-transform: translate(0, 20%);
|
||||||
|
transform: translate(0, 20%); }
|
||||||
.reveal .slides section .fragment.fade-up.visible {
|
.reveal .slides section .fragment.fade-up.visible {
|
||||||
transform: translate(0, 0); }
|
-webkit-transform: translate(0, 0);
|
||||||
|
-ms-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0); }
|
||||||
|
|
||||||
.reveal .slides section .fragment.fade-down {
|
.reveal .slides section .fragment.fade-down {
|
||||||
transform: translate(0, -20%); }
|
-webkit-transform: translate(0, -20%);
|
||||||
|
-ms-transform: translate(0, -20%);
|
||||||
|
transform: translate(0, -20%); }
|
||||||
.reveal .slides section .fragment.fade-down.visible {
|
.reveal .slides section .fragment.fade-down.visible {
|
||||||
transform: translate(0, 0); }
|
-webkit-transform: translate(0, 0);
|
||||||
|
-ms-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0); }
|
||||||
|
|
||||||
.reveal .slides section .fragment.fade-right {
|
.reveal .slides section .fragment.fade-right {
|
||||||
transform: translate(-20%, 0); }
|
-webkit-transform: translate(-20%, 0);
|
||||||
|
-ms-transform: translate(-20%, 0);
|
||||||
|
transform: translate(-20%, 0); }
|
||||||
.reveal .slides section .fragment.fade-right.visible {
|
.reveal .slides section .fragment.fade-right.visible {
|
||||||
transform: translate(0, 0); }
|
-webkit-transform: translate(0, 0);
|
||||||
|
-ms-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0); }
|
||||||
|
|
||||||
.reveal .slides section .fragment.fade-left {
|
.reveal .slides section .fragment.fade-left {
|
||||||
transform: translate(20%, 0); }
|
-webkit-transform: translate(20%, 0);
|
||||||
|
-ms-transform: translate(20%, 0);
|
||||||
|
transform: translate(20%, 0); }
|
||||||
.reveal .slides section .fragment.fade-left.visible {
|
.reveal .slides section .fragment.fade-left.visible {
|
||||||
transform: translate(0, 0); }
|
-webkit-transform: translate(0, 0);
|
||||||
|
-ms-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0); }
|
||||||
|
|
||||||
.reveal .slides section .fragment.current-visible {
|
.reveal .slides section .fragment.current-visible {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -1176,6 +1192,10 @@ html:-moz-full-screen-ancestor {
|
||||||
|
|
||||||
.reveal .overlay .viewport {
|
.reveal .overlay .viewport {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
@ -1209,8 +1229,8 @@ html:-moz-full-screen-ancestor {
|
||||||
|
|
||||||
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
margin: 0 auto;
|
margin: auto;
|
||||||
padding: 60px;
|
padding: 20px 20px 80px 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: normal; }
|
letter-spacing: normal; }
|
||||||
|
|
||||||
|
@ -1220,12 +1240,12 @@ html:-moz-full-screen-ancestor {
|
||||||
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 14px; }
|
font-size: 16px; }
|
||||||
|
|
||||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
||||||
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
padding: 10px;
|
padding: 14px;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
vertical-align: middle; }
|
vertical-align: middle; }
|
||||||
|
|
||||||
|
|
|
@ -1204,6 +1204,7 @@ html:-moz-full-screen-ancestor {
|
||||||
|
|
||||||
.reveal .overlay .viewport {
|
.reveal .overlay .viewport {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
@ -1240,8 +1241,8 @@ html:-moz-full-screen-ancestor {
|
||||||
|
|
||||||
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
margin: 0 auto;
|
margin: auto;
|
||||||
padding: 60px;
|
padding: 20px 20px 80px 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
|
@ -1253,13 +1254,13 @@ html:-moz-full-screen-ancestor {
|
||||||
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
||||||
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
padding: 10px;
|
padding: 14px;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue