De-emphasize signed commits (#31160)

The new code structure is easier to make more improvements or
refactor, for example: change the colors to de-emphasize more, or design
some new layouts.

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

17 files changed, 299 insertions, 550 deletions

diff --git a/routers/web/devtest/devtest.go b/routers/web/devtest/devtest.go
index 0bc84d2d1e..1ea1398173 100644
--- a/routers/web/devtest/devtest.go
+++ b/routers/web/devtest/devtest.go
@@ -9,6 +9,10 @@ import (
 	"strings"
 	"time"
 
+	"code.gitea.io/gitea/models/asymkey"
+	"code.gitea.io/gitea/models/db"
+	user_model "code.gitea.io/gitea/models/user"
+	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/templates"
 	"code.gitea.io/gitea/services/context"
 )
@@ -41,16 +45,85 @@ func FetchActionTest(ctx *context.Context) {
 	ctx.JSONRedirect("")
 }
 
-func Tmpl(ctx *context.Context) {
-	now := time.Now()
-	ctx.Data["TimeNow"] = now
-	ctx.Data["TimePast5s"] = now.Add(-5 * time.Second)
-	ctx.Data["TimeFuture5s"] = now.Add(5 * time.Second)
-	ctx.Data["TimePast2m"] = now.Add(-2 * time.Minute)
-	ctx.Data["TimeFuture2m"] = now.Add(2 * time.Minute)
-	ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second)
-	ctx.Data["TimeFuture1y"] = now.Add(1 * 366 * 86400 * time.Second)
+func prepareMockData(ctx *context.Context) {
+	if ctx.Req.URL.Path == "/devtest/gitea-ui" {
+		now := time.Now()
+		ctx.Data["TimeNow"] = now
+		ctx.Data["TimePast5s"] = now.Add(-5 * time.Second)
+		ctx.Data["TimeFuture5s"] = now.Add(5 * time.Second)
+		ctx.Data["TimePast2m"] = now.Add(-2 * time.Minute)
+		ctx.Data["TimeFuture2m"] = now.Add(2 * time.Minute)
+		ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second)
+		ctx.Data["TimeFuture1y"] = now.Add(1 * 366 * 86400 * time.Second)
+	}
+
+	if ctx.Req.URL.Path == "/devtest/commit-sign-badge" {
+		var commits []*asymkey.SignCommit
+		mockUsers, _ := db.Find[user_model.User](ctx, user_model.SearchUserOptions{ListOptions: db.ListOptions{PageSize: 1}})
+		mockUser := mockUsers[0]
+		commits = append(commits, &asymkey.SignCommit{
+			Verification: &asymkey.CommitVerification{},
+			UserCommit: &user_model.UserCommit{
+				Commit: &git.Commit{ID: git.Sha1ObjectFormat.EmptyObjectID()},
+			},
+		})
+		commits = append(commits, &asymkey.SignCommit{
+			Verification: &asymkey.CommitVerification{
+				Verified:    true,
+				Reason:      "name / key-id",
+				SigningUser: mockUser,
+				SigningKey:  &asymkey.GPGKey{KeyID: "12345678"},
+				TrustStatus: "trusted",
+			},
+			UserCommit: &user_model.UserCommit{
+				User:   mockUser,
+				Commit: &git.Commit{ID: git.Sha1ObjectFormat.EmptyObjectID()},
+			},
+		})
+		commits = append(commits, &asymkey.SignCommit{
+			Verification: &asymkey.CommitVerification{
+				Verified:      true,
+				Reason:        "name / key-id",
+				SigningUser:   mockUser,
+				SigningSSHKey: &asymkey.PublicKey{Fingerprint: "aa:bb:cc:dd:ee"},
+				TrustStatus:   "untrusted",
+			},
+			UserCommit: &user_model.UserCommit{
+				User:   mockUser,
+				Commit: &git.Commit{ID: git.Sha1ObjectFormat.EmptyObjectID()},
+			},
+		})
+		commits = append(commits, &asymkey.SignCommit{
+			Verification: &asymkey.CommitVerification{
+				Verified:      true,
+				Reason:        "name / key-id",
+				SigningUser:   mockUser,
+				SigningSSHKey: &asymkey.PublicKey{Fingerprint: "aa:bb:cc:dd:ee"},
+				TrustStatus:   "other(unmatch)",
+			},
+			UserCommit: &user_model.UserCommit{
+				User:   mockUser,
+				Commit: &git.Commit{ID: git.Sha1ObjectFormat.EmptyObjectID()},
+			},
+		})
+		commits = append(commits, &asymkey.SignCommit{
+			Verification: &asymkey.CommitVerification{
+				Warning:      true,
+				Reason:       "gpg.error",
+				SigningEmail: "test@example.com",
+			},
+			UserCommit: &user_model.UserCommit{
+				User:   mockUser,
+				Commit: &git.Commit{ID: git.Sha1ObjectFormat.EmptyObjectID()},
+			},
+		})
+
+		ctx.Data["MockCommits"] = commits
+	}
+}
 
