Change design of rich text elements in web UI (#32633)

app/javascript/styles/mastodon-light/variables.scss

@@ -76,4 +76,7 @@ body {
   --background-color-tint: rgba(255, 255, 255, 80%);
   --background-filter: blur(10px);
   --on-surface-color: #{transparentize($ui-base-color, 0.65)};
+  --rich-text-container-color: rgba(255, 216, 231, 100%);
+  --rich-text-text-color: rgba(114, 47, 83, 100%);
+  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
 }

app/javascript/styles/mastodon/rich_text.scss

@@ -2,9 +2,29 @@
 .e-content,
 .edit-indicator__content,
 .reply-indicator__content {
+  code {
+    background: var(--rich-text-container-color);
+    padding: 4px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+    font-size: 0.85em;
+  }
+
+  pre {
+    background: var(--rich-text-container-color);
+    padding: 8px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+
+    code {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
   pre,
   blockquote {
-    margin-bottom: 20px;
+    margin-bottom: 22px;
     white-space: pre-wrap;
     unicode-bidi: plaintext;
 
@@ -14,19 +34,45 @@
   }
 
   blockquote {
-    padding-inline-start: 10px;
-    border-inline-start: 3px solid $darker-text-color;
-    color: $darker-text-color;
+    padding-inline-start: 32px;
+    color: var(--rich-text-text-color);
     white-space: normal;
+    position: relative;
 
-    p:last-child {
+    &::before {
+      display: block;
+      content: '';
+      width: 24px;
+      height: 20px;
+      mask-image: url('../images/quote.svg');
+      background-color: var(--rich-text-decorations-color);
+      position: absolute;
+      inset-inline-start: 0;
+      top: 0;
+    }
+
+    blockquote {
+      margin-top: 4px;
+      border-inline-start: 3px solid var(--rich-text-decorations-color);
+      padding-inline-start: 16px;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    p:last-of-type {
       margin-bottom: 0;
     }
   }
 
   & > ul,
   & > ol {
-    margin-bottom: 20px;
+    margin-bottom: 22px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   b,
@@ -41,7 +87,15 @@
 
   ul,
   ol {
-    margin-inline-start: 2em;
+    padding-inline-start: 24px;
+
+    li {
+      padding-inline-start: 8px;
+
+      &::marker {
+        text-align: end;
+      }
+    }
 
     p {
       margin: 0;
@@ -49,7 +103,11 @@
   }
 
   ul {
-    list-style-type: disc;
+    list-style-type: '•';
+
+    li::marker {
+      text-align: start;
+    }
   }
 
   ol {

app/javascript/styles/mastodon/variables.scss

@@ -116,4 +116,7 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --error-background-color: #{darken($error-red, 16%)};
   --error-active-background-color: #{darken($error-red, 12%)};
   --on-error-color: #fff;
+  --rich-text-container-color: rgba(87, 24, 60, 100%);
+  --rich-text-text-color: rgba(255, 175, 212, 100%);
+  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
 }