Merge pull request #1119 from hakimel/feature/new-overview
Refactored overview mode
This commit is contained in:
Hakim El Hattab
109
css/reveal.css
109
css/reveal.css
@ -624,63 +624,6 @@ body {
|
||||
-webkit-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;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.reveal.overview .slides section, .reveal.overview-deactivating .slides section {
|
||||
-webkit-transition: none !important;
|
||||
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; }
|
||||
|
||||
.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 !important;
|
||||
transition: none !important; }
|
||||
|
||||
/*********************************************
|
||||
* PAUSED MODE
|
||||
*********************************************/
|
||||
@ -901,6 +844,58 @@ body {
|
||||
-webkit-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
|
||||
*********************************************/
|
||||
|
||||
128
css/reveal.scss
128
css/reveal.scss
@ -739,64 +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;
|
||||
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;
|
||||
}
|
||||
|
||||
.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 !important;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PAUSED MODE
|
||||
*********************************************/
|
||||
@ -1037,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
|
||||
*********************************************/
|
||||
|
||||
Reference in New Issue
Block a user