@shower/material
Version:
Material theme for Shower HTML presentation engine
79 lines (62 loc) • 1.29 kB
CSS
/* Table */
.slide table {
margin-left: calc(
var(--slide-left-side) * -1
);
margin-bottom: 1em;
width: calc(
100% +
var(--slide-left-side) +
var(--slide-right-side)
);
border-collapse: collapse;
border-spacing: 0;
}
/* Cells */
.slide th,
.slide td {
padding-top: 0;
padding-bottom: 0;
}
.slide th {
text-align: left;
font-weight: bold;
}
.slide th:first-child,
.slide td:first-child {
padding-left: var(--slide-left-side);
}
.slide th:last-child,
.slide td:last-child {
padding-right: var(--slide-left-side);
}
/* Lines */
.slide tr:not(:last-of-type) > * {
background-image:
linear-gradient(
to top,
var(--color-light) 0.06em,
transparent 0.06em
);
background-repeat: repeat-x;
}
/* Stripes */
.slide table.striped tr:nth-child(even) {
background-color: var(--color-back);
}
.slide table.striped tr > * {
background-image: none;
}
/* Marked Row */
.slide tr.mark {
background-color: var(--color-yellow);
}
/* Next Marked Row */
.slide tr.mark.next {
visibility: visible;
background-color: transparent;
}
.slide tr.mark.next.active,
.slide tr.mark.next.visited {
background-color: var(--color-yellow);
}