1/*! 2 * reveal.js 3 * http://revealjs.com 4 * MIT licensed 5 * 6 * Copyright (C) 2020 Hakim El Hattab, http://hakim.se 7 */ 8 9 10/********************************************* 11 * GLOBAL STYLES 12 *********************************************/ 13 14html { 15 width: 100%; 16 height: 100%; 17 height: 100vh; 18 height: calc( var(--vh, 1vh) * 100 ); 19 overflow: hidden; 20} 21 22body { 23 height: 100%; 24 overflow: hidden; 25 position: relative; 26 line-height: 1; 27 margin: 0; 28 29 background-color: #fff; 30 color: #000; 31} 32 33 34/********************************************* 35 * VIEW FRAGMENTS 36 *********************************************/ 37 38.reveal .slides section .fragment { 39 opacity: 0; 40 visibility: hidden; 41 transition: all .2s ease; 42 43 &.visible { 44 opacity: 1; 45 visibility: inherit; 46 } 47} 48 49.reveal .slides section .fragment.grow { 50 opacity: 1; 51 visibility: inherit; 52 53 &.visible { 54 transform: scale( 1.3 ); 55 } 56} 57 58.reveal .slides section .fragment.shrink { 59 opacity: 1; 60 visibility: inherit; 61 62 &.visible { 63 transform: scale( 0.7 ); 64 } 65} 66 67.reveal .slides section .fragment.zoom-in { 68 transform: scale( 0.1 ); 69 70 &.visible { 71 transform: none; 72 } 73} 74 75.reveal .slides section .fragment.fade-out { 76 opacity: 1; 77 visibility: inherit; 78 79 &.visible { 80 opacity: 0; 81 visibility: hidden; 82 } 83} 84 85.reveal .slides section .fragment.semi-fade-out { 86 opacity: 1; 87 visibility: inherit; 88 89 &.visible { 90 opacity: 0.5; 91 visibility: inherit; 92 } 93} 94 95.reveal .slides section .fragment.strike { 96 opacity: 1; 97 visibility: inherit; 98 99 &.visible { 100 text-decoration: line-through; 101 } 102} 103 104.reveal .slides section .fragment.fade-up { 105 transform: translate(0, 40px); 106 107 &.visible { 108 transform: translate(0, 0); 109 } 110} 111 112.reveal .slides section .fragment.fade-down { 113 transform: translate(0, -40px); 114 115 &.visible { 116 transform: translate(0, 0); 117 } 118} 119 120.reveal .slides section .fragment.fade-right { 121 transform: translate(-40px, 0); 122 123 &.visible { 124 transform: translate(0, 0); 125 } 126} 127 128.reveal .slides section .fragment.fade-left { 129 transform: translate(40px, 0); 130 131 &.visible { 132 transform: translate(0, 0); 133 } 134} 135 136.reveal .slides section .fragment.fade-in-then-out, 137.reveal .slides section .fragment.current-visible { 138 opacity: 0; 139 visibility: hidden; 140 141 &.current-fragment { 142 opacity: 1; 143 visibility: inherit; 144 } 145} 146 147.reveal .slides section .fragment.fade-in-then-semi-out { 148 opacity: 0; 149 visibility: hidden; 150 151 &.visible { 152 opacity: 0.5; 153 visibility: inherit; 154 } 155 156 &.current-fragment { 157 opacity: 1; 158 visibility: inherit; 159 } 160} 161 162.reveal .slides section .fragment.highlight-red, 163.reveal .slides section .fragment.highlight-current-red, 164.reveal .slides section .fragment.highlight-green, 165.reveal .slides section .fragment.highlight-current-green, 166.reveal .slides section .fragment.highlight-blue, 167.reveal .slides section .fragment.highlight-current-blue { 168 opacity: 1; 169 visibility: inherit; 170} 171 .reveal .slides section .fragment.highlight-red.visible { 172 color: #ff2c2d 173 } 174 .reveal .slides section .fragment.highlight-green.visible { 175 color: #17ff2e; 176 } 177 .reveal .slides section .fragment.highlight-blue.visible { 178 color: #1b91ff; 179 } 180 181.reveal .slides section .fragment.highlight-current-red.current-fragment { 182 color: #ff2c2d 183} 184.reveal .slides section .fragment.highlight-current-green.current-fragment { 185 color: #17ff2e; 186} 187.reveal .slides section .fragment.highlight-current-blue.current-fragment { 188 color: #1b91ff; 189} 190 191 192/********************************************* 193 * DEFAULT ELEMENT STYLES 194 *********************************************/ 195 196/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */ 197.reveal:after { 198 content: ''; 199 font-style: italic; 200} 201 202.reveal iframe { 203 z-index: 1; 204} 205 206/** Prevents layering issues in certain browser/transition combinations */ 207.reveal a { 208 position: relative; 209} 210 211.reveal .stretch { 212 max-width: none; 213 max-height: none; 214} 215 216.reveal pre.stretch code { 217 height: 100%; 218 max-height: 100%; 219 box-sizing: border-box; 220} 221 222 223/********************************************* 224 * CONTROLS 225 *********************************************/ 226 227@keyframes bounce-right { 228 0%, 10%, 25%, 40%, 50% {transform: translateX(0);} 229 20% {transform: translateX(10px);} 230 30% {transform: translateX(-5px);} 231} 232 233@keyframes bounce-down { 234 0%, 10%, 25%, 40%, 50% {transform: translateY(0);} 235 20% {transform: translateY(10px);} 236 30% {transform: translateY(-5px);} 237} 238 239$controlArrowSize: 3.6em; 240$controlArrowSpacing: 1.4em; 241$controlArrowLength: 2.6em; 242$controlArrowThickness: 0.5em; 243$controlsArrowAngle: 45deg; 244$controlsArrowAngleHover: 40deg; 245$controlsArrowAngleActive: 36deg; 246 247@mixin controlsArrowTransform( $angle ) { 248 &:before { 249 transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle ); 250 } 251 252 &:after { 253 transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle ); 254 } 255} 256 257.reveal .controls { 258 $spacing: 12px; 259 260 display: none; 261 position: absolute; 262 top: auto; 263 bottom: $spacing; 264 right: $spacing; 265 left: auto; 266 z-index: 11; 267 color: #000; 268 pointer-events: none; 269 font-size: 10px; 270 271 button { 272 position: absolute; 273 padding: 0; 274 background-color: transparent; 275 border: 0; 276 outline: 0; 277 cursor: pointer; 278 color: currentColor; 279 transform: scale(.9999); 280 transition: color 0.2s ease, 281 opacity 0.2s ease, 282 transform 0.2s ease; 283 z-index: 2; // above slides 284 pointer-events: auto; 285 font-size: inherit; 286 287 visibility: hidden; 288 opacity: 0; 289 290 -webkit-appearance: none; 291 -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); 292 } 293 294 .controls-arrow:before, 295 .controls-arrow:after { 296 content: ''; 297 position: absolute; 298 top: 0; 299 left: 0; 300 width: $controlArrowLength; 301 height: $controlArrowThickness; 302 border-radius: $controlArrowThickness/2; 303 background-color: currentColor; 304 305 transition: all 0.15s ease, background-color 0.8s ease; 306 transform-origin: floor(($controlArrowThickness/2)*10)/10 50%; 307 will-change: transform; 308 } 309 310 .controls-arrow { 311 position: relative; 312 width: $controlArrowSize; 313 height: $controlArrowSize; 314 315 @include controlsArrowTransform( $controlsArrowAngle ); 316 317 &:hover { 318 @include controlsArrowTransform( $controlsArrowAngleHover ); 319 } 320 321 &:active { 322 @include controlsArrowTransform( $controlsArrowAngleActive ); 323 } 324 } 325 326 .navigate-left { 327 right: $controlArrowSize + $controlArrowSpacing*2; 328 bottom: $controlArrowSpacing + $controlArrowSize/2; 329 transform: translateX( -10px ); 330 } 331 332 .navigate-right { 333 right: 0; 334 bottom: $controlArrowSpacing + $controlArrowSize/2; 335 transform: translateX( 10px ); 336 337 .controls-arrow { 338 transform: rotate( 180deg ); 339 } 340 341 &.highlight { 342 animation: bounce-right 2s 50 both ease-out; 343 } 344 } 345 346 .navigate-up { 347 right: $controlArrowSpacing + $controlArrowSize/2; 348 bottom: $controlArrowSpacing*2 + $controlArrowSize; 349 transform: translateY( -10px ); 350 351 .controls-arrow { 352 transform: rotate( 90deg ); 353 } 354 } 355 356 .navigate-down { 357 right: $controlArrowSpacing + $controlArrowSize/2; 358 bottom: -$controlArrowSpacing; 359 padding-bottom: $controlArrowSpacing; 360 transform: translateY( 10px ); 361 362 .controls-arrow { 363 transform: rotate( -90deg ); 364 } 365 366 &.highlight { 367 animation: bounce-down 2s 50 both ease-out; 368 } 369 } 370 371 // Back arrow style: "faded": 372 // Deemphasize backwards navigation arrows in favor of drawing 373 // attention to forwards navigation 374 &[data-controls-back-arrows="faded"] .navigate-left.enabled, 375 &[data-controls-back-arrows="faded"] .navigate-up.enabled { 376 opacity: 0.3; 377 378 &:hover { 379 opacity: 1; 380 } 381 } 382 383 // Back arrow style: "hidden": 384 // Never show arrows for backwards navigation 385 &[data-controls-back-arrows="hidden"] .navigate-left.enabled, 386 &[data-controls-back-arrows="hidden"] .navigate-up.enabled { 387 opacity: 0; 388 visibility: hidden; 389 } 390 391 // Any control button that can be clicked is "enabled" 392 .enabled { 393 visibility: visible; 394 opacity: 0.9; 395 cursor: pointer; 396 transform: none; 397 } 398 399 // Any control button that leads to showing or hiding 400 // a fragment 401 .enabled.fragmented { 402 opacity: 0.5; 403 } 404 405 .enabled:hover, 406 .enabled.fragmented:hover { 407 opacity: 1; 408 } 409} 410 411.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up, 412.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down { 413 display: none; 414} 415 416// Adjust the layout when there are no vertical slides 417.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left, 418.reveal:not(.has-vertical-slides) .controls .navigate-left { 419 bottom: $controlArrowSpacing; 420 right: 0.5em + $controlArrowSpacing + $controlArrowSize; 421} 422 423.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right, 424.reveal:not(.has-vertical-slides) .controls .navigate-right { 425 bottom: $controlArrowSpacing; 426 right: 0.5em; 427} 428 429// Adjust the layout when there are no horizontal slides 430.reveal:not(.has-horizontal-slides) .controls .navigate-up { 431 right: $controlArrowSpacing; 432 bottom: $controlArrowSpacing + $controlArrowSize; 433} 434.reveal:not(.has-horizontal-slides) .controls .navigate-down { 435 right: $controlArrowSpacing; 436 bottom: 0.5em; 437} 438 439// Invert arrows based on background color 440.reveal.has-dark-background .controls { 441 color: #fff; 442} 443.reveal.has-light-background .controls { 444 color: #000; 445} 446 447// Disable active states on touch devices 448.reveal.no-hover .controls .controls-arrow:hover, 449.reveal.no-hover .controls .controls-arrow:active { 450 @include controlsArrowTransform( $controlsArrowAngle ); 451} 452 453// Edge aligned controls layout 454@media screen and (min-width: 500px) { 455 456 $spacing: 0.8em; 457 458 .reveal .controls[data-controls-layout="edges"] { 459 & { 460 top: 0; 461 right: 0; 462 bottom: 0; 463 left: 0; 464 } 465 466 .navigate-left, 467 .navigate-right, 468 .navigate-up, 469 .navigate-down { 470 bottom: auto; 471 right: auto; 472 } 473 474 .navigate-left { 475 top: 50%; 476 left: $spacing; 477 margin-top: -$controlArrowSize/2; 478 } 479 480 .navigate-right { 481 top: 50%; 482 right: $spacing; 483 margin-top: -$controlArrowSize/2; 484 } 485 486 .navigate-up { 487 top: $spacing; 488 left: 50%; 489 margin-left: -$controlArrowSize/2; 490 } 491 492 .navigate-down { 493 bottom: $spacing - $controlArrowSpacing + 0.3em; 494 left: 50%; 495 margin-left: -$controlArrowSize/2; 496 } 497 } 498 499} 500 501 502/********************************************* 503 * PROGRESS BAR 504 *********************************************/ 505 506.reveal .progress { 507 position: absolute; 508 display: none; 509 height: 3px; 510 width: 100%; 511 bottom: 0; 512 left: 0; 513 z-index: 10; 514 515 background-color: rgba( 0, 0, 0, 0.2 ); 516 color: #fff; 517} 518 .reveal .progress:after { 519 content: ''; 520 display: block; 521 position: absolute; 522 height: 10px; 523 width: 100%; 524 top: -10px; 525 } 526 .reveal .progress span { 527 display: block; 528 height: 100%; 529 width: 0px; 530 531 background-color: currentColor; 532 transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 533 } 534 535/********************************************* 536 * SLIDE NUMBER 537 *********************************************/ 538 539.reveal .slide-number { 540 position: absolute; 541 display: block; 542 right: 8px; 543 bottom: 8px; 544 z-index: 31; 545 font-family: Helvetica, sans-serif; 546 font-size: 12px; 547 line-height: 1; 548 color: #fff; 549 background-color: rgba( 0, 0, 0, 0.4 ); 550 padding: 5px; 551} 552 553.reveal .slide-number a { 554 color: currentColor; 555} 556 557.reveal .slide-number-delimiter { 558 margin: 0 3px; 559} 560 561/********************************************* 562 * SLIDES 563 *********************************************/ 564 565.reveal { 566 position: relative; 567 width: 100%; 568 height: 100%; 569 overflow: hidden; 570 touch-action: pinch-zoom; 571} 572 573.reveal .slides { 574 position: absolute; 575 width: 100%; 576 height: 100%; 577 top: 0; 578 right: 0; 579 bottom: 0; 580 left: 0; 581 margin: auto; 582 pointer-events: none; 583 584 overflow: visible; 585 z-index: 1; 586 text-align: center; 587 perspective: 600px; 588 perspective-origin: 50% 40%; 589} 590 591.reveal .slides>section { 592 perspective: 600px; 593} 594 595.reveal .slides>section, 596.reveal .slides>section>section { 597 display: none; 598 position: absolute; 599 width: 100%; 600 padding: 20px 0px; 601 pointer-events: auto; 602 603 z-index: 10; 604 transform-style: flat; 605 transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), 606 transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), 607 visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), 608 opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 609} 610 611/* Global transition speed settings */ 612.reveal[data-transition-speed="fast"] .slides section { 613 transition-duration: 400ms; 614} 615.reveal[data-transition-speed="slow"] .slides section { 616 transition-duration: 1200ms; 617} 618 619/* Slide-specific transition speed overrides */ 620.reveal .slides section[data-transition-speed="fast"] { 621 transition-duration: 400ms; 622} 623.reveal .slides section[data-transition-speed="slow"] { 624 transition-duration: 1200ms; 625} 626 627.reveal .slides>section.stack { 628 padding-top: 0; 629 padding-bottom: 0; 630 pointer-events: none; 631 height: 100%; 632} 633 634.reveal .slides>section.present, 635.reveal .slides>section>section.present { 636 display: block; 637 z-index: 11; 638 opacity: 1; 639} 640 641.reveal .slides>section:empty, 642.reveal .slides>section>section:empty, 643.reveal .slides>section[data-background-interactive], 644.reveal .slides>section>section[data-background-interactive] { 645 pointer-events: none; 646} 647 648.reveal.center, 649.reveal.center .slides, 650.reveal.center .slides section { 651 min-height: 0 !important; 652} 653 654/* Don't allow interaction with invisible slides */ 655.reveal .slides>section.future, 656.reveal .slides>section>section.future, 657.reveal .slides>section.past, 658.reveal .slides>section>section.past { 659 pointer-events: none; 660} 661 662.reveal.overview .slides>section, 663.reveal.overview .slides>section>section { 664 pointer-events: auto; 665} 666 667.reveal .slides>section.past, 668.reveal .slides>section.future, 669.reveal .slides>section>section.past, 670.reveal .slides>section>section.future { 671 opacity: 0; 672} 673 674 675/********************************************* 676 * Mixins for readability of transitions 677 *********************************************/ 678 679@mixin transition-global($style) { 680 .reveal .slides section[data-transition=#{$style}], 681 .reveal.#{$style} .slides section:not([data-transition]) { 682 @content; 683 } 684} 685@mixin transition-stack($style) { 686 .reveal .slides section[data-transition=#{$style}].stack, 687 .reveal.#{$style} .slides section.stack { 688 @content; 689 } 690} 691@mixin transition-horizontal-past($style) { 692 .reveal .slides>section[data-transition=#{$style}].past, 693 .reveal .slides>section[data-transition~=#{$style}-out].past, 694 .reveal.#{$style} .slides>section:not([data-transition]).past { 695 @content; 696 } 697} 698@mixin transition-horizontal-future($style) { 699 .reveal .slides>section[data-transition=#{$style}].future, 700 .reveal .slides>section[data-transition~=#{$style}-in].future, 701 .reveal.#{$style} .slides>section:not([data-transition]).future { 702 @content; 703 } 704} 705 706@mixin transition-vertical-past($style) { 707 .reveal .slides>section>section[data-transition=#{$style}].past, 708 .reveal .slides>section>section[data-transition~=#{$style}-out].past, 709 .reveal.#{$style} .slides>section>section:not([data-transition]).past { 710 @content; 711 } 712} 713@mixin transition-vertical-future($style) { 714 .reveal .slides>section>section[data-transition=#{$style}].future, 715 .reveal .slides>section>section[data-transition~=#{$style}-in].future, 716 .reveal.#{$style} .slides>section>section:not([data-transition]).future { 717 @content; 718 } 719} 720 721/********************************************* 722 * SLIDE TRANSITION 723 * Aliased 'linear' for backwards compatibility 724 *********************************************/ 725 726@each $stylename in slide, linear { 727 .reveal.#{$stylename} section { 728 backface-visibility: hidden; 729 } 730 @include transition-horizontal-past(#{$stylename}) { 731 transform: translate(-150%, 0); 732 } 733 @include transition-horizontal-future(#{$stylename}) { 734 transform: translate(150%, 0); 735 } 736 @include transition-vertical-past(#{$stylename}) { 737 transform: translate(0, -150%); 738 } 739 @include transition-vertical-future(#{$stylename}) { 740 transform: translate(0, 150%); 741 } 742} 743 744/********************************************* 745 * CONVEX TRANSITION 746 * Aliased 'default' for backwards compatibility 747 *********************************************/ 748 749@each $stylename in default, convex { 750 @include transition-stack(#{$stylename}) { 751 transform-style: preserve-3d; 752 } 753 754 @include transition-horizontal-past(#{$stylename}) { 755 transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); 756 } 757 @include transition-horizontal-future(#{$stylename}) { 758 transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); 759 } 760 @include transition-vertical-past(#{$stylename}) { 761 transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); 762 } 763 @include transition-vertical-future(#{$stylename}) { 764 transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); 765 } 766} 767 768/********************************************* 769 * CONCAVE TRANSITION 770 *********************************************/ 771 772@include transition-stack(concave) { 773 transform-style: preserve-3d; 774} 775 776@include transition-horizontal-past(concave) { 777 transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); 778} 779@include transition-horizontal-future(concave) { 780 transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); 781} 782@include transition-vertical-past(concave) { 783 transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); 784} 785@include transition-vertical-future(concave) { 786 transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); 787} 788 789 790/********************************************* 791 * ZOOM TRANSITION 792 *********************************************/ 793 794@include transition-global(zoom) { 795 transition-timing-function: ease; 796} 797@include transition-horizontal-past(zoom) { 798 visibility: hidden; 799 transform: scale(16); 800} 801@include transition-horizontal-future(zoom) { 802 visibility: hidden; 803 transform: scale(0.2); 804} 805@include transition-vertical-past(zoom) { 806 transform: scale(16); 807} 808@include transition-vertical-future(zoom) { 809 transform: scale(0.2); 810} 811 812 813/********************************************* 814 * CUBE TRANSITION 815 * 816 * WARNING: 817 * this is deprecated and will be removed in a 818 * future version. 819 *********************************************/ 820 821.reveal.cube .slides { 822 perspective: 1300px; 823} 824 825.reveal.cube .slides section { 826 padding: 30px; 827 min-height: 700px; 828 backface-visibility: hidden; 829 box-sizing: border-box; 830 transform-style: preserve-3d; 831} 832 .reveal.center.cube .slides section { 833 min-height: 0; 834 } 835 .reveal.cube .slides section:not(.stack):before { 836 content: ''; 837 position: absolute; 838 display: block; 839 width: 100%; 840 height: 100%; 841 left: 0; 842 top: 0; 843 background: rgba(0,0,0,0.1); 844 border-radius: 4px; 845 transform: translateZ( -20px ); 846 } 847 .reveal.cube .slides section:not(.stack):after { 848 content: ''; 849 position: absolute; 850 display: block; 851 width: 90%; 852 height: 30px; 853 left: 5%; 854 bottom: 0; 855 background: none; 856 z-index: 1; 857 858 border-radius: 4px; 859 box-shadow: 0px 95px 25px rgba(0,0,0,0.2); 860 transform: translateZ(-90px) rotateX( 65deg ); 861 } 862 863.reveal.cube .slides>section.stack { 864 padding: 0; 865 background: none; 866} 867 868.reveal.cube .slides>section.past { 869 transform-origin: 100% 0%; 870 transform: translate3d(-100%, 0, 0) rotateY(-90deg); 871} 872 873.reveal.cube .slides>section.future { 874 transform-origin: 0% 0%; 875 transform: translate3d(100%, 0, 0) rotateY(90deg); 876} 877 878.reveal.cube .slides>section>section.past { 879 transform-origin: 0% 100%; 880 transform: translate3d(0, -100%, 0) rotateX(90deg); 881} 882 883.reveal.cube .slides>section>section.future { 884 transform-origin: 0% 0%; 885 transform: translate3d(0, 100%, 0) rotateX(-90deg); 886} 887 888 889/********************************************* 890 * PAGE TRANSITION 891 * 892 * WARNING: 893 * this is deprecated and will be removed in a 894 * future version. 895 *********************************************/ 896 897.reveal.page .slides { 898 perspective-origin: 0% 50%; 899 perspective: 3000px; 900} 901 902.reveal.page .slides section { 903 padding: 30px; 904 min-height: 700px; 905 box-sizing: border-box; 906 transform-style: preserve-3d; 907} 908 .reveal.page .slides section.past { 909 z-index: 12; 910 } 911 .reveal.page .slides section:not(.stack):before { 912 content: ''; 913 position: absolute; 914 display: block; 915 width: 100%; 916 height: 100%; 917 left: 0; 918 top: 0; 919 background: rgba(0,0,0,0.1); 920 transform: translateZ( -20px ); 921 } 922 .reveal.page .slides section:not(.stack):after { 923 content: ''; 924 position: absolute; 925 display: block; 926 width: 90%; 927 height: 30px; 928 left: 5%; 929 bottom: 0; 930 background: none; 931 z-index: 1; 932 933 border-radius: 4px; 934 box-shadow: 0px 95px 25px rgba(0,0,0,0.2); 935 936 -webkit-transform: translateZ(-90px) rotateX( 65deg ); 937 } 938 939.reveal.page .slides>section.stack { 940 padding: 0; 941 background: none; 942} 943 944.reveal.page .slides>section.past { 945 transform-origin: 0% 0%; 946 transform: translate3d(-40%, 0, 0) rotateY(-80deg); 947} 948 949.reveal.page .slides>section.future { 950 transform-origin: 100% 0%; 951 transform: translate3d(0, 0, 0); 952} 953 954.reveal.page .slides>section>section.past { 955 transform-origin: 0% 0%; 956 transform: translate3d(0, -40%, 0) rotateX(80deg); 957} 958 959.reveal.page .slides>section>section.future { 960 transform-origin: 0% 100%; 961 transform: translate3d(0, 0, 0); 962} 963 964 965/********************************************* 966 * FADE TRANSITION 967 *********************************************/ 968 969.reveal .slides section[data-transition=fade], 970.reveal.fade .slides section:not([data-transition]), 971.reveal.fade .slides>section>section:not([data-transition]) { 972 transform: none; 973 transition: opacity 0.5s; 974} 975 976 977.reveal.fade.overview .slides section, 978.reveal.fade.overview .slides>section>section { 979 transition: none; 980} 981 982 983/********************************************* 984 * NO TRANSITION 985 *********************************************/ 986 987@include transition-global(none) { 988 transform: none; 989 transition: none; 990} 991 992 993/********************************************* 994 * PAUSED MODE 995 *********************************************/ 996 997.reveal .pause-overlay { 998 position: absolute; 999 top: 0; 1000 left: 0; 1001 width: 100%; 1002 height: 100%; 1003 background: black; 1004 visibility: hidden; 1005 opacity: 0; 1006 z-index: 100; 1007 transition: all 1s ease; 1008} 1009 1010.reveal .pause-overlay .resume-button { 1011 position: absolute; 1012 bottom: 20px; 1013 right: 20px; 1014 color: #ccc; 1015 border-radius: 2px; 1016 padding: 6px 14px; 1017 border: 2px solid #ccc; 1018 font-size: 16px; 1019 background: transparent; 1020 cursor: pointer; 1021 1022 &:hover { 1023 color: #fff; 1024 border-color: #fff; 1025 } 1026} 1027 1028.reveal.paused .pause-overlay { 1029 visibility: visible; 1030 opacity: 1; 1031} 1032 1033 1034/********************************************* 1035 * FALLBACK 1036 *********************************************/ 1037 1038.no-transforms { 1039 overflow-y: auto; 1040} 1041 1042.no-transforms .reveal { 1043 overflow: visible; 1044} 1045 1046.no-transforms .reveal .slides { 1047 position: relative; 1048 width: 80%; 1049 max-width: 1280px; 1050 height: auto; 1051 top: 0; 1052 margin: 0 auto; 1053 text-align: center; 1054} 1055 1056.no-transforms .reveal .controls, 1057.no-transforms .reveal .progress { 1058 display: none; 1059} 1060 1061.no-transforms .reveal .slides section { 1062 display: block; 1063 opacity: 1; 1064 position: relative; 1065 height: auto; 1066 min-height: 0; 1067 top: 0; 1068 left: 0; 1069 margin: 10vh 0; 1070 margin: 70px 0; 1071 transform: none; 1072} 1073 1074.reveal .no-transition, 1075.reveal .no-transition * { 1076 transition: none !important; 1077} 1078 1079 1080/********************************************* 1081 * PER-SLIDE BACKGROUNDS 1082 *********************************************/ 1083 1084.reveal .backgrounds { 1085 position: absolute; 1086 width: 100%; 1087 height: 100%; 1088 top: 0; 1089 left: 0; 1090 perspective: 600px; 1091} 1092 .reveal .slide-background { 1093 display: none; 1094 position: absolute; 1095 width: 100%; 1096 height: 100%; 1097 opacity: 0; 1098 visibility: hidden; 1099 overflow: hidden; 1100 1101 background-color: rgba( 0, 0, 0, 0 ); 1102 1103 transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 1104 } 1105 1106 .reveal .slide-background-content { 1107 position: absolute; 1108 width: 100%; 1109 height: 100%; 1110 1111 background-position: 50% 50%; 1112 background-repeat: no-repeat; 1113 background-size: cover; 1114 } 1115 1116 .reveal .slide-background.stack { 1117 display: block; 1118 } 1119 1120 .reveal .slide-background.present { 1121 opacity: 1; 1122 visibility: visible; 1123 z-index: 2; 1124 } 1125 1126 .print-pdf .reveal .slide-background { 1127 opacity: 1 !important; 1128 visibility: visible !important; 1129 } 1130 1131/* Video backgrounds */ 1132.reveal .slide-background video { 1133 position: absolute; 1134 width: 100%; 1135 height: 100%; 1136 max-width: none; 1137 max-height: none; 1138 top: 0; 1139 left: 0; 1140 object-fit: cover; 1141} 1142 .reveal .slide-background[data-background-size="contain"] video { 1143 object-fit: contain; 1144 } 1145 1146/* Immediate transition style */ 1147.reveal[data-background-transition=none]>.backgrounds .slide-background, 1148.reveal>.backgrounds .slide-background[data-background-transition=none] { 1149 transition: none; 1150} 1151 1152/* Slide */ 1153.reveal[data-background-transition=slide]>.backgrounds .slide-background, 1154.reveal>.backgrounds .slide-background[data-background-transition=slide] { 1155 opacity: 1; 1156 backface-visibility: hidden; 1157} 1158 .reveal[data-background-transition=slide]>.backgrounds .slide-background.past, 1159 .reveal>.backgrounds .slide-background.past[data-background-transition=slide] { 1160 transform: translate(-100%, 0); 1161 } 1162 .reveal[data-background-transition=slide]>.backgrounds .slide-background.future, 1163 .reveal>.backgrounds .slide-background.future[data-background-transition=slide] { 1164 transform: translate(100%, 0); 1165 } 1166 1167 .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past, 1168 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] { 1169 transform: translate(0, -100%); 1170 } 1171 .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future, 1172 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] { 1173 transform: translate(0, 100%); 1174 } 1175 1176 1177/* Convex */ 1178.reveal[data-background-transition=convex]>.backgrounds .slide-background.past, 1179.reveal>.backgrounds .slide-background.past[data-background-transition=convex] { 1180 opacity: 0; 1181 transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); 1182} 1183.reveal[data-background-transition=convex]>.backgrounds .slide-background.future, 1184.reveal>.backgrounds .slide-background.future[data-background-transition=convex] { 1185 opacity: 0; 1186 transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); 1187} 1188 1189.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past, 1190.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] { 1191 opacity: 0; 1192 transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); 1193} 1194.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future, 1195.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] { 1196 opacity: 0; 1197 transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); 1198} 1199 1200 1201/* Concave */ 1202.reveal[data-background-transition=concave]>.backgrounds .slide-background.past, 1203.reveal>.backgrounds .slide-background.past[data-background-transition=concave] { 1204 opacity: 0; 1205 transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); 1206} 1207.reveal[data-background-transition=concave]>.backgrounds .slide-background.future, 1208.reveal>.backgrounds .slide-background.future[data-background-transition=concave] { 1209 opacity: 0; 1210 transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); 1211} 1212 1213.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past, 1214.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] { 1215 opacity: 0; 1216 transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); 1217} 1218.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future, 1219.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] { 1220 opacity: 0; 1221 transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); 1222} 1223 1224/* Zoom */ 1225.reveal[data-background-transition=zoom]>.backgrounds .slide-background, 1226.reveal>.backgrounds .slide-background[data-background-transition=zoom] { 1227 transition-timing-function: ease; 1228} 1229 1230.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past, 1231.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] { 1232 opacity: 0; 1233 visibility: hidden; 1234 transform: scale(16); 1235} 1236.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future, 1237.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] { 1238 opacity: 0; 1239 visibility: hidden; 1240 transform: scale(0.2); 1241} 1242 1243.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past, 1244.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] { 1245 opacity: 0; 1246 visibility: hidden; 1247 transform: scale(16); 1248} 1249.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future, 1250.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] { 1251 opacity: 0; 1252 visibility: hidden; 1253 transform: scale(0.2); 1254} 1255 1256 1257/* Global transition speed settings */ 1258.reveal[data-transition-speed="fast"]>.backgrounds .slide-background { 1259 transition-duration: 400ms; 1260} 1261.reveal[data-transition-speed="slow"]>.backgrounds .slide-background { 1262 transition-duration: 1200ms; 1263} 1264 1265 1266/********************************************* 1267 * OVERVIEW 1268 *********************************************/ 1269 1270.reveal.overview { 1271 perspective-origin: 50% 50%; 1272 perspective: 700px; 1273 1274 .slides { 1275 // Fixes overview rendering errors in FF48+, not applied to 1276 // other browsers since it degrades performance 1277 -moz-transform-style: preserve-3d; 1278 } 1279 1280 .slides section { 1281 height: 100%; 1282 top: 0 !important; 1283 opacity: 1 !important; 1284 overflow: hidden; 1285 visibility: visible !important; 1286 cursor: pointer; 1287 box-sizing: border-box; 1288 } 1289 .slides section:hover, 1290 .slides section.present { 1291 outline: 10px solid rgba(150,150,150,0.4); 1292 outline-offset: 10px; 1293 } 1294 .slides section .fragment { 1295 opacity: 1; 1296 transition: none; 1297 } 1298 .slides section:after, 1299 .slides section:before { 1300 display: none !important; 1301 } 1302 .slides>section.stack { 1303 padding: 0; 1304 top: 0 !important; 1305 background: none; 1306 outline: none; 1307 overflow: visible; 1308 } 1309 1310 .backgrounds { 1311 perspective: inherit; 1312 1313 // Fixes overview rendering errors in FF48+, not applied to 1314 // other browsers since it degrades performance 1315 -moz-transform-style: preserve-3d; 1316 } 1317 1318 .backgrounds .slide-background { 1319 opacity: 1; 1320 visibility: visible; 1321 1322 // This can't be applied to the slide itself in Safari 1323 outline: 10px solid rgba(150,150,150,0.1); 1324 outline-offset: 10px; 1325 } 1326 1327 .backgrounds .slide-background.stack { 1328 overflow: visible; 1329 } 1330} 1331 1332// Disable transitions transitions while we're activating 1333// or deactivating the overview mode. 1334.reveal.overview .slides section, 1335.reveal.overview-deactivating .slides section { 1336 transition: none; 1337} 1338 1339.reveal.overview .backgrounds .slide-background, 1340.reveal.overview-deactivating .backgrounds .slide-background { 1341 transition: none; 1342} 1343 1344 1345/********************************************* 1346 * RTL SUPPORT 1347 *********************************************/ 1348 1349.reveal.rtl .slides, 1350.reveal.rtl .slides h1, 1351.reveal.rtl .slides h2, 1352.reveal.rtl .slides h3, 1353.reveal.rtl .slides h4, 1354.reveal.rtl .slides h5, 1355.reveal.rtl .slides h6 { 1356 direction: rtl; 1357 font-family: sans-serif; 1358} 1359 1360.reveal.rtl pre, 1361.reveal.rtl code { 1362 direction: ltr; 1363} 1364 1365.reveal.rtl ol, 1366.reveal.rtl ul { 1367 text-align: right; 1368} 1369 1370.reveal.rtl .progress span { 1371 float: right 1372} 1373 1374/********************************************* 1375 * PARALLAX BACKGROUND 1376 *********************************************/ 1377 1378.reveal.has-parallax-background .backgrounds { 1379 transition: all 0.8s ease; 1380} 1381 1382/* Global transition speed settings */ 1383.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds { 1384 transition-duration: 400ms; 1385} 1386.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds { 1387 transition-duration: 1200ms; 1388} 1389 1390 1391/********************************************* 1392 * OVERLAY FOR LINK PREVIEWS AND HELP 1393 *********************************************/ 1394 1395.reveal > .overlay { 1396 position: absolute; 1397 top: 0; 1398 left: 0; 1399 width: 100%; 1400 height: 100%; 1401 z-index: 1000; 1402 background: rgba( 0, 0, 0, 0.9 ); 1403 opacity: 0; 1404 visibility: hidden; 1405 transition: all 0.3s ease; 1406} 1407 .reveal > .overlay.visible { 1408 opacity: 1; 1409 visibility: visible; 1410 } 1411 1412 .reveal > .overlay .spinner { 1413 position: absolute; 1414 display: block; 1415 top: 50%; 1416 left: 50%; 1417 width: 32px; 1418 height: 32px; 1419 margin: -16px 0 0 -16px; 1420 z-index: 10; 1421 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); 1422 1423 visibility: visible; 1424 opacity: 0.6; 1425 transition: all 0.3s ease; 1426 } 1427 1428 .reveal > .overlay header { 1429 position: absolute; 1430 left: 0; 1431 top: 0; 1432 width: 100%; 1433 height: 40px; 1434 z-index: 2; 1435 border-bottom: 1px solid #222; 1436 } 1437 .reveal > .overlay header a { 1438 display: inline-block; 1439 width: 40px; 1440 height: 40px; 1441 line-height: 36px; 1442 padding: 0 10px; 1443 float: right; 1444 opacity: 0.6; 1445 1446 box-sizing: border-box; 1447 } 1448 .reveal > .overlay header a:hover { 1449 opacity: 1; 1450 } 1451 .reveal > .overlay header a .icon { 1452 display: inline-block; 1453 width: 20px; 1454 height: 20px; 1455 1456 background-position: 50% 50%; 1457 background-size: 100%; 1458 background-repeat: no-repeat; 1459 } 1460 .reveal > .overlay header a.close .icon { 1461 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); 1462 } 1463 .reveal > .overlay header a.external .icon { 1464 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); 1465 } 1466 1467 .reveal > .overlay .viewport { 1468 position: absolute; 1469 display: flex; 1470 top: 40px; 1471 right: 0; 1472 bottom: 0; 1473 left: 0; 1474 } 1475 1476 .reveal > .overlay.overlay-preview .viewport iframe { 1477 width: 100%; 1478 height: 100%; 1479 max-width: 100%; 1480 max-height: 100%; 1481 border: 0; 1482 1483 opacity: 0; 1484 visibility: hidden; 1485 transition: all 0.3s ease; 1486 } 1487 1488 .reveal > .overlay.overlay-preview.loaded .viewport iframe { 1489 opacity: 1; 1490 visibility: visible; 1491 } 1492 1493 .reveal > .overlay.overlay-preview.loaded .viewport-inner { 1494 position: absolute; 1495 z-index: -1; 1496 left: 0; 1497 top: 45%; 1498 width: 100%; 1499 text-align: center; 1500 letter-spacing: normal; 1501 } 1502 .reveal > .overlay.overlay-preview .x-frame-error { 1503 opacity: 0; 1504 transition: opacity 0.3s ease 0.3s; 1505 } 1506 .reveal > .overlay.overlay-preview.loaded .x-frame-error { 1507 opacity: 1; 1508 } 1509 1510 .reveal > .overlay.overlay-preview.loaded .spinner { 1511 opacity: 0; 1512 visibility: hidden; 1513 transform: scale(0.2); 1514 } 1515 1516 .reveal > .overlay.overlay-help .viewport { 1517 overflow: auto; 1518 color: #fff; 1519 } 1520 1521 .reveal > .overlay.overlay-help .viewport .viewport-inner { 1522 width: 600px; 1523 margin: auto; 1524 padding: 20px 20px 80px 20px; 1525 text-align: center; 1526 letter-spacing: normal; 1527 } 1528 1529 .reveal > .overlay.overlay-help .viewport .viewport-inner .title { 1530 font-size: 20px; 1531 } 1532 1533 .reveal > .overlay.overlay-help .viewport .viewport-inner table { 1534 border: 1px solid #fff; 1535 border-collapse: collapse; 1536 font-size: 16px; 1537 } 1538 1539 .reveal > .overlay.overlay-help .viewport .viewport-inner table th, 1540 .reveal > .overlay.overlay-help .viewport .viewport-inner table td { 1541 width: 200px; 1542 padding: 14px; 1543 border: 1px solid #fff; 1544 vertical-align: middle; 1545 } 1546 1547 .reveal > .overlay.overlay-help .viewport .viewport-inner table th { 1548 padding-top: 20px; 1549 padding-bottom: 20px; 1550 } 1551 1552 1553/********************************************* 1554 * PLAYBACK COMPONENT 1555 *********************************************/ 1556 1557.reveal .playback { 1558 position: absolute; 1559 left: 15px; 1560 bottom: 20px; 1561 z-index: 30; 1562 cursor: pointer; 1563 transition: all 400ms ease; 1564 -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); 1565} 1566 1567.reveal.overview .playback { 1568 opacity: 0; 1569 visibility: hidden; 1570} 1571 1572 1573/********************************************* 1574 * CODE HIGHLGIHTING 1575 *********************************************/ 1576 1577.reveal .hljs table { 1578 margin: initial; 1579} 1580 1581.reveal .hljs-ln-code, 1582.reveal .hljs-ln-numbers { 1583 padding: 0; 1584 border: 0; 1585} 1586 1587.reveal .hljs-ln-numbers { 1588 opacity: 0.6; 1589 padding-right: 0.75em; 1590 text-align: right; 1591 vertical-align: top; 1592} 1593 1594.reveal .hljs.has-highlights tr:not(.highlight-line) { 1595 opacity: 0.4; 1596} 1597 1598.reveal .hljs:not(:first-child).fragment { 1599 position: absolute; 1600 top: 0; 1601 left: 0; 1602 width: 100%; 1603 box-sizing: border-box; 1604} 1605 1606 1607/********************************************* 1608 * ROLLING LINKS 1609 *********************************************/ 1610 1611.reveal .roll { 1612 display: inline-block; 1613 line-height: 1.2; 1614 overflow: hidden; 1615 1616 vertical-align: top; 1617 perspective: 400px; 1618 perspective-origin: 50% 50%; 1619} 1620 .reveal .roll:hover { 1621 background: none; 1622 text-shadow: none; 1623 } 1624.reveal .roll span { 1625 display: block; 1626 position: relative; 1627 padding: 0 2px; 1628 1629 pointer-events: none; 1630 transition: all 400ms ease; 1631 transform-origin: 50% 0%; 1632 transform-style: preserve-3d; 1633 backface-visibility: hidden; 1634} 1635 .reveal .roll:hover span { 1636 background: rgba(0,0,0,0.5); 1637 transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); 1638 } 1639.reveal .roll span:after { 1640 content: attr(data-title); 1641 1642 display: block; 1643 position: absolute; 1644 left: 0; 1645 top: 0; 1646 padding: 0 2px; 1647 backface-visibility: hidden; 1648 transform-origin: 50% 0%; 1649 transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); 1650} 1651 1652 1653/********************************************* 1654 * SPEAKER NOTES 1655 *********************************************/ 1656 1657$notesWidthPercent: 25%; 1658 1659// Hide on-page notes 1660.reveal aside.notes { 1661 display: none; 1662} 1663 1664// An interface element that can optionally be used to show the 1665// speaker notes to all viewers, on top of the presentation 1666.reveal .speaker-notes { 1667 display: none; 1668 position: absolute; 1669 width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%; 1670 height: 100%; 1671 top: 0; 1672 left: 100%; 1673 padding: 14px 18px 14px 18px; 1674 z-index: 1; 1675 font-size: 18px; 1676 line-height: 1.4; 1677 border: 1px solid rgba( 0, 0, 0, 0.05 ); 1678 color: #222; 1679 background-color: #f5f5f5; 1680 overflow: auto; 1681 box-sizing: border-box; 1682 text-align: left; 1683 font-family: Helvetica, sans-serif; 1684 -webkit-overflow-scrolling: touch; 1685 1686 .notes-placeholder { 1687 color: #ccc; 1688 font-style: italic; 1689 } 1690 1691 &:focus { 1692 outline: none; 1693 } 1694 1695 &:before { 1696 content: 'Speaker notes'; 1697 display: block; 1698 margin-bottom: 10px; 1699 opacity: 0.5; 1700 } 1701} 1702 1703 1704.reveal.show-notes { 1705 max-width: 100% - $notesWidthPercent; 1706 overflow: visible; 1707} 1708 1709.reveal.show-notes .speaker-notes { 1710 display: block; 1711} 1712 1713@media screen and (min-width: 1600px) { 1714 .reveal .speaker-notes { 1715 font-size: 20px; 1716 } 1717} 1718 1719@media screen and (max-width: 1024px) { 1720 .reveal.show-notes { 1721 border-left: 0; 1722 max-width: none; 1723 max-height: 70%; 1724 max-height: 70vh; 1725 overflow: visible; 1726 } 1727 1728 .reveal.show-notes .speaker-notes { 1729 top: 100%; 1730 left: 0; 1731 width: 100%; 1732 height: (30/0.7)*1%; 1733 height: 30vh; 1734 border: 0; 1735 } 1736} 1737 1738@media screen and (max-width: 600px) { 1739 .reveal.show-notes { 1740 max-height: 60%; 1741 max-height: 60vh; 1742 } 1743 1744 .reveal.show-notes .speaker-notes { 1745 top: 100%; 1746 height: (40/0.6)*1%; 1747 height: 40vh; 1748 } 1749 1750 .reveal .speaker-notes { 1751 font-size: 14px; 1752 } 1753} 1754 1755 1756/********************************************* 1757 * ZOOM PLUGIN 1758 *********************************************/ 1759 1760.zoomed .reveal *, 1761.zoomed .reveal *:before, 1762.zoomed .reveal *:after { 1763 backface-visibility: visible !important; 1764} 1765 1766.zoomed .reveal .progress, 1767.zoomed .reveal .controls { 1768 opacity: 0; 1769} 1770 1771.zoomed .reveal .roll span { 1772 background: none; 1773} 1774 1775.zoomed .reveal .roll span:after { 1776 visibility: hidden; 1777} 1778