Use CSS variables in the diff
Change-Id: I35734f619ce10eb66b343c318148ed3ed24cc802
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 3972751..47b6e60 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -32,16 +32,6 @@
<dom-module id="gr-diff">
<template>
<style include="shared-styles">
- :host {
- --light-remove-highlight-color: #fee;
- --dark-remove-highlight-color: rgba(255, 0, 0, 0.15);
- --light-add-highlight-color: #efe;
- --dark-add-highlight-color: rgba(0, 255, 0, 0.15);
- --light-rebased-remove-highlight-color: #fff6ea;
- --dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
- --light-rebased-add-highlight-color: #edfffa;
- --dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15);
- }
:host(.no-left) .sideBySide ::content .left,
:host(.no-left) .sideBySide ::content .left + td,
:host(.no-left) .sideBySide ::content .right:not([data-value]),
@@ -54,7 +44,7 @@
@apply --diff-container-styles;
}
.diffContainer.hiddenscroll {
- padding-bottom: .8em;
+ margin-bottom: .8em;
}
table {
border-collapse: collapse;
@@ -62,14 +52,14 @@
table-layout: fixed;
}
.lineNum {
- background-color: var(--header-background-color);
+ background-color: var(--table-header-background-color);
}
.image-diff .gr-diff {
text-align: center;
}
.image-diff img {
max-width: 50em;
- outline: 1px solid #ccc;
+ outline: 1px solid var(--border-color);
}
.image-diff label,
.binary-diff label {
@@ -82,7 +72,7 @@
.diff-row.target-row.target-side-left .lineNum.left,
.diff-row.target-row.target-side-right .lineNum.right,
.diff-row.target-row.unified .lineNum {
- background-color: #BBDEFB;
+ background-color: var(--diff-selection-background-color);
color: var(--primary-text-color);
}
.blank,
@@ -151,15 +141,15 @@
background-color: var(--dark-rebased-remove-highlight-color);
}
.dueToRebase .content.remove {
- background-color: var(--light-rebased-remove-highlight-color);
+ background-color: var(--light-remove-add-highlight-color);
}
.content .contentText:empty:after {
/* Newline, to ensure empty lines are one line-height tall. */
content: '\A';
}
.contextControl {
- background-color: #fff7d4;
- border: 1px solid #f6e6a5;
+ background-color: var(--diff-context-control-color);
+ border: 1px solid var(--diff-context-control-border-color);
}
.contextControl gr-button {
display: inline-block;
@@ -172,7 +162,7 @@
text-align: center;
}
.displayLine .diff-row.target-row td {
- box-shadow: inset 0 -1px #bbb;
+ box-shadow: inset 0 -1px var(--border-color);
}
.br:after {
/* Line feed */
@@ -182,17 +172,18 @@
display: inline-block;
}
.tab-indicator:before {
- color: #C62828;
+ color: var(--diff-tab-indicator-color);
/* >> character */
content: '\00BB';
}
.trailing-whitespace {
border-radius: .4em;
- background-color: #FF9AD2;
+ background-color: var(--diff-trailing-whitespace-indicator);
}
#diffHeader {
- background-color: #F9F9F9;
- color: #2A00FF;
+ 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-small));
padding: 0.5em 0 0.5em 4em;
