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