From c93eefb42b535f7a3917149a183f05a8b551ce26 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 26 Apr 2024 21:37:21 +0200 Subject: [PATCH] Diff color enhancements, add line number background (#30670) 1. Bring back the background on line numbers. This feature was lost a long time ago. Screenshot 2024-04-24 at 01 36 09 Screenshot 2024-04-24 at 01 22 47 Screenshot 2024-04-24 at 02 13 18 Screenshot 2024-04-24 at 01 23 21 2. Expanded lines background is now full-line, including line numbers: Screenshot 2024-04-24 at 01 37 12 3. Sort affected colors alphabetically in the CSS Fixes #14603 --- templates/repo/diff/blob_excerpt.tmpl | 22 +++++++-------- web_src/css/repo.css | 28 ++++++++++++++----- ...eme-gitea-dark-protanopia-deuteranopia.css | 11 ++++---- web_src/css/themes/theme-gitea-dark.css | 16 ++++++----- ...me-gitea-light-protanopia-deuteranopia.css | 7 +++-- web_src/css/themes/theme-gitea-light.css | 14 ++++++---- 6 files changed, 59 insertions(+), 39 deletions(-) diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl index 8312b5d913..a80abe263f 100644 --- a/templates/repo/diff/blob_excerpt.tmpl +++ b/templates/repo/diff/blob_excerpt.tmpl @@ -1,6 +1,6 @@ {{if $.IsSplitStyle}} {{range $k, $line := $.section.Lines}} - + {{if eq .GetType 4}}
@@ -26,17 +26,17 @@ {{else}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}} - {{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} - {{if $line.LeftIdx}}{{end}} - {{/* + {{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if $line.LeftIdx}}{{end}} + {{/* */}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/* */}}{{/* */}}{{end}}{{/* */}} - {{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} - {{if $line.RightIdx}}{{end}} - {{/* + {{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if $line.RightIdx}}{{end}} + {{/* */}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/* */}}{{/* */}}{{end}}{{/* @@ -46,7 +46,7 @@ {{end}} {{else}} {{range $k, $line := $.section.Lines}} - + {{if eq .GetType 4}}
@@ -72,9 +72,9 @@ {{end}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}} - {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} - - {{$inlineDiff.Content}} + {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} + + {{$inlineDiff.Content}} {{end}} {{end}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 62a72abaf9..4de994112f 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2377,7 +2377,7 @@ tbody.commit-list { .tag-code, .tag-code td, -.tag-code .blob-excerpt { +.tag-code.line-expanded { background-color: var(--color-box-body-highlight); vertical-align: middle; } @@ -2393,8 +2393,8 @@ tbody.commit-list { padding-top: 0 !important; } -.blob-excerpt { - background-color: var(--color-secondary-alpha-30); +.line-expanded { + background-color: var(--color-secondary-alpha-20); } .issue-keyword { @@ -2553,11 +2553,9 @@ tbody.commit-list { .code-diff-unified .add-code, .code-diff-unified .add-code td, -.code-diff-split .add-code .lines-num-new, .code-diff-split .add-code .lines-type-marker-new, .code-diff-split .add-code .lines-escape-new, .code-diff-split .add-code .lines-code-new, -.code-diff-split .del-code .add-code.lines-num-new, .code-diff-split .del-code .add-code.lines-type-marker-new, .code-diff-split .del-code .add-code.lines-escape-new, .code-diff-split .del-code .add-code.lines-code-new { @@ -2565,17 +2563,33 @@ tbody.commit-list { border-color: var(--color-diff-added-row-border); } -.code-diff-split .del-code .lines-num-new, .code-diff-split .del-code .lines-type-marker-new, .code-diff-split .del-code .lines-code-new, .code-diff-split .del-code .lines-escape-new, -.code-diff-split .add-code .lines-num-old, .code-diff-split .add-code .lines-escape-old, .code-diff-split .add-code .lines-type-marker-old, .code-diff-split .add-code .lines-code-old { background: var(--color-diff-inactive); } +.code-diff-split .add-code .lines-num.lines-num-old, +.code-diff-split .del-code .lines-num.lines-num-new { + background: var(--color-diff-inactive); +} + +.code-diff-unified .del-code .lines-num, +.code-diff-split .del-code .lines-num { + background: var(--color-diff-removed-linenum-bg); + color: var(--color-text); +} + +.code-diff-unified .add-code .lines-num, +.code-diff-split .add-code .lines-num, +.code-diff-split .del-code .add-code.lines-num { + background: var(--color-diff-added-linenum-bg); + color: var(--color-text); +} + .code-diff-split tbody tr td:nth-child(5), .code-diff-split tbody tr td.add-comment-right { border-left: 1px solid var(--color-secondary); diff --git a/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css b/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css index 681aa3b539..c1a6edaf35 100644 --- a/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css +++ b/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css @@ -3,9 +3,10 @@ /* red/green colorblind-friendly colors */ /* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */ :root { - --color-diff-added-word-bg: #388bfd66; - --color-diff-added-row-bg: #388bfd26; - - --color-diff-removed-word-bg: #db6d2866; - --color-diff-removed-row-bg: #db6d2826; + --color-diff-added-linenum-bg: #1979fd46; + --color-diff-added-row-bg: #1979fd20; + --color-diff-added-word-bg: #1979fd66; + --color-diff-removed-linenum-bg: #c8622146; + --color-diff-removed-row-bg: #c8622120; + --color-diff-removed-word-bg: #c8622166; } diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 7bf2c982c6..ad9ab5a8c2 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -143,14 +143,16 @@ --color-grey-light: #818f9e; --color-gold: #b1983b; --color-white: #ffffff; - --color-diff-removed-word-bg: #6f3333; - --color-diff-added-word-bg: #3c653c; - --color-diff-removed-row-bg: #3c2626; - --color-diff-moved-row-bg: #818044; - --color-diff-added-row-bg: #283e2d; - --color-diff-removed-row-border: #634343; - --color-diff-moved-row-border: #bcca6f; + --color-diff-added-linenum-bg: #274227; + --color-diff-added-row-bg: #203224; --color-diff-added-row-border: #314a37; + --color-diff-added-word-bg: #3c653c; + --color-diff-moved-row-bg: #818044; + --color-diff-moved-row-border: #bcca6f; + --color-diff-removed-linenum-bg: #482121; + --color-diff-removed-row-bg: #301e1e; + --color-diff-removed-row-border: #634343; + --color-diff-removed-word-bg: #6f3333; --color-diff-inactive: #22282d; --color-error-border: #a04141; --color-error-bg: #522; diff --git a/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css b/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css index 7e03d90f5c..f42fa1db2c 100644 --- a/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css +++ b/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css @@ -3,9 +3,10 @@ /* red/green colorblind-friendly colors */ /* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */ :root { - --color-diff-added-word-bg: #54aeff66; + --color-diff-added-linenum-bg: #54aeff4d; --color-diff-added-row-bg: #ddf4ff80; - - --color-diff-removed-word-bg: #ffb77c80; + --color-diff-added-word-bg: #54aeff66; + --color-diff-removed-linenum-bg: #ffb77c4d; --color-diff-removed-row-bg: #fff1e580; + --color-diff-removed-word-bg: #ffb77c80; } diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index dfccd37647..8d4aa6df93 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -143,14 +143,16 @@ --color-grey-light: #7c838a; --color-gold: #a1882b; --color-white: #ffffff; - --color-diff-removed-word-bg: #fdb8c0; - --color-diff-added-word-bg: #acf2bd; - --color-diff-removed-row-bg: #ffeef0; - --color-diff-moved-row-bg: #f1f8d1; + --color-diff-added-linenum-bg: #d1f8d9; --color-diff-added-row-bg: #e6ffed; - --color-diff-removed-row-border: #f1c0c0; - --color-diff-moved-row-border: #d0e27f; --color-diff-added-row-border: #e6ffed; + --color-diff-added-word-bg: #acf2bd; + --color-diff-moved-row-bg: #f1f8d1; + --color-diff-moved-row-border: #d0e27f; + --color-diff-removed-linenum-bg: #ffcecb; + --color-diff-removed-row-bg: #ffeef0; + --color-diff-removed-row-border: #f1c0c0; + --color-diff-removed-word-bg: #fdb8c0; --color-diff-inactive: #f0f2f4; --color-error-border: #e0b4b4; --color-error-bg: #fff6f6;