diff --git a/.github/release.md b/.github/release.md index caca10d..9b44d24 100644 --- a/.github/release.md +++ b/.github/release.md @@ -7,6 +7,7 @@ - 同步仓库代码文件页 README 导航栏样式 - 同步分页菜单样式 - 同步登录/注册页面样式 +- 优化热力图和动态样式 ## 🎈 Perf diff --git a/TODO.md b/TODO.md index 6791027..879371e 100644 --- a/TODO.md +++ b/TODO.md @@ -2,7 +2,6 @@ - gitea issue 暗色模式下默认标签颜色匹配使用 github 样式 - issue/PR 列表样式 github 布局 -- 用户动态仪表板样式优化 - 色盲主题支持 - 打开文件时的文件导航树样式和滚动高度 - 私有库标签大小, 组织页面下的RSS订阅按钮样式 diff --git a/styles/components/dashboard.ts b/styles/components/dashboard.ts index 0493e1a..261e615 100644 --- a/styles/components/dashboard.ts +++ b/styles/components/dashboard.ts @@ -2,11 +2,6 @@ import { css } from "src/types/vars"; export const dashboard = css` .page-content.dashboard { - // 动态的右侧 svg 图标 - .flex-item .flex-item-trailing svg { - height: 20px; - width: 20px; - } // 仓库列表的仓库/组织切换按钮 .ui.two.item.menu { background-color: unset; diff --git a/styles/components/heatmap.ts b/styles/components/heatmap.ts index 59d0cc6..30b2ad7 100644 --- a/styles/components/heatmap.ts +++ b/styles/components/heatmap.ts @@ -1,50 +1,84 @@ -import { css, themeVars } from "src/types/vars"; +import { css, otherThemeVars, themeVars } from "src/types/vars"; export const heatmap = css` - .vch__container { - // 覆盖热力图和图例的背景色 - .vch__day__square, - .vch__legend__wrapper rect { - // 圆角 - rx: 2.5px; - ry: 2.5px; - // hover 时的圆角 - border-radius: 0.75px; - // 宽度和高度可以用来控制间隔 - width: 9px; - height: 9px; - // 边框 - outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0}; - // 边框向内偏移 - outline-offset: -0.5px; + #user-heatmap { + .total-contributions { + left: 25px + 20px; + bottom: 0 + 12px; + } + .total-contributions, + .vch__legend-right { + color: ${themeVars.color.text.light.num1}; + } + .vch__container { + padding: 12px 20px; + border: 1px solid ${themeVars.color.secondary.self}; + border-radius: ${otherThemeVars.border.radius}; + // 覆盖热力图和图例的背景色 + .vch__day__square, + .vch__legend__wrapper rect { + // 圆角 + rx: 2.5px; + ry: 2.5px; + // hover 时的圆角 + border-radius: 0.75px; + // 宽度和高度可以用来控制间隔 + width: 9px; + height: 9px; + // 边框 + outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0}; + // 边框向内偏移 + outline-offset: -0.5px; - &[style="fill: var(--color-secondary-alpha-60);"] { - fill: ${themeVars.github.contribution.default.bgColor.num0} !important; - } + &[style="fill: var(--color-secondary-alpha-60);"] { + fill: ${themeVars.github.contribution.default.bgColor.num0} !important; + } - &[style="fill: var(--color-primary-light-4);"] { - fill: ${themeVars.github.contribution.default.bgColor.num1} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num1}; - } + &[style="fill: var(--color-primary-light-4);"] { + fill: ${themeVars.github.contribution.default.bgColor.num1} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num1}; + } - &[style="fill: var(--color-primary-light-2);"] { - fill: ${themeVars.github.contribution.default.bgColor.num2} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num2}; - } + &[style="fill: var(--color-primary-light-2);"] { + fill: ${themeVars.github.contribution.default.bgColor.num2} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num2}; + } - &[style="fill: var(--color-primary);"] { - fill: ${themeVars.github.contribution.default.bgColor.num3} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num3}; - } + &[style="fill: var(--color-primary);"] { + fill: ${themeVars.github.contribution.default.bgColor.num3} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num3}; + } - &[style="fill: var(--color-primary-dark-2);"] { - fill: ${themeVars.github.contribution.default.bgColor.num4} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num4}; - } + &[style="fill: var(--color-primary-dark-2);"] { + fill: ${themeVars.github.contribution.default.bgColor.num4} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num4}; + } - &[style="fill: var(--color-primary-dark-4);"] { - fill: ${themeVars.github.contribution.default.bgColor.num5} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num5}; + &[style="fill: var(--color-primary-dark-4);"] { + fill: ${themeVars.github.contribution.default.bgColor.num5} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num5}; + } + } + } + } +`; + +// 动态 +export const activity = css` + #activity-feed { + .flex-item { + gap: 12px; + padding: 16px 0; + &:first-child { + padding-top: 6px; + } + > .flex-item-main { + gap: 8px !important; + } + // 动态的右侧 svg 图标 + .flex-item-trailing svg { + height: 20px; + width: 20px; } } }