fix commit sign badge style

Author: lutinglt

styles/templates/repo/commit_sign_badge.ts

@@ -1,20 +1,35 @@
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 export const commitSignBadge = css`
-  .github-theme-sha {
-    border-radius: ${otherThemeVars.border.radius};
-    font-family:
-      -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji";
-    font-weight: 500;
-    padding: 0px 8px;
+  a.ui.label.commit-id-short.github-theme-commit-sha {
+    gap: 8px;
+    padding: unset;
+    margin: unset;
     height: 26px;
-    min-width: 85px; // 非等宽字体导致不对齐, 目前看到最大长度为 83px
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:hover {
-      background-color: ${themeVars.color.hover.self};
+    margin: 0 4px;
+    &.commit-is-signed {
+      &:hover {
+        background-color: unset !important;
+      }
+      span.ui.label.commit-sign-badge.commit-is-signed {
+        margin: unset;
+      }
+    }
+    .github-theme-sha {
+      border-radius: ${otherThemeVars.border.radius};
+      font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
+        "Segoe UI Emoji";
+      font-weight: 500;
+      padding: 0px 8px;
+      height: 26px;
+      min-width: 85px; // 非等宽字体导致不对齐, 目前看到最大长度为 83px
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:hover {
+        background-color: ${themeVars.color.hover.self};
+      }
     }
   }
 `;

styles/templates/repo/commits_list.ts

@@ -1,4 +1,4 @@
-import { css, themeVars, otherThemeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 const primary = "primary" as const;
 const secondary = "secondary" as const;
@@ -81,21 +81,6 @@ export const commitsList = css`
           border-radius: 9999px;
           height: 25px;
         }
-        .commit-id-short {
-          gap: 8px;
-          padding: unset;
-          margin: unset;
-          height: 28px;
-          margin: 0 4px;
-          &.commit-is-signed {
-            &:hover {
-              background-color: unset !important;
-            }
-            span.ui.label.commit-sign-badge.commit-is-signed {
-              margin: unset;
-            }
-          }
-        }
       }
       .actions {
         grid-area: ${actions};

templates/repo/commit_sign_badge.tmpl

@@ -56,7 +56,7 @@ so this template should be kept as small as possible, DO NOT put large component
 {{- end -}}
 
 {{- if $commit -}}
-<a {{if $commitBaseLink}}href="{{$commitBaseLink}}/{{$commit.ID}}"{{end}} class="ui label commit-id-short {{$extraClass}}" rel="nofollow">
+<a {{if $commitBaseLink}}href="{{$commitBaseLink}}/{{$commit.ID}}"{{end}} class="ui label commit-id-short {{$extraClass}} github-theme-commit-sha" rel="nofollow">
 {{- end -}}
 {{- if or (not $commit) $extraClass}}{{/* only show the lock icon if there is no commit info (icon only) or the commit is really signed */}}
 	<span class="ui label commit-sign-badge {{$extraClass}}">