Replace code fold icons with octicons (#12222)

- replace font-awesome icons with octicons
- clean up js and css surrounding the code expansion and file folding
- fix hover color on arc-green
- tweak diff line number colors

Co-authored-by: zeripath <art27@cantab.net>

8 files changed, 144 insertions, 103 deletions

diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl
index f1fb9a0557..604c814b8e 100644
--- a/templates/repo/diff/blob_excerpt.tmpl
+++ b/templates/repo/diff/blob_excerpt.tmpl
@@ -1,50 +1,62 @@
 {{if $.IsSplitStyle}}
-  {{range $k, $line := $.section.Lines}}
-  <tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
-    {{if eq .GetType 4}}
-    <td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
-      {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
-      <i class="ui blob-excerpt fa fa-caret-down" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down" data-anchor="{{$.Anchor}}"></i>
-      {{end}}
-      {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
-      <i class="ui blob-excerpt fa fa-caret-up" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up" data-anchor="{{$.Anchor}}"></i>
-      {{end}}
-      {{if eq $line.GetExpandDirection 2}}
-      <span class="ui blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=" data-anchor="{{$.Anchor}}">{{svg "octicon-fold" 16}}</span>
-      {{end}}
-    </td>
-    <td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
-    {{else}}
-    <td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $.fileName}}L{{$line.LeftIdx}}{{end}}"></span></td>
-    <td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
-    <td class="blob-excerpt lines-code lines-code-old halfwidth"><span class="mono wrap">{{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
-    <td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $.fileName}}R{{$line.RightIdx}}{{end}}"></span></td>
-    <td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
-    <td class="blob-excerpt lines-code lines-code-new halfwidth"><span class="mono wrap">{{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
-    {{end}}
-  </tr>
-  {{end}}
+	{{range $k, $line := $.section.Lines}}
+	<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
+		{{if eq .GetType 4}}
+			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
+				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
+					<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down" data-anchor="{{$.Anchor}}">
+						{{svg "octicon-fold-down" 16}}
+					</a>
+				{{end}}
+				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
+					<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up" data-anchor="{{$.Anchor}}">
+						{{svg "octicon-fold-up" 16}}
+					</a>
+				{{end}}
+				{{if eq $line.GetExpandDirection 2}}
+					<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=" data-anchor="{{$.Anchor}}">
+						{{svg "octicon-fold" 16}}
+					</a>
+				{{end}}
+			</td>
+			<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
+		{{else}}
+			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $.fileName}}L{{$line.LeftIdx}}{{end}}"></span></td>
+			<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
+			<td class="blob-excerpt lines-code lines-code-old halfwidth"><span class="mono wrap">{{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
+			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $.fileName}}R{{$line.RightIdx}}{{end}}"></span></td>
+			<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
+			<td class="blob-excerpt lines-code lines-code-new halfwidth"><span class="mono wrap">{{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
+		{{end}}
+	</tr>
+	{{end}}
 {{else}}
-  {{range $k, $line := $.section.Lines}}
-  <tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
-    {{if eq .GetType 4}}
-    <td colspan="2" class="lines-num">
-      {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
-      <i class="ui blob-excerpt fa fa-caret-up" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up" data-anchor="{{$.Anchor}}"></i>
-      {{end}}
-      {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
-      <i class="ui blob-excerpt fa fa-caret-down" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down" data-anchor="{{$.Anchor}}"></i>
-      {{end}}
-      {{if eq $line.GetExpandDirection 2}}
-      <span class="ui blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=" data-anchor="{{$.Anchor}}">{{svg "octicon-fold" 16}}</span>
-      {{end}}
-    </td>
-    {{else}}
-    <td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $.fileName}}L{{$line.LeftIdx}}{{end}}"></span></td>
-    <td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $.fileName}}R{{$line.RightIdx}}{{end}}"></span></td>
-    {{end}}
-    <td class="blob-excerpt lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
-    <td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
-  </tr>
-  {{end}}
+	{{range $k, $line := $.section.Lines}}
+	<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
+		{{if eq .GetType 4}}
+			<td colspan="2" class="lines-num">
+				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
+					<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down" data-anchor="{{$.Anchor}}">
+						{{svg "octicon-fold-down" 16}}
+					</a>
+				{{end}}
+				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
+					<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up" data-anchor="{{$.Anchor}}">
+						{{svg "octicon-fold-up" 16}}
+					</a>
+				{{end}}
+				{{if eq $line.GetExpandDirection 2}}
+					<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=" data-anchor="{{$.Anchor}}">
+						{{svg "octicon-fold" 16}}
+					</a>
+				{{end}}
+			</td>
+		{{else}}
+			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $.fileName}}L{{$line.LeftIdx}}{{end}}"></span></td>
+			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $.fileName}}R{{$line.RightIdx}}{{end}}"></span></td>
+		{{end}}
+		<td class="blob-excerpt lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
+		<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
+	</tr>
+	{{end}}
 {{end}}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index adb9184131..7338c1ee67 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -18,8 +18,7 @@
 {{else}}
 	<div>
 		<div class="diff-detail-box diff-box sticky">
