同步通知页面样式

.github/release.md

@@ -25,6 +25,7 @@
 - 优化下拉菜单样式
 - 同步差异对比页面文件名标题栏样式
 - 同步分支菜单宽度
+- 同步通知页面样式
 
 ### 🐞 Fix
 

src/types/color/github.ts

@@ -37,6 +37,7 @@ export const github = {
        * @repo `repoTopic` 仓库主题标签背景颜色
        * @actions `actions` 分支标签按钮背景颜色
        * @actions `actionViewHeader` 分支标签按钮背景颜色
+       * @notification `notification` 通知列表悬停时的背景颜色
        */
       muted: null,
     },
@@ -62,6 +63,7 @@ export const github = {
        * @issue `comment` 评论框被选中时的边框颜色
        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
        * @dropdown `selectionDropdown` 选择输入框的内部边框颜色
+       * @notification `notification` 通知列表悬停时的左边框颜色
        */
       emphasis: null,
     },
@@ -180,6 +182,7 @@ export const github = {
          * @issue `issueSidebar` 操作按钮的悬停背景颜色
          * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
          * @dashboard `dashboard` 仓库列表项目的悬停背景颜色
+         * @notification `notification` 通知列表的按钮悬停背景颜色
          */
         hover: null,
       },

styles/components/notification.ts

@@ -88,6 +88,90 @@ export const notification = css`
           }
         }
       }
+      // 通知列表
+      &:has(#notification_table) {
+        > .tw-flex:first-child {
+          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;
+          margin-bottom: 0 !important;
+          // 左侧菜单
+          > .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;
+              }
+              .notifications-unread-count {
+                margin-left: 4px;
+              }
+            }
+          }
+        }
+        // 通知全部确认按钮
+        .ui.ui.ui.ui.mini.button {
+          height: 32px;
+        }
+      }
+      // 通知列表
+      #notification_table {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        color: ${themeVars.color.text.light.num1};
+        > .notifications-item {
+          border-top: 1px solid ${themeVars.color.light.border};
+          padding: 8px !important;
+          &:first-child {
+            border-top: 0;
+          }
+          &:last-child {
+            border-bottom-left-radius: ${otherThemeVars.border.radius};
+            border-bottom-right-radius: ${otherThemeVars.border.radius};
+          }
+          &:hover {
+            background: ${themeVars.github.bgColor.accent.muted};
+            box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset;
+            color: ${themeVars.color.text.self};
+          }
+          > .notifications-link {
+            > .notifications-top-row {
+              font-size: 12px !important;
+            }
+            > .notifications-bottom-row {
+              font-size: 14px !important;
+            }
+          }
+          > .notifications-updated {
+            font-size: 12px;
+          }
+          > .notifications-buttons {
+            .interact-bg {
+              background: ${themeVars.github.bgColor.accent.muted} !important;
+              padding: 8px !important;
+              &:hover {
+                background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+              }
+            }
+          }
+        }
+      }
     }
   }
 `;