From 52aec94800dd092a81d3de0439f95a32cba8a8cf Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Fri, 8 Jan 2016 10:58:13 +0100
Subject: [PATCH] center help overlay with flexbox

---
 css/reveal.css  | 44 ++++++++++++++++++++++++++++++++------------
 css/reveal.scss |  9 +++++----
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/css/reveal.css b/css/reveal.css
index 45305840..fc16f5b2 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -111,24 +111,40 @@ html:-moz-full-screen-ancestor {
     text-decoration: line-through; }
 
 .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 {
-    transform: translate(0, 0); }
+    -webkit-transform: translate(0, 0);
+        -ms-transform: translate(0, 0);
+            transform: translate(0, 0); }
 
 .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 {
-    transform: translate(0, 0); }
+    -webkit-transform: translate(0, 0);
+        -ms-transform: translate(0, 0);
+            transform: translate(0, 0); }
 
 .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 {
-    transform: translate(0, 0); }
+    -webkit-transform: translate(0, 0);
+        -ms-transform: translate(0, 0);
+            transform: translate(0, 0); }
 
 .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 {
-    transform: translate(0, 0); }
+    -webkit-transform: translate(0, 0);
+        -ms-transform: translate(0, 0);
+            transform: translate(0, 0); }
 
 .reveal .slides section .fragment.current-visible {
   opacity: 0;
@@ -1176,6 +1192,10 @@ html:-moz-full-screen-ancestor {
 
 .reveal .overlay .viewport {
   position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   top: 40px;
   right: 0;
   bottom: 0;
@@ -1209,8 +1229,8 @@ html:-moz-full-screen-ancestor {
 
 .reveal .overlay.overlay-help .viewport .viewport-inner {
   width: 600px;
-  margin: 0 auto;
-  padding: 60px;
+  margin: auto;
+  padding: 20px 20px 80px 20px;
   text-align: center;
   letter-spacing: normal; }
 
@@ -1220,12 +1240,12 @@ html:-moz-full-screen-ancestor {
 .reveal .overlay.overlay-help .viewport .viewport-inner table {
   border: 1px solid #fff;
   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 td {
   width: 200px;
-  padding: 10px;
+  padding: 14px;
   border: 1px solid #fff;
   vertical-align: middle; }
 
diff --git a/css/reveal.scss b/css/reveal.scss
index 5a666711..da1fb221 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1204,6 +1204,7 @@ html:-moz-full-screen-ancestor {
 
 	.reveal .overlay .viewport {
 		position: absolute;
+		display: flex;
 		top: 40px;
 		right: 0;
 		bottom: 0;
@@ -1240,8 +1241,8 @@ html:-moz-full-screen-ancestor {
 
 	.reveal .overlay.overlay-help .viewport .viewport-inner {
 		width: 600px;
-		margin: 0 auto;
-		padding: 60px;
+		margin: auto;
+		padding: 20px 20px 80px 20px;
 		text-align: center;
 		letter-spacing: normal;
 	}
@@ -1253,13 +1254,13 @@ html:-moz-full-screen-ancestor {
 	.reveal .overlay.overlay-help .viewport .viewport-inner table {
 		border: 1px solid #fff;
 		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 td {
 		width: 200px;
-		padding: 10px;
+		padding: 14px;
 		border: 1px solid #fff;
 		vertical-align: middle;
 	}