files/reveal.js/css/reveal.scss in reveal-ck-3.8.1 vs files/reveal.js/css/reveal.scss in reveal-ck-3.9.0
- old
+ new
@@ -1,11 +1,11 @@
/*!
* reveal.js
- * http://lab.hakim.se/reveal-js
+ * http://revealjs.com
* MIT licensed
*
- * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
*/
/*********************************************
* RESET STYLES
@@ -158,20 +158,36 @@
&.visible {
transform: translate(0, 0);
}
}
+.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden;
&.current-fragment {
opacity: 1;
visibility: inherit;
}
}
+.reveal .slides section .fragment.fade-in-then-semi-out {
+ opacity: 0;
+ visibility: hidden;
+
+ &.visible {
+ opacity: 0.5;
+ visibility: inherit;
+ }
+
+ &.current-fragment {
+ opacity: 1;
+ visibility: inherit;
+ }
+}
+
.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-current-green,
.reveal .slides section .fragment.highlight-blue,
@@ -233,126 +249,316 @@
/*********************************************
* CONTROLS
*********************************************/
-.reveal .controls {
- display: none;
- position: fixed;
- width: 110px;
- height: 110px;
- z-index: 30;
- right: 10px;
- bottom: 10px;
-
- -webkit-user-select: none;
+@keyframes bounce-right {
+ 0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
+ 20% {transform: translateX(10px);}
+ 30% {transform: translateX(-5px);}
}
-.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 );
+@keyframes bounce-down {
+ 0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
+ 20% {transform: translateY(10px);}
+ 30% {transform: translateY(-5px);}
}
-.reveal .controls .enabled {
- opacity: 0.7;
- cursor: pointer;
-}
+$controlArrowSize: 3.6em;
+$controlArrowSpacing: 1.4em;
+$controlArrowLength: 2.6em;
+$controlArrowThickness: 0.5em;
+$controlsArrowAngle: 45deg;
+$controlsArrowAngleHover: 40deg;
+$controlsArrowAngleActive: 36deg;
-.reveal .controls .enabled:active {
- margin-top: 1px;
+@mixin controlsArrowTransform( $angle ) {
+ &:before {
+ transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
+ }
+
+ &:after {
+ transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
+ }
}
- .reveal .controls .navigate-left {
- top: 42px;
+.reveal .controls {
+ $spacing: 12px;
- border-right-width: 22px;
- border-right-color: #000;
+ display: none;
+ position: absolute;
+ top: auto;
+ bottom: $spacing;
+ right: $spacing;
+ left: auto;
+ z-index: 1;
+ color: #000;
+ pointer-events: none;
+ font-size: 10px;
+
+ button {
+ position: absolute;
+ padding: 0;
+ background-color: transparent;
+ border: 0;
+ outline: 0;
+ cursor: pointer;
+ color: currentColor;
+ transform: scale(.9999);
+ transition: color 0.2s ease,
+ opacity 0.2s ease,
+ transform 0.2s ease;
+ z-index: 2; // above slides
+ pointer-events: auto;
+ font-size: inherit;
+
+ visibility: hidden;
+ opacity: 0;
+
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
- .reveal .controls .navigate-left.fragmented {
- opacity: 0.3;
+
+ .controls-arrow:before,
+ .controls-arrow:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: $controlArrowLength;
+ height: $controlArrowThickness;
+ border-radius: $controlArrowThickness/2;
+ background-color: currentColor;
+
+ transition: all 0.15s ease, background-color 0.8s ease;
+ transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
+ will-change: transform;
+ }
+
+ .controls-arrow {
+ position: relative;
+ width: $controlArrowSize;
+ height: $controlArrowSize;
+
+ @include controlsArrowTransform( $controlsArrowAngle );
+
+ &:hover {
+ @include controlsArrowTransform( $controlsArrowAngleHover );
}
- .reveal .controls .navigate-right {
- left: 74px;
- top: 42px;
+ &:active {
+ @include controlsArrowTransform( $controlsArrowAngleActive );
+ }
+ }
- border-left-width: 22px;
- border-left-color: #000;
+ .navigate-left {
+ right: $controlArrowSize + $controlArrowSpacing*2;
+ bottom: $controlArrowSpacing + $controlArrowSize/2;
+ transform: translateX( -10px );
}
- .reveal .controls .navigate-right.fragmented {
- opacity: 0.3;
+
+ .navigate-right {
+ right: 0;
+ bottom: $controlArrowSpacing + $controlArrowSize/2;
+ transform: translateX( 10px );
+
+ .controls-arrow {
+ transform: rotate( 180deg );
}
- .reveal .controls .navigate-up {
- left: 42px;
+ &.highlight {
+ animation: bounce-right 2s 50 both ease-out;
+ }
+ }
- border-bottom-width: 22px;
- border-bottom-color: #000;
+ .navigate-up {
+ right: $controlArrowSpacing + $controlArrowSize/2;
+ bottom: $controlArrowSpacing*2 + $controlArrowSize;
+ transform: translateY( -10px );
+
+ .controls-arrow {
+ transform: rotate( 90deg );
+ }
}
- .reveal .controls .navigate-up.fragmented {
- opacity: 0.3;
+
+ .navigate-down {
+ right: $controlArrowSpacing + $controlArrowSize/2;
+ bottom: 0;
+ transform: translateY( 10px );
+
+ .controls-arrow {
+ transform: rotate( -90deg );
}
- .reveal .controls .navigate-down {
- left: 42px;
- top: 74px;
+ &.highlight {
+ animation: bounce-down 2s 50 both ease-out;
+ }
+ }
- border-top-width: 22px;
- border-top-color: #000;
+ // Back arrow style: "faded":
+ // Deemphasize backwards navigation arrows in favor of drawing
+ // attention to forwards navigation
+ &[data-controls-back-arrows="faded"] .navigate-left.enabled,
+ &[data-controls-back-arrows="faded"] .navigate-up.enabled {
+ opacity: 0.3;
+
+ &:hover {
+ opacity: 1;
+ }
}
- .reveal .controls .navigate-down.fragmented {
- opacity: 0.3;
+
+ // Back arrow style: "hidden":
+ // Never show arrows for backwards navigation
+ &[data-controls-back-arrows="hidden"] .navigate-left.enabled,
+ &[data-controls-back-arrows="hidden"] .navigate-up.enabled {
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ // Any control button that can be clicked is "enabled"
+ .enabled {
+ visibility: visible;
+ opacity: 0.9;
+ cursor: pointer;
+ transform: none;
+ }
+
+ // Any control button that leads to showing or hiding
+ // a fragment
+ .enabled.fragmented {
+ opacity: 0.5;
+ }
+
+ .enabled:hover,
+ .enabled.fragmented:hover {
+ opacity: 1;
+ }
+}
+
+// Adjust the layout when there are no vertical slides
+.reveal:not(.has-vertical-slides) .controls .navigate-left {
+ bottom: $controlArrowSpacing;
+ right: 0.5em + $controlArrowSpacing + $controlArrowSize;
+}
+
+.reveal:not(.has-vertical-slides) .controls .navigate-right {
+ bottom: $controlArrowSpacing;
+ right: 0.5em;
+}
+
+// Adjust the layout when there are no horizontal slides
+.reveal:not(.has-horizontal-slides) .controls .navigate-up {
+ right: $controlArrowSpacing;
+ bottom: $controlArrowSpacing + $controlArrowSize;
+}
+.reveal:not(.has-horizontal-slides) .controls .navigate-down {
+ right: $controlArrowSpacing;
+ bottom: 0.5em;
+}
+
+// Invert arrows based on background color
+.reveal.has-dark-background .controls {
+ color: #fff;
+}
+.reveal.has-light-background .controls {
+ color: #000;
+}
+
+// Disable active states on touch devices
+.reveal.no-hover .controls .controls-arrow:hover,
+.reveal.no-hover .controls .controls-arrow:active {
+ @include controlsArrowTransform( $controlsArrowAngle );
+}
+
+// Edge aligned controls layout
+@media screen and (min-width: 500px) {
+
+ $spacing: 8px;
+
+ .reveal .controls[data-controls-layout="edges"] {
+ & {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
}
+ .navigate-left,
+ .navigate-right,
+ .navigate-up,
+ .navigate-down {
+ bottom: auto;
+ right: auto;
+ }
+ .navigate-left {
+ top: 50%;
+ left: $spacing;
+ margin-top: -$controlArrowSize/2;
+ }
+
+ .navigate-right {
+ top: 50%;
+ right: $spacing;
+ margin-top: -$controlArrowSize/2;
+ }
+
+ .navigate-up {
+ top: $spacing;
+ left: 50%;
+ margin-left: -$controlArrowSize/2;
+ }
+
+ .navigate-down {
+ bottom: $spacing;
+ left: 50%;
+ margin-left: -$controlArrowSize/2;
+ }
+ }
+
+}
+
+
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
- position: fixed;
+ position: absolute;
display: none;
height: 3px;
width: 100%;
bottom: 0;
left: 0;
z-index: 10;
background-color: rgba( 0, 0, 0, 0.2 );
+ color: #fff;
}
.reveal .progress:after {
content: '';
display: block;
position: absolute;
- height: 20px;
+ height: 10px;
width: 100%;
- top: -20px;
+ top: -10px;
}
.reveal .progress span {
display: block;
height: 100%;
width: 0px;
- background-color: #000;
+ background-color: currentColor;
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
- position: fixed;
+ position: absolute;
display: block;
right: 8px;
bottom: 8px;
z-index: 31;
font-family: Helvetica, sans-serif;
@@ -361,10 +567,14 @@
color: #fff;
background-color: rgba( 0, 0, 0, 0.4 );
padding: 5px;
}
+.reveal .slide-number a {
+ color: currentColor;
+}
+
.reveal .slide-number-delimiter {
margin: 0 3px;
}
/*********************************************
@@ -377,10 +587,20 @@
height: 100%;
overflow: hidden;
touch-action: none;
}
+// Mobile Safari sometimes overlays a header at the top
+// of the page when in landscape mode. Using fixed
+// positioning ensures that reveal.js reduces its height
+// when this header is visible.
+@media only screen and (orientation : landscape) {
+ .reveal.ua-iphone {
+ position: fixed;
+ }
+}
+
.reveal .slides {
position: absolute;
width: 100%;
height: 100%;
top: 0;
@@ -434,10 +654,11 @@
}
.reveal .slides>section.stack {
padding-top: 0;
padding-bottom: 0;
+ pointer-events: none;
}
.reveal .slides>section.present,
.reveal .slides>section>section.present {
display: block;
@@ -811,10 +1032,29 @@
visibility: hidden;
opacity: 0;
z-index: 100;
transition: all 1s ease;
}
+
+.reveal .pause-overlay .resume-button {
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
+ color: #ccc;
+ border-radius: 2px;
+ padding: 6px 14px;
+ border: 2px solid #ccc;
+ font-size: 16px;
+ background: transparent;
+ cursor: pointer;
+
+ &:hover {
+ color: #fff;
+ border-color: #fff;
+ }
+}
+
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1;
}
@@ -884,15 +1124,22 @@
opacity: 0;
visibility: hidden;
overflow: hidden;
background-color: rgba( 0, 0, 0, 0 );
+
+ transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ }
+
+ .reveal .slide-background-content {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-
- transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.reveal .slide-background.stack {
display: block;
}
@@ -1334,16 +1581,17 @@
/*********************************************
* PLAYBACK COMPONENT
*********************************************/
.reveal .playback {
- position: fixed;
+ position: absolute;
left: 15px;
bottom: 20px;
z-index: 30;
cursor: pointer;
transition: all 400ms ease;
+ -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
.reveal.overview .playback {
opacity: 0;
visibility: hidden;
@@ -1408,40 +1656,87 @@
// 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;
+ width: 25vw;
+ height: 100%;
+ top: 0;
+ left: 100%;
+ padding: 14px 18px 14px 18px;
z-index: 1;
font-size: 18px;
line-height: 1.4;
- color: #fff;
- background-color: rgba(0,0,0,0.5);
+ border: 1px solid rgba( 0, 0, 0, 0.05 );
+ color: #222;
+ background-color: #f5f5f5;
overflow: auto;
box-sizing: border-box;
text-align: left;
font-family: Helvetica, sans-serif;
-webkit-overflow-scrolling: touch;
+
+ .notes-placeholder {
+ color: #ccc;
+ font-style: italic;
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ &:before {
+ content: 'Speaker notes';
+ display: block;
+ margin-bottom: 10px;
+ opacity: 0.5;
+ }
}
-.reveal .speaker-notes.visible:not(:empty) {
+
+.reveal.show-notes {
+ max-width: 75vw;
+ overflow: visible;
+}
+
+.reveal.show-notes .speaker-notes {
display: block;
}
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1600px) {
.reveal .speaker-notes {
- font-size: 14px;
+ font-size: 20px;
}
}
+@media screen and (max-width: 1024px) {
+ .reveal.show-notes {
+ border-left: 0;
+ max-width: none;
+ max-height: 70%;
+ overflow: visible;
+ }
+
+ .reveal.show-notes .speaker-notes {
+ top: 100%;
+ left: 0;
+ width: 100%;
+ height: (30/0.7)*1%;
+ }
+}
+
@media screen and (max-width: 600px) {
+ .reveal.show-notes {
+ max-height: 60%;
+ }
+
+ .reveal.show-notes .speaker-notes {
+ top: 100%;
+ height: (40/0.6)*1%;
+ }
+
.reveal .speaker-notes {
- width: 90%;
- left: 5%;
+ font-size: 14px;
}
}
/*********************************************