chore(ui): clean up hashbox CSS, small design changes (#7822)

Co-authored-by: Beowulf <beowulf@beocode.eu> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7822 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Reviewed-by: Beowulf <beowulf@beocode.eu>
2025-06-20 16:10:50 +00:00 · 2025-05-25 12:51:27 +02:00 · 2025-05-25 12:51:27 +02:00 · 0dd605a8d3
commit 0dd605a8d3
parent 62ec469394
13 changed files with 178 additions and 212 deletions
--- a/routers/web/devtest/devtest.go
+++ b/routers/web/devtest/devtest.go
@ -11,6 +11,8 @@ import (
 	"strings"
 	"time"

+	"forgejo.org/models/asymkey"
+	"forgejo.org/models/user"
 	"forgejo.org/modules/base"
 	"forgejo.org/modules/templates"
 	"forgejo.org/services/context"
@ -65,6 +67,19 @@ func Tmpl(ctx *context.Context) {
 	ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second)
 	ctx.Data["TimeFuture1y"] = now.Add(1 * 366 * 86400 * time.Second)

+	userNonZero := &user.User{ID: 1}
+	ctx.Data["TrustedVerif"] = &asymkey.ObjectVerification{Verified: true, Reason: asymkey.NotSigned, SigningUser: userNonZero, TrustStatus: "trusted"}
+	ctx.Data["UntrustedVerif"] = &asymkey.ObjectVerification{Verified: true, Reason: asymkey.NotSigned, SigningUser: userNonZero, TrustStatus: "untrusted"}
+	ctx.Data["UnmatchedVerif"] = &asymkey.ObjectVerification{Verified: true, Reason: asymkey.NotSigned, SigningUser: userNonZero, TrustStatus: ""}
+	ctx.Data["WarnVerif"] = &asymkey.ObjectVerification{Verified: false, Warning: true, Reason: asymkey.NotSigned, SigningUser: userNonZero}
+	ctx.Data["UnknownVerif"] = &asymkey.ObjectVerification{Verified: false, Warning: false, Reason: asymkey.NotSigned, SigningUser: userNonZero}
+	userUnknown := &user.User{ID: 0}
+	ctx.Data["TrustedVerifUnk"] = &asymkey.ObjectVerification{Verified: true, Reason: asymkey.NotSigned, SigningUser: userUnknown, TrustStatus: "trusted"}
+	ctx.Data["UntrustedVerifUnk"] = &asymkey.ObjectVerification{Verified: true, Reason: asymkey.NotSigned, SigningUser: userUnknown, TrustStatus: "untrusted"}
+	ctx.Data["UnmatchedVerifUnk"] = &asymkey.ObjectVerification{Verified: true, Reason: asymkey.NotSigned, SigningUser: userUnknown, TrustStatus: ""}
+	ctx.Data["WarnVerifUnk"] = &asymkey.ObjectVerification{Verified: false, Warning: true, Reason: asymkey.NotSigned, SigningUser: userUnknown}
+	ctx.Data["UnknownVerifUnk"] = &asymkey.ObjectVerification{Verified: false, Warning: false, Reason: asymkey.NotSigned, SigningUser: userUnknown}
+
 	if ctx.Req.Method == "POST" {
 		_ = ctx.Req.ParseForm()
 		ctx.Flash.Info("form: "+ctx.Req.Method+" "+ctx.Req.RequestURI+"<br>"+
--- a/templates/devtest/hashbox.tmpl
+++ b/templates/devtest/hashbox.tmpl
@ -0,0 +1,82 @@
+{{template "base/head" .}}
+
+<div class="page-content devtest ui container">
+	<h1>Hashbox (shabox)</h1>
+
+	<h2>Unsigned</h2>
+	{{template "repo/shabox" (dict
+		"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+	)}}
+
+	<h2>Unknown signature</h2>
+	<div class="tw-flex">
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .UnknownVerif
+		)}}
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .UnknownVerifUnk
+		)}}
+	</div>
+
+	<h2>Trusted</h2>
+	<div class="tw-flex">
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .TrustedVerif
+		)}}
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .TrustedVerifUnk
+		)}}
+	</div>
+
+	<h2>Untrusted</h2>
+	<div class="tw-flex">
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .UntrustedVerif
+		)}}
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .UntrustedVerifUnk
+		)}}
+	</div>
+
+	<h2>Unmatched</h2>
+	<div class="tw-flex">
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .UnmatchedVerif
+		)}}
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .UnmatchedVerifUnk
+		)}}
+	</div>
+
+	<h2>Warning</h2>
+	<div class="tw-flex">
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .WarnVerif
+		)}}
+		{{template "repo/shabox" (dict
+			"sha1" "475e3471b4e8da8776fe7e66a3390c8a30c19f08"
+			"signature" "true"
+			"verification" .WarnVerifUnk
+		)}}
+	</div>
+</div>
+
+{{template "base/footer" .}}
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@ -176,16 +176,22 @@
 							<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>
