blob: 9045428bc7b153f2f01084eadf59d9d2369da9f6 [file] [log] [blame]
JJ Allaireefa6ad42016-01-30 13:12:05 -05001/*!
2 * reveal.js
3 * http://lab.hakim.se/reveal-js
4 * MIT licensed
5 *
Bruce's Thinkpad72710882016-07-14 01:12:07 +08006 * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
JJ Allaireefa6ad42016-01-30 13:12:05 -05007 */
8
9
10/*********************************************
11 * RESET STYLES
12 *********************************************/
13
14html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
15.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
16.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
17.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
18.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
19.reveal b, .reveal u, .reveal center,
20.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
21.reveal fieldset, .reveal form, .reveal label, .reveal legend,
22.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
23.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
24.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
25.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
Bruce's Thinkpad72710882016-07-14 01:12:07 +080026.reveal time, .reveal mark, .reveal audio, .reveal video {
JJ Allaireefa6ad42016-01-30 13:12:05 -050027 margin: 0;
28 padding: 0;
29 border: 0;
30 font-size: 100%;
31 font: inherit;
32 vertical-align: baseline;
33}
34
35.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
36.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
37 display: block;
38}
39
40
41/*********************************************
42 * GLOBAL STYLES
43 *********************************************/
44
45html,
46body {
47 width: 100%;
48 height: 100%;
49 overflow: hidden;
50}
51
52body {
53 position: relative;
54 line-height: 1;
55
56 background-color: #fff;
57 color: #000;
58}
59
JJ Allaireefa6ad42016-01-30 13:12:05 -050060
61/*********************************************
62 * VIEW FRAGMENTS
63 *********************************************/
64
65.reveal .slides section .fragment {
66 opacity: 0;
67 visibility: hidden;
68 transition: all .2s ease;
69
70 &.visible {
71 opacity: 1;
72 visibility: visible;
73 }
74}
75
76.reveal .slides section .fragment.grow {
77 opacity: 1;
78 visibility: visible;
79
80 &.visible {
81 transform: scale( 1.3 );
82 }
83}
84
85.reveal .slides section .fragment.shrink {
86 opacity: 1;
87 visibility: visible;
88
89 &.visible {
90 transform: scale( 0.7 );
91 }
92}
93
94.reveal .slides section .fragment.zoom-in {
95 transform: scale( 0.1 );
96
97 &.visible {
98 transform: none;
99 }
100}
101
102.reveal .slides section .fragment.fade-out {
103 opacity: 1;
104 visibility: visible;
105
106 &.visible {
107 opacity: 0;
108 visibility: hidden;
109 }
110}
111
112.reveal .slides section .fragment.semi-fade-out {
113 opacity: 1;
114 visibility: visible;
115
116 &.visible {
117 opacity: 0.5;
118 visibility: visible;
119 }
120}
121
122.reveal .slides section .fragment.strike {
123 opacity: 1;
124 visibility: visible;
125
126 &.visible {
127 text-decoration: line-through;
128 }
129}
130
Bruce's Thinkpad72710882016-07-14 01:12:07 +0800131.reveal .slides section .fragment.fade-up {
132 transform: translate(0, 20%);
133
134 &.visible {
135 transform: translate(0, 0);
136 }
137}
138
139.reveal .slides section .fragment.fade-down {
140 transform: translate(0, -20%);
141
142 &.visible {
143 transform: translate(0, 0);
144 }
145}
146
147.reveal .slides section .fragment.fade-right {
148 transform: translate(-20%, 0);
149
150 &.visible {
151 transform: translate(0, 0);
152 }
153}
154
155.reveal .slides section .fragment.fade-left {
156 transform: translate(20%, 0);
157
158 &.visible {
159 transform: translate(0, 0);
160 }
161}
162
JJ Allaireefa6ad42016-01-30 13:12:05 -0500163.reveal .slides section .fragment.current-visible {
164 opacity: 0;
165 visibility: hidden;
166
167 &.current-fragment {
168 opacity: 1;
169 visibility: visible;
170 }
171}
172
173.reveal .slides section .fragment.highlight-red,
174.reveal .slides section .fragment.highlight-current-red,
175.reveal .slides section .fragment.highlight-green,
176.reveal .slides section .fragment.highlight-current-green,
177.reveal .slides section .fragment.highlight-blue,
178.reveal .slides section .fragment.highlight-current-blue {
179 opacity: 1;
180 visibility: visible;
181}
182 .reveal .slides section .fragment.highlight-red.visible {
183 color: #ff2c2d
184 }
185 .reveal .slides section .fragment.highlight-green.visible {
186 color: #17ff2e;
187 }
188 .reveal .slides section .fragment.highlight-blue.visible {
189 color: #1b91ff;
190 }
191
192.reveal .slides section .fragment.highlight-current-red.current-fragment {
193 color: #ff2c2d
194}
195.reveal .slides section .fragment.highlight-current-green.current-fragment {
196 color: #17ff2e;
197}
198.reveal .slides section .fragment.highlight-current-blue.current-fragment {
199 color: #1b91ff;
200}
201
202
203/*********************************************
204 * DEFAULT ELEMENT STYLES
205 *********************************************/
206
207/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
208.reveal:after {
209 content: '';
210 font-style: italic;
211}
212
213.reveal iframe {
214 z-index: 1;
215}
216
217/** Prevents layering issues in certain browser/transition combinations */
218.reveal a {
219 position: relative;
220}
221
222.reveal .stretch {
223 max-width: none;
224 max-height: none;
225}
226
227.reveal pre.stretch code {
228 height: 100%;
229 max-height: 100%;
230 box-sizing: border-box;
231}
232
233
234/*********************************************
235 * CONTROLS
236 *********************************************/
237
238.reveal .controls {
239 display: none;
240 position: fixed;
241 width: 110px;
242 height: 110px;
243 z-index: 30;
244 right: 10px;
245 bottom: 10px;
246
247 -webkit-user-select: none;
248}
249
250.reveal .controls button {
251 padding: 0;
252 position: absolute;
253 opacity: 0.05;
254 width: 0;
255 height: 0;
256 background-color: transparent;
257 border: 12px solid transparent;
258 transform: scale(.9999);
259 transition: all 0.2s ease;
260 -webkit-appearance: none;
261 -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
262}
263
264.reveal .controls .enabled {
265 opacity: 0.7;
266 cursor: pointer;
267}
268
269.reveal .controls .enabled:active {
270 margin-top: 1px;
271}
272
273 .reveal .controls .navigate-left {
274 top: 42px;
275
276 border-right-width: 22px;
277 border-right-color: #000;
278 }
279 .reveal .controls .navigate-left.fragmented {
280 opacity: 0.3;
281 }
282
283 .reveal .controls .navigate-right {
284 left: 74px;
285 top: 42px;
286
287 border-left-width: 22px;
288 border-left-color: #000;
289 }
290 .reveal .controls .navigate-right.fragmented {
291 opacity: 0.3;
292 }
293
294 .reveal .controls .navigate-up {
295 left: 42px;
296
297 border-bottom-width: 22px;
298 border-bottom-color: #000;
299 }
300 .reveal .controls .navigate-up.fragmented {
301 opacity: 0.3;
302 }
303
304 .reveal .controls .navigate-down {
305 left: 42px;
306 top: 74px;
307
308 border-top-width: 22px;
309 border-top-color: #000;
310 }
311 .reveal .controls .navigate-down.fragmented {
312 opacity: 0.3;
313 }
314
315
316/*********************************************
317 * PROGRESS BAR
318 *********************************************/
319
320.reveal .progress {
321 position: fixed;
322 display: none;
323 height: 3px;
324 width: 100%;
325 bottom: 0;
326 left: 0;
327 z-index: 10;
328
329 background-color: rgba( 0, 0, 0, 0.2 );
330}
331 .reveal .progress:after {
332 content: '';
333 display: block;
334 position: absolute;
335 height: 20px;
336 width: 100%;
337 top: -20px;
338 }
339 .reveal .progress span {
340 display: block;
341 height: 100%;
342 width: 0px;
343
344 background-color: #000;
345 transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
346 }
347
348/*********************************************
349 * SLIDE NUMBER
350 *********************************************/
351
352.reveal .slide-number {
353 position: fixed;
354 display: block;
355 right: 8px;
356 bottom: 8px;
357 z-index: 31;
358 font-family: Helvetica, sans-serif;
359 font-size: 12px;
360 line-height: 1;
361 color: #fff;
362 background-color: rgba( 0, 0, 0, 0.4 );
363 padding: 5px;
364}
365
366.reveal .slide-number-delimiter {
367 margin: 0 3px;
368}
369
370/*********************************************
371 * SLIDES
372 *********************************************/
373
374.reveal {
375 position: relative;
376 width: 100%;
377 height: 100%;
378 overflow: hidden;
379 touch-action: none;
380}
381
382.reveal .slides {
383 position: absolute;
384 width: 100%;
385 height: 100%;
386 top: 0;
387 right: 0;
388 bottom: 0;
389 left: 0;
390 margin: auto;
391
392 overflow: visible;
393 z-index: 1;
394 text-align: center;
395 perspective: 600px;
396 perspective-origin: 50% 40%;
397}
398
399.reveal .slides>section {
400 -ms-perspective: 600px;
401}
402
403.reveal .slides>section,
404.reveal .slides>section>section {
405 display: none;
406 position: absolute;
407 width: 100%;
408 padding: 20px 0px;
409
410 z-index: 10;
411 transform-style: preserve-3d;
412 transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
413 transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
414 visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
415 opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
416}
417
418/* Global transition speed settings */
419.reveal[data-transition-speed="fast"] .slides section {
420 transition-duration: 400ms;
421}
422.reveal[data-transition-speed="slow"] .slides section {
423 transition-duration: 1200ms;
424}
425
426/* Slide-specific transition speed overrides */
427.reveal .slides section[data-transition-speed="fast"] {
428 transition-duration: 400ms;
429}
430.reveal .slides section[data-transition-speed="slow"] {
431 transition-duration: 1200ms;
432}
433
434.reveal .slides>section.stack {
435 padding-top: 0;
436 padding-bottom: 0;
437}
438
439.reveal .slides>section.present,
440.reveal .slides>section>section.present {
441 display: block;
442 z-index: 11;
443 opacity: 1;
444}
445
446.reveal.center,
447.reveal.center .slides,
448.reveal.center .slides section {
449 min-height: 0 !important;
450}
451
452/* Don't allow interaction with invisible slides */
453.reveal .slides>section.future,
454.reveal .slides>section>section.future,
455.reveal .slides>section.past,
456.reveal .slides>section>section.past {
457 pointer-events: none;
458}
459
460.reveal.overview .slides>section,
461.reveal.overview .slides>section>section {
462 pointer-events: auto;
463}
464
465.reveal .slides>section.past,
466.reveal .slides>section.future,
467.reveal .slides>section>section.past,
468.reveal .slides>section>section.future {
469 opacity: 0;
470}
471
472
473/*********************************************
474 * Mixins for readability of transitions
475 *********************************************/
476
477@mixin transition-global($style) {
478 .reveal .slides section[data-transition=#{$style}],
479 .reveal.#{$style} .slides section:not([data-transition]) {
480 @content;
481 }
482}
483@mixin transition-horizontal-past($style) {
484 .reveal .slides>section[data-transition=#{$style}].past,
485 .reveal .slides>section[data-transition~=#{$style}-out].past,
486 .reveal.#{$style} .slides>section:not([data-transition]).past {
487 @content;
488 }
489}
490@mixin transition-horizontal-future($style) {
491 .reveal .slides>section[data-transition=#{$style}].future,
492 .reveal .slides>section[data-transition~=#{$style}-in].future,
493 .reveal.#{$style} .slides>section:not([data-transition]).future {
494 @content;
495 }
496}
497
498@mixin transition-vertical-past($style) {
499 .reveal .slides>section>section[data-transition=#{$style}].past,
500 .reveal .slides>section>section[data-transition~=#{$style}-out].past,
501 .reveal.#{$style} .slides>section>section:not([data-transition]).past {
502 @content;
503 }
504}
505@mixin transition-vertical-future($style) {
506 .reveal .slides>section>section[data-transition=#{$style}].future,
507 .reveal .slides>section>section[data-transition~=#{$style}-in].future,
508 .reveal.#{$style} .slides>section>section:not([data-transition]).future {
509 @content;
510 }
511}
512
513/*********************************************
514 * SLIDE TRANSITION
515 * Aliased 'linear' for backwards compatibility
516 *********************************************/
517
518@each $stylename in slide, linear {
519 .reveal.#{$stylename} section {
520 backface-visibility: hidden;
521 }
522 @include transition-horizontal-past(#{$stylename}) {
523 transform: translate(-150%, 0);
524 }
525 @include transition-horizontal-future(#{$stylename}) {
526 transform: translate(150%, 0);
527 }
528 @include transition-vertical-past(#{$stylename}) {
529 transform: translate(0, -150%);
530 }
531 @include transition-vertical-future(#{$stylename}) {
532 transform: translate(0, 150%);
533 }
534}
535
536/*********************************************
537 * CONVEX TRANSITION
538 * Aliased 'default' for backwards compatibility
539 *********************************************/
540
541@each $stylename in default, convex {
542 @include transition-horizontal-past(#{$stylename}) {
543 transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
544 }
545 @include transition-horizontal-future(#{$stylename}) {
546 transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
547 }
548 @include transition-vertical-past(#{$stylename}) {
549 transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
550 }
551 @include transition-vertical-future(#{$stylename}) {
552 transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
553 }
554}
555
556/*********************************************
557 * CONCAVE TRANSITION
558 *********************************************/
559
560@include transition-horizontal-past(concave) {
561 transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
562}
563@include transition-horizontal-future(concave) {
564 transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
565}
566@include transition-vertical-past(concave) {
567 transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
568}
569@include transition-vertical-future(concave) {
570 transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
571}
572
573
574/*********************************************
575 * ZOOM TRANSITION
576 *********************************************/
577
578@include transition-global(zoom) {
579 transition-timing-function: ease;
580}
581@include transition-horizontal-past(zoom) {
582 visibility: hidden;
583 transform: scale(16);
584}
585@include transition-horizontal-future(zoom) {
586 visibility: hidden;
587 transform: scale(0.2);
588}
589@include transition-vertical-past(zoom) {
590 transform: translate(0, -150%);
591}
592@include transition-vertical-future(zoom) {
593 transform: translate(0, 150%);
594}
595
596
597/*********************************************
598 * CUBE TRANSITION
599 *********************************************/
600
601.reveal.cube .slides {
602 perspective: 1300px;
603}
604
605.reveal.cube .slides section {
606 padding: 30px;
607 min-height: 700px;
608 backface-visibility: hidden;
609 box-sizing: border-box;
610}
611 .reveal.center.cube .slides section {
612 min-height: 0;
613 }
614 .reveal.cube .slides section:not(.stack):before {
615 content: '';
616 position: absolute;
617 display: block;
618 width: 100%;
619 height: 100%;
620 left: 0;
621 top: 0;
622 background: rgba(0,0,0,0.1);
623 border-radius: 4px;
624 transform: translateZ( -20px );
625 }
626 .reveal.cube .slides section:not(.stack):after {
627 content: '';
628 position: absolute;
629 display: block;
630 width: 90%;
631 height: 30px;
632 left: 5%;
633 bottom: 0;
634 background: none;
635 z-index: 1;
636
637 border-radius: 4px;
638 box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
639 transform: translateZ(-90px) rotateX( 65deg );
640 }
641
642.reveal.cube .slides>section.stack {
643 padding: 0;
644 background: none;
645}
646
647.reveal.cube .slides>section.past {
648 transform-origin: 100% 0%;
649 transform: translate3d(-100%, 0, 0) rotateY(-90deg);
650}
651
652.reveal.cube .slides>section.future {
653 transform-origin: 0% 0%;
654 transform: translate3d(100%, 0, 0) rotateY(90deg);
655}
656
657.reveal.cube .slides>section>section.past {
658 transform-origin: 0% 100%;
659 transform: translate3d(0, -100%, 0) rotateX(90deg);
660}
661
662.reveal.cube .slides>section>section.future {
663 transform-origin: 0% 0%;
664 transform: translate3d(0, 100%, 0) rotateX(-90deg);
665}
666
667
668/*********************************************
669 * PAGE TRANSITION
670 *********************************************/
671
672.reveal.page .slides {
673 perspective-origin: 0% 50%;
674 perspective: 3000px;
675}
676
677.reveal.page .slides section {
678 padding: 30px;
679 min-height: 700px;
680 box-sizing: border-box;
681}
682 .reveal.page .slides section.past {
683 z-index: 12;
684 }
685 .reveal.page .slides section:not(.stack):before {
686 content: '';
687 position: absolute;
688 display: block;
689 width: 100%;
690 height: 100%;
691 left: 0;
692 top: 0;
693 background: rgba(0,0,0,0.1);
694 transform: translateZ( -20px );
695 }
696 .reveal.page .slides section:not(.stack):after {
697 content: '';
698 position: absolute;
699 display: block;
700 width: 90%;
701 height: 30px;
702 left: 5%;
703 bottom: 0;
704 background: none;
705 z-index: 1;
706
707 border-radius: 4px;
708 box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
709
710 -webkit-transform: translateZ(-90px) rotateX( 65deg );
711 }
712
713.reveal.page .slides>section.stack {
714 padding: 0;
715 background: none;
716}
717
718.reveal.page .slides>section.past {
719 transform-origin: 0% 0%;
720 transform: translate3d(-40%, 0, 0) rotateY(-80deg);
721}
722
723.reveal.page .slides>section.future {
724 transform-origin: 100% 0%;
725 transform: translate3d(0, 0, 0);
726}
727
728.reveal.page .slides>section>section.past {
729 transform-origin: 0% 0%;
730 transform: translate3d(0, -40%, 0) rotateX(80deg);
731}
732
733.reveal.page .slides>section>section.future {
734 transform-origin: 0% 100%;
735 transform: translate3d(0, 0, 0);
736}
737
738
739/*********************************************
740 * FADE TRANSITION
741 *********************************************/
742
743.reveal .slides section[data-transition=fade],
744.reveal.fade .slides section:not([data-transition]),
745.reveal.fade .slides>section>section:not([data-transition]) {
746 transform: none;
747 transition: opacity 0.5s;
748}
749
750
751.reveal.fade.overview .slides section,
752.reveal.fade.overview .slides>section>section {
753 transition: none;
754}
755
756
757/*********************************************
758 * NO TRANSITION
759 *********************************************/
760
761@include transition-global(none) {
762 transform: none;
763 transition: none;
764}
765
766
767/*********************************************
768 * PAUSED MODE
769 *********************************************/
770
771.reveal .pause-overlay {
772 position: absolute;
773 top: 0;
774 left: 0;
775 width: 100%;
776 height: 100%;
777 background: black;
778 visibility: hidden;
779 opacity: 0;
780 z-index: 100;
781 transition: all 1s ease;
782}
783.reveal.paused .pause-overlay {
784 visibility: visible;
785 opacity: 1;
786}
787
788
789/*********************************************
790 * FALLBACK
791 *********************************************/
792
793.no-transforms {
794 overflow-y: auto;
795}
796
797.no-transforms .reveal .slides {
798 position: relative;
799 width: 80%;
800 height: auto !important;
801 top: 0;
802 left: 50%;
803 margin: 0;
804 text-align: center;
805}
806
807.no-transforms .reveal .controls,
808.no-transforms .reveal .progress {
809 display: none !important;
810}
811
812.no-transforms .reveal .slides section {
813 display: block !important;
814 opacity: 1 !important;
815 position: relative !important;
816 height: auto;
817 min-height: 0;
818 top: 0;
819 left: -50%;
820 margin: 70px 0;
821 transform: none;
822}
823
824.no-transforms .reveal .slides section section {
825 left: 0;
826}
827
828.reveal .no-transition,
829.reveal .no-transition * {
830 transition: none !important;
831}
832
833
834/*********************************************
835 * PER-SLIDE BACKGROUNDS
836 *********************************************/
837
838.reveal .backgrounds {
839 position: absolute;
840 width: 100%;
841 height: 100%;
842 top: 0;
843 left: 0;
844 perspective: 600px;
845}
846 .reveal .slide-background {
847 display: none;
848 position: absolute;
849 width: 100%;
850 height: 100%;
851 opacity: 0;
852 visibility: hidden;
853
854 background-color: rgba( 0, 0, 0, 0 );
855 background-position: 50% 50%;
856 background-repeat: no-repeat;
857 background-size: cover;
858
859 transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
860 }
861
862 .reveal .slide-background.stack {
863 display: block;
864 }
865
866 .reveal .slide-background.present {
867 opacity: 1;
868 visibility: visible;
869 }
870
871 .print-pdf .reveal .slide-background {
872 opacity: 1 !important;
873 visibility: visible !important;
874 }
875
876/* Video backgrounds */
877.reveal .slide-background video {
878 position: absolute;
879 width: 100%;
880 height: 100%;
881 max-width: none;
882 max-height: none;
883 top: 0;
884 left: 0;
885}
886
887/* Immediate transition style */
888.reveal[data-background-transition=none]>.backgrounds .slide-background,
889.reveal>.backgrounds .slide-background[data-background-transition=none] {
890 transition: none;
891}
892
893/* Slide */
894.reveal[data-background-transition=slide]>.backgrounds .slide-background,
895.reveal>.backgrounds .slide-background[data-background-transition=slide] {
896 opacity: 1;
897 backface-visibility: hidden;
898}
899 .reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
900 .reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
901 transform: translate(-100%, 0);
902 }
903 .reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
904 .reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
905 transform: translate(100%, 0);
906 }
907
908 .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
909 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
910 transform: translate(0, -100%);
911 }
912 .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
913 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
914 transform: translate(0, 100%);
915 }
916
917
918/* Convex */
919.reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
920.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
921 opacity: 0;
922 transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
923}
924.reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
925.reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
926 opacity: 0;
927 transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
928}
929
930.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
931.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
932 opacity: 0;
933 transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
934}
935.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
936.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
937 opacity: 0;
938 transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
939}
940
941
942/* Concave */
943.reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
944.reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
945 opacity: 0;
946 transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
947}
948.reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
949.reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
950 opacity: 0;
951 transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
952}
953
954.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
955.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
956 opacity: 0;
957 transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
958}
959.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
960.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
961 opacity: 0;
962 transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
963}
964
965/* Zoom */
966.reveal[data-background-transition=zoom]>.backgrounds .slide-background,
967.reveal>.backgrounds .slide-background[data-background-transition=zoom] {
968 transition-timing-function: ease;
969}
970
971.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
972.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
973 opacity: 0;
974 visibility: hidden;
975 transform: scale(16);
976}
977.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
978.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
979 opacity: 0;
980 visibility: hidden;
981 transform: scale(0.2);
982}
983
984.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
985.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
986 opacity: 0;
987 visibility: hidden;
988 transform: scale(16);
989}
990.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
991.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
992 opacity: 0;
993 visibility: hidden;
994 transform: scale(0.2);
995}
996
997
998/* Global transition speed settings */
999.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
1000 transition-duration: 400ms;
1001}
1002.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
1003 transition-duration: 1200ms;
1004}
1005
1006
1007/*********************************************
1008 * OVERVIEW
1009 *********************************************/
1010
1011.reveal.overview {
1012 perspective-origin: 50% 50%;
1013 perspective: 700px;
1014
1015 .slides section {
Bruce's Thinkpad72710882016-07-14 01:12:07 +08001016 height: 100%;
1017 top: 0 !important;
JJ Allaireefa6ad42016-01-30 13:12:05 -05001018 opacity: 1 !important;
1019 overflow: hidden;
1020 visibility: visible !important;
1021 cursor: pointer;
1022 box-sizing: border-box;
1023 }
1024 .slides section:hover,
1025 .slides section.present {
1026 outline: 10px solid rgba(150,150,150,0.4);
1027 outline-offset: 10px;
1028 }
1029 .slides section .fragment {
1030 opacity: 1;
1031 transition: none;
1032 }
1033 .slides section:after,
1034 .slides section:before {
1035 display: none !important;
1036 }
1037 .slides>section.stack {
1038 padding: 0;
1039 top: 0 !important;
1040 background: none;
1041 outline: none;
1042 overflow: visible;
1043 }
1044
1045 .backgrounds {
1046 perspective: inherit;
1047 }
1048
1049 .backgrounds .slide-background {
1050 opacity: 1;
1051 visibility: visible;
1052
1053 // This can't be applied to the slide itself in Safari
1054 outline: 10px solid rgba(150,150,150,0.1);
1055 outline-offset: 10px;
1056 }
1057}
1058
1059// Disable transitions transitions while we're activating
1060// or deactivating the overview mode.
1061.reveal.overview .slides section,
1062.reveal.overview-deactivating .slides section {
1063 transition: none;
1064}
1065
1066.reveal.overview .backgrounds .slide-background,
1067.reveal.overview-deactivating .backgrounds .slide-background {
1068 transition: none;
1069}
1070
1071.reveal.overview-animated .slides {
1072 transition: transform 0.4s ease;
1073}
1074
1075
1076/*********************************************
1077 * RTL SUPPORT
1078 *********************************************/
1079
1080.reveal.rtl .slides,
1081.reveal.rtl .slides h1,
1082.reveal.rtl .slides h2,
1083.reveal.rtl .slides h3,
1084.reveal.rtl .slides h4,
1085.reveal.rtl .slides h5,
1086.reveal.rtl .slides h6 {
1087 direction: rtl;
1088 font-family: sans-serif;
1089}
1090
1091.reveal.rtl pre,
1092.reveal.rtl code {
1093 direction: ltr;
1094}
1095
1096.reveal.rtl ol,
1097.reveal.rtl ul {
1098 text-align: right;
1099}
1100
1101.reveal.rtl .progress span {
1102 float: right
1103}
1104
1105/*********************************************
1106 * PARALLAX BACKGROUND
1107 *********************************************/
1108
1109.reveal.has-parallax-background .backgrounds {
1110 transition: all 0.8s ease;
1111}
1112
1113/* Global transition speed settings */
1114.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
1115 transition-duration: 400ms;
1116}
1117.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
1118 transition-duration: 1200ms;
1119}
1120
1121
1122/*********************************************
1123 * LINK PREVIEW OVERLAY
1124 *********************************************/
1125
1126.reveal .overlay {
1127 position: absolute;
1128 top: 0;
1129 left: 0;
1130 width: 100%;
1131 height: 100%;
1132 z-index: 1000;
1133 background: rgba( 0, 0, 0, 0.9 );
1134 opacity: 0;
1135 visibility: hidden;
1136 transition: all 0.3s ease;
1137}
1138 .reveal .overlay.visible {
1139 opacity: 1;
1140 visibility: visible;
1141 }
1142
1143 .reveal .overlay .spinner {
1144 position: absolute;
1145 display: block;
1146 top: 50%;
1147 left: 50%;
1148 width: 32px;
1149 height: 32px;
1150 margin: -16px 0 0 -16px;
1151 z-index: 10;
1152 background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
1153
1154 visibility: visible;
1155 opacity: 0.6;
1156 transition: all 0.3s ease;
1157 }
1158
1159 .reveal .overlay header {
1160 position: absolute;
1161 left: 0;
1162 top: 0;
1163 width: 100%;
1164 height: 40px;
1165 z-index: 2;
1166 border-bottom: 1px solid #222;
1167 }
1168 .reveal .overlay header a {
1169 display: inline-block;
1170 width: 40px;
1171 height: 40px;
1172 padding: 0 10px;
1173 float: right;
1174 opacity: 0.6;
1175
1176 box-sizing: border-box;
1177 }
1178 .reveal .overlay header a:hover {
1179 opacity: 1;
1180 }
1181 .reveal .overlay header a .icon {
1182 display: inline-block;
1183 width: 20px;
1184 height: 20px;
1185
1186 background-position: 50% 50%;
1187 background-size: 100%;
1188 background-repeat: no-repeat;
1189 }
1190 .reveal .overlay header a.close .icon {
1191 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
1192 }
1193 .reveal .overlay header a.external .icon {
1194 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
1195 }
1196
1197 .reveal .overlay .viewport {
1198 position: absolute;
Bruce's Thinkpad72710882016-07-14 01:12:07 +08001199 display: flex;
JJ Allaireefa6ad42016-01-30 13:12:05 -05001200 top: 40px;
1201 right: 0;
1202 bottom: 0;
1203 left: 0;
1204 }
1205
1206 .reveal .overlay.overlay-preview .viewport iframe {
1207 width: 100%;
1208 height: 100%;
1209 max-width: 100%;
1210 max-height: 100%;
1211 border: 0;
1212
1213 opacity: 0;
1214 visibility: hidden;
1215 transition: all 0.3s ease;
1216 }
1217
1218 .reveal .overlay.overlay-preview.loaded .viewport iframe {
1219 opacity: 1;
1220 visibility: visible;
1221 }
1222
1223 .reveal .overlay.overlay-preview.loaded .spinner {
1224 opacity: 0;
1225 visibility: hidden;
1226 transform: scale(0.2);
1227 }
1228
1229 .reveal .overlay.overlay-help .viewport {
1230 overflow: auto;
1231 color: #fff;
1232 }
1233
1234 .reveal .overlay.overlay-help .viewport .viewport-inner {
1235 width: 600px;
Bruce's Thinkpad72710882016-07-14 01:12:07 +08001236 margin: auto;
1237 padding: 20px 20px 80px 20px;
JJ Allaireefa6ad42016-01-30 13:12:05 -05001238 text-align: center;
1239 letter-spacing: normal;
1240 }
1241
1242 .reveal .overlay.overlay-help .viewport .viewport-inner .title {
1243 font-size: 20px;
1244 }
1245
1246 .reveal .overlay.overlay-help .viewport .viewport-inner table {
1247 border: 1px solid #fff;
1248 border-collapse: collapse;
Bruce's Thinkpad72710882016-07-14 01:12:07 +08001249 font-size: 16px;
JJ Allaireefa6ad42016-01-30 13:12:05 -05001250 }
1251
1252 .reveal .overlay.overlay-help .viewport .viewport-inner table th,
1253 .reveal .overlay.overlay-help .viewport .viewport-inner table td {
1254 width: 200px;
Bruce's Thinkpad72710882016-07-14 01:12:07 +08001255 padding: 14px;
JJ Allaireefa6ad42016-01-30 13:12:05 -05001256 border: 1px solid #fff;
1257 vertical-align: middle;
1258 }
1259
1260 .reveal .overlay.overlay-help .viewport .viewport-inner table th {
1261 padding-top: 20px;
1262 padding-bottom: 20px;
1263 }
1264
1265
1266
1267/*********************************************
1268 * PLAYBACK COMPONENT
1269 *********************************************/
1270
1271.reveal .playback {
1272 position: fixed;
1273 left: 15px;
1274 bottom: 20px;
1275 z-index: 30;
1276 cursor: pointer;
1277 transition: all 400ms ease;
1278}
1279
1280.reveal.overview .playback {
1281 opacity: 0;
1282 visibility: hidden;
1283}
1284
1285
1286/*********************************************
1287 * ROLLING LINKS
1288 *********************************************/
1289
1290.reveal .roll {
1291 display: inline-block;
1292 line-height: 1.2;
1293 overflow: hidden;
1294
1295 vertical-align: top;
1296 perspective: 400px;
1297 perspective-origin: 50% 50%;
1298}
1299 .reveal .roll:hover {
1300 background: none;
1301 text-shadow: none;
1302 }
1303.reveal .roll span {
1304 display: block;
1305 position: relative;
1306 padding: 0 2px;
1307
1308 pointer-events: none;
1309 transition: all 400ms ease;
1310 transform-origin: 50% 0%;
1311 transform-style: preserve-3d;
1312 backface-visibility: hidden;
1313}
1314 .reveal .roll:hover span {
1315 background: rgba(0,0,0,0.5);
1316 transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
1317 }
1318.reveal .roll span:after {
1319 content: attr(data-title);
1320
1321 display: block;
1322 position: absolute;
1323 left: 0;
1324 top: 0;
1325 padding: 0 2px;
1326 backface-visibility: hidden;
1327 transform-origin: 50% 0%;
1328 transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
1329}
1330
1331
1332/*********************************************
1333 * SPEAKER NOTES
1334 *********************************************/
1335
1336// Hide on-page notes
1337.reveal aside.notes {
1338 display: none;
1339}
1340
1341// An interface element that can optionally be used to show the
1342// speaker notes to all viewers, on top of the presentation
1343.reveal .speaker-notes {
1344 display: none;
1345 position: absolute;
1346 width: 70%;
1347 max-height: 15%;
1348 left: 15%;
1349 bottom: 26px;
1350 padding: 10px;
1351 z-index: 1;
1352 font-size: 18px;
1353 line-height: 1.4;
1354 color: #fff;
1355 background-color: rgba(0,0,0,0.5);
1356 overflow: auto;
1357 box-sizing: border-box;
1358 text-align: left;
1359 font-family: Helvetica, sans-serif;
1360 -webkit-overflow-scrolling: touch;
1361}
1362
1363.reveal .speaker-notes.visible:not(:empty) {
1364 display: block;
1365}
1366
1367@media screen and (max-width: 1024px) {
1368 .reveal .speaker-notes {
1369 font-size: 14px;
1370 }
1371}
1372
1373@media screen and (max-width: 600px) {
1374 .reveal .speaker-notes {
1375 width: 90%;
1376 left: 5%;
1377 }
1378}
1379
1380
1381/*********************************************
1382 * ZOOM PLUGIN
1383 *********************************************/
1384
1385.zoomed .reveal *,
1386.zoomed .reveal *:before,
1387.zoomed .reveal *:after {
1388 backface-visibility: visible !important;
1389}
1390
1391.zoomed .reveal .progress,
1392.zoomed .reveal .controls {
1393 opacity: 0;
1394}
1395
1396.zoomed .reveal .roll span {
1397 background: none;
1398}
1399
1400.zoomed .reveal .roll span:after {
1401 visibility: hidden;
1402}