导航栏右侧按钮和头像样式同步

.github/release.md

@@ -2,55 +2,17 @@
 
 #### 更符合 GitHub 风格
 
-- 1:1 还原克隆菜单样式
+- 导航栏右侧按钮和头像颜色和样式同步
-- 代码差异对比折叠行文本颜色同步
-- 代码差异对比行号位置同步
-- 代码差异对比按钮和折叠行高度同步
-- Actions 日志页面标题颜色同步
-- Actions 日志页面设置菜单背景色同步
-- 菜单背景色同步当前最新颜色
-- Markdown 背景色同步
-- 补充 Markdown 代码块背景色
-- 弹窗阴影颜色同步
-- 仓库项目页面列背景色同步
-- Issue/PR 表情背景色同步
-- 普通按钮激活背景色同步
-- 主色调按钮边框色同步
-- 设置界面右上角小按钮样式同步
-- 弹窗背景色和叠加背景色同步
-- 全局圆角样式同步
-- 工单标签颜色同步
-- 提交列表样式和颜色同步
-- 提交 SHA 颜色和样式优化
-- 软件包标签颜色同步
-- Issue/PR 评论边框样式同步
-- Code/Runner/PR 提示框样式同步
-- 下拉菜单样式同步
-- 选择下拉菜单样式同步
-- 热力图颜色和样式同步
-- Issue/PR 菜单选项样式同步
-- 仓库标签页样式和颜色同步
-- 仓库发布页样式和颜色同步
-- 关注按钮样式同步
-- Issue 评论菜单删除按钮样式同步
 
 ## 🎈 Perf
 
-- 为下拉菜单的激活选项和部分下拉菜单实现 Issue/PR 的菜单选项样式
+- 优化输入框高度
-- Actions 日志页面标题间隔优化
+- 优化二级菜单按钮高度
-- 管理员后台按钮样式优化
+- 优化提交/分支/标签统计栏的激活颜色
-- 信息提示颜色优化
+
-- 修复意外点亮其他页面关闭图标的颜色
-- 统一全局标签圆角
-- 仪表板动态信息图标大小优化
-- Runner 列表标签颜色优化
-- 仓库动态活动标签样式统一
-- 合并请求分支样式统一
-- 全局下拉菜单样式统一
-- 弹窗按钮样式优化
-- 一些小型按钮的高度优化
 
 ## 🐞 Fix
 
-- 修复代码差异对比分列视图下颜色丢失
+- 修复探索/组织/用户页下的仓库主题标签样式
-- 修复 Runner 状态离线时标签
+- 修复仓库标签页右侧按钮大小
+- 修复管理员页面 Runner 任务状态标签的边框色

.github/todo.md

@@ -1,3 +1 @@
-用户头像右上角管理员标识优化
 action 下的分支标签颜色
-动态关闭工单条颜色

src/types/color/github.ts

