cross browser adjustments for overview mode

edit
Hakim El Hattab 2015-01-27 19:27:55 +01:00
parent e29c706533
commit c8569e2d9f
3 changed files with 136 additions and 131 deletions

View File

@ -624,66 +624,6 @@ body {
-webkit-transition: none; -webkit-transition: none;
transition: none; } 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 * PAUSED MODE
*********************************************/ *********************************************/
@ -904,6 +844,58 @@ body {
-webkit-transition-duration: 1200ms; -webkit-transition-duration: 1200ms;
transition-duration: 1200ms; } 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 * RTL SUPPORT
*********************************************/ *********************************************/

View File

@ -739,69 +739,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 * PAUSED MODE
*********************************************/ *********************************************/
@ -1042,6 +979,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 * RTL SUPPORT
*********************************************/ *********************************************/

View File

@ -300,7 +300,11 @@
features.touch = !!( 'ontouchstart' in window ); 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.add( 'overview' );
dom.wrapper.classList.remove( 'overview-deactivating' ); dom.wrapper.classList.remove( 'overview-deactivating' );
setTimeout( function() { if( features.overviewTransitions ) {
dom.wrapper.classList.add( 'overview-animated' ); setTimeout( function() {
}, 1 ); dom.wrapper.classList.add( 'overview-animated' );
}, 1 );
}
// Don't auto-slide while in overview mode // Don't auto-slide while in overview mode
cancelAutoSlide(); cancelAutoSlide();
@ -1712,12 +1718,12 @@
// Layout slides // Layout slides
toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { 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' ) ) { if( hslide.classList.contains( 'stack' ) ) {
toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { 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 // Layout slide backgrounds
toArray( dom.background.childNodes ).forEach( function( hbackground, h ) { 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 ) { toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {
transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' ); transformElement( vbackground, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
} ); } );
} ); } );