diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css index b3cacb1..eb0828e 100644 --- a/src/ui/css/diff2html.css +++ b/src/ui/css/diff2html.css @@ -74,11 +74,6 @@ font-size: 13px; } -.d2h-diff-tbody > tr > td { - height: 20px; - line-height: 1; -} - .d2h-files-diff { display: block; width: 100%; @@ -86,7 +81,6 @@ } .d2h-file-diff { - overflow-x: scroll; overflow-y: hidden; } @@ -102,13 +96,15 @@ .d2h-code-line { display: inline-block; white-space: nowrap; - padding: 0 10px; + /* Compensate for the absolute positioning of the line numbers */ + padding: 0 8em; } .d2h-code-side-line { display: inline-block; white-space: nowrap; - padding: 0 10px; + /* Compensate for the absolute positioning of the line numbers */ + padding: 0 4.5em; } .d2h-code-line del, @@ -149,26 +145,27 @@ .line-num1 { box-sizing: border-box; float: left; - width: 40px; + width: 3.5em; overflow: hidden; text-overflow: ellipsis; - padding-left: 3px; + padding: 0 0.5em 0 0.5em; } .line-num2 { box-sizing: border-box; float: right; - width: 40px; + width: 3.5em; overflow: hidden; text-overflow: ellipsis; - padding-left: 3px; + padding: 0 0.5em 0 0.5em; } .d2h-code-linenumber { box-sizing: border-box; - width: 86px; - padding-left: 2px; - padding-right: 2px; + width: 7.5em; + /* Keep the numbers fixed on line contents scroll */ + position: absolute; + display: inline-block; background-color: #fff; color: rgba(0, 0, 0, 0.3); text-align: right; @@ -177,11 +174,16 @@ cursor: pointer; } +.d2h-code-linenumber:after { + content: '\200b'; +} + .d2h-code-side-linenumber { + /* Keep the numbers fixed on line contents scroll */ + position: absolute; + display: inline-block; box-sizing: border-box; - width: 56px; - padding-left: 5px; - padding-right: 5px; + width: 4em; background-color: #fff; color: rgba(0, 0, 0, 0.3); text-align: right; @@ -192,6 +194,10 @@ text-overflow: ellipsis; } +.d2h-code-side-linenumber:after { + content: '\200b'; +} + .d2h-code-side-emptyplaceholder, .d2h-emptyplaceholder { background-color: #f1f1f1;