css: styling for higlighted lines in code blocks.

And support for .m-inverted-highlight.

diff --git a/css/m-components.css b/css/m-components.css
index 39e51b5a28f126d8164ffeb678cbef73cacc359a..fcdea163abde25539a79319a6ee6b3aab8b4ccba 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -54,7 +54,6 @@ pre {
   color: var(--code-color);
   background-color: var(--code-background-color);
   border-radius: 0.2rem;
-  border-color: var(--line-color);
   overflow-x: auto;
   margin-top: 0; /* stupid defaults */
 }
@@ -945,6 +944,29 @@ figure.m-figure.m-fullwidth img {
   }
 }
 
+/* Code block (uses Pygments CSS classes) */
+div.highlight pre span.hll {
+  background-color: var(--line-color);
+  border-color: var(--line-color);
+  margin-left: -1.0rem;
+  margin-right: -1.0rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  padding-left: 0.75rem;
+}
+.m-inverted-highlight div.highlight pre {
+  color: var(--color-inverse-highlight);
+}
+.m-inverted-highlight div.highlight pre > span {
+  opacity: 0.3333;
+}
+.m-inverted-highlight div.highlight pre > span.hll {
+  color: var(--color);
+  opacity: 1;
+  background-color: transparent;
+  border-color: transparent;
+}
+
 /* Spacing after every block element, but not after the last */
 p, ul, ol, dl, blockquote, hr, pre,
 article, article > header, article section,

diff --git a/css/m-dark.css b/css/m-dark.css
index c0704402cbc8cd63221a67729247bd4580d826a9..bde073274205af69527a01d40bce9a6cc1c6de67 100644 (file)
--- a/css/m-dark.css
+++ b/css/m-dark.css
@@ -20,6 +20,7 @@
   /* Basics */
   --background-color: #2f363f;
   --color: #dcdcdc;
+  --color-inverse-highlight: rgba(220, 220, 220, 0.33);
   --line-color: #405363;
   --link-color: #5b9dd9;
   --link-active-color: #a5c9ea;

diff --git a/css/m-light.css b/css/m-light.css
index 62685931755834e328fb4b44a44792d8c82e8a70..b66de2dd271d6aed5f1502c1eb789273df115e1a 100644 (file)
--- a/css/m-light.css
+++ b/css/m-light.css
@@ -18,6 +18,7 @@
   /* Basics */
   --background-color: #ffffff;
   --color: #000000;
+  --color-inverse-highlight: rgba(0, 0, 0, 0.33);
   --line-color: #f7e3db;
   --link-color: #ea7944;
   --link-active-color: #cb4b16;