diff --git a/.github/release.md b/.github/release.md index 665fe44..f3110d9 100644 --- a/.github/release.md +++ b/.github/release.md @@ -25,6 +25,7 @@ - 优化下拉菜单样式 - 同步差异对比页面文件名标题栏样式 - 同步分支菜单宽度 +- 同步通知页面样式 ### 🐞 Fix diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 4093eb1..173aa11 100644 --- a/src/types/color/github.ts +++ b/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, }, diff --git a/styles/components/notification.ts b/styles/components/notification.ts index 29c3b4e..d5b385f 100644 --- a/styles/components/notification.ts +++ b/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; + } + } + } + } + } } } `;