Use the same font everywhere in gr-diff

Pulls the monospace font rule in gr-diff into :host. The monospace font
should apply to everywhere by default, e.g. also to the context control
rows.

Before https://i.imgur.com/oMSfhC5.png
After: https://i.imgur.com/2PqhxKf.png

Also fix the black color of the hyphens in the context control rows.

Change-Id: I8ee16b46da6dd0454d0b8991cc0836d7a4550f8d
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 65c05a8..c99b8ab 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -42,6 +42,11 @@
         max-width: var(--content-width, 80ch);
         white-space: normal;
       }
+      :host {
+        font-family: var(--monospace-font-family, ''), 'Roboto Mono';
+        font-size: var(--font-size, 12px);
+        line-height: var(--line-height-mono, 16px);
+      }
 
       .thread-group {
         display: block;
@@ -106,8 +111,6 @@
       }
       .lineNum,
       .content {
-        /* Set font size based the user's diff preference. */
-        font-size: var(--font-size, var(--font-size-normal));
         vertical-align: top;
         white-space: pre;
       }
@@ -184,6 +187,7 @@
       .contextControl {
         background-color: var(--diff-context-control-background-color);
         border: 1px solid var(--diff-context-control-border-color);
+        color: var(--diff-context-control-color);
       }
       .contextControl gr-button {
         display: inline-block;
@@ -225,8 +229,6 @@
         background-color: var(--table-header-background-color);
         border-bottom: 1px solid var(--border-color);
         color: var(--link-color);
-        font-family: var(--monospace-font-family);
-        font-size: var(--font-size, var(--font-size-normal));
         padding: var(--spacing-m) 0 var(--spacing-m) 48px;
       }
       #loadingError,
@@ -254,8 +256,6 @@
       }
       td.blame {
         display: none;
-        font-family: var(--font-family);
-        font-size: var(--font-size, var(--font-size-normal));
         padding: 0 var(--spacing-m);
         white-space: pre;
       }
@@ -278,11 +278,6 @@
         overflow: hidden;
         width: 200px;
       }
-      /** Since the line limit position is determined by charachter size, blank
-       lines also need to have the same font size as everything else */
-      .full-width .blank {
-        font-size: var(--font-size, var(--font-size-normal));
-      }
       /** Support the line length indicator **/
       .full-width td.content,
       .full-width td.blank {