+func Tmpl(ctx *context.Context) {
+	prepareMockData(ctx)
 	if ctx.Req.Method == "POST" {
 		_ = ctx.Req.ParseForm()
 		ctx.Flash.Info("form: "+ctx.Req.Method+" "+ctx.Req.RequestURI+"<br>"+
@@ -60,6 +133,5 @@ func Tmpl(ctx *context.Context) {
 		)
 		time.Sleep(2 * time.Second)
 	}
-
 	ctx.HTML(http.StatusOK, templates.TplName("devtest"+path.Clean("/"+ctx.PathParam("sub"))))
 }
diff --git a/templates/devtest/commit-sign-badge.tmpl b/templates/devtest/commit-sign-badge.tmpl
new file mode 100644
index 0000000000..a6677c4495
--- /dev/null
+++ b/templates/devtest/commit-sign-badge.tmpl
@@ -0,0 +1,13 @@
+{{template "devtest/devtest-header"}}
+<div class="page-content devtest ui container">
+	<div>
+		<h1>Commit Sign Badges</h1>
+		{{range $commit := .MockCommits}}
+			<div class="flex-text-block tw-my-2">
+				{{template "repo/commit_sign_badge" dict "Commit" $commit "CommitBaseLink" "/devtest/commit" "CommitSignVerification" $commit.Verification}}
+				{{template "repo/commit_sign_badge" dict "CommitSignVerification" $commit.Verification}}
+			</div>
+		{{end}}
+	</div>
+</div>
+{{template "devtest/devtest-footer"}}
diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index 71f77154fb..3d95e8a715 100644
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -1,23 +1,9 @@
 {{template "base/head" .}}
+{{$commitLinkBase := print $.RepoLink (Iif $.PageIsWiki "/wiki" "") "/commit"}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository diff">
 	{{template "repo/header" .}}
 	<div class="ui container fluid padded">
-		{{$class := ""}}
-		{{if .Commit.Signature}}
-			{{$class = (print $class " isSigned")}}
-			{{if .Verification.Verified}}
-				{{if eq .Verification.TrustStatus "trusted"}}
-					{{$class = (print $class " isVerified")}}
-				{{else if eq .Verification.TrustStatus "untrusted"}}
-					{{$class = (print $class " isVerifiedUntrusted")}}
-				{{else}}
-					{{$class = (print $class " isVerifiedUnmatched")}}
-				{{end}}
-			{{else if .Verification.Warning}}
-				{{$class = (print $class " isWarning")}}
-			{{end}}
-		{{end}}
-		<div class="ui top attached header clearing segment tw-relative commit-header {{$class}}">
+		<div class="ui top attached header clearing segment tw-relative commit-header">
 			<div class="tw-flex tw-mb-4 tw-gap-1">
 				<h3 class="tw-mb-0 tw-flex-1"><span class="commit-summary" title="{{.Commit.Summary}}">{{ctx.RenderUtils.RenderCommitMessage .Commit.Message ($.Repository.ComposeMetas ctx)}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}</h3>
 				{{if not $.PageIsWiki}}
@@ -142,125 +128,59 @@
 			{{end}}
 			{{template "repo/commit_load_branches_and_tags" .}}
 		</div>
-		<div class="ui{{if not .Commit.Signature}} bottom{{end}} attached segment tw-flex tw-items-center tw-justify-between tw-py-1 commit-header-row tw-flex-wrap {{$class}}">
-				<div class="tw-flex tw-items-center author">
-					{{if .Author}}
-						{{ctx.AvatarUtils.Avatar .Author 28 "tw-mr-2"}}
-						{{if .Author.FullName}}
-							<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a>
-						{{else}}
-							<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
-						{{end}}
+
+		<div class="ui bottom attached segment flex-text-block tw-flex-wrap">
+			<div class="flex-text-inline">
+				{{if .Author}}
+					{{ctx.AvatarUtils.Avatar .Author 20}}
+					{{if .Author.FullName}}
+						<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a>
 					{{else}}
-						{{ctx.AvatarUtils.AvatarByEmail .Commit.Author.Email .Commit.Author.Email 28 "tw-mr-2"}}
-						<strong>{{.Commit.Author.Name}}</strong>
+						<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
 					{{end}}
-					<span class="text grey tw-ml-2" id="authored-time">{{DateUtils.TimeSince .Commit.Author.When}}</span>
-					{{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}}
-						<span class="text grey tw-mx-2">{{ctx.Locale.Tr "repo.diff.committed_by"}}</span>
-						{{if ne .Verification.CommittingUser.ID 0}}
-							{{ctx.AvatarUtils.Avatar .Verification.CommittingUser 28 "tw-mx-2"}}
-							<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
-						{{else}}
-							{{ctx.AvatarUtils.AvatarByEmail .Commit.Committer.Email .Commit.Committer.Name 28 "tw-mr-2"}}
-							<strong>{{.Commit.Committer.Name}}</strong>
-						{{end}}
-					{{end}}
-				</div>
-				<div class="tw-flex tw-items-center">
-					{{if .Parents}}
-						<div>
-							<span>{{ctx.Locale.Tr "repo.diff.parent"}}</span>
-							{{range .Parents}}
-								{{if $.PageIsWiki}}
-									<a class="ui primary sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">{{ShortSha .}}</a>
-								{{else}}
-									<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">{{ShortSha .}}</a>
-								{{end}}
-							{{end}}
-						</div>
-					{{end}}
-					<div class="item">
-						<span>{{ctx.Locale.Tr "repo.diff.commit"}}</span>
-						<span class="ui primary sha label">{{ShortSha .CommitID}}</span>
-					</div>
-				</div>
-		</div>
-		{{if .Commit.Signature}}
-			<div class="ui bottom attached message tw-text-left tw-flex tw-items-center tw-justify-between commit-header-row tw-flex-wrap tw-mb-0 {{$class}}">
-				<div class="tw-flex tw-items-center">
-					{{if .Verification.Verified}}
-						{{if ne .Verification.SigningUser.ID 0}}
-							{{svg "gitea-lock" 16 "tw-mr-2"}}
-							{{if eq .Verification.TrustStatus "trusted"}}
-								<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.signed_by"}}:</span>
-							{{else if eq .Verification.TrustStatus "untrusted"}}
-								<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
-							{{else}}
-								<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
-							{{end}}
-							{{ctx.AvatarUtils.Avatar .Verification.SigningUser 28 "tw-mr-2"}}
-							<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.GetDisplayName}}</strong></a>
-						{{else}}
-							<span title="{{ctx.Locale.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog" 16 "tw-mr-2"}}</span>
-							<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.signed_by"}}:</span>
-							{{ctx.AvatarUtils.AvatarByEmail .Verification.SigningEmail "" 28 "tw-mr-2"}}
-							<strong>{{.Verification.SigningUser.GetDisplayName}}</strong>
-						{{end}}
+				{{else}}
+					{{ctx.AvatarUtils.AvatarByEmail .Commit.Author.Email .Commit.Author.Email 20}}
+					<strong>{{.Commit.Author.Name}}</strong>
+				{{end}}
+			</div>
+
+			<span class="text grey">{{DateUtils.TimeSince .Commit.Author.When}}</span>
+
+			<div class="flex-text-inline">
+				{{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}}
+					<span class="text grey">{{ctx.Locale.Tr "repo.diff.committed_by"}}</span>
+					{{if ne .Verification.CommittingUser.ID 0}}
+						{{ctx.AvatarUtils.Avatar .Verification.CommittingUser 20}}
+						<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
 					{{else}}
