@shower/material
Version:
Material theme for Shower HTML presentation engine
90 lines (70 loc) • 1.7 kB
CSS
/* Code */
.slide pre {
margin-top: 0;
margin-bottom: 1em;
counter-reset: code;
white-space: normal;
}
/* Inner */
.slide pre code {
display: block;
margin-left: calc(
var(--slide-left-side) * -1
);
padding: 0 0 0 var(--slide-left-side);
width: calc(
100% +
var(--slide-left-side) +
var(--slide-right-side)
);
background-color: transparent;
line-height: 2;
white-space: pre;
-moz-tab-size: 4;
tab-size: 4;
}
/* Line Numbers */
.slide pre code:not(:only-child)::before {
position: absolute;
margin-left: -2em;
color: var(--color-light);
counter-increment: code;
content: counter(code, decimal-leading-zero) '.';
}
/* Marked */
.slide pre mark {
position: relative;
z-index: -1;
margin: 0 -0.3em;
}
/* Important */
.slide pre mark.important {
background-color: var(--color-key);
color: white;
}
/* Comment */
.slide pre .comment {
color: var(--color-medium);
}
/* Marked Line */
.slide pre code:not(:only-child).mark {
background-color: var(--color-yellow);
}
/* Next Line */
.slide pre code:not(:only-child).mark.next {
visibility: visible;
background-color: transparent;
}
.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 {
visibility: visible;
background-color: transparent;
}
.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);
}