reveal.scss 41.2 KB
Newer Older
1
2
3
4
5
/*!
 * reveal.js
 * http://lab.hakim.se/reveal-js
 * MIT licensed
 *
Hakim El Hattab's avatar
2017    
Hakim El Hattab committed
6
 * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
7
8
9
10
11
12
13
14
15
16
17
18
 */


/*********************************************
 * 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,
Yves Delley's avatar
Yves Delley committed
19
.reveal b, .reveal u, .reveal center,
20
21
22
23
24
25
.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,
26
.reveal time, .reveal mark, .reveal audio, .reveal video {
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
	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;
Yves Delley's avatar
Yves Delley committed
55
56
57

	background-color: #fff;
	color: #000;
58
59
60
61
62
63
64
65
66
}


/*********************************************
 * VIEW FRAGMENTS
 *********************************************/

.reveal .slides section .fragment {
	opacity: 0;
Yves Delley's avatar
Yves Delley committed
67
	visibility: hidden;
68
	transition: all .2s ease;
69
70

	&.visible {
71
		opacity: 1;
72
		visibility: inherit;
73
	}
74
}
75
76
77

.reveal .slides section .fragment.grow {
	opacity: 1;
78
	visibility: inherit;
79
80

	&.visible {
81
		transform: scale( 1.3 );
82
	}
83
}
84
85
86

.reveal .slides section .fragment.shrink {
	opacity: 1;
87
	visibility: inherit;
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
103

.reveal .slides section .fragment.fade-out {
	opacity: 1;
104
	visibility: inherit;
105
106

	&.visible {
107
		opacity: 0;
Yves Delley's avatar
Yves Delley committed
108
		visibility: hidden;
109
	}
110
}
111
112
113

.reveal .slides section .fragment.semi-fade-out {
	opacity: 1;
114
	visibility: inherit;
115
116

	&.visible {
117
		opacity: 0.5;
118
		visibility: inherit;
119
	}
120
121
122
123
}

.reveal .slides section .fragment.strike {
	opacity: 1;
124
	visibility: inherit;
125
126
127
128
129

	&.visible {
		text-decoration: line-through;
	}
}
130

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);
	}
}

163
.reveal .slides section .fragment.current-visible {
Yves Delley's avatar
Yves Delley committed
164
165
	opacity: 0;
	visibility: hidden;
166
167

	&.current-fragment {
Yves Delley's avatar
Yves Delley committed
168
		opacity: 1;
169
		visibility: inherit;
Yves Delley's avatar
Yves Delley committed
170
	}
171
}
172
173
174
175
176
177
178
179

.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;
180
	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;
}

Yves Delley's avatar
Yves Delley committed
222
223
224
.reveal .stretch {
	max-width: none;
	max-height: none;
225
226
227
228
229
}

.reveal pre.stretch code {
	height: 100%;
	max-height: 100%;
230
	box-sizing: border-box;
231
232
233
234
235
236
237
}


/*********************************************
 * CONTROLS
 *********************************************/

238
239
240
241
242
243
244
245
246
247
248
249
@keyframes bounce-right {
	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
	20% {transform: translateX(10px);}
	30% {transform: translateX(-5px);}
}

@keyframes bounce-down {
	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
	20% {transform: translateY(10px);}
	30% {transform: translateY(-5px);}
}

