Side-by-side diff

1 files changed, 96 insertions, 7 deletions

diff --git a/cgit.css b/cgit.css
index 3ca2263..22d4a93 100644
--- a/cgit.css
+++ b/cgit.css
@@ -114,8 +114,10 @@ body {
 }
 
 #cgit .content {
-    width: 920px;
+    min-width: 920px;
+    max-width: 1300px;
     margin: 0 auto;
+    display: table;
 }
 
 #cgit .right {
@@ -208,28 +210,84 @@ body {
     line-height: 150%;
     overflow: auto;
     display: block;
+    border-collapse: collapse;
+}
+
+#cgit .ssdiff {
+    clear: both;
+    min-width: 920px;
+    max-width: 1300px;
+    font-family: "Source Code Pro";
+    font-size: 80%;
+    line-height: 150%;
+    border-collapse: collapse;
+    white-space: pre;
+    overflow: auto;
+    display: block;
+    margin: 1em 0;
 }
 
 #cgit .diff div:hover {
     background-color: #F8EEC7;
 }
 
+#cgit .ssdiff tr:hover td {
+    background-color: #F8EEC7;
+}
+
 #cgit .diff td {
     min-width: 918px;
+    padding: 0;
+}
+
+#cgit .ssdiff td {
+    padding: 0 0.5em;
+    vertical-align: top;
+    border-left: 1px solid #CCC;
+    border-right: 1px solid #CCC;
+}
+
+#cgit .ssdiff tr:last-child {
+    border-bottom: 1px solid #CCC;
+}
+
+#cgit .ssdiff td.head {
+    padding: 0;
+}
+
+#cgit .ssdiff div.head {
+    padding: 0.2em 0.5em;
+}
+
+#cgit .ssdiff .lineno {
+    text-align: right;
+    padding: 0 0.2em;
+}
+
+#cgit .ssdiff .lineno a {
+    color: rgba(0, 0, 0, 0.3);
 }
 
 #cgit .diff .head {
     background-image: linear-gradient(#FAFAFA, #EAEAEA);
     border-bottom: 1px solid #D8D8D8;
     border-top: 1px solid #D8D8D8;
-    position: relative;
     margin-top: 1em;
     line-height: 110%;
     padding: 0.5em 1em;
     white-space: pre;
 }
 
-#cgit .diff .head:first-line {
+#cgit .ssdiff div.head {
+    background-image: linear-gradient(#FAFAFA, #EAEAEA);
+    border-bottom: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+    line-height: 110%;
+    white-space: pre;
+}
+
+#cgit .diff .head:first-line,
+#cgit .ssdiff .head:first-line {
     font-weight: bold;
 }
 
@@ -238,12 +296,36 @@ body {
     border-top: none;
 }
 
-#cgit .diff td {
-    padding: 0;
+#cgit .ssdiff .del {
+    background-color: #FDD;
 }
 
-#cgit .diff {
-    border-collapse: collapse;
+#cgit .ssdiff .del_dark {
+    background-color: #e6c7c7;
+}
+
+#cgit .ssdiff .add {
+    background-color: #DFD;
+}
+
+#cgit .ssdiff span.add {
+    font-weight: bold;
+}
+
+#cgit .ssdiff span.del {
+    font-weight: bold;
+}
+
+#cgit .ssdiff .add_dark {
+    background-color: #c7e6c7;
+}
+
+#cgit .ssdiff .changed {
+    background-color: #fcfccc;
+}
+
+#cgit .ssdiff .changed_dark {
+    background-color: #e6e6ba;
 }
 
 #cgit .diff .del {
@@ -265,6 +347,13 @@ body {
     white-space: pre;
 }
 
+#cgit .ssdiff .hunk {
+    background-color: #F8F8FF;
+    color: #999;
+    border-bottom: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+}
+
 #cgit .diff .ctx {
     padding: 0 1em;
     white-space: pre;