Newer
Older
/*!
* reveal.js
* http://lab.hakim.se/reveal-js
* MIT licensed
*
*/
/*********************************************
* RESET STYLES
*********************************************/
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, .reveal video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
display: block;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
position: relative;
line-height: 1;
}
/*********************************************
* VIEW FRAGMENTS
*********************************************/
.reveal .slides section .fragment {
opacity: 0;
Yves Delley
a validé
transition: all .2s ease;
Hakim El Hattab
a validé
visibility: inherit;
.reveal .slides section .fragment.grow {
opacity: 1;
Hakim El Hattab
a validé
visibility: inherit;
Yves Delley
a validé
transform: scale( 1.3 );
.reveal .slides section .fragment.shrink {
opacity: 1;
Hakim El Hattab
a validé
visibility: inherit;
Yves Delley
a validé
transform: scale( 0.7 );
.reveal .slides section .fragment.zoom-in {
Yves Delley
a validé
transform: scale( 0.1 );
.reveal .slides section .fragment.fade-out {
opacity: 1;
Hakim El Hattab
a validé
visibility: inherit;
.reveal .slides section .fragment.semi-fade-out {
opacity: 1;
Hakim El Hattab
a validé
visibility: inherit;
Hakim El Hattab
a validé
visibility: inherit;
}
.reveal .slides section .fragment.strike {
opacity: 1;
Hakim El Hattab
a validé
visibility: inherit;
&.visible {
text-decoration: line-through;
}
}
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
.reveal .slides section .fragment.fade-up {
transform: translate(0, 20%);
&.visible {
transform: translate(0, 0);
}
}
.reveal .slides section .fragment.fade-down {
transform: translate(0, -20%);
&.visible {
transform: translate(0, 0);
}
}
.reveal .slides section .fragment.fade-right {
transform: translate(-20%, 0);
&.visible {
transform: translate(0, 0);
}
}
.reveal .slides section .fragment.fade-left {
transform: translate(20%, 0);
&.visible {
transform: translate(0, 0);
}
}
.reveal .slides section .fragment.current-visible {
Hakim El Hattab
a validé
visibility: inherit;
.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-current-green,
.reveal .slides section .fragment.highlight-blue,
.reveal .slides section .fragment.highlight-current-blue {
opacity: 1;
Hakim El Hattab
a validé
visibility: inherit;
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
}
.reveal .slides section .fragment.highlight-red.visible {
color: #ff2c2d
}
.reveal .slides section .fragment.highlight-green.visible {
color: #17ff2e;
}
.reveal .slides section .fragment.highlight-blue.visible {
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;
}
/*********************************************
* DEFAULT ELEMENT STYLES
*********************************************/
/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
.reveal:after {
content: '';
font-style: italic;
}
.reveal iframe {
z-index: 1;
}
/** Prevents layering issues in certain browser/transition combinations */
.reveal a {
position: relative;
}
.reveal .stretch {
max-width: none;
max-height: none;
}
.reveal pre.stretch code {
height: 100%;
max-height: 100%;
Yves Delley
a validé
box-sizing: border-box;
}
/*********************************************
* CONTROLS
*********************************************/
.reveal .controls {
display: none;
position: fixed;
width: 110px;
height: 110px;
z-index: 30;
right: 10px;
bottom: 10px;
.reveal .controls button {
padding: 0;
position: absolute;
opacity: 0.05;
width: 0;
height: 0;
background-color: transparent;
border: 12px solid transparent;
transform: scale(.9999);
transition: all 0.2s ease;
opacity: 0.7;
cursor: pointer;
}
.reveal .controls .enabled:active {
.reveal .controls .navigate-left {
top: 42px;
border-right-width: 22px;
.reveal .controls .navigate-left.fragmented {
.reveal .controls .navigate-right {
left: 74px;
top: 42px;
border-left-width: 22px;
.reveal .controls .navigate-right.fragmented {
.reveal .controls .navigate-up {
left: 42px;
border-bottom-width: 22px;
.reveal .controls .navigate-up.fragmented {
.reveal .controls .navigate-down {
left: 42px;
top: 74px;
border-top-width: 22px;
.reveal .controls .navigate-down.fragmented {
opacity: 0.3;
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
position: fixed;
display: none;
height: 3px;
width: 100%;
bottom: 0;
left: 0;
z-index: 10;
}
.reveal .progress:after {
content: '';
position: absolute;
height: 20px;
width: 100%;
top: -20px;
}
.reveal .progress span {
display: block;
height: 100%;
width: 0px;
Yves Delley
a validé
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
position: fixed;
display: block;
right: 8px;
bottom: 8px;
color: #fff;
padding: 5px;
/*********************************************
* SLIDES
*********************************************/
.reveal {
position: relative;
width: 100%;
height: 100%;
}
.reveal .slides {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
pointer-events: none;
overflow: visible;
z-index: 1;
text-align: center;
perspective: 600px;
perspective-origin: 50% 40%;
}
.reveal .slides>section {
-ms-perspective: 600px;
}
.reveal .slides>section,
.reveal .slides>section>section {
display: none;
position: absolute;
width: 100%;
padding: 20px 0px;
pointer-events: auto;
Hakim El Hattab
a validé
transform-style: flat;
Yves Delley
a validé
transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .slides section {
Yves Delley
a validé
transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"] .slides section {
Yves Delley
a validé
transition-duration: 1200ms;
}
/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
Yves Delley
a validé
transition-duration: 400ms;
}
.reveal .slides section[data-transition-speed="slow"] {
Yves Delley
a validé
transition-duration: 1200ms;
}
.reveal .slides>section.stack {
padding-top: 0;
padding-bottom: 0;
}
.reveal .slides>section.present,
.reveal .slides>section>section.present {
display: block;
z-index: 11;
opacity: 1;
}
.reveal .slides>section:empty,
.reveal .slides>section>section:empty {
pointer-events: none;
}
.reveal.center,
.reveal.center .slides,
.reveal.center .slides section {
min-height: 0 !important;
}
/* Don't allow interaction with invisible slides */
.reveal .slides>section.future,
.reveal .slides>section>section.future,
.reveal .slides>section.past,
.reveal .slides>section>section.past {
pointer-events: none;
}
.reveal.overview .slides>section,
.reveal.overview .slides>section>section {
pointer-events: auto;
}
.reveal .slides>section.past,
.reveal .slides>section.future,
.reveal .slides>section>section.past,
.reveal .slides>section>section.future {
opacity: 0;
}
/*********************************************
* Mixins for readability of transitions
@mixin transition-global($style) {
.reveal .slides section[data-transition=#{$style}],
.reveal.#{$style} .slides section:not([data-transition]) {
@content;
}
@mixin transition-stack($style) {
.reveal .slides section[data-transition=#{$style}].stack,
.reveal.#{$style} .slides section.stack {
@content;
}
}
@mixin transition-horizontal-past($style) {
.reveal .slides>section[data-transition=#{$style}].past,
.reveal .slides>section[data-transition~=#{$style}-out].past,
.reveal.#{$style} .slides>section:not([data-transition]).past {
@content;
}
@mixin transition-horizontal-future($style) {
.reveal .slides>section[data-transition=#{$style}].future,
.reveal .slides>section[data-transition~=#{$style}-in].future,
.reveal.#{$style} .slides>section:not([data-transition]).future {
@content;
}
@mixin transition-vertical-past($style) {
.reveal .slides>section>section[data-transition=#{$style}].past,
.reveal .slides>section>section[data-transition~=#{$style}-out].past,
.reveal.#{$style} .slides>section>section:not([data-transition]).past {
@content;
}
@mixin transition-vertical-future($style) {
.reveal .slides>section>section[data-transition=#{$style}].future,
.reveal .slides>section>section[data-transition~=#{$style}-in].future,
.reveal.#{$style} .slides>section>section:not([data-transition]).future {
@content;
}
/*********************************************
* SLIDE TRANSITION
* Aliased 'linear' for backwards compatibility
*********************************************/
@each $stylename in slide, linear {
.reveal.#{$stylename} section {
backface-visibility: hidden;
}
@include transition-horizontal-past(#{$stylename}) {
transform: translate(-150%, 0);
}
@include transition-horizontal-future(#{$stylename}) {
transform: translate(150%, 0);
}
@include transition-vertical-past(#{$stylename}) {
transform: translate(0, -150%);
}
@include transition-vertical-future(#{$stylename}) {
transform: translate(0, 150%);
}
}
/*********************************************
* CONVEX TRANSITION
* Aliased 'default' for backwards compatibility
*********************************************/
@each $stylename in default, convex {
@include transition-stack(#{$stylename}) {
Hakim El Hattab
a validé
transform-style: preserve-3d;
}
@include transition-horizontal-past(#{$stylename}) {
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
@include transition-horizontal-future(#{$stylename}) {
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
@include transition-vertical-past(#{$stylename}) {
transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
}
@include transition-vertical-future(#{$stylename}) {
transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
}
}
/*********************************************
* CONCAVE TRANSITION
*********************************************/
@include transition-stack(concave) {
Hakim El Hattab
a validé
transform-style: preserve-3d;
}
@include transition-horizontal-past(concave) {
Yves Delley
a validé
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
@include transition-horizontal-future(concave) {
Yves Delley
a validé
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
@include transition-vertical-past(concave) {
Yves Delley
a validé
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
@include transition-vertical-future(concave) {
Yves Delley
a validé
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}
/*********************************************
* ZOOM TRANSITION
*********************************************/
@include transition-global(zoom) {
transition-timing-function: ease;
@include transition-horizontal-past(zoom) {
visibility: hidden;
transform: scale(16);
@include transition-horizontal-future(zoom) {
visibility: hidden;
transform: scale(0.2);
@include transition-vertical-past(zoom) {
transform: translate(0, -150%);
@include transition-vertical-future(zoom) {
transform: translate(0, 150%);
}
/*********************************************
* CUBE TRANSITION
*
* WARNING:
* this is deprecated and will be removed in a
* future version.
*********************************************/
.reveal.cube .slides {
}
.reveal.cube .slides section {
padding: 30px;
min-height: 700px;
backface-visibility: hidden;
Yves Delley
a validé
box-sizing: border-box;
Hakim El Hattab
a validé
transform-style: preserve-3d;
}
.reveal.center.cube .slides section {
min-height: 0;
}
.reveal.cube .slides section:not(.stack):before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.1);
border-radius: 4px;
Yves Delley
a validé
transform: translateZ( -20px );
}
.reveal.cube .slides section:not(.stack):after {
content: '';
position: absolute;
display: block;
width: 90%;
height: 30px;
left: 5%;
bottom: 0;
background: none;
z-index: 1;
border-radius: 4px;
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
Yves Delley
a validé
transform: translateZ(-90px) rotateX( 65deg );
}
.reveal.cube .slides>section.stack {
padding: 0;
background: none;
}
.reveal.cube .slides>section.past {
Yves Delley
a validé
transform-origin: 100% 0%;
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
}
.reveal.cube .slides>section.future {
Yves Delley
a validé
transform-origin: 0% 0%;
transform: translate3d(100%, 0, 0) rotateY(90deg);
}
.reveal.cube .slides>section>section.past {
Yves Delley
a validé
transform-origin: 0% 100%;
transform: translate3d(0, -100%, 0) rotateX(90deg);
}
.reveal.cube .slides>section>section.future {
Yves Delley
a validé
transform-origin: 0% 0%;
transform: translate3d(0, 100%, 0) rotateX(-90deg);
}
/*********************************************
* PAGE TRANSITION
*
* WARNING:
* this is deprecated and will be removed in a
* future version.
*********************************************/
.reveal.page .slides {
perspective-origin: 0% 50%;
perspective: 3000px;
}
.reveal.page .slides section {
padding: 30px;
min-height: 700px;
Yves Delley
a validé
box-sizing: border-box;
Hakim El Hattab
a validé
transform-style: preserve-3d;
}
.reveal.page .slides section.past {
z-index: 12;
}
.reveal.page .slides section:not(.stack):before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.1);
Yves Delley
a validé
transform: translateZ( -20px );
}
.reveal.page .slides section:not(.stack):after {
content: '';
position: absolute;
display: block;
width: 90%;
height: 30px;
left: 5%;
bottom: 0;
background: none;
z-index: 1;
border-radius: 4px;
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
Yves Delley
a validé
-webkit-transform: translateZ(-90px) rotateX( 65deg );
}
.reveal.page .slides>section.stack {
padding: 0;
background: none;
}
.reveal.page .slides>section.past {
Yves Delley
a validé
transform-origin: 0% 0%;
transform: translate3d(-40%, 0, 0) rotateY(-80deg);
}
.reveal.page .slides>section.future {
Yves Delley
a validé
transform-origin: 100% 0%;
transform: translate3d(0, 0, 0);
}
.reveal.page .slides>section>section.past {
Yves Delley
a validé
transform-origin: 0% 0%;
transform: translate3d(0, -40%, 0) rotateX(80deg);
}
.reveal.page .slides>section>section.future {
Yves Delley
a validé
transform-origin: 0% 100%;
transform: translate3d(0, 0, 0);
}
/*********************************************
* FADE TRANSITION
*********************************************/
.reveal .slides section[data-transition=fade],
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides>section>section:not([data-transition]) {
Yves Delley
a validé
transition: opacity 0.5s;
}
.reveal.fade.overview .slides section,
Yves Delley
a validé
transition: none;
}
/*********************************************
* NO TRANSITION
*********************************************/
@include transition-global(none) {
Yves Delley
a validé
transform: none;
transition: none;
}
/*********************************************
* PAUSED MODE
*********************************************/
.reveal .pause-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
visibility: hidden;
opacity: 0;
z-index: 100;
Yves Delley
a validé
transition: all 1s ease;
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
}
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1;
}
/*********************************************
* FALLBACK
*********************************************/
.no-transforms {
overflow-y: auto;
}
.no-transforms .reveal .slides {
position: relative;
width: 80%;
height: auto !important;
top: 0;
left: 50%;
margin: 0;
text-align: center;
}
.no-transforms .reveal .controls,
.no-transforms .reveal .progress {
display: none !important;
}
.no-transforms .reveal .slides section {
display: block !important;
opacity: 1 !important;
position: relative !important;
height: auto;
min-height: 0;
top: 0;
left: -50%;
margin: 70px 0;
Yves Delley
a validé
transform: none;
}
.no-transforms .reveal .slides section section {
left: 0;
}
.reveal .no-transition,
.reveal .no-transition * {
Yves Delley
a validé
transition: none !important;
}
/*********************************************
* PER-SLIDE BACKGROUNDS
*********************************************/
position: absolute;
width: 100%;
height: 100%;
}
.reveal .slide-background {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
overflow: hidden;
background-color: rgba( 0, 0, 0, 0 );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
Yves Delley
a validé
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
.reveal .slide-background.stack {
display: block;
}
.reveal .slide-background.present {
opacity: 1;
visibility: visible;
z-index: 2;
}
.print-pdf .reveal .slide-background {
opacity: 1 !important;
visibility: visible !important;
}
/* Video backgrounds */
.reveal .slide-background video {
position: absolute;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
top: 0;
left: 0;
.reveal .slide-background[data-background-size="contain"] video {
object-fit: contain;
}
/* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=none] {
Yves Delley
a validé
transition: none;
.reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1;
backface-visibility: hidden;
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
Yves Delley
a validé
transform: translate(-100%, 0);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
Yves Delley
a validé
transform: translate(100%, 0);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
Yves Delley
a validé
transform: translate(0, -100%);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
Yves Delley
a validé
transform: translate(0, 100%);
}
/* Convex */
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
opacity: 0;
Yves Delley
a validé
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;
Yves Delley
a validé
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;
Yves Delley
a validé
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;
Yves Delley
a validé
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;
Yves Delley
a validé
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;
Yves Delley
a validé
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;
Yves Delley
a validé
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;
Yves Delley
a validé
transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);