250
.reveal .controls {
251
252
	$size: 46px;
	$length: floor($size * 0.7);
253
	$thickness: 6px;
Hakim El Hattab's avatar
Hakim El Hattab committed
254
255
256
	$angle: 44deg;
	$angleHover: 40deg;
	$angleActive: 36deg;
257
258
	$spacing: 12px;
	$innerSpacing: 18px;
259

260
	@mixin arrowTransform( $angle ) {
261
		&:before {
Hakim El Hattab's avatar
Hakim El Hattab committed
262
			transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( $angle );
263
264
265
		}

		&:after {
Hakim El Hattab's avatar
Hakim El Hattab committed
266
			transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( -$angle );
267
		}
268
269
270
271
	}

	display: none;
	position: absolute;
272
273
274
275
	top: auto;
	bottom: $spacing;
	right: $spacing;
	left: auto;
276
	z-index: 1;
277
	color: #fff;
278
	pointer-events: none;
279
280
281
282
283
284
285
286

	button {
		position: absolute;
		padding: 0;
		background-color: transparent;
		border: 0;
		outline: 0;
		cursor: pointer;
287
		color: currentColor;
288
289
290
		transform: scale(.9999);
		transition: all 0.2s ease;
		z-index: 2; // above slides
291
		pointer-events: auto;
292
293
294
295

		visibility: hidden;
		opacity: 0;

296
297
298
299
		-webkit-appearance: none;
		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	}

300
301
	.pagination-arrow:before,
	.pagination-arrow:after {
302
303
		content: '';
		position: absolute;
304
		top: 0;
305
		left: 0;
306
		width: $length;
307
		height: $thickness;
308
		border-radius: $thickness/2;
309
		background-color: currentColor;
310

311
		transition: all 0.15s ease, background-color 0.8s ease;
312
		transform-origin: $thickness/2 50%;
Hakim El Hattab's avatar
Hakim El Hattab committed
313
		will-change: transform;
314
315
	}

316
317
318
319
320
	.pagination-arrow {
		position: relative;
		width: $size;
		height: $size;

321
		@include arrowTransform( $angle );
322
323

		&:hover {
324
			@include arrowTransform( $angleHover );
325
326
327
		}

		&:active {
328
			@include arrowTransform( $angleActive );
329
330
331
332
		}
	}

	.navigate-left {
333
334
		right: $size + $innerSpacing*2;
		bottom: $innerSpacing;
335
336
337
338

		.pagination-arrow {
			transform: translateY(-50%);
		}
339
340
341
	}

	.navigate-right {
342
343
		right: 0;
		bottom: $innerSpacing;
344
345
346
347
348
349
350
351

		.pagination-arrow {
			transform: translateY(-50%) rotate( 180deg );
		}

		&.bounce {
			animation: bounce-right 2s 50 both ease-out;
		}
352
353
354
	}

	.navigate-up {
355
356
		right: $innerSpacing;
		bottom: $size + $innerSpacing*2;
357
358
359
360

		.pagination-arrow {
			transform: translateX(-50%) rotate( 90deg );
		}
361
362
363
	}

	.navigate-down {
364
365
		right: $innerSpacing;
		bottom: 0;
366
367
368
369
370
371
372
373

		.pagination-arrow {
			transform: translateX(-50%) rotate( -90deg );
		}

		&.bounce {
			animation: bounce-down 2s 50 both ease-out;
		}
374
	}
375

376
	// Back arrow style: "faded":
377
378
	// Strongly deemphasizes backwards navigation in favor of drawing
	// attention to forwards navigation
379
380
	&[data-controls-back-arrows="faded"] .navigate-left.enabled,
	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
381
382
383
384
385
386
387
		opacity: 0.3;

		&:hover {
			opacity: 1;
		}
	}

388
389
390
391
392
393
394
395
	// Back arrow style: "hidden":
	// Never shows any arrows for backwards navigation
	&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
		opacity: 0;
		visibility: hidden;
	}

396
397
	// Any control button that can be clicked is "enabled"
	.enabled {
398
		visibility: visible;
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
		opacity: 0.7;
		cursor: pointer;
	}

	// Any control button that leads to showing or hiding
	// a fragment
	.enabled.fragmented {
		opacity: 0.3;
	}

	.enabled:hover,
	.enabled.fragmented:hover {
		opacity: 1;
	}

414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
	@media screen and (min-width: 500px) {

		$spacing: 8px;

		&[data-controls-layout="edges"] {
			& {
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}

			.navigate-left,
			.navigate-right,
			.navigate-up,
			.navigate-down {
				bottom: auto;
				right: auto;
			}

			.navigate-left {
				top: 50%;
				left: $spacing;
			}

			.navigate-right {
				top: 50%;
				right: $spacing;
			}

			.navigate-up {
				top: $spacing;
				left: 50%;
			}

			.navigate-down {
				bottom: $spacing;
				left: 50%;
			}
453
454
		}

455
	}
456
}
457