+									<a class="ui primary sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">
+										<span class="shortsha">{{ShortSha .}}</span>
+									</a>
 								{{else}}
-									<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">{{ShortSha .}}</a>
+									<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">
+										<span class="shortsha">{{ShortSha .}}</span>
+									</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>
+						<span class="ui primary sha label">
+							<span class="shortsha">{{ShortSha .CommitID}}</span>
+						</span>
 					</div>
 				</div>
 		</div>
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@ -10,9 +10,13 @@
 	</div>
 	{{if .IsDiffCompare}}
 		<div class="commits-table-right tw-whitespace-nowrap">
-			<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID | PathEscape}}" class="ui green sha label tw-mx-0">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
+			<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID | PathEscape}}" class="ui primary sha label tw-mx-0">
+				<span class="shortsha">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</span>
+			</a>
 			...
-			<a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID | PathEscape}}" class="ui green sha label tw-mx-0">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</a>
+			<a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID | PathEscape}}" class="ui primary sha label tw-mx-0">
+				<span class="shortsha">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</span>
+			</a>
 		</div>
 	{{end}}
 </h4>
--- a/templates/repo/editor/cherry_pick.tmpl
+++ b/templates/repo/editor/cherry_pick.tmpl
@ -11,7 +11,7 @@
 			<div class="repo-editor-header">
 				<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
 					{{$shaurl := printf "%s/commit/%s" $.RepoLink (PathEscape .SHA)}}
-					{{$shalink := HTMLFormat `<a class="ui primary sha label" href="%s">%s</a>` $shaurl (ShortSha .SHA)}}
+					{{$shalink := HTMLFormat `<a class="ui primary sha label" href="%s"><span class="shortsha">%s</span></a>` $shaurl (ShortSha .SHA)}}
 					{{if eq .CherryPickType "revert"}}
 						{{ctx.Locale.Tr "repo.editor.revert" $shalink}}
 					{{else}}
--- a/templates/repo/settings/lfs_file_find.tmpl
+++ b/templates/repo/settings/lfs_file_find.tmpl
@ -26,11 +26,15 @@
 								{{if .ParentHashes}}
 									{{ctx.Locale.Tr "repo.diff.parent"}}
 									{{range .ParentHashes}}
-										<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.String}}">{{ShortSha .String}}</a>
+										<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.String}}">
+											<span class="shortsha">{{ShortSha .String}}</span>
+										</a>
 									{{end}}
 								{{end}}
 								{{ctx.Locale.Tr "repo.diff.commit"}}
-								<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">{{ShortSha .SHA}}</a>
+								<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">
+									<span class="shortsha">{{ShortSha .SHA}}</span>
+								</a>
 							</td>
 							<td>{{DateUtils.TimeSince .When}}</td>
 						</tr>
--- a/templates/repo/settings/webhook/history.tmpl
+++ b/templates/repo/settings/webhook/history.tmpl
@ -26,7 +26,9 @@
 							{{else}}
 								<span class="text red">{{svg "octicon-alert"}}</span>
 							{{end}}
