css: improve code background color.

In the dark theme it's still the same as header background color, but
with 50% transparency. To avoid unnecessary transparency and browser
perfomance issues coming out of that (yes I *do* care about that), a
pre-calculated value combining it with background color is used.

Also, until now, code inside colored notes was looking awful. Now it's
using the 50% transparency and looks good. In order to avoid combinatory
explosion of variables, the transparency *is* used in case of notes, but
since cases like that are much less common, I don't think this is a
problem.

The light theme is not changed at all, except for adding a matching
semi-transparent variable.

Huge thanks to @Squareys for this suggestion.

diff --git a/css/m-components.css b/css/m-components.css
index 1463c368cce12285059c041b5a33e8943629808f..e315fb3833ee0e1c1b0bc3cea4af279ccedeafbc 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -635,6 +635,9 @@ dl.m-diary dd {
   border-radius: var(--border-radius);
   padding: 1rem;
 }
+.m-note pre, .m-note code {
+  background-color: var(--code-note-background-color);
+}
 .m-frame {
   background-color: var(--background-color);
   border-style: solid;

diff --git a/css/m-dark.css b/css/m-dark.css
index f52945254ec49b96913106989acdd5f8da0c5942..5210b542ec4f4f9cef50b357668e098de1f4ab17 100644 (file)
--- a/css/m-dark.css
+++ b/css/m-dark.css
@@ -56,7 +56,10 @@
   --mark-background-color: #c7cf2f;
   --code-color: #e6e6e6;
   --code-inverted-color: rgba(230, 230, 230, 0.33);
-  --code-background-color: #22272e;
+  /* This is simply color-picked --code-note-background-color on top of
+     --background-color */
+  --code-background-color: #282e36;
+  --code-note-background-color: rgba(34, 39, 46, 0.5);
   --console-background-color: #000000;
 
   /* Header */

diff --git a/css/m-light.css b/css/m-light.css
index 942e0a16bb18e25ef407bb9f517985bd71095a43..bcaa2ce0f2a7126049146b6b620093333b78d142 100644 (file)
--- a/css/m-light.css
+++ b/css/m-light.css
@@ -57,6 +57,7 @@
   --code-color: #5b5b5b;
   --code-inverted-color: rgba(91, 91, 91, 0.33);
   --code-background-color: #fbf0ec;
+  --code-note-background-color: rgba(251, 240, 236, 0.5);
   --console-background-color: #000000;
 
   /* Header */

diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 4864c8df8efc3ea01274694bc88031c4599e8e03..641ef419ae3533b7d89c183f16567838ee75dce8 100644 (file)
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -1034,6 +1034,62 @@ Without link or caption:
       </div>
     </div>
 
+`Code in colored notes`_
+========================
+
+.. raw:: html
+
+    <div class="m-row">
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-default">
+          <p>Inline <code>code</code> in default note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-primary">
+          <p>Inline <code>code</code> in primary note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-success">
+          <p>Inline <code>code</code> in success note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-warning">
+          <p>Inline <code>code</code> in warning note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-danger">
+          <p>Inline <code>code</code> in danger note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-info">
+          <p>Inline <code>code</code> in info note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-dim">
+          <p>Inline <code>code</code> in dim note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+    </div>
+
 `Code figure`_
 ==============