458
459
460
461
462
// Adjust the layout when there are no vertical slides
.reveal:not(.has-vertical-slides) .controls .navigate-left,
.reveal:not(.has-vertical-slides) .controls .navigate-right {
	bottom: 0;
}
463

464
465
466
.reveal:not(.has-horizontal-slides) .controls .navigate-up,
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
	right: 0;
467
}
468

469
470
.reveal.has-dark-background .controls .pagination-arrow:after,
.reveal.has-dark-background .controls .pagination-arrow:before {
471
472
473
	background-color: #fff;
}

474
475
.reveal.has-light-background .controls .pagination-arrow:after,
.reveal.has-light-background .controls .pagination-arrow:before {
476
477
478
	background-color: #000;
}

479
480
481
482
483
484
485
486
487
488
489
490
491

/*********************************************
 * PROGRESS BAR
 *********************************************/

.reveal .progress {
	position: fixed;
	display: none;
	height: 3px;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 10;
Yves Delley's avatar
Yves Delley committed
492
493

	background-color: rgba( 0, 0, 0, 0.2 );
494
495
496
}
	.reveal .progress:after {
		content: '';
Yves Delley's avatar
Yves Delley committed
497
		display: block;
498
		position: absolute;
Hakim El Hattab's avatar
Hakim El Hattab committed
499
		height: 10px;
500
		width: 100%;
Hakim El Hattab's avatar
Hakim El Hattab committed
501
		top: -10px;
502
503
504
505
506
	}
	.reveal .progress span {
		display: block;
		height: 100%;
		width: 0px;
Yves Delley's avatar
Yves Delley committed
507
508

		background-color: #000;
509
		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
510
511
512
513
514
515
516
517
518
	}

/*********************************************
 * SLIDE NUMBER
 *********************************************/

.reveal .slide-number {
	position: fixed;
	display: block;
519
520
	right: 8px;
	bottom: 8px;
521
	z-index: 31;
Hakim El Hattab's avatar
Hakim El Hattab committed
522
	font-family: Helvetica, sans-serif;
523
	font-size: 12px;
Hakim El Hattab's avatar
Hakim El Hattab committed
524
	line-height: 1;
525
	color: #fff;
Hakim El Hattab's avatar
Hakim El Hattab committed
526
	background-color: rgba( 0, 0, 0, 0.4 );
527
	padding: 5px;
528
529
}

Hakim El Hattab's avatar
Hakim El Hattab committed
530
.reveal .slide-number-delimiter {
531
	margin: 0 3px;
Hakim El Hattab's avatar
Hakim El Hattab committed
532
533
}

534
535
536
537
538
539
540
541
/*********************************************
 * SLIDES
 *********************************************/

.reveal {
	position: relative;
	width: 100%;
	height: 100%;
542
	overflow: hidden;
Yves Delley's avatar
Yves Delley committed
543
	touch-action: none;
544
545
546
547
548
549
}

.reveal .slides {
	position: absolute;
	width: 100%;
	height: 100%;
Yves Delley's avatar
Yves Delley committed
550
551
552
553
554
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
555
	pointer-events: none;
556
557
558
559

	overflow: visible;
	z-index: 1;
	text-align: center;
560
561
	perspective: 600px;
	perspective-origin: 50% 40%;
562
563
564
565
566
567
568
569
570
571
572
573
}

.reveal .slides>section {
	-ms-perspective: 600px;
}

.reveal .slides>section,
.reveal .slides>section>section {
	display: none;
	position: absolute;
	width: 100%;
	padding: 20px 0px;
574
	pointer-events: auto;
575
576

	z-index: 10;
577
	transform-style: flat;
578
	transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
579
580
581
				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);
582
583
584
585
}

/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .slides section {
586
	transition-duration: 400ms;
587
588
}
.reveal[data-transition-speed="slow"] .slides section {
589
	transition-duration: 1200ms;
590
591
592
593
}

/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
594
	transition-duration: 400ms;
595
596
}
.reveal .slides section[data-transition-speed="slow"] {
597
	transition-duration: 1200ms;
598
599
600
601
602
603
604
605
606
607
608
609
610
611
}

.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;
}

