diff --git a/.github/release.md b/.github/release.md index c5f8838..3dced81 100644 --- a/.github/release.md +++ b/.github/release.md @@ -29,6 +29,8 @@ - 选择下拉菜单样式同步 - 热力图颜色和样式同步 - Issue/PR 菜单选项样式同步 +- 仓库标签页样式和颜色同步 +- 仓库发布页样式和颜色同步 ## 🎈 Perf @@ -43,6 +45,7 @@ - 仓库动态活动标签样式统一 - 合并请求分支样式统一 - 全局下拉菜单样式统一 +- 弹窗按钮样式优化 ## 🐞 Fix diff --git a/README.md b/README.md index 9655899..9bbac52 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ ## 安装 -1. 在发布页下载最新的 `theme-github.css` 放入 `gitea/public/assets/css` 目录下 +1. 在发布页下载最新的 `theme-github-dark.css` 放入 `gitea/public/assets/css` 目录下 2. 修改 `gitea/conf/app.ini`,并将 `, github` 附加到 `[ui]` 下的 `THEMES` 末尾 3. 重启 Gitea 4. 在设置中查看主题 @@ -20,7 +20,7 @@ ```ini [ui] -THEMES = gitea-dark, github +THEMES = gitea-dark, github-dark ``` 详细请查看 Gitea 文档 diff --git a/src/types/color/github.ts b/src/types/color/github.ts index f2e95ba..11f6b95 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -12,6 +12,7 @@ export const github = { default: null, /** 暗淡的文本颜色 * @diff 折叠行的文本颜色 + * @text 灰色文本颜色 */ muted: null, /** 成功的文本颜色 @@ -31,6 +32,7 @@ export const github = { /** 强调色 * @diff 折叠/展开按钮的悬停颜色 * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 + * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色 */ emphasis: null, /** 暗淡的背景颜色 diff --git a/styles/components/index.tsx b/styles/components/index.tsx index 8a1bbc1..77c5843 100644 --- a/styles/components/index.tsx +++ b/styles/components/index.tsx @@ -4,5 +4,6 @@ import "./dashboard"; import "./diff"; import "./heatmap"; import "./issue"; +import "./release"; import "./repo"; import "./setting"; diff --git a/styles/components/issue.tsx b/styles/components/issue.tsx index f3e87fd..a84bd3b 100644 --- a/styles/components/issue.tsx +++ b/styles/components/issue.tsx @@ -107,15 +107,9 @@ export const dropdown = css` &.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu, // Issue/PR 详情下的右侧的上半部分选项菜单 &.issue.view .issue-content-right .ui.dropdown .scrolling.menu { - .item { - &.active, - &.selected, - &:hover { - &:after { - content: ""; - ${activeItemAfterStyle} - } - } + .item:hover:after { + content: ""; + ${activeItemAfterStyle} } } } diff --git a/styles/components/release.scss b/styles/components/release.scss deleted file mode 100644 index 0a409b9..0000000 --- a/styles/components/release.scss +++ /dev/null @@ -1,81 +0,0 @@ -// Made by Luting ^-^ -.page-content.repository.releases { - h2 .item { - font-weight: 500; - } - - #release-list .release-entry { - .meta { - gap: 2px; - padding-top: 24px; - padding-right: 40px; - text-align: left; - min-width: 0; - flex: 0.125; - - a.muted { - color: #9198a1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-break: break-all; - - svg { - margin-right: 8px !important; - } - - svg.tw-mr-1.svg.octicon-tag { - margin-top: 1px; - } - } - - .js-branch-tag-selector { - margin-top: 8px; - } - } - - .segment.detail { - p.text.grey { - margin: 16px 0; - - .time { - color: #f0f6fc; - } - } - - .markup { - > *:first-child { - margin-top: 16px !important; - } - - > *:last-child { - margin-bottom: 16px !important; - } - } - } - } - - .ui.small.primary.button { - background-color: var(--color-button); - - &:hover { - background-color: #262c36; - } - } -} - -.page-content.repository.tags { - .tag-list-row .download a.muted:hover { - text-decoration: none; - } -} - -.page-content.repository.tags, -.page-content.repository.releases { - .ui.small.menu { - .active.item { - color: #fff; - background: #1f6feb !important; - } - } -} diff --git a/styles/components/release.tsx b/styles/components/release.tsx new file mode 100644 index 0000000..7d2a993 --- /dev/null +++ b/styles/components/release.tsx @@ -0,0 +1,101 @@ +import { css, themeVars } from "src/types/vars"; + +// release 顶部栏左侧按钮组 +export const releaseTagMenu = css` + .page-content.repository { + &.releases, + &.tags { + h2.small.menu { + .item { + background-color: unset !important; + font-weight: 500; + &.active { + background: ${themeVars.github.bgColor.accent.emphasis} !important; + } + } + } + } + } +`; + +// 标签页样式 +export const tags = css` + .page-content.repository.tags { + // 标签的选项取消下划线 + .tag-list-row { + .tag-list-row-title { + line-height: 1.5; + } + .download { + color: ${themeVars.color.text.light.num1}; + font-size: 12px; + a.muted:hover { + text-decoration: none; + } + } + } + } +`; + +// 发布页样式 +export const releases = css` + .page-content.repository.releases { + #release-list .release-entry { + // 左侧发布元信息 + .meta { + gap: 0.5rem; + padding-top: 24px; + padding-right: 40px; + text-align: left; + min-width: 0; + flex: 0.125; + a.muted { + color: ${themeVars.color.text.light.num1}; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-all; + svg { + margin-right: 8px !important; + } + svg.tw-mr-1.svg.octicon-tag { + margin-top: 1px; + } + } + .js-branch-tag-selector { + margin-top: 8px; + } + } + // 右侧发布详细信息 + .segment.detail { + .svg { + color: ${themeVars.color.text.light.num1}; + } + p.text.grey { + margin: 16px 0; + .time { + color: ${themeVars.color.text.self}; + } + } + .markup { + > *:first-child { + margin-top: 16px !important; + } + > *:last-child { + margin-bottom: 16px !important; + } + } + } + } + // 顶部右侧按钮组 + .ui.small.button { + background-color: ${themeVars.color.button}; + padding: 5px 16px; + min-height: auto; + line-height: 20px; + &:hover { + background-color: ${themeVars.color.hover.self}; + } + } + } +`; diff --git a/styles/public/index.tsx b/styles/public/index.tsx index 11b959b..636a3da 100644 --- a/styles/public/index.tsx +++ b/styles/public/index.tsx @@ -2,6 +2,7 @@ // tslint:disable:ordered-imports // 组件导入有顺序, 禁止插件优化 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入 +import "./text"; // 文本或 SVG 的基本颜色 import "./button"; // 按钮 import "./chroma"; // 代码高亮 import "./dropdown"; // 下拉框 @@ -9,5 +10,4 @@ import "./input"; // 输入框 import "./label"; // 标签 import "./menu"; // 菜单 import "./modal"; // 弹窗 -import "./svg"; // svg 图标 import "./tippy"; // 提示框 diff --git a/styles/public/modal.tsx b/styles/public/modal.tsx index be4db29..8a2d030 100644 --- a/styles/public/modal.tsx +++ b/styles/public/modal.tsx @@ -20,5 +20,8 @@ export const modal = css` background-color: ${themeVars.color.menu}; border-top: 1.5px solid ${themeVars.color.light.border}; } + .actions > .ui.button { + padding: 8px 12px; + } } `; diff --git a/styles/public/svg.tsx b/styles/public/svg.tsx deleted file mode 100644 index 47b38ef..0000000 --- a/styles/public/svg.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { css, themeVars } from "src/types/vars"; - -// 关闭工单按钮设置为紫色 -export const issueClosed = css` - .text.red .svg, - .text.red.svg { - &.octicon-issue-closed { - color: ${themeVars.github.fgColor.done} !important; - } - } -`; diff --git a/styles/public/text.tsx b/styles/public/text.tsx new file mode 100644 index 0000000..e55a77f --- /dev/null +++ b/styles/public/text.tsx @@ -0,0 +1,19 @@ +import { css, themeVars } from "src/types/vars"; + +export const red = css` + .text.red .svg, + .text.red.svg { + // 关闭工单按钮设置为紫色 + &.octicon-issue-closed { + color: ${themeVars.github.fgColor.done} !important; + } + } +`; + +export const grey = css` + // 默认颜色是 --color-text-light, 主题下此颜色是亮白色, 修改为灰色 + // release 页面下一些描述信息的文本颜色 + .text.grey { + color: ${themeVars.github.fgColor.muted} !important; + } +`;