vendor/reveal.js/css/reveal.css in slide_hero-0.0.3 vs vendor/reveal.js/css/reveal.css in slide_hero-0.0.4
- old
+ new
@@ -177,13 +177,24 @@
}
.reveal .slides section .fragment.semi-fade-out.visible {
opacity: 0.5;
}
+.reveal .slides section .fragment.current-visible {
+ opacity:0;
+}
+
+.reveal .slides section .fragment.current-visible.current-fragment {
+ opacity:1;
+}
+
.reveal .slides section .fragment.highlight-red,
+.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
-.reveal .slides section .fragment.highlight-blue {
+.reveal .slides section .fragment.highlight-current-green,
+.reveal .slides section .fragment.highlight-blue,
+.reveal .slides section .fragment.highlight-current-blue {
opacity: 1;
}
.reveal .slides section .fragment.highlight-red.visible {
color: #ff2c2d
}
@@ -192,11 +203,21 @@
}
.reveal .slides section .fragment.highlight-blue.visible {
color: #1b91ff;
}
+.reveal .slides section .fragment.highlight-current-red.current-fragment {
+ color: #ff2c2d
+}
+.reveal .slides section .fragment.highlight-current-green.current-fragment {
+ color: #17ff2e;
+}
+.reveal .slides section .fragment.highlight-current-blue.current-fragment {
+ color: #1b91ff;
+}
+
/*********************************************
* DEFAULT ELEMENT STYLES
*********************************************/
/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
@@ -332,11 +353,11 @@
text-align: left;
padding-right: .3em;
}
.reveal table th {
- text-shadow: rgb(255,255,255) 1px 1px 2px;
+ font-weight: bold;
}
.reveal sup {
vertical-align: super;
}
@@ -474,11 +495,24 @@
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ position: fixed;
+ display: block;
+ right: 15px;
+ bottom: 15px;
+ opacity: 0.5;
+ z-index: 31;
+ font-size: 12px;
+}
+
/*********************************************
* SLIDES
*********************************************/
.reveal {
@@ -515,20 +549,24 @@
-moz-perspective-origin: 0px -100px;
-ms-perspective-origin: 0px -100px;
perspective-origin: 0px -100px;
}
+.reveal .slides>section {
+ -ms-perspective: 600px;
+}
+
.reveal .slides>section,
.reveal .slides>section>section {
display: none;
position: absolute;
width: 100%;
padding: 20px 0px;
z-index: 10;
line-height: 1.2em;
- font-weight: normal;
+ font-weight: inherit;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
@@ -705,10 +743,19 @@
/*********************************************
* ZOOM TRANSITION
*********************************************/
+.reveal .slides>section[data-transition=zoom],
+.reveal.zoom .slides>section {
+ -webkit-transition-timing-function: ease;
+ -moz-transition-timing-function: ease;
+ -ms-transition-timing-function: ease;
+ -o-transition-timing-function: ease;
+ transition-timing-function: ease;
+}
+
.reveal .slides>section[data-transition=zoom].past,
.reveal.zoom .slides>section.past {
opacity: 0;
visibility: hidden;
@@ -1048,12 +1095,12 @@
}
.reveal.fade.overview .slides section,
.reveal.fade.overview .slides>section>section,
-.reveal.fade.exit-overview .slides section,
-.reveal.fade.exit-overview .slides>section>section {
+.reveal.fade.overview-deactivating .slides section,
+.reveal.fade.overview-deactivating .slides>section>section {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
@@ -1262,10 +1309,15 @@
.reveal>.backgrounds {
position: absolute;
width: 100%;
height: 100%;
+
+ -webkit-perspective: 600px;
+ -moz-perspective: 600px;
+ -ms-perspective: 600px;
+ perspective: 600px;
}
.reveal .slide-background {
position: absolute;
width: 100%;
height: 100%;
@@ -1275,15 +1327,15 @@
background-color: rgba( 0, 0, 0, 0 );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
- -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.reveal .slide-background.present {
opacity: 1;
visibility: visible;
}
@@ -1301,25 +1353,19 @@
-ms-transition: none;
-o-transition: none;
transition: none;
}
-/* Linear sliding transition style */
+/* 2D slide */
.reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-
- -webkit-transition-duration: 800ms;
- -moz-transition-duration: 800ms;
- -ms-transition-duration: 800ms;
- -o-transition-duration: 800ms;
- transition-duration: 800ms;
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
@@ -1352,10 +1398,146 @@
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}
+/* Convex */
+.reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
+.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
+ opacity: 0;
+
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+}
+.reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
+.reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
+ opacity: 0;
+
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+}
+
+.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
+.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
+ opacity: 0;
+
+ -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
+ -moz-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
+ -ms-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
+}
+.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
+.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
+ opacity: 0;
+
+ -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
+ -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
+ -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
+}
+
+
+/* Concave */
+.reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
+.reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
+ opacity: 0;
+
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+}
+.reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
+.reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
+ opacity: 0;
+
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+}
+
+.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
+.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
+ opacity: 0;
+
+ -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
+ -moz-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
+ -ms-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
+}
+.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
+.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
+ opacity: 0;
+
+ -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
+ -moz-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
+ -ms-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
+}
+
+/* Zoom */
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background,
+.reveal>.backgrounds .slide-background[data-background-transition=zoom] {
+ -webkit-transition-timing-function: ease;
+ -moz-transition-timing-function: ease;
+ -ms-transition-timing-function: ease;
+ -o-transition-timing-function: ease;
+ transition-timing-function: ease;
+}
+
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
+.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
+ opacity: 0;
+ visibility: hidden;
+
+ -webkit-transform: scale(16);
+ -moz-transform: scale(16);
+ -ms-transform: scale(16);
+ -o-transform: scale(16);
+ transform: scale(16);
+}
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
+.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
+ opacity: 0;
+ visibility: hidden;
+
+ -webkit-transform: scale(0.2);
+ -moz-transform: scale(0.2);
+ -ms-transform: scale(0.2);
+ -o-transform: scale(0.2);
+ transform: scale(0.2);
+}
+
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
+.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
+ opacity: 0;
+ visibility: hidden;
+
+ -webkit-transform: scale(16);
+ -moz-transform: scale(16);
+ -ms-transform: scale(16);
+ -o-transform: scale(16);
+ transform: scale(16);
+}
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
+.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
+ opacity: 0;
+ visibility: hidden;
+
+ -webkit-transform: scale(0.2);
+ -moz-transform: scale(0.2);
+ -ms-transform: scale(0.2);
+ -o-transform: scale(0.2);
+ transform: scale(0.2);
+}
+
+
/* Global transition speed settings */
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
-webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration: 400ms;
@@ -1396,11 +1578,36 @@
.reveal.rtl .progress span {
float: right
}
+/*********************************************
+ * PARALLAX BACKGROUND
+ *********************************************/
+.reveal.has-parallax-background .backgrounds {
+ -webkit-transition: all 0.8s ease;
+ -moz-transition: all 0.8s ease;
+ -ms-transition: all 0.8s ease;
+ transition: all 0.8s ease;
+}
+
+/* Global transition speed settings */
+.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
+ -webkit-transition-duration: 400ms;
+ -moz-transition-duration: 400ms;
+ -ms-transition-duration: 400ms;
+ transition-duration: 400ms;
+}
+.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
+ -webkit-transition-duration: 1200ms;
+ -moz-transition-duration: 1200ms;
+ -ms-transition-duration: 1200ms;
+ transition-duration: 1200ms;
+}
+
+
/*********************************************
* LINK PREVIEW OVERLAY
*********************************************/
.reveal .preview-link-overlay {
@@ -1518,9 +1725,33 @@
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2);
}
+
+
+
+/*********************************************
+ * PLAYBACK COMPONENT
+ *********************************************/
+
+.reveal .playback {
+ position: fixed;
+ left: 15px;
+ bottom: 15px;
+ z-index: 30;
+ cursor: pointer;
+
+ -webkit-transition: all 400ms ease;
+ -moz-transition: all 400ms ease;
+ -ms-transition: all 400ms ease;
+ transition: all 400ms ease;
+}
+
+.reveal.overview .playback {
+ opacity: 0;
+ visibility: hidden;
+}
/*********************************************
* ROLLING LINKS
*********************************************/