mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 13:00:31 +00:00
Compare commits
22 Commits
e1a65d12df
...
v1.24.7
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c766a16b08 | ||
|
|
77faa2ce63 | ||
|
|
4267c98dbe | ||
|
|
558f75de42 | ||
|
|
6fe0241007 | ||
|
|
b790f73fdf | ||
|
|
db6ec59a83 | ||
|
|
23658a4917 | ||
|
|
0e3628863e | ||
|
|
d178870ea8 | ||
|
|
38874d8b43 | ||
|
|
1a5db58b4f | ||
|
|
05a4dc4f8a | ||
|
|
c5724f41c5 | ||
|
|
585c57dec2 | ||
|
|
6aff05494e | ||
|
|
1eaba74c7e | ||
|
|
fe009734d3 | ||
|
|
89ec60e412 | ||
|
|
1462ac8724 | ||
|
|
bd568bb621 | ||
|
|
c5e4b50b9b |
15
.github/FUNDING.yml
vendored
15
.github/FUNDING.yml
vendored
@@ -1,15 +0,0 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
|
||||
patreon: # Replace with a single Patreon username
|
||||
open_collective: # Replace with a single Open Collective username
|
||||
ko_fi: # Replace with a single Ko-fi username
|
||||
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
||||
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
|
||||
polar: # Replace with a single Polar username
|
||||
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
|
||||
thanks_dev: # Replace with a single thanks.dev username
|
||||
custom: ["https://afdian.com/a/luting"]
|
||||
15
.github/ISSUE_TEMPLATE/1-style-bug-report.yml
vendored
15
.github/ISSUE_TEMPLATE/1-style-bug-report.yml
vendored
@@ -28,6 +28,14 @@ body:
|
||||
placeholder: ex. 1.24.5
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
id: page
|
||||
attributes:
|
||||
label: 页面 ( Page )
|
||||
description: 错误出现的页面 ( The page where the error occurred )
|
||||
placeholder: 工单列表页 ( Issue list page )
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: actual-behavior
|
||||
attributes:
|
||||
@@ -74,3 +82,10 @@ body:
|
||||
description: 请上传 Gitea 默认主题下的截图 ( Please upload a screenshot of the default Gitea theme )
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: github-screenshot
|
||||
attributes:
|
||||
label: 可供参考的 GitHub 页面对应的截图 ( Screenshot of the corresponding GitHub page )
|
||||
description: 请上传 GitHub 页面对应的截图 ( Please upload a screenshot of the corresponding GitHub page )
|
||||
validations:
|
||||
required: false
|
||||
|
||||
7
.github/ISSUE_TEMPLATE/2-feature-request.yml
vendored
7
.github/ISSUE_TEMPLATE/2-feature-request.yml
vendored
@@ -30,3 +30,10 @@ body:
|
||||
description: 预期的主题效果 ( Expected theme effect )
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: github-screenshot
|
||||
attributes:
|
||||
label: 可供参考的 GitHub 页面对应的截图 ( Screenshot of the corresponding GitHub page )
|
||||
description: 请上传 GitHub 页面对应的截图 ( Please upload a screenshot of the corresponding GitHub page )
|
||||
validations:
|
||||
required: false
|
||||
|
||||
38
CHANGELOG.md
38
CHANGELOG.md
@@ -1,11 +1,17 @@
|
||||
### 🌈 Style
|
||||
|
||||
- 调整顶部导航栏高度
|
||||
- 优化顶部和二级导航栏的样式和颜色 #18
|
||||
|
||||
##### 更符合 GitHub 风格
|
||||
|
||||
- 修复并同步工单或 PR 详细页面下的标签菜单样式 #19
|
||||
- 统一仓库/用户/组织列表无搜索结果时的样式 #20
|
||||
- 同步页脚样式
|
||||
- 优化下拉菜单的样式
|
||||
- 优化创建标签菜单的菜单项的样式
|
||||
- 同步亮色和柔和暗色主题下的菜单颜色
|
||||
- 同步工作流运行页面的运行时间字体样式和重新运行按钮样式
|
||||
- VSCode 和 VSCodium 图标添加颜色
|
||||
|
||||
### 🐞 Fix
|
||||
|
||||
@@ -13,3 +19,33 @@
|
||||
- 修复后台账户管理排序菜单项的宽度问题
|
||||
- 修复合并提交中的主色调按钮组阴影问题
|
||||
- 修复仓库页面下二级导航栏下划线过粗的问题
|
||||
- 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角问题
|
||||
- 修复导航栏工单/PR等仪表板下筛选等菜单的子项的间距问题
|
||||
- 修复手机下仪表板二级导航栏用户菜单按钮没有居中的问题
|
||||
|
||||
## 📃 English
|
||||
|
||||
### 🌈 Style
|
||||
|
||||
- Optimized styles and colors for top and secondary navigation bars #18
|
||||
|
||||
##### More aligned with GitHub style
|
||||
|
||||
- Fixed and synchronized label menu styles under issue or PR detail pages #19
|
||||
- Unified styles for repository/user/organization lists when no search results are found #20
|
||||
- Synchronized footer styles
|
||||
- Optimized dropdown menu styles
|
||||
- Optimized menu item styles for creating label menus
|
||||
- Synchronized menu colors in light and soft dark themes
|
||||
- Synchronized font styles for run time and rerun button styles on workflow run pages
|
||||
- Added colors to VSCode and VSCodium icons
|
||||
|
||||
### 🐞 Fix
|
||||
|
||||
- Fixed issue where Wiki page search items were not properly hidden #15
|
||||
- Fixed width issue for sorting menu items in admin account management
|
||||
- Fixed shadow issue for primary color button groups in merge commits
|
||||
- Fixed issue where underlines in secondary navigation bars on repository pages were too thick
|
||||
- Fixed menu corner radius issue when no create organization button exists under dashboard user switching button menu
|
||||
- Fixed spacing issue for sub-items in filter menus under navigation bar issues/PRs dashboards
|
||||
- Fixed issue where user menu buttons in secondary navigation bars on mobile dashboards were not centered
|
||||
33
README.md
33
README.md
@@ -1,9 +1,20 @@
|
||||
<p align="center">
|
||||
中文 |
|
||||
<a href="./README_EN.md">English</a>
|
||||
</p>
|
||||
<h1 align="center">
|
||||
<p>Gitea GitHub Theme</p>
|
||||
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
|
||||
<img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
|
||||
</h1>
|
||||
|
||||
# Gitea GitHub Theme
|
||||
<div align="center">
|
||||
|
||||
中文 • [English](README_EN.md)
|
||||
|
||||
不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题.
|
||||
|
||||
</div>
|
||||
|
||||

