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 {