同步 Issue/PR 列表样式

.github/release.md

@@ -2,7 +2,6 @@
 
 ## 🌈 Style
 
-- 略微增加仓库代码文件列表的单行高度与 GitHub 一致
 - 优化创建仓库/派生仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致
 - 优化消息右上角小图标样式
 - 优化组织页面下的 RSS 订阅按钮样式
@@ -10,18 +9,20 @@
 #### 更符合 GitHub 风格
 
 - 同步代码编辑器背景色和字体大小 (修复亮色模式下编辑器背景色问题) #12
-- 同步仓库代码文件页 README 导航栏样式
 - 同步分页菜单样式
 - 同步登录/注册页面样式
+- 同步 Issue/PR 列表样式
+- 同步 Issue/PR 详细页面侧边栏样式
+- 同步仓库代码文件页 README 导航栏样式
+- 同步用户点星仓库列表样式
+- 优化私有标签样式
 - 优化热力图和动态样式
 - 优化仪表板仓库/组织列表样式
-- 优化私有标签样式
+- 略微增加仓库代码文件列表的单行高度
-- 同步用户点星仓库列表样式
-- 同步 Issue/PR 详细页面侧边栏样式
 
 ## 🐞 Fix
 
-- 修复 Action 作业步骤页面标题选中时滚动固定的高度问题
+- Action 作业步骤页面标题选中时滚动固定的高度
-- 修复用户公开活动页动态布局问题
+- 用户公开活动页动态布局
-- 修复顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
+- 顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
-- 修复手机页面下注册/登录页导航栏注册按钮换行的问题
+- 手机页面下注册/登录页导航栏注册按钮换行

TODO.md

@@ -1,6 +1,5 @@
 ### 重大
 
 - gitea issue 暗色模式下默认标签颜色匹配使用 github 样式
-- issue/PR 列表样式 github 布局
 - 色盲主题支持
 - 打开文件时的文件导航树样式和滚动高度

src/types/color/github.ts

@@ -178,6 +178,7 @@ export const github = {
          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
          * @filelist `repoFiles` README 栏的按钮的悬停背景颜色
          * @issue `issueSidebar` 操作按钮的悬停背景颜色
+         * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
          * @dashboard `dashboard` 仓库列表项目的悬停背景颜色
          */
         hover: null,

styles/components/issue.ts

@@ -1,6 +1,115 @@
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
+// 工单&PR 列表
+export const issueList = css`
+  .page-content.repository.issue-list {
+    // 头部筛选菜单栏
+    .issue-list-toolbar {
+      align-items: center;
+      align-content: center;
+      background-color: ${themeVars.color.box.header};
+      border: 1px solid ${themeVars.color.light.border};
+      border-bottom: 0;
+      border-top-left-radius: ${otherThemeVars.border.radius};
+      border-top-right-radius: ${otherThemeVars.border.radius};
+      height: 48px;
+      padding: 8px;
+      .issue-list-toolbar-left {
+        // 复选框
+        input {
+          margin: 0 8px !important;
+        }
+        > .ui.compact.menu {
+          align-items: center;
+          border: 0;
+          > .item {
+            background: unset !important;
+            border-radius: ${otherThemeVars.border.radius};
+            color: ${themeVars.color.text.light.num1};
+            padding: 0px 8px;
+            height: 30px;
+            &:before {
+              display: none;
+            }
+            &:hover {
+              background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+            }
+            &.active {
+              color: ${themeVars.color.text.self};
+              font-weight: 700;
+            }
+          }
+        }
+      }
+      .issue-list-toolbar-right > .ui.menu {
+        align-items: center;
+        > .item {
+          color: ${themeVars.color.text.light.num1};
+        }
+        > .ui.button {
+          padding: 0 12px;
+          height: 32px;
+        }
+      }
+    }
+    // Issue 列表
+    .flex-list#issue-list {
+      border: 1px solid ${themeVars.color.light.border};
+      border-bottom-left-radius: ${otherThemeVars.border.radius};
+      border-bottom-right-radius: ${otherThemeVars.border.radius};
+      > .flex-item {
+        align-items: center;
+        padding: 0;
+        &:last-child {
+          border-bottom-left-radius: ${otherThemeVars.border.radius};
+          border-bottom-right-radius: ${otherThemeVars.border.radius};
+        }
+        &:hover {
+          background-color: ${themeVars.color.hover.opaque};
+        }
+        > .flex-item-icon {
+          display: flex;
+          gap: 4px;
+          margin-left: 8px;
+          // 复选框
+          input {
+            background: unset;
+            margin-top: 14px;
+            margin-left: 8px;
+            margin-right: 8px !important;
+          }
+          svg {
+            margin-top: 14px;
+          }
+        }
+        > .flex-item-main {
+          gap: 4px;
+          .flex-item-header {
+            padding-top: 8px;
+          }
+          .flex-item-body {
+            font-size: 12px;
+            padding-bottom: 8px;
+          }
+        }
+        > .flex-item-trailing {
+          margin-right: 32px;
+        }
+      }
+    }
+  }
+`;
+
+// 避免手机/平板下菜单错位
+export const issueListMobile = css`
+  @media (max-width: 1023.98px) {
+    .page-content.repository.issue-list .issue-list-toolbar {
+      height: auto;
+    }
+  }
+`;
+
 export const button = css`
   .issue-content-left .field.footer {
     // 关闭工单按钮

styles/public/menu.ts

@@ -219,7 +219,6 @@ export const paginationMenu = css`
         &:hover {
           background: unset;
           border-color: ${themeVars.color.secondary.self};
-          transition-duration: 0.1s;
         }
       }
       &.navigation {

styles/public/transition.ts

@@ -2,13 +2,6 @@ import { css } from "src/types/vars";
 
 // 简单的渐变过渡
 export const transition = css`
-  // 迁移的元素
-  #navbar .item,
-  .header-wrapper .ui.tabular.menu .item,
-  .job-step-summary,
-  .job-step-logs,
-  .job-brief-item,
-  .repo-file-cell,
   // 差异对比的代码折叠按钮
   .code-expander-button,
   // 仓库 README 头部的按钮
@@ -16,6 +9,18 @@ export const transition = css`
   .file-header-right,
   // 仪表板仓库列表
   .ui.attached.segment.table ul li,
+  // Issue 列表
+  .issue-list-toolbar .item,
+  .flex-list#issue-list > .flex-item,
+  // 分页菜单
+  .ui.borderless.pagination.menu .item,
+  // 迁移的元素
+  #navbar .item,
+  .header-wrapper .ui.tabular.menu .item,
+  .job-step-summary,
+  .job-step-logs,
+  .job-brief-item,
+  .repo-file-cell,
   .tippy-box .flex-items-block .item,
   .clone-panel-tab .item,
   .ui.form select,