sky/gitea-github-theme
1
0
Fork 0
mirror of https://github.com/lutinglt/gitea-github-theme.git synced 2025-10-26 13:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

repo 迁移

Browse Source
This commit is contained in:
lutinglt
2025-07-06 23:33:40 +08:00
parent dc6605d780
commit 15076d2996
13 changed files with 436 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.github/todo.md vendored Normal file
View File

@@ -0,0 +1,3 @@
用户头像右上角管理员标识优化
action 下的分支标签颜色
动态关闭工单条颜色

2
src/core/github.ts
View File

@@ -286,8 +286,6 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
const github: Github = {
fgColor: {
accent: githubColor.fgColor.accent,
default: githubColor.fgColor.default,
muted: githubColor.fgColor.muted,
success: githubColor.fgColor.success,
done: githubColor.fgColor.done,
},

14
src/types/color/github.ts
View File

@@ -4,17 +4,9 @@ export const github = {
/** 强调色
* @actions `actionViewRight` 右侧日志标题颜色
* @issue `prBranch` 分支名称文本颜色
* @repo `repoTopic` 仓库主题标签文本颜色
*/
accent: null,
/** 默认的文本颜色
* @diff 增加/删除代码块的文本颜色
*/
default: null,
/** 暗淡的文本颜色
* @diff 折叠行的文本颜色
* @text 灰色文本颜色
*/
muted: null,
/** 成功的文本颜色
* @issue `button` 重新开启按钮文本颜色
* @label `label` 绿色标签的文本颜色
@@ -37,6 +29,7 @@ export const github = {
emphasis: null,
/** 暗淡的背景颜色
* @issue `prBranch` 分支名称背景颜色
* @repo `repoTopic` 仓库主题标签背景颜色
*/
muted: null,
},
@@ -166,6 +159,8 @@ export const github = {
* @dropdown `dropdown` 下拉框子项的悬停背景颜色
* @menu `verticalMenu` 垂直菜单项的悬停背景颜色
* @menu `menu` 菜单项的悬停背景颜色
* @repo `repoHeader` 仓库标题的悬停背景颜色
* @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
*/
hover: null,
},
@@ -184,6 +179,7 @@ export const github = {
borderColor: {
/** 下划线导航栏的边框颜色
* @clone `clone` 按钮组的按钮下划线颜色
* @menu `secondaryMenu` 二级菜单按钮的下划线颜色
*/
active: null,
},

66
styles/components/commit.tsx Normal file
View File

@@ -0,0 +1,66 @@
import { css, otherThemeVars, 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;
}
}
// 提交信息
.message {
// tag 标签
a.ui.basic.primary.label {
border-radius: 25px;
border-width: 1.5px;
padding: 5px 8px !important;
}
}
// 提交信息右侧
.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;
}
}
}
`;
export const commitStatus = css`
.flex-text-inline[data-global-init="initCommitStatuses"] {
padding: 6px;
border-radius: ${otherThemeVars.border.radius};
margin-right: 6px;
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
}
`;

6
styles/components/diff.tsx
View File

@@ -6,7 +6,7 @@ export const diff = css`
background-color: unset;
/* 折叠行文本 */
.code-inner {
color: ${themeVars.github.fgColor.muted};
color: ${themeVars.color.text.light.num1};
}
}
/* 增加/删除行多余的颜色 */
@@ -21,10 +21,10 @@ export const diff = css`
.added-code,
.removed-code {
border-radius: 0.1875rem;
color: ${themeVars.github.fgColor.default};
color: ${themeVars.color.text.self};
/* 覆盖掉 chroma 的颜色 */
* {
color: ${themeVars.github.fgColor.default} !important;
color: ${themeVars.color.text.self} !important;
}
}
/* 展开/收缩按钮 */

227
styles/components/filelist.tsx Normal file
View File

@@ -0,0 +1,227 @@
import { css, themeVars } from "src/types/vars";
// 文件列表页面下的分支按钮
export const branchButton = css`
.page-content.repository.file.list {
.ui.dropdown.branch-selector-dropdown > .menu > .menu {
// 显示默认分支的标签
.ui.label {
background-color: ${themeVars.color.menu};
border: 1px solid ${themeVars.color.light.border};
margin-top: 1px;
margin-left: auto;
margin-right: 16px; // gitea 有 RSS 留出足够的空间
}
}
}
`;
// 顶部提交, 标签, 分支
export const repoMenu = css`
.page-content.repository.file.list {
.repository-summary .repository-menu {
background-color: ${themeVars.color.box.header};
.item {
color: ${themeVars.color.text.light.num1};
b {
color: ${themeVars.color.text.self};
margin: 0 2px;
}
}
}
}
`;
// 仓库按钮
export const repoButton = css`
.page-content.repository.file.list {
// clone 按钮调整
.repo-button-row .repo-button-row-right .ui.primary.button span {
margin: 0px 3px;
}
}
`;
// 仓库文件列表
export const repoFiles = css`
.repository.file.list {
#repo-files-table {
// 头部最后一次提交
.repo-file-line {
padding-right: 16px;
// 父目录
&.parent-link {
gap: 0.5rem;
padding-left: 16px;
svg {
margin-right: 2px;
}
}
// 最后一次提交
&.repo-file-last-commit {
min-height: 3.725rem;
.latest-commit {
.commit-summary {
color: ${themeVars.color.text.light.num1};
}
img.tw-align-middle {
margin-top: -1px;
margin-left: 1px;
margin-right: 8px !important;
}
// 作者
.author-wrapper {
margin-right: 6px;
&:hover {
color: ${themeVars.color.text.self};
}
}
// 提交哈希值
.ui.label {
display: none;
}
}
relative-time {
color: ${themeVars.color.text.light.num1};
}
}
}
// 文件列表
.repo-file-item {
.repo-file-cell {
&.name {
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 16px;
}
&.age {
padding-right: 16px;
}
}
}
}
}
`;
// 手机下隐藏提交信息
export const repoFilesMobile = css`
@media (max-width: 767.98px) {
#repo-files-table {
grid-template-columns: 1fr auto;
.repo-file-line {
grid-column: 1 / span 2;
}
.repo-file-cell {
&.name {
max-width: none;
}
&.message {
display: none;
}
}
}
}
`;
// 仓库代码布局调整, 侧边栏宽度调整
export const repoGrid = css`
.repo-grid-filelist-sidebar {
grid-template-columns: auto 296px;
}
@media (max-width: 767.98px) {
.repo-grid-filelist-sidebar {
grid-template-columns: 100%;
}
}
`;
// 仓库代码页面侧边栏上半部, 版本发布以上
export const repoSidebarTop = css`
.page-content.repository.file.list {
.repo-home-sidebar-top {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 10px 0 0 0;
.flex-item-title {
margin-top: 2px;
}
.flex-item-body {
padding: 8px 0 0 0;
.repo-description {
color: ${themeVars.color.text.self};
}
#repo-topics {
margin: 10px 0px !important;
}
.flex-text-block {
font-size: 14px;
font-weight: 600;
margin-top: 10px;
&.muted {
margin-top: 2px;
font-weight: normal;
}
svg.svg {
margin-right: 4px;
&.octicon-database,
&.octicon-law {
margin-right: 6px;
}
}
}
}
}
}
}
`;
// 仓库代码页面侧边栏下半部, 版本发布以下
export const repoSidebarBottom = css`
.page-content.repository.file.list {
.repo-home-sidebar-bottom {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 16px 0;
.flex-item {
padding: 16px 0 0 0;
.flex-item-icon {
svg.svg.octicon-tag {
color: ${themeVars.color.green.self};
margin-top: 2px;
}
}
.flex-item-header .flex-item-title {
font-size: 14px;
}
}
.flex-item-body {
font-size: 12px;
}
}
// 编程语言
.language-stats {
height: 8px;
margin-bottom: 0px;
}
.language-stats-details .item {
font-size: 12px;
margin-right: 8px;
.color-icon {
height: 8px;
width: 8px;
margin-right: 6px;
}
.tw-font-semibold {
color: ${themeVars.color.text.self};
margin-right: 2px;
}
}
}
}
`;

2
styles/components/index.tsx
View File

@@ -1,7 +1,9 @@
import "./actions";
import "./clone";
import "./commit";
import "./dashboard";
import "./diff";
import "./filelist";
import "./heatmap";
import "./issue";
import "./release";

393
styles/components/repo.scss
View File

@@ -1,393 +0,0 @@
// Made by Luting ^-^
#navbar {
border-bottom-width: 1.5px;
}
.page-content > :first-child.secondary-nav {
border-top: 0;
background-color: var(--color-nav-bg) !important;
}
// 修复关注&派生 hover 意外点亮右侧 label 左边框
.ui.ui.ui.ui.small.button {
z-index: 0;
}
.secondary-nav > .divider {
border-top-width: 1.5px;
}
// 仓库页面头部名称
.page-content.repository .repo-header {
.ui.compact.button {
padding: 3px 12px;
svg {
color: #9198a1;
}
}
img.ui.avatar {
height: 32px;
width: 32px;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
}
.flex-item {
.flex-item-title {
color: #9198a1;
a {
display: flex;
align-items: center;
color: #f0f6fc;
font-size: 16px;
text-decoration: none !important;
min-width: 3ch;
padding: 6px 8px;
padding-inline: 0.5rem;
padding-block: 6px;
border-radius: 0.375rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
&:hover {
background: #15191f;
}
&.muted:not(.tw-font-normal) {
font-weight: 600;
}
}
}
a:not(.label, .button):hover {
color: #f0f6fc !important;
}
}
}
// 仓库导航栏
.ui.secondary.pointing.menu {
.overflow-menu-items {
gap: 0.5rem;
.item {
padding: 5px 8px !important;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-bottom: 0.5rem !important;
}
}
.active.item,
.dropdown.item,
.link.item,
a.item {
color: #f0f6fc;
svg {
color: #9198a1;
margin-right: 8px;
}
}
.active.item {
border-color: #ffffff00;
span:after {
background: #f78166;
border-radius: 0.375rem;
bottom: calc(50% - 1.8rem);
content: "";
height: 2px;
position: absolute;
right: 50%;
transform: translate(50%, -50%);
width: 100%;
z-index: 1;
}
}
}
.header-wrapper .ui.tabular.menu,
.ui.secondary.pointing.menu {
.item:hover {
background: #15191f !important;
}
}
// 仓库文件&提交列表
.page-content.repository {
// 顶部提交, 标签, 分支
.repository-summary .segment.sub-menu {
&.ui.segment {
background-color: var(--color-box-header);
}
.item {
color: #9198a1;
b {
color: #f0f6fc;
margin: 0 2px;
}
}
}
// clone 按钮调整
.repo-button-row .repo-button-row-right .ui.primary.button span {
margin: 0px 3px;
}
// 提交的Action状态
.commit-list,
#repo-files-table {
.flex-text-inline:not(img) {
padding: 6px;
border-radius: var(--border-radius);
margin-right: 6px;
&:hover {
background-color: var(--color-hover);
}
}
}
}
// 仓库文件列表
.repository.file.list {
#repo-files-table {
// 头部最后一次提交
.repo-file-line {
padding-right: 16px;
&.parent-link {
gap: 0.5rem;
padding-left: 16px;
svg {
margin-right: 2px;
}
&:hover {
background-color: var(--color-box-header);
}
}
&.repo-file-last-commit {
height: 3.725rem;
.latest-commit {
.commit-summary {
color: #9198a1;
}
img.tw-align-middle {
margin-top: -1px;
margin-left: 1px;
margin-right: 8px !important;
}
.author-wrapper {
margin-right: 6px;
&:hover {
color: var(--color-text);
}
}
.ui.label {
display: none;
}
}
}
}
// 文件列表
.repo-file-item {
.repo-file-cell {
&.name {
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 16px;
}
&.age {
padding-right: 16px;
}
}
.svg.octicon-file-directory-fill,
.svg.octicon-file-submodule {
color: #7d8590;
}
// 整行背景颜色效果
&:hover .repo-file-cell {
background-color: var(--color-box-header) !important;
}
}
}
}
.repository #commits-table {
.author {
a {
color: var(--color-text);
}
img {
margin-right: 8px !important;
}
}
.text.right.aligned {
color: #919894;
}
}
// 手机下隐藏提交信息
@media (max-width: 767.98px) {
#repo-files-table {
grid-template-columns: 1fr auto;
.repo-file-line {
grid-column: 1 / span 2;
}
.repo-file-cell {
&.name {
max-width: none;
}
&.message {
display: none;
}
}
}
}
// 仓库代码布局调整, 侧边栏宽度调整
.repo-grid-filelist-sidebar {
grid-template-columns: auto 296px;
}
@media (max-width: 767.98px) {
.repo-grid-filelist-sidebar {
grid-template-columns: 100%;
}
}
// 仓库代码页面侧边栏
.page-content.repository {
.repo-home-sidebar-top {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 10px 0 0 0;
.flex-item-title {
margin-top: 2px;
}
.flex-item-body {
padding: 8px 0 0 0;
.repo-description {
color: #f0f6fc;
}
#repo-topics {
margin: 10px 0px !important;
.repo-topic.ui.label {
font-size: 12px;
padding: 5px 10px;
margin: 0px 1.5px 3.5px 0px;
}
}
.flex-text-block {
font-size: 14px;
font-weight: 600;
margin-top: 10px;
&.muted {
margin-top: 2px;
font-weight: normal;
}
svg.svg {
margin-right: 4px;
&.octicon-database,
&.octicon-law {
margin-right: 6px;
}
}
}
}
}
}
.repo-home-sidebar-bottom {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 16px 0;
.flex-item {
padding: 16px 0 0 0;
.flex-item-icon {
svg.svg.octicon-tag {
color: #3fb950;
margin-top: 2px;
}
}
.flex-item-header .flex-item-title {
font-size: 14px;
}
}
.flex-item-title .ui.small.label {
background: var(--color-label-bg);
color: var(--color-label-text);
}
.flex-item-body {
font-size: 12px;
}
}
// 编程语言
.language-stats {
height: 8px;
margin-bottom: 0px;
}
.language-stats-details .item {
font-size: 12px;
margin-right: 16px;
.color-icon {
height: 8px;
width: 8px;
margin-right: 8px;
}
.tw-font-semibold {
color: #f0f6fc;
margin-right: 2px;
}
}
}
}

119
styles/components/repo.tsx
View File

@@ -1,70 +1,71 @@
import { css, themeVars } from "src/types/vars";
import { css, otherThemeVars, 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};
// 仓库头信息
export const repoHeader = css`
.page-content.repository .repo-header {
// 点星/关注/克隆/RSS 按钮
.ui.compact.button {
padding: 3px 12px;
svg {
color: ${themeVars.color.text.light.num1};
}
// 文本跟图标间隔, 文本在手机下不显示
span {
margin-left: 0.5rem;
}
}
// 仓库图标
img.ui.avatar {
height: 32px;
width: 32px;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
}
.flex-item {
.flex-item-title {
// 间隔线颜色
color: ${themeVars.color.text.light.num1};
// 仓库名称
a {
display: flex;
align-items: center;
color: ${themeVars.color.text.self};
font-size: 16px;
text-decoration: none !important;
min-width: 3ch;
padding: 4px 6px;
border-radius: ${otherThemeVars.border.radius};
margin-top: 0.5rem;
margin-bottom: 0.5rem;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
&.muted:not(.tw-font-normal) {
font-weight: 600;
}
}
}
// SHA 标签
.sha {
a.ui.label.commit-id-short {
padding: 2px 8px;
height: 28px;
margin-top: 0.375rem;
margin-bottom: 0.375rem;
margin-left: -8px;
}
}
// 提交信息
.message {
// tag 标签
a.ui.basic.primary.label {
border-radius: 25px;
border-width: 1.5px;
padding: 5px 8px !important;
}
}
// 提交信息右侧
.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;
// 默认的 hover 为 primary 颜色, 修正
a:not(.label, .button):hover {
color: ${themeVars.color.text.self} !important;
}
}
}
`;
// 文件列表页面下的分支按钮
export const branchButton = css`
.page-content.repository.file.list {
.ui.dropdown.branch-selector-dropdown > .menu > .menu {
// 显示默认分支的标签
.ui.label {
background-color: ${themeVars.color.menu};
border: 1px solid ${themeVars.color.light.border};
margin-top: 1px;
margin-left: auto;
margin-right: 16px; // gitea 有 RSS 留出足够的空间
export const repoTopic = css`
#repo-topics {
.ui.label.repo-topic {
border-radius: 25px;
font-size: 12px;
padding: 5px 10px;
margin: 0px 1.5px 3.5px 0px;
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.text.self};
}
}
}

7
styles/public/button.tsx
View File

@@ -95,3 +95,10 @@ export const fixButtonHeight = css`
min-height: 20px;
}
`;
export const fixButton = css`
// 修复关注&派生 hover 意外点亮右侧 label 左边框
.ui.ui.ui.ui.small.button {
z-index: 0;
}
`;

55
styles/public/menu.tsx
View File

@@ -112,6 +112,7 @@ export const verticalMenu = css`
export const menu = css`
// 菜单默认悬浮色更改
.ui.menu a.item,
.ui.secondary.pointing.menu a.item,
.ui.secondary.menu .dropdown.item {
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
@@ -124,4 +125,58 @@ export const menu = css`
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
}
}
// 一些菜单的悬浮色更改
.ui.segment .ui.tabular.menu,
.header-wrapper .ui.tabular.menu,
.ui.secondary.pointing.menu {
.item,
.active.item {
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
}
`;
// 二级导航栏
export const secondaryMenu = css`
.ui.secondary.pointing.menu {
.overflow-menu-items {
gap: 0.5rem;
.item {
padding: 5px 8px !important;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-bottom: 0.5rem !important;
}
}
.active.item,
.dropdown.item,
.link.item,
a.item {
border-radius: ${otherThemeVars.border.radius};
color: ${themeVars.color.text.self};
svg {
color: ${themeVars.color.text.light.num1};
margin-right: 8px;
}
}
.active.item {
// 取消激活时的下划线, 需要为透明, 保持间距
border-color: #ffffff00;
// 模仿 github 的下划线
span:after {
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
bottom: calc(50% - 1.8rem);
height: 2px;
position: absolute;
right: 50%;
transform: translate(50%, -50%);
width: 100%;
z-index: 1;
}
}
}
`;

13
styles/public/radius.tsx
View File

@@ -76,6 +76,13 @@ export const radiusImportant = css`
.ui.secondary.vertical.menu > .item {
border-radius: ${otherThemeVars.border.radius} !important;
}
// 目前为仓库列表/探索的二级菜单, 改版需要替换为全圆角
.ui.tabular.menu .active.item {
border-radius: ${otherThemeVars.border.radius} !important;
&:hover {
border-radius: ${otherThemeVars.border.radius} !important;
}
}
`;
// 上半部分圆角替换
@@ -105,12 +112,6 @@ export const radiusTop = css`
// 上半部分圆角替换(原CSS带!important)
export const radiusTopImportant = css`
.ui.tabular.menu .active.item {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
&:hover {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
}
}
.ui.simple.upward.dropdown {
&.active {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;

2
styles/public/text.tsx
View File

@@ -14,6 +14,6 @@ export const grey = css`
// 默认颜色是 --color-text-light, 主题下此颜色是亮白色, 修改为灰色
// release 页面下一些描述信息的文本颜色
.text.grey {
color: ${themeVars.github.fgColor.muted} !important;
color: ${themeVars.color.text.light.num1} !important;
}
`;