优化顶部和二级导航栏的样式和颜色

CHANGELOG.md

@@ -1,6 +1,6 @@
 ### 🌈 Style
 
-- 优化顶部导航栏样式和颜色
+- 优化顶部和二级导航栏的样式和颜色
 
 ##### 更符合 GitHub 风格
 

src/types/color/github.ts

@@ -180,6 +180,7 @@ export const github = {
          * @dropdown `dropdown` 下拉框子项的悬停背景颜色
          * @menu `verticalMenu` 垂直菜单项的悬停背景颜色
          * @menu `menu` 菜单项的悬停背景颜色
+         * @menu `secondaryMenu` 二级菜单按钮的悬停背景颜色
          * @repo `repoHeader` 仓库标题的悬停背景颜色
          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
          * @filelist `repoFiles` README 栏的按钮的悬停背景颜色

styles/components/actions.ts

@@ -27,7 +27,7 @@ export const actions = css`
         margin-bottom: 24px;
         margin-left: 2px;
       }
-
+      // 工作流列表标题栏菜单
       .ui.secondary.menu {
         background-color: ${themeVars.color.box.header};
         border: 1px solid ${themeVars.color.light.border};
@@ -36,6 +36,9 @@ export const actions = css`
         border-top-right-radius: ${otherThemeVars.border.radius};
         padding: 16px;
         margin-bottom: 0;
+        > .item {
+          color: ${themeVars.color.text.light.num1};
+        }
       }
 
       .ui.info.message {

styles/components/dashboard.ts

@@ -135,3 +135,10 @@ export const issueListMobile = css`
     }
   }
 `;
+
+// 修复仪表板下二级面板选择菜单组织的标签间隔
+export const fixOrgLabel = css`
+  .dashboard .secondary-nav .org-visibility .label {
+    margin-right: 0;
+  }
+`;

styles/components/issue.ts

@@ -48,6 +48,9 @@ export const issueList = css`
       }
       .issue-list-toolbar-right > .ui.menu {
         align-items: center;
+        > .item {
+          color: ${themeVars.color.text.light.num1};
+        }
         > .ui.button {
           padding: 0 12px;
           height: 32px;

styles/components/navbar.ts

@@ -7,9 +7,9 @@ export const navbarRight = css`
     padding: 0px 16px;
     min-height: 64px;
     .navbar-left {
-      gap: 4px;
+      gap: 8px;
       > .item {
-        padding: 6px 10px;
+        padding: 4px 8px;
         min-height: 20px;
         &.active {
           font-weight: 600;
@@ -150,5 +150,23 @@ export const navbarRight = css`
 export const secondaryNav = css`
   .page-content > :first-child.secondary-nav {
     margin-bottom: 16px;
+    // 仪表板界面的二级导航栏用户菜单
+    > .ui.secondary.stackable.menu {
+      gap: 0px;
+      min-height: 48px;
+      > .item {
+        > .ui.dropdown > .text {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          svg {
+            margin-right: 4px;
+          }
+        }
+      }
+      > .right.menu {
+        gap: 4px;
+      }
+    }
   }
 `;

styles/public/menu.ts

@@ -148,13 +148,15 @@ export const secondaryMenu = css`
       padding: 0px 12px;
       height: 32px;
       font-weight: 500;
-      color: ${themeVars.color.text.light.num1};
+    }
+    a.item:hover {
+      background: ${themeVars.github.control.transparent.bgColor.hover};
     }
   }
   // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
   .ui.secondary.pointing.menu {
     .overflow-menu-items {
-      gap: 0.5rem;
+      gap: 4px;
       .item {
         padding: 5px 8px !important;
         margin-block-start: 0.5rem;