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

CHANGELOG.md

@@ -1,6 +1,6 @@
 ### 🌈 Style
 
-- 调整顶部导航栏高度
+- 优化顶部导航栏样式和颜色
 
 ##### 更符合 GitHub 风格
 

src/core/github.ts

@@ -200,11 +200,11 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       bg: githubColor.bgColor.emphasis,
     },
     nav: {
-      bg: githubColor.bgColor.inset,
+      bg: githubColor.bgColor.muted,
       hoverBg: githubColor.control.transparent.bgColor.hover,
       text: themeVars.color.text.self,
     },
-    secondaryNavBg: themeVars.color.nav.bg,
+    secondaryNavBg: themeVars.color.body,
     label: {
       text: themeVars.color.text.self,
       bg: githubColor.bgColor.neutral.muted,

styles/components/navbar.ts

@@ -3,11 +3,28 @@ import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"
 
 export const navbarRight = css`
   #navbar {
+    border-bottom: 0;
+    padding: 0px 16px;
     min-height: 64px;
     .navbar-left {
-      #navbar-logo img {
+      gap: 4px;
-        height: 32px;
+      > .item {
-        width: 32px;
+        padding: 6px 10px;
+        min-height: 20px;
+        &.active {
+          font-weight: 600;
+        }
+        &#navbar-logo {
+          // 与下方的用户切换头像对齐
+          padding-left: 6px;
+          &:hover {
+            background: unset;
+          }
+          img {
+            height: 32px;
+            width: 32px;
+          }
+        }
       }
     }
     // 进入用户页面后, 避免注册, 登录和首页等意外覆盖

styles/components/notification.ts

@@ -144,6 +144,9 @@ export const notification = css`
           &:last-child {
             border-bottom-left-radius: ${otherThemeVars.border.radius};
             border-bottom-right-radius: ${otherThemeVars.border.radius};
+            &:hover {
+              border-bottom-left-radius: 0;
+            }
           }
           &:hover {
             background: ${themeVars.github.bgColor.accent.muted};