|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
@@ -24,6 +35,12 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
|
||||
|
||||
> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
|
||||
|
||||
### 主题版本发布规则
|
||||
|
||||
- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本
|
||||
- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
|
||||
- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
|
||||
|
||||
## 安装
|
||||
|
||||
1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下
|
||||
@@ -49,8 +66,6 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
|
||||
|
||||
## 截图
|
||||
|
||||

|
||||
|
||||
### 基本主题
|
||||
|
||||
```ini
|
||||
@@ -149,7 +164,3 @@ npm run build
|
||||
|
||||
编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在
|
||||
`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
|
||||
|
||||
## 贡献
|
||||
|
||||
请查看 [CONTRIBUTING](CONTRIBUTING.md)
|
||||
|
||||
36
README_EN.md
36
README_EN.md
@@ -1,9 +1,20 @@
|
||||
<p align="center">
|
||||
<a href="./README.md">中文</a> |
|
||||
English
|
||||
</p>
|
||||
<h1 align="center">
|
||||
<p>Gitea GitHub Theme</p>
|
||||
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
|
||||
<img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
|
||||
</h1>
|
||||
|
||||
# Gitea GitHub Theme
|
||||
<div align="center">
|
||||
|
||||
English • [中文](README.md)
|
||||
|
||||
A Gitea theme that pursues GitHub style not only in colors but also in styling details.
|
||||
|
||||
</div>
|
||||
|
||||

