diff options
Diffstat (limited to 'css/reveal.scss')
| -rw-r--r-- | css/reveal.scss | 420 |
1 files changed, 257 insertions, 163 deletions
diff --git a/css/reveal.scss b/css/reveal.scss index 6cc21ba..da1fb22 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -3,7 +3,7 @@ * http://lab.hakim.se/reveal-js * MIT licensed * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * Copyright (C) 2016 Hakim El Hattab, http://hakim.se */ @@ -57,16 +57,13 @@ body { color: #000; } -::-moz-selection { - background: #FF5E99; - color: #fff; - text-shadow: none; +// Ensures that the main background color matches the +// theme in fullscreen mode +html:-webkit-full-screen-ancestor { + background-color: inherit; } - -::selection { - background: #FF5E99; - color: #fff; - text-shadow: none; +html:-moz-full-screen-ancestor { + background-color: inherit; } @@ -107,15 +104,7 @@ body { transform: scale( 0.1 ); &.visible { - transform: scale( 1 ); - } -} - -.reveal .slides section .fragment.roll-in { - transform: rotateX( 90deg ); - - &.visible { - transform: rotateX( 0 ); + transform: none; } } @@ -141,12 +130,45 @@ body { .reveal .slides section .fragment.strike { opacity: 1; + visibility: visible; &.visible { text-decoration: line-through; } } +.reveal .slides section .fragment.fade-up { + transform: translate(0, 20%); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .slides section .fragment.fade-down { + transform: translate(0, -20%); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .slides section .fragment.fade-right { + transform: translate(-20%, 0); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .slides section .fragment.fade-left { + transform: translate(20%, 0); + + &.visible { + transform: translate(0, 0); + } +} + .reveal .slides section .fragment.current-visible { opacity: 0; visibility: hidden; @@ -234,66 +256,68 @@ body { -webkit-user-select: none; } -.reveal .controls div { +.reveal .controls button { + padding: 0; position: absolute; opacity: 0.05; width: 0; height: 0; + background-color: transparent; border: 12px solid transparent; transform: scale(.9999); transition: all 0.2s ease; - + -webkit-appearance: none; -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); } -.reveal .controls div.enabled { +.reveal .controls .enabled { opacity: 0.7; cursor: pointer; } -.reveal .controls div.enabled:active { +.reveal .controls .enabled:active { margin-top: 1px; } - .reveal .controls div.navigate-left { + .reveal .controls .navigate-left { top: 42px; border-right-width: 22px; border-right-color: #000; } - .reveal .controls div.navigate-left.fragmented { + .reveal .controls .navigate-left.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-right { + .reveal .controls .navigate-right { left: 74px; top: 42px; border-left-width: 22px; border-left-color: #000; } - .reveal .controls div.navigate-right.fragmented { + .reveal .controls .navigate-right.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-up { + .reveal .controls .navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #000; } - .reveal .controls div.navigate-up.fragmented { + .reveal .controls .navigate-up.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-down { + .reveal .controls .navigate-down { left: 42px; top: 74px; border-top-width: 22px; border-top-color: #000; } - .reveal .controls div.navigate-down.fragmented { + .reveal .controls .navigate-down.fragmented { opacity: 0.3; } @@ -337,11 +361,19 @@ body { .reveal .slide-number { position: fixed; display: block; - right: 15px; - bottom: 15px; - opacity: 0.5; + right: 8px; + bottom: 8px; z-index: 31; + font-family: Helvetica, sans-serif; font-size: 12px; + line-height: 1; + color: #fff; + background-color: rgba( 0, 0, 0, 0.4 ); + padding: 5px; +} + +.reveal .slide-number-delimiter { + margin: 0 3px; } /********************************************* @@ -352,6 +384,7 @@ body { position: relative; width: 100%; height: 100%; + overflow: hidden; touch-action: none; } @@ -447,93 +480,102 @@ body { /********************************************* - * SLIDE TRANSITION - * Aliased 'linear' for backwards compatibility + * Mixins for readability of transitions *********************************************/ -.reveal.slide section, -.reveal.linear section { - backface-visibility: hidden; +@mixin transition-global($style) { + .reveal .slides section[data-transition=#{$style}], + .reveal.#{$style} .slides section:not([data-transition]) { + @content; + } } - -.reveal .slides>section[data-transition=slide].past, -.reveal.slide .slides>section:not([data-transition]).past, -.reveal .slides>section[data-transition=linear].past, -.reveal.linear .slides>section:not([data-transition]).past { - transform: translate(-150%, 0); +@mixin transition-horizontal-past($style) { + .reveal .slides>section[data-transition=#{$style}].past, + .reveal .slides>section[data-transition~=#{$style}-out].past, + .reveal.#{$style} .slides>section:not([data-transition]).past { + @content; + } } -.reveal .slides>section[data-transition=slide].future, -.reveal.slide .slides>section:not([data-transition]).future, -.reveal .slides>section[data-transition=linear].future, -.reveal.linear .slides>section:not([data-transition]).future { - transform: translate(150%, 0); +@mixin transition-horizontal-future($style) { + .reveal .slides>section[data-transition=#{$style}].future, + .reveal .slides>section[data-transition~=#{$style}-in].future, + .reveal.#{$style} .slides>section:not([data-transition]).future { + @content; + } } -.reveal .slides>section>section[data-transition=slide].past, -.reveal.slide .slides>section>section:not([data-transition]).past, -.reveal .slides>section>section[data-transition=linear].past, -.reveal.linear .slides>section>section:not([data-transition]).past { - transform: translate(0, -150%); +@mixin transition-vertical-past($style) { + .reveal .slides>section>section[data-transition=#{$style}].past, + .reveal .slides>section>section[data-transition~=#{$style}-out].past, + .reveal.#{$style} .slides>section>section:not([data-transition]).past { + @content; + } } -.reveal .slides>section>section[data-transition=slide].future, -.reveal.slide .slides>section>section:not([data-transition]).future, -.reveal .slides>section>section[data-transition=linear].future, -.reveal.linear .slides>section>section:not([data-transition]).future { - transform: translate(0, 150%); +@mixin transition-vertical-future($style) { + .reveal .slides>section>section[data-transition=#{$style}].future, + .reveal .slides>section>section[data-transition~=#{$style}-in].future, + .reveal.#{$style} .slides>section>section:not([data-transition]).future { + @content; + } } +/********************************************* + * SLIDE TRANSITION + * Aliased 'linear' for backwards compatibility + *********************************************/ + +@each $stylename in slide, linear { + .reveal.#{$stylename} section { + backface-visibility: hidden; + } + @include transition-horizontal-past(#{$stylename}) { + transform: translate(-150%, 0); + } + @include transition-horizontal-future(#{$stylename}) { + transform: translate(150%, 0); + } + @include transition-vertical-past(#{$stylename}) { + transform: translate(0, -150%); + } + @include transition-vertical-future(#{$stylename}) { + transform: translate(0, 150%); + } +} /********************************************* * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ -.reveal .slides>section[data-transition=default].past, -.reveal.default .slides>section:not([data-transition]).past, -.reveal .slides>section[data-transition=convex].past, -.reveal.convex .slides>section:not([data-transition]).past { - transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -} -.reveal .slides>section[data-transition=default].future, -.reveal.default .slides>section:not([data-transition]).future, -.reveal .slides>section[data-transition=convex].future, -.reveal.convex .slides>section:not([data-transition]).future { - transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -} - -.reveal .slides>section>section[data-transition=default].past, -.reveal.default .slides>section>section:not([data-transition]).past, -.reveal .slides>section>section[data-transition=convex].past, -.reveal.convex .slides>section>section:not([data-transition]).past { - transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -} -.reveal .slides>section>section[data-transition=default].future, -.reveal.default .slides>section>section:not([data-transition]).future, -.reveal .slides>section>section[data-transition=convex].future, -.reveal.convex .slides>section>section:not([data-transition]).future { - transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); +@each $stylename in default, convex { + @include transition-horizontal-past(#{$stylename}) { + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + } + @include transition-horizontal-future(#{$stylename}) { + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + } + @include transition-vertical-past(#{$stylename}) { + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + } + @include transition-vertical-future(#{$stylename}) { + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + } } - /********************************************* * CONCAVE TRANSITION *********************************************/ -.reveal .slides>section[data-transition=concave].past, -.reveal.concave .slides>section:not([data-transition]).past { +@include transition-horizontal-past(concave) { transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } -.reveal .slides>section[data-transition=concave].future, -.reveal.concave .slides>section:not([data-transition]).future { +@include transition-horizontal-future(concave) { transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } - -.reveal .slides>section>section[data-transition=concave].past, -.reveal.concave .slides>section>section:not([data-transition]).past { +@include transition-vertical-past(concave) { transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } -.reveal .slides>section>section[data-transition=concave].future, -.reveal.concave .slides>section>section:not([data-transition]).future { +@include transition-vertical-future(concave) { transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); } @@ -542,28 +584,21 @@ body { * ZOOM TRANSITION *********************************************/ -.reveal .slides>section[data-transition=zoom], -.reveal.zoom .slides>section:not([data-transition]) { +@include transition-global(zoom) { transition-timing-function: ease; } - -.reveal .slides>section[data-transition=zoom].past, -.reveal.zoom .slides>section:not([data-transition]).past { +@include transition-horizontal-past(zoom) { visibility: hidden; transform: scale(16); } -.reveal .slides>section[data-transition=zoom].future, -.reveal.zoom .slides>section:not([data-transition]).future { +@include transition-horizontal-future(zoom) { visibility: hidden; transform: scale(0.2); } - -.reveal .slides>section>section[data-transition=zoom].past, -.reveal.zoom .slides>section>section:not([data-transition]).past { +@include transition-vertical-past(zoom) { transform: translate(0, -150%); } -.reveal .slides>section>section[data-transition=zoom].future, -.reveal.zoom .slides>section>section:not([data-transition]).future { +@include transition-vertical-future(zoom) { transform: translate(0, 150%); } @@ -732,61 +767,13 @@ body { * NO TRANSITION *********************************************/ -.reveal .slides section[data-transition=none], -.reveal.none .slides section:not([data-transition]) { +@include transition-global(none) { transform: none; transition: none; } /********************************************* - * OVERVIEW - *********************************************/ - -.reveal.overview .slides { - perspective-origin: 50% 50%; - perspective: 700px; -} - -.reveal.overview .slides section { - height: 700px; - overflow: hidden; - opacity: 1 !important; - visibility: visible !important; - cursor: pointer; - background: rgba(0,0,0,0.1); - box-sizing: border-box; -} -.reveal.overview .slides section, -.reveal.overview-deactivating .slides section { - transition: none !important; -} -.reveal.overview .slides section .fragment { - opacity: 1; -} -.reveal.overview .slides section:after, -.reveal.overview .slides section:before { - display: none !important; -} -.reveal.overview .slides section>section { - opacity: 1; - cursor: pointer; -} - .reveal.overview .slides section:hover { - background: rgba(0,0,0,0.3); - } - .reveal.overview .slides section.present { - background: rgba(0,0,0,0.3); - } -.reveal.overview .slides>section.stack { - padding: 0; - top: 0 !important; - background: none; - overflow: visible; -} - - -/********************************************* * PAUSED MODE *********************************************/ @@ -857,7 +844,7 @@ body { * PER-SLIDE BACKGROUNDS *********************************************/ -.reveal>.backgrounds { +.reveal .backgrounds { position: absolute; width: 100%; height: 100%; @@ -1027,6 +1014,74 @@ body { /********************************************* + * OVERVIEW + *********************************************/ + +.reveal.overview { + perspective-origin: 50% 50%; + perspective: 700px; + + .slides section { + height: 700px; + opacity: 1 !important; + overflow: hidden; + visibility: visible !important; + cursor: pointer; + box-sizing: border-box; + } + .slides section:hover, + .slides section.present { + outline: 10px solid rgba(150,150,150,0.4); + outline-offset: 10px; + } + .slides section .fragment { + opacity: 1; + transition: none; + } + .slides section:after, + .slides section:before { + display: none !important; + } + .slides>section.stack { + padding: 0; + top: 0 !important; + background: none; + outline: none; + overflow: visible; + } + + .backgrounds { + perspective: inherit; + } + + .backgrounds .slide-background { + opacity: 1; + visibility: visible; + + // This can't be applied to the slide itself in Safari + outline: 10px solid rgba(150,150,150,0.1); + outline-offset: 10px; + } +} + +// Disable transitions transitions while we're activating +// or deactivating the overview mode. +.reveal.overview .slides section, +.reveal.overview-deactivating .slides section { + transition: none; +} + +.reveal.overview .backgrounds .slide-background, +.reveal.overview-deactivating .backgrounds .slide-background { + transition: none; +} + +.reveal.overview-animated .slides { + transition: transform 0.4s ease; +} + + +/********************************************* * RTL SUPPORT *********************************************/ @@ -1149,6 +1204,7 @@ body { .reveal .overlay .viewport { position: absolute; + display: flex; top: 40px; right: 0; bottom: 0; @@ -1185,8 +1241,8 @@ body { .reveal .overlay.overlay-help .viewport .viewport-inner { width: 600px; - margin: 0 auto; - padding: 60px; + margin: auto; + padding: 20px 20px 80px 20px; text-align: center; letter-spacing: normal; } @@ -1198,13 +1254,13 @@ body { .reveal .overlay.overlay-help .viewport .viewport-inner table { border: 1px solid #fff; border-collapse: collapse; - font-size: 14px; + font-size: 16px; } .reveal .overlay.overlay-help .viewport .viewport-inner table th, .reveal .overlay.overlay-help .viewport .viewport-inner table td { width: 200px; - padding: 10px; + padding: 14px; border: 1px solid #fff; vertical-align: middle; } @@ -1223,7 +1279,7 @@ body { .reveal .playback { position: fixed; left: 15px; - bottom: 15px; + bottom: 20px; z-index: 30; cursor: pointer; transition: all 400ms ease; @@ -1285,10 +1341,50 @@ body { * SPEAKER NOTES *********************************************/ +// Hide on-page notes .reveal aside.notes { display: none; } +// An interface element that can optionally be used to show the +// speaker notes to all viewers, on top of the presentation +.reveal .speaker-notes { + display: none; + position: absolute; + width: 70%; + max-height: 15%; + left: 15%; + bottom: 26px; + padding: 10px; + z-index: 1; + font-size: 18px; + line-height: 1.4; + color: #fff; + background-color: rgba(0,0,0,0.5); + overflow: auto; + box-sizing: border-box; + text-align: left; + font-family: Helvetica, sans-serif; + -webkit-overflow-scrolling: touch; +} + +.reveal .speaker-notes.visible:not(:empty) { + display: block; +} + +@media screen and (max-width: 1024px) { + .reveal .speaker-notes { + font-size: 14px; + } +} + +@media screen and (max-width: 600px) { + .reveal .speaker-notes { + width: 90%; + left: 5%; + } +} + /********************************************* * ZOOM PLUGIN @@ -1312,5 +1408,3 @@ body { .zoomed .reveal .roll span:after { visibility: hidden; } - - |