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

Material theme for Shower HTML presentation engine

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