Fix diff split view coloring (#553) (#584)

Signed-off-by: Manuel Kuhlmann <manuel@mkuhlmann.org>

3 files changed, 48 insertions, 45 deletions

diff --git a/public/css/index.css b/public/css/index.css
index d64c71ca2a..cbf0280fce 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1982,32 +1982,34 @@ footer .ui.language .menu {
   border-right: 1px solid #d4d4d5;
   padding: 0 5px;
 }
+.repository .diff-file-box .code-diff tbody tr td.halfwidth {
+  width: 50%;
+}
 .repository .diff-file-box .code-diff tbody tr.tag-code td,
-.repository .diff-file-box .code-diff tbody tr.tag-code pre {
+.repository .diff-file-box .code-diff tbody tr td.tag-code {
   background-color: #F0F0F0 !important;
-  border-color: #D2CECE!important;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  border-color: #D2CECE !important;
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
-.repository .diff-file-box .code-diff tbody tr.tag-code td.halfwidth {
-  width: 50%;
+.repository .diff-file-box .code-diff tbody tr.add-code td:nth-child(1),
+.repository .diff-file-box .code-diff tbody tr.add-code td:nth-child(2),
+.repository .diff-file-box .code-diff tbody tr.del-code td:nth-child(3),
+.repository .diff-file-box .code-diff tbody tr.del-code td:nth-child(4) {
+  background-color: #fafafa;
 }
-.repository .diff-file-box .code-diff tbody tr.del-code td,
-.repository .diff-file-box .code-diff tbody tr.del-code pre {
+.repository .diff-file-box .code-diff tbody tr.del-code td:nth-child(1),
+.repository .diff-file-box .code-diff tbody tr.del-code td:nth-child(2),
+.repository .diff-file-box .code-diff tbody tr td.del-code {
   background-color: #ffe0e0 !important;
   border-color: #f1c0c0 !important;
 }
-.repository .diff-file-box .code-diff tbody tr.del-code td.halfwidth {
-  width: 50%;
-}
-.repository .diff-file-box .code-diff tbody tr.add-code td,
-.repository .diff-file-box .code-diff tbody tr.add-code pre {
+.repository .diff-file-box .code-diff tbody tr.add-code td:nth-child(3),
+.repository .diff-file-box .code-diff tbody tr.add-code td:nth-child(4),
+.repository .diff-file-box .code-diff tbody tr td.add-code {
   background-color: #d6fcd6 !important;
   border-color: #c1e9c1 !important;
 }
-.repository .diff-file-box .code-diff tbody tr.add-code td.halfwidth {
-  width: 50%;
-}
 .repository .diff-file-box .code-diff tbody tr .removed-code {
   background-color: #ff9999;
 }
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 259aa26399..6a779a0867 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -902,44 +902,42 @@
 			}
 			tbody {
 				tr {
+					td.halfwidth {
+						width: 50%;
+					}
 
-					&.tag-code {
-						td, pre {
-							background-color: #F0F0F0 !important;
-							border-color: #D2CECE!important;
-							padding-top: 4px;
-							padding-bottom: 4px;
-						}
-						td.halfwidth {
-							width: 50%;
-						}
+					&.tag-code td, td.tag-code {
+						background-color: #F0F0F0 !important;
+						border-color: #D2CECE !important;
+						padding-top: 8px;
+						padding-bottom: 8px;
 						// td.selected-line, td.selected-line pre {
 						// 	background-color: #ffffdd !important;
 						// }
 					}
+
 					// &.same-code {
 					// 	td.selected-line, td.selected-line pre {
 					// 		background-color: #ffffdd !important;
 					// 	}
 					// }
-					&.del-code {
-						td, pre {
-							background-color: #ffe0e0 !important;
-					    border-color: #f1c0c0 !important;
-						}
 
-						td.halfwidth {
-							width: 50%;
-						}
+					// light gray for empty lines before / after commit
+					&.add-code td:nth-child(1), &.add-code td:nth-child(2),
+					&.del-code td:nth-child(3), &.del-code td:nth-child(4) {
+						background-color: #fafafa;
 					}
-					&.add-code {
-						td, pre {
-							background-color: #d6fcd6 !important;
-							border-color: #c1e9c1 !important;
-						}
-						td.halfwidth {
-							width: 50%;
-						}
+
+					&.del-code td:nth-child(1),	&.del-code td:nth-child(2),
+					td.del-code {
+						background-color: #ffe0e0 !important;
+						border-color: #f1c0c0 !important;
+					}
+
+					&.add-code td:nth-child(3), &.add-code td:nth-child(4),
+					td.add-code{
+						background-color: #d6fcd6 !important;
+						border-color: #c1e9c1 !important;
 					}
 
 					.removed-code {
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 8ee4a001ce..9445e7846c 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -133,16 +133,19 @@
 	{{if .IsSplitStyle}}
 		<script>
 			(function() {
-				$('.add-code').each(function() {
+				$('tr.add-code').each(function() {
 					var prev = $(this).prev();
 					if(prev.is('.del-code') && prev.children().eq(3).text().trim() === '') {
 						while(prev.prev().is('.del-code') && prev.prev().children().eq(3).text().trim() === '') {
 							prev = prev.prev();
 						}
-						prev.children().eq(3).html($(this).children().eq(3).html());
 						prev.children().eq(2).html($(this).children().eq(2).html());
-						prev.children().eq(3).addClass('add-code');
+						prev.children().eq(3).html($(this).children().eq(3).html());
+
+						prev.children().eq(0).addClass('del-code');
+						prev.children().eq(1).addClass('del-code');
 						prev.children().eq(2).addClass('add-code');
+						prev.children().eq(3).addClass('add-code');
 						$(this).remove();
 					}
 				});