diff options
Diffstat (limited to 'css/reveal.css')
-rw-r--r-- | css/reveal.css | 127 |
1 files changed, 78 insertions, 49 deletions
diff --git a/css/reveal.css b/css/reveal.css index 43d774b..705d966 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -33,16 +33,6 @@ body { background-color: #fff; color: #000; } -::-moz-selection { - background: #FF5E99; - color: #fff; - text-shadow: none; } - -::selection { - background: #FF5E99; - color: #fff; - text-shadow: none; } - /********************************************* * VIEW FRAGMENTS *********************************************/ @@ -76,16 +66,9 @@ body { -ms-transform: scale(0.1); transform: scale(0.1); } .reveal .slides section .fragment.zoom-in.visible { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); } - -.reveal .slides section .fragment.roll-in { - -webkit-transform: rotateX(90deg); - transform: rotateX(90deg); } - .reveal .slides section .fragment.roll-in.visible { - -webkit-transform: rotateX(0); - transform: rotateX(0); } + -webkit-transform: none; + -ms-transform: none; + transform: none; } .reveal .slides section .fragment.fade-out { opacity: 1; @@ -173,58 +156,61 @@ body { bottom: 10px; -webkit-user-select: none; } -.reveal .controls div { +.reveal .controls button { + padding: 0; position: absolute; opacity: 0.05; width: 0; height: 0; + background-color: transparent; border: 12px solid transparent; -webkit-transform: scale(0.9999); -ms-transform: scale(0.9999); transform: scale(0.9999); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; + -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -.reveal .controls div.enabled { +.reveal .controls .enabled { opacity: 0.7; cursor: pointer; } -.reveal .controls div.enabled:active { +.reveal .controls .enabled:active { margin-top: 1px; } -.reveal .controls div.navigate-left { +.reveal .controls .navigate-left { top: 42px; border-right-width: 22px; border-right-color: #000; } -.reveal .controls div.navigate-left.fragmented { +.reveal .controls .navigate-left.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-right { +.reveal .controls .navigate-right { left: 74px; top: 42px; border-left-width: 22px; border-left-color: #000; } -.reveal .controls div.navigate-right.fragmented { +.reveal .controls .navigate-right.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-up { +.reveal .controls .navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #000; } -.reveal .controls div.navigate-up.fragmented { +.reveal .controls .navigate-up.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-down { +.reveal .controls .navigate-down { left: 42px; top: 74px; border-top-width: 22px; border-top-color: #000; } -.reveal .controls div.navigate-down.fragmented { +.reveal .controls .navigate-down.fragmented { opacity: 0.3; } /********************************************* @@ -352,29 +338,56 @@ body { opacity: 0; } /********************************************* + * Mixins for readability of transitions + *********************************************/ +/********************************************* * SLIDE TRANSITION * Aliased 'linear' for backwards compatibility *********************************************/ -.reveal.slide section, .reveal.linear section { +.reveal.slide section { -webkit-backface-visibility: hidden; backface-visibility: hidden; } -.reveal .slides > section[data-transition=slide].past, .reveal.slide .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=linear].past, .reveal.linear .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=slide].past, .reveal .slides > section[data-transition~=slide-out].past, .reveal.slide .slides > section:not([data-transition]).past { -webkit-transform: translate(-150%, 0); -ms-transform: translate(-150%, 0); transform: translate(-150%, 0); } -.reveal .slides > section[data-transition=slide].future, .reveal.slide .slides > section:not([data-transition]).future, .reveal .slides > section[data-transition=linear].future, .reveal.linear .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=slide].future, .reveal .slides > section[data-transition~=slide-in].future, .reveal.slide .slides > section:not([data-transition]).future { -webkit-transform: translate(150%, 0); -ms-transform: translate(150%, 0); transform: translate(150%, 0); } -.reveal .slides > section > section[data-transition=slide].past, .reveal.slide .slides > section > section:not([data-transition]).past, .reveal .slides > section > section[data-transition=linear].past, .reveal.linear .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=slide].past, .reveal .slides > section > section[data-transition~=slide-out].past, .reveal.slide .slides > section > section:not([data-transition]).past { -webkit-transform: translate(0, -150%); -ms-transform: translate(0, -150%); transform: translate(0, -150%); } -.reveal .slides > section > section[data-transition=slide].future, .reveal.slide .slides > section > section:not([data-transition]).future, .reveal .slides > section > section[data-transition=linear].future, .reveal.linear .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=slide].future, .reveal .slides > section > section[data-transition~=slide-in].future, .reveal.slide .slides > section > section:not([data-transition]).future { + -webkit-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + transform: translate(0, 150%); } + +.reveal.linear section { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.reveal .slides > section[data-transition=linear].past, .reveal .slides > section[data-transition~=linear-out].past, .reveal.linear .slides > section:not([data-transition]).past { + -webkit-transform: translate(-150%, 0); + -ms-transform: translate(-150%, 0); + transform: translate(-150%, 0); } + +.reveal .slides > section[data-transition=linear].future, .reveal .slides > section[data-transition~=linear-in].future, .reveal.linear .slides > section:not([data-transition]).future { + -webkit-transform: translate(150%, 0); + -ms-transform: translate(150%, 0); + transform: translate(150%, 0); } + +.reveal .slides > section > section[data-transition=linear].past, .reveal .slides > section > section[data-transition~=linear-out].past, .reveal.linear .slides > section > section:not([data-transition]).past { + -webkit-transform: translate(0, -150%); + -ms-transform: translate(0, -150%); + transform: translate(0, -150%); } + +.reveal .slides > section > section[data-transition=linear].future, .reveal .slides > section > section[data-transition~=linear-in].future, .reveal.linear .slides > section > section:not([data-transition]).future { -webkit-transform: translate(0, 150%); -ms-transform: translate(0, 150%); transform: translate(0, 150%); } @@ -383,38 +396,54 @@ body { * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ -.reveal .slides > section[data-transition=default].past, .reveal.default .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=convex].past, .reveal.convex .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=default].past, .reveal .slides > section[data-transition~=default-out].past, .reveal.default .slides > section:not([data-transition]).past { + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } + +.reveal .slides > section[data-transition=default].future, .reveal .slides > section[data-transition~=default-in].future, .reveal.default .slides > section:not([data-transition]).future { + -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } + +.reveal .slides > section > section[data-transition=default].past, .reveal .slides > section > section[data-transition~=default-out].past, .reveal.default .slides > section > section:not([data-transition]).past { + -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } + +.reveal .slides > section > section[data-transition=default].future, .reveal .slides > section > section[data-transition~=default-in].future, .reveal.default .slides > section > section:not([data-transition]).future { + -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } + +.reveal .slides > section[data-transition=convex].past, .reveal .slides > section[data-transition~=convex-out].past, .reveal.convex .slides > section:not([data-transition]).past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } -.reveal .slides > section[data-transition=default].future, .reveal.default .slides > section:not([data-transition]).future, .reveal .slides > section[data-transition=convex].future, .reveal.convex .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=convex].future, .reveal .slides > section[data-transition~=convex-in].future, .reveal.convex .slides > section:not([data-transition]).future { -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } -.reveal .slides > section > section[data-transition=default].past, .reveal.default .slides > section > section:not([data-transition]).past, .reveal .slides > section > section[data-transition=convex].past, .reveal.convex .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=convex].past, .reveal .slides > section > section[data-transition~=convex-out].past, .reveal.convex .slides > section > section:not([data-transition]).past { -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } -.reveal .slides > section > section[data-transition=default].future, .reveal.default .slides > section > section:not([data-transition]).future, .reveal .slides > section > section[data-transition=convex].future, .reveal.convex .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=convex].future, .reveal .slides > section > section[data-transition~=convex-in].future, .reveal.convex .slides > section > section:not([data-transition]).future { -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } /********************************************* * CONCAVE TRANSITION *********************************************/ -.reveal .slides > section[data-transition=concave].past, .reveal.concave .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=concave].past, .reveal .slides > section[data-transition~=concave-out].past, .reveal.concave .slides > section:not([data-transition]).past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } -.reveal .slides > section[data-transition=concave].future, .reveal.concave .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=concave].future, .reveal .slides > section[data-transition~=concave-in].future, .reveal.concave .slides > section:not([data-transition]).future { -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } -.reveal .slides > section > section[data-transition=concave].past, .reveal.concave .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=concave].past, .reveal .slides > section > section[data-transition~=concave-out].past, .reveal.concave .slides > section > section:not([data-transition]).past { -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } -.reveal .slides > section > section[data-transition=concave].future, .reveal.concave .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=concave].future, .reveal .slides > section > section[data-transition~=concave-in].future, .reveal.concave .slides > section > section:not([data-transition]).future { -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); } @@ -425,24 +454,24 @@ body { -webkit-transition-timing-function: ease; transition-timing-function: ease; } -.reveal .slides > section[data-transition=zoom].past, .reveal.zoom .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=zoom].past, .reveal .slides > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section:not([data-transition]).past { visibility: hidden; -webkit-transform: scale(16); -ms-transform: scale(16); transform: scale(16); } -.reveal .slides > section[data-transition=zoom].future, .reveal.zoom .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=zoom].future, .reveal .slides > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section:not([data-transition]).future { visibility: hidden; -webkit-transform: scale(0.2); -ms-transform: scale(0.2); transform: scale(0.2); } -.reveal .slides > section > section[data-transition=zoom].past, .reveal.zoom .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=zoom].past, .reveal .slides > section > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section > section:not([data-transition]).past { -webkit-transform: translate(0, -150%); -ms-transform: translate(0, -150%); transform: translate(0, -150%); } -.reveal .slides > section > section[data-transition=zoom].future, .reveal.zoom .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=zoom].future, .reveal .slides > section > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section > section:not([data-transition]).future { -webkit-transform: translate(0, 150%); -ms-transform: translate(0, 150%); transform: translate(0, 150%); } @@ -618,7 +647,7 @@ body { /********************************************* * NO TRANSITION *********************************************/ -.reveal .slides section[data-transition=none], .reveal.none .slides section:not([data-transition]) { +.reveal .slides > section[data-transition=none], .reveal.none .slides > section:not([data-transition]) { -webkit-transform: none; -ms-transform: none; transform: none; |