diff --git a/CHANGELOG.md b/CHANGELOG.md index ca80f5f..c128328 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,18 +2,17 @@ ##### 更符合 GitHub 风格 -- 优化用户动态 -- 优化顶部导航栏头像 -- 优化设置页面 -- 优化仓库活动页面 +- 优化用户头像样式 +- 优化 Issue/PR 的评论菜单按钮样式 +- 优化用户动态样式 + +### 🐞 Fix + +- 修复 Issue/PR 侧边栏的时间追踪样式 +- 修复 Issue/PR 详细页面中的部分文字颜色 ## 📃 English ### 🌈 Style -##### More aligned with GitHub style - -- Optimized user activity feed -- Optimized top navigation bar avatars -- Optimized settings page -- Optimized repository activity page \ No newline at end of file +##### More aligned with GitHub style \ No newline at end of file diff --git a/package.json b/package.json index 5bc0b4c..55d2983 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitea-github-theme", - "version": "1.25.0", + "version": "1.25.1", "type": "module", "scripts": { "dev": "vite build --mode dev", diff --git a/src/core/github.ts b/src/core/github.ts index 31cd1d8..4efb8af 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -7,6 +7,7 @@ import { type ThemeColor } from "./color"; export type GithubColor = { isDarkTheme: boolean; + avatar: { bgColor: string; borderColor: string }; display: { blue: { fgColor: string }; brown: { fgColor: string }; @@ -221,6 +222,10 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { }; const github: Github = { + avatar: { + bgColor: githubColor.avatar.bgColor, + borderColor: githubColor.avatar.borderColor, + }, fgColor: { accent: githubColor.fgColor.accent, success: githubColor.fgColor.success, diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 305ebc7..b3141e3 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -1,4 +1,10 @@ export const github = { + avatar: { + /** 头像的背景颜色 */ + bgColor: null, + /** 头像的边框颜色 */ + borderColor: null, + }, /** 用于 color 属性的颜色 */ fgColor: { /** 强调色 diff --git a/styles/components/commit.ts b/styles/components/commit.ts index 8454d8a..ba1b7d0 100644 --- a/styles/components/commit.ts +++ b/styles/components/commit.ts @@ -7,6 +7,9 @@ export const commit = css` #commits-table.ui.basic.striped.table tbody.commit-list { // 作者 .author { + img.ui.avatar { + border-radius: 9999px; + } // 作者名称 .author-wrapper { color: ${themeVars.color.text.light.num1}; @@ -26,7 +29,7 @@ export const commit = css` .message { // tag 标签 a.ui.basic.primary.label { - border-radius: 25px; + border-radius: 9999px; border-width: 1.5px; padding: 3px 8px !important; } @@ -85,6 +88,9 @@ export const commitStatus = css` // 提交图 export const commitGraph = css` .page-content.repository #git-graph-container { + img.ui.avatar { + border-radius: 9999px; + } // 提交图的 SHA 标签 li .ui.label.commit-id-short { height: 25px; diff --git a/styles/components/filelist.ts b/styles/components/filelist.ts index c263854..2f9a2db 100644 --- a/styles/components/filelist.ts +++ b/styles/components/filelist.ts @@ -58,7 +58,8 @@ export const repoFiles = css` .commit-summary { color: ${themeVars.color.text.light.num1}; } - img.tw-align-middle { + img.ui.avatar { + border-radius: 9999px; margin-top: -1px; margin-left: 1px; } @@ -333,6 +334,9 @@ export const repoFileView = css` .commit-summary { color: ${themeVars.color.text.light.num1}; } + img.ui.avatar { + border-radius: 9999px; + } } // 右侧提交时间 > .age { diff --git a/styles/components/heatmap.ts b/styles/components/heatmap.ts index 3f23864..8eaf775 100644 --- a/styles/components/heatmap.ts +++ b/styles/components/heatmap.ts @@ -77,17 +77,39 @@ export const activity = css` padding: 16px; > .flex-item-leading { img { - width: 20px; - height: 20px; + width: 24px; + height: 24px; + border-radius: 9999px; } } + // 动态的主要内容 > .flex-item-main { gap: 8px !important; + // 动态的标题 > div:not([class]) { display: flex; - gap: 8px; + align-items: baseline; + gap: 6px; flex-wrap: wrap; + > a { + color: ${themeVars.color.text.self}; + text-decoration: none; + text-underline-offset: 0.2rem; + // 不匹配作者 + &:not([title]) { + text-decoration: underline; + // 尽量只选中仓库名, 不匹配标签和分支 + &:not([href*="tag"]):not([href*="branch"]) { + color: ${themeVars.color.primary.self}; + } + } + } + relative-time { + color: ${themeVars.color.text.light.num1}; + font-size: 12px; + } } + // 动态的描述 > .tw-flex-col { gap: 0px !important; > .flex-text-block { @@ -95,8 +117,9 @@ export const activity = css` font-size: 12px; color: ${themeVars.color.text.light.num1}; img { - width: 14px; - height: 14px; + width: 16px; + height: 16px; + border-radius: 9999px; } .ui.sha.label { margin-top: 0; diff --git a/styles/components/issue.ts b/styles/components/issue.ts index acb20f5..0fbe800 100644 --- a/styles/components/issue.ts +++ b/styles/components/issue.ts @@ -56,6 +56,9 @@ export const issueList = css` height: 32px; } } + img.ui.avatar { + border-radius: 9999px; + } } } // 里程碑详细页面的 Issue 列表 @@ -70,6 +73,9 @@ export const issueList = css` border: 1px solid ${themeVars.color.light.border}; border-bottom-left-radius: ${otherThemeVars.border.radius}; border-bottom-right-radius: ${otherThemeVars.border.radius}; + img.ui.avatar { + border-radius: 9999px; + } > .flex-item { align-items: center; padding: 0; @@ -176,6 +182,9 @@ export const issuePins = css` display: none; } } + img.ui.avatar { + border-radius: 9999px; + } } `; @@ -269,6 +278,9 @@ export const prBranch = css` // 评论 export const comment = css` .comment .comment-container { + img.ui.avatar { + border-radius: 9999px; + } // 去除评论标题左侧指向头像的小箭头 .comment-header, &:target .comment-header { @@ -306,9 +318,18 @@ export const comment = css` // display: none; // } .context-dropdown { + height: 28px; + padding: 0 6px; + border-radius: ${otherThemeVars.border.radius}; + &:hover { + background-color: ${themeVars.github.control.transparent.bgColor.hover}; + } a.context-menu { display: flex; align-items: center; + &:hover { + color: inherit; + } } // 评论菜单的删除按钮 .menu .item.delete-comment { @@ -326,7 +347,7 @@ export const comment = css` align-items: center; justify-content: center; background: ${themeVars.color.button}; - border-radius: 25px; + border-radius: 9999px; border: 1px solid ${themeVars.color.light.border}; color: ${themeVars.color.text.light.num1}; padding: 0px 8px !important; @@ -337,7 +358,7 @@ export const comment = css` .bottom-reactions { .ui.ui.ui.label { background-color: unset !important; - border-radius: 25px; + border-radius: 9999px; border-color: ${themeVars.color.light.border}; &:hover { background-color: ${themeVars.color.reaction.hoverBg} !important; @@ -392,7 +413,7 @@ export const prMerge = css` // 头像 .timeline-avatar { color: ${themeVars.color.white} !important; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 9999px; width: 40px; height: 40px; display: flex; @@ -405,6 +426,7 @@ export const prMerge = css` // 可以合并 &.green { background-color: ${themeVars.github.bgColor.success.emphasis}; + border-radius: ${otherThemeVars.border.radius}; // 操作评论边框色 + .content > .ui.attached.segment { border-left-color: ${themeVars.github.bgColor.success.emphasis}; @@ -420,6 +442,7 @@ export const prMerge = css` // 已合并 &.purple { background-color: ${themeVars.github.bgColor.done.emphasis}; + border-radius: ${otherThemeVars.border.radius}; + .content > .ui.attached.segment { border-left-color: ${themeVars.github.bgColor.done.emphasis}; border-right-color: ${themeVars.github.bgColor.done.emphasis}; @@ -493,6 +516,9 @@ export const timeline = css` .timeline-item, .timeline-item-group { padding: 16px 0; + .comment-text-line { + color: ${themeVars.color.text.light.num1}; + } // 事件 &.event { // 修复覆盖后的位置问题 @@ -545,6 +571,9 @@ export const issueSidebar = css` // 工单&创建工单&PR页面侧边栏 .page-content.repository.issue { .issue-content { + img.ui.avatar { + border-radius: 9999px; + } gap: 24px; // 侧边栏 .issue-content-right { @@ -641,13 +670,22 @@ export const issueSidebar = css` } } // 时间追踪 - > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted { - align-items: center; - border-radius: ${otherThemeVars.border.radius}; - text-decoration-line: none; - height: 28px; - &:hover { - background: ${themeVars.github.control.transparent.bgColor.hover}; + > div:not([class]):not([id]) { + > .flex-text-block { + color: ${themeVars.color.text.light.num1}; + } + > .ui.buttons { + ${sidebarPadding}; + .button { + height: 30px; + min-height: 30px; + &:hover { + border-color: ${themeVars.color.light.border}; + + .button { + border-left-color: ${themeVars.color.light.border}; + } + } + } } } // 选中日期颜色 @@ -662,7 +700,8 @@ export const issueSidebar = css` // 订阅按钮 .ui.watching .ui.button { padding: 0px 8px; - height: 28px; + height: 30px; + min-height: 30px; svg { margin: 0 !important; } @@ -670,7 +709,7 @@ export const issueSidebar = css` // PIN 按钮 .form-fetch-action.single-button-form .ui.button, // 底部操作按钮 - .ui.show-modal.button { + > .ui.show-modal.button { border: 0; background: unset; font-weight: 400; @@ -699,3 +738,19 @@ export const issueSidebar = css` } } `; + +// 工单标题 +export const issueTitle = css` + .page-content.repository.issue { + .issue-title-header { + .issue-title-meta { + .issue-state-label { + padding: 6px 9px !important; + } + .time-desc { + color: ${themeVars.color.text.light.num1}; + } + } + } + } +`; diff --git a/styles/components/navbar.ts b/styles/components/navbar.ts index c41ff68..06d7ceb 100644 --- a/styles/components/navbar.ts +++ b/styles/components/navbar.ts @@ -83,7 +83,7 @@ export const navbarRight = css` } // 头像 img { - border-radius: 25px; + border-radius: 9999px; height: 32px; max-height: 32px; margin: 0 !important; @@ -99,7 +99,7 @@ export const navbarRight = css` .notification_count, .header-stopwatch-dot { background-color: ${themeVars.github.bgColor.accent.emphasis}; - border-radius: 25px; + border-radius: 9999px; color: ${themeVars.color.white}; font-size: 9px; font-weight: 600; diff --git a/styles/components/packages.ts b/styles/components/packages.ts index 48f3250..a3780a5 100644 --- a/styles/components/packages.ts +++ b/styles/components/packages.ts @@ -102,7 +102,7 @@ export const packagesDetail = css` justify-content: space-between; > a { border: 1px solid ${themeVars.color.light.border}; - border-radius: 25px; + border-radius: 9999px; font-size: 12px; padding: 0px 6px; min-height: 20px; diff --git a/styles/components/release.ts b/styles/components/release.ts index 7058714..36249c4 100644 --- a/styles/components/release.ts +++ b/styles/components/release.ts @@ -105,6 +105,9 @@ export const releases = css` // 右侧发布详细信息 .segment.detail { padding: 16px; + img.ui.avatar { + border-radius: 9999px; + } .svg { color: ${themeVars.color.text.light.num1}; } diff --git a/styles/components/repo.ts b/styles/components/repo.ts index de07b24..3bc3cb8 100644 --- a/styles/components/repo.ts +++ b/styles/components/repo.ts @@ -71,7 +71,7 @@ export const repoTopic = css` .flex-item-main > .label-list .ui.label, // 仓库文件列表下的 topic 标签 #repo-topics .ui.label.repo-topic { - border-radius: 25px; + border-radius: 9999px; font-size: 12px; font-weight: 500; padding: 2.5px 10px; diff --git a/styles/components/user.ts b/styles/components/user.ts index e56d60a..054115d 100644 --- a/styles/components/user.ts +++ b/styles/components/user.ts @@ -60,3 +60,16 @@ export const stars = css` } } `; + +// 用户信息卡片 +export const profileCard = css` + .page-content.user.profile { + #profile-avatar-card { + #profile-avatar { + img.ui.avatar { + border-radius: 9999px; + } + } + } + } +`; diff --git a/styles/public/label.ts b/styles/public/label.ts index 28e3083..d314e95 100644 --- a/styles/public/label.ts +++ b/styles/public/label.ts @@ -7,7 +7,7 @@ export const label = css` span { &.ui.ui.ui { &.label { - border-radius: 25px; + border-radius: 9999px; padding: 1.5px 6px; // 多个标签的组合标签的圆角修复 &.scope-parent { @@ -102,6 +102,9 @@ export const shaLabel = css` margin-left: 5px; height: 25px; } + img.ui.avatar { + border-radius: 9999px; + } } } // 修复带验证的提交 SHA 标签的高度 diff --git a/styles/public/other.ts b/styles/public/other.ts index e3d07ca..254a2da 100644 --- a/styles/public/other.ts +++ b/styles/public/other.ts @@ -22,3 +22,12 @@ export const svg = css` color: #429cf0 !important; } `; + +export const avatar = css` + img.ui.avatar, + .ui.avatar img, + .ui.avatar svg { + background-color: ${themeVars.github.avatar.bgColor}; + box-shadow: 0 0 0 1px ${themeVars.github.avatar.borderColor}; + } +`; diff --git a/themes/colorblind-dark.css.ts b/themes/colorblind-dark.css.ts index be94d6d..407b277 100644 --- a/themes/colorblind-dark.css.ts +++ b/themes/colorblind-dark.css.ts @@ -9,6 +9,7 @@ import { darkGithubColors } from "themes/dark"; export const colorblindDarkGithubColors: GithubColor = { isDarkTheme: true, + avatar: darkGithubColors.avatar, display: darkGithubColors.display, diffBlob: { addtionNum: { bgColor: "#58a6ff4d" }, diff --git a/themes/colorblind-light.css.ts b/themes/colorblind-light.css.ts index c35c4f0..c56a985 100644 --- a/themes/colorblind-light.css.ts +++ b/themes/colorblind-light.css.ts @@ -9,6 +9,7 @@ import { lightGithubColors } from "themes/light"; export const colorblindLightGithubColors: GithubColor = { isDarkTheme: false, + avatar: lightGithubColors.avatar, display: lightGithubColors.display, diffBlob: { addtionNum: { bgColor: "#b6e3ff" }, diff --git a/themes/dark.css.ts b/themes/dark.css.ts index 8c634d6..9dd7f84 100644 --- a/themes/dark.css.ts +++ b/themes/dark.css.ts @@ -7,6 +7,10 @@ import { github2ThemeColor, type GithubColor } from "src/core/github"; export const darkGithubColors: GithubColor = { isDarkTheme: true, + avatar: { + bgColor: "#ffffff1a", + borderColor: "#ffffff26", + }, display: { blue: { fgColor: "#4493f8" }, brown: { fgColor: "#b69a6d" }, diff --git a/themes/light.css.ts b/themes/light.css.ts index 72fbfc2..fb1cde6 100644 --- a/themes/light.css.ts +++ b/themes/light.css.ts @@ -7,6 +7,10 @@ import { github2ThemeColor, type GithubColor } from "src/core/github"; export const lightGithubColors: GithubColor = { isDarkTheme: false, + avatar: { + bgColor: "#ffffff", + borderColor: "#1f232826", + }, display: { blue: { fgColor: "#0969da" }, brown: { fgColor: "#755f43" }, diff --git a/themes/soft-dark.css.ts b/themes/soft-dark.css.ts index f947254..b7e0de5 100644 --- a/themes/soft-dark.css.ts +++ b/themes/soft-dark.css.ts @@ -9,6 +9,10 @@ import { darkGithubColors } from "themes/dark"; export const softDarkGithubColors: GithubColor = { isDarkTheme: true, + avatar: { + bgColor: "#cdd9e51a", + borderColor: "#cdd9e526", + }, display: darkGithubColors.display, diffBlob: { addtionNum: { bgColor: "#57ab5a4d" },