Make rules targeting inline code more specific.

This prevents the need to go and un-apply unwanted styles when considering code blocks.

1 files changed, 24 insertions, 19 deletions

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 6b451bc..c9b6d04 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -174,13 +174,30 @@
   text-decoration: underline;
 }
 
-.message-body code {
-  /*
-   * Inline code (`like this`).
-   *
-   * Rules added here will also affect code blocks (```like this```) unless
-   * cancelled out in `.message-body pre > code`.
-   */
+/*
+ * Inline code only.
+ *
+ * Our markdown processor emits inline code as
+ *
+ *     <p>Some text <code>inline code</code> some text.</p>
+ *
+ * This can also appear inside of other elements:
+ *
+ *     <li>Some text <code>inline code</code></li>
+ *     <p>Some <em>emphasized <code>inline code</code></em></p>
+ *
+ * Code blocks, on the other hand, are emitted as
+ *
+ *     <pre><code>your code here</code></pre>
+ *
+ * (Plus or minus some attributes.)
+ *
+ * A <pre> will only ever directly contain a <code> if it came from a code
+ * block, never from inline code. But both will contain a <code> somewhere.
+ * This selector ensures we only apply these styles to inline code, not to
+ * code blocks (which are styled with `.message-body pre`, below).
+ */
+.message-body :not(pre) > code {
   white-space: pre-wrap;
   border: 1px solid #312e81;
   border-radius: 0.25rem;
@@ -188,18 +205,6 @@
   margin: 0 0.1rem;
 }
 
-.message-body pre > code {
-  /*
-   * Code blocks. Must also cancel out rules from inline code (in `.message-body code`), unless
-   * they should affect code blocks as well.
-   */
-  white-space: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-/* For rendered message bodies: */
 .message-body blockquote {
   margin-left: 0.25rem;
   padding-left: 0.5rem;