diff options
Diffstat (limited to 'css/reveal.css')
| -rw-r--r-- | css/reveal.css | 288 |
1 files changed, 264 insertions, 24 deletions
diff --git a/css/reveal.css b/css/reveal.css index 7e209fa..5cb9966 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -179,9 +179,19 @@ body { opacity: 0.5; } +.reveal .slides section .fragment.current-visible { + opacity: 0; +} + .reveal .slides section .fragment.current-visible.current-fragment { + opacity: 1; + } + .reveal .slides section .fragment.highlight-red, +.reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-green, -.reveal .slides section .fragment.highlight-blue { +.reveal .slides section .fragment.highlight-current-green, +.reveal .slides section .fragment.highlight-blue, +.reveal .slides section .fragment.highlight-current-blue { opacity: 1; } .reveal .slides section .fragment.highlight-red.visible { @@ -194,6 +204,23 @@ body { color: #1b91ff; } +.reveal .slides section .fragment.highlight-current-red.current-fragment { + color: #ff2c2d +} +.reveal .slides section .fragment.highlight-current-green.current-fragment { + color: #17ff2e; +} +.reveal .slides section .fragment.highlight-current-blue.current-fragment { + color: #1b91ff; +} + +.reveal .slides section .fragment.strike { + opacity: 1; +} + .reveal .slides section .fragment.strike.visible { + text-decoration: line-through; + } + /********************************************* * DEFAULT ELEMENT STYLES @@ -233,6 +260,7 @@ body { } .reveal ol, +.reveal dl, .reveal ul { display: inline-block; @@ -264,6 +292,14 @@ body { margin-left: 40px; } +.reveal dt { + font-weight: bold; +} + +.reveal dd { + margin-left: 40px; +} + .reveal p { margin-bottom: 10px; line-height: 1.2em; @@ -327,30 +363,27 @@ body { box-sizing: border-box; } -.reveal table{ +.reveal table { margin: auto; border-collapse: collapse; - border-spacing: 0; + border-spacing: 0; } -.reveal table th{ - text-shadow: rgb(255,255,255) 1px 1px 2px; - font-weight: bold; +.reveal table th { + font-weight: bold; } .reveal table th, .reveal table td { text-align: left; - padding-right: .3em; + padding: 0.2em 1em 0.2em 0; border-bottom: 1px solid; } -.reveal table tr:last-child td{ +.reveal table tr:last-child td { border-bottom: none; } - - .reveal sup { vertical-align: super; } @@ -472,7 +505,7 @@ body { } .reveal .progress:after { content: ''; - display: 'block'; + display: block; position: absolute; height: 20px; width: 100%; @@ -490,6 +523,19 @@ body { transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } +/********************************************* + * SLIDE NUMBER + *********************************************/ + +.reveal .slide-number { + position: fixed; + display: block; + right: 15px; + bottom: 15px; + opacity: 0.5; + z-index: 31; + font-size: 12px; +} /********************************************* * SLIDES @@ -501,6 +547,7 @@ body { height: 100%; -ms-touch-action: none; + touch-action: none; } .reveal .slides { @@ -544,7 +591,7 @@ body { z-index: 10; line-height: 1.2em; - font-weight: normal; + font-weight: inherit; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; @@ -725,6 +772,15 @@ body { * ZOOM TRANSITION *********************************************/ +.reveal .slides>section[data-transition=zoom], +.reveal.zoom .slides>section { + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + -ms-transition-timing-function: ease; + -o-transition-timing-function: ease; + transition-timing-function: ease; +} + .reveal .slides>section[data-transition=zoom].past, .reveal.zoom .slides>section.past { opacity: 0; @@ -1282,6 +1338,11 @@ body { position: absolute; width: 100%; height: 100%; + + -webkit-perspective: 600px; + -moz-perspective: 600px; + -ms-perspective: 600px; + perspective: 600px; } .reveal .slide-background { position: absolute; @@ -1295,11 +1356,11 @@ body { background-repeat: no-repeat; background-size: cover; - -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } .reveal .slide-background.present { opacity: 1; @@ -1321,7 +1382,7 @@ body { transition: none; } -/* Linear sliding transition style */ +/* 2D slide */ .reveal[data-background-transition=slide]>.backgrounds .slide-background, .reveal>.backgrounds .slide-background[data-background-transition=slide] { opacity: 1; @@ -1330,12 +1391,6 @@ body { -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; - - -webkit-transition-duration: 800ms; - -moz-transition-duration: 800ms; - -ms-transition-duration: 800ms; - -o-transition-duration: 800ms; - transition-duration: 800ms; } .reveal[data-background-transition=slide]>.backgrounds .slide-background.past, .reveal>.backgrounds .slide-background.past[data-background-transition=slide] { @@ -1372,6 +1427,142 @@ body { } +/* Convex */ +.reveal[data-background-transition=convex]>.backgrounds .slide-background.past, +.reveal>.backgrounds .slide-background.past[data-background-transition=convex] { + opacity: 0; + + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); +} +.reveal[data-background-transition=convex]>.backgrounds .slide-background.future, +.reveal>.backgrounds .slide-background.future[data-background-transition=convex] { + opacity: 0; + + -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); +} + +.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past, +.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] { + opacity: 0; + + -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); + -moz-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); +} +.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future, +.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] { + opacity: 0; + + -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); + -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); +} + + +/* Concave */ +.reveal[data-background-transition=concave]>.backgrounds .slide-background.past, +.reveal>.backgrounds .slide-background.past[data-background-transition=concave] { + opacity: 0; + + -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); +} +.reveal[data-background-transition=concave]>.backgrounds .slide-background.future, +.reveal>.backgrounds .slide-background.future[data-background-transition=concave] { + opacity: 0; + + -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); +} + +.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past, +.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] { + opacity: 0; + + -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); + -moz-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); +} +.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future, +.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] { + opacity: 0; + + -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); + -moz-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); +} + +/* Zoom */ +.reveal[data-background-transition=zoom]>.backgrounds .slide-background, +.reveal>.backgrounds .slide-background[data-background-transition=zoom] { + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + -ms-transition-timing-function: ease; + -o-transition-timing-function: ease; + transition-timing-function: ease; +} + +.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past, +.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(16); + -moz-transform: scale(16); + -ms-transform: scale(16); + -o-transform: scale(16); + transform: scale(16); +} +.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future, +.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(0.2); + -moz-transform: scale(0.2); + -ms-transform: scale(0.2); + -o-transform: scale(0.2); + transform: scale(0.2); +} + +.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past, +.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(16); + -moz-transform: scale(16); + -ms-transform: scale(16); + -o-transform: scale(16); + transform: scale(16); +} +.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future, +.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(0.2); + -moz-transform: scale(0.2); + -ms-transform: scale(0.2); + -o-transform: scale(0.2); + transform: scale(0.2); +} + + /* Global transition speed settings */ .reveal[data-transition-speed="fast"]>.backgrounds .slide-background { -webkit-transition-duration: 400ms; @@ -1416,6 +1607,31 @@ body { float: right } +/********************************************* + * PARALLAX BACKGROUND + *********************************************/ + +.reveal.has-parallax-background .backgrounds { + -webkit-transition: all 0.8s ease; + -moz-transition: all 0.8s ease; + -ms-transition: all 0.8s ease; + transition: all 0.8s ease; +} + +/* Global transition speed settings */ +.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds { + -webkit-transition-duration: 400ms; + -moz-transition-duration: 400ms; + -ms-transition-duration: 400ms; + transition-duration: 400ms; +} +.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds { + -webkit-transition-duration: 1200ms; + -moz-transition-duration: 1200ms; + -ms-transition-duration: 1200ms; + transition-duration: 1200ms; +} + /********************************************* * LINK PREVIEW OVERLAY @@ -1540,6 +1756,30 @@ body { } + +/********************************************* + * PLAYBACK COMPONENT + *********************************************/ + +.reveal .playback { + position: fixed; + left: 15px; + bottom: 15px; + z-index: 30; + cursor: pointer; + + -webkit-transition: all 400ms ease; + -moz-transition: all 400ms ease; + -ms-transition: all 400ms ease; + transition: all 400ms ease; +} + +.reveal.overview .playback { + opacity: 0; + visibility: hidden; +} + + /********************************************* * ROLLING LINKS *********************************************/ |