msglist css [nfc]: Reorder message-content rules to align with webapp.

This makes it easier to compare and see how our styles differ -- which in many cases is a matter of simply not having styles for new Zulip features.
zulip · Sep 18, 2020 · d273b9e · d273b9e
1 parent 027fc67
commit d273b9e
Showing 1 changed file with 86 additions and 66 deletions.
diff --git a/src/webview/static/base.css b/src/webview/static/base.css
@@ -404,42 +404,32 @@ body {
 
 /*
  Message contents.
+
+ For the body of a message, we use nearly the same HTML as the webapp does.
+ The styles therefore have a lot in common.  For the webapp's version of
+ these styles, compare static/styles/rendered_markdown.css .
  */
 
-a {
-  color: hsl(200, 100%, 40%);
-}
 p {
   margin: 0;
 }
-code {
-  font-size: .857rem;
-  white-space: pre-wrap;
-  padding: 0 4px;
+.message p + p {
+  margin-top: 16px;
 }
-pre {
-  padding: 8px;
-  margin: 8px 0;
-  font-size: 0.75rem;
-  white-space: pre;
-  overflow-x: auto;
-  word-wrap: normal;
+.message ul {
+  padding-left: 20px;
+  margin: 4px 0 0 0;
 }
-code, pre {
-  border-radius: 3px;
-  border: 1px solid hsla(0, 0%, 50%, 0.25);
-  background-color: hsla(0, 0%, 50%, 0.125);
-  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+.message ul + p {
+  margin-top: 16px;
 }
-pre code {
-  /* Starting with Zulip Server 3.0, code blocks have `pre > code`.
-     Undo the stuff we have for `code` that isn't meant to apply there. */
-  font-size: inherit;
-  white-space: inherit;
-  padding: 0;
-  border: none;
-  background: none;
+
+blockquote {
+  padding-left: 8px;
+  margin: 8px 0 8px 0;
+  border-left: 3px solid hsla(0, 0%, 50%, 0.5);
 }
+
 table {
   border-collapse: collapse;
   width: 100%;
@@ -454,20 +444,19 @@ th, td {
   align: center;
   padding: 4px 8px;
 }
-hr {
-  margin: 16px 0;
-  border: 0;
-  border-top: 1px solid hsla(0, 0%, 50%, 0.5);
-}
-.alert-word {
-  background-color: hsla(102, 85%, 57%, 0.3);
-}
-.highlight {
-  background-color: hsl(51, 94%, 74%);
+
+.emoji {
+  display: inline-block;
+  height: 1.25rem;
+  width: 1.25rem;
+  white-space: nowrap;
+  color: transparent;
+  vertical-align: text-top;
 }
-.message p + p {
-  margin-top: 16px;
+.emoji:before {
+  color: white;
 }
+
 .user-group-mention,
 .user-mention {
   white-space: nowrap;
@@ -477,6 +466,18 @@ hr {
   margin: 0 1px;
   box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2);
 }
+
+.alert-word {
+  background-color: hsla(102, 85%, 57%, 0.3);
+}
+
+time {
+  display: inline-block;
+  padding: 4px 6px;
+  background-color: hsla(0, 0%, 50%, 0.125);
+  border-radius: 8px;
+}
+
 .message_inline_image {
   text-align: center;
 }
@@ -487,18 +488,7 @@ hr {
   height: 160px;
   object-fit: contain;
 }
-blockquote {
-  padding-left: 8px;
-  margin: 8px 0 8px 0;
-  border-left: 3px solid hsla(0, 0%, 50%, 0.5);
-}
-.message ul {
-  padding-left: 20px;
-  margin: 4px 0 0 0;
-}
-.message ul + p {
-  margin-top: 16px;
-}
+
 .twitter-tweet {
   border: 2px solid hsla(203, 89%, 53%, 0.5);
   background: hsla(203, 89%, 53%, 0.1);
@@ -517,17 +507,53 @@ blockquote {
   text-align: center;
   margin: 8px auto;
 }
-.emoji {
-  display: inline-block;
-  height: 1.25rem;
-  width: 1.25rem;
-  white-space: nowrap;
-  color: transparent;
-  vertical-align: text-top;
+
+code {
+  font-size: .857rem;
+  white-space: pre-wrap;
+  padding: 0 4px;
 }
-.emoji:before {
-  color: white;
+pre {
+  padding: 8px;
+  margin: 8px 0;
+  font-size: 0.75rem;
+  white-space: pre;
+  overflow-x: auto;
+  word-wrap: normal;
 }
+code, pre {
+  border-radius: 3px;
+  border: 1px solid hsla(0, 0%, 50%, 0.25);
+  background-color: hsla(0, 0%, 50%, 0.125);
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
+pre code {
+  /* Starting with Zulip Server 3.0, code blocks have `pre > code`.
+     Undo the stuff we have for `code` that isn't meant to apply there. */
+  font-size: inherit;
+  white-space: inherit;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.highlight {
+  background-color: hsl(51, 94%, 74%);
+}
+
+/* `a`, which the webapp styles with Bootstrap. */
+a {
+  color: hsl(200, 100%, 40%);
+}
+
+/* `hr`, not found in the webapp's rendered_markdown.css. */
+hr {
+  margin: 16px 0;
+  border: 0;
+  border-top: 1px solid hsla(0, 0%, 50%, 0.5);
+}
+
+/* Our own "sorry, unsupported" message for widgets. */
 .widget {
   display: flex;
   flex-direction: column;
@@ -538,9 +564,3 @@ blockquote {
   border: 1px dashed hsla(0, 0%, 50%, 0.5);
   border-radius: 0.5rem;
 }
-time {
-  display: inline-block;
-  padding: 4px 6px;
-  background-color: hsla(0, 0%, 50%, 0.125);
-  border-radius: 8px;
-}