p-slides/css/p-slides.css

Presentations made simple with Web Components

@property --slide-aspect-ratio {
	syntax: '<number>';
	inherits: true;
	initial-value: calc(16 / 9);
}
@property --sliding-duration {
	syntax: '<time>';
	inherits: true;
	initial-value: 0s;
}
@property --fragment-duration {
	syntax: '<time>';
	inherits: true;
	initial-value: 300ms;
}
@property --speaker-next-scale {
	syntax: '<number>';
	inherits: true;
	initial-value: calc(2 / 3);
}
@property --grid-columns {
	syntax: '<integer>';
	inherits: true;
	initial-value: 4;
}
@property --grid-gap {
	syntax: '<length>';
	inherits: true;
	initial-value: 1px;
}

p-slide {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--slide-bg, white);
	width: calc(100cqmin * var(--slide-aspect-ratio));
	max-width: 100cqw;
	height: calc(100cqw / var(--slide-aspect-ratio));
	max-height: 100cqh;
	grid-area: 1 / 1;
	box-sizing: border-box;
	padding: 1em;
	position: relative;
	contain: paint;
	counter-increment: slide;
	animation: shuffle-out var(--sliding-duration) 1 forwards;
	--slide-previous: 0;
}
p-slide[aria-hidden='true'] {
	pointer-events: none;
}
p-slide[aria-hidden='false'] {
	animation-name: shuffle-in;
}
p-slide[previous] {
	--slide-previous: 1;
}

p-slide[aria-hidden='true']:has(+ [effect='slide']),
p-slide[effect='slide'][aria-hidden='true']:not([previous]) {
	animation-name: slide-out;
}
p-slide[previous][aria-hidden='false']:has(+ [effect='slide']),
p-slide[effect='slide'][aria-hidden='false']:not([previous]) {
	animation-name: slide-in;
}

p-slide[aria-hidden='true']:has(+ [effect='scroll']),
p-slide[effect='scroll'][aria-hidden='true']:not([previous]) {
	animation-name: scroll-out;
}
p-slide[previous][aria-hidden='false']:has(+ [effect='scroll']),
p-slide[effect='scroll'][aria-hidden='false']:not([previous]) {
	animation-name: scroll-in;
}

p-slide[aria-hidden='true']:has(+ [effect='fade']),
p-slide[effect='fade'][aria-hidden='true']:not([previous]) {
	animation-name: fade-out;
}
p-slide[previous][aria-hidden='false']:has(+ [effect='fade']),
p-slide[effect='fade'][aria-hidden='false']:not([previous]) {
	animation-name: fade-in;
}

p-slide > :is(img, video, canvas, svg, iframe) {
	align-self: center;
}

p-fragment,
[p-fragment] {
	opacity: 1;
	transition: opacity var(--fragment-duration);
}
:is(p-deck:not([mode='speaker']), p-deck[mode='speaker'] p-slide:not([aria-current='page'] ~ *))
	[aria-hidden='true']:is(p-fragment, [p-fragment]) {
	opacity: 0;
	pointer-events: none;
}

p-notes {
	display: none !important;
}

@keyframes shuffle-in {
	0% {
		transform: translate(0, 0) scale(0);
		z-index: -100;
	}
	50% {
		transform: translate(calc(50% - 100% * var(--slide-previous)), 0) scale(0.9);
	}
	100% {
		transform: translate(0, 0) scale(1);
		z-index: 100;
	}
}
@keyframes shuffle-out {
	0% {
		transform: translate(0, 0) scale(1);
		z-index: 100;
	}
	50% {
		transform: translate(calc(50% - 100% * var(--slide-previous)), 0) scale(0.9);
	}
	100% {
		transform: translate(0, 0) scale(0);
		z-index: -100;
	}
}

@keyframes slide-in {
	0% {
		translate: calc(100cqw - 200cqw * var(--slide-previous)) 0;
	}
	100% {
		translate: 0 0;
	}
}
@keyframes slide-out {
	0% {
		translate: 0 0;
	}
	100% {
		translate: calc(100cqw - 200cqw * var(--slide-previous)) 0;
	}
}

@keyframes scroll-in {
	0% {
		translate: 0 calc(100cqh - 200cqh * var(--slide-previous));
	}
	100% {
		translate: 0 0;
	}
}
@keyframes scroll-out {
	0% {
		translate: 0 0;
	}
	100% {
		translate: 0 calc(100cqh - 200cqh * var(--slide-previous));
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}