diff --git a/.github/release.md b/.github/release.md index ba86dc4..a9eb8f1 100644 --- a/.github/release.md +++ b/.github/release.md @@ -19,6 +19,9 @@ - 弹窗背景色和叠加背景色同步 - 全局圆角样式同步 - 工单标签颜色同步 +- 提交列表样式和颜色同步 +- 提交 SHA 颜色和样式优化 +- 软件包标签颜色同步 ## 🎈 Perf @@ -26,7 +29,11 @@ - 管理员后台按钮样式优化 - 信息提示颜色优化 - 修复意外点亮其他页面关闭图标的颜色 +- 统一全局标签圆角 +- 仪表板动态信息图标大小优化 +- Runner 列表标签颜色优化 ## 🐞 Fix - 修复代码差异对比分列视图下颜色丢失 +- 修复 Runner 状态离线时标签 diff --git a/src/core/github.ts b/src/core/github.ts index d6b65a0..b91ce50 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -65,7 +65,16 @@ export type GithubColor = { accent: { emphasis: string; }; + attention: { + emphasis: string; + }; default: string; + success: { + emphasis: string; + }; + done: { + emphasis: string; + }; muted: string; translucent: string; }; @@ -277,6 +286,15 @@ export function defineGithubTheme(githubColor: GithubColor): Theme { accent: { emphasis: githubColor.borderColor.accent.emphasis, }, + attention: { + emphasis: githubColor.borderColor.attention.emphasis, + }, + success: { + emphasis: githubColor.borderColor.success.emphasis, + }, + done: { + emphasis: githubColor.borderColor.done.emphasis, + }, }, button: { default: { diff --git a/src/types/color/github.ts b/src/types/color/github.ts index a5adb12..b1f0173 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -15,6 +15,7 @@ export const github = { muted: null, /** 成功的文本颜色 * @issue `button` 重新开启按钮文本颜色 + * @label `label` 绿色标签的文本颜色 */ success: null, /** 完成的文本颜色 @@ -42,8 +43,8 @@ export const github = { /** 完成的背景颜色 * @issue `babel` 工单已关闭图标背景颜色 */ - emphasis: null - } + emphasis: null, + }, }, borderColor: { accent: { @@ -52,6 +53,24 @@ export const github = { */ emphasis: null, }, + attention: { + /** 注意的边框颜色 + * @label `label` 黄色/橙色标签的边框色 + */ + emphasis: null, + }, + success: { + /** 成功的边框颜色 + * @label `label` 绿色标签的边框色 + */ + emphasis: null, + }, + done: { + /** 完成的边框颜色 + * @label `label` 红色/紫色标签的边框色 + */ + emphasis: null, + }, }, button: { /** 普通按钮 */ diff --git a/styles/components/dashboard.scss b/styles/components/dashboard.scss deleted file mode 100644 index 23b136b..0000000 --- a/styles/components/dashboard.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Made by Luting ^-^ -.page-content.dashboard { - .flex-item .flex-item-trailing svg { - height: 18px; - width: 18px; - } -} diff --git a/styles/components/dashboard.tsx b/styles/components/dashboard.tsx new file mode 100644 index 0000000..3807fc4 --- /dev/null +++ b/styles/components/dashboard.tsx @@ -0,0 +1,10 @@ +import { css } from "src/types/vars"; + +export const dashboard = css` + .page-content.dashboard { + .flex-item .flex-item-trailing svg { + height: 20px; + width: 20px; + } + } +`; diff --git a/styles/components/index.tsx b/styles/components/index.tsx index 5412bf8..f621314 100644 --- a/styles/components/index.tsx +++ b/styles/components/index.tsx @@ -1,4 +1,6 @@ import "./actions"; +import "./dashboard"; import "./diff"; import "./issue"; +import "./repo"; import "./setting"; diff --git a/styles/components/issue.tsx b/styles/components/issue.tsx index dbc6d6a..d121f2d 100644 --- a/styles/components/issue.tsx +++ b/styles/components/issue.tsx @@ -49,16 +49,19 @@ export const babel = css` border-radius: 25px !important; &.green { + color: ${themeVars.color.text.self} !important; background-color: ${themeVars.github.bgColor.success.emphasis} !important; border-color: ${themeVars.github.bgColor.success.emphasis} !important; } &.red { + color: ${themeVars.color.text.self} !important; background-color: ${themeVars.github.bgColor.done.emphasis} !important; border-color: ${themeVars.github.bgColor.done.emphasis} !important; } &.purple { + color: ${themeVars.color.text.self} !important; background-color: ${themeVars.github.bgColor.done.emphasis} !important; border-color: ${themeVars.github.bgColor.done.emphasis} !important; } diff --git a/styles/components/repo.tsx b/styles/components/repo.tsx new file mode 100644 index 0000000..7980000 --- /dev/null +++ b/styles/components/repo.tsx @@ -0,0 +1,45 @@ +import { css, themeVars } from "src/types/vars"; + +export const commit = css` + .page-content.repository { + // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式) + #commits-table.ui.basic.striped.table tbody.commit-list { + // 作者 + .author { + // 作者名称 + a.author-wrapper { + color: ${themeVars.color.text.light.num1}; + } + } + // SHA 标签 + .sha { + a.ui.label.commit-id-short { + padding: 2px 8px; + height: 28px; + margin-top: 0.375rem; + margin-bottom: 0.375rem; + margin-left: -8px; + } + } + // 提交信息右侧 + .tw-text-right { + // 时间标签 + relative-time, + // 复制 SHA 按钮 + .btn.copy-commit-id, + // 查看提交路径按钮 + .btn.view-commit-path { + color: ${themeVars.color.text.light.num1}; + } + } + // 整行悬停色 + tr:hover { + background-color: ${themeVars.color.hover.opaque}; + } + // 偶数行悬停色 + tr:nth-child(2n):hover { + background-color: ${themeVars.color.hover.opaque} !important; + } + } + } +`; diff --git a/styles/components/setting.tsx b/styles/components/setting.tsx index 82dac28..0151e35 100644 --- a/styles/components/setting.tsx +++ b/styles/components/setting.tsx @@ -66,3 +66,13 @@ export const button = css` } } `; + +export const label = css` + // Runner 标签 + .runner-container { + // 普通标签, runner 状态: 离线, runner 标签 + .ui.label { + border: 1px solid ${themeVars.color.light.border}; + } + } +`; diff --git a/styles/public/label.scss b/styles/public/label.scss deleted file mode 100644 index 12e68db..0000000 --- a/styles/public/label.scss +++ /dev/null @@ -1,118 +0,0 @@ -// Made by Luting ^-^ - -span, -.org-visibility div { - &.ui.basic.label { - border-radius: 25px; - background-color: unset; - } -} - -.ui.ui.ui { - &.primary.label { - color: var(--color-blue); - background-color: #388bfd33; - border: 1px solid var(--color-blue); - } - - &.basic.primary.label { - color: var(--color-blue); - background-color: #388bfd33 !important; - border-color: #1f6feb !important; - } - - // 发布&Runner 状态标签 - &.green.label:not(.issue-state-label) { - background: unset; - border-color: #238636; - border-width: 1px; - border-style: solid; - border-radius: 25px; - color: #3fb950; - } - - &.orange.label:not(.issue-state-label) { - background: unset; - border-color: #9e6a03; - border-width: 1px; - border-style: solid; - border-radius: 25px; - color: #d29922; - } -} - -a.ui.ui.ui { - &.primary.label:hover { - color: #fff; - background: #1f6feb; - border-color: #1f6feb; - } - - &.basic.primary.label:hover { - color: #79c0ff; - background-color: #3a83fd5c !important; - } -} - -// Runner&软件包&提交 标签 -.ui.label { - &.sha { - color: #919894; - background-color: var(--color-box-header); - - &:hover { - background-color: var(--color-hover); - } - } - - &:not(.basic, .sha, .commit-id-short, .commit-sign-badge) { - color: var(--color-blue); - background: #121d2f; - border-radius: 25px; - } - - &.task-status-success { - color: var(--color-success-text); - border: 1px solid var(--color-success-border); - background: var(--color-success-bg); - } - - &.task-status-failure { - color: var(--color-error-text); - border: 1px solid var(--color-error-border); - background: var(--color-error-bg); - } - - &.task-status-running, - &.task-status-skipped { - color: var(--color-info-text); - border: 1px solid var(--color-info-border); - background: var(--color-info-bg); - } - - &.task-status-cancelled, - &.task-status-blocked { - color: var(--color-warning-text); - border: 1px solid var(--color-warning-border); - background: var(--color-warning-bg); - } - - > a { - opacity: 1; - } -} -a.ui.label:not(.basic, .sha, .commit-id-short, .commit-sign-badge):hover { - color: #fff; - background: #1f6feb; - border-radius: 25px; -} -.sha .ui.label.sha { - border: 0 !important; -} - -.repository #commits-table .commit-list .sha .ui.label { - line-height: 18px; - margin-top: 0.375rem; - margin-bottom: 0.375rem; - margin-left: -2px; -} diff --git a/styles/public/label.tsx b/styles/public/label.tsx index e69de29..aa4b47d 100644 --- a/styles/public/label.tsx +++ b/styles/public/label.tsx @@ -0,0 +1,175 @@ +import { css, themeVars } from "src/types/vars"; + +export const label = css` + /* 所有标签, 但不包括 a 标签 */ + /* a 标签比如仓库点星等按钮旁边的数字标签按钮,提交图中的 tag 标签 */ + div, + span { + &.ui.ui.ui { + &.label { + border-radius: 25px; + /* 主色调标签 */ + &.primary { + background-color: unset; + border: 1px solid ${themeVars.color.primary.self}; + color: ${themeVars.color.primary.self}; + } + /* 红色标签 */ + &.red { + background-color: unset; + border: 1px solid ${themeVars.github.borderColor.done.emphasis}; + color: ${themeVars.color.purple.self}; + } + /* 橙色标签 */ + &.orange { + background-color: unset; + border: 1px solid ${themeVars.github.borderColor.attention.emphasis}; + color: ${themeVars.color.yellow.self}; + } + /* 黄色标签 */ + &.yellow { + background-color: unset; + border: 1px solid ${themeVars.github.borderColor.attention.emphasis}; + color: ${themeVars.color.orange.self}; + } + /* 黄绿色标签 */ + &.olive { + background-color: unset; + border: 1px solid ${themeVars.color.olive.self}; + color: ${themeVars.color.olive.self}; + } + /* 绿色标签 */ + &.green { + background-color: unset; + border: 1px solid ${themeVars.github.borderColor.success.emphasis}; + color: ${themeVars.color.green.self}; + } + /* 紫色标签 */ + &.purple { + background-color: unset; + border: 1px solid ${themeVars.github.borderColor.done.emphasis}; + color: ${themeVars.color.purple.self}; + } + } + } + } +`; + +// 提交中的 SHA 标签 +export const shaLabel = css` + a.ui.label.sha, + a.ui.label.commit-id-short { + border: unset; + background-color: unset; + color: ${themeVars.color.text.light.num1}; + font-size: 12px; + font-weight: 500; + &:hover { + background-color: ${themeVars.color.label.hoverBg}; + } + // 验证提交 SHA 标签 + &.commit-is-signed { + border: unset !important; + background-color: unset !important; + &:hover { + background-color: ${themeVars.color.label.hoverBg} !important; + } + span.ui.label.commit-is-signed { + padding: 3px 5px; + margin-left: 5px; + } + } + } + + // 验证提交附带的图标 + span.ui.label.commit-is-signed { + // 验证信任 + &.sign-trusted { + border: 1.5px solid ${themeVars.color.green.badge.self} !important; + color: ${themeVars.color.green.badge.self} !important; + &:hover { + background-color: ${themeVars.color.green.badge.hover.bg} !important; + } + } + // 验证未信任 + &.sign-untrusted { + border: 1.5px solid ${themeVars.color.yellow.badge.self} !important; + color: ${themeVars.color.yellow.badge.self} !important; + &:hover { + background-color: ${themeVars.color.yellow.badge.hover.bg} !important; + } + } + // 验证未匹配 + &.sign-unmatched { + border: 1.5px solid ${themeVars.color.orange.badge.self} !important; + color: ${themeVars.color.orange.badge.self} !important; + &:hover { + background-color: ${themeVars.color.orange.badge.hover.bg} !important; + } + } + // 验证警告 + &.sign-warning { + border: 1.5px solid ${themeVars.color.red.badge.self} !important; + color: ${themeVars.color.red.badge.self} !important; + &:hover { + background-color: ${themeVars.color.red.badge.hover.bg} !important; + } + } + } +`; + +// 任务状态标签, 目前仅在管理员页面 Runner 状态中看到 +export const taskStatusLabel = css` + .ui.label.task-status- { + &success { + color: ${themeVars.color.success.text}; + border: 1px solid ${themeVars.color.success.border}; + background: ${themeVars.color.success.bg}; + } + + &failure { + color: ${themeVars.color.error.text}; + border: 1px solid ${themeVars.color.error.border}; + background: ${themeVars.color.error.bg.self}; + } + + &running, + &skipped { + color: ${themeVars.color.info.text}; + border: 1px solid ${themeVars.color.info.border}; + background: ${themeVars.color.info.bg}; + } + + &cancelled, + &blocked { + color: ${themeVars.color.warning.text}; + border: 1px solid ${themeVars.color.warning.border}; + background: ${themeVars.color.warning.bg}; + } + } +`; + +// 仓库标签 (私有/公开/内部) +export const repoLabel = css` + span, + .org-visibility div { + &.ui.basic.label { + background-color: unset; + } + } +`; + +// 软件包列表 +export const packagesLabel = css` + .page-content { + &.packages { + > .ui.container > div > .flex-list { + // 软件包类型的标签 + .ui.label { + border: 1px solid ${themeVars.color.light.border}; + color: ${themeVars.color.primary.self}; + } + } + } + } +`; diff --git a/styles/public/radius.tsx b/styles/public/radius.tsx index 659559a..e839d9a 100644 --- a/styles/public/radius.tsx +++ b/styles/public/radius.tsx @@ -266,3 +266,17 @@ export const onlyChild = css` } } `; + +// 修复一些情况下圆角边框线被覆盖的问题 +export const fixRadius = css` + // 评论列表标题 + .repository.view.issue .comment-list .comment > .content > div:first-child { + border-top-left-radius: ${otherThemeVars.border.radius}; + border-top-right-radius: ${otherThemeVars.border.radius}; + } + // 评论列表内容 + .repository.view.issue .comment-list .comment > .content > div:last-child { + border-bottom-left-radius: ${otherThemeVars.border.radius}; + border-bottom-right-radius: ${otherThemeVars.border.radius}; + } +`; diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index d20d19f..eca92f1 100644 --- a/themes/dark.css.tsx +++ b/themes/dark.css.tsx @@ -62,6 +62,15 @@ const github: GithubColor = { emphasis: "#1f6feb", }, default: "#3d444d", + attention: { + emphasis: "#9e6a03", + }, + success: { + emphasis: "#238636", + }, + done: { + emphasis: "#8957e5", + }, muted: "#3d444db3", translucent: "#ffffff26", }, @@ -105,9 +114,9 @@ const github: GithubColor = { }, overlay: { backdrop: { - bgColor: "#21283066" - } - } + bgColor: "#21283066", + }, + }, }; export default defineGithubTheme(github);