Diff and code review refactors and improvements (#13922)

* Diff CSS refactors and misc tweaks

- Simplify Diff CSS styling
- Add color variables for diff
- Fix vertical centering of inline comment button
- Slightly adjust text colors, e.g. in comment header

* Code review improvments

* selector tweak

* fix diff issues, add inactive bg color

Co-authored-by: 6543 <[email protected]>

Author: silverwind

templates/repo/issue/view_content/comments.tmpl

@@ -398,10 +398,7 @@
 					{{avatar .Poster}}
 				</a>
 				{{end}}
-				<span class="badge {{if eq .Review.Type 1}}bg-green
-				{{- else if eq .Review.Type 2}}bg-grey
-				{{- else if eq .Review.Type 3}}bg-red
-				{{- else}}bg-grey{{end}} text-white">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
+				<span class="badge{{if eq .Review.Type 1}} bg-green text-white{{else if eq .Review.Type 3}} bg-red text-white{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
 				<span class="text grey">
 					{{if .OriginalAuthor }}
 						<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
@@ -452,7 +449,7 @@
 				{{ range $filename, $lines := .Review.CodeComments}}
 					{{range $line, $comms := $lines}}
 							<div class="ui segments">
-								<div class="ui segment">
+								<div class="ui segment py-3">
 									{{$invalid := (index $comms 0).Invalidated}}
 									{{$resolved := (index $comms 0).IsResolved}}
 									{{$resolveDoer := (index $comms 0).ResolveDoer}}
@@ -497,8 +494,8 @@
 										</div>
 									</div>
 								{{end}}
-								<div id="code-comments-{{(index $comms 0).ID}}" class="ui segment{{if $resolved}} hide{{end}}">
-									<div class="ui comments">
+								<div id="code-comments-{{(index $comms 0).ID}}" class="ui segment{{if $resolved}} hide{{end}} py-3">
+									<div class="ui comments mb-0">
 										{{range $comms}}
 											{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
 											<div class="comment code-comment" id="{{.HashTag}}">

web_src/less/_base.less

@@ -73,8 +73,16 @@
   --color-black: #1b1c1d;
   --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-added-row-bg: #e6ffed;
+  --color-diff-removed-row-border: #f1c0c0;
+  --color-diff-added-row-border: #e6ffed;
+  --color-diff-inactive: #f2f2f2;
   /* target-based colors */
   --color-body: #ffffff;
+  --color-text-dark: #080808;
   --color-text: #212121;
   --color-text-light: #555555;
   --color-text-light-2: #888888;
@@ -267,6 +275,10 @@ a.muted:hover,
   color: var(--color-text);
 }
 
+.ui.menu .item > .label {
+  background: var(--color-grey);
+}
+
 .ui.link.menu .item:hover,
 .ui.menu .dropdown.item:hover,
 .ui.menu .link.item:hover,
@@ -436,6 +448,28 @@ a.ui.card:hover,
   background: var(--color-card);
 }
 
+.ui.comments .comment .text,
+.ui.comments .comment .author {
+  color: var(--color-text);
+}
+
+.ui.comments .comment a.author:hover {
+  color: var(--color-primary);
+}
+
+.ui.comments .comment .metadata {
+  color: var(--color-text-light-2);
+}
+
+.ui.comments .comment .actions a {
+  color: var(--color-text-light);
+}
+
+.ui.comments .comment .actions a.active,
+.ui.comments .comment .actions a:hover {
+  color: var(--color-primary);
+}
+
 .ui.progress[data-percent="0"] .bar .progress {
   color: var(--color-text);
 }
@@ -714,15 +748,15 @@ a.ui.card:hover,
       color: var(--color-text);
 
       &:hover {
-        color: #000000;
+        color: var(--color-text-dark);
       }
     }
 
     &.grey {
       color: var(--color-text-light) !important;
 
       a {
-        color: inherit !important;
+        color: var(--color-text) !important;
 
         &:hover {
           color: var(--color-primary) !important;
@@ -731,7 +765,7 @@ a.ui.card:hover,
     }
 
     &.light.grey {
-      color: var(--color-grey) !important;
+      color: var(--color-text-light-2) !important;
     }
 
     &.green {
@@ -1691,6 +1725,10 @@ a.ui.basic.label:hover {
   border-color: var(--color-secondary);
 }
 
+.ui.segments > .segment {
+  border-color: var(--color-secondary);
+}
+
 .ui.secondary.segment {
   background: var(--color-secondary-bg);
   color: var(--color-text-light);
@@ -1863,7 +1901,7 @@ table th[data-sortt-desc] {
 
 .ui.tabular.menu .item {
   padding: 11px 12px;
-  color: var(--color-secondary-dark-6);
+  color: var(--color-text-light-2);
 }
 
 .ui.tabular.menu .item:hover {
@@ -1878,12 +1916,17 @@ table th[data-sortt-desc] {
   margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
 }
 
+.ui.segment .ui.tabular.menu .active.item,
+.ui.segment .ui.tabular.menu .active.item:hover {
+  background: var(--color-box-body);
+}
+
 .ui.secondary.pointing.menu {
   border-color: var(--color-secondary);
 }
 
 .ui.secondary.pointing.menu .item {
-  color: var(--color-secondary-dark-6);
+  color: var(--color-text-light-2);
 }
 
 .ui.secondary.pointing.menu .active.item,