diff --git a/css/m-components.css b/css/m-components.css index efbefb11..840c38d5 100644 --- a/css/m-components.css +++ b/css/m-components.css @@ -51,7 +51,7 @@ p, ul, ol, dl { ul, ol { padding-left: 2rem; } -ul ol, ul ul, ol ol, ol ul { +:is(ul, ol) :is(ul, ol) { margin-bottom: 0; } main p { @@ -59,7 +59,7 @@ main p { 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 { +main p.m-noindent, :is(li, dd, table.m-table td) > p { text-indent: 0; text-align: left; } @@ -103,7 +103,7 @@ a { a.m-flat { text-decoration: none; } -a:hover, a:focus, a:active { +a:is(:hover, :focus, :active) { color: var(--link-active-color); } a img { border: 0; } /* Why you so special, IE?! */ @@ -124,7 +124,7 @@ pre, code { color: var(--code-color); background-color: var(--code-background-color); } -pre.m-console, code.m-console { +:is(pre, code).m-console { color: var(--console-color); background-color: var(--console-background-color); } @@ -179,50 +179,41 @@ div.m-scroll { .m-text.m-tiny { font-size: 50.0%; } .m-text.m-small { font-size: 85.4%; } .m-text.m-big { font-size: 117%; } -h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin { +:is(h1, h2, h3, h4, h5, h6) .m-thin { font-weight: normal; } /* Lists */ -ul.m-unstyled, ol.m-unstyled { +:is(ul, ol).m-unstyled { list-style-type: none; padding-left: 0; } -ul[class*='m-block-'], ol[class*='m-block-'] { +:is(ul, ol)[class*='m-block-'] { padding-left: 0; } -ul[class*='m-block-'] li, ol[class*='m-block-'] li { +:is(ul, 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 { +:is(ul, 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 { +:is(ul, 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: ""; } + :is(ul, ol):is(.m-block-bar-s, .m-block-dot-s) { padding-left: 2rem; } + :is(ul, ol):is(.m-block-bar-s, .m-block-dot-s) li { display: list-item; } + :is(ul, ol):is(.m-block-bar-s, .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: ""; } + :is(ul, ol):is(.m-block-bar-m, .m-block-dot-m) { padding-left: 2rem; } + :is(ul, ol):is(.m-block-bar-m, .m-block-dot-m) li { display: list-item; } + :is(ul, ol):is(.m-block-bar-m, .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: ""; } + :is(ul, ol):is(.m-block-bar-l, .m-block-dot-l) { padding-left: 2rem; } + :is(ul, ol):is(.m-block-bar-l, .m-block-dot-l) li { display: list-item; } + :is(ul, ol):is(.m-block-bar-l, .m-block-dot-l) li:not(:last-child)::after { content: ""; } } /* Special paragraph styling */ @@ -259,14 +250,14 @@ dl.m-diary dd { } /* Footnotes, footnote references */ -a.m-footnote, dl.m-footnote dd span.m-footnote { +:is(a, dl, dd).m-footnote { top: -0.35rem; /* Same as .m-text.m-sup */ font-size: 0.75rem; line-height: 0; position: relative; vertical-align: baseline; } -a.m-footnote, dl.m-footnote dd span.m-footnote a { +:is(a, dl, dd).m-footnote a { text-decoration: none; } a.m-footnote::before { content: '['; } @@ -386,7 +377,7 @@ div.m-scroll > table.m-table:last-child { table.m-table:not(.m-flat) tbody tr:hover { background-color: var(--line-color); } -table.m-table th, table.m-table td { +table.m-table :is(th, td) { vertical-align: top; border-style: solid; border-top-width: 0.0625rem; @@ -398,20 +389,20 @@ table.m-table th, table.m-table td { table.m-table caption { padding-bottom: 0.5rem; } -table.m-table thead tr:first-child th, table.m-table thead tr:first-child td { +table.m-table thead tr:first-child :is(th, td) { border-top-width: 0.125rem; } -table.m-table thead th, table.m-table thead td { +table.m-table thead :is(th, td) { border-bottom-width: 0.125rem; vertical-align: bottom; } -table.m-table tfoot th, table.m-table tfoot td { +table.m-table tfoot :is(th, td) { border-top-width: 0.125rem; } -table.m-table th, table.m-table td { +table.m-table :is(th, td) { padding: 0.5rem; } -table.m-table.m-big th, table.m-table.m-big td { +table.m-table.m-big :is(th, td) { padding: 0.75rem 1rem; } table.m-table th { @@ -420,76 +411,33 @@ table.m-table th { 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 { +table.m-table :is(th, td):is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .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 { +table.m-table.m-big :is(th, td):is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .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 { +table.m-table tr:is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .m-dim) :is(th, td), +table.m-table :is(th, td):is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .m-dim) { border-color: var(--background-color); } /* Code on a colored background has a semi-transparent background */ -.m-note pre, .m-note code, -table.m-table tr.m-default pre, table.m-table tr.m-default code, -table.m-table td.m-default pre, table.m-table td.m-default code, -table.m-table th.m-default pre, table.m-table th.m-default code, -table.m-table tr.m-primary pre, table.m-table tr.m-primary code, -table.m-table td.m-primary pre, table.m-table td.m-primary code, -table.m-table th.m-primary pre, table.m-table th.m-primary code, -table.m-table tr.m-success pre, table.m-table tr.m-success code, -table.m-table td.m-success pre, table.m-table td.m-success code, -table.m-table th.m-success pre, table.m-table th.m-success code, -table.m-table tr.m-warning pre, table.m-table tr.m-warning code, -table.m-table td.m-warning pre, table.m-table td.m-warning code, -table.m-table th.m-warning pre, table.m-table th.m-warning code, -table.m-table tr.m-danger pre, table.m-table tr.m-danger code, -table.m-table td.m-danger pre, table.m-table td.m-danger code, -table.m-table th.m-danger pre, table.m-table th.m-danger code, -table.m-table tr.m-info pre, table.m-table tr.m-info code, -table.m-table td.m-info pre, table.m-table td.m-info code, -table.m-table th.m-info pre, table.m-table th.m-info code, -table.m-table tr.m-dim pre, table.m-table tr.m-dim code, -table.m-table td.m-dim pre, table.m-table td.m-dim code, -table.m-table th.m-dim pre, table.m-table th.m-dim code { +:is( + .m-note, + table.m-table :is(tr, td, th):is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .m-dim) +) :is(pre, code) { background-color: var(--code-note-background-color); } /* Image. Ensure everything is done for both and . */ -img.m-image, svg.m-image { +:is(img, svg).m-image { display: block; margin-left: auto; margin-right: auto; @@ -497,11 +445,11 @@ img.m-image, svg.m-image { div.m-image { text-align: center; } -img.m-image, svg.m-image, div.m-image img, div.m-image svg { +:is(img, svg).m-image, div.m-image :is(img, svg) { max-width: 100%; border-radius: var(--border-radius); } -div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg { +div.m-image.m-fullwidth :is(img, svg) { width: 100%; } /* Image badge. Deliberately omitting since I don't see any use for those @@ -519,7 +467,7 @@ figure.m-figure { position: relative; display: table; } -figure.m-figure:before { +figure.m-figure::before { position: absolute; content: ' '; top: 0; @@ -532,7 +480,7 @@ figure.m-figure:before { border-radius: var(--border-radius); border-color: var(--line-color); } -figure.m-figure.m-flat:before { +figure.m-figure.m-flat::before { border-color: transparent; } figure.m-figure > * { @@ -550,7 +498,7 @@ figure.m-figure > *:last-child { priority than this */ margin-bottom: 1rem !important; } -figure.m-figure img, figure.m-figure svg { +figure.m-figure :is(img, svg) { position: relative; /* so it's above the border */ margin-left: 0; margin-right: 0; @@ -559,11 +507,11 @@ figure.m-figure img, figure.m-figure svg { border-top-right-radius: var(--border-radius); max-width: 100%; } -figure.m-figure.m-flat img, figure.m-figure.m-flat svg { +figure.m-figure.m-flat :is(img, 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 { +figure.m-figure a :is(img, svg) { margin-left: -1rem; margin-right: -1rem; } @@ -575,10 +523,10 @@ 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 { +figure.m-figure.m-fullwidth :is(img, svg) { width: 100%; } -figure.m-figure.m-fullwidth:after { +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: ' '; @@ -596,7 +544,7 @@ figure.m-figure.m-fullwidth:after { position: relative; padding: 1rem; } -.m-code-figure:before, .m-console-figure:before { +:is(.m-code-figure, .m-console-figure)::before { position: absolute; content: ' '; top: 0; @@ -608,16 +556,16 @@ figure.m-figure.m-fullwidth:after { border-width: 0.125rem; border-radius: var(--border-radius); } -.m-code-figure:before { +.m-code-figure::before { border-color: var(--code-background-color); } -.m-console-figure:before { +.m-console-figure::before { border-color: var(--console-background-color); } -.m-code-figure.m-flat:before, .m-console-figure.m-flat:before { +:is(.m-code-figure, .m-console-figure).m-flat::before { border-color: transparent; } -.m-code-figure > pre:first-child, .m-console-figure > pre:first-child { +:is(.m-code-figure, .m-console-figure) > pre:first-child { position: relative; /* so it's above the border */ margin: -1rem -1rem 1rem -1rem; border-bottom-left-radius: 0; @@ -626,7 +574,7 @@ figure.m-figure.m-fullwidth:after { /* "Nopad" code block inside a code/console figure -- show code and console output nicely packed together */ -.m-code-figure > pre.m-nopad, .m-console-figure > pre.m-nopad { +:is(.m-code-figure, .m-console-figure) > pre.m-nopad { margin-left: -0.875rem; margin-right: -0.875rem; margin-top: -1rem; @@ -635,13 +583,13 @@ figure.m-figure.m-fullwidth:after { } /* Figure caption */ -figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption { +:is(figure.m-figure, .m-code-figure, .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 */ } -figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure figcaption a { +:is(figure.m-figure, .m-code-figure, .m-console-figure) figcaption a { text-decoration: var(--link-decoration-heading); } @@ -655,10 +603,8 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig 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 { +.m-imagegrid > div > figure > :is(div, figcaption), +.m-imagegrid > div > figure > a > :is(div, figcaption) { position: absolute; top: 0; left: 0; @@ -669,16 +615,12 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig 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 { +.m-imagegrid > div > figure:first-child > :is(div, figcaption), +.m-imagegrid > div > figure:first-child > a > :is(div, 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 { +.m-imagegrid > div > figure:last-child > :is(div, figcaption), +.m-imagegrid > div > figure:last-child > a > :is(div, figcaption) { border-right-width: 0; } .m-imagegrid > div > figure > figcaption, @@ -689,10 +631,8 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig 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 { +.m-imagegrid > div > figure > :is(div, figcaption)::before, +.m-imagegrid > div > figure > a > :is(div, figcaption)::before { content: ''; display: inline-block; height: 100%; @@ -720,91 +660,38 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig 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 { + .m-imagegrid > div > figure > :is(div, figcaption), + .m-imagegrid > div > figure > a > :is(div, 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 -{ +:is( + .m-container-inflatable > .m-row > [class*='m-col-'], + .m-container-inflatable > .m-row > [class*='m-col-'] section, + .m-container-inflatable :is( + [class*='m-center-'], + [class*='m-left-'], + [class*='m-right-'], + .m-container-inflate + ) +) > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .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 { + .m-container-inflatable .m-center-s > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .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 { + .m-container-inflatable .m-left-s > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .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 { + .m-container-inflatable .m-right-s > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) { margin-left: 0; margin-right: -1rem; } @@ -816,33 +703,15 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig } } @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 { + .m-container-inflatable .m-center-m > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .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 { + .m-container-inflatable .m-left-m > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .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 { + .m-container-inflatable .m-right-m > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) { margin-left: 0; margin-right: -1rem; } @@ -854,33 +723,15 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig } } @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 { + .m-container-inflatable .m-center-l > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .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 { + .m-container-inflatable .m-left-l > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .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 { + .m-container-inflatable .m-right-l > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) { margin-left: 0; margin-right: -1rem; } @@ -900,10 +751,10 @@ pre.m-code span.hll { } /* Inverted code block / inline code */ -.m-code.m-inverted > span, .m-console.m-inverted > span { +:is(.m-code, .m-console).m-inverted > span { opacity: 0.3333; } -.m-code.m-inverted > span.hll, .m-console.m-inverted > span.hll { +:is(.m-code, .m-console).m-inverted > span.hll { opacity: 1; background-color: transparent; /* TODO: handle this in pygments directly */ border-color: transparent; @@ -937,15 +788,17 @@ div.m-math svg { } 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 { +:is( + div.m-button.m-flat a:hover, + div.m-button.m-default a:is(:focus, :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 graph and a graph. */ .m-graph { font-size: var(--font-size); } -div.m-plot svg, div.m-graph svg { +div:is(.m-plot, .m-graph) svg { max-width: 100%; margin-left: auto; margin-right: auto; @@ -965,9 +818,11 @@ div.m-plot svg .m-error { 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-cluster polygon, -.m-graph g.m-node.m-flat ellipse, -.m-graph g.m-node.m-flat polygon { +.m-graph :is( + g.m-edge path, + g.m-cluster polygon, + g.m-node.m-flat :is(ellipse, polygon) +) { fill: none; } .m-graph g.m-node:not(.m-flat) text { @@ -978,112 +833,91 @@ div.m-plot svg .m-label.m-dim { fill: var(--dim-color); } 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 { +figure.m-figure > svg:is(.m-math, .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 { +figure.m-figure:not(.m-flat) > svg:is(.m-math, .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 { +.m-block.m-default :is(h3, h4, h5, h6), +:is(.m-text, .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 { +.m-block.m-default :is(h3, h4, h5, 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 { +.m-block.m-primary :is(h3, h4, h5, h6), +.m-block.m-primary :is(h3, h4, h5, h6) a, +:is(.m-text, .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 { +.m-block.m-success :is(h3, h4, h5, h6), +.m-block.m-success :is(h3, h4, h5, h6) a, +:is(.m-text, .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 { +.m-block.m-warning :is(h3, h4, h5, h6), +.m-block.m-warning :is(h3, h4, h5, h6) a, +:is(.m-text, .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 { +.m-block.m-danger :is(h3, h4, h5, h6), +.m-block.m-danger :is(h3, h4, h5, h6) a, +:is(.m-text, .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 { +.m-block.m-info :is(h3, h4, h5, h6), +.m-block.m-info :is(h3, h4, h5, h6) a, +:is(.m-text, .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 { +:is(.m-text, .m-label.m-flat, .m-block).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 { +:is(.m-block, .m-text).m-dim a { color: var(--dim-link-color); } +:is(.m-block, .m-text).m-dim a:is(:hover, :focus, :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 { +.m-block.m-flat :is(h3, h4, h5, 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 { +.m-block.m-default :is(h3, h4, h5, h6) a:is(:hover, :focus, :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 { +.m-block.m-primary :is(h3, h4, h5, h6) a:is(:hover, :focus, :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 { +.m-block.m-success :is(h3, h4, h5, h6) a:is(:hover, :focus, :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 { +.m-block.m-warning :is(h3, h4, h5, h6) a:is(:hover, :focus, :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 { +.m-block.m-danger :is(h3, h4, h5, h6) a:is(:hover, :focus, :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 { +.m-block.m-info :is(h3, h4, h5, h6) a:is(:hover, :focus, :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 { +div.m-button.m-flat a:is(:hover, :focus, :active) { color: var(--link-active-color); } div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: var(--default-color); } @@ -1093,25 +927,25 @@ div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: va 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 { +div.m-button.m-default a:is(:hover, :focus, :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 { +div.m-button.m-primary a:is(:hover, :focus, :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 { +div.m-button.m-success a:is(:hover, :focus, :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 { +div.m-button.m-warning a:is(:hover, :focus, :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 { +div.m-button.m-danger a:is(:hover, :focus, :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 { +div.m-button.m-info a:is(:hover, :focus, :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 { +div.m-button.m-dim a:is(:hover, :focus, :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); @@ -1120,175 +954,162 @@ div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:act /* 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 { +table.m-table tr.m-default :is(td, th), +table.m-table :is(td, 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 { +:is( + .m-note.m-default, + table.m-table tr.m-default :is(td, th), + table.m-table :is(td, th).m-default +) a:is(:hover, :focus, :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 { +table.m-table tr.m-primary :is(td, th), +table.m-table :is(td, 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 { +:is( + .m-note.m-primary, + table.m-table tr.m-primary :is(td, th), + table.m-table :is(td, 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 { +:is( + .m-note.m-primary, + table.m-table tr.m-primary :is(td, th), + table.m-table :is(td, th).m-primary +) a:is(:hover, :focus, :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 { +table.m-table tr.m-success :is(td, th), +table.m-table :is(td, 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 { +:is( + .m-note.m-success, + table.m-table tr.m-success :is(td, th), + table.m-table :is(td, 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 { +:is( + .m-note.m-success, + table.m-table tr.m-success :is(td, th), + table.m-table :is(td, th).m-success +) a:is(:hover, :focus, :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 { + +.m-note.m-warning, +table.m-table tr.m-warning :is(td, th), +table.m-table :is(td, 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 { +:is( + .m-note.m-warning, + table.m-table tr.m-warning :is(td, th), + table.m-table :is(td, 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 { +:is( + .m-note.m-warning, + table.m-table tr.m-warning :is(td, th), + table.m-table :is(td, th).m-warning +) a:is(:hover, :focus, :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 { +table.m-table tr.m-danger :is(td, th), +table.m-table :is(td, 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 { +:is( + .m-note.m-danger, + table.m-table tr.m-danger :is(td, th), + table.m-table :is(td, 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 { +:is( + .m-note.m-danger, + table.m-table tr.m-danger :is(td, th), + table.m-table :is(td, th).m-danger +) a:is(:hover, :focus, :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 { +table.m-table tr.m-info :is(td, th), +table.m-table :is(td, 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 { +:is( + .m-note.m-info, + table.m-table tr.m-info :is(td, th), + table.m-table :is(td, 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 { +:is( + .m-note.m-info, + table.m-table tr.m-info :is(td, th), + table.m-table :is(td, th).m-info +) a:is(:hover, :focus, :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 { +table.m-table tr.m-dim :is(td, th), +table.m-table :is(td, 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 { +:is( + .m-note.m-dim, + table.m-table tr.m-dim :is(td, th), + table.m-table :is(td, 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 { +:is( + .m-note.m-dim, + table.m-table tr.m-dim :is(td, th), + table.m-table :is(td, th).m-dim +) a:is(:hover, :focus, :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::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::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::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::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::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::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::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 { +figure.m-figure.m-dim a:is(:hover, :focus, :active) { color: var(--dim-link-active-color); } @@ -1303,142 +1124,127 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- https://mcss.mosra.cz/plugins/math-and-code/test/ https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */ .m-math { fill: var(--color); } -.m-math.m-default, .m-math g.m-default, .m-math rect.m-default, +.m-math.m-default, .m-math :is(g, 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 g.m-cluster 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, -.m-graph.m-default g.m-cluster text { +.m-graph :is( + g.m-edge :is(polygon, text), + g.m-node:not(.m-flat) :is(ellipse, polygon), + g.m-node.m-flat text, + g.m-cluster 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 g.m-cluster polygon, -.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, -.m-graph.m-default g.m-cluster polygon { +.m-graph :is( + g.m-edge :is(polygon, path), + g.m-node :is(ellipse, polygon, polyline), + g.m-cluster polygon +) { stroke: var(--default-color); } -.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary, + +.m-math.m-primary, .m-math :is(g, 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, -.m-graph.m-primary g.m-cluster text { +.m-graph.m-primary :is( + g.m-edge :is(polygon, text), + g.m-node:not(.m-flat) :is(ellipse, polygon), + g.m-node.m-flat text, + g.m-cluster 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, -.m-graph.m-primary g.m-cluster polygon { +.m-graph.m-primary :is( + g.m-edge :is(polygon, path), + g.m-node :is(ellipse, polygon, polyline), + g.m-cluster polygon +) { stroke: var(--primary-color); } -.m-math.m-success, .m-math g.m-success, .m-math rect.m-success, + +.m-math.m-success, .m-math :is(g, 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, -.m-graph.m-success g.m-cluster text { +.m-graph.m-success :is( + g.m-edge :is(polygon, text), + g.m-node:not(.m-flat) :is(ellipse, polygon), + g.m-node.m-flat text, + g.m-cluster 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, -.m-graph.m-success g.m-cluster polygon { +.m-graph.m-success :is( + g.m-edge :is(polygon, path), + g.m-node :is(ellipse, polygon, polyline), + g.m-cluster polygon +) { stroke: var(--success-color); } -.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning, + +.m-math.m-warning, .m-math :is(g, 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, -.m-graph.m-warning g.m-cluster text { +.m-graph.m-warning :is( + g.m-edge :is(polygon, text), + g.m-node:not(.m-flat) :is(ellipse, polygon), + g.m-node.m-flat text, + g.m-cluster 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, -.m-graph.m-warning g.m-cluster polygon { +.m-graph.m-warning :is( + g.m-edge :is(polygon, path), + g.m-node :is(ellipse, polygon, polyline), + g.m-cluster polygon +) { stroke: var(--warning-color); } -.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger, + +.m-math.m-danger, .m-math :is(g, 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, -.m-graph.m-danger g.m-cluster text { +.m-graph.m-danger :is( + g.m-edge :is(polygon, text), + g.m-node:not(.m-flat) :is(ellipse, polygon), + g.m-node.m-flat text, + g.m-cluster 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, -.m-graph.m-danger g.m-cluster polygon { +.m-graph.m-danger :is( + g.m-edge :is(polygon, path), + g.m-node :is(ellipse, polygon, polyline), + g.m-cluster polygon +) { stroke: var(--danger-color); } -.m-math.m-info, .m-math g.m-info, .m-math rect.m-info, +.m-math.m-info, .m-math :is(g, 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, -.m-graph.m-info g.m-cluster text { +.m-graph.m-info :is( + g.m-edge :is(polygon, text), + g.m-node:not(.m-flat) :is(ellipse, polygon), + g.m-node.m-flat text, + g.m-cluster 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, -.m-graph.m-info g.m-cluster polygon { +.m-graph.m-info :is( + g.m-edge :is(polygon, path), + g.m-node :is(ellipse, polygon, polyline), + g.m-cluster polygon +) { stroke: var(--info-color); } -.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim, +.m-math.m-dim, .m-math :is(g, 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, -.m-graph.m-dim g.m-cluster text { +.m-graph.m-dim :is( + g.m-edge :is(polygon, text), + g.m-node:not(.m-flat) :is(ellipse, polygon), + g.m-node.m-flat text, + g.m-cluster 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, -.m-graph.m-dim g.m-cluster polygon { +.m-graph.m-dim :is( + g.m-edge :is(polygon, path), + g.m-node :is(ellipse, polygon, polyline), + g.m-cluster polygon +) { stroke: var(--dim-color); } @@ -1449,116 +1255,108 @@ div.m-plot svg .m-bar.m-dim, When modifying, use these test pages for a visual check & expand as needed: https://mcss.mosra.cz/plugins/math-and-code/test/ https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */ -.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, -.m-graph g.m-cluster.m-default text { +.m-graph :is( + g.m-edge.m-default :is(polygon, text), + g:is(.m-node, .m-cluster).m-default text + g.m-node.m-default:not(.m-flat) :is(ellipse, polygon) +) { 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, -.m-graph g.m-cluster.m-default polygon { +.m-graph :is( + g.m-edge.m-default :is(polygon, path), + g.m-node.m-default :is(ellipse, polygon, polyline), + g.m-cluster.m-default polygon +) { 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, -.m-graph g.m-cluster.m-primary text { + +.m-graph :is( + g.m-edge.m-primary :is(polygon, text), + g:is(.m-node, .m-cluster).m-primary text + g.m-node.m-primary:not(.m-flat) :is(ellipse, polygon) +) { 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, -.m-graph g.m-cluster.m-primary polygon { +.m-graph :is( + g.m-edge.m-primary :is(polygon, path), + g.m-node.m-primary :is(ellipse, polygon, polyline), + g.m-cluster.m-primary polygon +) { 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, -.m-graph g.m-cluster.m-success text { + +.m-graph :is( + g.m-edge.m-success :is(polygon, text), + g:is(.m-node, .m-cluster).m-success text + g.m-node.m-success:not(.m-flat) :is(ellipse, polygon) +) { 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, -.m-graph g.m-cluster.m-success polygon { +.m-graph :is( + g.m-edge.m-success :is(polygon, path), + g.m-node.m-success :is(ellipse, polygon, polyline), + g.m-cluster.m-success polygon +) { 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, -.m-graph g.m-cluster.m-warning text { + +.m-graph :is( + g.m-edge.m-warning :is(polygon, text), + g:is(.m-node, .m-cluster).m-warning text + g.m-node.m-warning:not(.m-flat) :is(ellipse, polygon) +) { 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, -.m-graph g.m-cluster.m-warning polygon { +.m-graph :is( + g.m-edge.m-warning :is(polygon, path), + g.m-node.m-warning :is(ellipse, polygon, polyline), + g.m-cluster.m-warning polygon +) { 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, -.m-graph g.m-cluster.m-danger text { + +.m-graph :is( + g.m-edge.m-danger :is(polygon, text), + g:is(.m-node, .m-cluster).m-danger text + g.m-node.m-danger:not(.m-flat) :is(ellipse, polygon) +) { 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, -.m-graph g.m-cluster.m-danger polygon { +.m-graph :is( + g.m-edge.m-danger :is(polygon, path), + g.m-node.m-danger :is(ellipse, polygon, polyline), + g.m-cluster.m-danger polygon +) { 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, -.m-graph g.m-cluster.m-info text { + +.m-graph :is( + g.m-edge.m-info :is(polygon, text), + g:is(.m-node, .m-cluster).m-info text + g.m-node.m-info:not(.m-flat) :is(ellipse, polygon) +) { 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, -.m-graph g.m-cluster.m-info polygon { +.m-graph :is( + g.m-edge.m-info :is(polygon, path), + g.m-node.m-info :is(ellipse, polygon, polyline), + g.m-cluster.m-info polygon +) { 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, -.m-graph g.m-cluster.m-dim text { + +.m-graph :is( + g.m-edge.m-dim :is(polygon, text), + g:is(.m-node, .m-cluster).m-dim text + g.m-node.m-dim:not(.m-flat) :is(ellipse, polygon) +) { 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, -.m-graph g.m-cluster.m-dim polygon { +.m-graph :is( + g.m-edge.m-dim :is(polygon, path), + g.m-node.m-dim :is(ellipse, polygon, polyline), + g.m-cluster.m-dim polygon +) { stroke: var(--dim-color); } @@ -1568,60 +1366,33 @@ div.m-plot svg .m-bar.m-dim, 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 { +:is(img, 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 { +:is( + 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, + :is(img, svg).m-image, figure.m-figure, .m-imagegrid, div.m-math, div.m-graph, + div.m-plot +):is(:last-child, .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 { +li > :is( + p, blockquote, pre, .m-code-figure, .m-console-figure, .m-note, .m-frame, + .m-block, .m-button, .m-scroll, table.m-table, :is(img, svg).m-image, div.m-image + figure.m-figure, div.m-math, div.m-graph, 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 { +li:last-child > :is( + p, blockquote, pre, .m-code-figure, .m-console-figure, .m-note, .m-frame, + .m-block, .m-button, .m-scroll, table.m-table, :is(img, svg).m-image, div.m-image + figure.m-figure, div.m-math, div.m-graph, div.m-plot +):is(:last-child, .m-nopadb) { margin-bottom: 0; } diff --git a/css/m-documentation.css b/css/m-documentation.css index 12296f0e..38ec5615 100644 --- a/css/m-documentation.css +++ b/css/m-documentation.css @@ -45,8 +45,8 @@ ul.m-doc li.m-doc-collapsible > a:first-child:active { color: var(--color); } a.m-doc-self, -ul.m-doc li.m-doc-expansible > a:first-child:before, -ul.m-doc li.m-doc-collapsible > a:first-child:before { +ul.m-doc li.m-doc-expansible > a:first-child::before, +ul.m-doc li.m-doc-collapsible > a:first-child::before { color: var(--article-heading-color); } a.m-doc-self:hover, a.m-doc-self:focus, a.m-doc-self:active, @@ -110,14 +110,14 @@ ul.m-doc li.m-doc-expansible, ul.m-doc li.m-doc-collapsible { ul.m-doc li.m-doc-expansible > ul.m-doc, ul.m-doc li.m-doc-collapsible > ul.m-doc { margin-left: 0.5rem; } -ul.m-doc li.m-doc-expansible > a:first-child:before, ul.m-doc li.m-doc-collapsible > a:first-child:before { +ul.m-doc li.m-doc-expansible > a:first-child::before, ul.m-doc li.m-doc-collapsible > a:first-child::before { background-color: var(--background-color); display: inline-block; width: 0.4rem; font-weight: bold; } -ul.m-doc li.m-doc-expansible > a:first-child:before { content: '⊕'; } -ul.m-doc li.m-doc-collapsible > a:first-child:before { content: '⊖'; } +ul.m-doc li.m-doc-expansible > a:first-child::before { content: '⊕'; } +ul.m-doc li.m-doc-collapsible > a:first-child::before { content: '⊖'; } h1 .m-doc-template, h1 .m-doc-include { font-size: 1.3rem; diff --git a/css/m-grid.css b/css/m-grid.css index 631c9435..f00c3484 100644 --- a/css/m-grid.css +++ b/css/m-grid.css @@ -39,7 +39,7 @@ body { margin: 0; } margin-left: -1rem; margin-right: -1rem; } -.m-row:after { /* avoid rows floating around each other */ +.m-row::after { /* avoid rows floating around each other */ content: ' '; clear: both; display: table; @@ -68,20 +68,16 @@ body { margin: 0; } /* Padding overrides for container and columns. Works for both columns inside rows and floating columns. */ -.m-container.m-nopad, [class*='m-col-'].m-nopad, -.m-container.m-nopadx, [class*='m-col-'].m-nopadx, -.m-container.m-nopadl, [class*='m-col-'].m-nopadl { +:is(.m-container, [class*='m-col-']):is(.m-nopad, .m-nopadx, .m-nopadl) { padding-left: 0; } -.m-container.m-nopad, [class*='m-col-'].m-nopad, -.m-container.m-nopadx, [class*='m-col-'].m-nopadx, -.m-container.m-nopadr, [class*='m-col-'].m-nopadr { +:is(.m-container, [class*='m-col-']):is(.m-nopad, .m-nopadx, .m-nopadr) { padding-right: 0; } -[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt { +[class*='m-col-']:is(.m-nopad, .m-nopady, .m-nopadt) { padding-top: 0; } -[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb, +[class*='m-col-']:is(.m-nopad, .m-nopady, .m-nopadb), .m-container-inflate.m-nopadb { padding-bottom: 0; } diff --git a/css/m-layout.css b/css/m-layout.css index 83ed0023..171aec8d 100644 --- a/css/m-layout.css +++ b/css/m-layout.css @@ -28,8 +28,7 @@ body > header > nav { background-color: var(--header-background-color); min-height: 3rem; } -body > header > nav.m-navbar-landing, -body > header > nav.m-navbar-cover { +body > header > nav:is(.m-navbar-landing, .m-navbar-cover) { background-color: transparent; position: relative; } @@ -40,13 +39,11 @@ body > header > nav.m-navbar-cover { background-color: var(--header-background-color-jumbo); opacity: 1; } -body > header > nav.m-navbar-landing:hover, -body > header > nav.m-navbar-cover:hover { +body > header > nav:is(.m-navbar-landing, .m-navbar-cover):hover { background-color: var(--header-background-color-landing); opacity: 1; } -body> header > nav.m-navbar-landing:target, -body> header > nav.m-navbar-cover:target { +body> header > nav:is(.m-navbar-landing, .m-navbar-cover):target { background-color: var(--header-background-color); opacity: 1; } @@ -69,16 +66,26 @@ body > header > nav a { line-height: 2.75rem; color: var(--header-link-color); } -body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide { +body > header > nav :is( + #m-navbar-brand, + a#m-navbar-show, + a#m-navbar-hide +) { font-weight: var(--heading-font-weight); font-size: 1.125rem; padding-left: 1rem; padding-right: 1rem; } -body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { +body > header > nav :is( + a#m-navbar-brand, + #m-navbar-brand a +) { text-transform: var(--nav-brand-case); } -body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img { +body > header > nav :is( + a#m-navbar-brand, + #m-navbar-brand a +) img { /* unfortuately, with SVGs, unless the size is hardcoded like this, it will cause ugly jumps during loading :( */ width: 1.75rem; @@ -96,7 +103,7 @@ body > header > nav #m-navbar-brand .m-thin { body > header > nav #m-navbar-brand .m-breadcrumb { color: var(--header-breadcrumb-color); } -body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before { +body > header > nav a:is(#m-navbar-show, #m-navbar-hide)::before { content:'\2630'; } body > header > nav #m-navbar-collapse { @@ -132,24 +139,17 @@ body > header > nav .m-row > [class*='m-col-'] { padding-top: 0; padding-bottom: 0; } -body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active { +body > header > nav a:is(:hover, :focus, :active) { color: var(--header-link-active-color); } body > header > nav #m-navbar-collapse li:hover { border-color: var(--header-link-active-color); } -body > header > nav #m-navbar-collapse li a:hover, -body > header > nav #m-navbar-collapse li a:focus, -body > header > nav #m-navbar-collapse li a:active { +body > header > nav #m-navbar-collapse li a:is(:hover, :focus, :active) { border-color: var(--header-link-active-color); background-color: var(--header-link-active-background-color); } -body > header > nav.m-navbar-landing #m-navbar-collapse li a:hover, -body > header > nav.m-navbar-cover #m-navbar-collapse li a:hover, -body > header > nav.m-navbar-landing #m-navbar-collapse li a:focus, -body > header > nav.m-navbar-cover #m-navbar-collapse li a:focus, -body > header > nav.m-navbar-landing #m-navbar-collapse li a:active, -body > header > nav.m-navbar-cover #m-navbar-collapse li a:active { +body > header > nav:is(.m-navbar-landing, .m-navbar-cover) #m-navbar-collapse li a:is(:hover, :focus, :active) { background-color: var(--header-link-active-background-color-semi); } @@ -169,14 +169,14 @@ body > header > nav:target #m-navbar-hide { /* Header navigation -- 768px and up (tablets, desktops) */ @media screen and (min-width: 768px) { - body > header > nav #m-navbar-show, body > header > nav #m-navbar-hide, - body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide { + body > header > nav :is(#m-navbar-show, #m-navbar-hide), + body > header > nav:target :is(#m-navbar-show, #m-navbar-hide) { display: none; } body > header > nav #m-navbar-collapse li a { line-height: 2.75rem; } - body > header > nav a, body > header > nav #m-navbar-collapse li a { + body > header > nav :is(a, #m-navbar-collapse li a) { margin-left: 0; padding-left: 1rem; padding-right: 1rem; @@ -246,7 +246,7 @@ body > footer > nav a { text-transform: var(--nav-menu-case); color: var(--footer-link-color); } -body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:active { +body > footer > nav a:is(:hover, :focus, :active) { color: var(--footer-link-active-color); } @@ -267,7 +267,7 @@ article h1 .m-breadcrumb { article h1 .m-breadcrumb a { color: var(--article-heading-color); } -article h1 .m-breadcrumb a:hover, article h1 a:focus, article h1 a:active { +article h1 .m-breadcrumb a:is(:hover, :focus, :active) { color: var(--article-heading-active-color); } @@ -276,20 +276,15 @@ article > header h1 { font-size: 2rem; margin-bottom: 0.5rem; } -article h1 a, article > header h1, article > header h1 a, -article section > h2, article section > h2 a, -article section > h3, article section > h3 a, -article section > h4, article section > h4 a, -article section > h5, article section > h5 a, -article section > h6, article section > h6 a { +article h1 a, +article > header h1, +article > header h1 a, +article section > :is(h2, h3, h4, h5, h6), +article section > :is(h2, h3, h4, h5, h6) a { color: var(--article-heading-color); } -article h1 a:hover, article > header h1 a:hover, article > header h1 a:focus, article > header h1 a:active, -article section > h2 a:hover, article section > h2 a:focus, article section > h2 a:active, -article section > h3 a:hover, article section > h3 a:focus, article section > h3 a:active, -article section > h4 a:hover, article section > h4 a:focus, article section > h4 a:active, -article section > h5 a:hover, article section > h5 a:focus, article section > h5 a:active, -article section > h6 a:hover, article section > h6 a:focus, article section > h6 a:active { +article h1 a:hover, article > header h1 a:is(:hover, :focus, :active), +article section > :is(h2, h3, h4, h5, h6) a:is(:hover, :focus, :active) { color: var(--article-heading-active-color); } article > header .m-date { @@ -342,8 +337,11 @@ article section:target { padding-left: 0.75rem; border-color: var(--article-heading-color); } -article h1 a, article > header h1 a, article section > h2 a, article section > h3 a, -article section > h4 a, article section > h5 a, article section > h6 a { +:is( + article h1, + article > header h1, + article section > :is(h2, h3, h4, h5, h6) +) a { text-decoration: var(--link-decoration-heading); } @@ -382,7 +380,7 @@ article#m-jumbo { width: 100%; height: 100%; } -article#m-jumbo > header h1, article#m-jumbo > header h2 { +article#m-jumbo > header :is(h1, h2) { text-align: center; font-weight: bold; } @@ -412,17 +410,17 @@ article#m-jumbo > header h2 { } } -article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a { +article#m-jumbo > header, article#m-jumbo > header :is(h1, a) { color: #ffffff; } -article#m-jumbo > header a:hover, article#m-jumbo > header a:focus, article#m-jumbo > header a:active { +article#m-jumbo > header a:is(:hover, :focus, :active) { color: #f0f0f0; } -article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header h1, article#m-jumbo.m-inverted > header a { +article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header :is(h1, a) { color: #000000; } -article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header a:focus, article#m-jumbo.m-inverted > header a:active { +article#m-jumbo.m-inverted > header a:is(:hover, :focus, :active) { color: #0f0f0f; } @@ -432,7 +430,7 @@ article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header text-decoration: none; text-transform: var(--nav-heading-case); } -.m-landing-news h3 a:hover, .m-landing-news h3 a:hover, .m-landing-news h3 a:focus, .m-landing-news h3 a:active { +.m-landing-news h3 a:is(:hover, :focus, :active) { color: var(--article-heading-color); } .m-landing-news time { @@ -458,7 +456,7 @@ nav.m-navpanel h3 { nav.m-navpanel ol { text-transform: var(--nav-categories-case); } -nav.m-navpanel ol, nav.m-navpanel ul { +nav.m-navpanel :is(ul, ol) { list-style-type: none; padding: 0; } @@ -466,7 +464,7 @@ nav.m-navpanel a { color: var(--navpanel-link-color); text-decoration: var(--link-decoration-nav); } -nav.m-navpanel a:hover, nav.m-navpanel a:focus, nav.m-navpanel a:active { +nav.m-navpanel a:is(:hover, :focus, :active) { color: var(--navpanel-link-active-color); } @@ -479,53 +477,33 @@ ul.m-tagcloud li.m-tag-4 { font-size: 1.25rem; } ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; } /* Avoid selection border being above figure border */ -article section:target figure.m-code-figure, article section:target figure.m-console-figure { +article section:target figure:is(.m-code-figure, .m-console-figure) { z-index: 1; } /* Spacing after every block element, but not after the last */ article, article > header, article section { margin-bottom: 1rem; } -article:last-child, article section:last-child { margin-bottom: 0; } +:is(article, article section):last-child { margin-bottom: 0; } /* Active sections in inflatable content affect left border of some components --- restrict to components directly in active section, its subsections and floating / inflatable content inside. */ -.m-container-inflatable section:target > .m-note, -.m-container-inflatable section:target > .m-frame, -.m-container-inflatable section:target > .m-block, -.m-container-inflatable section:target > pre, -.m-container-inflatable section:target > .m-code-figure > pre:first-child, -.m-container-inflatable section:target > .m-console-figure > pre:first-child, -.m-container-inflatable section:target section > .m-note, -.m-container-inflatable section:target section > .m-frame, -.m-container-inflatable section:target section > .m-block, -.m-container-inflatable section:target section > pre, -.m-container-inflatable section:target section > .m-code-figure > pre:first-child, -.m-container-inflatable section:target section > .m-console-figure > pre:first-child, -.m-container-inflatable section:target [class*='m-center-'] > .m-note, -.m-container-inflatable section:target [class*='m-center-'] > .m-frame, -.m-container-inflatable section:target [class*='m-center-'] > .m-block, -.m-container-inflatable section:target [class*='m-center-'] > pre, -.m-container-inflatable section:target [class*='m-center-'] > .m-code-figure > pre:first-child, -.m-container-inflatable section:target [class*='m-center-'] > .m-console-figure > pre:first-child, -.m-container-inflatable section:target [class*='m-left-'] > .m-note, -.m-container-inflatable section:target [class*='m-left-'] > .m-frame, -.m-container-inflatable section:target [class*='m-left-'] > .m-block, -.m-container-inflatable section:target [class*='m-left-'] > pre, -.m-container-inflatable section:target [class*='m-left-'] > .m-code-figure > pre:first-child, -.m-container-inflatable section:target [class*='m-left-'] > .m-console-figure > pre:first-child, -.m-container-inflatable section:target [class*='m-right-'] > .m-note, -.m-container-inflatable section:target [class*='m-right-'] > .m-frame, -.m-container-inflatable section:target [class*='m-right-'] > .m-block, -.m-container-inflatable section:target [class*='m-right-'] > pre, -.m-container-inflatable section:target [class*='m-right-'] > .m-code-figure > pre:first-child, -.m-container-inflatable section:target [class*='m-right-'] > .m-console-figure > pre:first-child, -.m-container-inflatable section:target .m-container-inflate > .m-note, -.m-container-inflatable section:target .m-container-inflate > .m-frame, -.m-container-inflatable section:target .m-container-inflate > .m-block, -.m-container-inflatable section:target .m-container-inflate > pre, -.m-container-inflatable section:target .m-container-inflate > .m-code-figure > pre:first-child, -.m-container-inflatable section:target .m-container-inflate > .m-console-figure > pre:first-child { +:is( + .m-container-inflatable section:target, + .m-container-inflatable section:target section, + .m-container-inflatable section:target [class*='m-center-'], + .m-container-inflatable section:target [class*='m-left-'], + .m-container-inflatable section:target [class*='m-right-'], + .m-container-inflatable section:target .m-container-inflate +) > :is(.m-note, .m-frame, .m-block, pre), +:is( + .m-container-inflatable section:target, + .m-container-inflatable section:target section, + .m-container-inflatable section:target [class*='m-center-'], + .m-container-inflatable section:target [class*='m-left-'], + .m-container-inflatable section:target [class*='m-right-'], + .m-container-inflatable section:target .m-container-inflate +) > :is(.m-code-figure, .m-console-figure) > pre:first-child { margin-left: -1.0rem; border-left-style: solid; border-left-width: 0.25rem; @@ -533,24 +511,19 @@ article:last-child, article section:last-child { margin-bottom: 0; } border-bottom-left-radius: 0; padding-left: 0.75rem; } -.m-container-inflatable section:target > .m-code-figure::before, -.m-container-inflatable section:target > .m-console-figure::before, -.m-container-inflatable section:target section > .m-code-figure::before, -.m-container-inflatable section:target section > .m-console-figure::before, -.m-container-inflatable section:target [class*='m-center-'] > .m-code-figure::before, -.m-container-inflatable section:target [class*='m-center-'] > .m-console-figure::before, -.m-container-inflatable section:target [class*='m-left-'] > .m-code-figure::before, -.m-container-inflatable section:target [class*='m-left-'] > .m-console-figure::before, -.m-container-inflatable section:target [class*='m-right-'] > .m-code-figure::before, -.m-container-inflatable section:target [class*='m-right-'] > .m-console-figure::before, -.m-container-inflatable section:target .m-container-inflate > .m-code-figure::before, -.m-container-inflatable section:target .m-container-inflate > .m-console-figure::before { +:is( + .m-container-inflatable section:target, + .m-container-inflatable section:target section, + .m-container-inflatable section:target [class*='m-center-'], + .m-container-inflatable section:target [class*='m-left-'], + .m-container-inflatable section:target [class*='m-right-'], + .m-container-inflatable section:target .m-container-inflate +) > :is(.m-code-figure, .m-console-figure)::before { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0.25rem; } -.m-container-inflatable section:target > .m-code-figure > pre.m-nopad, -.m-container-inflatable section:target > .m-console-figure > pre.m-nopad { +.m-container-inflatable section:target > :is(.m-code-figure, .m-console-figure) > pre.m-nopad { margin-left: -0.75rem; padding-left: -0.75rem; } @@ -558,12 +531,10 @@ article:last-child, article section:last-child { margin-bottom: 0; } conditionally revert that. Left-aligned content is touching the left border both in full size and aligned, so we revert it only for center and right. */ @media screen and (min-width: 576px) { - .m-container-inflatable section:target .m-center-s > .m-note, - .m-container-inflatable section:target .m-center-s > pre, - .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child, - .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child, - .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child, - .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child { + .m-container-inflatable section:target :is( + .m-center-s > :is(.m-note, pre), + :is(.m-center-s, .m-right-s) > figure:is(.m-code-figure, .m-console-figure) > pre:first-child + ) { /* Centers have -1rem margin on both sides *always* and pre inside figures as well, don't revert that */ border-left-width: 0; @@ -571,26 +542,22 @@ article:last-child, article section:last-child { margin-bottom: 0; } border-bottom-left-radius: var(--border-radius); padding-left: 1rem; } - .m-container-inflatable section:target .m-center-s > .m-block, - .m-container-inflatable section:target .m-right-s > .m-block { + .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > .m-block { /* Block keep the same left border width at all times */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } - .m-container-inflatable section:target .m-center-s > .m-frame, - .m-container-inflatable section:target .m-right-s > .m-frame { + .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > .m-frame { /* Frame has a thinner border */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); border-left-width: 0.125rem; padding-left: 0.875rem; } - .m-container-inflatable section:target .m-right-s > .m-block, - .m-container-inflatable section:target .m-right-s > .m-frame { + .m-container-inflatable section:target .m-right-s > :is(.m-block, .m-frame) { margin-left: 0; } - .m-container-inflatable section:target .m-right-s > .m-note, - .m-container-inflatable section:target .m-right-s > pre { + .m-container-inflatable section:target .m-right-s > :is(.m-note, pre) { /* Note and pre has no border */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); @@ -598,10 +565,7 @@ article:last-child, article section:last-child { margin-bottom: 0; } border-left-width: 0; padding-left: 1rem; } - .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, - .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, - .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before, - .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > figure:is(.m-code-figure, .m-console-figure)::before { /* Reverting thin figure border, keeping -1rem margin */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); @@ -609,12 +573,10 @@ article:last-child, article section:last-child { margin-bottom: 0; } } } @media screen and (min-width: 768px) { - .m-container-inflatable section:target .m-center-m > .m-note, - .m-container-inflatable section:target .m-center-m > pre, - .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child, - .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child, - .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child, - .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child { + .m-container-inflatable section:target :is( + .m-center-m > :is(.m-note, pre), + :is(.m-center-m, .m-right-m) > figure:is(.m-code-figure, .m-console-figure) > pre:first-child + ) { /* Centers have -1rem margin on both sides *always* and pre inside figures as well, don't revert that */ border-left-width: 0; @@ -622,26 +584,22 @@ article:last-child, article section:last-child { margin-bottom: 0; } border-bottom-left-radius: var(--border-radius); padding-left: 1rem; } - .m-container-inflatable section:target .m-center-m > .m-block, - .m-container-inflatable section:target .m-right-m > .m-block { + .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > .m-block { /* Block keep the same left border width at all times */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } - .m-container-inflatable section:target .m-center-m > .m-frame, - .m-container-inflatable section:target .m-right-m > .m-frame { + .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > .m-frame { /* Frame has a thinner border */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); border-left-width: 0.125rem; padding-left: 0.875rem; } - .m-container-inflatable section:target .m-right-m > .m-block, - .m-container-inflatable section:target .m-right-m > .m-frame { + .m-container-inflatable section:target .m-right-m > :is(.m-block, .m-frame) { margin-left: 0; } - .m-container-inflatable section:target .m-right-m > .m-note, - .m-container-inflatable section:target .m-right-m > pre { + .m-container-inflatable section:target .m-right-m > :is(.m-note, pre) { /* Note and pre has no border */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); @@ -649,10 +607,7 @@ article:last-child, article section:last-child { margin-bottom: 0; } border-left-width: 0; padding-left: 1rem; } - .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, - .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, - .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before, - .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > figure:is(.m-code-figure, .m-console-figure)::before { /* Reverting thin figure border, keeping -1rem margin */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); @@ -660,12 +615,10 @@ article:last-child, article section:last-child { margin-bottom: 0; } } } @media screen and (min-width: 992px) { - .m-container-inflatable section:target .m-center-l > .m-note, - .m-container-inflatable section:target .m-center-l > pre, - .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child, - .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child, - .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child, - .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child { + .m-container-inflatable section:target :is( + .m-center-l > :is(.m-note, pre), + :is(.m-center-l, .m-right-l) > figure:is(.m-code-figure, .m-console-figure) > pre:first-child + ) { /* Centers have -1rem margin on both sides *always* and pre inside figures as well, don't revert that */ border-left-width: 0; @@ -673,26 +626,22 @@ article:last-child, article section:last-child { margin-bottom: 0; } border-bottom-left-radius: var(--border-radius); padding-left: 1rem; } - .m-container-inflatable section:target .m-center-l > .m-block, - .m-container-inflatable section:target .m-right-l > .m-block { + .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > .m-block { /* Block keep the same left border width at all times */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } - .m-container-inflatable section:target .m-center-l > .m-frame, - .m-container-inflatable section:target .m-right-l > .m-frame { + .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > .m-frame { /* Frame has a thinner border */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); border-left-width: 0.125rem; padding-left: 0.875rem; } - .m-container-inflatable section:target .m-right-l > .m-block, - .m-container-inflatable section:target .m-right-l > .m-frame { + .m-container-inflatable section:target .m-right-l > :is(.m-block, .m-frame) { margin-left: 0; } - .m-container-inflatable section:target .m-right-l > .m-note, - .m-container-inflatable section:target .m-right-l > pre { + .m-container-inflatable section:target .m-right-l > :is(.m-note, pre) { /* Note and pre has no border */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); @@ -700,10 +649,7 @@ article:last-child, article section:last-child { margin-bottom: 0; } border-left-width: 0; padding-left: 1rem; } - .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, - .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, - .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before, - .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > figure:is(.m-code-figure, .m-console-figure)::before { /* Reverting thin figure border, keeping -1rem margin */ border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); @@ -713,50 +659,40 @@ article:last-child, article section:last-child { margin-bottom: 0; } /* These have different border width/color around so we need to restrict like above. */ -.m-container-inflatable section:target > figure.m-code-figure::before, -.m-container-inflatable section:target > figure.m-console-figure::before, -.m-container-inflatable section:target section > figure.m-code-figure::before, -.m-container-inflatable section:target section > figure.m-console-figure::before, -.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, -.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, -.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, -.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, -.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, -.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, -.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before, -.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before { +:is( + .m-container-inflatable section:target, + .m-container-inflatable section:target section, + .m-container-inflatable section:target [class*='m-center-'], + .m-container-inflatable section:target [class*='m-left-'], + .m-container-inflatable section:target [class*='m-right-'], + .m-container-inflatable section:target .m-container-inflate +) > figure:is(.m-code-figure, .m-console-figure)::before { border-left-color: var(--line-color); } /* Center/left/right are tied to particular breakpoint so we need to conditionally revert that. Left-aligned content is touching the left border both in full size and aligned, so we revert it only for center and right. */ @media screen and (min-width: 576px) { - .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, - .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before { + .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > figure.m-code-figure::before { border-color: var(--code-background-color); } - .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, - .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > figure.m-console-figure::before { border-color: var(--console-background-color); } } @media screen and (min-width: 768px) { - .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, - .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before { + .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > figure.m-code-figure::before { border-color: var(--code-background-color); } - .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, - .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > figure.m-console-figure::before { border-color: var(--console-background-color); } } @media screen and (min-width: 992px) { - .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, - .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before { + .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > figure.m-code-figure::before { border-color: var(--code-background-color); } - .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, - .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > figure.m-console-figure::before { border-color: var(--console-background-color); } } @@ -764,8 +700,7 @@ article:last-child, article section:last-child { margin-bottom: 0; } /* These don't have any border otherwise, so we don't need to restrict the selectors or border sides like above. */ .m-container-inflatable section:target pre, -.m-container-inflatable section:target figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target figure.m-console-figure > pre:first-child { +.m-container-inflatable section:target figure:is(.m-code-figure, .m-console-figure) > pre:first-child { border-color: var(--line-color); } .m-container-inflatable section:target .m-note.m-default {