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 --computed-font-size {
	syntax: '<length>';
	inherits: true;
	initial-value: 1rem;
}
@property --slide-width {
	syntax: '<length>';
	inherits: true;
	initial-value: 1px;
}
@property --slide-height {
	syntax: '<length>';
	inherits: true;
	initial-value: 1px;
}
@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: var(--slide-width);
	height: var(--slide-height);
	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-deck:is([mode='presentation'], :not([mode])) p-slide[aria-hidden='true'],
p-deck[mode='speaker'] p-slide {
	pointer-events: none;
}
p-slide[aria-hidden='false'] {
	animation-name: shuffle-in;
}
p-deck:is([mode='presentation'], :not([mode]), [mode='speaker']) p-slide[aria-hidden='false'] + p-slide ~ p-slide,
p-deck:is([mode='presentation'], :not([mode])) p-slide:has(~ p-slide + p-slide[aria-hidden='false']),
p-deck[mode='speaker'] p-slide:has(~ p-slide[aria-hidden='false']) {
	content-visibility: hidden;
}
p-deck[mode='grid'] p-slide {
	content-visibility: auto;
}

p-slide[previous] {
	--slide-previous: 1;
}
:is(p-deck[mode='grid']:not(:has(p-slide:hover)) p-slide, p-deck[mode='grid'] p-slide:hover) {
	border-radius: calc(var(--grid-gap) * var(--is-highlighted, 0) / 2);
	box-shadow: 0 0 0 calc(var(--grid-gap) * var(--is-highlighted, 0) / 2)
		var(--grid-highlight-color, color-mix(in srgb, LinkText, transparent));
	&::before {
		content: counter(slide);
		font-size: calc(var(--slide-width) / 20);
		position: absolute;
		inset: 0 auto auto 0;
		background: hsl(from currentColor h s calc(90 - l * 0.8));
		border-radius: 0.25em;
		padding: 0.25em 0.5em;
		pointer-events: none;
		opacity: var(--is-highlighted, 0);
	}
}

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

:is(p-fragment, [p-fragment]) {
	transition: opacity var(--fragment-duration);
}
:where(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;
}

:is(p-notes, [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;
	}
}