fix height

.github/release.md

@@ -4,8 +4,15 @@
 
 #### 更符合 GitHub 风格
 
+- 同步仓库代码文件页 README 导航栏样式
+- 同步分页菜单样式
+
 ## 🎈 Perf
 
+- 略微增加仓库代码文件列表的单行高度与 GitHub 一致
+
 ## 🐞 Fix
 
 - 修复 Action 作业步骤页面标题选中时滚动固定的高度问题
+- 修复用户公开活动页动态布局问题
+- 修复顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄

TODO.md

@@ -3,10 +3,6 @@
 - gitea issue 暗色模式下默认标签颜色匹配使用 github 样式
 - issue/PR 列表样式 github 布局
 - 用户动态仪表板样式优化
-- 分页样式优化
-- 工单管理中搜索框精细按钮的宽度修复
-- 仓库文件列表的单行高度调整
-- 仓库文件列表页 README 导航栏样式
 - 色盲主题支持
 - 打开文件时的文件导航树样式和滚动高度
 - 私有库标签大小, 组织页面下的RSS订阅按钮样式

src/types/color/github.ts

@@ -29,6 +29,7 @@ export const github = {
        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
        * @navbar `navbarRight` 头像管理员标识背景颜色
        * @dropdown `dropdown` emoji 的悬停背景色
+       * @menu `paginationMenu` 分页菜单的激活背景色
        */
       emphasis: null,
       /** 暗淡的背景颜色
@@ -175,6 +176,7 @@ export const github = {
          * @menu `menu` 菜单项的悬停背景颜色
          * @repo `repoHeader` 仓库标题的悬停背景颜色
          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
+         * @filelist `repoFiles` README 栏的按钮的悬停背景颜色
          */
         hover: null,
       },
@@ -194,6 +196,7 @@ export const github = {
       /** 下划线导航栏的边框颜色
        * @clone `clone` 按钮组的按钮下划线颜色
        * @menu `secondaryMenu` 二级菜单按钮的下划线颜色
+       * @filelist `repoFiles` README 栏的左边按钮下划线颜色
        */
       active: null,
     },

styles/components/explore.ts

@@ -13,7 +13,8 @@ export const repoList = css`
   .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
   // 探索
   .page-content.explore.repositories > .ui.container {
-    > .flex-list {
+    // 排除用户的公开活动页
+    > .flex-list:not(#activity-feed) {
       display: grid;
       > .flex-item {
         border: 1px solid ${themeVars.color.light.border};
@@ -77,7 +78,8 @@ export const repoList = css`
     gap: min(${orgRepoVar} * 8px, 16px);
   }
   // 用户
-  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list {
+  // 排除用户的公开活动页
+  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list:not(#activity-feed) {
     grid-template-columns: repeat(${userRepoVar}, 1fr);
     gap: min(${userRepoVar} * 8px, 16px);
   }
@@ -152,7 +154,8 @@ export const mobileList = css`
     .page-content.organization.members >.ui.container,
     // 探索的用户和组织列表
     .page-content.explore.users >.ui.container {
-      > .flex-list {
+      // 排除用户的公开活动页
+      > .flex-list:not(#activity-feed) {
         grid-template-columns: 1fr;
         gap: 8px;
       }

styles/components/filelist.ts

@@ -1,4 +1,4 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 文件列表页面下的分支按钮
 export const branchButton = css`
@@ -75,6 +75,7 @@ export const repoFiles = css`
       // 文件列表
       .repo-file-item {
         .repo-file-cell {
+          height: 40px;
           &.name {
             display: flex;
             align-items: center;
@@ -87,6 +88,39 @@ export const repoFiles = css`
         }
       }
     }
+    #readme {
+      .file-header {
+        background: ${themeVars.color.body};
+        svg {
+          color: ${themeVars.color.text.light.num1};
+        }
+        .file-header-left {
+          padding: 6px 8px !important;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+            border-radius: ${otherThemeVars.border.radius};
+          }
+          &:after {
+            content: "";
+            background: ${themeVars.github.underlineNav.borderColor.active};
+            border-radius: ${otherThemeVars.border.radius};
+            bottom: 0;
+            height: 2px;
+            position: absolute;
+            left: 12px;
+            width: 113px;
+          }
+          a.muted:hover {
+            color: inherit;
+            text-decoration-line: none;
+          }
+        }
+        .file-header-right:hover {
+          background: ${themeVars.github.control.transparent.bgColor.hover};
+          border-radius: ${otherThemeVars.border.radius};
+        }
+      }
+    }
   }
 `;
 

styles/public/dropdown.ts

@@ -120,6 +120,10 @@ export const selectionDropdown = css`
       ${activeItemAfterStyle};
     }
   }
+  // 修复顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
+  .list-header-search .ui.action.input > .dropdown.small {
+    padding: 8px 40px 8px 16px;
+  }
   // 发布版本页面的分支按钮, 覆盖 Gitea 的样式, 避免按钮元素高度不一致
   .repository.new.release .target .selection.dropdown {
     padding-top: 8px;

styles/public/menu.ts

@@ -193,3 +193,46 @@ export const secondaryMenu = css`
     }
   }
 `;
+
+// 分页菜单
+export const paginationMenu = css`
+  .ui.borderless.pagination.menu {
+    background-color: unset;
+    border: 0;
+    gap: 4px;
+    .item {
+      border-radius: ${otherThemeVars.border.radius};
+      min-width: 32px;
+      min-height: 32px;
+      height: 32px;
+      justify-content: center;
+      // 避免一些 hover 效果调整内容
+      padding: 5px 10px !important;
+      &.active {
+        background: ${themeVars.github.bgColor.accent.emphasis};
+        color: ${themeVars.color.white};
+      }
+      // 设置透明边框线避免 hover 时元素大小变化
+      &:not(.active) {
+        border: 1px solid #ffffff00;
+        &:hover {
+          background: unset;
+          border-color: ${themeVars.color.secondary.self};
+          transition-duration: 0.1s;
+        }
+      }
+      &.navigation {
+        &:not(.disabled) {
+          span,
+          svg {
+            color: ${themeVars.color.primary.self};
+          }
+        }
+        // 对齐文字
+        svg {
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+`;

styles/public/transition.ts

@@ -11,6 +11,9 @@ export const transition = css`
   .repo-file-cell,
   // 差异对比的代码折叠按钮
   .code-expander-button,
+  // 仓库 README 头部的按钮
+  .file-header-left,
+  .file-header-right,
   .tippy-box .flex-items-block .item,
   .clone-panel-tab .item,
   .ui.form select,