Polishing of how the side-by-side diff looks.

Aligned all different files, so that all side-by-side tables look
the same. Also made sure that the tables take up the whole browser
width.

Also various changes to the css to make things easier on the eye.

Signed-off-by: Ragnar Ouchterlony <ragnar@lysator.liu.se>
Signed-off-by: Lars Hjemli <hjemli@gmail.com>

1 files changed, 60 insertions, 6 deletions

diff --git a/cgit.css b/cgit.css
index bf58b8a..3f37165 100644
--- a/cgit.css
+++ b/cgit.css
@@ -349,290 +349,344 @@ table.diffstat td span.modechange {
 	color: red;
 }
 
 table.diffstat td.add a {
 	color: green;
 }
 
 table.diffstat td.del a {
 	color: red;
 }
 
 table.diffstat td.upd a {
 	color: blue;
 }
 
 table.diffstat td.graph {
 	width: 500px;
 	vertical-align: middle;
 }
 
 table.diffstat td.graph table {
 	border: none;
 }
 
 table.diffstat td.graph td {
 	padding: 0px;
 	border: 0px;
 	height: 7pt;
 }
 
 table.diffstat td.graph td.add {
 	background-color: #5c5;
 }
 
 table.diffstat td.graph td.rem {
 	background-color: #c55;
 }
 
 div.diffstat-summary {
 	color: #888;
 	padding-top: 0.5em;
 }
 
 table.diff {
 	width: 100%;
 }
 
 table.diff td {
 	font-family: monospace;
 	white-space: pre;
 }
 
 table.diff td div.head {
 	font-weight: bold;
 	margin-top: 1em;
 	color: black;
 }
 
 table.diff td div.hunk {
 	color: #009;
 }
 
 table.diff td div.add {
 	color: green;
 }
 
 table.diff td div.del {
 	color: red;
 }
 
 .sha1 {
 	font-family: monospace;
 	font-size: 90%;
 }
 
 .left {
 	text-align: left;
 }
 
 .right {
 	text-align: right;
 }
 
 table.list td.reposection {
 	font-style: italic;
 	color: #888;
 }
 
 a.button {
 	font-size: 80%;
 	padding: 0em 0.5em;
 }
 
 a.primary {
 	font-size: 100%;
 }
 
 a.secondary {
 	font-size: 90%;
 }
 
 td.toplevel-repo {
 
 }
 
 table.list td.sublevel-repo {
 	padding-left: 1.5em;
 }
 
 div.pager {
 	text-align: center;
 	margin: 1em 0em 0em 0em;
 }
 
 div.pager a {
 	color: #777;
 	margin: 0em 0.5em;
 }
 
 span.age-mins {
 	font-weight: bold;
 	color: #080;
 }
 
 span.age-hours {
 	color: #080;
 }
 
 span.age-days {
 	color: #040;
 }
 
 span.age-weeks {
 	color: #444;
 }
 
 span.age-months {
 	color: #888;
 }
 
 span.age-years {
 	color: #bbb;
 }
 div.footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
 	color: #ccc;
 }
 a.branch-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #88ff88;
 	border: solid 1px #007700;
 }
 a.tag-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ffff88;
 	border: solid 1px #777700;
 }
 a.remote-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ccccff;
 	border: solid 1px #000077;
 }
 a.deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ff8888;
 	border: solid 1px #770000;
 }
 
 div.commit-subject a {
 	margin-left: 1em;
 	font-size: 75%;
 }
 
 table.stats {
 	border: solid 1px black;
 	border-collapse: collapse;
 }
 
 table.stats th {
 	text-align: left;
 	padding: 1px 0.5em;
 	background-color: #eee;
 	border: solid 1px black;
 }
 
 table.stats td {
 	text-align: right;
 	padding: 1px 0.5em;
 	border: solid 1px black;
 }
 
 table.stats td.total {
 	font-weight: bold;
 	text-align: left;
 }
 
 table.stats td.sum {
 	color: #c00;
 	font-weight: bold;
 /*	background-color: #eee; */
 }
 
 table.stats td.left {
 	text-align: left;
 }
 
 table.vgraph {
 	border-collapse: separate;
 	border: solid 1px black;
 	height: 200px;
 }
 
 table.vgraph th {
 	background-color: #eee;
 	font-weight: bold;
 	border: solid 1px white;
 	padding: 1px 0.5em;
 }
 
 table.vgraph td {
 	vertical-align: bottom;
 	padding: 0px 10px;
 }
 
 table.vgraph div.bar {
 	background-color: #eee;
 }
 
 table.hgraph {
 	border: solid 1px black;
 	width: 800px;
 }
 
 table.hgraph th {
 	background-color: #eee;
 	font-weight: bold;
 	border: solid 1px black;
 	padding: 1px 0.5em;
 }
 
 table.hgraph td {
 	vertical-align: center;
 	padding: 2px 2px;
 }
 
 table.hgraph div.bar {
 	background-color: #eee;
 	height: 1em;
 }
 
+table.ssdiff {
+	width: 100%;
+}
+
+table.ssdiff td {
+	font-size: 75%;
+	font-family: monospace;
+	white-space: pre;
+	padding: 1px 4px 1px 4px;
+	border-left: solid 1px #aaa;
+	border-right: solid 1px #aaa;
+}
+
 table.ssdiff td.add {
 	color: black;
-	background: #afa;
+	background: #cfc;
+	min-width: 50%;
 }
 
 table.ssdiff td.add_dark {
 	color: black;
-	background: #9c9;
+	background: #aca;
+	min-width: 50%;
 }
 
 table.ssdiff td.del {
 	color: black;
-	background: #faa;
+	background: #fcc;
+	min-width: 50%;
 }
 
 table.ssdiff td.del_dark {
 	color: black;
-	background: #c99;
+	background: #caa;
+	min-width: 50%;
 }
 
 table.ssdiff td.changed {
 	color: black;
-	background: #ffa;
+	background: #ffc;
+	min-width: 50%;
 }
 
 table.ssdiff td.changed_dark {
 	color: black;
-	background: #cc9;
+	background: #cca;
+	min-width: 50%;
+}
+
+table.ssdiff td.lineno {
+	color: black;
+	background: #eee;
+	text-align: right;
+	width: 3em;
+	min-width: 3em;
 }
 
 table.ssdiff td.hunk {
 	color: #black;
 	background: #ccf;
+	border-top: solid 1px #aaa;
+	border-bottom: solid 1px #aaa;
+}
+
+table.ssdiff td.head {
+	border-top: solid 1px #aaa;
+	border-bottom: solid 1px #aaa;
+}
+
+table.ssdiff td.head div.head {
+	font-weight: bold;
+	color: black;
+}
+
+table.ssdiff td.foot {
+	border-top: solid 1px #aaa;
+        border-left: none;
+        border-right: none;
+        border-bottom: none;
+}
+
+table.ssdiff td.space {
+	border: none;
+}
+
+table.ssdiff td.space div {
+	min-height: 3em;
 }