aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/reveal.css112
-rw-r--r--css/reveal.scss133
-rw-r--r--js/reveal.js22
3 files changed, 136 insertions, 131 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 69b7cf9..2e18ade 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -625,66 +625,6 @@ body {
transition: none; }
/*********************************************
- * OVERVIEW
- *********************************************/
-.reveal.overview {
- -webkit-perspective-origin: 50% 50%;
- perspective-origin: 50% 50%;
- -webkit-perspective: 700px;
- perspective: 700px; }
-
-.reveal.overview .slides section {
- height: 700px;
- overflow: hidden;
- opacity: 1 !important;
- visibility: visible !important;
- cursor: pointer;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- outline: 10px solid rgba(150, 150, 150, 0.1);
- outline-offset: 10px; }
-
-.reveal.overview .slides section, .reveal.overview-deactivating .slides section {
- -webkit-transition: none;
- transition: none; }
-
-.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, .reveal.overview .slides section.present {
- outline: 10px solid rgba(150, 150, 150, 0.5); }
-
-.reveal.overview .slides > section.stack {
- padding: 0;
- top: 0 !important;
- background: none;
- outline: none;
- overflow: visible; }
-
-.reveal.overview .backgrounds {
- -webkit-perspective: inherit;
- perspective: inherit; }
-
-.reveal.overview .backgrounds .slide-background {
- opacity: 1;
- visibility: visible; }
-
-.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
- -webkit-transition: none;
- transition: none; }
-
-.reveal.overview-animated .slides, .reveal.overview-animated .slides section {
- -webkit-transition: -webkit-transform 0.4s ease;
- transition: transform 0.4s ease; }
-
-/*********************************************
* PAUSED MODE
*********************************************/
.reveal .pause-overlay {
@@ -905,6 +845,58 @@ body {
transition-duration: 1200ms; }
/*********************************************
+ * OVERVIEW
+ *********************************************/
+.reveal.overview {
+ -webkit-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+ -webkit-perspective: 700px;
+ perspective: 700px; }
+ .reveal.overview .slides section {
+ height: 700px;
+ opacity: 1 !important;
+ overflow: hidden;
+ visibility: visible !important;
+ cursor: pointer;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
+ .reveal.overview .slides section:hover, .reveal.overview .slides section.present {
+ outline: 10px solid rgba(150, 150, 150, 0.4);
+ outline-offset: 10px; }
+ .reveal.overview .slides section .fragment {
+ opacity: 1;
+ -webkit-transition: none;
+ transition: none; }
+ .reveal.overview .slides section:after, .reveal.overview .slides section:before {
+ display: none !important; }
+ .reveal.overview .slides > section.stack {
+ padding: 0;
+ top: 0 !important;
+ background: none;
+ outline: none;
+ overflow: visible; }
+ .reveal.overview .backgrounds {
+ -webkit-perspective: inherit;
+ perspective: inherit; }
+ .reveal.overview .backgrounds .slide-background {
+ opacity: 1;
+ visibility: visible;
+ outline: 10px solid rgba(150, 150, 150, 0.1);
+ outline-offset: 10px; }
+
+.reveal.overview .slides section, .reveal.overview-deactivating .slides section {
+ -webkit-transition: none;
+ transition: none; }
+
+.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
+ -webkit-transition: none;
+ transition: none; }
+
+.reveal.overview-animated .slides, .reveal.overview-animated .slides section, .reveal.overview-animated .backgrounds .slide-background {
+ -webkit-transition: -webkit-transform 0.4s ease;
+ transition: transform 0.4s ease; }
+
+/*********************************************
* RTL SUPPORT
*********************************************/
.reveal.rtl .slides, .reveal.rtl .slides h1, .reveal.rtl .slides h2, .reveal.rtl .slides h3, .reveal.rtl .slides h4, .reveal.rtl .slides h5, .reveal.rtl .slides h6 {
diff --git a/css/reveal.scss b/css/reveal.scss
index b3f3bdc..70fe2c1 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -740,69 +740,6 @@ body {
/*********************************************
- * OVERVIEW
- *********************************************/
-
-.reveal.overview {
- perspective-origin: 50% 50%;
- perspective: 700px;
-}
-.reveal.overview .slides section {
- height: 700px;
- overflow: hidden;
- opacity: 1 !important;
- visibility: visible !important;
- cursor: pointer;
- box-sizing: border-box;
- outline: 10px solid rgba(150,150,150,0.1);
- outline-offset: 10px;
-}
-.reveal.overview .slides section,
-.reveal.overview-deactivating .slides section {
- transition: none;
-}
-.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,
- .reveal.overview .slides section.present {
- outline: 10px solid rgba(150,150,150,0.5);
- }
-.reveal.overview .slides>section.stack {
- padding: 0;
- top: 0 !important;
- background: none;
- outline: none;
- overflow: visible;
-}
-
-.reveal.overview .backgrounds {
- perspective: inherit;
-}
-.reveal.overview .backgrounds .slide-background {
- opacity: 1;
- visibility: visible;
-}
-.reveal.overview .backgrounds .slide-background,
-.reveal.overview-deactivating .backgrounds .slide-background {
- transition: none;
-}
-
-.reveal.overview-animated .slides,
-.reveal.overview-animated .slides section {
- transition: transform 0.4s ease;
-}
-
-
-/*********************************************
* PAUSED MODE
*********************************************/
@@ -1043,6 +980,76 @@ 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,
+.reveal.overview-animated .slides section,
+.reveal.overview-animated .backgrounds .slide-background {
+ transition: transform 0.4s ease;
+}
+
+
+/*********************************************
* RTL SUPPORT
*********************************************/
diff --git a/js/reveal.js b/js/reveal.js
index ddbe800..37c6831 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -300,7 +300,11 @@
features.touch = !!( 'ontouchstart' in window );
- isMobileDevice = navigator.userAgent.match( /(iphone|ipod|ipad|android)/gi );
+ // Transitions in the overview are disabled in desktop and
+ // mobile Safari since they lag terribly
+ features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( navigator.userAgent );
+
+ isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( navigator.userAgent );
}
@@ -1647,9 +1651,11 @@
dom.wrapper.classList.add( 'overview' );
dom.wrapper.classList.remove( 'overview-deactivating' );
- setTimeout( function() {
- dom.wrapper.classList.add( 'overview-animated' );
- }, 1 );
+ if( features.overviewTransitions ) {
+ setTimeout( function() {
+ dom.wrapper.classList.add( 'overview-animated' );
+ }, 1 );
+ }
// Don't auto-slide while in overview mode
cancelAutoSlide();
@@ -1712,12 +1718,12 @@
// Layout slides
toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
- transformElement( hslide, 'translateX(' + ( h * slideWidth ) + 'px)' );
+ transformElement( hslide, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
if( hslide.classList.contains( 'stack' ) ) {
toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {
- transformElement( vslide, 'translateY(' + ( v * slideHeight ) + 'px)' );
+ transformElement( vslide, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
} );
}
@@ -1725,10 +1731,10 @@
// Layout slide backgrounds
toArray( dom.background.childNodes ).forEach( function( hbackground, h ) {
- transformElement( hbackground, 'translateX(' + ( h * slideWidth ) + 'px)' );
+ transformElement( hbackground, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {
- transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' );
+ transformElement( vbackground, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
} );
} );
generated by cgit v1.2.3 (git 2.25.4) at 2024-06-13 03:16:33 +0000