Markdown editor tweaks (#6096)

* Markdown: make '>Quote' look less like a banner

Quotes should be subtle as it is primarily intended for redundant content, but currently it looks more like a banner that brings lots of focus.

This change is also background-independent. Currently, the Quotes in Posts doesn't look like it has a background color, because it happened to be the same as the Post's background. This makes it inconsistent with Quotes in Comments. Let's just always make it blend in + grayish text.

* Markdown: inline code tweak

- better symmetry
- less spacing to the left and right, since it's common to already have a space in the sentence (even if it doesn't, like in CJK, the new spacing looks sufficient).

* 4481: Use regular font in Markdown Editor

I think we should not use Monospace fonts for the Markdown Editor since we are not coding.

Similar to Github, code-blocks and inline-code only gets converted to monospace in the Preview.

ui/scss/component/_file-render.scss

@@ -312,7 +312,7 @@
   }
 
   .CodeMirror-code {
-    @include font-mono;
+    @include font-sans;
     letter-spacing: 0.1rem;
   }
 

ui/scss/component/_markdown-preview.scss

@@ -161,7 +161,7 @@
     display: inline-block;
     border-radius: 0.2rem;
     font-size: var(--font-small);
-    padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs) calc(var(--spacing-xxs) - 5px);
+    padding: calc(var(--spacing-xxs) - 4px) calc(var(--spacing-xxs) * 3 / 4) calc(var(--spacing-xxs) - 6px);
   }
 
   a {

ui/scss/init/_gui.scss

@@ -128,9 +128,12 @@ dd {
 }
 
 blockquote {
-  padding: 0.8rem;
-  background-color: var(--color-blockquote-bg);
-  border-left: 0.3rem solid var(--color-blockquote);
+  padding: 0 0.8rem;
+  margin-top: var(--spacing-xxs);
+  margin-bottom: var(--spacing-xxs);
+  opacity: 0.9;
+  border-left: 0.2rem solid var(--color-blockquote);
+  color: var(--color-text-subtitle);
 }
 
 code {