diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2016-01-08 10:58:13 +0100 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2016-01-08 10:58:13 +0100 |
| commit | 52aec94800dd092a81d3de0439f95a32cba8a8cf (patch) | |
| tree | d95d7eaa5cb576e2c1f0a9841df9bb5daecc60cb | |
| parent | ddd0e85f4196fb37e336157b92bf58f0365f061c (diff) | |
| download | perl-software-in-gnu-guix-52aec94800dd092a81d3de0439f95a32cba8a8cf.tar perl-software-in-gnu-guix-52aec94800dd092a81d3de0439f95a32cba8a8cf.tar.gz | |
center help overlay with flexbox
| -rw-r--r-- | css/reveal.css | 44 | ||||
| -rw-r--r-- | css/reveal.scss | 9 |
2 files changed, 37 insertions, 16 deletions
diff --git a/css/reveal.css b/css/reveal.css index 4530584..fc16f5b 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 5a66671..da1fb22 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; } |