react-diff-view/src/styles/index.css

A git diff component to consume the git unified diff output.

:root {
    --diff-background-color: initial;
    --diff-text-color: initial;
    --diff-font-family: Consolas, Courier, monospace;
    --diff-selection-background-color: #b3d7ff;
    --diff-selection-text-color: var(--diff-text-color);;
    --diff-gutter-insert-background-color: #d6fedb;
    --diff-gutter-insert-text-color: var(--diff-text-color);
    --diff-gutter-delete-background-color: #fadde0;
    --diff-gutter-delete-text-color: var(--diff-text-color);
    --diff-gutter-selected-background-color: #fffce0;
    --diff-gutter-selected-text-color: var(--diff-text-color);
    --diff-code-insert-background-color: #eaffee;
    --diff-code-insert-text-color: var(--diff-text-color);
    --diff-code-delete-background-color: #fdeff0;
    --diff-code-delete-text-color: var(--diff-text-color);
    --diff-code-insert-edit-background-color: #c0dc91;
    --diff-code-insert-edit-text-color: var(--diff-text-color);
    --diff-code-delete-edit-background-color: #f39ea2;
    --diff-code-delete-edit-text-color: var(--diff-text-color);
    --diff-code-selected-background-color: #fffce0;
    --diff-code-selected-text-color: var(--diff-text-color);
    --diff-omit-gutter-line-color: #cb2a1d;
}

.diff {
    background-color: var(--diff-background-color);
    color: var(--diff-text-color);
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

.diff::selection {
    background-color: var(--diff-selection-background-color);
    color: var(--diff-selection-text-color);
}

.diff td {
    vertical-align: top;
    padding-top: 0;
    padding-bottom: 0;
}

.diff-line {
    line-height: 1.5;
    font-family: var(--diff-font-family);
}

.diff-gutter > a {
    color: inherit;
    display: block;
}

.diff-gutter {
    padding: 0 1ch;
    text-align: right;
    cursor: pointer;
    user-select: none;
}

.diff-gutter-insert {
    background-color: var(--diff-gutter-insert-background-color);
    color: var(--diff-gutter-insert-text-color);
}

.diff-gutter-delete {
    background-color: var(--diff-gutter-delete-background-color);
    color: var(--diff-gutter-delete-text-color);
}

.diff-gutter-omit {
    cursor: default;
}

.diff-gutter-selected {
    background-color: var(--diff-gutter-selected-background-color);
    color: var(--diff-gutter-selected-text-color);
}

.diff-code {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    padding: 0 0 0 0.5em;
}

.diff-code-edit {
    color: inherit;
}

.diff-code-insert {
    background-color: var(--diff-code-insert-background-color);
    color: var(--diff-code-insert-text-color);
}

.diff-code-insert .diff-code-edit {
    background-color: var(--diff-code-insert-edit-background-color);
    color: var(--diff-code-insert-edit-text-color);
}

.diff-code-delete {
    background-color: var(--diff-code-delete-background-color);
    color: var(--diff-code-delete-text-color);
}

.diff-code-delete .diff-code-edit {
    background-color: var(--diff-code-delete-edit-background-color);
    color: var(--diff-code-delete-edit-text-color);
}

.diff-code-selected {
    background-color: var(--diff-code-selected-background-color);
    color: var(--diff-code-selected-text-color);
}

.diff-widget-content {
    vertical-align: top;
}

.diff-gutter-col {
    width: 7ch;
}

.diff-gutter-omit {
    height: 0;
}

.diff-gutter-omit:before {
    content: ' ';
    display: block;
    white-space: pre;
    width: 2px;
    height: 100%;
    margin-left: 4.6ch;
    overflow: hidden;
    background-color: var(--diff-omit-gutter-line-color);
}

.diff-decoration {
    line-height: 1.5;
    user-select: none;
}

.diff-decoration-content {
    font-family: var(--diff-font-family);
    padding: 0;
}