Commit 112f9710 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '26186-diff-view-plus-and-minus-signs-as-part-of-line-number' into 'master'

Color + and - signs in diffs to increase code legibility

Closes #26186

See merge request !8768
parents abab4250 549fb38c
...@@ -13,6 +13,8 @@ $dark-main-bg: #1d1f21; ...@@ -13,6 +13,8 @@ $dark-main-bg: #1d1f21;
$dark-main-color: #1d1f21; $dark-main-color: #1d1f21;
$dark-line-color: #c5c8c6; $dark-line-color: #c5c8c6;
$dark-line-num-color: rgba(255, 255, 255, 0.3); $dark-line-num-color: rgba(255, 255, 255, 0.3);
$dark-line-num-color-new: #627165;
$dark-line-num-color-old: #806565;
$dark-diff-not-empty-bg: #557; $dark-diff-not-empty-bg: #557;
$dark-highlight-bg: #ffe792; $dark-highlight-bg: #ffe792;
$dark-highlight-color: $black; $dark-highlight-color: $black;
...@@ -89,7 +91,6 @@ $dark-il: #de935f; ...@@ -89,7 +91,6 @@ $dark-il: #de935f;
.diff-line-num, .diff-line-num,
.diff-line-num a { .diff-line-num a {
color: $dark-main-color;
color: $dark-line-num-color; color: $dark-line-num-color;
} }
...@@ -121,11 +122,21 @@ $dark-il: #de935f; ...@@ -121,11 +122,21 @@ $dark-il: #de935f;
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background($dark-new-bg, $dark-new-idiff, $dark-border); @include diff_background($dark-new-bg, $dark-new-idiff, $dark-border);
&::before,
a {
color: $dark-line-num-color-new;
}
} }
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background($dark-old-bg, $dark-old-idiff, $dark-border); @include diff_background($dark-old-bg, $dark-old-idiff, $dark-border);
&::before,
a {
color: $dark-line-num-color-old;
}
} }
.line_content.match { .line_content.match {
......
...@@ -7,6 +7,8 @@ $monokai-bg: #272822; ...@@ -7,6 +7,8 @@ $monokai-bg: #272822;
$monokai-border: #555; $monokai-border: #555;
$monokai-text-color: #f8f8f2; $monokai-text-color: #f8f8f2;
$monokai-line-num-color: rgba(255, 255, 255, 0.3); $monokai-line-num-color: rgba(255, 255, 255, 0.3);
$monokai-line-num-color-new: #707565;
$monokai-line-num-color-old: #7e736f;
$monokai-line-empty-bg: #49483e; $monokai-line-empty-bg: #49483e;
$monokai-line-empty-border: darken($monokai-line-empty-bg, 15%); $monokai-line-empty-border: darken($monokai-line-empty-bg, 15%);
$monokai-diff-border: #808080; $monokai-diff-border: #808080;
...@@ -120,11 +122,21 @@ $monokai-gi: #a6e22e; ...@@ -120,11 +122,21 @@ $monokai-gi: #a6e22e;
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border); @include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
&::before,
a {
color: $monokai-line-num-color-new;
}
} }
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border); @include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
&::before,
a {
color: $monokai-line-num-color-old;
}
} }
.line_content.match { .line_content.match {
......
...@@ -13,6 +13,8 @@ $solarized-dark-pre-color: #93a1a1; ...@@ -13,6 +13,8 @@ $solarized-dark-pre-color: #93a1a1;
$solarized-dark-pre-border: #113b46; $solarized-dark-pre-border: #113b46;
$solarized-dark-line-bg: #002b36; $solarized-dark-line-bg: #002b36;
$solarized-dark-line-color: rgba(255, 255, 255, 0.3); $solarized-dark-line-color: rgba(255, 255, 255, 0.3);
$solarized-dark-line-color-new: #5a766c;
$solarized-dark-line-color-old: #7a6c71;
$solarized-dark-highlight: #094554; $solarized-dark-highlight: #094554;
$solarized-dark-hll-bg: #174652; $solarized-dark-hll-bg: #174652;
$solarized-dark-c: #586e75; $solarized-dark-c: #586e75;
...@@ -124,11 +126,21 @@ $solarized-dark-il: #2aa198; ...@@ -124,11 +126,21 @@ $solarized-dark-il: #2aa198;
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border); @include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
&::before,
a {
color: $solarized-dark-line-color-new;
}
} }
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border); @include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
&::before,
a {
color: $solarized-dark-line-color-old;
}
} }
.line_content.match { .line_content.match {
......
...@@ -13,6 +13,9 @@ $solarized-light-pre-bg: #002b36; ...@@ -13,6 +13,9 @@ $solarized-light-pre-bg: #002b36;
$solarized-light-pre-bg: #fdf6e3; $solarized-light-pre-bg: #fdf6e3;
$solarized-light-pre-color: #586e75; $solarized-light-pre-color: #586e75;
$solarized-light-line-bg: #fdf6e3; $solarized-light-line-bg: #fdf6e3;
$solarized-light-line-color: rgba(0, 0, 0, 0.3);
$solarized-light-line-color-new: #a1a080;
$solarized-light-line-color-old: #ad9186;
$solarized-light-highlight: #eee8d5; $solarized-light-highlight: #eee8d5;
$solarized-light-hll-bg: #ddd8c5; $solarized-light-hll-bg: #ddd8c5;
$solarized-light-c: #93a1a1; $solarized-light-c: #93a1a1;
...@@ -98,7 +101,7 @@ $solarized-light-il: #2aa198; ...@@ -98,7 +101,7 @@ $solarized-light-il: #2aa198;
.diff-line-num, .diff-line-num,
.diff-line-num a { .diff-line-num a {
color: $black-transparent; color: $solarized-light-line-color;
} }
// Code itself // Code itself
...@@ -130,11 +133,21 @@ $solarized-light-il: #2aa198; ...@@ -130,11 +133,21 @@ $solarized-light-il: #2aa198;
.line_content.new { .line_content.new {
@include diff_background($solarized-light-new-bg, @include diff_background($solarized-light-new-bg,
$solarized-light-new-idiff, $solarized-light-border); $solarized-light-new-idiff, $solarized-light-border);
&::before,
a {
color: $solarized-light-line-color-new;
}
} }
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border); @include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
&::before,
a {
color: $solarized-light-line-color-old;
}
} }
.line_content.match { .line_content.match {
......
...@@ -108,11 +108,19 @@ $white-gc-bg: #eaf2f5; ...@@ -108,11 +108,19 @@ $white-gc-bg: #eaf2f5;
&.old { &.old {
background-color: $line-number-old; background-color: $line-number-old;
border-color: $line-removed-dark; border-color: $line-removed-dark;
a {
color: scale-color($line-number-old,$red: -30%, $green: -30%, $blue: -30%);
}
} }
&.new { &.new {
background-color: $line-number-new; background-color: $line-number-new;
border-color: $line-added-dark; border-color: $line-added-dark;
a {
color: scale-color($line-number-new,$red: -30%, $green: -30%, $blue: -30%);
}
} }
&.hll:not(.empty-cell) { &.hll:not(.empty-cell) {
...@@ -125,6 +133,10 @@ $white-gc-bg: #eaf2f5; ...@@ -125,6 +133,10 @@ $white-gc-bg: #eaf2f5;
&.old { &.old {
background-color: $line-removed; background-color: $line-removed;
&::before {
color: scale-color($line-number-old,$red: -30%, $green: -30%, $blue: -30%);
}
span.idiff { span.idiff {
background-color: $line-removed-dark; background-color: $line-removed-dark;
} }
...@@ -133,6 +145,10 @@ $white-gc-bg: #eaf2f5; ...@@ -133,6 +145,10 @@ $white-gc-bg: #eaf2f5;
&.new { &.new {
background-color: $line-added; background-color: $line-added;
&::before {
color: scale-color($line-number-new,$red: -30%, $green: -30%, $blue: -30%);
}
span.idiff { span.idiff {
background-color: $line-added-dark; background-color: $line-added-dark;
} }
......
---
title: Color + and - signs in diffs to increase code legibility
merge_request:
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment