Fix colors

* Some background colors made did not match between the two versions. * Some foreground colors blended into the background color. * Color styles added for HTML Merged Renderer.
JBlond · Mar 27, 2021 · 7eba340 · 7eba340
1 parent 9830fe0
commit 7eba340
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 26 deletions.
diff --git a/example/dark-theme.css b/example/dark-theme.css
@@ -6,8 +6,8 @@ body {
 }
 
 pre {
-    width:    100%;
     overflow: auto;
+    width:    100%;
 }
 
 a, a:visited {
@@ -19,35 +19,35 @@ a, a:visited {
  */
 
 .Differences {
-    width:           100%;
     border-collapse: collapse;
     border-spacing:  0;
     empty-cells:     show;
+    width:           100%;
 }
 
 .Differences thead th {
-    text-align:    left;
-    border-bottom: 1px solid #000000;
     background:    #AAAAAA;
+    border-bottom: 1px solid #000000;
     color:         #000000;
     padding:       4px;
+    text-align:    left;
 }
 
 .Differences tbody th {
-    text-align:     right;
     background:     #AAAAAA;
+    border-right:   1px solid #000000;
     color:          #272822;
-    width:          4em;
+    font-size:      13px;
     padding:        1px 2px;
-    border-right:   1px solid #000000;
+    text-align:     right;
     vertical-align: top;
-    font-size:      13px;
+    width:          4em;
 }
 
 .Differences td {
-    padding:     1px 2px;
     font-family: Consolas, monospace;
     font-size:   13px;
+    padding:     1px 2px;
 }
 
 .Differences .Skipped {
@@ -65,7 +65,7 @@ a, a:visited {
  * HTML Side by Side Diff
  */
 .DifferencesSideBySide .ChangeInsert td.Left {
-    background: #008000;
+    background: #DDFFDD;
 }
 
 .DifferencesSideBySide .ChangeInsert td.Right {
@@ -83,7 +83,7 @@ a, a:visited {
 }
 
 .DifferencesSideBySide .ChangeReplace .Left {
-    background: #FFEE99;
+    background: #FFDD88;
     color:      #272822;
 }
 
@@ -114,10 +114,12 @@ a, a:visited {
 .DifferencesUnified .ChangeReplace .Right,
 .DifferencesUnified .ChangeInsert .Right {
     background: #DDFFDD;
+    color:      #272822;
 }
 
 .DifferencesUnified .ChangeReplace ins {
     background: #008000;
+    color:      #272822;
 }
 
 .DifferencesUnified .ChangeReplace del {
@@ -128,13 +130,16 @@ a, a:visited {
 /*
  * HTML Merged Diff
  */
-.DifferencesMerged .ChangeReplace .Left,
+.DifferencesMerged td.ChangeInsert {
+    background: #FFDD88;
+    color:      #272822;
+}
+
 .DifferencesMerged .ChangeDelete {
     background: #FFDDDD;
     color:      #272822;
 }
 
-.DifferencesMerged .ChangeReplace .Right,
 .DifferencesMerged .ChangeInsert {
     background: #DDFFDD;
     color:      #272822;
@@ -153,3 +158,7 @@ a, a:visited {
 .DifferencesMerged th.ChangeDelete {
     background-image: linear-gradient(-45deg, #AAAAAA 0%, #EE9999 100%);
 }
+
+.DifferencesMerged th.ChangeReplace {
+    background-image: linear-gradient(-45deg, #CCCCCC 0%, #FFDD88 100%);
+}
diff --git a/example/styles.css b/example/styles.css
@@ -6,43 +6,44 @@ body {
 }
 
 pre {
-    width:    100%;
     overflow: auto;
+    width:    100%;
 }
 
 /*
  * HTML Renderers - General
  */
 
 .Differences {
-    width:           100%;
     border-collapse: collapse;
     border-spacing:  0;
     empty-cells:     show;
+    width:           100%;
 }
 
 .Differences thead th {
-    text-align:    left;
-    border-bottom: 1px solid #000000;
     background:    #AAAAAA;
+    border-bottom: 1px solid #000000;
     color:         #000000;
     padding:       4px;
+    text-align:    left;
 }
 
 .Differences tbody th {
-    text-align:     right;
     background:     #CCCCCC;
-    width:          4em;
-    padding:        1px 2px;
     border-right:   1px solid #000000;
-    vertical-align: top;
     font-size:      13px;
+    padding:        1px 2px;
+    text-align:     right;
+    vertical-align: top;
+    width:          4em;
 }
 
 .Differences td {
-    padding:     1px 2px;
-    font-family: Consolas, monospace;
-    font-size:   13px;
+    font-family:    Consolas, monospace;
+    font-size:      13px;
+    padding:        1px 2px;
+    vertical-align: top;
 }
 
 .Differences .Skipped {
@@ -111,12 +112,14 @@ pre {
 /*
  * HTML Merged Diff
  */
-.DifferencesMerged .ChangeReplace .Left,
+.DifferencesMerged td.ChangeInsert {
+    background: #FFDD88;
+}
+
 .DifferencesMerged .ChangeDelete {
     background: #FFDDDD;
 }
 
-.DifferencesMerged .ChangeReplace .Right,
 .DifferencesMerged .ChangeInsert {
     background: #DDFFDD;
 }
@@ -132,3 +135,7 @@ pre {
 .DifferencesMerged th.ChangeDelete {
     background-image: linear-gradient(-45deg, #CCCCCC 0%, #EE9999 100%);
 }
+
+.DifferencesMerged th.ChangeReplace {
+    background-image: linear-gradient(-45deg, #CCCCCC 0%, #FFDD88 100%);
+}