-			<i class="fa fa-retweet"></i>
-			{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
+			{{svg "octicon-diff" 16}} {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
 			<div class="ui right">
 				{{if .PageIsPullFiles}}
 					{{template "repo/diff/whitespace_dropdown" .}}
@@ -88,7 +87,9 @@
 							{{$isImage = (call $.IsImageFileInHead $file.Name)}}
 						{{end}}
 						{{if or (not $file.IsBin) $isImage}}
-						<i class="ui fold-code grey fa fa-chevron-down"></i>
+						<a role="button" class="fold-file">
+							{{svg "octicon-chevron-down" 18}}
+						</a>
 						{{end}}
 						<div class="diff-counter count">
 							{{if $file.IsBin}}
@@ -126,13 +127,19 @@
 															{{if eq .GetType 4}}
 																<td class="lines-num lines-num-old">
 																	{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
-																		<i class="ui blob-excerpt fa fa-caret-down" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}"></i>
+																		<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
+																			{{svg "octicon-fold-down" 16}}
+																		</a>
 																	{{end}}
 																	{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
-																		<i class="ui blob-excerpt fa fa-caret-up" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}"></i>
+																		<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
+																			{{svg "octicon-fold-up" 16}}
+																		</a>
 																	{{end}}
 																	{{if eq $line.GetExpandDirection 2}}
-																		<span class="ui blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">{{svg "octicon-fold" 16}}</span>
+																		<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
+																			{{svg "octicon-fold" 16}}
+																		</a>
 																	{{end}}
 																</td>
 																<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index 040545069a..0f561a8a84 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -5,13 +5,19 @@
 			{{if eq .GetType 4}}
 				<td colspan="2" class="lines-num">
 				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
-					<i class="ui blob-excerpt fa fa-caret-down" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}"></i>
+					<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
+						{{svg "octicon-fold-down" 16}}
+					</a>
 				{{end}}
 				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
-					<i class="ui blob-excerpt fa fa-caret-up" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}"></i>
+					<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
+						{{svg "octicon-fold-up" 16}}
+					</a>
 				{{end}}
 				{{if eq $line.GetExpandDirection 2}}
-					<span class="ui blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">{{svg "octicon-fold" 16}}</span>
+					<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
+						{{svg "octicon-fold" 16}}
+					</a>
 				{{end}}
 				</td>
 			{{else}}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index de3522983a..db6c665ecf 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -19,7 +19,7 @@ import initTableSort from './features/tablesort.js';
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {createCodeEditor} from './features/codeeditor.js';
-import {svgs} from './svg.js';
+import {svg, svgs} from './svg.js';
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
@@ -2017,22 +2017,17 @@ function initCodeView() {
       }
     }).trigger('hashchange');
   }
