xobs/fossasia-22-renode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

center help overlay with flexbox

Browse Source
This commit is contained in:
Hakim El Hattab 2016-01-08 10:58:13 +01:00
parent ddd0e85f41
commit 52aec94800
2 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/reveal.css
View File

@ -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; }

9
css/reveal.scss
View File

@ -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;
} }