reveal.scss 41.8 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
251
252
253
254
$controlArrowSize: 3.6em;
$controlArrowSpacing: 1.4em;
$controlArrowLength: 2.6em;
$controlArrowThickness: 0.5em;

255
.reveal .controls {
256
	$angle: 45deg;
Hakim El Hattab's avatar
Hakim El Hattab committed
257
258
	$angleHover: 40deg;
	$angleActive: 36deg;
259
	$spacing: 12px;
260

261
	@mixin arrowTransform( $angle ) {
262
		&:before {
263
			transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
264
265
266
		}

		&:after {
267
			transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
268
		}
269
270
271
272
	}

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

	button {
		position: absolute;
		padding: 0;
		background-color: transparent;
		border: 0;
		outline: 0;
		cursor: pointer;
289
		color: currentColor;
290
		transform: scale(.9999);
291
292
293
		transition: color 0.2s ease,
					opacity 0.2s ease,
					transform 0.2s ease;
294
		z-index: 2; // above slides
295
		pointer-events: auto;
296
		font-size: inherit;
297
298
299
300

		visibility: hidden;
		opacity: 0;

301
302
303
304
		-webkit-appearance: none;
		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	}

305
306
	.controls-arrow:before,
	.controls-arrow:after {
307
308
		content: '';
		position: absolute;
309
		top: 0;
310
		left: 0;
311
312
313
		width: $controlArrowLength;
		height: $controlArrowThickness;
		border-radius: $controlArrowThickness/2;
314
		background-color: currentColor;
315

316
		transition: all 0.15s ease, background-color 0.8s ease;
317
		transform-origin: $controlArrowThickness/2 50%;
Hakim El Hattab's avatar
Hakim El Hattab committed
318
		will-change: transform;
319
320
	}

321
	.controls-arrow {
322
		position: relative;
323
324
		width: $controlArrowSize;
		height: $controlArrowSize;
325

326
		@include arrowTransform( $angle );
327
328

		&:hover {
329
			@include arrowTransform( $angleHover );
330
331
332
		}

		&:active {
333
			@include arrowTransform( $angleActive );
334
335
336
337
		}
	}

	.navigate-left {
338
339
		right: $controlArrowSize + $controlArrowSpacing*2;
		bottom: $controlArrowSpacing + $controlArrowSize/2;
340
		transform: translateX( -10px );
341
342
343
	}

	.navigate-right {
344
		right: 0;
345
		bottom: $controlArrowSpacing + $controlArrowSize/2;
346
		transform: translateX( 10px );
347

348
		.controls-arrow {
349
			transform: rotate( 180deg );
350
351
		}

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

	.navigate-up {
Hakim El Hattab's avatar
Hakim El Hattab committed
358
		right: $controlArrowSpacing + $controlArrowSize/2;
359
		bottom: $controlArrowSpacing*2 + $controlArrowSize;
360
		transform: translateY( -10px );
361

362
		.controls-arrow {
363
			transform: rotate( 90deg );
364
		}
365
366
367
	}

	.navigate-down {
368
		right: $controlArrowSpacing + $controlArrowSize/2;
369
		bottom: 0;
370
		transform: translateY( 10px );
371

372
		.controls-arrow {
373
			transform: rotate( -90deg );
374
375
		}

376
		&.highlight {
377
378
			animation: bounce-down 2s 50 both ease-out;
		}
379
	}
380

381
	// Back arrow style: "faded":
382
	// Deemphasize backwards navigation arrows in favor of drawing
383
	// attention to forwards navigation
384
385
	&[data-controls-back-arrows="faded"] .navigate-left.enabled,
	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
386
387
388
389
390
391
392
		opacity: 0.3;

		&:hover {
			opacity: 1;
		}
	}

393
	// Back arrow style: "hidden":
394
	// Never show arrows for backwards navigation
395
396
397
398
399
400
	&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
		opacity: 0;
		visibility: hidden;
	}

