css: make it possible to control console color directly.

Having it the same as --code-color makes it impossible to have dark
console listings combined with light code listings. Also while at it,
made .m-inverted line highlighting work with console listings too.

This has a minor visual change for for higlighted .m-inverted lines --
probably by accident those were not reverted back to --code-color, but
rather --color, making them darker than they should be in the dark
theme.

diff --git a/css/m-components.css b/css/m-components.css
index ef6956dd95968e5b476e4dec055696f17e673187..335ee72f5d2103378dac0933319cb59256555ab4 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -94,6 +94,7 @@ pre.m-console-wrap {
   word-break: break-all;
 }
 pre.m-console {
+  color: var(--console-color);
   background-color: var(--console-background-color);
 }
 
@@ -138,6 +139,7 @@ code {
   background-color: var(--code-background-color);
 }
 code.m-console {
+  color: var(--console-color);
   background-color: var(--console-background-color);
 }
 
@@ -891,18 +893,18 @@ pre.m-code span.hll {
 }
 
 /* Inverted code block / inline code */
-.m-code.m-inverted {
-  color: var(--code-inverted-color);
-}
-.m-code.m-inverted > span {
+.m-code.m-inverted > span, .m-console.m-inverted > span {
   opacity: 0.3333;
 }
-.m-code.m-inverted > span.hll {
-  color: var(--color);
+.m-code.m-inverted > span.hll, .m-console.m-inverted > span.hll {
   opacity: 1;
-  background-color: transparent;
+  background-color: transparent; /* TODO: handle this in pygments directly */
   border-color: transparent;
 }
+.m-code.m-inverted { color: var(--code-inverted-color); }
+.m-console.m-inverted { color: var(--console-inverted-color); }
+.m-code.m-inverted > span.hll { color: var(--code-color); }
+.m-cosole.m-inverted > span.hll { color: var(--console-color); }
 
 /* Code color swatch */
 .m-code-color {

diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index e29e91d7b8c83ecdf13fe9dad7a746dae9645547..440f15239ecb6fd22a012ae3a2ac435b431225a9 100644 (file)
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -406,6 +406,7 @@ pre.m-console-wrap {
   word-break: break-all;
 }
 pre.m-console {
+  color: #e6e6e6;
   background-color: #161616;
 }
 strong, .m-text.m-strong { font-weight: bold; }
@@ -447,6 +448,7 @@ code {
   background-color: #282e36;
 }
 code.m-console {
+  color: #e6e6e6;
   background-color: #161616;
 }
 *:focus { outline-color: #5b9dd9; }
@@ -1139,18 +1141,18 @@ pre.m-code span.hll {
   margin-right: -1.0rem;
   padding-left: 1.0rem;
 }
-.m-code.m-inverted {
-  color: rgba(230, 230, 230, 0.33);
-}
-.m-code.m-inverted > span {
+.m-code.m-inverted > span, .m-console.m-inverted > span {
   opacity: 0.3333;
 }
-.m-code.m-inverted > span.hll {
-  color: #dcdcdc;
+.m-code.m-inverted > span.hll, .m-console.m-inverted > span.hll {
   opacity: 1;
   background-color: transparent;
   border-color: transparent;
 }
+.m-code.m-inverted { color: rgba(230, 230, 230, 0.33); }
+.m-console.m-inverted { color: rgba(230, 230, 230, 0.33); }
+.m-code.m-inverted > span.hll { color: #e6e6e6; }
+.m-cosole.m-inverted > span.hll { color: #e6e6e6; }
 .m-code-color {
   display: inline-block;
   width: 0.75rem;

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 3a6db9e08c21ec8a07eafcbbf0845544d82a2f2c..05cf12a28198a072a5ef599b179273d09372c029 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -406,6 +406,7 @@ pre.m-console-wrap {
   word-break: break-all;
 }
 pre.m-console {
+  color: #e6e6e6;
   background-color: #161616;
 }
 strong, .m-text.m-strong { font-weight: bold; }
@@ -447,6 +448,7 @@ code {
   background-color: #282e36;
 }
 code.m-console {
+  color: #e6e6e6;
   background-color: #161616;
 }
 *:focus { outline-color: #5b9dd9; }
@@ -1139,18 +1141,18 @@ pre.m-code span.hll {
   margin-right: -1.0rem;
   padding-left: 1.0rem;
 }
-.m-code.m-inverted {
-  color: rgba(230, 230, 230, 0.33);
-}
-.m-code.m-inverted > span {
+.m-code.m-inverted > span, .m-console.m-inverted > span {
   opacity: 0.3333;
 }
-.m-code.m-inverted > span.hll {
-  color: #dcdcdc;
+.m-code.m-inverted > span.hll, .m-console.m-inverted > span.hll {
   opacity: 1;
   background-color: transparent;
   border-color: transparent;
 }
+.m-code.m-inverted { color: rgba(230, 230, 230, 0.33); }
+.m-console.m-inverted { color: rgba(230, 230, 230, 0.33); }
+.m-code.m-inverted > span.hll { color: #e6e6e6; }
+.m-cosole.m-inverted > span.hll { color: #e6e6e6; }
 .m-code-color {
   display: inline-block;
   width: 0.75rem;

diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index 59719dd22265d85710b300946c37299b7a982500..9812b0fcf3b7fcf4af32c660e9661555d2e41d6a 100644 (file)
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -406,6 +406,7 @@ pre.m-console-wrap {
   word-break: break-all;
 }
 pre.m-console {
+  color: #5b5b5b;
   background-color: #000000;
 }
 strong, .m-text.m-strong { font-weight: bold; }
@@ -447,6 +448,7 @@ code {
   background-color: #fbf0ec;
 }
 code.m-console {
+  color: #5b5b5b;
   background-color: #000000;
 }
 *:focus { outline-color: #ea7944; }
@@ -1139,18 +1141,18 @@ pre.m-code span.hll {
   margin-right: -1.0rem;
   padding-left: 1.0rem;
 }
-.m-code.m-inverted {
-  color: rgba(91, 91, 91, 0.33);
-}
-.m-code.m-inverted > span {
+.m-code.m-inverted > span, .m-console.m-inverted > span {
   opacity: 0.3333;
 }
-.m-code.m-inverted > span.hll {
-  color: #000000;
+.m-code.m-inverted > span.hll, .m-console.m-inverted > span.hll {
   opacity: 1;
   background-color: transparent;
   border-color: transparent;
 }
+.m-code.m-inverted { color: rgba(91, 91, 91, 0.33); }
+.m-console.m-inverted { color: rgba(91, 91, 91, 0.33); }
+.m-code.m-inverted > span.hll { color: #5b5b5b; }
+.m-cosole.m-inverted > span.hll { color: #5b5b5b; }
 .m-code-color {
   display: inline-block;
   width: 0.75rem;

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 03292583af84c81f14666ee498afb80b4931ac4a..ec4916bfe7fcee654709e423914affc4facf9afb 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -406,6 +406,7 @@ pre.m-console-wrap {
   word-break: break-all;
 }
 pre.m-console {
+  color: #5b5b5b;
   background-color: #000000;
 }
 strong, .m-text.m-strong { font-weight: bold; }
@@ -447,6 +448,7 @@ code {
   background-color: #fbf0ec;
 }
 code.m-console {
+  color: #5b5b5b;
   background-color: #000000;
 }
 *:focus { outline-color: #ea7944; }
@@ -1139,18 +1141,18 @@ pre.m-code span.hll {
   margin-right: -1.0rem;
   padding-left: 1.0rem;
 }
-.m-code.m-inverted {
-  color: rgba(91, 91, 91, 0.33);
-}
-.m-code.m-inverted > span {
+.m-code.m-inverted > span, .m-console.m-inverted > span {
   opacity: 0.3333;
 }
-.m-code.m-inverted > span.hll {
-  color: #000000;
+.m-code.m-inverted > span.hll, .m-console.m-inverted > span.hll {
   opacity: 1;
   background-color: transparent;
   border-color: transparent;
 }
+.m-code.m-inverted { color: rgba(91, 91, 91, 0.33); }
+.m-console.m-inverted { color: rgba(91, 91, 91, 0.33); }
+.m-code.m-inverted > span.hll { color: #5b5b5b; }
+.m-cosole.m-inverted > span.hll { color: #5b5b5b; }
 .m-code-color {
   display: inline-block;
   width: 0.75rem;

diff --git a/css/m-theme-dark.css b/css/m-theme-dark.css
index cdefaebca27bcad839fe467df0134c5f33cd4ed9..511cf3ce393e5a1a5e90cbdebee3b5b2318241d0 100644 (file)
--- a/css/m-theme-dark.css
+++ b/css/m-theme-dark.css
@@ -54,6 +54,8 @@
   --mark-background-color: #c7cf2f;
   --code-color: #e6e6e6;
   --code-inverted-color: rgba(230, 230, 230, 0.33);
+  --console-color: var(--code-color);
+  --console-inverted-color: var(--code-inverted-color);
   /* This is simply color-picked --code-note-background-color on top of
      --background-color */
   --code-background-color: #282e36;

diff --git a/css/m-theme-light.css b/css/m-theme-light.css
index cbed31a27699420376ec242d936c8cd9e507bbf0..0a7d1495b9482eacbe827ce18b0c78b6e3946677 100644 (file)
--- a/css/m-theme-light.css
+++ b/css/m-theme-light.css
@@ -54,6 +54,10 @@
   --mark-background-color: #e6e69c;
   --code-color: #5b5b5b;
   --code-inverted-color: rgba(91, 91, 91, 0.33);
+  --console-color: var(--code-color);
+  --console-inverted-color: var(--code-inverted-color);
+  /* This is simply color-picked --code-note-background-color on top of
+     --background-color */
   --code-background-color: #fbf0ec;
   --code-note-background-color: rgba(251, 240, 236, 0.5);
   --console-background-color: #000000;