优化仪表板的仓库组织切换按钮样式

.github/release.md

@@ -26,6 +26,7 @@
 - 同步差异对比页面文件名标题栏样式
 - 同步分支菜单宽度
 - 同步通知页面样式
+- 优化仪表板的仓库组织切换按钮样式
 
 ### 🐞 Fix
 

styles/components/dashboard.ts

@@ -5,16 +5,28 @@ export const dashboard = css`
   .page-content.dashboard.feeds {
     // 仓库列表的仓库/组织切换按钮
     .ui.two.item.menu {
-      box-shadow: ${themeVars.github.shadow.floating.small};
+      background: ${themeVars.color.hover.self};
-      border: unset;
+      border: 0;
       border-radius: 12px;
       margin-bottom: 8px;
       > .item {
-        &:first-child {
+        background: unset;
-          border-radius: 12px 0 0 12px;
+        border-radius: 12px;
+        padding: 6px 12px !important;
+        &.active {
+          background: ${themeVars.color.menu};
+          box-shadow: ${themeVars.github.shadow.floating.small};
+          font-weight: 600;
         }
-        &:last-child {
+        &::before {
-          border-radius: 0 12px 12px 0;
+          display: none;
+        }
+        &:not(.active) {
+          margin: 4px !important;
+          width: calc(50% - 8px);
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
         }
       }
     }
@@ -66,6 +78,7 @@ export const dashboard = css`
   }
 `;
 
+// 导航栏的工单/PR/里程碑仪表板
 export const dashboardIssues = css`
   .page-content.dashboard.issues {
     .list-header {

styles/components/notification.ts

@@ -4,6 +4,48 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
 export const notification = css`
   .page-content.user.notification {
     > .ui.container {
+      // 应只选中订阅/关注页面, 不能选中通知页面
+      &:has(.flex-list) {
+        // 订阅/关注切换菜单
+        .ui.compact.small.menu.small-menu-items {
+          background: ${themeVars.color.hover.self} !important;
+          border: 0;
+          font-size: 14px;
+          gap: 8px;
+          > .item {
+            background: unset !important;
+            border: 1px solid ${themeVars.color.hover.self};
+            border-radius: ${otherThemeVars.border.radius};
+            padding: 6px 12px !important;
+            &.active {
+              background: ${themeVars.color.menu} !important;
+              border-color: ${themeVars.color.light.border};
+              font-weight: 600;
+            }
+            &::before {
+              display: none;
+            }
+            &:not(.active) {
+              // padding 纵向数值 + top 数值 = 8px 就居中
+              // 不明白啥原理, 反正 height 设为 100% 就可以了
+              top: 4px;
+              padding: 4px 12px !important;
+              height: 100%;
+              // 该方案只适用于 2 个 item 的情况
+              // left / right 数值为 gap 数值的一半
+              &:first-child {
+                left: 4px;
+              }
+              &:last-child {
+                right: 4px;
+              }
+              &:hover {
+                background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+              }
+            }
+          }
+        }
+      }
       > .ui.attached.segment {
         border: 0;
         padding: 0;