@@ -25,6 +25,7 @@ export const github = {
        * @diff 折叠/展开按钮的悬停颜色
        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
+       * @navbar `navbarRight` 头像管理员标识背景颜色
        */
       emphasis: null,
       /** 暗淡的背景颜色

styles/components/actions.tsx

@@ -35,10 +35,6 @@ export const actions = css`
         border-top-right-radius: ${otherThemeVars.border.radius};
         padding: 16px;
         margin-bottom: 0;
-
-        .item {
-          padding: 6px 12px;
-        }
       }
 
       .ui.info.message {

styles/components/filelist.tsx

@@ -16,21 +16,6 @@ export const branchButton = css`
   }
 `;
 
-// 顶部提交, 标签, 分支
-export const repoMenu = css`
-  .page-content.repository.file.list {
-    .repository-summary .repository-menu {
-      background-color: ${themeVars.color.box.header};
-      .item {
-        color: ${themeVars.color.text.light.num1};
-        b {
-          color: ${themeVars.color.text.self};
-          margin: 0 2px;
-        }
-      }
-    }
-  }
-`;
 
 // 仓库按钮
 export const repoButton = css`

styles/components/release.tsx

@@ -87,7 +87,14 @@ export const releases = css`
         }
       }
     }
-    // 顶部右侧按钮组
+  }
+`;
+
+// 顶部右侧按钮组
+export const rightButton = css`
+  .page-content.repository {
+    &.releases,
+    &.tags {
       .ui.small.button {
         background-color: ${themeVars.color.button};
         padding: 5px 16px;
@@ -98,4 +105,5 @@ export const releases = css`
         }
       }
     }
+  }
 `;

styles/components/repo.tsx

@@ -54,9 +54,36 @@ export const repoHeader = css`
   }
 `;
 
+// 顶部提交, 标签, 分支统计
+export const repoMenu = css`
+  .page-content.repository {
+    .repository-summary .repository-menu {
+      background-color: ${themeVars.color.box.header};
+      .item {
+        color: ${themeVars.color.text.light.num1};
+        height: 31px; // 文件列表下与右侧输入框对齐
+        b {
+          color: ${themeVars.color.text.self};
+          margin: 0 2px;
+        }
+        &.active {
+          background-color: ${themeVars.color.active};
+          color: ${themeVars.color.text.self};
+          font-weight: 500;
+          svg {
+            color: ${themeVars.color.text.light.num1};
+          }
+        }
+      }
+    }
+  }
+`;
+
 export const repoTopic = css`
-  #repo-topics {
+  // 理应只能覆盖探索/组织/用户下仓库的 topic 标签
-    .ui.label.repo-topic {
+  .label-list .ui.label,
+  // 仓库文件列表下的 topic 标签
+  #repo-topics .ui.label.repo-topic {
     border-radius: 25px;
     font-size: 12px;
     padding: 5px 10px;
@@ -68,5 +95,11 @@ export const repoTopic = css`
       color: ${themeVars.color.text.self};
     }
   }
+`;
+
+// 仓库动态页面关闭工单状态条颜色
+export const closedIssueTableCell = css`
+  .stats-table .table-cell.tw-bg-red[href="#closed-issues"] {
+    background-color: ${themeVars.color.purple.self} !important;
   }
 `;

styles/public/index.tsx

@@ -11,3 +11,4 @@ import "./label"; // 标签
 import "./menu"; // 菜单
 import "./modal"; // 弹窗
 import "./tippy"; // 提示框
+import "./navbar"; // 导航栏

styles/public/input.tsx

@@ -29,4 +29,8 @@ export const input = css`
       outline: none;
     }
   }
+
+  .ui.input {
+    height: 32px;
+  }
 `;

styles/public/label.tsx

@@ -108,7 +108,7 @@ export const shaLabel = css`
 
 // 任务状态标签, 目前仅在管理员页面 Runner 状态中看到
 export const taskStatusLabel = css`
-  .ui.label.task-status- {
+  .runner-container .ui.label.task-status- {
     &success {
       color: ${themeVars.color.success.text};
       border: 1px solid ${themeVars.color.success.border};

styles/public/menu.tsx

@@ -138,8 +138,16 @@ export const menu = css`
   }
 `;
 
-// 二级导航栏
 export const secondaryMenu = css`
+  // 二级菜单, 比如 Issue/PR/Actions 的筛选菜单
+  .ui.secondary.menu {
+    .item {
+      padding: 0px 12px;
+      height: 32px;
+      font-weight: 500;
+    }
+  }
+  // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
   .ui.secondary.pointing.menu {
     .overflow-menu-items {
       gap: 0.5rem;

styles/public/navbar.tsx

@@ -0,0 +1,86 @@
+import { css, themeVars } from "src/types/vars";
+
+export const navbarRight = css`
+  #navbar {
+    .navbar-right {
+      gap: 8px;
+      // 右侧按钮, 但不包括头像
+      > .item:not(:last-child) {
+        display: grid;
+        gap: 4px;
+        grid-auto-columns: max-content;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        border: 1px solid ${themeVars.color.light.border};
+        padding: unset;
+        height: 32px;
+        min-width: 32px;
+        min-height: 32px;
+        // 纠正内容保证居中
+        .tw-relative {
+          height: 16px;
+          width: 16px;
+        }
+        .svg {
+          color: ${themeVars.color.text.light.num1};
+        }
+        // 带下拉菜单的按钮
+        &.ui.dropdown {
+          padding: 0 8px;
+          .text {
+            display: grid;
+            grid-auto-flow: column;
+            align-items: center;
+            > svg {
+              margin-right: 8px;
+            }
+            // 三角号纠正高度保持居中
+            .not-mobile {
+              height: 16px;
+            }
+          }
+        }
+      }
+      .item.ui.dropdown {
+        // 头像菜单
+        &:last-child {
+          padding-left: 2px; // 调整此选项需同步增减相同的标识的 left
+          padding-right: 16px;
+          .text {
+            // 不显示小箭头标识
+            > .not-mobile {
+              display: none;
+            }
+            // 头像
+            img {
+              border-radius: 25px;
+              height: 32px;
+              max-height: 32px;
+            }
+          }
+        }
+        // 用户头像的管理员标识
+        .navbar-profile-admin {
+          background-color: ${themeVars.github.bgColor.accent.emphasis};
+          border-radius: 25px;
+          color: ${themeVars.color.text.self};
+          font-size: 8px;
+          font-weight: 600;
+          padding: 2px 5px;
+          top: -3px;
+          left: 22px;
+        }
+      }
+    }
+  }
+  // 手机下的创建菜单按钮
+  @media (max-width: 767.98px) {
+    #navbar .navbar-right > .item:not(:last-child) {
+      display: none;
+    }
+    #navbar.navbar-menu-open .navbar-right > .item:not(:last-child) {
+      display: grid;
+    }
+  }
+`;