|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
@@ -26,6 +37,15 @@ accepted.
|
||||
|
||||
> Development stage theme version number format: `1.major.minor.timestamp`
|
||||
|
||||
### Theme Version Release Rules
|
||||
|
||||
- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor
|
||||
version as Gitea will be released
|
||||
- When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest`
|
||||
will be released and the old version will no longer be maintained
|
||||
- The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a
|
||||
theme version with the same major version as Gitea will be released
|
||||
|
||||
## Installation
|
||||
|
||||
1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory
|
||||
@@ -52,8 +72,6 @@ For details, please refer to the Gitea documentation
|
||||
|
||||
## Screenshots
|
||||
|
||||

|
||||
|
||||
### Basic Themes
|
||||
|
||||
```ini
|
||||
@@ -153,7 +171,3 @@ npm run build
|
||||
|
||||
After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the
|
||||
`gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini`
|
||||
|
||||
## Contribution
|
||||
|
||||
Please refer to [CONTRIBUTING](CONTRIBUTING.md)
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
"typescript-eslint": "^8.34.1",
|
||||
"typescript-plugin-css-modules": "^5.1.0",
|
||||
"typescript-styled-plugin": "^0.18.3",
|
||||
"vite": "^6.3.5"
|
||||
"vite": "^7.1.9"
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 120,
|
||||
|
||||
@@ -70,7 +70,7 @@ export type GithubColor = {
|
||||
transparent: { bgColor: { active: string; hover: string; selected: string } };
|
||||
};
|
||||
shadow: { floating: { small: string }; resting: { small: string } };
|
||||
overlay: { backdrop: { bgColor: string } };
|
||||
overlay: { backdrop: { bgColor: string }; bgColor: string };
|
||||
underlineNav: { borderColor: { active: string } };
|
||||
contribution: {
|
||||
default: {
|
||||
@@ -91,7 +91,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
activeBg: githubColor.control.bgColor.active,
|
||||
hoverBg: githubColor.control.transparent.bgColor.hover,
|
||||
menu: {
|
||||
bg: githubColor.bgColor.inset,
|
||||
bg: githubColor.overlay.bgColor,
|
||||
border: githubColor.borderColor.muted,
|
||||
},
|
||||
};
|
||||
@@ -169,7 +169,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
opaque: themeVars.color.box.header,
|
||||
},
|
||||
active: githubColor.control.transparent.bgColor.selected,
|
||||
menu: githubColor.bgColor.inset,
|
||||
menu: githubColor.overlay.bgColor,
|
||||
card: themeVars.color.body,
|
||||
markup: {
|
||||
tableRow: githubColor.bgColor.muted,
|
||||
@@ -200,11 +200,11 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
bg: githubColor.bgColor.emphasis,
|
||||
},
|
||||
nav: {
|
||||
bg: githubColor.bgColor.inset,
|
||||
bg: githubColor.bgColor.muted,
|
||||
hoverBg: githubColor.control.transparent.bgColor.hover,
|
||||
text: themeVars.color.text.self,
|
||||
},
|
||||
secondaryNavBg: themeVars.color.nav.bg,
|
||||
secondaryNavBg: themeVars.color.body,
|
||||
label: {
|
||||
text: themeVars.color.text.self,
|
||||
bg: githubColor.bgColor.neutral.muted,
|
||||
|
||||
@@ -180,6 +180,7 @@ export const github = {
|
||||
* @dropdown `dropdown` 下拉框子项的悬停背景颜色
|
||||
* @menu `verticalMenu` 垂直菜单项的悬停背景颜色
|
||||
* @menu `menu` 菜单项的悬停背景颜色
|
||||
* @menu `secondaryMenu` 二级菜单按钮的悬停背景颜色
|
||||
* @repo `repoHeader` 仓库标题的悬停背景颜色
|
||||
* @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
|
||||
* @filelist `repoFiles` README 栏的按钮的悬停背景颜色
|
||||
|
||||
@@ -27,7 +27,7 @@ export const actions = css`
|
||||
margin-bottom: 24px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
// 工作流列表标题栏菜单
|
||||
.ui.secondary.menu {
|
||||
background-color: ${themeVars.color.box.header};
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
@@ -36,6 +36,9 @@ export const actions = css`
|
||||
border-top-right-radius: ${otherThemeVars.border.radius};
|
||||
padding: 16px;
|
||||
margin-bottom: 0;
|
||||
> .item {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.info.message {
|
||||
@@ -58,7 +61,7 @@ export const actions = css`
|
||||
.run-list-ref {
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
|
||||
font-family: var(--fonts-monospace);
|
||||
font-weight: 400;
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
@@ -190,6 +193,26 @@ export const actionViewLeft = css`
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
.job-brief-item-right {
|
||||
svg.job-brief-rerun {
|
||||
display: none;
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
&:hover {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
.step-summary-duration {
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
font-family: var(--fonts-monospace);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.job-brief-item-right {
|
||||
svg.job-brief-rerun {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -246,6 +269,11 @@ export const actionViewRight = css`
|
||||
color: ${themeVars.color.console.fg.self} !important;
|
||||
}
|
||||
}
|
||||
// 步骤耗时
|
||||
.step-summary-duration {
|
||||
font-size: 12px;
|
||||
font-family: var(--fonts-monospace);
|
||||
}
|
||||
}
|
||||
// 步骤日志
|
||||
.job-step-logs {
|
||||
|
||||
@@ -92,7 +92,7 @@ export const clone = css`
|
||||
.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 8px;
|
||||
line-height: 1.5;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
|
||||
@@ -135,3 +135,10 @@ export const issueListMobile = css`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 修复仪表板下二级面板选择菜单组织的标签间隔
|
||||
export const fixOrgLabel = css`
|
||||
.dashboard .secondary-nav .org-visibility .label {
|
||||
margin-right: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -157,3 +157,33 @@ export const mobileList = css`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 统一无搜索结果时的样式
|
||||
export const notMatch = css`
|
||||
// 组织的仓库列表
|
||||
.page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
|
||||
// 用户的仓库列表
|
||||
.page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
|
||||
// 探索的仓库列表
|
||||
.page-content.explore.repositories > .ui.container,
|
||||
// 组织的成员列表
|
||||
.page-content.organization.members >.ui.container,
|
||||
// 探索的用户和组织列表
|
||||
.page-content.explore.users >.ui.container {
|
||||
// 排除用户的公开活动页
|
||||
> .flex-list:not(#activity-feed) {
|
||||
&:has(> div:only-child):not(:has(.flex-item-main)) {
|
||||
grid-template-columns: 1fr;
|
||||
> div {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -48,6 +48,9 @@ export const issueList = css`
|
||||
}
|
||||
.issue-list-toolbar-right > .ui.menu {
|
||||
align-items: center;
|
||||
> .item {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
> .ui.button {
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
@@ -544,6 +547,7 @@ export const issueSidebar = css`
|
||||
.page-content.repository.issue {
|
||||
.issue-content {
|
||||
gap: 24px;
|
||||
// 侧边栏
|
||||
.issue-content-right {
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
@@ -593,6 +597,49 @@ export const issueSidebar = css`
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
// 标签菜单项
|
||||
.ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) {
|
||||
// 修复标签菜单中描述文本过长没有换行挤掉标签的问题
|
||||
display: grid !important;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
row-gap: 0px; // 去除行间距, 仅当有描述信息时才有间距(.tw-pl-\\\[20px\\\])
|
||||
// 如果是归档标签则隐藏
|
||||
&.tw-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
// 默认隐藏多余信息避免标签对齐问题
|
||||
.item-secondary-info {
|
||||
display: none;
|
||||
grid-column: 2 / -1; // 从第2列对齐
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
> .tw-pl-\\\[20px\\\] {
|
||||
// 已经与第二列对齐, 不需要额外的 padding
|
||||
padding-left: 0px !important;
|
||||
padding-top: 4px;
|
||||
// 显示全部描述信息与 Github 保持一致
|
||||
white-space: normal;
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
> .archived-label-hint {
|
||||
// 与父元素 item 的 padding 对齐 (dropdown.ts .ui.dropdown .menu > .item)
|
||||
top: 6px;
|
||||
right: 8px;
|
||||
}
|
||||
// 如果有描述信息则显示
|
||||
&:has(.tw-pl-\\\[20px\\\]) {
|
||||
display: block;
|
||||
> .archived-label-hint {
|
||||
top: 4px; // 有描述信息的归档标签与标签对齐需要更高点
|
||||
}
|
||||
}
|
||||
// 如果有归档标签则显示
|
||||
&:has(.archived-label-hint > .ui.label) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 时间追踪
|
||||
> div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
|
||||
@@ -608,7 +655,8 @@ export const issueSidebar = css`
|
||||
.ui.form .due-date {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
.divider {
|
||||
// 分割线
|
||||
> .divider {
|
||||
margin: 12px 0 12px 8px;
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
|
||||
@@ -3,13 +3,30 @@ import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"
|
||||
|
||||
export const navbarRight = css`
|
||||
#navbar {
|
||||
border-bottom: 0;
|
||||
padding: 0px 16px;
|
||||
min-height: 64px;
|
||||
.navbar-left {
|
||||
#navbar-logo img {
|
||||
gap: 8px;
|
||||
> .item {
|
||||
padding: 4px 8px;
|
||||
min-height: 20px;
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
&#navbar-logo {
|
||||
// 与下方的用户切换头像对齐
|
||||
padding-left: 6px;
|
||||
&:hover {
|
||||
background: unset;
|
||||
}
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 进入用户页面后, 避免注册, 登录和首页等意外覆盖
|
||||
.navbar-right:has(.user-menu) {
|
||||
gap: 8px;
|
||||
@@ -77,12 +94,13 @@ export const navbarRight = css`
|
||||
.navbar-profile-admin {
|
||||
background-color: ${themeVars.github.bgColor.accent.emphasis};
|
||||
border-radius: 25px;
|
||||
border: 2px solid ${themeVars.color.nav.bg};
|
||||
color: ${themeVars.color.white};
|
||||
font-size: 8px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
top: -3px;
|
||||
left: 22px;
|
||||
top: -7px;
|
||||
left: 21px;
|
||||
}
|
||||
}
|
||||
// 通知和计时器的圆点
|
||||
@@ -92,10 +110,10 @@ export const navbarRight = css`
|
||||
background-color: ${themeVars.github.bgColor.accent.emphasis};
|
||||
border-radius: 25px;
|
||||
color: ${themeVars.color.white};
|
||||
font-size: 8px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
top: -14px;
|
||||
left: 12px;
|
||||
top: -15px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -133,5 +151,26 @@ export const navbarRight = css`
|
||||
export const secondaryNav = css`
|
||||
.page-content > :first-child.secondary-nav {
|
||||
margin-bottom: 16px;
|
||||
// 仪表板界面的二级导航栏用户菜单
|
||||
> .ui.secondary.stackable.menu {
|
||||
gap: 0px;
|
||||
min-height: 48px;
|
||||
> .item {
|
||||
// 修复手机下的菜单按钮没有居中的问题
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
> .ui.dropdown > .text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
svg {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right.menu {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -144,6 +144,9 @@ export const notification = css`
|
||||
&:last-child {
|
||||
border-bottom-left-radius: ${otherThemeVars.border.radius};
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
&:hover {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.github.bgColor.accent.muted};
|
||||
|
||||
@@ -17,7 +17,9 @@ export const dropdown = css`
|
||||
> .item:not(.tw-hidden) {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding: 6px 8px !important;
|
||||
min-height: 32px;
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
gap: 4px;
|
||||
&:not(.emoji) {
|
||||
@@ -25,9 +27,15 @@ export const dropdown = css`
|
||||
}
|
||||
&:not(.emoji):first-of-type {
|
||||
margin-top: 8px;
|
||||
// 工单详细页面的标签菜单中的清除选中标签按钮
|
||||
&.clear-selection {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
// 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
|
||||
&.cherry-pick-button,
|
||||
// 下一个 item 是最后一个并且被隐藏时, 目前仅在顶部导航栏工单和 PR 仪表板的菜单中出现
|
||||
&:has(+ .tw-hidden:last-of-type),
|
||||
&:not(.emoji):last-of-type {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@@ -102,9 +110,17 @@ export const dropdown = css`
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
// 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单
|
||||
.ui.dropdown .menu .scrolling.menu {
|
||||
.ui.dropdown .menu {
|
||||
.scrolling.menu {
|
||||
border-radius: 0 0 12px 12px !important;
|
||||
}
|
||||
// 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角
|
||||
&.context-user-switch {
|
||||
.scrolling.menu:last-child {
|
||||
border-radius: 0 0 12px 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 修复下拉菜单元素溢出问题
|
||||
// 用户菜单
|
||||
.user-menu>.item,
|
||||
@@ -216,7 +232,8 @@ export const selectionDropdown = css`
|
||||
// 创建仓库页面的标签选择框
|
||||
.ui.search.selection.dropdown {
|
||||
> .menu > .item {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> i {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
@@ -239,6 +256,32 @@ export const branchDropdown = css`
|
||||
max-width: 640px;
|
||||
> .menu > .item {
|
||||
animation: ${animationDown};
|
||||
height: 32px;
|
||||
}
|
||||
// 分支/标签切换
|
||||
> .branch-tag-tab {
|
||||
> .branch-tag-item {
|
||||
font-weight: 500;
|
||||
padding: 8px 12px;
|
||||
height: 32px;
|
||||
line-height: 1.15;
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
&.active {
|
||||
background: ${themeVars.color.body};
|
||||
}
|
||||
&:hover {
|
||||
color: inherit;
|
||||
&:not(.active) {
|
||||
background: ${themeVars.color.hover.self};
|
||||
border: 1px solid ${themeVars.color.secondary.self};
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: ${otherThemeVars.border.radius};
|
||||
border-top-right-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -39,4 +39,8 @@ export const input = css`
|
||||
.ui.form#repo-search-form {
|
||||
align-items: center;
|
||||
}
|
||||
// 下拉菜单的输入框
|
||||
.ui.dropdown.dropdown .menu>.input {
|
||||
margin: 12px 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -148,13 +148,15 @@ export const secondaryMenu = css`
|
||||
padding: 0px 12px;
|
||||
height: 32px;
|
||||
font-weight: 500;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
a.item:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
|
||||
.ui.secondary.pointing.menu {
|
||||
.overflow-menu-items {
|
||||
gap: 0.5rem;
|
||||
gap: 4px;
|
||||
.item {
|
||||
padding: 5px 8px !important;
|
||||
margin-block-start: 0.5rem;
|
||||
|
||||
@@ -8,9 +8,17 @@ export const listHeader = css`
|
||||
}
|
||||
`;
|
||||
|
||||
export const svg = css`
|
||||
// 已标星的图标
|
||||
export const star = css`
|
||||
.octicon-star-fill {
|
||||
color: ${themeVars.github.button.star.iconColor} !important;
|
||||
}
|
||||
// VSCode 图标
|
||||
.gitea-vscode {
|
||||
color: #007acc !important;
|
||||
}
|
||||
// VSCodium 图标
|
||||
.gitea-vscodium {
|
||||
color: #429cf0 !important;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -15,7 +15,8 @@ export const tippyBox = css`
|
||||
border: unset;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
}
|
||||
&[data-theme="default"] {
|
||||
&[data-theme="default"],
|
||||
&[data-theme="menu"] {
|
||||
border-radius: 12px;
|
||||
}
|
||||
&[data-theme="box-with-header"] {
|
||||
@@ -32,6 +33,8 @@ export const tippyBox = css`
|
||||
padding: 8px;
|
||||
.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 8px;
|
||||
height: 32px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@ export const darkGithubColors: GithubColor = {
|
||||
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
|
||||
},
|
||||
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
|
||||
overlay: { backdrop: { bgColor: "#21283066" } },
|
||||
overlay: { backdrop: { bgColor: "#21283066" }, bgColor: "#010409" },
|
||||
underlineNav: { borderColor: { active: "#f78166" } },
|
||||
contribution: {
|
||||
default: {
|
||||
|
||||
@@ -73,7 +73,7 @@ export const lightGithubColors: GithubColor = {
|
||||
transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
|
||||
},
|
||||
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
|
||||
overlay: { backdrop: { bgColor: "#c8d1da66" } },
|
||||
overlay: { backdrop: { bgColor: "#c8d1da66" }, bgColor: "#ffffff" },
|
||||
underlineNav: { borderColor: { active: "#fd8c73" } },
|
||||
contribution: {
|
||||
default: {
|
||||
|
||||
@@ -67,7 +67,7 @@ export const softDarkGithubColors: GithubColor = {
|
||||
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
|
||||
},
|
||||
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
|
||||
overlay: { backdrop: { bgColor: "#262c3666" } },
|
||||
overlay: { backdrop: { bgColor: "#262c3666" }, bgColor: "#2a313c" },
|
||||
underlineNav: { borderColor: { active: "#ec775c" } },
|
||||
contribution: {
|
||||
default: {
|
||||
|
||||
Reference in New Issue
Block a user