* |
*
*/
.alert-block {
padding: 0.5em 1em;
border: 1px solid;
border-radius: 0.25em;
word-wrap: break-word; /* 1 */
}
.alert-block.success {
border-color: var(--clr-success-brdr);
background: var(--clr-success-bkgd);
}
.alert-block.warning {
border-color: var(--clr-warning-brdr);
background: var(--clr-warning-bkgd);
}
.alert-block.error {
border-color: var(--clr-error-brdr);
background: var(--clr-error-bkgd);
}
.alert-block.information {
border-color: var(--clr-info-brdr);
background: var(--clr-info-bkgd);
}
/**
* Alert pills.
*
* Example HTML:
*
*
*/
.alert-pill {
display: inline-block;
padding: 0.125em 0.33em;
font-weight: 400;
}
/* Embedded content
========================================================================== */
/**
* Make embedded elements responsive.
*/
img,
video {
max-width: 100%;
height: auto;
}
/**
* Images.
*
* 1. Remove the gap between images and the bottom of their containers.
*
* Image alignment (compatible with Textile markup syntax).
*
* Example HTML:
*
* ![]()
* ![]()
* ![]()
*/
img {
vertical-align: middle; /* 1 */
}
img.align-left {
margin: 1em 1em 1em 0;
float: left;
}
img.align-right {
margin: 1em 0 1em 1em;
float: right;
}
img.align-center {
display: block;
margin: 1em auto;
}
/**
* Bordered images.
*
* Example HTML:
*
* ![]()
*/
.img--bordered {
border: 1px solid var(--clr-brdr-lite);
}
/**
* Consistent margins on `figure`.
*/
figure {
margin: 1em 0;
}
/* Tables
========================================================================== */
/**
* Allow overflow scroll on tables.
*
* Example HTML:
*
*
*/
.tabular-data {
margin-bottom: 1em;
overflow-x: auto;
}
.tabular-data:focus {
outline: thin solid var(--clr-focus);
}
/**
* Consistent tables.
*/
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
/**
* Styling of table captions.
*/
caption {
margin-bottom: 0.5em;
font-style: italic;
text-align: left;
}
/**
* Make table cells align top and left by default and include border.
*/
th,
td {
min-width: 6em;
padding: 0.5em;
border: 1px solid var(--clr-brdr-lite);
vertical-align: top;
text-align: left;
}
/**
* Emphasize table header.
*/
thead tr {
background-color: var(--clr-grad-from);
}
thead th,
thead td {
border: 1px solid var(--clr-brdr);
color: var(--clr-text-promoted);
}
/**
* 'Zebra striping' of `tbody` rows.
*/
tbody tr:nth-child(even) {
background-color: var(--clr-bkgd-box);
}
tbody tr.selected {
background-color: var(--clr-nav-active);
}
tbody th {
font-weight: 400;
}
/**
* Adjust padding of table footer due to smaller font size.
*/
tfoot th,
tfoot td {
padding: 0.6666667em;
}
/**
* Multi-row span vertical cell alignments.
*/
[rowspan] {
vertical-align: middle;
}
/**
* Range values right in numerical cells.
*
* Example HTML:
*
*
* |
* |
* |
*
*/
.numerical {
text-align: right;
}
/**
* Set widths of `col` elements using classes whose numbers represent a percentage
* width for that column - we leave one column free of a class so that column can
* soak up the effects of any accidental breakage in the table.
*
* Example HTML:
*
*
*
*
*
*
*
*
*/
.t10 {
width: 10%;
}
.t20 {
width: 20%;
}
.t25 {
width: 25%;
}
.t33 {
width: 33.333%;
}
.t50 {
width: 50%;
}
.t66 {
width: 66.666%;
}
.t75 {
width: 75%;
}
.t80 {
width: 80%;
}
.t90 {
width: 90%;
}
/* Lists
========================================================================== */
/**
* Address paddings set differently.
*/
menu,
ol,
ul {
padding: 0 0 0 1.75em;
}
/**
* Remove margins from nested lists.
*/
li > ul,
li > ol {
margin: 0;
}
/**
* Remove margins from first/last lists within table cells.
*/
th ul:first-of-type,
th ol:first-of-type,
td ul:first-of-type,
td ol:first-of-type {
margin-top: 0;
}
th ul:last-of-type,
th ol:last-of-type,
td ul:last-of-type,
td ol:last-of-type {
margin-bottom: 0;
}
/**
* CSS Lists and Counters Module Level 3 list marker styling.
*/
li::marker {
color: var(--clr-text-promoted);
}
/**
* Style for definition lists.
*/
dl {
padding-bottom: 1em;
border-bottom: 1px solid var(--clr-brdr-lite);
}
dt {
margin-top: 1em;
margin-bottom: 1em;
padding-top: 1em;
border-top: 1px solid var(--clr-brdr-lite);
color: var(--clr-text-promoted);
font-weight: 700;
}
dt code {
border-color: var(--clr-info-brdr);
background-color: var(--clr-info-bkgd);
}
dd {
margin: 0 0 0 1.75em;
}
/**
* Have a list with no bullets/numerals.
*
* Example HTML:
*
*
*
*/
.list--no-bullets {
padding: 0;
list-style: none;
}
/**
* Have a numbered `ul` without the semantics implied by using an `ol`.
*
* Example HTML:
*
*
*/
.list--numbered {
list-style-type: decimal;
}
/**
* Have a 'file-tree'-style list (without any semantics implied).
*
* 1. Don't use ligatures on monospace font.
*
* Example HTML:
*
*
*
*/
.list--files,
.list--files ol,
.list--files ul {
list-style: none;
}
.list--files {
font-family: var(--font-monospaced);
font-feature-settings: normal; /* 1 */
font-size: 0.875rem;
}
.list--files ol,
.list--files ul {
position: relative;
}
.list--files ol::after,
.list--files ul::after {
content: "";
position: absolute;
bottom: 0.75em;
left: 0.5em;
height: 100%;
border-left: 1px solid var(--clr-brdr-x-dark);
}
.list--files li {
position: relative;
}
.list--files li::after {
content: "";
position: absolute;
top: 0;
left: -1.25em;
width: 0.75em;
height: 0.75em;
border-bottom: 1px solid var(--clr-brdr-x-dark);
border-left: 1px solid var(--clr-brdr-x-dark);
}
.list--files > li::after {
display: none;
}
.list--files .directory::before,
.list--files .directory--open::before,
.list--files .document::before,
.list--files .image::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-bottom: -2px;
padding-right: 0.5em;
overflow: hidden;
background-repeat: no-repeat;
background-size: 16px 16px;
vertical-align: baseline;
text-indent: -9999px;
}
@media (prefers-color-scheme: dark) {
.list--files ol::after,
.list--files ul::after {
border-color: var(--clr-brdr);
}
.list--files li::after {
border-color: var(--clr-brdr);
}
.list--files .directory::before,
.list--files .directory--open::before,
.list--files .document::before,
.list--files .image::before {
filter: brightness(3) sepia(1) hue-rotate(168deg) saturate(33%);
}
}
/**
* Have a compact definition list.
*
* Example HTML:
*
*
*/
.definitionlist--compact dt {
margin-bottom: 0;
}
.definitionlist--compact dd {
margin: 0;
}
/**
* Floated right buttons on list items.
*/
.button-list {
float: right;
}
/**
* Reference-mark notes lists (6 items).
*
* Example HTML:
*
*
*/
.list--refmarks {
padding: 0;
list-style: none;
}
.list--refmarks li:nth-of-type(1)::before {
content: "*" " ";
}
.list--refmarks li:nth-of-type(2)::before {
content: "†" " ";
}
.list--refmarks li:nth-of-type(3)::before {
content: "‡" " ";
}
.list--refmarks li:nth-of-type(4)::before {
content: "§" " ";
}
.list--refmarks li:nth-of-type(5)::before {
content: "¶" " ";
}
.list--refmarks li:nth-of-type(6)::before {
content: "‖" " ";
}
/**
* Documentation custom TOC lists. Allows for 2 sub-levels of nesting.
*
* Example HTML:
*
* (generated via Kramdown)
*
*/
/* stylelint-disable max-nesting-depth, selector-max-combinators, selector-max-compound-selectors, selector-max-type */
#markdown-toc,
.list--toc {
padding: 0;
list-style: none;
counter-reset: toc-h2-counter;
}
#markdown-toc ul,
.list--toc ul {
list-style: none;
}
#markdown-toc > li,
.list--toc > li {
counter-increment: toc-h2-counter;
}
#markdown-toc > li::before,
.list--toc > li::before {
content: counter(toc-h2-counter) " " " ";
}
#markdown-toc > li > ul,
.list--toc > li > ul {
counter-reset: toc-h3-counter;
}
#markdown-toc > li > ul > li,
.list--toc > li > ul > li {
counter-increment: toc-h3-counter;
}
#markdown-toc > li > ul > li::before,
.list--toc > li > ul > li::before {
content: counter(toc-h2-counter) "." counter(toc-h3-counter) " " " ";
}
#markdown-toc > li > ul > li > ul,
.list--toc > li > ul > li > ul {
counter-reset: toc-h4-counter;
}
#markdown-toc > li > ul > li > ul > li,
.list--toc > li > ul > li > ul > li {
counter-increment: toc-h4-counter;
}
#markdown-toc > li > ul > li > ul > li::before,
.list--toc > li > ul > li > ul > li::before {
content: counter(toc-h2-counter) "." counter(toc-h3-counter) "." counter(toc-h4-counter) " " " ";
}
#markdown-toc > li > ul > li > ul > li > ul,
.list--toc > li > ul > li > ul > li > ul {
counter-reset: toc-h5-counter;
}
#markdown-toc > li > ul > li > ul > li > ul > li,
.list--toc > li > ul > li > ul > li > ul > li {
counter-increment: toc-h5-counter;
}
#markdown-toc > li > ul > li > ul > li > ul > li::before,
.list--toc > li > ul > li > ul > li > ul > li::before {
content: counter(toc-h2-counter) "." counter(toc-h3-counter) "." counter(toc-h4-counter) "." counter(toc-h5-counter) " " " ";
}
#markdown-toc > li > ul > li > ul > li > ul ul,
.list--toc > li > ul > li > ul > li > ul ul {
counter-reset: toc-h6-counter;
}
#markdown-toc > li > ul > li > ul > li > ul ul li,
.list--toc > li > ul > li > ul > li > ul ul li {
counter-increment: toc-h6-counter;
}
#markdown-toc > li > ul > li > ul > li > ul ul li::before,
.list--toc > li > ul > li > ul > li > ul ul li::before {
content: counter(toc-h2-counter) "." counter(toc-h3-counter) "." counter(toc-h4-counter) "." counter(toc-h5-counter) "." counter(toc-h6-counter) " " " ";
}
/**
* Article sequentially-numbered h2/h3/h4 headings to complement TOC above.
*
* Example HTML:
*
*
* |