slideshow.css

/**
	Basic CSS so that the slideshow script functions as a slideshow
	@author Lea Verou
	@version 1.0
 */

/**
 * "Variables"
 */
.slide,
.delayed,
.delayed-children > * {
	transition:.5s;
	transition-property: transform, opacity, left, top, right, bottom, background;
}

/**
 * Styles
 */

 html, body {
 	height: 100%;
 }

 body {
 	margin: 0;
 }

.slide {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1;

	font-size: 250%;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.slide {
		font-size: 195%;
	}
}

/* So that people can override and do things like
   .slide { display: flex; }
   without having to specify :not(.target) all the bloody time
*/
body:not(.show-thumbnails) .slide:not(.previous):not(:target):not(.next) {
	display: none !important;
}

 .slide.previous,
 .slide:target,
 .slide.next {
	visibility: hidden;
	overflow:hidden;
 }

 .slide:target {
 	z-index: 100;
 	opacity: 1;
 	visibility: visible;
 	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;
}

/**
 	On-screen navigation
 */
#onscreen-nav {
	z-index: 1010;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 1em 1em;
	font-size: 150%;
	opacity: 0;
	transition: 1s opacity;
}

@media (-webkit-min-device-pixel-ratio: 2) {
	#onscreen-nav {
		opacity: 1;
	}
}

#onscreen-nav:hover {
	opacity: 1;
}

	#onscreen-nav:not(:hover) button {
		margin-top: -1.5em;
		pointer-events: none;
	}

	button.onscreen-nav {
		float: right;
		padding: .2em .5em;
		border: 0;
		border-radius: .3em;
		background: rgba(0,0,0,.5);
		color: white;
		text-shadow: 0 -.05em .05em black;
		text-transform: uppercase;
		cursor: pointer;
	}

	button.onscreen-nav:hover {
		background: black;
	}

	button.onscreen-nav.prev {
		float: left;
	}

/* 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, /* non-dismissable name is deprecated */
.delayed.displayed.persistent,
.delayed-children > .displayed.persistent,
.delayed-children.persistent > .displayed {
	opacity: 1;
}

/**
	iframe slides
 */
.iframe.slide {
	padding: 0 !important;
	background: white;
	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: 0 -.05em .05em black;
		}

	.slide > iframe:only-of-type,
	iframe.csss-import {
		position: absolute;
		top: 0;
		left: 0;
		border: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}

iframe.csss-import {

}

iframe.csss-import:not(.show) {
	z-index: -1;
	visibility: hidden;
}

iframe.csss-import.show {
	visibility: visible;
	z-index: 101;
}

/**
	Show thumbnails
 */

.show-thumbnails {
	overflow-x: hidden;
}

.show-thumbnails .slide,
.presenter .slide.next {
	width: 1024px;
	height: 768px;
	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:not(header) {
	display: none !important;
}

.show-thumbnails .slide .delayed,
.presenter .slide:target + .slide .delayed {
	opacity: 1 !important;
}

.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[data-title]:not(header):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;
	transition: linear;
}

	#timer:before {
		content: 'Progress ';
		text-transform: uppercase;
		color: white;
		font-size: 9px;
	}

#timer.end {
	width: 100%;
}

#timer.end.overtime {
	width: 0%;
	left: auto;
	right: 0;
}

/* 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;
}