Help:Diff/styles.css

.diff-example-container {
  border: 1px solid #a2a9b1;
  padding: 1.8em;
}
@media (max-width: calc(639px)) {
  .diff-example-container {
    padding: 0.8em;
  }
}
.diff {
  border-spacing: 4px;
  margin: 0;
  table-layout: auto; /*fixes column widths in edit preview*/
}
.diff-type-table {}
table.diff-key { /* For styling colour key (not included in every translation) */
  color: var(--color-base, #202122);
  background-color: transparent;
  border: 1px solid var(--border-color-base, #a2a9b1);
  border-collapse: separate;
  width: auto;
  margin: 1em 0;
}
@media (max-width: calc(639px)) {
  table.diff-key {
    border: none;
  }
}
p + table.diff-key {
  margin-top: -0.5em;
}
table.diff-key th {
  background-color: var(--background-color-neutral, #eaecf0);
  border: 1px solid var(--border-color-base, #a2a9b1);
  text-align: center;
  padding: 0.2em 0.4em;
}
table.diff-key caption {
  font-weight: bold;
}
.diff-side-deleted {}
.diff-side-added {}
.diff td {
  padding: 0.33em 0.5em;
}
.diff td div {
  overflow-wrap: break-word;
}
.diff-title {
  vertical-align: top;
}
.diff-otitle, .diff-ntitle {
  text-align: center;
}
span.comment {
  font-style: italic;
  overflow-wrap: break-word;
  word-break: break-word;
}
.comment--without-parentheses::before, .mw-diff-edit::before {
  content: '(';
}
.comment--without-parentheses::after, .mw-diff-edit::after	 {
  content: ')';
}
.diff-lineno {
  font-weight: bold;
  user-select: none;
}
.minoredit {
  font-weight: bold;
}
.mw-rollback-link::after {
  content: ']';
}
.mw-rollback-link::before {
  content: '[';
}
.diff td.diff-marker {
  padding: 0.25em;
  text-align: right;
  font-weight: bold;
  font-size: 1.25em;
  line-height: 1.2;
  width: 2%;
}
table.diff-key td.diff-marker {
  width: auto;
}
.diff td.diff-marker > a {
  color:var(--color-base, #202122) !important /* Needed for 'moved' arrows, as used in colour key as actual links, else they show up as light blue */
}
.diff-editfont-monospace .diff-addedline, .diff-editfont-monospace .diff-deletedline, .diff-editfont-monospace .diff-context {
  font-family: monospace;
}
.diff-context, .diff-deletedline, .diff-addedline {
  vertical-align: top;
  line-height: 1.6;
  border-style: solid;
  border-width: 1px 1px 1px 4px;
  border-radius: 0.33em;
  font-size: 0.8125rem;
  white-space: break-spaces;
  width: 48%;
}
table.diff-key .diff-context, table.diff-key .diff-deletedline, table.diff-key .diff-addedline {
  width: auto;
}
.diff-context {
  background: var(--background-color-neutral-subtle, #f8f9fa);
  border-top-color: var(--border-color-muted, #dadde3);
  border-right-color: var(--border-color-muted, #dadde3);
  border-bottom-color: var(--border-color-muted, #dadde3);
  border-left-color: var(--border-color-muted, #dadde3);
}
.diff-deletedline {
  border-top-color: var(--background-color-content-removed, #ffe49c);
  border-right-color: var(--background-color-content-removed, #ffe49c);
  border-bottom-color: var(--background-color-content-removed, #ffe49c);
  border-left-color: var(--background-color-content-removed, #ffe49c);
}
.diff-addedline {
  border-top-color: var(--background-color-content-added, #a3d3ff);
  border-right-color: var(--background-color-content-added, #a3d3ff);
  border-bottom-color: var(--background-color-content-added, #a3d3ff);
  border-left-color: var(--background-color-content-added, #a3d3ff);
}
.diffchange {
  font-weight:bold;
}
.diff-deletedline .diffchange, .diff-addedline .diffchange {
  padding: 0.25em 0;
  border-radius: 0.33em;
}
.diff-deletedline .diffchange {
  background: var(--background-color-content-removed, #ffe49c);
}
.diff-addedline .diffchange {
  background: var(--background-color-content-added, #a3d3ff);
}