-							<a class="ui primary sha label toggle button show-panel" data-panel="#info-{{.ID}}">{{.UUID}}</a>
+							<a class="ui primary sha label toggle button show-panel" data-panel="#info-{{.ID}}">
+								<span class="shortsha">{{.UUID}}</span>
+							</a>
 						</div>
 						<span class="text grey">
 							{{DateUtils.TimeSince .Delivered}}
--- a/templates/repo/shabox.tmpl
+++ b/templates/repo/shabox.tmpl
@ -16,6 +16,6 @@
 <a {{if .commitLink}}href="{{.commitLink}}"{{end}} rel="nofollow" class="{{$class}}">
 	<span class="shortsha">{{ShortSha .sha1}}</span>
 	{{- if .signature -}}
-		{{template "repo/shabox_badge" dict "verification" .verification "svgSize" .svgSize}}
+		{{template "repo/shabox_badge" dict "verification" .verification}}
 	{{- end -}}
 </a>
--- a/templates/repo/shabox_badge.tmpl
+++ b/templates/repo/shabox_badge.tmpl
@ -1,15 +1,15 @@
-<div class="ui detail icon button">
+<div class="signature">
 	{{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" .svgSize}}
-			{{ctx.AvatarUtils.Avatar .verification.SigningUser 28 "signature"}}
-		{{else}}
-			<span title="{{ctx.Locale.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog" .svgSize}}</span>
-			{{ctx.AvatarUtils.AvatarByEmail .verification.SigningEmail "" 28 "signature"}}
-		{{end}}
-		</div>
+		<span class="signature-author" 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 28}}
+			{{else}}
+				<span title="{{ctx.Locale.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
+				{{ctx.AvatarUtils.AvatarByEmail .verification.SigningEmail "" 28}}
+			{{end}}
+		</span>
 	{{else}}
-		<span title="{{ctx.Locale.Tr .verification.Reason}}">{{svg "gitea-unlock" .svgSize}}</span>
+		<span title="{{ctx.Locale.Tr .verification.Reason}}">{{svg "gitea-unlock"}}</span>
 	{{end}}
 </div>
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@ -96,7 +96,6 @@
 									"commitLink" (printf "%s/commit/%s" $repoLink .Sha1)
 									"signature" .Signature
 									"verification" .Verification
-									"svgSize" 13
 								)}}
 								<span class="text truncate">
 									{{RenderCommitMessage $.Context .Message ($repo.ComposeMetas ctx)}}
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@ -809,19 +809,6 @@ img.ui.avatar,
  margin-left: 25px;
 }

-.ui .sha.label {
-  font-family: var(--fonts-monospace);
-  font-size: 13px;
-  font-weight: var(--font-weight-normal);
-  margin: 0 6px;
-  padding: 5px 10px;
-  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%;
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@ -125,14 +125,7 @@
 }

 #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;