401
402
	// Any control button that can be clicked is "enabled"
	.enabled {
403
		visibility: visible;
Hakim El Hattab's avatar
Hakim El Hattab committed
404
		opacity: 0.9;
405
		cursor: pointer;
406
		transform: none;
407
408
409
410
411
	}

	// Any control button that leads to showing or hiding
	// a fragment
	.enabled.fragmented {
Hakim El Hattab's avatar
Hakim El Hattab committed
412
		opacity: 0.5;
413
414
415
416
417
418
	}

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

421
// Adjust the layout when there are no vertical slides
Hakim El Hattab's avatar
Hakim El Hattab committed
422
.reveal:not(.has-vertical-slides) .controls .navigate-left {
423
424
	bottom: $controlArrowSpacing;
	right: $controlArrowSpacing*2 + $controlArrowSize;
425
}
426

Hakim El Hattab's avatar
Hakim El Hattab committed
427
.reveal:not(.has-vertical-slides) .controls .navigate-right {
428
429
	bottom: $controlArrowSpacing;
	right: $controlArrowSpacing;
430
}
Hakim El Hattab's avatar
Hakim El Hattab committed
431

432
.reveal:not(.has-horizontal-slides) .controls .navigate-up {
433
434
	right: $controlArrowSpacing;
	bottom: $controlArrowSpacing*2 + $controlArrowSize;
Hakim El Hattab's avatar
Hakim El Hattab committed
435
436
}
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
437
438
	right: $controlArrowSpacing;
	bottom: $controlArrowSpacing;
439
}
440

Hakim El Hattab's avatar
Hakim El Hattab committed
441
442
.reveal.has-dark-background .controls {
	color: #fff;
443
444
}

Hakim El Hattab's avatar
Hakim El Hattab committed
445
446
.reveal.has-light-background .controls {
	color: #000;
447
448
}

449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
// Edge aligned controls layout
@media screen and (min-width: 500px) {

	$spacing: 8px;

	.reveal .controls[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%;
		}
	}

}

493
494
495
496
497
498
499
500
501
502
503
504
505

/*********************************************
 * 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
506
507

	background-color: rgba( 0, 0, 0, 0.2 );
508
	color: #fff;
509
510
511
}
	.reveal .progress:after {
		content: '';
Yves Delley's avatar
Yves Delley committed
512
		display: block;
513
		position: absolute;
Hakim El Hattab's avatar
Hakim El Hattab committed
514
		height: 10px;
515
		width: 100%;
Hakim El Hattab's avatar
Hakim El Hattab committed
516
		top: -10px;
517
518
519
520
521
	}
	.reveal .progress span {
		display: block;
		height: 100%;
		width: 0px;
Yves Delley's avatar
Yves Delley committed
522

523
		background-color: currentColor;
524
		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
525
526
527
528
529
530
531
532
533
	}

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

.reveal .slide-number {
	position: fixed;
	display: block;
534
535
	right: 8px;
	bottom: 8px;
536
	z-index: 31;
Hakim El Hattab's avatar
Hakim El Hattab committed
537
	font-family: Helvetica, sans-serif;
538
	font-size: 12px;
Hakim El Hattab's avatar
Hakim El Hattab committed
539
	line-height: 1;
540
	color: #fff;
Hakim El Hattab's avatar
Hakim El Hattab committed
541
	background-color: rgba( 0, 0, 0, 0.4 );
542
	padding: 5px;
543
544
}

Hakim El Hattab's avatar
Hakim El Hattab committed
545
.reveal .slide-number-delimiter {
546
	margin: 0 3px;
Hakim El Hattab's avatar
Hakim El Hattab committed
547
548
}

549
550
551
552
553
554
555
556
/*********************************************
 * SLIDES
 *********************************************/

.reveal {
	position: relative;
	width: 100%;
	height: 100%;
557
	overflow: hidden;
Yves Delley's avatar
Yves Delley committed
558
	touch-action: none;
559
560
561
562
563
564
}

