fix issue/pr element styles

Author: lutinglt

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
           tar -zcf dist/theme-github-extra-pink.tar.gz --remove-files \
           dist/theme-github-pink-auto.css dist/theme-github-pink-light.css dist/theme-github-pink-dark.css dist/theme-github-pink-soft-dark.css
 
-          tar -zcf dist/theme-github-templates.tar.gz templates
+          tar -zcf dist/theme-github-templates.tar.gz templates options
           TAG="v$(npm run -s version)"
           gh release create "$TAG" dist/* --notes-file CHANGELOG.md --draft -t $TAG
         env:

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Optimize the selection style of items in the menu.
 - Optimize code block styles.
+- Optimize some element styles on Issue/PR page
 
 ##### Template File
 
@@ -15,3 +16,5 @@
 
 - Fixed extra lines under heatmap.
 - Supplement the PR operation panel status style in PR.
+- Fixed avatar size for approving users in PR
+- Fixed bot label styles in Issue/PR

options/locale/locale_zh-CN.ini

@@ -0,0 +1,4 @@
+[github-theme]
+verifed=已验证
+partially_verifed=部分验证
+unverifed=未验证

styles/components/issue.ts

@@ -275,6 +275,11 @@ export const prBranch = css`
   }
 `;
 
+const botLabelStyle = {
+  height: "20px",
+  padding: "0 6px!important",
+  marginLeft: "4px",
+};
 // 评论
 export const comment = css`
   .comment .comment-container {
@@ -299,6 +304,26 @@ export const comment = css`
     .comment-header {
       padding: 4px 4px 4px 16px;
       min-height: 38px;
+      .comment-header-left {
+        // bot 标签
+        .ui.basic.label {
+          ${botLabelStyle}
+        }
+        a:has(relative-time){
+          text-decoration: underline;
+        }
+        // 已编辑按钮
+        .content-history-menu {
+          color: ${themeVars.color.text.light.num1} !important;
+          .menu .item {
+            font-size: 12px;
+            .ui.avatar {
+              height: 20px;
+              width: 20px;
+            }
+          }
+        }
+      }
     }
     .comment-header-right {
       > .item,
@@ -311,12 +336,6 @@ export const comment = css`
         height: 20px;
         padding: 0 6px;
       }
-      // 隐藏顶部菜单的表情按钮
-      // 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题
-      // 很蛋疼, 希望 Gitea 早日使用 Github 的样式, 因为 Github 的更合理, 无论是操作的方便程度还是按钮的冗余度
-      // .ui.dropdown.action.select-reaction {
-      //   display: none;
-      // }
       .context-dropdown {
         height: 28px;
         padding: 0 6px;
@@ -526,11 +545,9 @@ export const prMerge = css`
       padding: 16px;
       display: grid;
       gap: 8px;
-      &.no-header {
-        &::before,
-        &::after {
-          display: none;
-        }
+      &::before,
+      &::after {
+        display: none;
       }
     }
   }
@@ -555,10 +572,20 @@ export const timeline = css`
         &.event {
           // 修复覆盖后的位置问题
           padding-left: 15px;
-          .avatar {
+          // 避免锚中批准的头像
+          .avatar-with-link .avatar {
             width: 20px;
             height: 20px;
           }
+          // 批准时间的头像
+          // 头部居中偏移量(头像高度 - 标准行信息高度) / 2: (40px - 32px) / 2 = 4px
+          .timeline-avatar {
+            top: -4px;
+          }
+          // bot 标签
+          .comment-text-line .ui.basic.label {
+            ${botLabelStyle}
+          }
           .badge {
             border: 2px solid ${themeVars.color.body};
           }
@@ -659,6 +686,18 @@ export const issueSidebar = css`
             margin-top: 0 !important;
             margin-bottom: 0 !important;
           }
+          // 评审人
+          .ui.relaxed.list {
+            .item {
+              // 操作图标按钮
+              a.muted.icon {
+                color: ${themeVars.color.text.light.num1};
+                &:hover {
+                  color: ${themeVars.color.primary.self};
+                }
+              }
+            }
+          }
           // 标签菜单项
           .ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) {
             // 修复标签菜单中描述文本过长没有换行挤掉标签的问题

styles/public/label.ts

@@ -129,7 +129,7 @@ export const shaLabel = css`
   // 验证提交附带的图标
   span.ui.label.commit-is-signed {
     height: 25px;
-    min-width: 50px;
+    min-width: 35px;
     justify-content: center;
     // 验证信任
     &.sign-trusted {

templates/repo/commit_sign_badge.tmpl

@@ -55,21 +55,37 @@ so this template should be kept as small as possible, DO NOT put large component
 	{{- end -}}
 {{- end -}}
 
+{{- $github_verifed := "github-theme.verifed" -}}
+{{- $ctx_github_verifed := ctx.Locale.Tr $github_verifed -}}
+{{- $github_partially_verifed := "github-theme.partially_verifed" -}}
+{{- $ctx_github_partially_verifed := ctx.Locale.Tr $github_partially_verifed -}}
+{{- $github_unverifed := "github-theme.unverifed" -}}
+{{- $ctx_github_unverifed := ctx.Locale.Tr $github_unverifed -}}
+
 {{- if $commit -}}
 <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 github-theme-commit-sign-badge {{$extraClass}}">
 		{{- if $verified -}}
 			{{- if and $signingUser $signingUser.ID -}}
-				<span data-tooltip-content="{{$msgReason}}">Verified</span>
+				<span data-tooltip-content="{{$msgReason}}">
+					{{if eq $ctx_github_verifed $github_verifed }}Verified
+					{{else}}{{$ctx_github_verifed}}{{end}}
+				</span>
 				<span data-tooltip-content="{{$msgSigningKey}}">{{ctx.AvatarUtils.Avatar $signingUser 16}}</span>
 			{{- else -}}
-				<span data-tooltip-content="{{$msgReason}}">Partially verified</span>
+				<span data-tooltip-content="{{$msgReason}}">
+					{{if eq $ctx_github_partially_verifed $github_partially_verifed }}Partially verified
+					{{else}}{{$ctx_github_partially_verifed}}{{end}}
+				</span>
 				<span data-tooltip-content="{{$msgSigningKey}}">{{ctx.AvatarUtils.AvatarByEmail $signingEmail "" 16}}</span>
 			{{- end -}}
 		{{- else -}}
-			<span data-tooltip-content="{{$msgReason}}">Unverified</span>
+			<span data-tooltip-content="{{$msgReason}}">
+				{{if eq $ctx_github_unverifed $github_unverifed }}Unverified
+				{{else}}{{$ctx_github_unverifed}}{{end}}
+			</span>
 		{{- end -}}
 	</span>
 {{- end -}}