同步订阅页面样式

.github/release.md

@@ -13,6 +13,7 @@
 - 同步里程碑页面样式
 - 同步顶部工单等仪表板样式
 - 同步置顶 Issue 样式
+- 同步订阅页面样式
 
 ### 🐞 Fix
 

styles/components/index.ts

@@ -11,6 +11,7 @@ import "./heatmap";
 import "./issue";
 import "./milestones";
 import "./newrepo";
+import "./notification";
 import "./org";
 import "./release";
 import "./repo";

styles/components/issue.ts

@@ -57,9 +57,13 @@ export const issueList = css`
       }
     }
   }
-  // Issue 列表
+  // 里程碑详细页面的 Issue 列表
   .page-content.repository.milestone-issue-list,
+  // 顶部仪表板的 Issue 列表
   .page-content.dashboard.issues,
+  // 用户订阅的 Issue 列表
+  .page-content.user.notification,
+  // 仓库 Issue 列表
   .page-content.repository.issue-list {
     .flex-list#issue-list {
       border: 1px solid ${themeVars.color.light.border};

styles/components/notification.ts

@@ -0,0 +1,63 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 用户订阅/关注页面
+export const notification = css`
+  .page-content.user.notification {
+    > .ui.container {
+      > .ui.attached.segment {
+        border: 0;
+        padding: 0;
+        > .divider {
+          display: none;
+        }
+        // 订阅列表
+        &:has(#issue-list) {
+          > .tw-flex {
+            align-items: center;
+            align-content: center;
+            background-color: ${themeVars.color.box.header};
+            border: 1px solid ${themeVars.color.light.border};
+            border-bottom: 0;
+            border-top-left-radius: ${otherThemeVars.border.radius};
+            border-top-right-radius: ${otherThemeVars.border.radius};
+            height: 52px;
+            padding: 8px;
+            // 左侧菜单
+            > .tw-flex:first-child > .ui.compact.menu {
+              align-items: center;
+              border: 0;
+              > .item {
+                background: unset !important;
+                border-radius: ${otherThemeVars.border.radius};
+                color: ${themeVars.color.text.light.num1};
+                padding: 0px 8px;
+                height: 30px;
+                &:before {
+                  display: none;
+                }
+                &:hover {
+                  background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+                }
+                &.active {
+                  color: ${themeVars.color.text.self};
+                  font-weight: 700;
+                }
+              }
+            }
+            // 右侧菜单
+            > .tw-flex:last-child > .ui.menu {
+              align-items: center;
+              > .item {
+                color: ${themeVars.color.text.light.num1};
+              }
+              > .ui.button {
+                padding: 0 12px;
+                height: 32px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;