-						{{svg "gitea-unlock" 16 "tw-mr-2"}}
-						<span class="ui text">{{ctx.Locale.Tr .Verification.Reason}}</span>
+						{{ctx.AvatarUtils.AvatarByEmail .Commit.Committer.Email .Commit.Committer.Name 20}}
+						<strong>{{.Commit.Committer.Name}}</strong>
 					{{end}}
-				</div>
-				<div class="tw-flex tw-items-center">
-					{{if .Verification.Verified}}
-						{{if ne .Verification.SigningUser.ID 0}}
-							{{svg "octicon-verified" 16 "tw-mr-2"}}
-							{{if .Verification.SigningSSHKey}}
-								<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
-								{{.Verification.SigningSSHKey.Fingerprint}}
-							{{else}}
-								<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.gpg_key_id"}}:</span>
-								{{.Verification.SigningKey.PaddedKeyID}}
-							{{end}}
-						{{else}}
-							{{svg "octicon-unverified" 16 "tw-mr-2"}}
-							{{if .Verification.SigningSSHKey}}
-								<span class="ui text tw-mr-2" data-tooltip-content="{{ctx.Locale.Tr "gpg.default_key"}}">{{ctx.Locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
-								{{.Verification.SigningSSHKey.Fingerprint}}
-							{{else}}
-								<span class="ui text tw-mr-2" data-tooltip-content="{{ctx.Locale.Tr "gpg.default_key"}}">{{ctx.Locale.Tr "repo.commits.gpg_key_id"}}:</span>
-								{{.Verification.SigningKey.PaddedKeyID}}
-							{{end}}
-						{{end}}
-					{{else if .Verification.Warning}}
-						{{svg "octicon-unverified" 16 "tw-mr-2"}}
-						{{if .Verification.SigningSSHKey}}
-							<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
-							{{.Verification.SigningSSHKey.Fingerprint}}
-						{{else}}
-							<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.gpg_key_id"}}:</span>
-							{{.Verification.SigningKey.PaddedKeyID}}
-						{{end}}
-					{{else}}
-						{{if .Verification.SigningKey}}
-							{{if ne .Verification.SigningKey.KeyID ""}}
-								{{svg "octicon-verified" 16 "tw-mr-2"}}
-								<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.gpg_key_id"}}:</span>
-								{{.Verification.SigningKey.PaddedKeyID}}
-							{{end}}
-						{{end}}
-						{{if .Verification.SigningSSHKey}}
-							{{if ne .Verification.SigningSSHKey.Fingerprint ""}}
-								{{svg "octicon-verified" 16 "tw-mr-2"}}
-								<span class="ui text tw-mr-2">{{ctx.Locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
-								{{.Verification.SigningSSHKey.Fingerprint}}
-							{{end}}
+				{{end}}
+			</div>
+
+			{{if .Verification}}
+				{{template "repo/commit_sign_badge" dict "CommitSignVerification" .Verification}}
+			{{end}}
+
+			<div class="tw-flex-1"></div>
+
+			<div class="flex-text-inline tw-gap-5">
+				{{if .Parents}}
+					<div class="flex-text-inline">
+						<span>{{ctx.Locale.Tr "repo.diff.parent"}}</span>
+						{{range .Parents}}
+							<a class="ui label commit-id-short" href="{{$commitLinkBase}}/{{PathEscape .}}">{{ShortSha .}}</a>
 						{{end}}
-					{{end}}
+					</div>
+				{{end}}
+				<div class="flex-text-inline">
+					<span>{{ctx.Locale.Tr "repo.diff.commit"}}</span>
+					<a class="ui label commit-id-short" href="{{$commitLinkBase}}/{{PathEscape .CommitID}}">{{ShortSha .CommitID}}</a>
 				</div>
 			</div>
-		{{end}}
+		</div>
+
 		{{if .NoteRendered}}
 			<div class="ui top attached header segment git-notes">
 				{{svg "octicon-note" 16 "tw-mr-2"}}
@@ -276,12 +196,13 @@
 				{{else}}
 					<strong>{{.NoteCommit.Author.Name}}</strong>
 				{{end}}
-				<span class="text grey" id="note-authored-time">{{DateUtils.TimeSince .NoteCommit.Author.When}}</span>
+				<span class="text grey">{{DateUtils.TimeSince .NoteCommit.Author.When}}</span>
 			</div>
 			<div class="ui bottom attached info segment git-notes">
 				<pre class="commit-body">{{.NoteRendered | SanitizeHTML}}</pre>
 			</div>
 		{{end}}
+
 		{{template "repo/diff/box" .}}
 	</div>
 </div>
diff --git a/templates/repo/commit_sign_badge.tmpl b/templates/repo/commit_sign_badge.tmpl
new file mode 100644
index 0000000000..aa68e9dd23
--- /dev/null
+++ b/templates/repo/commit_sign_badge.tmpl
@@ -0,0 +1,78 @@
+{{/* Template attributes:
+* Commit
+* CommitBaseLink
+* CommitSignVerification
+If you'd like to modify this template, you could test it on the devtest page.
+ATTENTION: this template could be re-rendered many times (on the graph and commit list page),
+so this template should be kept as small as possbile, DO NOT put large components like modal/dialog into it.
+*/}}
+{{- $commit := $.Commit -}}
+{{- $commitBaseLink := $.CommitBaseLink -}}
+{{- $verification := $.CommitSignVerification -}}
+
+{{- $extraClass := "" -}}
+{{- $verified := false -}}
+{{- $signingUser := NIL -}}
+{{- $signingEmail := "" -}}
+{{- $msgReasonPrefix := "" -}}
+{{- $msgReason := "" -}}
+{{- $msgSigningKey := "" -}}
+
+{{- if $verification -}}
+	{{- $signingUser = $verification.SigningUser -}}
+	{{- $signingEmail = $verification.SigningEmail -}}
+	{{- $extraClass = print $extraClass " commit-is-signed" -}}
+	{{- if $verification.Verified -}}
+		{{- /* reason is "{name} / {key-id}" */ -}}
+		{{- $msgReason = $verification.Reason -}}
+		{{- $verified = true -}}
+		{{- if eq $verification.TrustStatus "trusted" -}}
+			{{- $extraClass = print $extraClass " sign-trusted" -}}
+		{{- else if eq $verification.TrustStatus "untrusted" -}}
+			{{- $extraClass = print $extraClass " sign-untrusted" -}}
+			{{- $msgReasonPrefix = ctx.Locale.Tr "repo.commits.signed_by_untrusted_user" -}}
+		{{- else -}}
+			{{- $extraClass = print $extraClass " sign-unmatched" -}}
+			{{- $msgReasonPrefix = ctx.Locale.Tr "repo.commits.signed_by_untrusted_user_unmatched" -}}
+		{{- end -}}
+	{{- else -}}
+		{{- if $verification.Warning -}}
+			{{- $extraClass = print $extraClass " sign-warning" -}}
+		{{- end -}}
+		{{- $msgReason = ctx.Locale.Tr $verification.Reason -}}{{- /* dirty part: it is the translation key ..... */ -}}
+	{{- end -}}
+
+	{{- if $msgReasonPrefix -}}
+		{{- $msgReason = print $msgReasonPrefix ": " $msgReason -}}
+	{{- end -}}
+
+	{{- if $verification.SigningSSHKey -}}
+		{{- $msgSigningKey = print (ctx.Locale.Tr "repo.commits.ssh_key_fingerprint") ": " $verification.SigningSSHKey.Fingerprint -}}
+	{{- else if $verification.SigningKey -}}
+		{{- $msgSigningKey = print (ctx.Locale.Tr "repo.commits.gpg_key_id") ": " $verification.SigningKey.PaddedKeyID -}}
+	{{- end -}}
+{{- end -}}
+
+{{- if $commit -}}
+<a {{if $commitBaseLink}}href="{{$commitBaseLink}}/{{$commit.ID}}"{{end}} class="ui label commit-id-short {{$extraClass}}" rel="nofollow">
+	{{- ShortSha $commit.ID.String -}}
+{{- end -}}
+	<span class="ui label commit-sign-badge {{$extraClass}}">
+		{{- if $verified -}}
+			{{- if and $signingUser $signingUser.ID -}}
+				<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-lock"}}</span>
+				<span data-tooltip-content="{{$msgSigningKey}}">{{ctx.AvatarUtils.Avatar $signingUser 16}}</span>
+			{{- else -}}
+				<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-lock-cog"}}</span>
+				<span data-tooltip-content="{{$msgSigningKey}}">{{ctx.AvatarUtils.AvatarByEmail $signingEmail "" 16}}</span>
+			{{- end -}}
+		{{- else -}}
+			<span data-tooltip-content="{{$msgReason}}">{{svg "gitea-unlock"}}</span>
+		{{- end -}}
+	</span>
+
+{{- if $commit -}}
+</a>
+{{- end -}}
+
+{{- /* This template should be kept as small as possbile, DO NOT put large components like modal/dialog into it. */ -}}
diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
index 50b754cc23..329dc45149 100644
--- a/templates/repo/commits_list.tmpl
+++ b/templates/repo/commits_list.tmpl
@@ -28,33 +28,15 @@
 						</div>
 					</td>
 					<td class="sha">
-						{{$class := "ui sha label"}}
-						{{if .Signature}}
-							{{$class = (print $class " isSigned")}}
-							{{if .Verification.Verified}}
-								{{if eq .Verification.TrustStatus "trusted"}}
-									{{$class = (print $class " isVerified")}}
-								{{else if eq .Verification.TrustStatus "untrusted"}}
-									{{$class = (print $class " isVerifiedUntrusted")}}
-								{{else}}
-									{{$class = (print $class " isVerifiedUnmatched")}}
-								{{end}}
-							{{else if .Verification.Warning}}
-								{{$class = (print $class " isWarning")}}
-							{{end}}
-						{{end}}
-						{{$commitShaLink := ""}}
+						{{$commitBaseLink := ""}}
 						{{if $.PageIsWiki}}
-							{{$commitShaLink = (printf "%s/wiki/commit/%s" $commitRepoLink (PathEscape .ID.String))}}
+							{{$commitBaseLink = printf "%s/wiki/commit" $commitRepoLink}}
 						{{else if $.PageIsPullCommits}}
-							{{$commitShaLink = (printf "%s/pulls/%d/commits/%s" $commitRepoLink $.Issue.Index (PathEscape .ID.String))}}
+							{{$commitBaseLink = printf "%s/pulls/%d/commits" $commitRepoLink $.Issue.Index}}
 						{{else if $.Reponame}}
-							{{$commitShaLink = (printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String))}}
+							{{$commitBaseLink = printf "%s/commit" $commitRepoLink}}
 						{{end}}
-						<a {{if $commitShaLink}}href="{{$commitShaLink}}"{{end}} class="{{$class}}">
-							<span class="shortsha">{{ShortSha .ID.String}}</span>
-							{{if .Signature}}{{template "repo/shabox_badge" dict "root" $ "verification" .Verification}}{{end}}
-						</a>
+						{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
 					</td>
 					<td class="message">
 						<span class="message-wrapper">
diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl
index 0657eaba1d..2acf7c58b8 100644
--- a/templates/repo/commits_list_small.tmpl
+++ b/templates/repo/commits_list_small.tmpl
@@ -3,7 +3,7 @@
 {{range .comment.Commits}}
 	{{$tag := printf "%s-%d" $.comment.HashTag $index}}
 	{{$index = Eval $index "+" 1}}
-	<div class="singular-commit" id="{{$tag}}">
+	<div class="flex-text-block" id="{{$tag}}">{{/*singular-commit*/}}
 		<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
 		{{if .User}}
 			<a class="avatar" href="{{.User.HomeLink}}">{{ctx.AvatarUtils.Avatar .User 20}}</a>
@@ -11,7 +11,8 @@
 			{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 20}}
 		{{end}}
 
-		{{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}}
+		{{$commitBaseLink := printf "%s/commit" $.comment.Issue.PullRequest.BaseRepo.Link}}
+		{{$commitLink:= printf "%s/%s" $commitBaseLink (PathEscape .ID.String)}}
 
 		<span class="tw-flex-1 tw-font-mono gt-ellipsis" title="{{.Summary}}">
 			{{- ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx) -}}
@@ -21,29 +22,9 @@
 			<button class="ui button ellipsis-button show-panel toggle" data-panel="[data-singular-commit-body-for='{{$tag}}']">...</button>
 		{{end}}
 
-		<span class="shabox tw-flex tw-items-center">
+		<span class="tw-flex tw-items-center tw-gap-2">
 			{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
-			{{$class := "ui sha label"}}
-			{{if .Signature}}
-				{{$class = (print $class " isSigned")}}
-				{{if .Verification.Verified}}
-					{{if eq .Verification.TrustStatus "trusted"}}
-						{{$class = (print $class " isVerified")}}
-					{{else if eq .Verification.TrustStatus "untrusted"}}
-						{{$class = (print $class " isVerifiedUntrusted")}}
-					{{else}}
-						{{$class = (print $class " isVerifiedUnmatched")}}
-					{{end}}
-				{{else if .Verification.Warning}}
-					{{$class = (print $class " isWarning")}}
-				{{end}}
-			{{end}}
-			<a href="{{$commitLink}}" rel="nofollow" class="tw-ml-2 {{$class}}">
-				<span class="shortsha">{{ShortSha .ID.String}}</span>
-				{{if .Signature}}
-					{{template "repo/shabox_badge" dict "root" $.root "verification" .Verification}}
-				{{end}}
-			</a>
+			{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
 		</span>
 	</div>
 	{{if IsMultilineCommitMessage .Message}}
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index a06cd2ddd1..cb612bc27c 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -1,5 +1,7 @@
 {{$file := .file}}
-{{$blobExcerptLink := print (or ctx.RootData.CommitRepoLink ctx.RootData.RepoLink) (Iif $.root.PageIsWiki "/wiki" "") "/blob_excerpt/" (PathEscape $.root.AfterCommitID) "?"}}
+{{$repoLink := or ctx.RootData.CommitRepoLink ctx.RootData.RepoLink}}
+{{$afterCommitID := or $.root.AfterCommitID "no-after-commit-id"}}{{/* this tmpl is also used by the PR Conversation page, so the "AfterCommitID" may not exist */}}
+{{$blobExcerptLink := print $repoLink (Iif $.root.PageIsWiki "/wiki" "") "/blob_excerpt/" (PathEscape $afterCommitID) "?"}}
 <colgroup>
 	<col width="50">
 	<col width="50">
diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
index f1d0e62330..6af0ba1f0f 100644
--- a/templates/repo/graph/commits.tmpl
+++ b/templates/repo/graph/commits.tmpl
@@ -5,33 +5,13 @@
 				{{if $commit.OnlyRelation}}
 					<span></span>
 				{{else}}
-					<span class="sha" id="{{$commit.ShortRev}}">
-						{{$class := "ui sha label"}}
-						{{if $commit.Commit.Signature}}
-							{{$class = (print $class " isSigned")}}
-							{{if $commit.Verification.Verified}}
-								{{if eq $commit.Verification.TrustStatus "trusted"}}
-									{{$class = (print $class " isVerified")}}
-								{{else if eq $commit.Verification.TrustStatus "untrusted"}}
-									{{$class = (print $class " isVerifiedUntrusted")}}
-								{{else}}
-									{{$class = (print $class " isVerifiedUnmatched")}}
-								{{end}}
-							{{else if $commit.Verification.Warning}}
-								{{$class = (print $class " isWarning")}}
-							{{end}}
-						{{end}}
-						<a href="{{$.RepoLink}}/commit/{{$commit.Rev|PathEscape}}" rel="nofollow" class="{{$class}}">
-							<span class="shortsha">{{ShortSha $commit.Commit.ID.String}}</span>
-							{{- if $commit.Commit.Signature -}}
-								{{template "repo/shabox_badge" dict "root" $ "verification" $commit.Verification}}
-							{{- end -}}
-						</a>
-					</span>
-					<span class="message tw-inline-block gt-ellipsis tw-mr-2">
+					{{template "repo/commit_sign_badge" dict "Commit" $commit.Commit "CommitBaseLink" (print $.RepoLink "/commit") "CommitSignVerification" $commit.Verification}}
+
+					<span class="message tw-inline-block gt-ellipsis">
 						<span>{{ctx.RenderUtils.RenderCommitMessage $commit.Subject ($.Repository.ComposeMetas ctx)}}</span>
 					</span>
-					<span class="commit-refs tw-flex tw-items-center tw-mr-1">
+
+					<span class="commit-refs flex-text-inline">
 						{{range $commit.Refs}}
 							{{$refGroup := .RefGroup}}
 							{{if eq $refGroup "pull"}}
@@ -56,7 +36,8 @@
 							{{end}}
 						{{end}}
 					</span>
-					<span class="author tw-flex tw-items-center tw-mr-2 tw-gap-1">
+
+					<span class="author flex-text-inline">
 						{{$userName := $commit.Commit.Author.Name}}
 						{{if $commit.User}}
 							{{if and $commit.User.FullName DefaultShowFullName}}
@@ -69,7 +50,8 @@
 							{{$userName}}
 						{{end}}
 					</span>
-					<span class="time tw-flex tw-items-center">{{DateUtils.FullTime $commit.Date}}</span>
+
+					<span class="time flex-text-inline">{{DateUtils.FullTime $commit.Date}}</span>
 				{{end}}
 			</li>
 		{{end}}
diff --git a/templates/repo/latest_commit.tmpl b/templates/repo/latest_commit.tmpl
index 34a5df8f77..b176b4190c 100644
--- a/templates/repo/latest_commit.tmpl
+++ b/templates/repo/latest_commit.tmpl
@@ -1,3 +1,4 @@
+<div class="latest-commit">
 {{if not .LatestCommit}}
 	…
 {{else}}
@@ -14,13 +15,11 @@
 			<span class="author-wrapper" title="{{.LatestCommit.Author.Name}}"><strong>{{.LatestCommit.Author.Name}}</strong></span>
 		{{end}}
 	{{end}}
-	<a rel="nofollow" class="ui sha label {{if .LatestCommit.Signature}} isSigned {{if .LatestCommitVerification.Verified}} isVerified{{if eq .LatestCommitVerification.TrustStatus "trusted"}}{{else if eq .LatestCommitVerification.TrustStatus "untrusted"}}Untrusted{{else}}Unmatched{{end}}{{else if .LatestCommitVerification.Warning}} isWarning{{end}}{{end}}" href="{{.RepoLink}}/commit/{{PathEscape .LatestCommit.ID.String}}">
-		<span class="shortsha">{{ShortSha .LatestCommit.ID.String}}</span>
-		{{if .LatestCommit.Signature}}
-			{{template "repo/shabox_badge" dict "root" $ "verification" .LatestCommitVerification}}
-		{{end}}
-	</a>
+
+	{{template "repo/commit_sign_badge" dict "Commit" .LatestCommit "CommitBaseLink" (print .RepoLink "/commit") "CommitSignVerification" .LatestCommitVerification}}
+
 	{{template "repo/commit_statuses" dict "Status" .LatestCommitStatus "Statuses" .LatestCommitStatuses}}
+
 	{{$commitLink:= printf "%s/commit/%s" .RepoLink (PathEscape .LatestCommit.ID.String)}}
 	<span class="grey commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .LatestCommit.Message $commitLink ($.Repository.ComposeMetas ctx)}}</span>
 		{{if IsMultilineCommitMessage .LatestCommit.Message}}
@@ -29,3 +28,4 @@
 		{{end}}
 	</span>
 {{end}}
+</div>
diff --git a/templates/repo/shabox_badge.tmpl b/templates/repo/shabox_badge.tmpl
deleted file mode 100644
index 36fc9e04b1..0000000000
--- a/templates/repo/shabox_badge.tmpl
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="ui detail icon button">
-	{{if .verification.Verified}}
-		<div title="{{if eq .verification.TrustStatus "trusted"}}{{else if eq .verification.TrustStatus "untrusted"}}{{ctx.Locale.Tr "repo.commits.signed_by_untrusted_user"}}: {{else}}{{ctx.Locale.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}: {{end}}{{.verification.Reason}}">
-		{{if ne .verification.SigningUser.ID 0}}
-			{{svg "gitea-lock"}}
-			{{ctx.AvatarUtils.Avatar .verification.SigningUser 16 "signature"}}
-		{{else}}
-			<span title="{{ctx.Locale.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
-			{{ctx.AvatarUtils.AvatarByEmail .verification.SigningEmail "" 16 "signature"}}
-		{{end}}
-		</div>
-	{{else}}
-		<span title="{{ctx.Locale.Tr .verification.Reason}}">{{svg "gitea-unlock"}}</span>
-	{{end}}
-</div>
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 86366ae053..0a43e3db54 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -12,9 +12,7 @@
 
 	{{if not .ReadmeInList}}
 		<div id="repo-file-commit-box" class="ui segment list-header tw-mb-4 tw-flex tw-justify-between">
-			<div class="latest-commit">
-				{{template "repo/latest_commit" .}}
-			</div>
+			{{template "repo/latest_commit" .}}
 			{{if .LatestCommit}}
 				{{if .LatestCommit.Committer}}
 					<div class="text grey age">
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 2d555e4c2e..01bb70e06f 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -1,7 +1,7 @@
 {{/* use grid layout, still use the old ID because there are many other CSS styles depending on this ID */}}
 <div id="repo-files-table" {{if .HasFilesWithoutLatestCommit}}hx-indicator="#repo-files-table .repo-file-cell.message" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
 	<div class="repo-file-line repo-file-last-commit">
-		<div class="latest-commit">{{template "repo/latest_commit" .}}</div>
+		{{template "repo/latest_commit" .}}
 		<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
 	</div>
 	{{if .HasParentPath}}
diff --git a/tests/integration/repo_commits_test.go b/tests/integration/repo_commits_test.go
index bb65d9e04a..fc066e06d3 100644
--- a/tests/integration/repo_commits_test.go
+++ b/tests/integration/repo_commits_test.go
@@ -30,7 +30,7 @@ func TestRepoCommits(t *testing.T) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	doc := NewHTMLParser(t, resp.Body)
-	commitURL, exists := doc.doc.Find("#commits-table tbody tr td.sha a").Attr("href")
+	commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
 	assert.True(t, exists)
 	assert.NotEmpty(t, commitURL)
 }
@@ -46,7 +46,7 @@ func doTestRepoCommitWithStatus(t *testing.T, state string, classes ...string) {
 
 	doc := NewHTMLParser(t, resp.Body)
 	// Get first commit URL
-	commitURL, exists := doc.doc.Find("#commits-table tbody tr td.sha a").Attr("href")
+	commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
 	assert.True(t, exists)
 	assert.NotEmpty(t, commitURL)
 
@@ -64,7 +64,7 @@ func doTestRepoCommitWithStatus(t *testing.T, state string, classes ...string) {
 
 	doc = NewHTMLParser(t, resp.Body)
 	// Check if commit status is displayed in message column (.tippy-target to ignore the tippy trigger)
-	sel := doc.doc.Find("#commits-table tbody tr td.message .tippy-target .commit-status")
+	sel := doc.doc.Find("#commits-table .message .tippy-target .commit-status")
 	assert.Equal(t, 1, sel.Length())
 	for _, class := range classes {
 		assert.True(t, sel.HasClass(class))
@@ -140,7 +140,7 @@ func TestRepoCommitsStatusParallel(t *testing.T) {
 
 	doc := NewHTMLParser(t, resp.Body)
 	// Get first commit URL
-	commitURL, exists := doc.doc.Find("#commits-table tbody tr td.sha a").Attr("href")
+	commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
 	assert.True(t, exists)
 	assert.NotEmpty(t, commitURL)
 
@@ -175,7 +175,7 @@ func TestRepoCommitsStatusMultiple(t *testing.T) {
 
 	doc := NewHTMLParser(t, resp.Body)
 	// Get first commit URL
-	commitURL, exists := doc.doc.Find("#commits-table tbody tr td.sha a").Attr("href")
+	commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
 	assert.True(t, exists)
 	assert.NotEmpty(t, commitURL)
 
@@ -200,6 +200,6 @@ func TestRepoCommitsStatusMultiple(t *testing.T) {
 
 	doc = NewHTMLParser(t, resp.Body)
 	// Check that the data-tippy="commit-statuses" (for trigger) and commit-status (svg) are present
-	sel := doc.doc.Find("#commits-table tbody tr td.message [data-tippy=\"commit-statuses\"] .commit-status")
+	sel := doc.doc.Find("#commits-table .message [data-tippy=\"commit-statuses\"] .commit-status")
 	assert.Equal(t, 1, sel.Length())
 }
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 04f3678f3a..e67d51bb4d 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -742,15 +742,10 @@ input:-webkit-autofill:active,
   font-family: var(--fonts-monospace);
   font-size: 13px;
   font-weight: var(--font-weight-normal);
-  margin: 0 6px;
-  padding: 5px 10px;
+  padding: 3px 5px;
   flex-shrink: 0;
 }
 
-.ui .sha.label .shortsha {
-  display: inline-block; /* not sure whether it is still needed */
-}
-
 .ui .button.truncate {
   display: inline-block;
   max-width: 100%;
diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css
index f8f7e35cdc..1ed541a695 100644
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@@ -57,6 +57,12 @@
   white-space: nowrap;
   display: flex;
   align-items: center;
+  gap: 0.25em;
+}
+
+#git-graph-container li .ui.label.commit-id-short {
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
 #git-graph-container li .node-relation {
@@ -112,17 +118,6 @@
   text-overflow: ellipsis;
 }
 
-#git-graph-container #rev-list .sha.label {
-  padding-top: 5px;
-  padding-bottom: 3px;
-}
-
-#git-graph-container #rev-list .sha.label .ui.detail.icon.button {
-  padding-top: 3px;
-  margin-top: -5px;
-  padding-bottom: 1px;
-}
-
 #git-graph-container #graph-raw-list {
   margin: 0;
 }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 6fdc9ec2a8..dcc4161c59 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -120,15 +120,7 @@ td .commit-summary {
   align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-
-@media (max-width: 767.98px) {
-  .latest-commit .sha {
-    display: none;
-  }
-  .latest-commit .commit-summary {
-    margin-left: 8px;
-  }
+  gap: 0.25em;
 }
 
 .repo-path {
@@ -605,15 +597,6 @@ td .commit-summary {
   margin-right: 0.25em;
 }
 
-.singular-commit {
-  display: flex;
-  align-items: center;
-}
-
-.singular-commit .badge {
-  height: 30px !important;
-}
-
 .repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
   float: right;
   margin-right: 8px;
@@ -936,14 +919,6 @@ td .commit-summary {
   width: 200px;
 }
 
-.repository #commits-table thead .shatd {
-  text-align: center;
-}
-
-.repository #commits-table td.sha .sha.label {
-  margin: 0;
-}
-
 .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
   background-color: var(--color-light) !important;
 }
@@ -1440,12 +1415,6 @@ td .commit-summary {
   padding-top: 15px;
 }
 
-.commit-header-row {
-  min-height: 50px !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
 .commit-header-buttons {
   display: flex;
   gap: 4px;
@@ -2128,18 +2097,6 @@ tbody.commit-list {
   .repository.view.issue .comment-list .timeline .comment-header-right .role-label {
     display: none;
   }
-  .commit-header-row .ui.horizontal.list {
-    width: 100%;
-    overflow-x: auto;
-    margin-top: 2px;
-  }
-  .commit-header-row .ui.horizontal.list .item {
-    align-items: center;
-    display: flex;
-  }
-  .commit-header-row .author {
-    padding: 3px 0;
-  }
   .commit-header h3 {
     flex-basis: auto !important;
     margin-bottom: 0.5rem !important;
diff --git a/web_src/css/repo/commit-sign.css b/web_src/css/repo/commit-sign.css
index e757030419..834fdd95d1 100644
--- a/web_src/css/repo/commit-sign.css
+++ b/web_src/css/repo/commit-sign.css
@@ -1,272 +1,60 @@
-
-.repository .ui.attached.isSigned.isWarning {
-  border-left: 1px solid var(--color-error-border);
-  border-right: 1px solid var(--color-error-border);
-}
-
-.repository .ui.attached.isSigned.isWarning.top,
-.repository .ui.attached.isSigned.isWarning.message {
-  border-top: 1px solid var(--color-error-border);
-}
-
-.repository .ui.attached.isSigned.isWarning.message {
-  box-shadow: none;
-  background-color: var(--color-error-bg);
-  color: var(--color-error-text);
-}
-
-.repository .ui.attached.isSigned.isWarning.message .ui.text {
-  color: var(--color-error-text);
-}
-
-.repository .ui.attached.isSigned.isWarning:last-child,
-.repository .ui.attached.isSigned.isWarning.bottom {
-  border-bottom: 1px solid var(--color-error-border);
-}
-
-.repository .ui.attached.isSigned.isVerified {
-  border-left: 1px solid var(--color-success-border);
-  border-right: 1px solid var(--color-success-border);
-}
-
-.repository .ui.attached.isSigned.isVerified.top,
-.repository .ui.attached.isSigned.isVerified.message {
-  border-top: 1px solid var(--color-success-border);
-}
-
-.repository .ui.attached.isSigned.isVerified.message {
-  box-shadow: none;
-  background-color: var(--color-success-bg);
-  color: var(--color-success-text);
-}
-
-.repository .ui.attached.isSigned.isVerified.message .pull-right {
-  color: var(--color-text);
-}
-
-.repository .ui.attached.isSigned.isVerified.message .ui.text {
-  color: var(--color-success-text);
-}
-
-.repository .ui.attached.isSigned.isVerified:last-child,
-.repository .ui.attached.isSigned.isVerified.bottom {
-  border-bottom: 1px solid var(--color-success-border);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted,
-.repository .ui.attached.isSigned.isVerifiedUnmatched {
-  border-left: 1px solid var(--color-warning-border);
-  border-right: 1px solid var(--color-warning-border);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted.top,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.top,
-.repository .ui.attached.isSigned.isVerifiedUntrusted.message,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.message {
-  border-top: 1px solid var(--color-warning-border);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted.message,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.message {
-  box-shadow: none;
-  background-color: var(--color-warning-bg);
-  color: var(--color-warning-text);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text {
-  color: var(--color-warning-text);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted:last-child,
-.repository .ui.attached.isSigned.isVerifiedUnmatched:last-child,
-.repository .ui.attached.isSigned.isVerifiedUntrusted.bottom,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.bottom {
-  border-bottom: 1px solid var(--color-warning-border);
-}
-
-.repository #commits-table td.sha .sha.label,
-.repository #repo-files-table .sha.label,
-.repository #repo-file-commit-box .sha.label,
-.repository #rev-list .sha.label,
-.repository .timeline-item.commits-list .singular-commit .sha.label {
+.ui.label.commit-id-short,
+.ui.label.commit-sign-badge {
   border: 1px solid var(--color-light-border);
+  font-size: 13px;
+  font-weight: var(--font-weight-normal);
+  padding: 3px 5px;
+  flex-shrink: 0;
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon,
-.repository #repo-files-table .sha.label .detail.icon,
-.repository #repo-file-commit-box .sha.label .detail.icon,
-.repository #rev-list .sha.label .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon {
-  background: var(--color-light);
-  margin: -6px -10px -4px 0;
-  padding: 5px 4px 5px 6px;
-  border-left: 1px solid var(--color-light-border);
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.ui.label.commit-id-short {
+  font-family: var(--fonts-monospace);
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon .svg,
-.repository #repo-files-table .sha.label .detail.icon .svg,
-.repository #repo-file-commit-box .sha.label .detail.icon .svg,
-.repository #rev-list .sha.label .detail.icon .svg,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg {
-  margin: 0 0.25em 0 0;
-}
-
-.repository #commits-table td.sha .sha.label .detail.icon > div,
-.repository #repo-files-table .sha.label .detail.icon > div,
-.repository #repo-file-commit-box .sha.label .detail.icon > div,
-.repository #rev-list .sha.label .detail.icon > div,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div {
-  display: flex;
-  align-items: center;
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isWarning,
-.repository #repo-files-table .sha.label.isSigned.isWarning,
-.repository #repo-file-commit-box .sha.label.isSigned.isWarning,
-.repository #rev-list .sha.label.isSigned.isWarning,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning {
-  border: 1px solid var(--color-red-badge);
-  background: var(--color-red-badge-bg);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon,
-.repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon,
-.repository #rev-list .sha.label.isSigned.isWarning .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon {
-  border-left: 1px solid var(--color-red-badge);
-  color: var(--color-red-badge);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isWarning:hover,
-.repository #repo-files-table .sha.label.isSigned.isWarning:hover,
-.repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover,
-.repository #rev-list .sha.label.isSigned.isWarning:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover {
-  background: var(--color-red-badge-hover-bg) !important;
+.ui.label.commit-id-short > .commit-sign-badge {
+  margin: 0;
+  padding: 0;
+  border: 0 !important;
+  border-radius: 0;
+  background: transparent;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerified,
-.repository #repo-files-table .sha.label.isSigned.isVerified,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerified,
-.repository #rev-list .sha.label.isSigned.isVerified,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified {
-  border: 1px solid var(--color-green-badge);
-  background: var(--color-green-badge-bg);
+.ui.label.commit-id-short > .commit-sign-badge:hover {
+  background: transparent !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerified .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon {
-  border-left: 1px solid var(--color-green-badge);
-  color: var(--color-green-badge);
+.commit-is-signed.sign-trusted {
+  border: 1px solid var(--color-green-badge) !important;
+  background: var(--color-green-badge-bg) !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerified:hover,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover,
-.repository #rev-list .sha.label.isSigned.isVerified:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover {
+.commit-is-signed.sign-trusted:hover {
   background: var(--color-green-badge-hover-bg) !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted {
-  border: 1px solid var(--color-yellow-badge);
-  background: var(--color-yellow-badge-bg);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon {
-  border-left: 1px solid var(--color-yellow-badge);
-  color: var(--color-yellow-badge);
+.commit-is-signed.sign-untrusted {
+  border: 1px solid var(--color-yellow-badge) !important;
+  background: var(--color-yellow-badge-bg) !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover {
+.commit-is-signed.sign-untrusted:hover {
   background: var(--color-yellow-badge-hover-bg) !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched {
-  border: 1px solid var(--color-orange-badge);
-  background: var(--color-orange-badge-bg);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon {
-  border-left: 1px solid var(--color-orange-badge);
-  color: var(--color-orange-badge);
+.commit-is-signed.sign-unmatched {
+  border: 1px solid var(--color-orange-badge) !important;
+  background: var(--color-orange-badge-bg) !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover {
+.commit-is-signed.sign-unmatched:hover {
   background: var(--color-orange-badge-hover-bg) !important;
 }
 
-.singular-commit .shabox .sha.label {
-  margin: 0;
-  border: 1px solid var(--color-light-border);
+.commit-is-signed.sign-warning {
+  border: 1px solid var(--color-red-badge) !important;
+  background: var(--color-red-badge-bg) !important;
 }
 
-.singular-commit .shabox .sha.label.isSigned.isWarning {
-  border: 1px solid var(--color-red-badge);
-  background: var(--color-red-badge-bg);
-}
-
-.singular-commit .shabox .sha.label.isSigned.isWarning:hover {
+.commit-is-signed.sign-warning:hover {
   background: var(--color-red-badge-hover-bg) !important;
 }
-
-.singular-commit .shabox .sha.label.isSigned.isVerified {
-  border: 1px solid var(--color-green-badge);
-  background: var(--color-green-badge-bg);
-}
-
-.singular-commit .shabox .sha.label.isSigned.isVerified:hover {
-  background: var(--color-green-badge-hover-bg) !important;
-}
-
-.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted {
-  border: 1px solid var(--color-yellow-badge);
-  background: var(--color-yellow-badge-bg);
-}
-
-.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover {
-  background: var(--color-yellow-badge-hover-bg) !important;
-}
-
-.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched {
-  border: 1px solid var(--color-orange-badge);
-  background: var(--color-orange-badge-bg);
-}
-
-.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover {
-  background: var(--color-orange-badge-hover-bg) !important;
-}