diff --git a/.github/release.md b/.github/release.md index 64742f0..a92f035 100644 --- a/.github/release.md +++ b/.github/release.md @@ -5,6 +5,7 @@ #### 更符合 GitHub 风格 - 同步仓库代码文件页 README 导航栏样式 +- 同步分页菜单样式 ## 🎈 Perf diff --git a/TODO.md b/TODO.md index 92dee5c..44e4f5b 100644 --- a/TODO.md +++ b/TODO.md @@ -3,7 +3,6 @@ - gitea issue 暗色模式下默认标签颜色匹配使用 github 样式 - issue/PR 列表样式 github 布局 - 用户动态仪表板样式优化 -- 分页样式优化 - 色盲主题支持 - 打开文件时的文件导航树样式和滚动高度 - 私有库标签大小, 组织页面下的RSS订阅按钮样式 diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 043d252..ff36730 100644 --- a/src/types/color/github.ts +++ b/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, }, diff --git a/styles/public/menu.ts b/styles/public/menu.ts index 1723a5d..d205fbf 100644 --- a/styles/public/menu.ts +++ b/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}; + } + } + } + } + } +`;