+  height: 23px;
 }

 #git-graph-container #rev-list .author img.ui.avatar {
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@ -865,43 +865,6 @@ td .commit-summary {

 .singular-commit .shabox .sha.label {
  margin: 0;
-  border: 1px solid var(--color-light-border);
-}
-
-.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 {
-  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;
 }

@media (min-width: 768px) {
@ -1272,189 +1235,100 @@ td .commit-summary {
  background-color: var(--color-light) !important;
 }

-#activity-feed .sha.label,
-.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 .sha.label {
+  font-family: var(--fonts-monospace);
+  font-size: 13px;
+  font-weight: var(--font-weight-normal);
+  margin: 0 6px;
+  padding: 0;
+  gap: 0;
+  flex-shrink: 0;
+}
+
+.ui.ui .sha.label {
  border: 1px solid var(--color-light-border);
 }

-#activity-feed .sha.label .ui.signature.avatar {
-  height: 13px;
-  margin-bottom: 0;
-  width: 13px;
+.ui.primary.sha.label {
+  border: none !important;
+  background: var(--color-primary) !important;
 }

-.repository #commits-table td.sha .sha.label .ui.signature.avatar,
-.repository #repo-files-table .sha.label .ui.signature.avatar,
-.repository #repo-file-commit-box .sha.label .ui.signature.avatar,
-.repository #rev-list .sha.label .ui.signature.avatar,
-.repository .timeline-item.commits-list .singular-commit .sha.label .ui.signature.avatar {
+.sha.label .shortsha {
+  padding: 0.33rem 0.5rem;
+}
+
+.sha.label .signature {
+  color: var(--color-text);
+  background: var(--color-light);
+  padding: 0.25rem 0.33rem;
+  border-left: 1px solid var(--color-light-border);
+}
+
+.sha.label .signature-author {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.sha.label .signature-author .avatar {
  height: 16px;
  margin-bottom: 0;
  width: 16px;
 }

-#activity-feed .sha.label .detail.icon,
-.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;
-}
-
-#activity-feed .sha.label .detail.icon img,
-.repository #commits-table td.sha .sha.label .detail.icon img,
-.repository #repo-files-table .sha.label .detail.icon img,
-.repository #repo-file-commit-box .sha.label .detail.icon img,
-.repository #rev-list .sha.label .detail.icon img,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon img {
-  margin-right: 0;
-}
-
-#activity-feed .sha.label .detail.icon .svg,
-.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;
-}
-
-#activity-feed .sha.label .detail.icon > div,
-.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;
-}
-
-#activity-feed .sha.label.isSigned.isWarning,
-.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 {
+.sha.label.isSigned.isWarning {
  border: 1px solid var(--color-red-badge);
  background: var(--color-red-badge-bg);
 }

-#activity-feed .sha.label.isSigned.isWarning .detail.icon,
-.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 {
+.sha.label.isSigned.isWarning .signature {
  border-left: 1px solid var(--color-red-badge);
  color: var(--color-red-badge);
 }

-#activity-feed .sha.label.isSigned.isWarning:hover,
-.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 {
+.sha.label.isSigned.isWarning:hover {
  background: var(--color-red-badge-hover-bg) !important;
 }

-#activity-feed .sha.label.isSigned.isVerified,
-.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 {
+.sha.label.isSigned.isVerified {
  border: 1px solid var(--color-green-badge);
  background: var(--color-green-badge-bg);
 }

-#activity-feed .sha.label.isSigned.isVerified .detail.icon,
-.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 {
+.sha.label.isSigned.isVerified .signature {
  border-left: 1px solid var(--color-green-badge);
  color: var(--color-green-badge);
 }

-#activity-feed .sha.label.isSigned.isVerified:hover,
-.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 {
+.sha.label.isSigned.isVerified:hover {
  background: var(--color-green-badge-hover-bg) !important;
 }

-#activity-feed .sha.label.isSigned.isVerifiedUntrusted,
-.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 {
+.sha.label.isSigned.isVerifiedUntrusted {
  border: 1px solid var(--color-yellow-badge);
  background: var(--color-yellow-badge-bg);
 }

-#activity-feed .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.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 {
+.sha.label.isSigned.isVerifiedUntrusted .signature {
  border-left: 1px solid var(--color-yellow-badge);
  color: var(--color-yellow-badge);
 }

-#activity-feed .sha.label.isSigned.isVerifiedUntrusted:hover,
-.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 {
+.sha.label.isSigned.isVerifiedUntrusted:hover {
  background: var(--color-yellow-badge-hover-bg) !important;
 }

-#activity-feed .sha.label.isSigned.isVerifiedUnmatched,
-.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 {
+.sha.label.isSigned.isVerifiedUnmatched {
  border: 1px solid var(--color-orange-badge);
  background: var(--color-orange-badge-bg);
 }

-#activity-feed .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.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 {
+.sha.label.isSigned.isVerifiedUnmatched .signature {
  border-left: 1px solid var(--color-orange-badge);
  color: var(--color-orange-badge);
 }

-#activity-feed .sha.label.isSigned.isVerifiedUnmatched:hover,
-.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 {
+.sha.label.isSigned.isVerifiedUnmatched:hover {
  background: var(--color-orange-badge-hover-bg) !important;
 }