/**
Basic CSS so that the slideshow script functions as a slideshow @author Lea Verou @version 1.0 */
/**
* "Variables" */
.slide, .delayed, .delayed-children > * {
transition:1s; transition-property: -webkit-transform, opacity, left, top, right, bottom;
}
/**
* Styles */ html, body { height: 100%; } body { margin: 0; } .slide { display: none; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; font-size:250%; line-height:1.6; } .slide.previous, .slide:target, .slide.next { display: block; opacity:0; overflow:hidden; } .slide:target { z-index:100; opacity:1; overflow: visible;
}
/**
Slide numbers */
indicator {
position: absolute; top: .05in; right: .5em; z-index: 1010; font-size: .15in; color: white; background: rgba(0,0,0,.25); font-weight: 900; text-shadow: .05em .05em .1em black; text-align: center; padding: .1em .3em 0; min-width: 1.6em; box-sizing: border-box; border-radius: 999px;
}
/* If there's nothing selected, show the first */ .slide:first-child {
z-index:2;
}
/* Delayed items that are shown incrementally after the slide is */ .delayed, .delayed-children > * {
opacity: 0;
}
.delayed.displayed, .delayed-children > .displayed {
opacity: .3;
}
.delayed.current, .delayed-children > .current, .delayed.displayed.non-dismissable, .delayed-children > .displayed.non-dismissable {
opacity: 1;
}
/**
iframe slides */
.iframe.slide {
padding: 0; text-align: center;
}
.iframe.slide > h1 { position: absolute; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,.5); font-size: 100%; } .iframe.slide > h1 > a { display: inline-block; padding: .2em .5em; color: white; text-align: center; text-decoration: none; text-shadow: .05em .05em .1em black; } .slide > iframe:only-of-type { display: none; position: absolute; border: 0; width: 100%; height: 100%; margin: 0; } .slide:target > iframe:only-of-type { display: block; }
/**
Show thumbnails */
.show-thumbnails {
overflow-x: hidden;
}
.show-thumbnails .slide, .presenter .slide.next {
width: 1024px; height: 768px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; overflow: hidden; position: static; opacity: 1; margin:-292px -395px; cursor: pointer; transform: scale(.2, .2); transition:1s transform;
}
.show-thumbnails.headers-only .slide {
display: none;
}
.show-thumbnails.headers-only header.slide {
display: block;
}
.show-thumbnails .slide .delayed, .presenter .slide:target + .slide .delayed {
opacity: 1;
}
.show-thumbnails .slide:hover, .show-thumbnails .slide:target, .presenter .slide:target + .slide {
outline: 20px solid rgba(255, 255, 255, .6); outline-radius:5px; box-shadow: 5px 5px 10px black;
}
.show-thumbnails .slide:target {
outline-color: rgba(255, 255, 255, .3);
}
.show-thumbnails .slide:target:hover {
outline-color: rgba(255, 255, 255, .9);
}
/* Display titles */ .show-thumbnails .slide:after {
content: attr(data-title); position: absolute; left: 0; right: 0; bottom: 0; padding: .1em 0; background: rgba(0,0,0,.5); color: white; font-size: 250%; text-align: center; text-shadow: .05em .05em .1em black; transform: none;
}
/* Hide all elements in slide by hitting Ctrl + J or Shift + J */ .hide-elements .slide:target > * {
opacity: 0; transition:.5s;
}
/* Timer */
timer {
position:absolute; top:0; left:0; z-index:101; width:0%; height:16px; line-height: 16px; padding: 0 5px; background:rgba(0,0,0,.5); overflow: hidden; text-align: right; box-sizing: border-box;
}
timer:before {
content: 'Progress '; text-transform: uppercase; color: white; font-size: 9px;
}
timer.end {
width: 100%;
}
/* Presenter & projector views */
.projector timer {
display: none;
}
.presenter-notes {
display: none; position: fixed; right: 230px; bottom: 0; left: 0; max-height: 6em; overflow: auto; padding: .6em 1em; font-size: 60%; line-height: 1.3; font-weight: normal; resize:vertical; background: rgba(255, 255, 255, .5); color: black; text-shadow: 0 1px white; box-shadow: .1em .1em .3em rgba(0,0,0,.5) inset;
}
.presenter .slide.next {
position: fixed; top: auto; right: 0; bottom: 0; left: auto; z-index: 100;
}
.presenter .slide:target > .presenter-notes {
display: block;
}