From: Vladimír Vondruš <mosra@centrum.cz>
Date: Wed, 11 Sep 2019 10:56:03 +0000 (+0200)
Subject: css: make it possible to control console color directly.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=ca825fe874ff44b235a1cdaed728ad2c9650d1f3;p=blog.git

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 ef6956dd..335ee72f 100644
--- 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 e29e91d7..440f1523 100644
--- 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 3a6db9e0..05cf12a2 100644
--- 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 59719dd2..9812b0fc 100644
--- 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 03292583..ec4916bf 100644
--- 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 cdefaebc..511cf3ce 100644
--- 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 cbed31a2..0a7d1495 100644
--- 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;