612
.reveal .slides>section:empty,
Hakim El Hattab's avatar
Hakim El Hattab committed
613
614
615
.reveal .slides>section>section:empty,
.reveal .slides>section[data-background-interactive],
.reveal .slides>section>section[data-background-interactive] {
616
617
618
	pointer-events: none;
}

619
620
621
.reveal.center,
.reveal.center .slides,
.reveal.center .slides section {
622
	min-height: 0 !important;
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
}

/* 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;
}

Yves Delley's avatar
Yves Delley committed
638
639
640
641
642
643
.reveal .slides>section.past,
.reveal .slides>section.future,
.reveal .slides>section>section.past,
.reveal .slides>section>section.future {
	opacity: 0;
}
644
645
646


/*********************************************
647
 * Mixins for readability of transitions
Yves Delley's avatar
Yves Delley committed
648
649
 *********************************************/

650
@mixin transition-global($style) {
651
652
	.reveal .slides section[data-transition=#{$style}],
	.reveal.#{$style} .slides section:not([data-transition]) {
653
654
		@content;
	}
Yves Delley's avatar
Yves Delley committed
655
}
656
657
658
659
660
661
@mixin transition-stack($style) {
	.reveal .slides section[data-transition=#{$style}].stack,
	.reveal.#{$style} .slides section.stack {
		@content;
	}
}
662
@mixin transition-horizontal-past($style) {
663
664
665
666
667
	.reveal .slides>section[data-transition=#{$style}].past,
	.reveal .slides>section[data-transition~=#{$style}-out].past,
	.reveal.#{$style} .slides>section:not([data-transition]).past {
		@content;
	}
Yves Delley's avatar
Yves Delley committed
668
}
669
@mixin transition-horizontal-future($style) {
670
671
672
673
674
	.reveal .slides>section[data-transition=#{$style}].future,
	.reveal .slides>section[data-transition~=#{$style}-in].future,
	.reveal.#{$style} .slides>section:not([data-transition]).future {
		@content;
	}
Yves Delley's avatar
Yves Delley committed
675
676
}

677
@mixin transition-vertical-past($style) {
678
679
680
681
682
	.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;
	}
Yves Delley's avatar
Yves Delley committed
683
}
684
@mixin transition-vertical-future($style) {
685
686
687
688
689
	.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;
	}
Yves Delley's avatar
Yves Delley committed
690
691
}

692
693
694
695
/*********************************************
 * SLIDE TRANSITION
 * Aliased 'linear' for backwards compatibility
 *********************************************/
Yves Delley's avatar
Yves Delley committed
696

697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
@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%);
	}
Yves Delley's avatar
Yves Delley committed
713
714
715
716
717
}

/*********************************************
 * CONVEX TRANSITION
 * Aliased 'default' for backwards compatibility
718
719
 *********************************************/

720
@each $stylename in default, convex {
721
	@include transition-stack(#{$stylename}) {
722
723
724
		transform-style: preserve-3d;
	}

725
726
727
728
729
730
731
732
733
734
735
736
	@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);
	}
737
738
739
740
741
742
}

/*********************************************
 * CONCAVE TRANSITION
 *********************************************/

743
@include transition-stack(concave) {
744
745
746
	transform-style: preserve-3d;
}

747
@include transition-horizontal-past(concave) {
748
	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
749
}
750
@include transition-horizontal-future(concave) {
751
	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
752
}
753
@include transition-vertical-past(concave) {
754
	transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
755
}
756
@include transition-vertical-future(concave) {
757
	transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
758
759
760
761
762
763
764
}


/*********************************************
 * ZOOM TRANSITION
 *********************************************/

765
@include transition-global(zoom) {
766
	transition-timing-function: ease;
767
}
768
@include transition-horizontal-past(zoom) {
769
770
	visibility: hidden;
	transform: scale(16);
771
}
772
@include transition-horizontal-future(zoom) {
773
774
	visibility: hidden;
	transform: scale(0.2);
775
}
776
@include transition-vertical-past(zoom) {
777
	transform: translate(0, -150%);
778
}
779
@include transition-vertical-future(zoom) {
780
	transform: translate(0, 150%);
781
782
783
784
785
}