-  $('.fold-code').on('click', ({target}) => {
-    const box = target.closest('.file-content');
+  $(document).on('click', '.fold-file', ({currentTarget}) => {
+    const box = currentTarget.closest('.file-content');
     const folded = box.dataset.folded !== 'true';
-    target.classList.add(`fa-chevron-${folded ? 'right' : 'down'}`);
-    target.classList.remove(`fa-chevron-${folded ? 'down' : 'right'}`);
+    currentTarget.innerHTML = svg(`octicon-chevron-${folded ? 'right' : 'down'}`, 18);
     box.dataset.folded = String(folded);
   });
-  function insertBlobExcerpt(e) {
-    const $blob = $(e.currentTarget);
-    const $row = $blob.parent().parent();
-    $.get(`${$blob.data('url')}?${$blob.data('query')}&anchor=${$blob.data('anchor')}`, (blob) => {
-      $row.replaceWith(blob);
-      $(`[data-anchor="${$blob.data('anchor')}"]`).on('click', (e) => { insertBlobExcerpt(e) });
-    });
-  }
-  $('.ui.blob-excerpt').on('click', (e) => { insertBlobExcerpt(e) });
+  $(document).on('click', '.blob-excerpt', async ({currentTarget}) => {
+    const {url, query, anchor} = currentTarget.dataset;
+    const blob = await $.get(`${url}?${query}&anchor=${anchor}`);
+    currentTarget.closest('tr').outerHTML = blob;
+  });
 }
 
 function initU2FAuth() {
diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index 9a7c7f4e67..556a191720 100644
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -1,3 +1,5 @@
+import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
+import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
 import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
 import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
 import octiconInternalRepo from '../../public/img/svg/octicon-internal-repo.svg';
@@ -12,6 +14,8 @@ import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg'
 import octiconRepoTemplatePrivate from '../../public/img/svg/octicon-repo-template-private.svg';
 
 export const svgs = {
+  'octicon-chevron-down': octiconChevronDown,
+  'octicon-chevron-right': octiconChevronRight,
   'octicon-git-merge': octiconGitMerge,
   'octicon-git-pull-request': octiconGitPullRequest,
   'octicon-internal-repo': octiconInternalRepo,
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index ce35049ebc..7bb7d81bab 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1694,6 +1694,11 @@
                 padding: 0 5px !important;
             }
 
+            .tag-code .lines-num,
+            .tag-code td {
+                padding: 0 !important;
+            }
+
             tbody {
                 tr {
                     td.halfwidth {
@@ -1727,17 +1732,21 @@
 
         .code-diff-unified tbody tr {
             &.del-code td {
-                background-color: #ffeef0 !important;
-                border-color: #f1c0c0 !important;
+                background-color: #ffeef0;
+                border-color: #f1c0c0;
             }
 
             &.add-code td {
                 background-color: #e6ffed;
+                border-color: #bef5cb;
+            }
+
+            &.del-code td.lines-num {
+                background-color: #ffe5e4;
             }
 
             &.add-code td.lines-num {
                 background-color: #cdffd8;
-                border-color: #bef5cb;
             }
 
         }
@@ -3001,19 +3010,15 @@ tbody.commit-list {
     margin: 0 !important;
 }
 
+.tag-code {
+    height: 28px;
+}
+
 .tag-code,
 .tag-code td {
-    background-color: #e6f1f6;
+    background-color: #f0f9ff;
     border-color: #f1f8ff !important;
-    padding-top: 8px;
-    padding-bottom: 8px;
     vertical-align: middle;
-    color: rgba(27, 31, 35, .7);
-}
-
-.tag-code td.lines-num {
-    background-color: #f6e6eb !important;
-    border-color: #dbedff;
 }
 
 .issue-keyword {
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 2e9bbf19b6..1c84d61f45 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -133,27 +133,24 @@
     color: rgba(0, 0, 0, .87);
 }
 
-.ui.fold-code {
-    margin-right: 1em;
-    padding-left: 5px;
-    cursor: pointer;
-    width: 22px;
-    font-size: 12px;
+a.fold-file {
+    margin-right: 10px;
+    color: inherit;
 }
 
-.ui.fold-code:hover {
-    color: #428bca;
+a.blob-excerpt {
+    color: #575a68;
+    height: 28px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background: #daecfe;
 }
 
-.ui.blob-excerpt {
-    display: block;
-    line-height: 20px;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.ui.blob-excerpt:hover {
-    color: #428bca;
+a.blob-excerpt:hover {
+    background: #428bca;
+    color: #fff;
 }
 
 .btn-review > .dropdown.icon {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index cd40974567..ee294d3fac 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1056,11 +1056,19 @@ a.ui.basic.green.label:hover {
     border-color: #634343 !important;
 }
 
+.repository .diff-file-box .code-diff-unified tbody tr.del-code td.lines-num {
+    background-color: #4e2c2c !important;
+}
+
 .repository .diff-file-box .code-diff-unified tbody tr.add-code td {
     background-color: #283e2d !important;
     border-color: #314a37 !important;
 }
 
+.repository .diff-file-box .code-diff-unified tbody tr.add-code td.lines-num {
+    background-color: #2c4632 !important;
+}
+
 .removed-code {
     background-color: #5f3737;
 }
@@ -1071,12 +1079,11 @@ a.ui.basic.green.label:hover {
 
 .tag-code,
 .tag-code td {
-    background: #242637 !important;
+    background: #353945 !important;
 
 }
 .tag-code td.lines-num {
-    background-color: #242637 !important;
-    border-color: transparent !important;
+    background-color: #3a3e4c !important;
 }
 
 .tag-code td.lines-type-marker,
@@ -1424,7 +1431,6 @@ input {
 }
 
 .lines-num {
-    background: #2e323e !important;
     color: #9e9e9e !important;
     border-color: #2d2d2d !important;
 }
@@ -1433,6 +1439,15 @@ td.blob-excerpt {
     background-color: rgba(0, 0, 0, .15);
 }
 
+a.blob-excerpt {
+    color: #ccc;
+    background: #393d4a;
+}
+
+a.blob-excerpt:hover {
+    background: #87ab63;
+}
+
 .code-view .lines-code.active {
     background: #534d1b !important;
 }