diff --git a/.github/release.md b/.github/release.md index 44e4d4f..64742f0 100644 --- a/.github/release.md +++ b/.github/release.md @@ -4,6 +4,8 @@ #### 更符合 GitHub 风格 +- 同步仓库代码文件页 README 导航栏样式 + ## 🎈 Perf - 略微增加仓库代码文件列表的单行高度与 GitHub 一致 diff --git a/TODO.md b/TODO.md index 88814c0..92dee5c 100644 --- a/TODO.md +++ b/TODO.md @@ -4,8 +4,6 @@ - issue/PR 列表样式 github 布局 - 用户动态仪表板样式优化 - 分页样式优化 -- 工单管理中搜索框精细按钮的宽度修复 -- 仓库文件列表页 README 导航栏样式 - 色盲主题支持 - 打开文件时的文件导航树样式和滚动高度 - 私有库标签大小, 组织页面下的RSS订阅按钮样式 diff --git a/styles/components/filelist.ts b/styles/components/filelist.ts index c805487..d1d7954 100644 --- a/styles/components/filelist.ts +++ b/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` @@ -88,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}; + } + } + } } `; diff --git a/styles/public/transition.ts b/styles/public/transition.ts index d1803c2..1218f6b 100644 --- a/styles/public/transition.ts +++ b/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,