同步仓库代码文件页 README 导航栏样式

.github/release.md

@@ -4,6 +4,8 @@
 
 #### 更符合 GitHub 风格
 
+- 同步仓库代码文件页 README 导航栏样式
+
 ## 🎈 Perf
 
 - 略微增加仓库代码文件列表的单行高度与 GitHub 一致

TODO.md

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

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};
+        }
+      }
+    }
   }
 `;
 

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,