codediff.css

.diff {
  box-sizing: border-box;
}

div.diff {
  max-width: 100%;
  display: table;
}

table.diff {
  width: 100%;
  border-spacing: 0;
}

td.code {
  /* this is the max width of each column of code. */
  /* for table cells, `width` behaves more like `max-width`. */
  width: 61ch;
  white-space: pre-wrap;
  word-wrap: break-word;
}

table.diff td.code {
  word-break: break-all;
}
table.diff.word-wrap td.code {
  word-break: normal;
}

table.diff td {
  vertical-align: top;
}

/* Line numbers with thin vertical bars to indicate wrapped lines. */
.line-no {
  color: #999;
  background-color: #f7f7f7;
}
.line-no:first-child {
  background-image:
      linear-gradient(to left, #f7f7f7, #f7f7f7 3px, transparent, transparent 6px, #f7f7f7 6px),
      linear-gradient(#f7f7f7, #f7f7f7 1.5em, #aaa 1.5em);
}
.line-no:last-child {
  background-image:
      linear-gradient(to right, #f7f7f7, #f7f7f7 3px, transparent, transparent 6px, #f7f7f7 6px),
      linear-gradient(#f7f7f7, #f7f7f7 1.5em, #aaa 1.5em);
}

table.diff .line-no:first-child {
  border-right: 1px solid #ddd;
  text-align: right;
}
table.diff .line-no:last-child {
  border-left: 1px solid #ddd;
  text-align: left;
}
table.diff td:nth-child(2) {
  border-right: 1px solid #ddd;
}
table.diff tr.skip-row td {
  border-left: none;
  border-right: none;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 0.5em;
}

.line-no, .code {
  padding: 2px;
  height: 1.11em;
  font-family: monospace;
}
.diff .skip {
  text-align: center;
  background: white;
  color: #999;
}
.arrows-left {
  float: left;
}
.arrows-right {
  float: right;
}
.expand-up + .expand-down {
  margin-left: 0.25em;
}

.hunk-header {
  margin-left: 2em;
  color: #777;
}
span.skip {
  cursor: pointer;
}

.diff .delete, .before.replace {
  background-color: #fee;
}
.diff .insert, .after.replace {
  background-color: #efe;
}

.before .char-replace, .before .char-delete {
  background-color: #fcc;
}

.after .char-replace, .after .char-insert {
  background-color: #cfc;
}

/* Single column selection */
.selecting-left  td,
.selecting-left  td *,
.selecting-right td,
.selecting-right td *
{
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.selecting-left  td.line-no::selection,
.selecting-left  td.line-no *::selection,
.selecting-right td.line-no::selection,
.selecting-right td.line-no *::selection,
.selecting-left  td.after::selection,
.selecting-left  td.after *::selection,
.selecting-right td.before::selection,
.selecting-right td.before *::selection
{
  background: transparent;
}

.selecting-left  td.line-no::-moz-selection,
.selecting-left  td.line-no *::-moz-selection,
.selecting-right td.line-no::-moz-selection,
.selecting-right td.line-no *::-moz-selection,
.selecting-left  td.after::-moz-selection,
.selecting-left  td.after *::-moz-selection,
.selecting-right td.before::-moz-selection,
.selecting-right td.before *::-moz-selection
{
  background: transparent;
}

.selecting-left  td.before,
.selecting-left  td.before *,
.selecting-right td.after,
.selecting-right td.after * {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}