Merge remote-tracking branch 'origin/prop/message-css'

2 files changed, 138 insertions, 30 deletions

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index ee946c5..5488fa5 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -1,7 +1,5 @@
 .message-run {
-  position: relative;
   border-radius: 0.25rem;
-  padding: 0 0 0.5rem 0;
   margin-top: 1rem;
   margin-bottom: 1rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
@@ -32,31 +30,15 @@
   border-right: 1px solid var(--colour-message-run-username-border);
 }
 
-.message {
-  padding: 0.5rem 0 0 0.5rem;
-  position: relative;
-}
-
-.message a,
-.message a:visited {
-  color: var(--colour-message-run-link-text);
-}
-
-.message a:hover,
-.message a:active {
-  text-decoration: underline;
-}
-
-.message.unsent,
-.message.deleted {
-  color: var(--colour-message-run-unsent-text);
-}
-
 .message.delete-armed,
 .message.delete-armed:hover {
   background-color: var(--colour-warn);
 }
 
+.message {
+  position: relative;
+}
+
 .message:hover {
   background-color: var(--colour-message-hover-bg);
   color: var(--colour-message-hover-text);
@@ -64,12 +46,11 @@
 
 .message .handle {
   --text-size: 0.75rem;
-  float: right;
   line-height: var(--text-size);
   font-size: var(--text-size);
+  position: absolute;
   top: -0.75rem;
   right: 0.5rem;
-  position: absolute;
   padding: 0.25rem;
   border-radius: 0.25rem;
   display: none;
@@ -79,7 +60,7 @@
 }
 
 .message:hover .handle {
-  display: flex;
+  display: inline-block;
 }
 
 .message .handle button {
@@ -90,8 +71,9 @@
 }
 
 .message-body {
-  overflow: auto;
   max-width: 80vw;
+  padding: 0 0.5rem;
+  line-height: 1.2rem;
 
   @media (width > 640px) {
     /* 21rem is width of the nav bar in full-screen mode. */
@@ -99,27 +81,150 @@
   }
 }
 
+.message.unsent,
+.message.deleted,
+.message.unsent :link,
+.message.deleted :link {
+  color: var(--colour-message-run-unsent-text);
+}
+
 .message-body:empty:after {
   content: '.';
   visibility: hidden;
 }
 
-/* For rendered message bodies: */
+.message-body p,
+.message-body ul,
+.message-body ol,
+.message-body pre,
+.message-body h5,
+.message-body h6 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.message-body h1,
+.message-body h2,
+.message-body h3,
+.message-body h4,
+.message-body h5,
+.message-body h6 {
+  font-size: var(--heading-font-size);
+  line-height: calc(var(--heading-font-size) * 1.2);
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.message-body h1 {
+  --heading-font-size: 2.25rem;
+}
+
+.message-body h2 {
+  --heading-font-size: 2rem;
+}
+
+.message-body h3 {
+  --heading-font-size: 1.75rem;
+}
+
+.message-body h4 {
+  --heading-font-size: 1.5rem;
+}
+
+.message-body h5 {
+  --heading-font-size: 1.25rem;
+}
+
+.message-body h6 {
+  --heading-font-size: 1rem;
+}
+
+.message-body ul {
+  list-style-type: disc;
+  list-style-position: outside;
+}
+
+.message-body ol {
+  list-style-type: decimal;
+  list-style-position: outside;
+}
+
+.message-body ul > li,
+.message-body ol > li {
+  margin-left: 2rem;
+}
+
+.message-body ul > li li,
+.message-body ol > li li {
+  margin-left: 1rem;
+}
+
+.message-body img {
+  /* dumbnail images that are bigger than the viewport */
+  max-width: 100%;
+}
+
+.message-body :link,
+.message-body :link:visited {
+  color: var(--colour-message-run-link-text);
+}
+
+.message-body :link:hover,
+.message-body :link:active {
+  text-decoration: underline;
+}
+
+/*
+ * 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-radius: 0.25rem;
+  padding: 0 0.2rem;
+  margin: 0 0.1rem;
+}
+
 .message-body blockquote {
   margin-left: 0.25rem;
   padding-left: 0.5rem;
   border-left: 2px solid grey;
-  border-radius: 0.125rem;
-  color: grey;
+  color: var(--colour-message-run-blockquote-text);
 }
 
 .message-body pre {
-  border: 1px solid #312e81;
   border-radius: 0.25rem;
   padding: 0.25rem;
+  overflow: auto;
+  text-wrap: wrap;
 }
 
 .message-body code,
 .message-body pre {
   font-family: 'FiraCode', monospace;
+  /*
+   * This puts the x-height at about the same x-height as Roboto, our body font. Determined
+   * experimentally and _very_ haphazardly.
+   */
+  font-size: 0.95rem;
+  background-color: var(--colour-message-run-code-bg);
 }
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index ea0e9f5..2758aa1 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -18,6 +18,7 @@
   /* Light text is a bit hard to read; I may need to adjust it. */
   --light-text: color-mix(in srgb, var(--colour-base) 40%, white);
   --dark-text: color-mix(in srgb, var(--colour-base) 40%, black);
+  --mid-text: color-mix(in srgb, var(--dark-text) 75%, var(--light-text));
   --link-text: color-mix(in srgb, var(--colour-base) 40%, blue);
 
   /* Header */
@@ -59,6 +60,8 @@
   --colour-message-run-other-text: var(--dark-text);
   --colour-message-run-link-text: var(--link-text);
   --colour-message-run-unsent-text: var(--light-text);
+  --colour-message-run-blockquote-text: var(--mid-text);
+  --colour-message-run-code-bg: color-mix(in srgb, var(--colour-base) 40%, white);
 
   --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
   --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);