Merge pull request #62 from rtfpessoa/clean-css

Clean files summary and diff headers and line numbers

dist/diff2html-templates.js

@@ -69,13 +69,13 @@ output += "<div id=\"";
 output += runtime.suppressValue((lineno = 0, colno = 32, runtime.callWrap(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "printerUtils")),"getHtmlId"), "printerUtils[\"getHtmlId\"]", context, [runtime.contextOrFrameLookup(context, frame, "file")])), env.opts.autoescape);
 output += "\" class=\"d2h-file-wrapper\" data-lang=\"";
 output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "file")),"language"), env.opts.autoescape);
-output += "\">\n  <div class=\"d2h-file-header\">\n    <div class=\"d2h-file-stats\">\n      <span class=\"d2h-lines-added\">\n        <span>+";
+output += "\">\n  <div class=\"d2h-file-header\">\n    <span class=\"d2h-file-stats\">\n      <span class=\"d2h-lines-added\">\n        <span>+";
 output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "file")),"addedLines"), env.opts.autoescape);
 output += "</span>\n      </span>\n      <span class=\"d2h-lines-deleted\">\n        <span>-";
 output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "file")),"deletedLines"), env.opts.autoescape);
-output += "</span>\n      </span>\n    </div>\n    <div class=\"d2h-file-name\">&nbsp;";
+output += "</span>\n      </span>\n    </span>\n    <span class=\"d2h-file-name-wrapper\">\n        <span class=\"d2h-file-name\">&nbsp;";
-output += runtime.suppressValue((lineno = 10, colno = 62, runtime.callWrap(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "printerUtils")),"getDiffName"), "printerUtils[\"getDiffNam\"]", context, [runtime.contextOrFrameLookup(context, frame, "file")])), env.opts.autoescape);
+output += runtime.suppressValue((lineno = 11, colno = 67, runtime.callWrap(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "printerUtils")),"getDiffName"), "printerUtils[\"getDiffNam\"]", context, [runtime.contextOrFrameLookup(context, frame, "file")])), env.opts.autoescape);
-output += "</div>\n  </div>\n  <div class=\"d2h-file-diff\">\n    <div class=\"d2h-code-wrapper\">\n      <table class=\"d2h-diff-table\">\n        <tbody class=\"d2h-diff-tbody\">\n          ";
+output += "</span>\n    </span>\n  </div>\n  <div class=\"d2h-file-diff\">\n    <div class=\"d2h-code-wrapper\">\n      <table class=\"d2h-diff-table\">\n        <tbody class=\"d2h-diff-tbody\">\n          ";
 output += runtime.suppressValue(env.getFilter("safe").call(context, runtime.contextOrFrameLookup(context, frame, "diffs")), env.opts.autoescape);
 output += "\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n";
 if(parentTemplate) {

dist/diff2html.css

@@ -6,16 +6,7 @@
  */
 
 .d2h-wrapper {
-    display: block;
-    margin: 0 auto;
     text-align: left;
-    width: 100%;
-}
-
-.d2h-file-wrapper {
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    margin-bottom: 1em;
 }
 
 .d2h-file-header {
@@ -29,7 +20,6 @@
     display: inline;
     font-size: 12px;
     text-align: center;
-    max-width: 15%;
 }
 
 .d2h-lines-added {
@@ -56,15 +46,24 @@
     padding: 2px;
 }
 
+.d2h-file-name-wrapper {
+    display: inline-flex;
+    width: 90%;
+}
+
 .d2h-file-name {
-    display: inline;
     line-height: 33px;
-    max-width: 80%;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
+.d2h-file-wrapper {
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    margin-bottom: 1em;
+}
+
 .d2h-diff-table {
     border-collapse: collapse;
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
@@ -96,16 +95,9 @@
 
 .d2h-code-line {
     display: block;
-    padding: 0 10px;
-    height: 18px;
     white-space: nowrap;
-    line-height: 18px;
+    padding: 0 10px;
     margin-left: 80px;
-    /* Override HighlightJS */
-    color: inherit;
-    overflow-x: inherit;
-    background: none;
-    /* ******************** */
 }
 
 .d2h-code-side-line {
@@ -154,7 +146,7 @@
 .line-num1 {
     box-sizing: border-box;
     float: left;
-    width: 32px;
+    width: 40px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 3px;
@@ -163,7 +155,7 @@
 .line-num2 {
     box-sizing: border-box;
     float: right;
-    width: 32px;
+    width: 40px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 3px;
@@ -172,7 +164,7 @@
 .d2h-code-linenumber {
     box-sizing: border-box;
     position: absolute;
-    width: 82px;
+    width: 86px;
     height: 18px;
     padding-left: 2px;
     padding-right: 2px;
@@ -188,9 +180,9 @@
 .d2h-code-side-linenumber {
     box-sizing: border-box;
     position: absolute;
-    width: 52px;
+    width: 56px;
-    padding-left: 10px;
+    padding-left: 5px;
-    padding-right: 10px;
+    padding-right: 5px;
     height: 18px;
     line-height: 18px;
     background-color: #fff;
@@ -203,6 +195,10 @@
     text-overflow: ellipsis;
 }
 
+/*
+ * Changes Highlight
+ */
+
 .d2h-del {
     background-color: #fee8e9;
     border-color: #e9aeae;
@@ -219,43 +215,6 @@
     border-color: #d5e4f2;
 }
 
-.d2h-file-list-wrapper {
-    margin-bottom: 10px;
-    padding: 0 10px;
-}
-
-.d2h-file-list-wrapper a {
-    text-decoration: none;
-    color: #3572b0;
-}
-
-.d2h-file-list-wrapper a:visited {
-    color: #3572b0;
-}
-
-.d2h-file-list-header {
-    font-weight: bold;
-    float: left;
-}
-
-.d2h-file-list-line {
-    text-align: left;
-    font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.d2h-file-list-line .d2h-file-name {
-    line-height: 21px;
-}
-
-.d2h-file-list {
-    display: block;
-}
-
-.d2h-clear {
-    display: block;
-    clear: both;
-}
-
 .d2h-del.d2h-change, .d2h-ins.d2h-change {
     background-color: #ffc;
 }
@@ -272,10 +231,46 @@ ins.d2h-change, del.d2h-change {
     background-color: #ded;
 }
 
+/*
+ * File Summary List
+ */
+
+.d2h-file-list-wrapper {
+    margin-bottom: 10px;
+}
+
+.d2h-file-list-wrapper a {
+    text-decoration: none;
+    color: #3572b0;
+}
+
+.d2h-file-list-wrapper a:visited {
+    color: #3572b0;
+}
+
+.d2h-file-list-header {
+    text-align: left;
+}
+
+.d2h-file-list-title {
+    font-weight: bold;
+}
+
+.d2h-file-list-line {
+    text-align: left;
+    font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.d2h-file-list-line .d2h-file-name {
+    line-height: 21px;
+}
+
+.d2h-file-list {
+    display: block;
+}
+
 .d2h-file-switch {
     display: none;
-    float: left;
     font-size: 10px;
     cursor: pointer;
-    margin-top: 3px;
 }

dist/diff2html.js

@@ -466,13 +466,13 @@
 
 	  FileListPrinter.prototype.generateFileList = function(diffFiles) {
 	    return '<div class="d2h-file-list-wrapper">\n' +
-	      '     <div class="d2h-file-list-header">Files changed (' + diffFiles.length + ')&nbsp&nbsp</div>\n' +
+	      '     <div class="d2h-file-list-header">\n' +
-	      '     <a class="d2h-file-switch d2h-hide">hide</a>\n' +
+	      '         <span class="d2h-file-list-title">Files changed (' + diffFiles.length + ')&nbsp&nbsp</span>\n' +
-	      '     <a class="d2h-file-switch d2h-show">show</a>\n' +
+	      '         <a class="d2h-file-switch d2h-hide">hide</a>\n' +
-	      '     <div class="d2h-clear"></div>\n' +
+	      '         <a class="d2h-file-switch d2h-show">show</a>\n' +
+	      '     </div>\n' +
 	      '     <table class="d2h-file-list">\n' +
 
-
 	      diffFiles.map(function(file) {
 	        return '     <tr class="d2h-file-list-line">\n' +
 	          '       <td class="d2h-lines-added">\n' +
@@ -481,8 +481,11 @@
 	          '       <td class="d2h-lines-deleted">\n' +
 	          '         <span>-' + file.deletedLines + '</span>\n' +
 	          '       </td>\n' +
-	          '       <td class="d2h-file-name"><a href="#' + printerUtils.getHtmlId(file) + '">' +
+	          '       <td class="d2h-file-name-wrapper">\n' +
-	          '&nbsp;' + printerUtils.getDiffName(file) + '</a></td>\n' +
+	          '         <a href="#' + printerUtils.getHtmlId(file) + '" class="d2h-file-name">' +
+	          '&nbsp;' + printerUtils.getDiffName(file) +
+	          '         </a>\n' +
+	          '       </td>\n' +
 	          '     </tr>\n';
 	      }).join('\n') +
 	      '</table></div>\n';
@@ -5260,15 +5263,17 @@
 	  SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
 	    return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
 	      '     <div class="d2h-file-header">\n' +
-	      '       <div class="d2h-file-stats">\n' +
+	      '       <span class="d2h-file-stats">\n' +
-	      '         <span class="d2h-lines-added">' +
+	      '         <span class="d2h-lines-added">\n' +
 	      '           <span>+' + file.addedLines + '</span>\n' +
 	      '         </span>\n' +
-	      '         <span class="d2h-lines-deleted">' +
+	      '         <span class="d2h-lines-deleted">\n' +
 	      '           <span>-' + file.deletedLines + '</span>\n' +
 	      '         </span>\n' +
-	      '       </div>\n' +
+	      '       </span>\n' +
-	      '       <div class="d2h-file-name">' + printerUtils.getDiffName(file) + '</div>\n' +
+	      '       <span class="d2h-file-name-wrapper">\n' +
+	      '         <span class="d2h-file-name">' + printerUtils.getDiffName(file) + '</span>\n' +
+	      '       </span>\n' +
 	      '     </div>\n' +
 	      '     <div class="d2h-files-diff">\n' +
 	      '       <div class="d2h-file-side-diff">\n' +

dist/diff2html.min.css

@@ -1 +1 @@
-.d2h-code-line-prefix,.line-num1{float:left}.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{text-align:right}.d2h-lines-added>*{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px}.d2h-lines-deleted{text-align:left}.d2h-lines-deleted>*{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px}.d2h-file-name{display:inline;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-file-diff,.d2h-file-side-diff{overflow-x:scroll;overflow-y:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;width:100%}.d2h-diff-tbody>tr>td>div{height:16px;line-height:16px}.d2h-files-diff{width:100%}.d2h-file-side-diff{display:inline-block;width:50%;margin-right:-4px}.d2h-code-line,.d2h-code-side-line{padding:0 10px;height:18px;line-height:18px;color:inherit;overflow-x:inherit;background:0 0;display:block}.d2h-code-line{white-space:nowrap;margin-left:80px}.d2h-code-side-line{white-space:pre;margin-left:50px}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;border-radius:.2em}.d2h-code-line-ctn,.d2h-code-line-prefix{background:0 0;padding:0}.d2h-code-linenumber,.d2h-code-side-linenumber{position:absolute;height:18px;line-height:18px;background-color:#fff;text-align:right;color:rgba(0,0,0,.3);cursor:pointer}.line-num1,.line-num2{width:32px;padding-left:3px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}.line-num2{float:right}.d2h-code-linenumber{box-sizing:border-box;width:82px;padding-left:2px;padding-right:2px;border:solid #eee;border-width:0 1px}.d2h-code-side-linenumber{box-sizing:border-box;width:52px;padding-left:10px;padding-right:10px;border:solid #eee;border-width:0 1px;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2}.d2h-file-list-wrapper{margin-bottom:10px;padding:0 10px}.d2h-file-list-wrapper a{text-decoration:none;color:#3572b0}.d2h-file-list-wrapper a:visited{color:#3572b0}.d2h-file-list-header{font-weight:700;float:left}.d2h-file-list-line{text-align:left;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-list-line .d2h-file-name{line-height:21px}.d2h-file-list{display:block}.d2h-clear{display:block;clear:both}.d2h-del.d2h-change,.d2h-ins.d2h-change{background-color:#ffc}del.d2h-change,ins.d2h-change{background-color:#fad771}.d2h-file-diff .d2h-del.d2h-change{background-color:#fae1af}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded}.d2h-file-switch{display:none;float:left;font-size:10px;cursor:pointer;margin-top:3px}
+.d2h-code-line-prefix,.line-num1{float:left}.d2h-wrapper{text-align:left}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center}.d2h-lines-added{text-align:right}.d2h-lines-added>*{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px}.d2h-lines-deleted{text-align:left}.d2h-lines-deleted>*{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px}.d2h-file-name-wrapper{display:inline-flex;width:90%}.d2h-file-name{line-height:33px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-file-diff,.d2h-file-side-diff{overflow-x:scroll;overflow-y:hidden}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;width:100%}.d2h-diff-tbody>tr>td>div{height:16px;line-height:16px}.d2h-files-diff{width:100%}.d2h-file-side-diff{display:inline-block;width:50%;margin-right:-4px}.d2h-code-line{display:block;white-space:nowrap;padding:0 10px;margin-left:80px}.d2h-code-side-line{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:50px;color:inherit;overflow-x:inherit;background:0 0}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;border-radius:.2em}.d2h-code-line-ctn,.d2h-code-line-prefix{background:0 0;padding:0}.d2h-code-linenumber,.d2h-code-side-linenumber{position:absolute;height:18px;line-height:18px;background-color:#fff;text-align:right;color:rgba(0,0,0,.3);cursor:pointer}.line-num1,.line-num2{width:40px;padding-left:3px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}.line-num2{float:right}.d2h-code-linenumber{box-sizing:border-box;width:86px;padding-left:2px;padding-right:2px;border:solid #eee;border-width:0 1px}.d2h-code-side-linenumber{box-sizing:border-box;width:56px;padding-left:5px;padding-right:5px;border:solid #eee;border-width:0 1px;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2}.d2h-del.d2h-change,.d2h-ins.d2h-change{background-color:#ffc}del.d2h-change,ins.d2h-change{background-color:#fad771}.d2h-file-diff .d2h-del.d2h-change{background-color:#fae1af}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded}.d2h-file-list-wrapper{margin-bottom:10px}.d2h-file-list-wrapper a{text-decoration:none;color:#3572b0}.d2h-file-list-wrapper a:visited{color:#3572b0}.d2h-file-list-header{text-align:left}.d2h-file-list-title{font-weight:700}.d2h-file-list-line{text-align:left;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-list-line .d2h-file-name{line-height:21px}.d2h-file-list{display:block}.d2h-file-switch{display:none;font-size:10px;cursor:pointer}

sample/index.html

@@ -25,15 +25,15 @@
 
     <script>
         var lineDiffExample =
-                'diff --git a/coverage.init b/coverage.init\n' +
+                'diff --git a/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init b/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init\n' +
                 'index fc56817..e8e7e49 100644\n' +
-                '--- a/coverage.init\n' +
+                '--- a/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init\n' +
-                '+++ b/coverage.init\n' +
+                '+++ b/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init\n' +
                 '@@ -19,7 +19,7 @@\n' +
                 ' -opt "\-nostart"\n' +
                 ' \n' +
                 ' # skip stopenv\n' +
-                '--do "runbvt,stopenv,getlogs,pullcoveragedata"\n' +
+                '--do "runbvt,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata,stopenv,getlogs,pullcoveragedata"\n' +
                 '+-do "runbvt,getlogs,pullcoveragedata"\n' +
                 ' \n' +
                 ' ##########################################\n' +

src/file-list-printer.js

@@ -14,13 +14,13 @@
 
   FileListPrinter.prototype.generateFileList = function(diffFiles) {
     return '<div class="d2h-file-list-wrapper">\n' +
-      '     <div class="d2h-file-list-header">Files changed (' + diffFiles.length + ')&nbsp&nbsp</div>\n' +
+      '     <div class="d2h-file-list-header">\n' +
-      '     <a class="d2h-file-switch d2h-hide">hide</a>\n' +
+      '         <span class="d2h-file-list-title">Files changed (' + diffFiles.length + ')&nbsp&nbsp</span>\n' +
-      '     <a class="d2h-file-switch d2h-show">show</a>\n' +
+      '         <a class="d2h-file-switch d2h-hide">hide</a>\n' +
-      '     <div class="d2h-clear"></div>\n' +
+      '         <a class="d2h-file-switch d2h-show">show</a>\n' +
+      '     </div>\n' +
       '     <table class="d2h-file-list">\n' +
 
-
       diffFiles.map(function(file) {
         return '     <tr class="d2h-file-list-line">\n' +
           '       <td class="d2h-lines-added">\n' +
@@ -29,8 +29,11 @@
           '       <td class="d2h-lines-deleted">\n' +
           '         <span>-' + file.deletedLines + '</span>\n' +
           '       </td>\n' +
-          '       <td class="d2h-file-name"><a href="#' + printerUtils.getHtmlId(file) + '">' +
+          '       <td class="d2h-file-name-wrapper">\n' +
-          '&nbsp;' + printerUtils.getDiffName(file) + '</a></td>\n' +
+          '         <a href="#' + printerUtils.getHtmlId(file) + '" class="d2h-file-name">' +
+          '&nbsp;' + printerUtils.getDiffName(file) +
+          '         </a>\n' +
+          '       </td>\n' +
           '     </tr>\n';
       }).join('\n') +
       '</table></div>\n';

src/side-by-side-printer.js

@@ -26,15 +26,17 @@
   SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
     return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
       '     <div class="d2h-file-header">\n' +
-      '       <div class="d2h-file-stats">\n' +
+      '       <span class="d2h-file-stats">\n' +
-      '         <span class="d2h-lines-added">' +
+      '         <span class="d2h-lines-added">\n' +
       '           <span>+' + file.addedLines + '</span>\n' +
       '         </span>\n' +
-      '         <span class="d2h-lines-deleted">' +
+      '         <span class="d2h-lines-deleted">\n' +
       '           <span>-' + file.deletedLines + '</span>\n' +
       '         </span>\n' +
-      '       </div>\n' +
+      '       </span>\n' +
-      '       <div class="d2h-file-name">' + printerUtils.getDiffName(file) + '</div>\n' +
+      '       <span class="d2h-file-name-wrapper">\n' +
+      '         <span class="d2h-file-name">' + printerUtils.getDiffName(file) + '</span>\n' +
+      '       </span>\n' +
       '     </div>\n' +
       '     <div class="d2h-files-diff">\n' +
       '       <div class="d2h-file-side-diff">\n' +

src/templates/line-by-line/file-diff.html

@@ -1,14 +1,16 @@
 <div id="{{ printerUtils.getHtmlId(file) }}" class="d2h-file-wrapper" data-lang="{{ file.language }}">
   <div class="d2h-file-header">
-    <div class="d2h-file-stats">
+    <span class="d2h-file-stats">
       <span class="d2h-lines-added">
         <span>+{{ file.addedLines }}</span>
       </span>
       <span class="d2h-lines-deleted">
         <span>-{{ file.deletedLines }}</span>
       </span>
-    </div>
+    </span>
-    <div class="d2h-file-name">&nbsp;{{ printerUtils.getDiffName(file) }}</div>
+    <span class="d2h-file-name-wrapper">
+        <span class="d2h-file-name">&nbsp;{{ printerUtils.getDiffName(file) }}</span>
+    </span>
   </div>
   <div class="d2h-file-diff">
     <div class="d2h-code-wrapper">

src/ui/css/diff2html.css

@@ -6,16 +6,7 @@
  */
 
 .d2h-wrapper {
-    display: block;
-    margin: 0 auto;
     text-align: left;
-    width: 100%;
-}
-
-.d2h-file-wrapper {
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    margin-bottom: 1em;
 }
 
 .d2h-file-header {
@@ -29,7 +20,6 @@
     display: inline;
     font-size: 12px;
     text-align: center;
-    max-width: 15%;
 }
 
 .d2h-lines-added {
@@ -56,15 +46,24 @@
     padding: 2px;
 }
 
+.d2h-file-name-wrapper {
+    display: inline-flex;
+    width: 90%;
+}
+
 .d2h-file-name {
-    display: inline;
     line-height: 33px;
-    max-width: 80%;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
+.d2h-file-wrapper {
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    margin-bottom: 1em;
+}
+
 .d2h-diff-table {
     border-collapse: collapse;
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
@@ -96,16 +95,9 @@
 
 .d2h-code-line {
     display: block;
-    padding: 0 10px;
-    height: 18px;
     white-space: nowrap;
-    line-height: 18px;
+    padding: 0 10px;
     margin-left: 80px;
-    /* Override HighlightJS */
-    color: inherit;
-    overflow-x: inherit;
-    background: none;
-    /* ******************** */
 }
 
 .d2h-code-side-line {
@@ -154,7 +146,7 @@
 .line-num1 {
     box-sizing: border-box;
     float: left;
-    width: 32px;
+    width: 40px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 3px;
@@ -163,7 +155,7 @@
 .line-num2 {
     box-sizing: border-box;
     float: right;
-    width: 32px;
+    width: 40px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 3px;
@@ -172,7 +164,7 @@
 .d2h-code-linenumber {
     box-sizing: border-box;
     position: absolute;
-    width: 82px;
+    width: 86px;
     height: 18px;
     padding-left: 2px;
     padding-right: 2px;
@@ -188,9 +180,9 @@
 .d2h-code-side-linenumber {
     box-sizing: border-box;
     position: absolute;
-    width: 52px;
+    width: 56px;
-    padding-left: 10px;
+    padding-left: 5px;
-    padding-right: 10px;
+    padding-right: 5px;
     height: 18px;
     line-height: 18px;
     background-color: #fff;
@@ -203,6 +195,10 @@
     text-overflow: ellipsis;
 }
 
+/*
+ * Changes Highlight
+ */
+
 .d2h-del {
     background-color: #fee8e9;
     border-color: #e9aeae;
@@ -219,43 +215,6 @@
     border-color: #d5e4f2;
 }
 
-.d2h-file-list-wrapper {
-    margin-bottom: 10px;
-    padding: 0 10px;
-}
-
-.d2h-file-list-wrapper a {
-    text-decoration: none;
-    color: #3572b0;
-}
-
-.d2h-file-list-wrapper a:visited {
-    color: #3572b0;
-}
-
-.d2h-file-list-header {
-    font-weight: bold;
-    float: left;
-}
-
-.d2h-file-list-line {
-    text-align: left;
-    font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.d2h-file-list-line .d2h-file-name {
-    line-height: 21px;
-}
-
-.d2h-file-list {
-    display: block;
-}
-
-.d2h-clear {
-    display: block;
-    clear: both;
-}
-
 .d2h-del.d2h-change, .d2h-ins.d2h-change {
     background-color: #ffc;
 }
@@ -272,10 +231,46 @@ ins.d2h-change, del.d2h-change {
     background-color: #ded;
 }
 
+/*
+ * File Summary List
+ */
+
+.d2h-file-list-wrapper {
+    margin-bottom: 10px;
+}
+
+.d2h-file-list-wrapper a {
+    text-decoration: none;
+    color: #3572b0;
+}
+
+.d2h-file-list-wrapper a:visited {
+    color: #3572b0;
+}
+
+.d2h-file-list-header {
+    text-align: left;
+}
+
+.d2h-file-list-title {
+    font-weight: bold;
+}
+
+.d2h-file-list-line {
+    text-align: left;
+    font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.d2h-file-list-line .d2h-file-name {
+    line-height: 21px;
+}
+
+.d2h-file-list {
+    display: block;
+}
+
 .d2h-file-switch {
     display: none;
-    float: left;
     font-size: 10px;
     cursor: pointer;
-    margin-top: 3px;
 }