Rework focused comment styling (#13434)

Had to tweak a few borders to make it work properly in all cases, also
added .comment-body class to specifically target that body.

5 files changed, 87 insertions, 41 deletions

diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 205dd97c24..803627060e 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -50,7 +50,7 @@
 				{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
 			</div>
 		</div>
-		<div class="ui attached segment">
+		<div class="ui attached segment comment-body">
 			<div class="render-content markdown">
 			{{if .RenderedContent}}
 				{{.RenderedContent|Str2html}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 611255518e..1dadd2ef96 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -56,7 +56,7 @@
 							{{end}}
 						</div>
 					</div>
-					<div class="ui attached segment">
+					<div class="ui attached segment comment-body">
 						<div class="render-content markdown">
 							{{if .Issue.RenderedContent}}
 								{{.Issue.RenderedContent|Str2html}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 4ea6bd7cca..c814932d14 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -22,9 +22,23 @@
 				<div class="ui top attached header comment-header df ac sb">
 					<div class="comment-header-left df ac">
 						{{if .OriginalAuthor }}
-							<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
+							<span class="text black mr-2">
+								<i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
+								{{ .OriginalAuthor }}
+							</span>
+							<span class="text grey">
+								{{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}
+							</span>
+							<span class="text migrate">
+								({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}
+							</span>
 						{{else}}
-							<span class="text grey"><a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span>
+							<span class="text grey">
+								<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
+									{{.Poster.GetDisplayName}}
+								</a>
+								{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}
+							</span>
 						{{end}}
 					</div>
 					<div class="comment-header-right actions df ac">
@@ -48,7 +62,7 @@
 						{{end}}
 					</div>
 				</div>
-				<div class="ui attached segment">
+				<div class="ui attached segment comment-body">
 					<div class="render-content markdown">
 						{{if .RenderedContent}}
 							{{.RenderedContent|Str2html}}
@@ -425,7 +439,7 @@
 							{{$.i18n.Tr "repo.issues.review.left_comment" | Safe}}
 						</span>
 					</div>
-					<div class="ui attached segment">
+					<div class="ui attached segment comment-body">
 						<div class="render-content markdown">
 							{{if .RenderedContent}}
 								{{.RenderedContent|Str2html}}
@@ -492,32 +506,30 @@
 									<div class="ui comments">
 										{{range $comms}}
 											{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
-											<div class="comment" id="{{.HashTag}}">
+											<div class="comment code-comment" id="{{.HashTag}}">
 												{{if not .OriginalAuthor }}
 													<a class="avatar">
 														<img src="{{.Poster.RelAvatarLink}}">
 													</a>
 												{{end}}
 												<div class="content">
-													<div class="code-comment-content">
-														<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>
-															{{else}}
-																<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
-															{{end}}
-															{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
-														</span>
-														<div class="text">
-															<div class="render-content markdown">
-															{{if .RenderedContent}}
-																{{.RenderedContent|Str2html}}
-															{{else}}
-																<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
-															{{end}}
-															</div>
-															<div class="raw-content hide">{{.Content}}</div>
+													<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>
+														{{else}}
+															<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
+														{{end}}
+														{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
+													</span>
+													<div class="text comment-content">
+														<div class="render-content markdown">
+														{{if .RenderedContent}}
+															{{.RenderedContent|Str2html}}
+														{{else}}
+															<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
+														{{end}}
 														</div>
+														<div class="raw-content hide">{{.Content}}</div>
 													</div>
 												</div>
 											</div>
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 72b500d4ab..d3190f222d 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -998,6 +998,9 @@
         }
 
         .content {
+          border: 1px solid var(--color-secondary);
+          border-radius: var(--border-radius);
+
           > .merge-section {
             background-color: #f7f7f7;
 
@@ -1089,18 +1092,6 @@
           }
         }
 
-        &:target > .content {
-          box-shadow: 0 0 10px #8c8c8c;
-        }
-
-        &:target > .content > .code-comment-content {
-          padding: 4px;
-        }
-
-        &:target > .content > .code-comment-content > .text {
-          margin-bottom: 0;
-        }
-
         .ui.form {
           .field {
             &:first-child {
@@ -1127,6 +1118,15 @@
         }
       }
 
+      .code-comment {
+        border: 1px solid transparent;
+        padding: 6px 6px 3px;
+
+        .content {
+          border: none !important;
+        }
+      }
+
       .event {
         padding-left: 15px;
 
@@ -2395,6 +2395,11 @@
   .segment.reactions {
     padding: 0;
     display: flex;
+    border: none !important;
+    border-top: 1px solid var(--color-secondary) !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
 
     .ui.label {
       max-height: 40px;
@@ -2407,7 +2412,7 @@
       margin: 0;
       font-size: 14px;
       font-weight: normal;
-      border-color: inherit !important;
+      border-color: var(--color-secondary) !important;
 
       &.disabled {
         cursor: default;
@@ -2421,7 +2426,7 @@
 
     .ui.label.basic.blue {
       background-color: var(--color-primary-alpha-20) !important;
-      border-color: inherit !important;
+      border-color: var(--color-secondary) !important;
     }
 
     .reaction-count {
@@ -2786,8 +2791,30 @@
   }
 }
 
+.comment:target .content {
+  border-color: var(--color-primary) !important;
+  box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
+}
+
+.comment:target .header:before {
+  border-right-color: var(--color-primary) !important;
+  filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
+}
+
+.code-comment:target {
+  border-color: var(--color-primary) !important;
+  border-radius: var(--border-radius) !important;
+  box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
+}
+
+.code-comment:target .content {
+  box-shadow: none !important;
+}
+
 .comment-header {
   #avatar-arrow;
+  border: none !important;
+  border-bottom: 1px solid var(--color-secondary) !important;
   font-weight: normal !important;
   padding: .5rem 1rem !important;
   margin: 0 !important;
@@ -2833,6 +2860,13 @@
   margin-left: .25rem;
 }
 
+.comment-body {
+  border: none !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+}
+
 .edit-label.modal,
 .new-label.segment {
   .form {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 5ca6a331d9..4cb3e9d7fd 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -537,7 +537,7 @@ body {
 
 .ui.attached.header {
   background: var(--color-secondary);
-  border: 1px solid var(--color-secondary);
+  border-color: var(--color-secondary);
   color: #dbdbdb;
 }
 
@@ -1039,7 +1039,7 @@ a.ui.basic.green.label:hover {
 .ui.segment,
 .ui.segments,
 .ui.attached.segment {
-  border: 1px solid var(--color-secondary);
+  border-color: var(--color-secondary);
 }
 
 .ui.list > .item > .content {