.reveal .slides {
	position: absolute;
	width: 100%;
	height: 100%;
Yves Delley's avatar
Yves Delley committed
565
566
567
568
569
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
570
	pointer-events: none;
571
572
573
574

	overflow: visible;
	z-index: 1;
	text-align: center;
575
576
	perspective: 600px;
	perspective-origin: 50% 40%;
577
578
579
580
581
582
583
584
585
586
587
588
}

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

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

	z-index: 10;
592
	transform-style: flat;
593
	transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
594
595
596
				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);
597
598
599
600
}

/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .slides section {
601
	transition-duration: 400ms;
602
603
}
.reveal[data-transition-speed="slow"] .slides section {
604
	transition-duration: 1200ms;
605
606
607
608
}

/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
609
	transition-duration: 400ms;
610
611
}
.reveal .slides section[data-transition-speed="slow"] {
612
	transition-duration: 1200ms;
613
614
615
616
617
618
619
620
621
622
623
624
625
626
}

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

627
.reveal .slides>section:empty,
Hakim El Hattab's avatar
Hakim El Hattab committed
628
629
630
.reveal .slides>section>section:empty,
.reveal .slides>section[data-background-interactive],
.reveal .slides>section>section[data-background-interactive] {
631
632
633
	pointer-events: none;
}

634
635
636
.reveal.center,
.reveal.center .slides,
.reveal.center .slides section {
637
	min-height: 0 !important;
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
}

/* 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
653
654
655
656
657
658
.reveal .slides>section.past,
.reveal .slides>section.future,
.reveal .slides>section>section.past,
.reveal .slides>section>section.future {
	opacity: 0;
}
659
660
661


/*********************************************
662
 * Mixins for readability of transitions
Yves Delley's avatar
Yves Delley committed
663
664
 *********************************************/

665
@mixin transition-global($style) {
666
667
	.reveal .slides section[data-transition=#{$style}],
	.reveal.#{$style} .slides section:not([data-transition]) {
668
669
		@content;
	}
Yves Delley's avatar
Yves Delley committed
670
}
671
672
673
674
675
676
@mixin transition-stack($style) {
	.reveal .slides section[data-transition=#{$style}].stack,
	.reveal.#{$style} .slides section.stack {
		@content;
	}
}
677
@mixin transition-horizontal-past($style) {
678
679
680
681
682
	.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
683
}
684
@mixin transition-horizontal-future($style) {
685
686
687
688
689
	.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
690
691
}

692
@mixin transition-vertical-past($style) {
693
694
695
696
697
	.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
698
}
699
@mixin transition-vertical-future($style) {
700
701
702
703
704
	.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
705
706
}

707
708
709
710
/*********************************************
 * SLIDE TRANSITION
 * Aliased 'linear' for backwards compatibility
 *********************************************/
Yves Delley's avatar
Yves Delley committed
711

712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
@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
728
729
730
731
732
}

/*********************************************
 * CONVEX TRANSITION
 * Aliased 'default' for backwards compatibility
733
734
 *********************************************/

735
@each $stylename in default, convex {
736
	@include transition-stack(#{$stylename}) {
737
738
739
		transform-style: preserve-3d;
	}

740
741
742
743
744
745
746
747
748
749
750
751
	@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);
	}
752
753
754
755
756
757
}

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

758
@include transition-stack(concave) {
759
760
761
	transform-style: preserve-3d;
}

762
@include transition-horizontal-past(concave) {
763
	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
764
}
765
@include transition-horizontal-future(concave) {
766
	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
767
}
768
@include transition-vertical-past(concave) {
769
	transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
770
}
771
@include transition-vertical-future(concave) {
772
	transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
773
774
775
776
777
778
779
}


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