/*********************************************
 * CUBE TRANSITION
786
787
788
789
 *
 * WARNING:
 * this is deprecated and will be removed in a
 * future version.
790
791
792
 *********************************************/

.reveal.cube .slides {
793
	perspective: 1300px;
794
795
796
797
798
}

.reveal.cube .slides section {
	padding: 30px;
	min-height: 700px;
799
	backface-visibility: hidden;
800
	box-sizing: border-box;
801
	transform-style: preserve-3d;
802
803
}
	.reveal.center.cube .slides section {
804
		min-height: 0;
805
806
807
808
809
810
811
812
813
814
815
	}
	.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;
816
		transform: translateZ( -20px );
817
818
819
820
821
822
823
824
825
826
827
828
829
830
	}
	.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);
831
		transform: translateZ(-90px) rotateX( 65deg );
832
833
834
835
836
837
838
839
	}

.reveal.cube .slides>section.stack {
	padding: 0;
	background: none;
}

.reveal.cube .slides>section.past {
840
841
	transform-origin: 100% 0%;
	transform: translate3d(-100%, 0, 0) rotateY(-90deg);
842
843
844
}

.reveal.cube .slides>section.future {
845
846
	transform-origin: 0% 0%;
	transform: translate3d(100%, 0, 0) rotateY(90deg);
847
848
849
}

.reveal.cube .slides>section>section.past {
850
851
	transform-origin: 0% 100%;
	transform: translate3d(0, -100%, 0) rotateX(90deg);
852
853
854
}

.reveal.cube .slides>section>section.future {
855
856
	transform-origin: 0% 0%;
	transform: translate3d(0, 100%, 0) rotateX(-90deg);
857
858
859
860
861
}


/*********************************************
 * PAGE TRANSITION
862
863
864
865
 *
 * WARNING:
 * this is deprecated and will be removed in a
 * future version.
866
867
868
 *********************************************/

.reveal.page .slides {
869
870
	perspective-origin: 0% 50%;
	perspective: 3000px;
871
872
873
874
875
}

.reveal.page .slides section {
	padding: 30px;
	min-height: 700px;
876
	box-sizing: border-box;
877
	transform-style: preserve-3d;
878
879
880
881
882
883
884
885
886
887
888
889
890
}
	.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);
891
		transform: translateZ( -20px );
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
	}
	.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);

907
		-webkit-transform: translateZ(-90px) rotateX( 65deg );
908
909
910
911
912
913
914
915
	}

.reveal.page .slides>section.stack {
	padding: 0;
	background: none;
}

.reveal.page .slides>section.past {
916
917
	transform-origin: 0% 0%;
	transform: translate3d(-40%, 0, 0) rotateY(-80deg);
918
919
920
}

.reveal.page .slides>section.future {
921
922
	transform-origin: 100% 0%;
	transform: translate3d(0, 0, 0);
923
924
925
}

.reveal.page .slides>section>section.past {
926
927
	transform-origin: 0% 0%;
	transform: translate3d(0, -40%, 0) rotateX(80deg);
928
929
930
}

.reveal.page .slides>section>section.future {
931
932
	transform-origin: 0% 100%;
	transform: translate3d(0, 0, 0);
933
934
935
936
937
938
939
940
}


/*********************************************
 * FADE TRANSITION
 *********************************************/

.reveal .slides section[data-transition=fade],
Yves Delley's avatar
Yves Delley committed
941
942
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides>section>section:not([data-transition]) {
943
	transform: none;
944
	transition: opacity 0.5s;
945
946
947
948
}


.reveal.fade.overview .slides section,
Yves Delley's avatar
Yves Delley committed
949
.reveal.fade.overview .slides>section>section {
950
	transition: none;
951
952
953
954
955
956
957
}


/*********************************************
 * NO TRANSITION
 *********************************************/

958
@include transition-global(none) {
959
960
	transform: none;
	transition: none;
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
}


/*********************************************
 * PAUSED MODE
 *********************************************/

.reveal .pause-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	visibility: hidden;
	opacity: 0;
	z-index: 100;
978
	transition: all 1s ease;
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
}
.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;