diff --git a/.github/release.md b/.github/release.md index f3110d9..ef52900 100644 --- a/.github/release.md +++ b/.github/release.md @@ -26,6 +26,7 @@ - 同步差异对比页面文件名标题栏样式 - 同步分支菜单宽度 - 同步通知页面样式 +- 优化仪表板的仓库组织切换按钮样式 ### 🐞 Fix diff --git a/styles/components/dashboard.ts b/styles/components/dashboard.ts index b304c8b..2454fde 100644 --- a/styles/components/dashboard.ts +++ b/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}; - border: unset; + background: ${themeVars.color.hover.self}; + border: 0; border-radius: 12px; margin-bottom: 8px; > .item { - &:first-child { - border-radius: 12px 0 0 12px; + background: unset; + border-radius: 12px; + padding: 6px 12px !important; + &.active { + background: ${themeVars.color.menu}; + box-shadow: ${themeVars.github.shadow.floating.small}; + font-weight: 600; } - &:last-child { - border-radius: 0 12px 12px 0; + &::before { + 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 { diff --git a/styles/components/notification.ts b/styles/components/notification.ts index 70abdbf..5bc6096 100644 --- a/styles/components/notification.ts +++ b/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;