1517 lines
54 KiB
CSS
1517 lines
54 KiB
CSS
/*
|
|
This file is part of m.css.
|
|
|
|
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a
|
|
copy of this software and associated documentation files (the "Software"),
|
|
to deal in the Software without restriction, including without limitation
|
|
the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
and/or sell copies of the Software, and to permit persons to whom the
|
|
Software is furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included
|
|
in all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
|
DEALINGS IN THE SOFTWARE.
|
|
*/
|
|
|
|
/* Globals */
|
|
html {
|
|
font-size: var(--font-size);
|
|
background-color: var(--background-color);
|
|
}
|
|
body {
|
|
font-family: var(--font);
|
|
font-size: 1rem;
|
|
color: var(--color);
|
|
}
|
|
|
|
/* Block elements */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0;
|
|
font-weight: var(--heading-font-weight);
|
|
}
|
|
h1 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
h2, h3, h4, h5, h6 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
p, ul, ol, dl {
|
|
margin-top: 0;
|
|
}
|
|
ul, ol {
|
|
padding-left: 2rem;
|
|
}
|
|
ul ol, ul ul, ol ol, ol ul {
|
|
margin-bottom: 0;
|
|
}
|
|
main p {
|
|
text-indent: var(--paragraph-indent);
|
|
text-align: var(--paragraph-align);
|
|
}
|
|
/* Remove indentation and justification where it doesn't make sense */
|
|
main p.m-noindent, li > p, dd > p, table.m-table td > p {
|
|
text-indent: 0;
|
|
text-align: left;
|
|
}
|
|
blockquote {
|
|
margin-top: 0;
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
padding: 1rem;
|
|
border-left-style: solid;
|
|
border-left-width: 0.25rem;
|
|
}
|
|
hr {
|
|
width: 75%;
|
|
border-width: 0.0625rem;
|
|
border-style: solid;
|
|
}
|
|
blockquote, hr {
|
|
border-color: var(--line-color);
|
|
}
|
|
pre {
|
|
font-family: var(--code-font), monospace, monospace; /* https://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
|
|
font-size: var(--code-font-size);
|
|
padding: 0.5rem 1rem;
|
|
color: var(--code-color);
|
|
background-color: var(--code-background-color);
|
|
border-radius: var(--border-radius);
|
|
overflow-x: auto;
|
|
margin-top: 0; /* stupid defaults */
|
|
}
|
|
pre.m-console {
|
|
background-color: var(--console-background-color);
|
|
}
|
|
|
|
/* Inline elements */
|
|
abbr {
|
|
cursor: help;
|
|
text-decoration: underline dotted;
|
|
}
|
|
sub, sup { /* https://gist.github.com/unruthless/413930 */
|
|
font-size: 0.75rem;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
sup { top: -0.35rem; }
|
|
sub { bottom: -0.2rem; }
|
|
a {
|
|
color: var(--link-color);
|
|
}
|
|
a.m-flat {
|
|
text-decoration: none;
|
|
}
|
|
a:hover, a:focus, a:active {
|
|
color: var(--link-active-color);
|
|
}
|
|
a img { border: 0; } /* Why you so special, IE?! */
|
|
svg a { cursor: pointer; } /* And why YOU, CHROME?! */
|
|
mark {
|
|
padding: 0.0625rem;
|
|
background-color: var(--mark-background-color);
|
|
color: var(--mark-color);
|
|
}
|
|
code {
|
|
font-family: var(--code-font), monospace, monospace;
|
|
font-size: var(--code-font-size);
|
|
padding: 0.125rem;
|
|
color: var(--code-color);
|
|
background-color: var(--code-background-color);
|
|
}
|
|
code.m-console {
|
|
background-color: var(--console-background-color);
|
|
}
|
|
|
|
/* Focus outline on link, canvas and input: match the focused header item. */
|
|
*:focus { outline-color: var(--header-link-current-color); }
|
|
|
|
/* Utility */
|
|
div.m-scroll {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
.m-fullwidth {
|
|
width: 100%;
|
|
}
|
|
.m-spacing-150 {
|
|
/* saying 1.5 should be better according to https://stackoverflow.com/a/20818206,
|
|
but here I need consistent spacing together with .m-big etc. */
|
|
line-height: 1.5rem;
|
|
}
|
|
.m-text-center, .m-text-center.m-noindent, table.m-table th.m-text-center, .m-text-center p {
|
|
text-align: center;
|
|
}
|
|
.m-text-left, .m-text-left.m-noindent, table.m-table th.m-text-left, .m-text-right p {
|
|
text-align: left;
|
|
}
|
|
.m-text-right, .m-text-right.m-noindent, table.m-table th.m-text-right, .m-text-right p {
|
|
text-align: right;
|
|
}
|
|
.m-text-top, table.m-table th.m-text-top, table.m-table td.m-text-top {
|
|
vertical-align: top;
|
|
}
|
|
.m-text-middle, table.m-table th.m-text-middle, table.m-table td.m-text-middle {
|
|
vertical-align: middle;
|
|
}
|
|
.m-text-bottom, table.m-table th.m-text-bottom, table.m-table td.m-text-bottom {
|
|
vertical-align: bottom;
|
|
}
|
|
.m-text.m-small {
|
|
font-size: 85.4%;
|
|
}
|
|
.m-text.m-big {
|
|
font-size: 117%;
|
|
}
|
|
.m-text.m-strong {
|
|
font-weight: bold;
|
|
}
|
|
.m-text.m-em {
|
|
font-style: italic;
|
|
}
|
|
h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Lists */
|
|
ul.m-unstyled, ol.m-unstyled {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
ul[class*='m-block-'], ol[class*='m-block-'] {
|
|
padding-left: 0;
|
|
}
|
|
ul[class*='m-block-'] li, ol[class*='m-block-'] li {
|
|
display: inline;
|
|
}
|
|
ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
|
|
content: " | ";
|
|
}
|
|
ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
|
|
content: " • ";
|
|
}
|
|
@media screen and (min-width: 576px) {
|
|
ul.m-block-bar-s, ol.m-block-bar-s,
|
|
ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
|
|
ul.m-block-bar-s li, ol.m-block-bar-s li,
|
|
ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
|
|
ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
|
|
ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
|
|
}
|
|
@media screen and (min-width: 768px) {
|
|
ul.m-block-bar-m, ol.m-block-bar-m,
|
|
ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
|
|
ul.m-block-bar-m li, ol.m-block-bar-m li,
|
|
ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
|
|
ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
|
|
ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
|
|
}
|
|
@media screen and (min-width: 992px) {
|
|
ul.m-block-bar-l, ol.m-block-bar-l,
|
|
ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
|
|
ul.m-block-bar-l li, ol.m-block-bar-l li,
|
|
ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
|
|
ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
|
|
ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
|
|
}
|
|
|
|
/* Special paragraph styling */
|
|
p.m-poem {
|
|
text-indent: 0;
|
|
text-align: left;
|
|
margin-left: var(--paragraph-indent);
|
|
}
|
|
p.m-transition {
|
|
color: var(--line-color);
|
|
text-indent: 0;
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* Definition list styling */
|
|
dl.m-diary {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
dl.m-diary:last-child {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
dl.m-diary dt {
|
|
font-weight: bold;
|
|
width: 3.5rem;
|
|
float: left;
|
|
clear: both;
|
|
padding-top: 0.25rem;
|
|
}
|
|
dl.m-diary dd {
|
|
padding-top: 0.25rem;
|
|
padding-left: 3.5rem;
|
|
}
|
|
|
|
/* Note, frame, block */
|
|
.m-note {
|
|
border-radius: var(--border-radius);
|
|
padding: 1rem;
|
|
}
|
|
.m-note pre, .m-note code {
|
|
background-color: var(--code-note-background-color);
|
|
}
|
|
.m-frame {
|
|
background-color: var(--background-color);
|
|
border-style: solid;
|
|
border-width: 0.125rem;
|
|
border-radius: var(--border-radius);
|
|
border-color: var(--line-color);
|
|
padding: 0.875rem;
|
|
}
|
|
.m-block {
|
|
border-style: solid;
|
|
border-width: 0.0625rem;
|
|
border-left-width: 0.25rem;
|
|
border-radius: var(--border-radius);
|
|
border-color: var(--line-color);
|
|
padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem;
|
|
}
|
|
|
|
/* Badge */
|
|
.m-block.m-badge::after {
|
|
content: ' ';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
.m-block.m-badge h3 {
|
|
margin-left: 5rem;
|
|
}
|
|
.m-block.m-badge p {
|
|
margin-left: 5rem;
|
|
text-indent: 0;
|
|
}
|
|
.m-block.m-badge img {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 2rem;
|
|
float: left;
|
|
}
|
|
|
|
/* Button */
|
|
div.m-button {
|
|
text-align: center;
|
|
}
|
|
div.m-button a {
|
|
display: inline-block;
|
|
border-radius: var(--border-radius);
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
text-decoration: none;
|
|
font-size: 1.17rem;
|
|
}
|
|
div.m-button.m-fullwidth a {
|
|
display: block;
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
div.m-button a .m-big:first-child {
|
|
font-size: 1.37rem;
|
|
font-weight: bold;
|
|
}
|
|
div.m-button a .m-small:last-child {
|
|
font-size: 0.854rem;
|
|
}
|
|
|
|
/* Label */
|
|
.m-label {
|
|
border-radius: var(--border-radius);
|
|
font-size: 75%;
|
|
font-weight: normal;
|
|
padding: 0.125rem 0.25rem;
|
|
vertical-align: 7.5%;
|
|
}
|
|
.m-label.m-flat {
|
|
border-width: 0.0625rem;
|
|
border-style: solid;
|
|
border-color: var(--dim-color);
|
|
padding: 0.0625rem 0.1875rem;
|
|
}
|
|
|
|
/* Tables */
|
|
table.m-table {
|
|
border-collapse: collapse;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
table.m-table.m-big {
|
|
margin-top: 1.75rem;
|
|
}
|
|
div.m-scroll > table.m-table:last-child {
|
|
margin-bottom: 0.0625rem;
|
|
}
|
|
table.m-table:not(.m-flat) tbody tr:hover {
|
|
background-color: var(--line-color);
|
|
}
|
|
table.m-table th, table.m-table td {
|
|
vertical-align: top;
|
|
border-style: solid;
|
|
border-top-width: 0.0625rem;
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
border-bottom-width: 0;
|
|
border-color: var(--line-color);
|
|
}
|
|
table.m-table caption {
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
table.m-table thead tr:first-child th, table.m-table thead tr:first-child td {
|
|
border-top-width: 0.125rem;
|
|
}
|
|
table.m-table thead th, table.m-table thead td {
|
|
border-bottom-width: 0.125rem;
|
|
vertical-align: bottom;
|
|
}
|
|
table.m-table tfoot th, table.m-table tfoot td {
|
|
border-top-width: 0.125rem;
|
|
}
|
|
table.m-table th, table.m-table td {
|
|
padding: 0.5rem;
|
|
}
|
|
table.m-table.m-big th, table.m-table.m-big td {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
table.m-table th {
|
|
text-align: left;
|
|
}
|
|
table.m-table th.m-thin {
|
|
font-weight: normal;
|
|
}
|
|
table.m-table td.m-default, table.m-table th.m-default,
|
|
table.m-table td.m-primary, table.m-table th.m-primary,
|
|
table.m-table td.m-success, table.m-table th.m-success,
|
|
table.m-table td.m-warning, table.m-table th.m-warning,
|
|
table.m-table td.m-danger, table.m-table th.m-danger,
|
|
table.m-table td.m-info, table.m-table th.m-info,
|
|
table.m-table td.m-dim, table.m-table th.m-dim {
|
|
padding-left: 0.4375rem;
|
|
padding-right: 0.4375rem;
|
|
border-left-width: 0.0625rem;
|
|
/* border-right-width: 0.0625rem; causes horizontal scrollbar */
|
|
}
|
|
table.m-table.m-big td.m-default, table.m-table.m-big th.m-default,
|
|
table.m-table.m-big td.m-primary, table.m-table.m-big th.m-primary,
|
|
table.m-table.m-big td.m-success, table.m-table.m-big th.m-success,
|
|
table.m-table.m-big td.m-warning, table.m-table.m-big th.m-warning,
|
|
table.m-table.m-big td.m-danger, table.m-table.m-big th.m-danger,
|
|
table.m-table.m-big td.m-info, table.m-table.m-big th.m-info,
|
|
table.m-table.m-big td.m-dim, table.m-table.m-big th.m-dim {
|
|
padding-left: 0.9375rem;
|
|
padding-right: 0.9375rem;
|
|
border-left-width: 0.0625rem;
|
|
/* border-right-width: 0.0625rem; causes horizontal scrollbar */
|
|
}
|
|
|
|
table.m-table tr.m-default td, table.m-table td.m-default,
|
|
table.m-table tr.m-default th, table.m-table th.m-default,
|
|
table.m-table tr.m-primary td, table.m-table td.m-primary,
|
|
table.m-table tr.m-primary th, table.m-table th.m-primary,
|
|
table.m-table tr.m-success td, table.m-table td.m-success,
|
|
table.m-table tr.m-success th, table.m-table th.m-success,
|
|
table.m-table tr.m-warning td, table.m-table td.m-warning,
|
|
table.m-table tr.m-warning th, table.m-table th.m-warning,
|
|
table.m-table tr.m-danger td, table.m-table td.m-danger,
|
|
table.m-table tr.m-danger th, table.m-table th.m-danger,
|
|
table.m-table tr.m-info td, table.m-table td.m-info,
|
|
table.m-table tr.m-info th, table.m-table th.m-info,
|
|
table.m-table tr.m-dim td, table.m-table td.m-dim,
|
|
table.m-table tr.m-dim th, table.m-table th.m-dim {
|
|
border-color: var(--background-color);
|
|
}
|
|
|
|
/* Image. Ensure everything is done for both <img> and <svg>. */
|
|
img.m-image, svg.m-image {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
div.m-image {
|
|
text-align: center;
|
|
}
|
|
img.m-image, svg.m-image, div.m-image img, div.m-image svg {
|
|
max-width: 100%;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Figure. Ensure everything is done for both <img> and <svg>. */
|
|
figure.m-figure {
|
|
max-width: 100%;
|
|
margin-top: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: relative;
|
|
display: table;
|
|
}
|
|
figure.m-figure:before {
|
|
position: absolute;
|
|
content: ' ';
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1; /* so it doesn't make the contents inactive */
|
|
border-style: solid;
|
|
border-width: 0.125rem;
|
|
border-radius: var(--border-radius);
|
|
border-color: var(--line-color);
|
|
}
|
|
figure.m-figure.m-flat:before {
|
|
border-color: transparent;
|
|
}
|
|
figure.m-figure > * {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
display: table-caption;
|
|
caption-side: bottom;
|
|
}
|
|
figure.m-figure > *:first-child {
|
|
/* otherwise figure with clickable image is centered differently */
|
|
display: inline;
|
|
}
|
|
figure.m-figure > *:last-child {
|
|
/* Need !important so the :last-child margin reset doesn't have higher
|
|
priority than this */
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
figure.m-figure img, figure.m-figure svg {
|
|
position: relative; /* so it's above the border */
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-top-right-radius: var(--border-radius);
|
|
max-width: 100%;
|
|
}
|
|
figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
}
|
|
figure.m-figure a img, figure.m-figure a svg {
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
|
|
/* Using inline for the content would lose the margin on wrapped lines */
|
|
display: block;
|
|
}
|
|
figure.m-figure.m-fullwidth > *:first-child {
|
|
/* otherwise figure with clickable image is centered differently */
|
|
display: inline;
|
|
}
|
|
figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
|
|
width: 100%;
|
|
}
|
|
figure.m-figure.m-fullwidth:after {
|
|
/* Specifying bottom margin on the last element works only if it is displayed
|
|
as table caption, so I have to hack it here. */
|
|
content: ' ';
|
|
display: block;
|
|
margin-top: 1rem;
|
|
height: 1px;
|
|
}
|
|
|
|
/* Code figure. Not using <figure> because some generators (Doxygen) have it
|
|
impossible to output custom tags. */
|
|
.m-code-figure, .m-console-figure {
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
position: relative;
|
|
padding: 1rem;
|
|
}
|
|
.m-code-figure:before, .m-console-figure:before {
|
|
position: absolute;
|
|
content: ' ';
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1; /* so it doesn't make the contents inactive */
|
|
border-style: solid;
|
|
border-width: 0.125rem;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.m-code-figure:before {
|
|
border-color: var(--code-background-color);
|
|
}
|
|
.m-console-figure:before {
|
|
border-color: var(--console-background-color);
|
|
}
|
|
.m-code-figure.m-flat:before, .m-console-figure.m-flat:before {
|
|
border-color: transparent;
|
|
}
|
|
.m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
|
|
position: relative; /* so it's above the border */
|
|
margin: -1rem -1rem 1rem -1rem;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* Figure caption */
|
|
figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: var(--heading-font-weight);
|
|
font-size: 1.17rem; /* taken from webkit defaults for h3 */
|
|
}
|
|
|
|
/* Image grid */
|
|
.m-imagegrid > div {
|
|
background-color: var(--background-color); /* to avoid section HL shining through */
|
|
}
|
|
.m-imagegrid > div > figure {
|
|
display: block;
|
|
float: left;
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
.m-imagegrid > div > figure > div,
|
|
.m-imagegrid > div > figure > figcaption,
|
|
.m-imagegrid > div > figure > a > div,
|
|
.m-imagegrid > div > figure > a > figcaption {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-color: var(--background-color);
|
|
border-style: solid;
|
|
border-width: 0.25rem;
|
|
padding: 0.5rem;
|
|
}
|
|
.m-imagegrid > div > figure:first-child > div,
|
|
.m-imagegrid > div > figure:first-child > figcaption,
|
|
.m-imagegrid > div > figure:first-child > a > div,
|
|
.m-imagegrid > div > figure:first-child > a > figcaption {
|
|
border-left-width: 0;
|
|
}
|
|
.m-imagegrid > div > figure:last-child > div,
|
|
.m-imagegrid > div > figure:last-child > figcaption,
|
|
.m-imagegrid > div > figure:last-child > a > div,
|
|
.m-imagegrid > div > figure:last-child > a > figcaption {
|
|
border-right-width: 0;
|
|
}
|
|
.m-imagegrid > div > figure > figcaption,
|
|
.m-imagegrid > div > figure > a > figcaption {
|
|
color: transparent;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 0.75rem;
|
|
}
|
|
.m-imagegrid > div > figure > div::before,
|
|
.m-imagegrid > div > figure > figcaption::before,
|
|
.m-imagegrid > div > figure > a > div::before,
|
|
.m-imagegrid > div > figure > a > figcaption::before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 100%;
|
|
vertical-align: bottom;
|
|
width: 0;
|
|
}
|
|
.m-imagegrid > div > figure:hover > figcaption,
|
|
.m-imagegrid > div > figure:hover > a > figcaption {
|
|
background: linear-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.85) 100%);
|
|
color: #ffffff;
|
|
}
|
|
.m-imagegrid > div > figure > img,
|
|
.m-imagegrid > div > figure > a > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.m-imagegrid > div::after {
|
|
display: block;
|
|
content: ' ';
|
|
clear: both;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.m-imagegrid > div > figure {
|
|
float: none;
|
|
width: 100% !important;
|
|
}
|
|
.m-imagegrid > div > figure > div,
|
|
.m-imagegrid > div > figure > figcaption,
|
|
.m-imagegrid > div > figure > a > div,
|
|
.m-imagegrid > div > figure > a > figcaption {
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
}
|
|
}
|
|
|
|
/* Inflatable content */
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] > pre,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-code-figure,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-console-figure,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] section > pre,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
|
|
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure,
|
|
.m-container-inflatable [class*='m-center-'] > .m-note,
|
|
.m-container-inflatable [class*='m-center-'] > .m-frame,
|
|
.m-container-inflatable [class*='m-center-'] > .m-block,
|
|
.m-container-inflatable [class*='m-center-'] > .m-imagegrid,
|
|
.m-container-inflatable [class*='m-center-'] > pre,
|
|
.m-container-inflatable [class*='m-center-'] > .m-code-figure,
|
|
.m-container-inflatable [class*='m-center-'] > .m-console-figure,
|
|
.m-container-inflatable [class*='m-left-'] > .m-note,
|
|
.m-container-inflatable [class*='m-left-'] > .m-frame,
|
|
.m-container-inflatable [class*='m-left-'] > .m-block,
|
|
.m-container-inflatable [class*='m-left-'] > .m-imagegrid,
|
|
.m-container-inflatable [class*='m-left-'] > pre,
|
|
.m-container-inflatable [class*='m-left-'] > .m-code-figure,
|
|
.m-container-inflatable [class*='m-left-'] > .m-console-figure,
|
|
.m-container-inflatable [class*='m-right-'] > .m-note,
|
|
.m-container-inflatable [class*='m-right-'] > .m-frame,
|
|
.m-container-inflatable [class*='m-right-'] > .m-block,
|
|
.m-container-inflatable [class*='m-right-'] > .m-imagegrid,
|
|
.m-container-inflatable [class*='m-right-'] > pre,
|
|
.m-container-inflatable [class*='m-right-'] > .m-code-figure,
|
|
.m-container-inflatable [class*='m-right-'] > .m-console-figure,
|
|
.m-container-inflatable .m-container-inflate > .m-note,
|
|
.m-container-inflatable .m-container-inflate > .m-frame,
|
|
.m-container-inflatable .m-container-inflate > .m-block,
|
|
.m-container-inflatable .m-container-inflate > .m-imagegrid,
|
|
.m-container-inflatable .m-container-inflate > pre,
|
|
.m-container-inflatable .m-container-inflate > .m-code-figure,
|
|
.m-container-inflatable .m-container-inflate > .m-console-figure
|
|
{
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 576px) {
|
|
.m-container-inflatable .m-center-s > .m-note,
|
|
.m-container-inflatable .m-center-s > .m-frame,
|
|
.m-container-inflatable .m-center-s > .m-block,
|
|
.m-container-inflatable .m-center-s > .m-imagegrid,
|
|
.m-container-inflatable .m-center-s > pre,
|
|
.m-container-inflatable .m-center-s > .m-code-figure,
|
|
.m-container-inflatable .m-center-s > .m-console-figure {
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
.m-container-inflatable .m-left-s > .m-note,
|
|
.m-container-inflatable .m-left-s > .m-frame,
|
|
.m-container-inflatable .m-left-s > .m-block,
|
|
.m-container-inflatable .m-left-s > .m-imagegrid,
|
|
.m-container-inflatable .m-left-s > pre,
|
|
.m-container-inflatable .m-left-s > .m-code-figure,
|
|
.m-container-inflatable .m-left-s > .m-console-figure {
|
|
margin-left: -1rem;
|
|
margin-right: 0;
|
|
}
|
|
.m-container-inflatable .m-right-s > .m-note,
|
|
.m-container-inflatable .m-right-s > .m-frame,
|
|
.m-container-inflatable .m-right-s > .m-block,
|
|
.m-container-inflatable .m-right-s > .m-imagegrid,
|
|
.m-container-inflatable .m-right-s > pre,
|
|
.m-container-inflatable .m-right-s > .m-code-figure,
|
|
.m-container-inflatable .m-right-s > .m-console-figure {
|
|
margin-left: 0;
|
|
margin-right: -1rem;
|
|
}
|
|
|
|
.m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
|
|
.m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
|
|
margin-left: -10%;
|
|
margin-right: -10%;
|
|
}
|
|
}
|
|
@media screen and (min-width: 768px) {
|
|
.m-container-inflatable .m-center-m > .m-note,
|
|
.m-container-inflatable .m-center-m > .m-frame,
|
|
.m-container-inflatable .m-center-m > .m-block,
|
|
.m-container-inflatable .m-center-m > .m-imagegrid,
|
|
.m-container-inflatable .m-center-m > pre,
|
|
.m-container-inflatable .m-center-m > .m-code-figure,
|
|
.m-container-inflatable .m-center-m > .m-console-figure {
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
.m-container-inflatable .m-left-m > .m-note,
|
|
.m-container-inflatable .m-left-m > .m-frame,
|
|
.m-container-inflatable .m-left-m > .m-block,
|
|
.m-container-inflatable .m-left-m > .m-imagegrid,
|
|
.m-container-inflatable .m-left-m > pre,
|
|
.m-container-inflatable .m-left-m > .m-code-figure,
|
|
.m-container-inflatable .m-left-m > .m-console-figure {
|
|
margin-left: -1rem;
|
|
margin-right: 0;
|
|
}
|
|
.m-container-inflatable .m-right-m > .m-note,
|
|
.m-container-inflatable .m-right-m > .m-frame,
|
|
.m-container-inflatable .m-right-m > .m-block,
|
|
.m-container-inflatable .m-right-m > .m-imagegrid,
|
|
.m-container-inflatable .m-right-m > pre,
|
|
.m-container-inflatable .m-right-m > .m-code-figure,
|
|
.m-container-inflatable .m-right-m > .m-console-figure {
|
|
margin-left: 0;
|
|
margin-right: -1rem;
|
|
}
|
|
|
|
.m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
|
|
.m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
|
|
margin-left: -10%;
|
|
margin-right: -10%;
|
|
}
|
|
}
|
|
@media screen and (min-width: 992px) {
|
|
.m-container-inflatable .m-center-l > .m-note,
|
|
.m-container-inflatable .m-center-l > .m-frame,
|
|
.m-container-inflatable .m-center-l > .m-block,
|
|
.m-container-inflatable .m-center-l > .m-imagegrid,
|
|
.m-container-inflatable .m-center-l > pre,
|
|
.m-container-inflatable .m-center-l > .m-code-figure,
|
|
.m-container-inflatable .m-center-l > .m-console-figure {
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
.m-container-inflatable .m-left-l > .m-note,
|
|
.m-container-inflatable .m-left-l > .m-frame,
|
|
.m-container-inflatable .m-left-l > .m-block,
|
|
.m-container-inflatable .m-left-l > .m-imagegrid,
|
|
.m-container-inflatable .m-left-l > pre,
|
|
.m-container-inflatable .m-left-l > .m-code-figure,
|
|
.m-container-inflatable .m-left-l > .m-console-figure {
|
|
margin-left: -1rem;
|
|
margin-right: 0;
|
|
}
|
|
.m-container-inflatable .m-right-l > .m-note,
|
|
.m-container-inflatable .m-right-l > .m-frame,
|
|
.m-container-inflatable .m-right-l > .m-block,
|
|
.m-container-inflatable .m-right-l > .m-imagegrid,
|
|
.m-container-inflatable .m-right-l > pre,
|
|
.m-container-inflatable .m-right-l > .m-code-figure,
|
|
.m-container-inflatable .m-right-l > .m-console-figure {
|
|
margin-left: 0;
|
|
margin-right: -1rem;
|
|
}
|
|
|
|
.m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
|
|
.m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
|
|
margin-left: -10%;
|
|
margin-right: -10%;
|
|
}
|
|
}
|
|
|
|
/* Code block (uses Pygments CSS classes) */
|
|
pre.m-code span.hll {
|
|
margin-left: -1.0rem;
|
|
margin-right: -1.0rem;
|
|
padding-left: 1.0rem;
|
|
}
|
|
|
|
/* Inverted code block / inline code */
|
|
.m-code.m-inverted {
|
|
color: var(--code-inverted-color);
|
|
}
|
|
.m-code.m-inverted > span {
|
|
opacity: 0.3333;
|
|
}
|
|
.m-code.m-inverted > span.hll {
|
|
color: var(--color);
|
|
opacity: 1;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Code color swatch */
|
|
.m-code-color {
|
|
display: inline-block;
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
vertical-align: -0.05rem;
|
|
margin-left: 0.2rem;
|
|
margin-right: 0.1rem;
|
|
border-radius: 0.1rem;
|
|
}
|
|
|
|
/* Math block, math figure, inline math, math inside buttons because I am
|
|
crazy */
|
|
div.m-math {
|
|
overflow-x: auto;
|
|
overflow-y: hidden; /* Chrome 62 displays a vertical scrollbar otherwise */
|
|
}
|
|
div.m-math svg {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
div.m-button a svg.m-math { fill: var(--button-background-color); }
|
|
div.m-button.m-flat a svg.m-math { fill: var(--color); }
|
|
div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-math,
|
|
div.m-button.m-default a:active svg.m-math {
|
|
fill: var(--link-active-color);
|
|
}
|
|
|
|
/* Plots, graphs. Graphs can be either div.m-graph svg or svg.m-graph, so using
|
|
just .m-graph when referencing both a <div> graph and a <figure> graph. */
|
|
.m-graph { font-size: var(--font-size); }
|
|
div.m-plot svg, div.m-graph svg {
|
|
max-width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
div.m-plot .m-background { fill: var(--plot-background-color); }
|
|
/* Font sizes are hardcoded in m.plots, change there first! */
|
|
div.m-plot svg .m-label { font-size: 11px; }
|
|
div.m-plot svg .m-title { font-size: 13px; }
|
|
div.m-plot svg .m-label, div.m-plot svg .m-title { fill: var(--color); }
|
|
div.m-plot svg .m-line {
|
|
stroke: var(--color);
|
|
stroke-width: 0.8;
|
|
}
|
|
div.m-plot svg .m-error {
|
|
stroke: var(--plot-error-color);
|
|
stroke-width: 1.5;
|
|
}
|
|
div.m-plot svg .m-label.m-dim { fill: var(--dim-color); }
|
|
.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
|
|
.m-graph g.m-node.m-flat polygon {
|
|
fill: none;
|
|
}
|
|
.m-graph g.m-node:not(.m-flat) text {
|
|
fill: var(--button-background-color);
|
|
}
|
|
|
|
/* Rendered math and graphs have no padding around, add it if in a figure,
|
|
ensure it's applied only on the immediately first svg inside. Because we
|
|
want a background under the padding as well, switch the box sizing to
|
|
content box. */
|
|
figure.m-figure > svg.m-math:first-child,
|
|
figure.m-figure > svg.m-graph:first-child {
|
|
padding: 1rem;
|
|
box-sizing: content-box;
|
|
}
|
|
figure.m-figure:not(.m-flat) > svg.m-math:first-child,
|
|
figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
|
|
background-color: var(--line-color);
|
|
}
|
|
|
|
/* Colored block, header links in a colored block, colored text, flat label */
|
|
.m-block.m-default { border-left-color: var(--line-color); }
|
|
.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
|
|
.m-text.m-default, .m-label.m-flat.m-default {
|
|
color: var(--default-color);
|
|
}
|
|
.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
|
|
color: var(--link-color);
|
|
}
|
|
.m-block.m-primary { border-left-color: var(--primary-color); }
|
|
.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
|
|
.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
|
|
.m-text.m-primary, .m-label.m-flat.m-primary {
|
|
color: var(--primary-color);
|
|
}
|
|
.m-block.m-success { border-left-color: var(--success-color); }
|
|
.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
|
|
.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
|
|
.m-text.m-success, .m-label.m-flat.m-success {
|
|
color: var(--success-color);
|
|
}
|
|
.m-block.m-warning { border-left-color: var(--warning-color); }
|
|
.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
|
|
.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
|
|
.m-text.m-warning, .m-label.m-flat.m-warning {
|
|
color: var(--warning-color);
|
|
}
|
|
.m-block.m-danger { border-left-color: var(--danger-color); }
|
|
.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
|
|
.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
|
|
.m-text.m-danger, .m-label.m-flat.m-danger {
|
|
color: var(--danger-color);
|
|
}
|
|
.m-block.m-info { border-left-color: var(--info-color); }
|
|
.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
|
|
.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
|
|
.m-text.m-info, .m-label.m-flat.m-info {
|
|
color: var(--info-color);
|
|
}
|
|
.m-block.m-dim { border-left-color: var(--dim-color); }
|
|
.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
|
|
color: var(--dim-color);
|
|
}
|
|
.m-block.m-dim a, .m-text.m-dim a { color: var(--dim-link-color); }
|
|
.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active,
|
|
.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
|
|
color: var(--dim-link-active-color);
|
|
}
|
|
.m-block.m-flat { border-color: transparent; }
|
|
.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 {
|
|
color: var(--default-color);
|
|
}
|
|
|
|
/* Active link in a block header (gawd, this is verbose as hell). Dim blocks
|
|
have the link colors already defined above. */
|
|
.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active,
|
|
.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active,
|
|
.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active,
|
|
.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active {
|
|
color: var(--default-link-active-color);
|
|
}
|
|
.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active,
|
|
.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active,
|
|
.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active,
|
|
.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active {
|
|
color: var(--primary-link-active-color);
|
|
}
|
|
.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active,
|
|
.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active,
|
|
.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active,
|
|
.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active {
|
|
color: var(--success-link-active-color);
|
|
}
|
|
.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active,
|
|
.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active,
|
|
.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active,
|
|
.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active {
|
|
color: var(--warning-link-active-color);
|
|
}
|
|
.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active,
|
|
.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active,
|
|
.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active,
|
|
.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active {
|
|
color: var(--danger-link-active-color);
|
|
}
|
|
.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active,
|
|
.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active,
|
|
.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active,
|
|
.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active {
|
|
color: var(--info-link-active-color);
|
|
}
|
|
|
|
/* Colored button, non-flat label */
|
|
div.m-button a, .m-label { color: var(--button-background-color); }
|
|
div.m-button.m-flat a { color: var(--color); }
|
|
div.m-button.m-flat a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
|
|
color: var(--link-active-color);
|
|
}
|
|
div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: var(--default-color); }
|
|
div.m-button.m-primary a, .m-label:not(.m-flat).m-primary { background-color: var(--primary-color); }
|
|
div.m-button.m-success a, .m-label:not(.m-flat).m-success { background-color: var(--success-color); }
|
|
div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: var(--warning-color); }
|
|
div.m-button.m-danger a, .m-label:not(.m-flat).m-danger { background-color: var(--danger-color); }
|
|
div.m-button.m-info a, .m-label:not(.m-flat).m-info { background-color: var(--info-color); }
|
|
div.m-button.m-dim a, .m-label:not(.m-flat).m-dim { background-color: var(--dim-color); }
|
|
div.m-button.m-default a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
|
|
background-color: var(--default-link-active-color);
|
|
}
|
|
div.m-button.m-primary a:hover, div.m-button.m-primary a:focus, div.m-button.m-primary a:active {
|
|
background-color: var(--primary-link-active-color);
|
|
}
|
|
div.m-button.m-success a:hover, div.m-button.m-success a:focus, div.m-button.m-success a:active {
|
|
background-color: var(--success-link-active-color);
|
|
}
|
|
div.m-button.m-warning a:hover, div.m-button.m-warning a:focus, div.m-button.m-warning a:active {
|
|
background-color: var(--warning-link-active-color);
|
|
}
|
|
div.m-button.m-danger a:hover, div.m-button.m-danger a:focus, div.m-button.m-danger a:active {
|
|
background-color: var(--danger-link-active-color);
|
|
}
|
|
div.m-button.m-info a:hover, div.m-button.m-info a:focus, div.m-button.m-info a:active {
|
|
background-color: var(--info-link-active-color);
|
|
}
|
|
div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:active {
|
|
/* Using a dedicated color here because we want the button dim by default,
|
|
not highlighted as other links */
|
|
background-color: var(--dim-button-active-color);
|
|
}
|
|
|
|
/* Colored note, table coloring */
|
|
.m-note.m-default { background-color: var(--default-filled-background-color); }
|
|
.m-note.m-default,
|
|
table.m-table tr.m-default td, table.m-table td.m-default,
|
|
table.m-table tr.m-default th, table.m-table th.m-default {
|
|
/* No background for default table to keep the row hover */
|
|
color: var(--default-filled-color);
|
|
}
|
|
.m-note.m-default a:hover,
|
|
table.m-table tr.m-default td a:hover, table.m-table td.m-default a:hover,
|
|
table.m-table tr.m-default th a:hover, table.m-table th.m-default a:hover,
|
|
.m-note.m-default a:focus,
|
|
table.m-table tr.m-default td a:focus, table.m-table td.m-default a:focus,
|
|
table.m-table tr.m-default th a:focus, table.m-table th.m-default a:focus,
|
|
.m-note.m-default a:active,
|
|
table.m-table tr.m-default td a:active, table.m-table td.m-default a:active,
|
|
table.m-table tr.m-default th a:active, table.m-table th.m-default a:active {
|
|
color: var(--default-filled-link-active-color);
|
|
}
|
|
.m-note.m-primary a,
|
|
table.m-table tr.m-primary td a, table.m-table td.m-primary a,
|
|
table.m-table tr.m-primary th a, table.m-table th.m-primary a {
|
|
color: var(--default-filled-link-color);
|
|
}
|
|
.m-note.m-primary,
|
|
table.m-table tr.m-primary td, table.m-table td.m-primary,
|
|
table.m-table tr.m-primary th, table.m-table th.m-primary {
|
|
background-color: var(--primary-filled-background-color);
|
|
color: var(--primary-filled-color);
|
|
}
|
|
.m-note.m-primary a,
|
|
table.m-table tr.m-primary td a, table.m-table td.m-primary a,
|
|
table.m-table tr.m-primary th a, table.m-table th.m-primary a {
|
|
color: var(--primary-filled-link-color);
|
|
}
|
|
.m-note.m-primary a:hover,
|
|
table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover,
|
|
table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover,
|
|
.m-note.m-primary a:focus,
|
|
table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus,
|
|
table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus,
|
|
.m-note.m-primary a:active,
|
|
table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active,
|
|
table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active {
|
|
color: var(--primary-filled-link-active-color);
|
|
}
|
|
.m-note.m-success,
|
|
table.m-table tr.m-success td, table.m-table td.m-success,
|
|
table.m-table tr.m-success th, table.m-table th.m-success {
|
|
background-color: var(--success-filled-background-color);
|
|
color: var(--success-filled-color);
|
|
}
|
|
.m-note.m-success a,
|
|
table.m-table tr.m-success td a, table.m-table td.m-success a,
|
|
table.m-table tr.m-success th a, table.m-table th.m-success a {
|
|
color: var(--success-filled-link-color);
|
|
}
|
|
.m-note.m-success a:hover,
|
|
table.m-table tr.m-success td a:hover, table.m-table td.m-success a:hover,
|
|
table.m-table tr.m-success th a:hover, table.m-table th.m-success a:hover,
|
|
.m-note.m-success a:focus,
|
|
table.m-table tr.m-success td a:focus, table.m-table td.m-success a:focus,
|
|
table.m-table tr.m-success th a:focus, table.m-table th.m-success a:focus,
|
|
.m-note.m-success a:active,
|
|
table.m-table tr.m-success td a:active, table.m-table td.m-success a:active,
|
|
table.m-table tr.m-success th a:active, table.m-table th.m-success a:active {
|
|
color: var(--success-filled-link-active-color);
|
|
}
|
|
.m-note.m-warning, table.m-table tr.m-warning td, table.m-table td.m-warning,
|
|
table.m-table tr.m-warning th, table.m-table th.m-warning {
|
|
background-color: var(--warning-filled-background-color);
|
|
color: var(--warning-filled-color);
|
|
}
|
|
.m-note.m-warning a, table.m-table tr.m-warning td a, table.m-table td.m-warning a,
|
|
table.m-table tr.m-warning th a, table.m-table th.m-warning a {
|
|
color: var(--warning-filled-link-color);
|
|
}
|
|
.m-note.m-warning a:hover,
|
|
table.m-table tr.m-warning td a:hover, table.m-table td.m-warning a:hover,
|
|
table.m-table tr.m-warning th a:hover, table.m-table th.m-warning a:hover,
|
|
.m-note.m-warning a:focus,
|
|
table.m-table tr.m-warning td a:focus, table.m-table td.m-warning a:focus,
|
|
table.m-table tr.m-warning th a:focus, table.m-table th.m-warning a:focus,
|
|
.m-note.m-warning a:active,
|
|
table.m-table tr.m-warning td a:active, table.m-table td.m-warning a:active,
|
|
table.m-table tr.m-warning th a:active, table.m-table th.m-warning a:active {
|
|
color: var(--warning-filled-link-active-color);
|
|
}
|
|
.m-note.m-danger,
|
|
table.m-table tr.m-danger td, table.m-table td.m-danger,
|
|
table.m-table tr.m-danger th, table.m-table th.m-danger {
|
|
background-color: var(--danger-filled-background-color);
|
|
color: var(--danger-filled-color);
|
|
}
|
|
.m-note.m-danger a,
|
|
table.m-table tr.m-danger td a, table.m-table td.m-danger a,
|
|
table.m-table tr.m-danger th a, table.m-table th.m-danger a {
|
|
color: var(--danger-filled-link-color);
|
|
}
|
|
.m-note.m-danger a:hover,
|
|
table.m-table tr.m-danger td a:hover, table.m-table td.m-danger a:hover,
|
|
table.m-table tr.m-danger th a:hover, table.m-table th.m-danger a:hover,
|
|
.m-note.m-danger a:focus,
|
|
table.m-table tr.m-danger td a:focus, table.m-table td.m-danger a:focus,
|
|
table.m-table tr.m-danger th a:focus, table.m-table th.m-danger a:focus,
|
|
.m-note.m-danger a:active,
|
|
table.m-table tr.m-danger td a:active, table.m-table td.m-danger a:active,
|
|
table.m-table tr.m-danger th a:active, table.m-table th.m-danger a:active {
|
|
color: var(--danger-filled-link-active-color);
|
|
}
|
|
.m-note.m-info,
|
|
table.m-table tr.m-info td, table.m-table td.m-info,
|
|
table.m-table tr.m-info th, table.m-table th.m-info {
|
|
background-color: var(--info-filled-background-color);
|
|
color: var(--info-filled-color);
|
|
}
|
|
.m-note.m-info a,
|
|
table.m-table tr.m-info td a, table.m-table td.m-info a,
|
|
table.m-table tr.m-info th a, table.m-table th.m-info a {
|
|
color: var(--info-filled-link-color);
|
|
}
|
|
.m-note.m-info a:hover,
|
|
table.m-table tr.m-info td a:hover, table.m-table td.m-info a:hover,
|
|
table.m-table tr.m-info th a:hover, table.m-table th.m-info a:hover,
|
|
.m-note.m-info a:focus,
|
|
table.m-table tr.m-info td a:focus, table.m-table td.m-info a:focus,
|
|
table.m-table tr.m-info th a:focus, table.m-table th.m-info a:focus,
|
|
.m-note.m-info a:active,
|
|
table.m-table tr.m-info td a:active, table.m-table td.m-info a:active,
|
|
table.m-table tr.m-info th a:active, table.m-table th.m-info a:active {
|
|
color: var(--info-filled-link-active-color);
|
|
}
|
|
.m-note.m-dim,
|
|
table.m-table tr.m-dim td, table.m-table td.m-dim,
|
|
table.m-table tr.m-dim th, table.m-table th.m-dim {
|
|
background-color: var(--dim-filled-background-color);
|
|
color: var(--dim-filled-color);
|
|
}
|
|
.m-note.m-dim a,
|
|
table.m-table tr.m-dim td a, table.m-table td.m-dim a,
|
|
table.m-table tr.m-dim th a, table.m-table th.m-dim a {
|
|
color: var(--dim-filled-link-color);
|
|
}
|
|
.m-note.m-dim a:hover,
|
|
table.m-table tr.m-dim td a:hover, table.m-table td.m-dim a:hover,
|
|
table.m-table tr.m-dim th a:hover, table.m-table th.m-dim a:hover,
|
|
.m-note.m-dim a:focus,
|
|
table.m-table tr.m-dim td a:focus, table.m-table td.m-dim a:focus,
|
|
table.m-table tr.m-dim th a:focus, table.m-table th.m-dim a:focus,
|
|
.m-note.m-dim a:active,
|
|
table.m-table tr.m-dim td a:active, table.m-table td.m-dim a:active,
|
|
table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active {
|
|
color: var(--dim-filled-link-active-color);
|
|
}
|
|
|
|
/* Colored figure */
|
|
figure.m-figure.m-default:before { border-color: var(--default-filled-background-color); }
|
|
figure.m-figure.m-default figcaption { color: var(--default-color); }
|
|
figure.m-figure.m-primary:before { border-color: var(--primary-filled-background-color); }
|
|
figure.m-figure.m-primary figcaption { color: var(--primary-color); }
|
|
figure.m-figure.m-success:before { border-color: var(--success-filled-background-color); }
|
|
figure.m-figure.m-success figcaption { color: var(--success-color); }
|
|
figure.m-figure.m-warning:before { border-color: var(--warning-filled-background-color); }
|
|
figure.m-figure.m-warning figcaption { color: var(--warning-color); }
|
|
figure.m-figure.m-danger:before { border-color: var(--danger-filled-background-color); }
|
|
figure.m-figure.m-danger figcaption { color: var(--danger-color); }
|
|
figure.m-figure.m-info:before { border-color: var(--info-filled-background-color); }
|
|
figure.m-figure.m-info figcaption { color: var(--info-color); }
|
|
figure.m-figure.m-dim:before { border-color: var(--dim-filled-background-color); }
|
|
figure.m-figure.m-dim { color: var(--dim-color); }
|
|
figure.m-figure.m-dim a { color: var(--dim-link-color); }
|
|
figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
|
|
color: var(--dim-link-active-color);
|
|
}
|
|
|
|
/* Colored math block, inline math, colored math parts, plots and
|
|
global-colored graphs. Should be before local graph coloring, so the latter
|
|
can override this. Applies to either div.m-math svg or svg.m.math
|
|
(div.m-graph svg or svg.m-graph), so using just .m-math (.m-graph). Besides
|
|
that, using svg anywhere would make it a higher priority, breaking the
|
|
colors. See the math/graph plugin test pages for a visual verification. */
|
|
.m-math { fill: var(--color); }
|
|
.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
|
|
div.m-plot svg .m-bar.m-default,
|
|
.m-graph g.m-edge polygon,
|
|
.m-graph g.m-node:not(.m-flat) ellipse,
|
|
.m-graph g.m-node:not(.m-flat) polygon,
|
|
.m-graph g.m-edge text,
|
|
.m-graph g.m-node.m-flat text,
|
|
.m-graph.m-default g.m-edge polygon,
|
|
.m-graph.m-default g.m-node:not(.m-flat) ellipse,
|
|
.m-graph.m-default g.m-node:not(.m-flat) polygon,
|
|
.m-graph.m-default g.m-edge text,
|
|
.m-graph.m-default g.m-node.m-flat text {
|
|
fill: var(--default-color);
|
|
}
|
|
.m-graph g.m-edge polygon,
|
|
.m-graph g.m-edge path,
|
|
.m-graph g.m-node ellipse,
|
|
.m-graph g.m-node polygon,
|
|
.m-graph g.m-node polyline,
|
|
.m-graph.m-default g.m-edge polygon,
|
|
.m-graph.m-default g.m-edge path,
|
|
.m-graph.m-default g.m-node ellipse,
|
|
.m-graph.m-default g.m-node polygon,
|
|
.m-graph.m-default g.m-node polyline {
|
|
stroke: var(--default-color);
|
|
}
|
|
.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
|
|
div.m-plot svg .m-bar.m-primary,
|
|
.m-graph.m-primary g.m-edge polygon,
|
|
.m-graph.m-primary g.m-node:not(.m-flat) ellipse,
|
|
.m-graph.m-primary g.m-node:not(.m-flat) polygon,
|
|
.m-graph.m-primary g.m-edge text,
|
|
.m-graph.m-primary g.m-node.m-flat text {
|
|
fill: var(--primary-color);
|
|
}
|
|
.m-graph.m-primary g.m-edge polygon,
|
|
.m-graph.m-primary g.m-edge path,
|
|
.m-graph.m-primary g.m-node ellipse,
|
|
.m-graph.m-primary g.m-node polygon,
|
|
.m-graph.m-primary g.m-node polyline {
|
|
stroke: var(--primary-color);
|
|
}
|
|
.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
|
|
div.m-plot svg .m-bar.m-success,
|
|
.m-graph.m-success g.m-edge polygon,
|
|
.m-graph.m-success g.m-node:not(.m-flat) ellipse,
|
|
.m-graph.m-success g.m-node:not(.m-flat) polygon,
|
|
.m-graph.m-success g.m-edge text,
|
|
.m-graph.m-success g.m-node.m-flat text {
|
|
fill: var(--success-color);
|
|
}
|
|
.m-graph.m-success g.m-edge polygon,
|
|
.m-graph.m-success g.m-edge path,
|
|
.m-graph.m-success g.m-node ellipse,
|
|
.m-graph.m-success g.m-node polygon,
|
|
.m-graph.m-success g.m-node polyline {
|
|
stroke: var(--success-color);
|
|
}
|
|
.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
|
|
div.m-plot svg .m-bar.m-warning,
|
|
.m-graph.m-warning g.m-edge polygon,
|
|
.m-graph.m-warning g.m-node:not(.m-flat) ellipse,
|
|
.m-graph.m-warning g.m-node:not(.m-flat) polygon,
|
|
.m-graph.m-warning g.m-edge text,
|
|
.m-graph.m-warning g.m-node.m-flat text {
|
|
fill: var(--warning-color);
|
|
}
|
|
.m-graph.m-warning g.m-edge polygon,
|
|
.m-graph.m-warning g.m-edge path,
|
|
.m-graph.m-warning g.m-node ellipse,
|
|
.m-graph.m-warning g.m-node polygon,
|
|
.m-graph.m-warning g.m-node polyline {
|
|
stroke: var(--warning-color);
|
|
}
|
|
.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
|
|
div.m-plot svg .m-bar.m-danger,
|
|
.m-graph.m-danger g.m-edge polygon,
|
|
.m-graph.m-danger g.m-node:not(.m-flat) ellipse,
|
|
.m-graph.m-danger g.m-node:not(.m-flat) polygon,
|
|
.m-graph.m-danger g.m-edge text,
|
|
.m-graph.m-danger g.m-node.m-flat text {
|
|
fill: var(--danger-color);
|
|
}
|
|
.m-graph.m-danger g.m-edge polygon,
|
|
.m-graph.m-danger g.m-edge path,
|
|
.m-graph.m-danger g.m-node ellipse,
|
|
.m-graph.m-danger g.m-node polygon,
|
|
.m-graph.m-danger g.m-node polyline {
|
|
stroke: var(--danger-color);
|
|
}
|
|
.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
|
|
div.m-plot svg .m-bar.m-info,
|
|
.m-graph.m-info g.m-edge polygon,
|
|
.m-graph.m-info g.m-node:not(.m-flat) ellipse,
|
|
.m-graph.m-info g.m-node:not(.m-flat) polygon,
|
|
.m-graph.m-info g.m-edge text,
|
|
.m-graph.m-info g.m-node.m-flat text {
|
|
fill: var(--info-color);
|
|
}
|
|
.m-graph.m-info g.m-edge polygon,
|
|
.m-graph.m-info g.m-edge path,
|
|
.m-graph.m-info g.m-node ellipse,
|
|
.m-graph.m-info g.m-node polygon,
|
|
.m-graph.m-info g.m-node polyline {
|
|
stroke: var(--info-color);
|
|
}
|
|
.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
|
|
div.m-plot svg .m-bar.m-dim,
|
|
.m-graph.m-dim g.m-edge polygon,
|
|
.m-graph.m-dim g.m-node:not(.m-flat) ellipse,
|
|
.m-graph.m-dim g.m-node:not(.m-flat) polygon,
|
|
.m-graph.m-dim g.m-edge text,
|
|
.m-graph.m-dim g.m-node.m-flat text {
|
|
fill: var(--dim-color);
|
|
}
|
|
.m-graph.m-dim g.m-edge polygon,
|
|
.m-graph.m-dim g.m-edge path,
|
|
.m-graph.m-dim g.m-node ellipse,
|
|
.m-graph.m-dim g.m-node polygon,
|
|
.m-graph.m-dim g.m-node polyline {
|
|
stroke: var(--dim-color);
|
|
}
|
|
|
|
/* Local-colored graphs. Later so it overrides global coloring. Applies to
|
|
either div.m-graph svg or svg.m-graph, so using just .m-graph. This is not
|
|
needed for math, for some reason the overrides work correctly. */
|
|
.m-graph g.m-edge.m-default polygon,
|
|
.m-graph g.m-node.m-default:not(.m-flat) ellipse,
|
|
.m-graph g.m-node.m-default:not(.m-flat) polygon,
|
|
.m-graph g.m-edge.m-default text,
|
|
.m-graph g.m-node.m-default.m-flat text {
|
|
fill: var(--default-color);
|
|
}
|
|
.m-graph g.m-edge.m-default polygon,
|
|
.m-graph g.m-edge.m-default path,
|
|
.m-graph g.m-node.m-default ellipse,
|
|
.m-graph g.m-node.m-default polygon,
|
|
.m-graph g.m-node.m-default polyline {
|
|
stroke: var(--default-color);
|
|
}
|
|
.m-graph g.m-edge.m-primary polygon,
|
|
.m-graph g.m-node.m-primary:not(.m-flat) ellipse,
|
|
.m-graph g.m-node.m-primary:not(.m-flat) polygon,
|
|
.m-graph g.m-edge.m-primary text,
|
|
.m-graph g.m-node.m-primary.m-flat text {
|
|
fill: var(--primary-color);
|
|
}
|
|
.m-graph g.m-edge.m-primary polygon,
|
|
.m-graph g.m-edge.m-primary path,
|
|
.m-graph g.m-node.m-primary ellipse,
|
|
.m-graph g.m-node.m-primary polygon,
|
|
.m-graph g.m-node.m-primary polyline {
|
|
stroke: var(--primary-color);
|
|
}
|
|
.m-graph g.m-edge.m-success polygon,
|
|
.m-graph g.m-node.m-success:not(.m-flat) ellipse,
|
|
.m-graph g.m-node.m-success:not(.m-flat) polygon,
|
|
.m-graph g.m-edge.m-success text,
|
|
.m-graph g.m-node.m-success.m-flat text {
|
|
fill: var(--success-color);
|
|
}
|
|
.m-graph g.m-edge.m-success polygon,
|
|
.m-graph g.m-edge.m-success path,
|
|
.m-graph g.m-node.m-success ellipse,
|
|
.m-graph g.m-node.m-success polygon,
|
|
.m-graph g.m-node.m-success polyline {
|
|
stroke: var(--success-color);
|
|
}
|
|
.m-graph g.m-edge.m-warning polygon,
|
|
.m-graph g.m-node.m-warning:not(.m-flat) ellipse,
|
|
.m-graph g.m-node.m-warning:not(.m-flat) polygon,
|
|
.m-graph g.m-edge.m-warning text,
|
|
.m-graph g.m-node.m-warning.m-flat text {
|
|
fill: var(--warning-color);
|
|
}
|
|
.m-graph g.m-edge.m-warning polygon,
|
|
.m-graph g.m-edge.m-warning path,
|
|
.m-graph g.m-node.m-warning ellipse,
|
|
.m-graph g.m-node.m-warning polygon,
|
|
.m-graph g.m-node.m-warning polyline {
|
|
stroke: var(--warning-color);
|
|
}
|
|
.m-graph g.m-edge.m-danger polygon,
|
|
.m-graph g.m-node.m-danger:not(.m-flat) ellipse,
|
|
.m-graph g.m-node.m-danger:not(.m-flat) polygon,
|
|
.m-graph g.m-edge.m-danger text,
|
|
.m-graph g.m-node.m-danger.m-flat text {
|
|
fill: var(--danger-color);
|
|
}
|
|
.m-graph g.m-edge.m-danger polygon,
|
|
.m-graph g.m-edge.m-danger path,
|
|
.m-graph g.m-node.m-danger ellipse,
|
|
.m-graph g.m-node.m-danger polygon,
|
|
.m-graph g.m-node.m-danger polyline {
|
|
stroke: var(--danger-color);
|
|
}
|
|
.m-graph g.m-edge.m-info polygon,
|
|
.m-graph g.m-node.m-info:not(.m-flat) ellipse,
|
|
.m-graph g.m-node.m-info:not(.m-flat) polygon,
|
|
.m-graph g.m-edge.m-info text,
|
|
.m-graph g.m-node.m-info.m-flat text {
|
|
fill: var(--info-color);
|
|
}
|
|
.m-graph g.m-edge.m-info polygon,
|
|
.m-graph g.m-edge.m-info path,
|
|
.m-graph g.m-node.m-info ellipse,
|
|
.m-graph g.m-node.m-info polygon,
|
|
.m-graph g.m-node.m-info polyline {
|
|
stroke: var(--info-color);
|
|
}
|
|
.m-graph g.m-edge.m-dim polygon,
|
|
.m-graph g.m-node.m-dim:not(.m-flat) ellipse,
|
|
.m-graph g.m-node.m-dim:not(.m-flat) polygon,
|
|
.m-graph g.m-edge.m-dim text,
|
|
.m-graph g.m-node.m-dim.m-flat text {
|
|
fill: var(--dim-color);
|
|
}
|
|
.m-graph g.m-edge.m-dim polygon,
|
|
.m-graph g.m-edge.m-dim path,
|
|
.m-graph g.m-node.m-dim ellipse,
|
|
.m-graph g.m-node.m-dim polygon,
|
|
.m-graph g.m-node.m-dim polyline {
|
|
stroke: var(--dim-color);
|
|
}
|
|
|
|
/* Spacing after every block element, but not after the last and not when
|
|
m-nopadb is specified. It's div.m-math and div.m-graph instead of .m-math and
|
|
.m-graph because math / graph figures are handled already with
|
|
figure.m-figure. */
|
|
p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
|
|
.m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image,
|
|
img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math,
|
|
div.m-graph, div.m-plot {
|
|
margin-bottom: 1rem;
|
|
}
|
|
p:last-child, p.m-nopadb, ul:last-child, ul.m-nopadb,
|
|
ol:last-child, ol.m-nopadb, dl:last-child, dl.m-nopadb,
|
|
blockquote:last-child, blockquote.m-nopadb, pre:last-child, pre.m-nopadb,
|
|
.m-code-figure:last-child, .m-code-figure.m-nopadb,
|
|
.m-console-figure:last-child, .m-console-figure.m-nopadb,
|
|
hr:last-child, hr.m-nopadb, .m-note:last-child, .m-note.m-nopadb,
|
|
.m-frame:last-child, .m-frame.m-nopadb, .m-block:last-child, .m-block.m-nopadb,
|
|
div.m-button:last-child, div.m-button.m-nopadb,
|
|
div.m-scroll:last-child, div.m-scroll.m-nopadb,
|
|
table.m-table:last-child, table.m-table.m-nopadb,
|
|
img.m-image:last-child, img.m-image.m-nopadb,
|
|
svg.m-image:last-child, svg.m-image.m-nopadb,
|
|
div.m-image:last-child, div.m-image.m-nopadb,
|
|
figure.m-figure:last-child, figure.m-figure.m-nopadb,
|
|
.m-imagegrid:last-child, .m-imagegrid.m-nopadb,
|
|
div.m-math:last-child, div.m-math.m-nopadb,
|
|
div.m-graph:last-child, div.m-graph.m-nopadb,
|
|
div.m-plot:last-child, div.m-plot.m-nopadb {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* List items usually have just inline elements and are kept compact. If (sane)
|
|
block elements are inside list items, they have spacing even as last, but
|
|
not if the list item is the last. Also not if m-nopadb is specified. */
|
|
li > p:last-child, li > blockquote:last-child, li > pre:last-child,
|
|
li > .m-code-figure:last-child, li > .m-console-figure:last-child,
|
|
li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
|
|
li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child,
|
|
li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child,
|
|
li > figure.m-figure:last-child, li > div.m-math:last-child,
|
|
li > div.m-graph:last-child, li > div.m-plot:last-child {
|
|
margin-bottom: 1rem;
|
|
}
|
|
li:last-child > p:last-child, li:last-child > p.m-nopadb,
|
|
li:last-child > blockquote:last-child, li:last-child > blockquote.m-nopadb,
|
|
li:last-child > pre:last-child, li:last-child > pre.m-nopadb,
|
|
li:last-child > .m-code-figure:last-child, li:last-child > .m-code-figure.m-nopadb,
|
|
li:last-child > .m-console-figure:last-child, li:last-child > .m-console-figure.m-nopadb,
|
|
li:last-child > .m-note:last-child, li:last-child > .m-note.m-nopadb,
|
|
li:last-child > .m-frame:last-child, li:last-child > .m-frame.m-nopadb,
|
|
li:last-child > .m-block:last-child, li:last-child > .m-block.m-nopadb,
|
|
li:last-child > div.m-button:last-child, li:last-child > div.m-button.m-nopadb,
|
|
li:last-child > div.m-scroll:last-child, li:last-child > div.m-scroll.m-nopadb,
|
|
li:last-child > table.m-table:last-child, li:last-child > table.m-table.m-nopadb,
|
|
li:last-child > img.m-image:last-child, li:last-child > img.m-image.m-nopadb,
|
|
li:last-child > svg.m-image:last-child, li:last-child > svg.m-image.m-nopadb,
|
|
li:last-child > div.m-image:last-child, li:last-child > div.m-image.m-nopadb,
|
|
li:last-child > figure.m-figure:last-child, li:last-child > figure.m-figure.m-nopadb,
|
|
li:last-child > div.m-math:last-child, li:last-child > div.m-math.m-nopadb,
|
|
li:last-child > div.m-graph:last-child, li:last-child > div.m-graph.m-nopadb,
|
|
li:last-child > div.m-plot:last-child, li:last-child > div.m-plot.m-nopadb {
|
|
margin-bottom: 0;
|
|
}
|