Fix unified diff view styling (#585)

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

public/css/index.css

@@ -1992,29 +1992,37 @@ footer .ui.language .menu {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-.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 .removed-code {
+  background-color: #ff9999;
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+  background-color: #99ff99;
 }
-.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 {
+.repository .diff-file-box .code-diff-unified tbody tr.del-code td {
   background-color: #ffe0e0 !important;
   border-color: #f1c0c0 !important;
 }
-.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 {
+.repository .diff-file-box .code-diff-unified tbody tr.add-code td {
   background-color: #d6fcd6 !important;
   border-color: #c1e9c1 !important;
 }
-.repository .diff-file-box .code-diff tbody tr .removed-code {
-  background-color: #ff9999;
+.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),
+.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3),
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(4) {
+  background-color: #fafafa;
 }
-.repository .diff-file-box .code-diff tbody tr .added-code {
-  background-color: #99ff99;
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(1),
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(2),
+.repository .diff-file-box .code-diff-split tbody tr td.del-code {
+  background-color: #ffe0e0 !important;
+  border-color: #f1c0c0 !important;
+}
+.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3),
+.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4),
+.repository .diff-file-box .code-diff-split tbody tr td.add-code {
+  background-color: #d6fcd6 !important;
+  border-color: #c1e9c1 !important;
 }
 .repository .diff-file-box.file-content img {
   max-width: 100%;

public/less/_repository.less

@@ -922,24 +922,6 @@
 					// 	}
 					// }
 
-					// 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;
-					}
-
-					&.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 {
 					  background-color: #ff9999;
 					}
@@ -949,6 +931,36 @@
 				}
 			}
 		}
+		.code-diff-unified tbody tr {
+			&.del-code td {
+				background-color: #ffe0e0 !important;
+				border-color: #f1c0c0 !important;
+			}
+
+			&.add-code td {
+				background-color: #d6fcd6 !important;
+				border-color: #c1e9c1 !important;
+			}
+		}
+		.code-diff-split tbody tr {
+			// 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;
+			}
+
+			&.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;
+			}
+		}
 		&.file-content {
 			img {
 				max-width: 100%;

templates/repo/diff/box.tmpl

@@ -85,7 +85,7 @@
 								<img src="{{$.RawPath}}/{{EscapePound .Name}}">
 							</div>
 						{{else}}
-							<div class="file-body file-code code-view code-diff">
+							<div class="file-body file-code code-view code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
 								<table>
 									<tbody>
 										{{if $.IsSplitStyle}}