@shower/ribbon/styles/slide/content/code.css

Ribbon theme for Shower HTML presentation engine

/* Code */

.slide pre {
	margin-top: 0;
	margin-bottom: 1em;
	white-space: normal;
	counter-reset: code;
}

/* Inner */

.slide pre code {
	display: block;
	margin-left: calc(
		var(--slide-side) * -1
	);
	padding: 0 0 0 var(--slide-side);
	width: calc(
		100% + var(--slide-side) * 2
	);
	border-radius: 0;
	background-color: transparent;
	white-space: pre;
	tab-size: 4;
	line-height: 2;
}

/* Line Numbers */

.slide pre code:not(:only-child)::before {
	position: absolute;
	margin-left: -2em;
	color: var(--color-grey);
	counter-increment: code;
	content: counter(code, decimal-leading-zero) '.';
	opacity: 0.75;
}

/* Marked */

.slide pre mark {
	position: relative;
	z-index: -1;
	margin: 0 -0.3em;
}

/* Important */

.slide pre mark.important {
	background-color: var(--color-red);
	color: white;
}

/* Comment */

.slide pre .comment {
	color: #999999;
}

/* Marked Line */

.slide pre code:not(:only-child).mark {
	background-color: var(--color-yellow);
}

/* Next Line */

.slide pre code:not(:only-child).mark.next {
	background-color: transparent;
	visibility: visible;
}

.slide pre code:not(:only-child).mark.next.active,
.slide pre code:not(:only-child).mark.next.visited {
	background-color: var(--color-yellow);
}

/* Full */

.shower.full .slide pre code:not(:only-child).mark.next {
	background-color: transparent;
	visibility: visible;
}

.shower.full .slide pre code:not(:only-child).mark.next.active,
.shower.full .slide pre code:not(:only-child).mark.next.visited {
	background-color: var(--color-yellow);
}