同步分页菜单样式

.github/release.md

@@ -5,6 +5,7 @@
 #### 更符合 GitHub 风格
 
 - 同步仓库代码文件页 README 导航栏样式
+- 同步分页菜单样式
 
 ## 🎈 Perf
 

TODO.md

@@ -3,7 +3,6 @@
 - gitea issue 暗色模式下默认标签颜色匹配使用 github 样式
 - issue/PR 列表样式 github 布局
 - 用户动态仪表板样式优化
-- 分页样式优化
 - 色盲主题支持
 - 打开文件时的文件导航树样式和滚动高度
 - 私有库标签大小, 组织页面下的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/public/menu.ts

@@ -193,3 +193,42 @@ 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};
+      }
+      // 设置透明边框线避免 hover 时元素大小变化
+      &:not(.active) {
+        border: 1px solid #ffffff00;
+        &:hover {
+          background: unset;
+          border-color: ${themeVars.color.secondary.self};
+          transition-duration: 0.1s;
+        }
+      }
+      &.navigation {
+        height: 16px;
+        &:not(.disabled) {
+          span,
+          svg {
+            color: ${themeVars.color.primary.self};
+          }
+        }
+      }
+    }
+  }
+`;