780
@include transition-global(zoom) {
781
	transition-timing-function: ease;
782
}
783
@include transition-horizontal-past(zoom) {
784
785
	visibility: hidden;
	transform: scale(16);
786
}
787
@include transition-horizontal-future(zoom) {
788
789
	visibility: hidden;
	transform: scale(0.2);
790
}
791
@include transition-vertical-past(zoom) {
792
	transform: translate(0, -150%);
793
}
794
@include transition-vertical-future(zoom) {
795
	transform: translate(0, 150%);
796
797
798
799
800
}


/*********************************************
 * CUBE TRANSITION
801
802
803
804
 *
 * WARNING:
 * this is deprecated and will be removed in a
 * future version.
805
806
807
 *********************************************/

.reveal.cube .slides {
808
	perspective: 1300px;
809
810
811
812
813
}

.reveal.cube .slides section {
	padding: 30px;
	min-height: 700px;
814
	backface-visibility: hidden;
815
	box-sizing: border-box;
816
	transform-style: preserve-3d;
817
818
}
	.reveal.center.cube .slides section {
819
		min-height: 0;
820
821
822
823
824
825
826
827
828
829
830
	}
	.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;
831
		transform: translateZ( -20px );
832
833
834
835
836
837
838
839
840
841
842
843
844
845
	}
	.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);
846
		transform: translateZ(-90px) rotateX( 65deg );
847
848
849
850
851
852
853
854
	}

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

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

.reveal.cube .slides>section.future {
860
861
	transform-origin: 0% 0%;
	transform: translate3d(100%, 0, 0) rotateY(90deg);
862
863
864
}

.reveal.cube .slides>section>section.past {
865
866
	transform-origin: 0% 100%;
	transform: translate3d(0, -100%, 0) rotateX(90deg);
867
868
869
}

.reveal.cube .slides>section>section.future {
870
871
	transform-origin: 0% 0%;
	transform: translate3d(0, 100%, 0) rotateX(-90deg);
872
873
874
875
876
}


/*********************************************
 * PAGE TRANSITION
877
878
879
880
 *
 * WARNING:
 * this is deprecated and will be removed in a
 * future version.
881
882
883
 *********************************************/

.reveal.page .slides {
884
885
	perspective-origin: 0% 50%;
	perspective: 3000px;
886
887
888
889
890
}

.reveal.page .slides section {
	padding: 30px;
	min-height: 700px;
891
	box-sizing: border-box;
892
	transform-style: preserve-3d;
893
894
895
896
897
898
899
900
901
902
903
904
905
}
	.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);
906
		transform: translateZ( -20px );
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
	}
	.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);

922
		-webkit-transform: translateZ(-90px) rotateX( 65deg );
923
924
925
926
927
928
929
930
	}

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

.reveal.page .slides>section.past {
931
932
	transform-origin: 0% 0%;
	transform: translate3d(-40%, 0, 0) rotateY(-80deg);
933
934
935
}

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

.reveal.page .slides>section>section.past {
941
942
	transform-origin: 0% 0%;
	transform: translate3d(0, -40%, 0) rotateX(80deg);
943
944
945
}

.reveal.page .slides>section>section.future {
946
947
	transform-origin: 0% 100%;
	transform: translate3d(0, 0, 0);
948
949
950
951
952
953
954
955
}


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

.reveal .slides section[data-transition=fade],
Yves Delley's avatar
Yves Delley committed
956
957
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides>section>section:not([data-transition]) {
958
	transform: none;
959
	transition: opacity 0.5s;
960
961
962
963
}


.reveal.fade.overview .slides section,
Yves Delley's avatar
Yves Delley committed
964
.reveal.fade.overview .slides>section>section {
965
	transition: none;
966
967
968
969
970
971
972
}


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

973
@include transition-global(none) {
974
975
	transform: none;
	transition: none;
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
}


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

.reveal .pause-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	visibility: hidden;
	opacity: 0;
	z-index: 100;
993
	transition: all 1s ease;
994
995
996
997
998
999
1000
}
.reveal.paused .pause-overlay {
	visibility: visible;
	opacity: 1;
}