From: Vladimír Vondruš <mosra@centrum.cz>
Date: Thu, 13 Sep 2018 18:46:29 +0000 (+0200)
Subject: css: make .m-code-figure and .m-console-figure usable also on <div>s.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=446875f4f18726198fa91feda81b6798e4b1ab36;p=blog.git

css: make .m-code-figure and .m-console-figure usable also on <div>s.

For better flexibility -- it's hard to hammer a <figure> out of Doxygen
XML.
---

diff --git a/css/m-components.css b/css/m-components.css
index 2e1b3121..d51d26ab 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -773,14 +773,14 @@ figure.m-figure.m-fullwidth:after {
 }
 
 /* Code figure */
-figure.m-code-figure, figure.m-console-figure {
+.m-code-figure, .m-console-figure {
   margin-top: 0;
   margin-left: 0;
   margin-right: 0;
   position: relative;
   padding: 1rem;
 }
-figure.m-code-figure:before, figure.m-console-figure:before {
+.m-code-figure:before, .m-console-figure:before {
   position: absolute;
   content: ' ';
   top: 0;
@@ -792,16 +792,16 @@ figure.m-code-figure:before, figure.m-console-figure:before {
   border-width: 0.125rem;
   border-radius: var(--border-radius);
 }
-figure.m-code-figure:before {
+.m-code-figure:before {
   border-color: var(--code-background-color);
 }
-figure.m-console-figure:before {
+.m-console-figure:before {
   border-color: var(--console-background-color);
 }
-figure.m-code-figure.m-flat:before, figure.m-console-figure.m-flat:before {
+.m-code-figure.m-flat:before, .m-console-figure.m-flat:before {
   border-color: transparent;
 }
-figure.m-code-figure > pre:first-child, figure.m-console-figure > pre:first-child {
+.m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
   position: relative; /* so it's above the border */
   margin: -1rem -1rem 1rem -1rem;
   border-bottom-left-radius: 0;
@@ -918,15 +918,15 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .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-'] > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-console-figure,
+.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 > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1254,16 +1254,16 @@ div.m-graph svg g.m-node.m-dim polyline {
 
 /* Spacing after every block element, but not after the last and not when
   m-nopadb is specified */
-p, ul, ol, dl, blockquote, pre, figure.m-code-figure, 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 {
+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 {
   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,
-figure.m-code-figure:last-child, figure.m-code-figure.m-nopadb,
-figure.m-console-figure:last-child, figure.m-console-figure.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,
@@ -1282,7 +1282,7 @@ div.m-math:last-child, div.m-math.m-nopadb {
    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 > figure.m-code-figure:last-child, li > figure.m-console-figure: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,
@@ -1292,8 +1292,8 @@ li > figure.m-figure:last-child, li > div.m-math:last-child {
 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 > figure.m-code-figure:last-child, li:last-child > figure.m-code-figure.m-nopadb,
-li:last-child > figure.m-console-figure:last-child, li:last-child > figure.m-console-figure.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,
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 19fc48da..7a09c843 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -1088,14 +1088,14 @@ figure.m-figure.m-fullwidth:after {
   margin-top: 1rem;
   height: 1px;
 }
-figure.m-code-figure, figure.m-console-figure {
+.m-code-figure, .m-console-figure {
   margin-top: 0;
   margin-left: 0;
   margin-right: 0;
   position: relative;
   padding: 1rem;
 }
-figure.m-code-figure:before, figure.m-console-figure:before {
+.m-code-figure:before, .m-console-figure:before {
   position: absolute;
   content: ' ';
   top: 0;
@@ -1107,16 +1107,16 @@ figure.m-code-figure:before, figure.m-console-figure:before {
   border-width: 0.125rem;
   border-radius: 0.2rem;
 }
-figure.m-code-figure:before {
+.m-code-figure:before {
   border-color: #282e36;
 }
-figure.m-console-figure:before {
+.m-console-figure:before {
   border-color: #000000;
 }
-figure.m-code-figure.m-flat:before, figure.m-console-figure.m-flat:before {
+.m-code-figure.m-flat:before, .m-console-figure.m-flat:before {
   border-color: transparent;
 }
-figure.m-code-figure > pre:first-child, figure.m-console-figure > pre:first-child {
+.m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
   position: relative;
   margin: -1rem -1rem 1rem -1rem;
   border-bottom-left-radius: 0;
@@ -1226,15 +1226,15 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .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-'] > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-console-figure,
+.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 > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1545,16 +1545,16 @@ div.m-graph svg g.m-node.m-dim polygon,
 div.m-graph svg g.m-node.m-dim polyline {
   stroke: #747474;
 }
-p, ul, ol, dl, blockquote, pre, figure.m-code-figure, 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 {
+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 {
   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,
-figure.m-code-figure:last-child, figure.m-code-figure.m-nopadb,
-figure.m-console-figure:last-child, figure.m-console-figure.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,
@@ -1569,7 +1569,7 @@ div.m-math:last-child, div.m-math.m-nopadb {
   margin-bottom: 0;
 }
 li > p:last-child, li > blockquote:last-child, li > pre:last-child,
-li > figure.m-code-figure:last-child, li > figure.m-console-figure: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,
@@ -1579,8 +1579,8 @@ li > figure.m-figure:last-child, li > div.m-math:last-child {
 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 > figure.m-code-figure:last-child, li:last-child > figure.m-code-figure.m-nopadb,
-li:last-child > figure.m-console-figure:last-child, li:last-child > figure.m-console-figure.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,
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 71eb2590..fd1a7c0a 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1088,14 +1088,14 @@ figure.m-figure.m-fullwidth:after {
   margin-top: 1rem;
   height: 1px;
 }
-figure.m-code-figure, figure.m-console-figure {
+.m-code-figure, .m-console-figure {
   margin-top: 0;
   margin-left: 0;
   margin-right: 0;
   position: relative;
   padding: 1rem;
 }
-figure.m-code-figure:before, figure.m-console-figure:before {
+.m-code-figure:before, .m-console-figure:before {
   position: absolute;
   content: ' ';
   top: 0;
@@ -1107,16 +1107,16 @@ figure.m-code-figure:before, figure.m-console-figure:before {
   border-width: 0.125rem;
   border-radius: 0.2rem;
 }
-figure.m-code-figure:before {
+.m-code-figure:before {
   border-color: #282e36;
 }
-figure.m-console-figure:before {
+.m-console-figure:before {
   border-color: #000000;
 }
-figure.m-code-figure.m-flat:before, figure.m-console-figure.m-flat:before {
+.m-code-figure.m-flat:before, .m-console-figure.m-flat:before {
   border-color: transparent;
 }
-figure.m-code-figure > pre:first-child, figure.m-console-figure > pre:first-child {
+.m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
   position: relative;
   margin: -1rem -1rem 1rem -1rem;
   border-bottom-left-radius: 0;
@@ -1226,15 +1226,15 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .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-'] > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-console-figure,
+.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 > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1545,16 +1545,16 @@ div.m-graph svg g.m-node.m-dim polygon,
 div.m-graph svg g.m-node.m-dim polyline {
   stroke: #747474;
 }
-p, ul, ol, dl, blockquote, pre, figure.m-code-figure, 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 {
+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 {
   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,
-figure.m-code-figure:last-child, figure.m-code-figure.m-nopadb,
-figure.m-console-figure:last-child, figure.m-console-figure.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,
@@ -1569,7 +1569,7 @@ div.m-math:last-child, div.m-math.m-nopadb {
   margin-bottom: 0;
 }
 li > p:last-child, li > blockquote:last-child, li > pre:last-child,
-li > figure.m-code-figure:last-child, li > figure.m-console-figure: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,
@@ -1579,8 +1579,8 @@ li > figure.m-figure:last-child, li > div.m-math:last-child {
 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 > figure.m-code-figure:last-child, li:last-child > figure.m-code-figure.m-nopadb,
-li:last-child > figure.m-console-figure:last-child, li:last-child > figure.m-console-figure.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,
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index 47abb23e..e1dd3c21 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -1088,14 +1088,14 @@ figure.m-figure.m-fullwidth:after {
   margin-top: 1rem;
   height: 1px;
 }
-figure.m-code-figure, figure.m-console-figure {
+.m-code-figure, .m-console-figure {
   margin-top: 0;
   margin-left: 0;
   margin-right: 0;
   position: relative;
   padding: 1rem;
 }
-figure.m-code-figure:before, figure.m-console-figure:before {
+.m-code-figure:before, .m-console-figure:before {
   position: absolute;
   content: ' ';
   top: 0;
@@ -1107,16 +1107,16 @@ figure.m-code-figure:before, figure.m-console-figure:before {
   border-width: 0.125rem;
   border-radius: 0.2rem;
 }
-figure.m-code-figure:before {
+.m-code-figure:before {
   border-color: #fbf0ec;
 }
-figure.m-console-figure:before {
+.m-console-figure:before {
   border-color: #000000;
 }
-figure.m-code-figure.m-flat:before, figure.m-console-figure.m-flat:before {
+.m-code-figure.m-flat:before, .m-console-figure.m-flat:before {
   border-color: transparent;
 }
-figure.m-code-figure > pre:first-child, figure.m-console-figure > pre:first-child {
+.m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
   position: relative;
   margin: -1rem -1rem 1rem -1rem;
   border-bottom-left-radius: 0;
@@ -1226,15 +1226,15 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .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-'] > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-console-figure,
+.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 > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1545,16 +1545,16 @@ div.m-graph svg g.m-node.m-dim polygon,
 div.m-graph svg g.m-node.m-dim polyline {
   stroke: #bdbdbd;
 }
-p, ul, ol, dl, blockquote, pre, figure.m-code-figure, 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 {
+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 {
   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,
-figure.m-code-figure:last-child, figure.m-code-figure.m-nopadb,
-figure.m-console-figure:last-child, figure.m-console-figure.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,
@@ -1569,7 +1569,7 @@ div.m-math:last-child, div.m-math.m-nopadb {
   margin-bottom: 0;
 }
 li > p:last-child, li > blockquote:last-child, li > pre:last-child,
-li > figure.m-code-figure:last-child, li > figure.m-console-figure: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,
@@ -1579,8 +1579,8 @@ li > figure.m-figure:last-child, li > div.m-math:last-child {
 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 > figure.m-code-figure:last-child, li:last-child > figure.m-code-figure.m-nopadb,
-li:last-child > figure.m-console-figure:last-child, li:last-child > figure.m-console-figure.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,
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 0b4a2195..e04079b1 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1088,14 +1088,14 @@ figure.m-figure.m-fullwidth:after {
   margin-top: 1rem;
   height: 1px;
 }
-figure.m-code-figure, figure.m-console-figure {
+.m-code-figure, .m-console-figure {
   margin-top: 0;
   margin-left: 0;
   margin-right: 0;
   position: relative;
   padding: 1rem;
 }
-figure.m-code-figure:before, figure.m-console-figure:before {
+.m-code-figure:before, .m-console-figure:before {
   position: absolute;
   content: ' ';
   top: 0;
@@ -1107,16 +1107,16 @@ figure.m-code-figure:before, figure.m-console-figure:before {
   border-width: 0.125rem;
   border-radius: 0.2rem;
 }
-figure.m-code-figure:before {
+.m-code-figure:before {
   border-color: #fbf0ec;
 }
-figure.m-console-figure:before {
+.m-console-figure:before {
   border-color: #000000;
 }
-figure.m-code-figure.m-flat:before, figure.m-console-figure.m-flat:before {
+.m-code-figure.m-flat:before, .m-console-figure.m-flat:before {
   border-color: transparent;
 }
-figure.m-code-figure > pre:first-child, figure.m-console-figure > pre:first-child {
+.m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
   position: relative;
   margin: -1rem -1rem 1rem -1rem;
   border-bottom-left-radius: 0;
@@ -1226,15 +1226,15 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .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-'] > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-console-figure,
+.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 > figure.m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1545,16 +1545,16 @@ div.m-graph svg g.m-node.m-dim polygon,
 div.m-graph svg g.m-node.m-dim polyline {
   stroke: #bdbdbd;
 }
-p, ul, ol, dl, blockquote, pre, figure.m-code-figure, 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 {
+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 {
   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,
-figure.m-code-figure:last-child, figure.m-code-figure.m-nopadb,
-figure.m-console-figure:last-child, figure.m-console-figure.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,
@@ -1569,7 +1569,7 @@ div.m-math:last-child, div.m-math.m-nopadb {
   margin-bottom: 0;
 }
 li > p:last-child, li > blockquote:last-child, li > pre:last-child,
-li > figure.m-code-figure:last-child, li > figure.m-console-figure: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,
@@ -1579,8 +1579,8 @@ li > figure.m-figure:last-child, li > div.m-math:last-child {
 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 > figure.m-code-figure:last-child, li:last-child > figure.m-code-figure.m-nopadb,
-li:last-child > figure.m-console-figure:last-child, li:last-child > figure.m-console-figure.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,
diff --git a/doc/css/components.rst b/doc/css/components.rst
index cd8d1e0b..846466a7 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -922,11 +922,12 @@ might then look similarly to this:
 
 It often happens that you want to present code with corresponding result
 together. The code figure looks similar to `image figures <#figures>`_ and
-consists of a :html:`<figure class="m-code-figure">` element containing a
-:html:`<pre>` block and whatever else you want to put in as the result. The
-:html:`<pre>` element has to be the very first child of the :html:`<figure>`
-for the markup to work correctly. Similar to image figure, you can apply the
-:css:`.m-flat` CSS class to remove the border.
+consists of a :html:`<figure>` (or :html:`<div>`) element with the
+:css:`.m-code-figure` class containing a :html:`<pre>` block and whatever else
+you want to put in as the result. The :html:`<pre>` element has to be the very
+first child of the :html:`<figure>` for the markup to work correctly. Similar
+to image figure, you can apply the :css:`.m-flat` CSS class to remove the
+border.
 
 Example (note that this page uses code figure for all code examples, so it's a
 bit of a figure inception shown here):
@@ -952,8 +953,7 @@ bit of a figure inception shown here):
         </figure>
 
 It's also possible to have matching border for a console output. Just use
-:css:`.m-console-figure` instead of :css:`.m-code-figure` on the :html:`<figure>`
-element.
+:css:`.m-console-figure` instead of :css:`.m-code-figure` on the outer element.
 
 .. note-info::