yuantao/gitea-banana-theme
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

Compare commits

base: yuantao:59972a282c660aa55a2b1e48fd23d0d732b513b2
Branches Tags
yuantao:master
yuantao:v1
...
compare: yuantao:1f321e6bdd74ae8d80a052e664ea91d4e5342e05
Branches Tags
yuantao:master
yuantao:v1

4 Commits
59972a282c ... 1f321e6bdd

Author SHA1 Message Date
User
1f321e6bdd banana v3 2025-09-25 14:02:34 +08:00
User
12915214b6 bannana v2 2025-09-25 10:45:55 +08:00
User
a35a81009c banana v1 2025-09-25 10:29:31 +08:00
User
d4f873a8c1 描述文件修改 2025-09-25 09:33:37 +08:00
28 changed files with 1786 additions and 255 deletions
Expand all files Collapse all files

8
.env.example
View File

@@ -1,8 +0,0 @@
# 开发模式下编译的主题 (开发模式仅编译单个主题)
DEV_THEME=dark
# 把编译后的主题上传到服务器的服务器名称, 通过 SCP 上传
SSH_SERVER=localhost
# 上传到服务器的用户名称, 不支持密码, 请确保有 SSH 免密登录权限
SSH_USER=root
# 上传到服务器的主题路径, 请使用绝对路径
GITEA_THEME_PATH=/data/gitea/public/assets/css/

2
IFLOW.md
View File

@@ -1,6 +1,6 @@
# Gitea GitHub Theme 项目概述
这个项目为 Gitea 提供了一套 GitHub 风格的主题。它包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。
这个项目为 Gitea 提供了一套 Banana 风格的主题。它包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。
## 项目结构

2
src/core/theme.ts
View File

@@ -49,7 +49,7 @@ export function createTheme(theme: Theme): void {
createGlobalTheme(":root", themeInfoVars, { version });
createGlobalTheme(":root", themeVars, theme);
createGlobalTheme(":root", otherThemeVars, {
border: { radius: "6px" },
border: { radius: "8px" },
color: {
git: "#f05133",
light: {

4
src/core/vite.ts
View File

@@ -52,10 +52,10 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
function giteaThemeMetaInfo(nameGroup: string[]): string {
const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
return `gitea-theme-meta-info{--theme-display-name:"Nanobanana ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
}
const prefix = "theme-github-";
const prefix = "theme-nanobanana-";
/**
* 生成主题文件

84
styles/components/clone.ts
View File

@@ -1,4 +1,4 @@
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
import { css, customThemeVars, themeVars } from "src/types/vars";
// 克隆按钮的弹窗
export const clone = css`
@@ -12,22 +12,29 @@ export const clone = css`
&:first-of-type {
font-weight: 600;
margin-top: 16px;
font-size: 16px; // 增加字体大小
}
}
// 按钮组
.clone-panel-tab {
display: flex;
gap: 8px;
margin-left: 16px;
margin: 16px; // 增加外边距
padding: 4px; // 增加内边距
background-color: ${themeVars.color.hover.self}; // 添加背景色
border-radius: 12px; // 增加圆角
// 按钮
.item {
color: ${themeVars.color.text.self};
font-weight: 600;
padding: 6px 8px;
margin: 8px 0;
padding: 8px 12px; // 增加内边距
margin: 4px; // 调整外边距
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
position: relative;
top: -1px;
}
&.active:after {
content: "";
@@ -38,65 +45,86 @@ export const clone = css`
width: 100%;
height: 2px;
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
}
}
.item.active {
border-bottom: 0;
position: relative;
background-color: ${themeVars.color.menu}; // 添加背景色
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
}
}
// 克隆地址
.ui.input.action {
margin: 0 16px 16px 16px; // 增加外边距
> input {
border: 1px solid ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
min-width: 150px;
max-width: 400px;
width: ${customThemeVars.cloneMenuWidth};
padding: 8px 12px; // 增加内边距
font-size: 14px; // 增加字体大小
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
border: 1px solid ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
}
&:focus,
&:focus-visible {
border-color: ${themeVars.github.borderColor.accent.emphasis};
box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
}
}
.ui.ui.ui.button {
background-color: unset;
border: unset;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
color: ${themeVars.color.text.light.num1};
padding: 0;
width: 32px;
height: 32px;
margin-left: 5px;
width: 36px; // 增加宽度
height: 36px; // 增加高度
margin-left: 8px; // 增加左边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
transform: scale(1.05); // 轻微放大效果
}
svg {
width: 16px;
height: 16px;
width: 18px; // 增加宽度
height: 18px; // 增加高度
}
}
}
// 面板操作列表之间的分割线
.divider {
margin: 0;
border-color: ${themeVars.color.light.border}; // 使用主题色
}
// 面板操作列表
.clone-panel-list {
margin: 8px;
.item {
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px;
border-radius: 8px; // 增加圆角
padding: 8px 12px; // 增加内边距
line-height: 1.5;
margin: 0;
margin: 4px 8px; // 调整外边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
svg {
color: ${themeVars.color.text.light.num1};
margin-right: 0.25rem;
margin-right: 0.5rem; // 增加右边距
width: 16px; // 增加宽度
height: 16px; // 增加高度
}
&:hover {
color: ${themeVars.color.text.self};
text-decoration: none;
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
left: 2px;
}
}
> .item:hover {
@@ -107,4 +135,24 @@ export const clone = css`
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
.tippy-box .clone-panel-popup {
.clone-panel-tab .item {
padding: 6px 10px; // 调整内边距
}
.ui.input.action {
> input {
padding: 6px 10px; // 调整内边距
font-size: 13px; // 调整字体大小
}
.ui.ui.ui.button {
width: 32px; // 调整宽度
height: 32px; // 调整高度
}
}
}
}
`;

86
styles/components/commit.ts
View File

@@ -1,25 +1,42 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
// 提交列表
export const commit = css`
.page-content.repository {
// 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
#commits-table.ui.basic.striped.table tbody.commit-list {
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
overflow: hidden; // 隐藏溢出内容
// 作者
.author {
// 作者名称
.author-wrapper {
color: ${themeVars.color.text.light.num1};
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
color: ${themeVars.color.primary.self};
}
}
}
// SHA 标签
.sha {
a.ui.label.commit-id-short {
padding: 2px 8px;
height: 28px;
padding: 4px 10px; // 增加内边距
height: 32px; // 增加高度
margin-top: 0.375rem;
margin-bottom: 0.375rem;
margin-left: -8px;
border-radius: 25px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
position: relative;
top: -1px;
}
}
}
// 提交信息
@@ -28,7 +45,13 @@ export const commit = css`
a.ui.basic.primary.label {
border-radius: 25px;
border-width: 1.5px;
padding: 5px 8px !important;
padding: 6px 12px !important; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -1px;
}
}
}
// 提交信息右侧
@@ -40,12 +63,23 @@ export const commit = css`
// 查看提交路径按钮
.btn.view-commit-path {
color: ${themeVars.color.text.light.num1};
padding: 4px 8px; // 增加内边距
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
}
tr {
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
// 整行悬停色
&:hover {
background-color: ${themeVars.color.hover.opaque};
position: relative;
left: 2px;
}
// 偶数行悬停色
&:nth-child(2n):hover {
@@ -54,24 +88,58 @@ export const commit = css`
// 尾行圆角
&:last-child {
td:first-child {
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: 12px; // 增加圆角
}
td:last-child {
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: 12px; // 增加圆角
}
}
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
.page-content.repository #commits-table.ui.basic.striped.table tbody.commit-list {
.sha a.ui.label.commit-id-short {
padding: 3px 8px; // 调整内边距
height: 28px; // 调整高度
}
.message a.ui.basic.primary.label {
padding: 4px 8px !important; // 调整内边距
}
.tw-text-right {
.btn.copy-commit-id,
.btn.view-commit-path {
padding: 3px 6px; // 调整内边距
}
}
}
}
`;
export const commitStatus = css`
.flex-text-inline[data-global-init="initCommitStatuses"] {
padding: 6px;
margin-top: 2px;
border-radius: ${otherThemeVars.border.radius};
padding: 8px 12px; // 增加内边距
margin-top: 4px; // 增加顶部外边距
border-radius: 8px; // 增加圆角
background-color: ${themeVars.color.menu}; // 添加背景色
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
// 移动端优化
@media (max-width: 767.98px) {
.flex-text-inline[data-global-init="initCommitStatuses"] {
padding: 6px 10px; // 调整内边距
margin-top: 2px; // 调整顶部外边距
}
}
`;

87
styles/components/dashboard.ts
View File

@@ -1,4 +1,4 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
export const dashboard = css`
// 首页仪表板, 避免选中管理员后台的维护管理面板
@@ -8,25 +8,32 @@ export const dashboard = css`
background: ${themeVars.color.hover.self};
border: 0;
border-radius: 12px;
margin-bottom: 8px;
margin-bottom: 16px; // 增加底部间距
padding: 4px; // 增加内边距
> .item {
background: unset;
border-radius: 12px;
padding: 6px 12px !important;
padding: 8px 16px !important; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.active {
background: ${themeVars.color.menu};
box-shadow: ${themeVars.github.shadow.floating.small};
font-weight: 600;
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&::before {
display: none;
}
&:not(.active) {
border-radius: ${otherThemeVars.border.radius};
margin: 6px !important;
width: calc(50% - 12px);
border-radius: 8px; // 增加圆角
margin: 4px !important; // 调整边距
width: calc(50% - 8px); // 调整宽度
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
}
@@ -35,18 +42,21 @@ export const dashboard = css`
.ui.top.attached.header {
border: 0;
font-size: 20px;
font-weight: 400;
font-weight: 600; // 增加字体粗细
background-color: unset !important;
margin-bottom: 0.25rem;
padding: 16px 20px; // 增加内边距
}
// 仓库/组织列表
.ui.attached.segment {
background-color: ${themeVars.color.menu};
border: unset !important;
box-shadow: ${themeVars.github.shadow.floating.small};
margin-bottom: 16px; // 增加底部间距
&.repos-search {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding: 16px; // 增加内边距
}
&.table {
&:last-child {
@@ -56,13 +66,17 @@ export const dashboard = css`
ul {
padding: 8px;
li {
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px !important;
border-radius: 8px; // 增加圆角
padding: 12px 16px !important; // 增加内边距
margin: 4px 0; // 增加垂直间距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:not(:last-child) {
border-bottom: 0;
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
left: 2px;
}
a.muted:hover {
color: inherit;
@@ -87,39 +101,49 @@ export const dashboardIssues = css`
background-color: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.light.border};
border-bottom: 0;
border-top-left-radius: ${otherThemeVars.border.radius};
border-top-right-radius: ${otherThemeVars.border.radius};
border-top-left-radius: 12px; // 增加圆角
border-top-right-radius: 12px; // 增加圆角
height: 54px;
padding: 16px 8px;
padding: 16px 16px; // 增加内边距
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.list-header-toggle {
align-items: center;
border: 0;
> .item {
background: unset !important;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
color: ${themeVars.color.text.light.num1};
padding: 0px 8px;
height: 30px;
padding: 0px 16px; // 增加内边距
height: 36px; // 增加高度
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:before {
display: none;
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
position: relative;
top: -1px;
}
&.active {
color: ${themeVars.color.text.self};
font-weight: 700;
background: ${themeVars.color.active} !important; // 添加背景色
}
}
}
.list-header-filters {
> .item {
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
color: ${themeVars.color.text.light.num1};
padding: 0px 12px;
height: 32px;
padding: 0px 16px; // 增加内边距
height: 36px; // 增加高度
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
}
@@ -132,6 +156,21 @@ export const issueListMobile = css`
@media (max-width: 767.98px) {
.page-content.dashboard.issues .list-header {
height: auto;
padding: 12px; // 调整内边距
}
// 移动端优化
.list-header-toggle,
.list-header-filters {
flex-wrap: wrap; // 允许换行
gap: 8px; // 增加间距
}
.list-header-toggle > .item,
.list-header-filters > .item {
flex: 1 1 auto; // 自适应宽度
min-width: calc(50% - 4px); // 最小宽度
text-align: center; // 文本居中
}
}
`;
@@ -141,4 +180,16 @@ export const fixOrgLabel = css`
.dashboard .secondary-nav .org-visibility .label {
margin-right: 0;
}
// 增强组织可见性标签样式
.dashboard .secondary-nav .org-visibility .label {
padding: 4px 12px; // 增加内边距
border-radius: 25px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -1px;
}
}
`;

67
styles/components/diff.ts
View File

@@ -7,6 +7,7 @@ export const diff = css`
/* 折叠行文本 */
.code-inner {
color: ${themeVars.color.text.light.num1};
font-weight: 500; // 增加字体粗细
}
}
/* 增加/删除行多余的颜色 */
@@ -22,6 +23,7 @@ export const diff = css`
.removed-code {
border-radius: 0.1875rem;
color: ${themeVars.color.text.self};
padding: 0 2px; // 增加内边距
/* 覆盖掉 chroma 的颜色 */
* {
color: ${themeVars.color.text.self} !important;
@@ -30,23 +32,38 @@ export const diff = css`
/* 展开/收缩按钮 */
.code-expander-button {
color: ${themeVars.color.text.light.num1};
height: 28px !important;
height: 32px !important; // 增加高度
padding: 0 12px; // 增加内边距
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
position: relative;
top: -1px;
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
}
}
/* 行号居中 */
.lines-num {
text-align: center !important;
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体
}
// 差异对比文件盒子
.diff-file-box {
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
margin-bottom: 16px; // 增加底部间距
overflow: hidden; // 隐藏溢出内容
// 差异对比文件头
.diff-file-header {
// 文件名
.diff-file-name {
font-weight: 400;
font-weight: 500; // 增加字体粗细
padding: 12px 16px; // 增加内边距
.fold-file.btn svg {
min-width: 16px;
min-height: 16px;
@@ -55,6 +72,7 @@ export const diff = css`
}
.diff-stats-bar {
height: 8px;
border-radius: 4px; // 增加圆角
}
> div,
.file-link {
@@ -66,7 +84,52 @@ export const diff = css`
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 400;
padding: 12px 16px; // 增加内边距
}
}
}
// 增强差异对比的可读性
.code-diff {
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体
font-size: 14px; // 增加字体大小
line-height: 1.5; // 增加行高
}
// 增加行的样式
.add-code {
background-color: ${themeVars.color.diff.added.row.bg}; // 使用主题色
&:hover {
background-color: ${themeVars.color.diff.added.row.border}; // 悬停时改变背景色
}
}
// 删除行的样式
.del-code {
background-color: ${themeVars.color.diff.removed.row.bg}; // 使用主题色
&:hover {
background-color: ${themeVars.color.diff.removed.row.border}; // 悬停时改变背景色
}
}
// 移动行的样式
.moved-code {
background-color: ${themeVars.color.diff.moved.row.bg}; // 使用主题色
&:hover {
background-color: ${themeVars.color.diff.moved.row.border}; // 悬停时改变背景色
}
}
// 行号的样式
.lines-num {
background-color: ${themeVars.color.box.body.self}; // 使用主题色
border-right: 1px solid ${themeVars.color.light.border}; // 添加右边框
padding: 0 8px; // 增加内边距
min-width: 40px; // 设置最小宽度
}
// 行内容的样式
.lines-code {
padding: 0 12px; // 增加内边距
}
`;

116
styles/components/filelist.ts
View File

@@ -1,4 +1,4 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
// 文件列表页面下的分支按钮
export const branchButton = css`
@@ -11,6 +11,14 @@ export const branchButton = css`
margin-top: 1px;
margin-left: auto;
margin-right: 20px; // gitea 有 RSS 留出足够的空间
border-radius: 25px; // 增加圆角
padding: 4px 10px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
}
}
@@ -21,10 +29,19 @@ export const syncFork = css`
.page-content.repository.file.list {
.repo-home-filelist > .ui.message {
background: ${themeVars.color.box.header};
padding: 8px 8px 8px 16px;
padding: 12px 16px; // 增加内边距
margin: 16px 0px;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.ui.button {
min-width: 96px;
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
}
}
@@ -35,10 +52,14 @@ export const repoFiles = css`
// 文件列表和提交列表的按钮组
.repo-button-row {
margin: 16px 0;
gap: 8px; // 增加间距
}
.repository.file.list {
#repo-files-table {
margin: 16px 0;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
overflow: hidden; // 隐藏溢出内容
// 头部最后一次提交
.repo-file-line {
padding-right: 16px;
@@ -81,7 +102,11 @@ export const repoFiles = css`
// 文件列表
.repo-file-item {
.repo-file-cell {
height: 40px;
height: 44px; // 增加高度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
&.name {
display: flex;
align-items: center;
@@ -99,6 +124,7 @@ export const repoFiles = css`
background: ${themeVars.color.body};
min-height: 48px;
padding: 0px 8px !important;
border-radius: 12px 12px 0 0; // 增加圆角
svg {
color: ${themeVars.color.text.light.num1};
}
@@ -106,14 +132,16 @@ export const repoFiles = css`
padding: 8px !important;
// 伪元素宽度等于按钮宽度而不是父元素宽度
position: relative;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
}
&:after {
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
bottom: -7px;
left: 0;
height: 2px;
@@ -125,9 +153,13 @@ export const repoFiles = css`
text-decoration-line: none;
}
}
.file-header-right:hover {
.file-header-right {
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
}
}
}
}
@@ -185,6 +217,8 @@ export const repoFileView = css`
// 固定头部
position: sticky;
top: 0;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
&:after {
content: "";
position: absolute;
@@ -203,6 +237,7 @@ export const repoFileView = css`
// 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
position: sticky;
top: 0;
border-radius: 12px 12px 0 0; // 增加圆角
&:after {
content: "";
position: absolute;
@@ -214,6 +249,12 @@ export const repoFileView = css`
}
.ui.compact.icon.button {
border: 0;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -1px;
}
}
}
.view-file-tree-items {
@@ -228,7 +269,7 @@ export const repoFileView = css`
align-content: center;
background: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.secondary.self};
border-radius: ${otherThemeVars.border.radius};
border-radius: 12px; // 增加圆角
margin: 16px 0;
height: 46px;
min-height: 46px;
@@ -236,8 +277,16 @@ export const repoFileView = css`
position: sticky;
top: 0;
z-index: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.ui.button {
min-height: 32px;
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -1px;
}
}
// 打开文件树按钮
.repo-view-file-tree-toggle-show {
@@ -245,10 +294,12 @@ export const repoFileView = css`
border-color: #0000;
padding: 0;
min-width: 32px;
border-radius: 8px; // 增加圆角
}
// 分支选择按钮
.branch-dropdown-button {
padding: 0 12px;
border-radius: 8px; // 增加圆角
}
// 路径
.repo-path {
@@ -274,9 +325,11 @@ export const repoFileView = css`
h4.file-header {
padding: 8px 12px !important;
position: sticky;
border-radius: 12px 12px 0 0; // 增加圆角
// 重叠边框线, 避免过粗
top: 45px;
z-index: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.file-header-left {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
@@ -290,6 +343,12 @@ export const repoFileView = css`
height: 28px;
font-size: 12px;
padding: 0 8px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -1px;
}
}
}
// 右侧操作按钮
@@ -300,20 +359,24 @@ export const repoFileView = css`
border: 1px solid ${themeVars.color.light.border};
height: 28px;
padding: 0 8px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
svg {
color: ${themeVars.color.text.light.num1};
}
&:first-of-type {
border-top-left-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-top-left-radius: 8px; // 增加圆角
border-bottom-left-radius: 8px; // 增加圆角
}
&:last-of-type {
border-top-right-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-top-right-radius: 8px; // 增加圆角
border-bottom-right-radius: 8px; // 增加圆角
}
&:hover {
background: ${themeVars.color.hover.self};
color: ${themeVars.color.text.light.num1};
position: relative;
top: -1px;
}
}
}
@@ -321,9 +384,11 @@ export const repoFileView = css`
}
// 头部提交信息
.ui.segment#repo-file-commit-box {
padding: 8px 12px;
padding: 12px 16px; // 增加内边距
margin-bottom: 16px !important;
min-height: 46px;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
> .latest-commit {
gap: 8px;
.commit-summary {
@@ -357,6 +422,20 @@ export const repoFileViewMobile = css`
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
.repo-view-container .repo-view-file-tree-container {
height: auto;
position: static;
}
.repo-view-content .repo-button-row {
flex-wrap: wrap;
height: auto;
padding: 8px 12px;
}
}
`;
// 仓库代码布局调整, 侧边栏宽度调整
@@ -393,6 +472,8 @@ export const repoSidebarTop = css`
}
.repo-description {
color: ${themeVars.color.text.self};
font-size: 14px; // 增加字体大小
line-height: 1.5; // 增加行高
}
#repo-topics {
margin: 10px 0px !important;
@@ -428,6 +509,13 @@ export const repoSidebarBottom = css`
}
.flex-item {
padding: 16px 0;
border-radius: 12px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.opaque};
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
.flex-item {
padding: 16px 0 0 0;
.flex-item-icon {
@@ -448,6 +536,7 @@ export const repoSidebarBottom = css`
.language-stats {
height: 8px;
margin-bottom: 0px;
border-radius: 4px; // 增加圆角
}
.language-stats-details .item {
font-size: 12px;
@@ -456,6 +545,7 @@ export const repoSidebarBottom = css`
height: 8px;
width: 8px;
margin-right: 8px;
border-radius: 50%; // 圆形图标
}
.tw-font-semibold {
color: ${themeVars.color.text.self};

43
styles/components/footer.ts
View File

@@ -2,19 +2,28 @@ import { css, themeVars } from "src/types/vars";
export const footer = css`
.page-footer {
background-color: ${themeVars.color.body};
background-color: ${themeVars.color.footer}; // 使用主题色
border-top: 0;
color: ${themeVars.color.text.light.num1};
font-size: 12px;
gap: 32px;
justify-content: center;
padding: 16px 0 40px 0;
padding: 24px 0 40px 0; // 增加顶部内边距
border-radius: 12px 12px 0 0; // 增加圆角
margin-top: 32px; // 增加顶部外边距
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
> .left-links {
gap: 4px;
gap: 8px; // 增加间距
> a {
color: ${themeVars.color.text.light.num1};
padding: 4px 8px; // 增加内边距
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
color: ${themeVars.color.primary.self};
background-color: ${themeVars.color.hover.self};
position: relative;
top: -1px;
}
}
> strong {
@@ -25,19 +34,45 @@ export const footer = css`
gap: 16px;
> .ui.dropdown {
font-size: 12px;
padding: 4px 8px; // 增加内边距
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
color: ${themeVars.color.primary.self};
background-color: ${themeVars.color.hover.self};
position: relative;
top: -1px;
}
}
> a {
border-left: 0;
color: ${themeVars.color.text.light.num1};
padding-left: 0;
padding: 4px 8px; // 增加内边距
margin-left: 0;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
color: ${themeVars.color.primary.self};
background-color: ${themeVars.color.hover.self};
position: relative;
top: -1px;
}
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
.page-footer {
flex-direction: column; // 垂直排列
gap: 16px; // 调整间距
padding: 16px 0 32px 0; // 调整内边距
> .left-links,
> .right-links {
flex-wrap: wrap; // 允许换行
justify-content: center; // 居中对齐
gap: 8px; // 调整间距
}
}
}
`;

94
styles/components/heatmap.ts
View File

@@ -9,62 +9,82 @@ export const heatmap = css`
.total-contributions {
left: 25px + 20px;
bottom: 0 + 12px;
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 500;
}
.total-contributions,
.vch__legend-right {
color: ${themeVars.color.text.light.num1};
}
.vch__container {
padding: 12px 20px;
padding: 16px 24px;
box-shadow: ${themeVars.github.shadow.floating.small};
border-radius: 12px;
border-radius: 16px; // 增加圆角
background-color: ${themeVars.color.menu};
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
// 覆盖热力图和图例的背景色
.vch__day__square,
.vch__legend__wrapper rect {
// 圆角
rx: 2.5px;
ry: 2.5px;
// hover 时的圆角
border-radius: 0.75px;
rx: 2px;
ry: 2px;
// 宽度和高度可以用来控制间隔
width: 9px;
height: 9px;
width: 12px; // 增加宽度
height: 12px; // 增加高度
// 边框
outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
// 边框向内偏移
outline-offset: -0.5px;
outline: 1px solid ${themeVars.github.contribution.default.borderColor.num0};
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
// 悬停效果
&:hover {
outline: 2px solid ${themeVars.color.primary.self}; // 添加主色调边框
position: relative; // 使用相对定位而不是 z-index
}
&[style="fill: var(--color-secondary-alpha-60);"] {
fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
}
&[style="fill: var(--color-primary-light-4);"] {
fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num1};
fill: ${themeVars.color.primary.light.num4} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num0};
}
&[style="fill: var(--color-primary-light-2);"] {
fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num2};
fill: ${themeVars.color.primary.light.num2} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num0};
}
&[style="fill: var(--color-primary);"] {
fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num3};
fill: ${themeVars.color.primary.self} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num0};
}
&[style="fill: var(--color-primary-dark-2);"] {
fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num4};
fill: ${themeVars.color.primary.dark.num2} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num0};
}
&[style="fill: var(--color-primary-dark-4);"] {
fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num5};
fill: ${themeVars.color.primary.dark.num4} !important;
outline-color: ${themeVars.github.contribution.default.borderColor.num0};
}
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
#user-heatmap .vch__container {
padding: 12px 16px;
border-radius: 12px; // 调整圆角
.vch__day__square,
.vch__legend__wrapper rect {
width: 10px; // 调整宽度
height: 10px; // 调整高度
}
}
}
`;
// 动态
@@ -72,9 +92,18 @@ export const activity = css`
.flex-list#activity-feed {
border-radius: 12px;
box-shadow: ${themeVars.github.shadow.floating.small};
background-color: ${themeVars.color.menu}; // 添加背景色
> .flex-item {
gap: 12px;
padding: 12px 8px 16px 14px;
padding: 16px 12px 20px 16px; // 增加内边距
border-bottom: 1px solid ${themeVars.color.light.border}; // 添加底部边框
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:last-child {
border-bottom: none; // 最后一项移除边框
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
> .flex-item-main {
gap: 8px !important;
> div:not([class]) {
@@ -88,13 +117,28 @@ export const activity = css`
}
// 动态的右侧 svg 图标
.flex-item-trailing svg {
height: 20px;
width: 20px;
height: 24px; // 增加高度
width: 24px; // 增加宽度
color: ${themeVars.color.text.light.num1};
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
}
}
> .page.buttons {
border-top: 1px solid ${themeVars.color.secondary.self};
padding: 12px 0px;
padding: 16px 0px; // 增加内边距
margin: 0; // 移除外边距
border-radius: 0 0 12px 12px; // 增加圆角
}
}
// 移动端优化
@media (max-width: 767.98px) {
.flex-list#activity-feed > .flex-item {
padding: 12px 8px 16px 12px; // 调整内边距
.flex-item-trailing svg {
height: 20px; // 调整高度
width: 20px; // 调整宽度
}
}
}
`;

311
styles/components/issue.ts
View File

@@ -1,4 +1,4 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";
// 工单&PR 列表
@@ -14,11 +14,12 @@ export const issueList = css`
background-color: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.light.border};
border-bottom: 0;
border-top-left-radius: ${otherThemeVars.border.radius};
border-top-right-radius: ${otherThemeVars.border.radius};
height: 48px;
padding: 8px;
border-top-left-radius: 12px; // 增加圆角
border-top-right-radius: 12px; // 增加圆角
height: 56px; // 增加高度
padding: 12px 16px; // 增加内边距
margin-top: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.issue-list-toolbar-left {
// 复选框
input {
@@ -29,19 +30,24 @@ export const issueList = css`
border: 0;
> .item {
background: unset !important;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
color: ${themeVars.color.text.light.num1};
padding: 0px 8px;
height: 30px;
padding: 0px 16px; // 增加内边距
height: 36px; // 增加高度
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:before {
display: none;
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
position: relative;
top: -1px;
}
&.active {
color: ${themeVars.color.text.self};
font-weight: 700;
background: ${themeVars.color.active} !important; // 添加背景色
}
}
}
@@ -52,8 +58,15 @@ export const issueList = css`
color: ${themeVars.color.text.light.num1};
}
> .ui.button {
padding: 0 12px;
height: 32px;
padding: 0 16px; // 增加内边距
height: 36px; // 增加高度
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -1px;
}
}
}
}
@@ -68,17 +81,20 @@ export const issueList = css`
.page-content.repository.issue-list {
.flex-list#issue-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: 12px; // 增加圆角
border-bottom-right-radius: 12px; // 增加圆角
> .flex-item {
align-items: center;
padding: 0;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:last-child {
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: 12px; // 增加圆角
border-bottom-right-radius: 12px; // 增加圆角
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
// 移除 transform 以避免创建新的层叠上下文
// transform: translateX(2px); // 轻微右移效果
}
> .flex-item-icon {
display: flex;
@@ -97,11 +113,11 @@ export const issueList = css`
> .flex-item-main {
gap: 4px;
.flex-item-header {
padding-top: 8px;
padding-top: 12px; // 增加内边距
}
.flex-item-body {
font-size: 12px;
padding-bottom: 8px;
padding-bottom: 12px; // 增加内边距
}
}
> .flex-item-trailing {
@@ -114,14 +130,20 @@ export const issueList = css`
// [TODO] 暂时排除项目的列表
.page-content.repository.milestones:not(.projects) .milestone-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: 12px; // 增加圆角
border-bottom-right-radius: 12px; // 增加圆角
.milestone-card {
padding: 8px 16px 10px 16px;
padding: 16px 20px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.opaque};
position: relative;
top: -1px;
}
.milestone-header {
h3 {
font-size: 16px;
font-weight: 500;
font-size: 18px; // 增加字体大小
font-weight: 600; // 增加字体粗细
}
div span {
font-size: 14px;
@@ -146,31 +168,54 @@ export const issueListMobile = css`
.page-content.repository.issue-list {
.issue-list-toolbar {
height: auto;
padding: 12px; // 调整内边距
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
.issue-list-toolbar-left > .ui.compact.menu > .item,
.issue-list-toolbar-right > .ui.menu > .item {
padding: 0px 12px; // 调整内边距
height: 32px; // 调整高度
}
.issue-list-toolbar-right > .ui.menu > .ui.button {
padding: 0 12px; // 调整内边距
height: 32px; // 调整高度
}
}
`;
// 置顶 Issue
export const issuePins = css`
#issue-pins {
gap: 12px;
margin-bottom: 16px;
gap: 16px; // 增加间距
margin-bottom: 20px; // 增加底部间距
.issue-card {
padding: 16px 12px;
padding: 20px 16px; // 增加内边距
border-radius: 12px; // 增加圆角
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -2px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 增强阴影
}
.content {
.issue-card-title {
font-size: 16px;
font-size: 18px; // 增加字体大小
font-weight: 600;
}
svg {
color: ${themeVars.color.text.light.num1};
height: 100%;
margin-right: 3px;
margin-right: 4px; // 增加右边距
}
.meta {
font-size: 12px;
padding-top: 4px;
padding-top: 6px; // 增加内边距
}
}
.issue-card-bottom {
@@ -187,20 +232,50 @@ export const button = css`
color: ${themeVars.github.fgColor.done};
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
border-radius: 8px; // 增加圆角
padding: 8px 16px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.self};
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
}
}
// 重新开启按钮
.ui.basic.primary.button#status-button {
color: ${themeVars.github.fgColor.success};
border-radius: 8px; // 增加圆角
padding: 8px 16px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
}
}
}
// 工单&PR标题右侧按钮
.repository.view.issue .issue-title-buttons > .ui.button {
padding: 0 12px;
height: 32px;
padding: 0 16px; // 增加内边距
height: 36px; // 增加高度
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
}
}
`;
@@ -210,37 +285,58 @@ export const babel = css`
// 时间线打开状态标签
&.tw-bg-green {
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
border-radius: 25px; // 增加圆角
}
// 时间线关闭状态标签
&.tw-bg-red {
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-radius: 25px; // 增加圆角
}
// 时间线合并状态标签
&.tw-bg-purple {
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-radius: 25px; // 增加圆角
}
}
}
// 工单&PR状态标签
.ui.label.issue-state-label {
border-radius: 25px !important;
padding: 6px 12px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.green {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
border-color: ${themeVars.github.bgColor.success.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
position: relative;
top: -1px;
}
}
&.red {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
position: relative;
top: -1px;
}
}
&.purple {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
position: relative;
top: -1px;
}
}
}
`;
@@ -251,16 +347,23 @@ export const prBranch = css`
#issue-list .flex-item-body .branches .branch {
color: ${themeVars.github.fgColor.accent};
background-color: ${themeVars.github.bgColor.accent.muted};
border-radius: ${otherThemeVars.border.radius};
border-radius: 25px; // 增加圆角
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
font-size: 12px;
padding: 0 5px;
padding: 4px 10px; // 增加内边距
line-height: 20px;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
.repository.view.issue .pull-desc code {
padding-top: 3px;
padding-bottom: 3px;
padding-top: 4px; // 增加内边距
padding-bottom: 4px; // 增加内边距
a:hover {
text-decoration-line: none;
}
@@ -282,12 +385,13 @@ export const comment = css`
&:target {
.comment-container {
border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
box-shadow: 0 0 0 2px ${themeVars.color.primary.self} !important; // 增强焦点效果
}
}
.comment-header {
padding: 4px 4px 4px 16px;
min-height: 38px;
padding: 8px 8px 8px 16px; // 增加内边距
min-height: 42px; // 增加最小高度
border-radius: 12px 12px 0 0; // 增加圆角
}
.comment-header-right {
> .item,
@@ -297,8 +401,14 @@ export const comment = css`
> .ui.label {
background-color: initial;
font-size: 12px;
height: 20px;
padding: 0 6px;
height: 24px; // 增加高度
padding: 0 8px; // 增加内边距
border-radius: 25px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -1px;
}
}
// 隐藏顶部菜单的表情按钮
// 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题
@@ -314,9 +424,12 @@ export const comment = css`
// 评论菜单的删除按钮
.menu .item.delete-comment {
color: ${themeVars.color.red.self};
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.red.badge.bg} !important;
color: ${themeVars.color.red.light};
position: relative;
left: 2px;
}
}
}
@@ -327,12 +440,18 @@ export const comment = css`
align-items: center;
justify-content: center;
background: ${themeVars.color.button};
border-radius: 25px;
border-radius: 25px; // 增加圆角
border: 1px solid ${themeVars.color.light.border};
color: ${themeVars.color.text.light.num1};
padding: 0px 8px !important;
height: 28px;
width: 28px;
padding: 0px 10px !important; // 增加内边距
height: 32px; // 增加高度
width: 32px; // 增加宽度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.hover.self};
position: relative;
top: -1px;
}
}
// 底部表情栏
.bottom-reactions {
@@ -340,9 +459,13 @@ export const comment = css`
background-color: unset !important;
border-radius: 25px;
border-color: ${themeVars.color.light.border};
padding: 4px 10px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.reaction.hoverBg} !important;
border-color: ${themeVars.color.light.border};
position: relative;
top: -1px;
}
.reaction {
font-size: 12px;
@@ -350,7 +473,7 @@ export const comment = css`
.reaction-count {
color: ${themeVars.color.text.light.self};
font-weight: 500;
margin-left: 0;
margin-left: 4px; // 增加左边距
}
}
// 显示表情菜单按钮
@@ -370,6 +493,8 @@ export const commentForm = css`
&::after {
display: none;
}
border-radius: 12px; // 增加圆角
padding: 16px; // 增加内边距
}
`;
@@ -383,6 +508,15 @@ export const dropdown = css`
content: "";
${activeItemAfterStyle}
}
.item {
padding: 8px 12px; // 增加内边距
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
left: 2px;
}
}
}
}
`;
@@ -393,15 +527,16 @@ export const prMerge = css`
// 头像
.timeline-avatar {
color: ${themeVars.color.white} !important;
border-radius: ${otherThemeVars.border.radius};
width: 40px;
height: 40px;
border-radius: 12px; // 增加圆角
width: 48px; // 增加宽度
height: 48px; // 增加高度
display: flex;
align-items: center;
justify-content: center;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
svg {
width: 24px;
height: 24px;
width: 28px; // 增加宽度
height: 28px; // 增加高度
}
// 可以合并
&.green {
@@ -432,14 +567,19 @@ export const prMerge = css`
}
}
}
&:hover {
position: relative;
transform: scale(1.05); // 轻微放大效果
}
}
// 检查状态
.commit-status-panel {
.commit-status-header {
background: ${themeVars.color.body};
padding: 16px;
font-size: 16px;
padding: 20px; // 增加内边距
font-size: 18px; // 增加字体大小
font-weight: 600;
border-radius: 12px 12px 0 0; // 增加圆角
.ui.right {
color: ${themeVars.color.text.light.num1};
font-size: 14px;
@@ -450,18 +590,21 @@ export const prMerge = css`
.commit-status-list {
background: ${themeVars.color.menu};
.commit-status-item {
border-radius: ${otherThemeVars.border.radius};
padding: 2px 8px;
margin: 0px 8px;
height: 37px;
border-radius: 8px; // 增加圆角
padding: 6px 12px; // 增加内边距
margin: 0px 12px; // 增加边距
height: 42px; // 增加高度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:first-child {
margin-top: 8px;
margin-top: 12px; // 增加边距
}
&:last-child {
margin-bottom: 8px;
margin-bottom: 12px; // 增加边距
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
position: relative;
left: 2px;
}
}
}
@@ -469,9 +612,10 @@ export const prMerge = css`
// 合并信息和操作
.merge-section {
color: ${themeVars.color.text.light.num1};
padding: 16px;
padding: 20px; // 增加内边距
display: grid;
gap: 8px;
gap: 12px; // 增加间距
border-radius: 0 0 12px 12px; // 增加圆角
&.no-header {
&::before,
&::after {
@@ -493,17 +637,18 @@ export const timeline = css`
}
.timeline-item,
.timeline-item-group {
padding: 16px 0;
padding: 20px 0; // 增加内边距
// 事件
&.event {
// 修复覆盖后的位置问题
padding-left: 15px;
.avatar {
width: 20px;
height: 20px;
width: 24px; // 增加宽度
height: 24px; // 增加高度
}
.badge {
border: 2px solid ${themeVars.color.body};
border-radius: 50%; // 圆形徽章
}
// 仅匹配只有 badge
.badge:not([class*=" "]) {
@@ -517,7 +662,7 @@ export const timeline = css`
&.commits-list {
// 每个提交之间的间隔
.flex-text-block {
padding-top: 4px;
padding-top: 6px; // 增加内边距
}
.badge svg {
color: ${themeVars.color.text.light.num1};
@@ -538,7 +683,7 @@ export const timeline = css`
`;
const sidebarPadding = {
padding: "4px 8px",
padding: "8px 12px", // 增加内边距
};
// 侧边栏
@@ -551,6 +696,8 @@ export const issueSidebar = css`
border: 0;
font-size: 12px;
padding: 0;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.ui.button {
font-size: 12px;
}
@@ -577,7 +724,7 @@ export const issueSidebar = css`
}
// 允许维护者编辑
> .ui.checkbox {
margin: 4px 8px;
margin: 8px 12px; // 增加边距
strong {
font-weight: 400;
}
@@ -585,11 +732,15 @@ export const issueSidebar = css`
.issue-sidebar-combo {
.ui.dropdown > a.fixed-text.muted {
align-items: center;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
text-decoration-line: none;
height: 28px;
height: 32px; // 增加高度
padding: 0 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
.ui.list {
@@ -600,11 +751,15 @@ export const issueSidebar = css`
// 时间追踪
> div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
align-items: center;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
text-decoration-line: none;
height: 28px;
height: 32px; // 增加高度
padding: 0 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
// 选中日期颜色
@@ -612,16 +767,22 @@ export const issueSidebar = css`
color: ${themeVars.color.text.self};
}
.divider {
margin: 12px 0 12px 8px;
width: calc(100% - 16px);
margin: 16px 0 16px 12px; // 增加边距
width: calc(100% - 24px); // 调整宽度
}
// 订阅按钮
.ui.watching .ui.button {
padding: 0px 8px;
height: 28px;
padding: 0px 12px; // 增加内边距
height: 32px; // 增加高度
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
svg {
margin: 0 !important;
}
&:hover {
position: relative;
top: -1px;
}
}
// PIN 按钮
.form-fetch-action.single-button-form .ui.button,
@@ -634,8 +795,12 @@ export const issueSidebar = css`
// 好像是浏览器 BUG, 最后不生效, 必须 !important
margin: 0 !important;
justify-content: left;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
left: 2px;
}
}
.ui.show-modal.button[data-modal="#sidebar-delete-issue"] {

96
styles/components/navbar.ts
View File

@@ -1,18 +1,23 @@
import { fallbackVar } from "src/functions";
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
import { css, customThemeVars, themeVars } from "src/types/vars";
export const navbarRight = css`
#navbar {
border-bottom: 0;
padding: 0px 16px;
min-height: 64px;
background-color: ${themeVars.color.nav.bg}; // 添加背景色
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.navbar-left {
gap: 8px;
> .item {
padding: 4px 8px;
min-height: 20px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.active {
font-weight: 600;
background-color: ${themeVars.color.active}; // 添加背景色
}
&#navbar-logo {
// 与下方的用户切换头像对齐
@@ -25,6 +30,11 @@ export const navbarRight = css`
width: 32px;
}
}
&:hover:not(#navbar-logo) {
background-color: ${themeVars.color.nav.hoverBg};
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
}
// 进入用户页面后, 避免注册, 登录和首页等意外覆盖
@@ -39,11 +49,12 @@ export const navbarRight = css`
align-content: center;
justify-content: center;
border: 1px solid ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
padding: unset;
height: 32px;
min-width: 32px;
min-height: 32px;
height: 36px; // 增加高度
min-width: 36px; // 增加最小宽度
min-height: 36px; // 增加最小高度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
// 纠正内容保证居中
.tw-relative {
height: 16px;
@@ -54,7 +65,7 @@ export const navbarRight = css`
}
// 带下拉菜单的按钮
&.ui.dropdown {
padding: 0 8px;
padding: 0 12px; // 增加内边距
.text {
display: grid;
grid-auto-flow: column;
@@ -69,8 +80,15 @@ export const navbarRight = css`
}
&:hover {
background-color: ${themeVars.color.nav.hoverBg};
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
&:hover:not(.ui.dropdown) {
background-color: ${themeVars.color.nav.hoverBg};
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
.item.ui.dropdown {
// 头像菜单
@@ -85,8 +103,14 @@ export const navbarRight = css`
// 头像
img {
border-radius: 25px;
height: 32px;
max-height: 32px;
height: 36px; // 增加高度
max-height: 36px; // 增加最大高度
width: 36px; // 增加宽度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
// 移除 transform 以避免创建新的层叠上下文
// transform: scale(1.05); // 轻微放大效果
}
}
}
}
@@ -114,6 +138,11 @@ export const navbarRight = css`
font-weight: 600;
top: -15px;
left: 11px;
min-width: 18px; // 设置最小宽度
height: 18px; // 设置高度
display: flex; // 使用弹性布局
align-items: center; // 垂直居中
justify-content: center; // 水平居中
}
}
}
@@ -121,6 +150,8 @@ export const navbarRight = css`
.navbar-right .user-menu {
width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")};
max-width: 320px;
border-radius: 12px; // 增加圆角
box-shadow: ${themeVars.github.shadow.floating.small}; // 增强阴影
> .header {
font-size: 14px;
font-weight: 400;
@@ -145,6 +176,26 @@ export const navbarRight = css`
display: grid;
}
}
// 移动端优化
@media (max-width: 767.98px) {
#navbar {
padding: 0px 12px; // 调整内边距
min-height: 56px; // 调整最小高度
}
#navbar .navbar-left > .item {
padding: 4px 6px; // 调整内边距
min-height: 16px; // 调整最小高度
}
#navbar .navbar-right:has(.user-menu) > .item:not(:last-child) {
height: 32px; // 调整高度
min-width: 32px; // 调整最小宽度
min-height: 32px; // 调整最小高度
padding: 0 8px; // 调整内边距
}
}
`;
// 二级导航栏
@@ -155,7 +206,14 @@ export const secondaryNav = css`
> .ui.secondary.stackable.menu {
gap: 0px;
min-height: 48px;
padding: 8px 0; // 增加内边距
border-radius: 12px; // 增加圆角
background-color: ${themeVars.color.box.header}; // 添加背景色
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
> .item {
padding: 0 16px; // 增加内边距
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
> .ui.dropdown > .text {
display: inline-flex;
align-items: center;
@@ -164,10 +222,32 @@ export const secondaryNav = css`
margin-right: 4px;
}
}
&:hover {
background-color: ${themeVars.color.hover.self};
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&.active {
background-color: ${themeVars.color.active};
font-weight: 600;
}
}
> .right.menu {
gap: 4px;
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
.page-content > :first-child.secondary-nav > .ui.secondary.stackable.menu {
flex-wrap: wrap; // 允许换行
min-height: auto; // 自适应高度
padding: 8px; // 调整内边距
> .item {
padding: 8px 12px; // 调整内边距
margin: 4px; // 增加边距
}
}
}
`;

58
styles/components/repo.ts
View File

@@ -1,11 +1,21 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
// 仓库头信息
export const repoHeader = css`
.page-content.repository .repo-header {
// 点星/关注/克隆/RSS 按钮
.ui.compact.button {
padding: 3px 12px;
padding: 6px 16px; // 增加内边距
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
}
}
// 仓库名称
.flex-item {
@@ -17,15 +27,19 @@ export const repoHeader = css`
display: flex;
align-items: center;
color: ${themeVars.color.text.self};
font-size: 16px;
font-size: 20px; // 增加字体大小
font-weight: 600; // 增加字体粗细
text-decoration: none !important;
min-width: 3ch;
padding: 4px 6px;
border-radius: ${otherThemeVars.border.radius};
padding: 8px 12px; // 增加内边距
border-radius: 8px; // 增加圆角
margin-top: 0.5rem;
margin-bottom: 0.5rem;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
left: 2px;
}
&.muted:not(.tw-font-normal) {
font-weight: 600;
@@ -45,20 +59,36 @@ export const repoMenu = css`
.page-content.repository {
.repository-summary .repository-menu {
background-color: ${themeVars.color.box.header};
border-radius: 12px; // 增加圆角
padding: 8px; // 增加内边距
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.item {
color: ${themeVars.color.text.light.num1};
height: 31px; // 文件列表下与右侧输入框对齐
height: 36px; // 增加高度
padding: 0 16px; // 增加内边距
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
b {
color: ${themeVars.color.text.self};
margin: 0 2px;
margin: 0 4px; // 增加边距
}
&.active {
background-color: ${themeVars.color.active};
color: ${themeVars.color.text.self};
font-weight: 500;
font-weight: 600; // 增加字体粗细
svg {
color: ${themeVars.color.text.light.num1};
}
&:hover {
position: relative;
top: -1px;
}
}
&:hover:not(.active) {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
}
@@ -74,12 +104,15 @@ export const repoTopic = css`
border-radius: 25px;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
padding: 6px 12px; // 增加内边距
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
position: relative;
top: -1px;
}
}
`;
@@ -88,5 +121,12 @@ export const repoTopic = css`
export const closedIssueTableCell = css`
.stats-table .table-cell.tw-bg-red[href="#closed-issues"] {
background-color: ${themeVars.color.purple.self} !important;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
opacity: 0.9; // 悬停时降低不透明度
position: relative;
top: -1px;
}
}
`;

139
styles/public/animation.ts
View File

@@ -24,4 +24,143 @@ export const keyframe = css`
transform: translateY(0);
}
}
// 添加更多动画效果
// 淡入动画
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// 缩放进入动画
@keyframes scale-in {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
// 缩放退出动画
@keyframes scale-out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.95);
}
}
// 从左侧滑入动画
@keyframes slide-in-from-left {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
// 从右侧滑入动画
@keyframes slide-in-from-right {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
// 从顶部滑入动画
@keyframes slide-in-from-top {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
// 从底部滑入动画
@keyframes slide-in-from-bottom {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
// 脉冲动画
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
// 脉冲点击动画
@keyframes pulse-click {
0% {
transform: scale(1);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
// 弹跳动画
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
// 旋转动画
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// 摆动动画
@keyframes swing {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
}
`;

47
styles/public/button.ts
View File

@@ -5,12 +5,16 @@ export const primaryStyle = {
backgroundColor: themeVars.github.button.primary.bgColor.rest,
borderColor: themeVars.github.button.primary.borderColor.rest,
boxShadow: themeVars.github.shadow.resting.small,
borderRadius: "8px", // 增加圆角
};
export const primaryHoverStyle = {
color: themeVars.github.button.primary.fgColor.rest,
backgroundColor: themeVars.github.button.primary.bgColor.hover,
borderColor: themeVars.github.button.primary.borderColor.hover,
// 移除 transform 以避免创建新的层叠上下文
// transform: "translateY(-1px)", // 添加轻微的上移效果
boxShadow: `0 4px 12px rgba(0, 0, 0, 0.1), ${themeVars.github.shadow.resting.small}`, // 增强阴影
};
// 普通按钮和主色调按钮
@@ -19,9 +23,15 @@ export const baseButton = css`
min-height: 30px;
font-weight: 500;
padding: 9px 16px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.ui {
gap: 8px;
}
// 添加点击效果
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
.ui.button:not(.primary):not(.red) svg {
color: ${themeVars.color.text.light.num1};
@@ -38,6 +48,10 @@ export const baseButton = css`
&:hover {
${primaryHoverStyle}
}
&:active {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(0); // 点击时回到原位
}
}
// 按钮组整体有阴影
&.buttons {
@@ -55,18 +69,36 @@ export const baseButton = css`
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
box-shadow: none;
border-radius: 8px; // 增加圆角
&:hover {
background-color: ${themeVars.color.hover.self};
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
position: relative;
top: -1px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
}
&:active {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* 普通按钮边框色不变 */
.ui.basic.button,
/* 仓库点星等数字标签按钮边框色不变 */
.ui.labeled.button > .label {
border-radius: 8px; // 增加圆角
&:hover {
border-color: ${themeVars.color.light.border};
position: relative;
top: -1px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
}
&:active {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
@@ -78,6 +110,7 @@ export const baseButton = css`
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
background-color: ${themeVars.github.button.default.bgColor.active};
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
`;
@@ -90,12 +123,21 @@ export const redButton = css`
background-color: ${themeVars.github.button.danger.bgColor.rest};
/* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */
border-color: ${themeVars.color.light.border};
border-radius: 8px; // 增加圆角
&:hover {
color: ${themeVars.github.button.danger.fgColor.hover};
background-color: ${themeVars.github.button.danger.bgColor.hover};
border-color: ${themeVars.github.button.danger.borderColor.hover};
box-shadow: ${themeVars.github.shadow.resting.small};
position: relative;
top: -1px;
}
&:active {
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
`;
@@ -107,10 +149,12 @@ export const fixButtonHeight = css`
.ui.ui.ui.ui.small.button {
min-height: 26px;
height: 32px;
border-radius: 6px; // 小按钮使用稍小的圆角
}
// 修复仓库页仓库操作按钮高度对齐和修正
.repo-button-row .ui.button {
min-height: 32px;
border-radius: 8px; // 保持一致的圆角
}
// 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
.repo-header {
@@ -118,11 +162,13 @@ export const fixButtonHeight = css`
.ui.labeled.button > .label {
height: 28px;
min-height: 28px;
border-radius: 6px; // 小按钮使用稍小的圆角
}
}
.ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {
min-height: 20px;
border-radius: 4px; // 微型按钮使用更小的圆角
}
`;
@@ -135,5 +181,6 @@ export const fixButton = css`
.ui.button.code-copy {
padding: 4px 6px;
min-height: 28px;
border-radius: 6px; // 保持一致的圆角
}
`;

50
styles/public/dropdown.ts
View File

@@ -1,6 +1,6 @@
import { animationDown, animationUp } from "src/core/theme";
import { fallbackVar } from "src/functions";
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
import { css, customThemeVars, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";
export const dropdown = css`
@@ -17,9 +17,10 @@ export const dropdown = css`
> .item:not(.tw-hidden) {
display: flex !important;
align-items: center;
padding: 6px 8px !important;
border-radius: ${otherThemeVars.border.radius} !important;
padding: 8px 12px !important; // 增加内边距
border-radius: 8px !important; // 增加圆角
gap: 4px;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:not(.emoji) {
margin: 0 8px;
}
@@ -33,6 +34,10 @@ export const dropdown = css`
}
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
position: relative;
left: 2px;
// 使用 margin-left 代替 transform 来实现右移效果
margin-left: 2px;
}
&.selected {
background-color: ${themeVars.color.active} !important;
@@ -146,16 +151,20 @@ export const selectionDropdown = css`
.ui.selection.dropdown.active:not(.search):not(.ellipsis-text-items) {
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
padding: 8px 16px;
min-height: 32px;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:focus {
background: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
}
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.color.light.border};
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
position: relative;
top: -1px;
}
// 悬停提供伪元素
.item:hover:after {
@@ -176,34 +185,42 @@ export const selectionDropdown = css`
// 不实现伪元素, 因为 .item 设置溢出的元素会被截断
.ui.selection.dropdown.ellipsis-text-items,
.ui.selection.dropdown.activeellipsis-text-items {
border-radius: 8px; // 增加圆角
&:focus {
background: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
}
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.color.light.border};
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
position: relative;
top: -1px;
}
}
// 选择输入框效果和输入框 focus 效果一样
.ui.selection.dropdown.active.search {
background: ${themeVars.color.body};
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
outline: none;
border-radius: 8px; // 增加圆角
}
// 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线
.ui.selection.dropdown.active.search.upward:hover {
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
}
// 由于之前的排除导致样式优先级变高, 小按钮去除圆角
.ui.action.input > .dropdown.small:not(:first-child) {
border-radius: 0;
border-radius: 0 8px 8px 0; // 右侧圆角
}
.ui.action.input > .dropdown.small:first-child {
border-radius: 8px 0 0 8px; // 左侧圆角
}
// 排除一些小按钮, 例如软件包类型, 通常相邻有元素
.ui.selection.dropdown.active:not(.small) {
border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
// 修复因为上面的排除导致的圆角问题
// 具体工单页面下依赖菜单选择框
@@ -215,8 +232,10 @@ export const selectionDropdown = css`
// 修复选择框的下拉菜单向上显示时的样式问题
.ui.upward.selection.dropdown.visible:not(.small),
.ui.active.upward.selection.dropdown:not(.small) {
border-top-left-radius: ${otherThemeVars.border.radius} !important;
border-top-right-radius: ${otherThemeVars.border.radius} !important;
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
// 工单标签菜单中的标签换行和颜色
// 标签页面的标签选择框
@@ -259,13 +278,18 @@ export const emojiDropdown = css`
gap: 4px;
padding: 4px;
min-width: auto;
border-radius: 12px !important; // 增加圆角
> .item.emoji {
font-size: 14px;
min-height: 32px;
height: 32px;
margin: 0px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis} !important;
position: relative;
transform: scale(1.1); // 轻微放大效果
}
}
}

29
styles/public/input.ts
View File

@@ -1,4 +1,4 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
export const input = css`
input,
@@ -20,23 +20,46 @@ export const input = css`
.ui.form input[type="time"],
.ui.form input[type="url"] {
padding: 8px 12px;
border-radius: 8px; // 增加圆角
border: 1px solid ${themeVars.color.light.border}; // 默认边框
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:focus,
&:focus-visible {
background: ${themeVars.color.body} !important;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 保持圆角
border-color: ${themeVars.github.borderColor.accent.emphasis};
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 3px rgba(253, 224, 71, 0.2); // 增强焦点效果
outline: none;
position: relative;
top: -1px;
}
&:hover:not(:focus) {
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加轻微阴影
}
}
.ui.input {
height: 32px;
border-radius: 8px; // 增加圆角
}
// 由于输入框高度, 需要输入框在表单中垂直居中
// 管理员页面仓库搜索表单
.ui.form#repo-search-form {
align-items: center;
}
// 增强表单元素的整体样式
.ui.form {
.field {
margin-bottom: 16px; // 增加字段间距
}
label {
font-weight: 500; // 增加标签字体粗细
margin-bottom: 6px; // 增加标签与输入框间距
display: block;
}
}
`;

110
styles/public/label.ts
View File

@@ -8,6 +8,9 @@ export const label = css`
&.ui.ui.ui {
&.label {
border-radius: 25px;
padding: 5px 12px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
// 多个标签的组合标签的圆角修复
&.scope-parent {
.scope-left {
@@ -27,42 +30,83 @@ export const label = css`
background-color: unset;
border: 1px solid ${themeVars.color.primary.self};
color: ${themeVars.color.primary.self};
&:hover {
background-color: ${themeVars.color.primary.dark.num1}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
/* 红色标签 */
&.red {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.done.emphasis};
color: ${themeVars.color.purple.self};
&:hover {
background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
/* 橙色标签 */
&.orange {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
color: ${themeVars.color.yellow.self};
&:hover {
background-color: ${themeVars.color.yellow.dark.num1}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
/* 黄色标签 */
&.yellow {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
color: ${themeVars.color.orange.self};
&:hover {
background-color: ${themeVars.color.orange.dark.num1}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
/* 黄绿色标签 */
&.olive {
background-color: unset;
border: 1px solid ${themeVars.color.olive.self};
color: ${themeVars.color.olive.self};
&:hover {
background-color: ${themeVars.color.olive.dark.num1}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
/* 绿色标签 */
&.green {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.success.emphasis};
color: ${themeVars.color.green.self};
&:hover {
background-color: ${themeVars.color.green.dark.num1}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
/* 紫色标签 */
&.purple {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.done.emphasis};
color: ${themeVars.color.purple.self};
&:hover {
background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
// 添加悬停效果
&:hover:not(.primary):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.purple) {
background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
}
@@ -84,10 +128,15 @@ export const shaLabel = css`
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 500;
padding: 4px 8px; // 增加内边距
// 仪表盘页的提交 SHA 标签居中对齐
margin-top: 2px;
border-radius: 25px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.label.hoverBg};
position: relative;
top: -1px;
}
// 验证提交 SHA 标签
&.commit-is-signed {
@@ -95,22 +144,28 @@ export const shaLabel = css`
background-color: unset !important;
&:hover {
background-color: ${themeVars.color.label.hoverBg} !important;
position: relative;
top: -1px;
}
span.ui.label.commit-is-signed {
padding: 3px 5px;
margin-left: 5px;
border-radius: 25px; // 增加圆角
}
}
}
// 验证提交附带的图标
span.ui.label.commit-is-signed {
border-radius: 25px; // 增加圆角
// 验证信任
&.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;
background-color: ${themeVars.color.green.badge.bg} !important;
position: relative;
top: -1px;
}
}
// 验证未信任
@@ -118,7 +173,9 @@ export const shaLabel = css`
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;
background-color: ${themeVars.color.yellow.badge.bg} !important;
position: relative;
top: -1px;
}
}
// 验证未匹配
@@ -126,7 +183,9 @@ export const shaLabel = css`
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;
background-color: ${themeVars.color.orange.badge.bg} !important;
position: relative;
top: -1px;
}
}
// 验证警告
@@ -134,7 +193,9 @@ export const shaLabel = css`
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;
background-color: ${themeVars.color.red.badge.bg} !important;
position: relative;
top: -1px;
}
}
}
@@ -147,12 +208,28 @@ export const taskStatusLabel = css`
color: ${themeVars.color.success.text};
border: 1px solid ${themeVars.color.success.border};
background: ${themeVars.color.success.bg};
border-radius: 25px; // 增加圆角
padding: 5px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.success.bg}; // 悬停时改变背景色
position: relative;
top: -1px;
}
}
&failure {
color: ${themeVars.color.error.text};
border: 1px solid ${themeVars.color.error.border};
background: ${themeVars.color.error.bg.self};
border-radius: 25px; // 增加圆角
padding: 5px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.error.bg.self}; // 悬停时改变背景色
position: relative;
top: -1px;
}
}
&running,
@@ -160,6 +237,14 @@ export const taskStatusLabel = css`
color: ${themeVars.color.info.text};
border: 1px solid ${themeVars.color.info.border};
background: ${themeVars.color.info.bg};
border-radius: 25px; // 增加圆角
padding: 5px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.info.bg}; // 悬停时改变背景色
position: relative;
top: -1px;
}
}
&cancelled,
@@ -167,6 +252,14 @@ export const taskStatusLabel = css`
color: ${themeVars.color.warning.text};
border: 1px solid ${themeVars.color.warning.border};
background: ${themeVars.color.warning.bg};
border-radius: 25px; // 增加圆角
padding: 5px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.warning.bg}; // 悬停时改变背景色
position: relative;
top: -1px;
}
}
}
`;
@@ -181,7 +274,14 @@ export const repoLabel = css`
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 500;
padding: 3px 6px;
padding: 4px 8px; // 增加内边距
border-radius: 25px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
position: relative;
top: -1px;
}
}
}
.org-visibility span.ui.basic.label {

67
styles/public/menu.ts
View File

@@ -24,25 +24,30 @@ export const verticalMenu = css`
font-weight: 700;
background: unset;
margin-bottom: 0.5rem;
padding: 8px 12px; // 增加内边距
}
// 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染
a.item:hover {
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
// 菜单项
.item,
.item > summary {
font-size: 1.1rem;
background: unset;
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px;
border-radius: 8px; // 增加圆角
padding: 8px 12px; // 增加内边距
margin: 2px 0; // 增加垂直间距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
}
// Actions 菜单的圆角覆盖
> .item,
> .active.item {
&:first-child,
&:last-child {
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
}
}
// 去除菜单项的边框线
@@ -53,7 +58,8 @@ export const verticalMenu = css`
.active.item,
.active.item > summary {
font-weight: 600;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
background-color: ${themeVars.color.active}; // 添加背景色
}
// 添加伪元素, 用于指示当前激活的菜单项
.active.item:after {
@@ -65,16 +71,19 @@ export const verticalMenu = css`
// 子菜单的标题
summary:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: 8px; // 增加圆角
}
// 子菜单的选项
.menu .item {
color: ${themeVars.color.text.self};
padding: 6px 12px 6px 24px; // 增加左侧内边距
}
// 子菜单的选项被激活
&:has(.active.item) {
> summary {
font-weight: 600;
background: ${themeVars.color.active};
border-radius: 8px; // 增加圆角
// 收回状态,悬停色
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
@@ -88,6 +97,7 @@ export const verticalMenu = css`
.active.item {
background: ${themeVars.color.active};
font-weight: 400;
border-radius: 8px; // 增加圆角
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
@@ -96,6 +106,7 @@ export const verticalMenu = css`
&[open] {
> summary {
background: unset;
border-radius: 8px 8px 0 0; // 顶部圆角
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
@@ -117,15 +128,22 @@ export const menu = css`
.ui.menu a.item,
.ui.secondary.pointing.menu a.item,
.ui.secondary.menu .dropdown.item {
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
// 一些水平小型菜单的颜色更改
.small-menu-items .item {
background-color: ${themeVars.color.body} !important;
border-radius: 8px; // 增加圆角
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
position: relative;
top: -1px;
}
}
// 一些菜单的悬浮色更改
@@ -134,8 +152,12 @@ export const menu = css`
.ui.secondary.pointing.menu {
.item,
.active.item {
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
}
@@ -148,9 +170,13 @@ export const secondaryMenu = css`
padding: 0px 12px;
height: 32px;
font-weight: 500;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
}
a.item:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
top: -1px;
}
}
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
@@ -162,20 +188,27 @@ export const secondaryMenu = css`
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-bottom: 0.5rem !important;
border-radius: 8px; // 增加圆角
}
}
.item {
font-weight: 400; // 二级导航栏不需要加粗
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
}
.active.item,
.dropdown.item,
.link.item,
a.item {
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
color: ${themeVars.color.text.self};
svg {
margin-right: 8px;
}
&:hover {
position: relative;
top: -1px;
}
}
.active.item {
// 取消激活时的下划线, 需要为透明, 保持间距
@@ -184,7 +217,7 @@ export const secondaryMenu = css`
span:after {
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
bottom: calc(50% - 1.8rem);
height: 2px;
position: absolute;
@@ -210,16 +243,19 @@ export const paginationMenu = css`
gap: 4px;
min-height: fit-content;
.item {
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
min-width: 32px;
min-height: 32px;
height: 32px;
justify-content: center;
// 避免一些 hover 效果调整内容
padding: 5px 10px !important;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.active {
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
position: relative;
top: -1px;
}
// 设置透明边框线避免 hover 时元素大小变化
&:not(.active) {
@@ -227,6 +263,8 @@ export const paginationMenu = css`
&:hover {
background: unset;
border-color: ${themeVars.color.secondary.self};
position: relative;
top: -1px;
}
}
&.navigation {
@@ -240,6 +278,10 @@ export const paginationMenu = css`
svg {
margin-top: 2px;
}
&:hover {
position: relative;
top: -1px;
}
}
}
}
@@ -262,15 +304,20 @@ export const smallCompactMenu = css`
gap: 8px;
height: 32px;
min-height: 32px !important;
padding: 4px; // 增加内边距
border-radius: 12px; // 增加圆角
> .item {
background: unset !important;
border: 1px solid ${themeVars.color.hover.self};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
padding: 6px 12px !important;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.active {
background: ${themeVars.color.menu} !important;
border-color: ${themeVars.color.light.border};
font-weight: 600;
position: relative;
top: -1px;
}
&::before {
display: none;
@@ -290,6 +337,8 @@ export const smallCompactMenu = css`
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
position: relative;
top: -1px;
}
}
}

29
styles/public/modal.ts
View File

@@ -5,15 +5,23 @@ export const modal = css`
.ui.modal {
animation: ${animationDown};
border: 1.5px solid ${themeVars.color.light.border};
border-radius: 16px; // 增加圆角
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05); // 增强阴影效果
overflow: hidden; // 隐藏溢出内容
> .header {
background-color: ${themeVars.color.menu};
border-bottom: 1.5px solid ${themeVars.color.light.border};
padding: 20px 24px; // 增加内边距
font-size: 1.25rem; // 增加字体大小
font-weight: 600; // 增加字体粗细
border-radius: 16px 16px 0 0; // 保持顶部圆角
}
> .content,
form > .content {
background-color: ${themeVars.color.menu};
padding: 24px; // 增加内边距
}
> .actions,
@@ -21,9 +29,28 @@ export const modal = css`
.content + form > .actions {
background-color: ${themeVars.color.menu};
border-top: 1.5px solid ${themeVars.color.light.border};
padding: 16px 24px; // 增加内边距
border-radius: 0 0 16px 16px; // 保持底部圆角
}
.actions > .ui.button {
padding: 8px 12px;
padding: 8px 16px; // 增加内边距
border-radius: 8px; // 增加圆角
min-height: 36px; // 增加最小高度
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
position: relative;
top: -1px;
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
}
}
}
// 增强模态框的可访问性
.ui.modal:focus {
outline: 2px solid ${themeVars.github.borderColor.accent.emphasis};
outline-offset: 2px;
}
`;

50
styles/public/other.ts
View File

@@ -5,6 +5,11 @@ export const listHeader = css`
.list-header {
align-items: center;
align-content: center;
padding: 16px; // 增加内边距
border-radius: 12px; // 增加圆角
background-color: ${themeVars.color.box.header}; // 背景色
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
margin-bottom: 16px; // 增加底部间距
}
`;
@@ -14,3 +19,48 @@ export const star = css`
color: ${themeVars.github.button.star.iconColor} !important;
}
`;
// 卡片样式，参考 Nano-Banana-AI-Image-Editor 的设计
export const card = css`
.ui.segment,
.ui.attached.segment,
.ui.card,
.ui.cards > .card {
border-radius: 12px; // 增加圆角
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05); // 添加卡片阴影
border: 1px solid ${themeVars.color.light.border}; // 添加边框
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 悬停时增强阴影
position: relative;
top: -2px;
}
}
// 卡片头部
.ui.segment > .ui.tabular.menu,
.header-wrapper .ui.tabular.menu {
border-radius: 12px 12px 0 0; // 保持顶部圆角
margin: -1px -1px 0 -1px; // 调整边距
}
`;
// 面板样式
export const panel = css`
.ui.attached.header,
.ui.top.attached.header {
border-radius: 12px 12px 0 0; // 保持顶部圆角
padding: 16px; // 增加内边距
font-weight: 600; // 增加字体粗细
border: 1px solid ${themeVars.color.light.border}; // 添加边框
border-bottom: none; // 移除底部边框
}
.ui.bottom.attached.header {
border-radius: 0 0 12px 12px; // 保持底部圆角
padding: 16px; // 增加内边距
border: 1px solid ${themeVars.color.light.border}; // 添加边框
border-top: none; // 移除顶部边框
}
`;

82
styles/public/radius.ts
View File

@@ -63,6 +63,14 @@ export const radius = css`
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) {
border-radius: ${otherThemeVars.border.radius};
}
// 增加特殊组件的圆角
.ui.card,
.ui.cards > .card,
.ui.attached.segment,
.ui.tabular.menu {
border-radius: 12px; // 卡片使用更大的圆角
}
`;
// 全部圆角替换(原CSS带!important)
@@ -86,6 +94,12 @@ export const radiusImportant = css`
border-radius: ${otherThemeVars.border.radius} !important;
}
}
// 卡片圆角
.ui.card,
.ui.cards > .card {
border-radius: 12px !important;
}
`;
// 上半部分圆角替换
@@ -111,6 +125,14 @@ export const radiusTop = css`
.ui.modal > :first-child:not(.icon):not(.dimmer) {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
}
// 卡片顶部圆角
.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child,
.ui.segment > .ui.tabular.menu,
.header-wrapper .ui.tabular.menu {
border-radius: 12px 12px 0 0;
}
`;
// 上半部分圆角替换(原CSS带!important)
@@ -123,6 +145,12 @@ export const radiusTopImportant = css`
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
}
}
// 卡片顶部圆角
.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
border-radius: 12px 12px 0 0 !important;
}
`;
// 下半部分圆角替换
@@ -159,6 +187,12 @@ export const radiusBottom = css`
.ui.segment:has(+ .ui.segment:not(.attached)) {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
}
// 卡片底部圆角
.ui.card > .content:last-child,
.ui.cards > .card > .content:last-child {
border-radius: 0 0 12px 12px;
}
`;
// 下半部分圆角替换(原CSS带!important)
@@ -167,6 +201,12 @@ export const radiusBottomImportant = css`
.ui.active.upward.selection.dropdown {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} !important;
}
// 卡片底部圆角
.ui.card > .content:last-child,
.ui.cards > .card > .content:last-child {
border-radius: 0 0 12px 12px !important;
}
`;
// 左半部分圆角替换
@@ -212,6 +252,12 @@ export const radiusTopLeft = css`
.ui.table > thead > tr:first-child > th:first-child {
border-top-left-radius: ${otherThemeVars.border.radius};
}
// 卡片左上圆角
.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
border-top-left-radius: 12px;
}
`;
// 右上圆角替换
@@ -220,6 +266,12 @@ export const radiusTopRight = css`
.ui.category.search > .results .category:first-child .name + .result {
border-top-right-radius: ${otherThemeVars.border.radius};
}
// 卡片右上圆角
.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
border-top-right-radius: 12px;
}
`;
// 左下圆角替换
@@ -232,6 +284,12 @@ export const radiusBottomLeft = css`
}
}
}
// 卡片左下圆角
.ui.card > .content:last-child,
.ui.cards > .card > .content:last-child {
border-bottom-left-radius: 12px;
}
`;
// 右下圆角替换
@@ -248,6 +306,12 @@ export const radiusBottomRight = css`
.ui.category.search > .results .category:last-child .result:last-child {
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
// 卡片右下圆角
.ui.card > .content:last-child,
.ui.cards > .card > .content:last-child {
border-bottom-right-radius: 12px;
}
`;
// only-child 顺序最后生效
@@ -269,6 +333,12 @@ export const onlyChild = css`
}
}
}
// 独立卡片圆角
.ui.card:not(.attached),
.ui.cards > .card:not(.attached) {
border-radius: 12px;
}
`;
// 修复一些情况下圆角边框线被覆盖的问题
@@ -283,6 +353,12 @@ export const fixRadius = css`
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
// 修复卡片圆角问题
.ui.card,
.ui.cards > .card {
overflow: hidden;
}
`;
// 修复一些根本无法理解的生效顺序
@@ -291,4 +367,10 @@ export const fixWhyRadius = css`
.ui.secondary.menu .item {
border-radius: ${otherThemeVars.border.radius};
}
// 卡片圆角
.ui.card,
.ui.cards > .card {
border-radius: 12px;
}
`;

48
styles/public/text.ts
View File

@@ -8,6 +8,12 @@ export const red = css`
color: ${themeVars.github.fgColor.done} !important;
}
}
// 增强红色文本的视觉效果
.text.red {
color: ${themeVars.color.red.self} !important;
font-weight: 500; // 增加字体粗细
}
`;
export const grey = css`
@@ -16,4 +22,46 @@ export const grey = css`
.text.grey {
color: ${themeVars.color.text.light.num1} !important;
}
// 增强灰色文本的视觉效果
.text.grey {
font-weight: 400; // 设置字体粗细
}
`;
// 增加更多文本颜色样式
export const textColors = css`
.text.blue {
color: ${themeVars.color.blue.self} !important;
font-weight: 500; // 增加字体粗细
}
.text.green {
color: ${themeVars.color.green.self} !important;
font-weight: 500; // 增加字体粗细
}
.text.yellow {
color: ${themeVars.color.yellow.self} !important;
font-weight: 500; // 增加字体粗细
}
.text.purple {
color: ${themeVars.color.purple.self} !important;
font-weight: 500; // 增加字体粗细
}
.text.orange {
color: ${themeVars.color.orange.self} !important;
font-weight: 500; // 增加字体粗细
}
// 链接文本样式
a.text {
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
opacity: 0.8; // 悬停时降低不透明度
text-decoration: underline; // 悬停时添加下划线
}
}
`;

31
styles/public/tippy.ts
View File

@@ -1,28 +1,37 @@
import { animationDown } from "src/core/theme";
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
// 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
export const tippyBox = css`
.tippy-box {
margin-top: -3px;
border-radius: ${otherThemeVars.border.radius};
border-radius: 16px; // 增加圆角
overflow: hidden;
animation: ${animationDown};
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
// 克隆菜单和PR提示框为 default
&[data-theme="default"],
// 带标题的提示框 (Runner信息)
&[data-theme="box-with-header"] {
border: unset;
box-shadow: ${themeVars.github.shadow.floating.small};
&:hover {
position: relative;
top: -4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 6px 8px rgba(0, 0, 0, 0.1); // 增强阴影
}
}
&[data-theme="default"] {
border-radius: 12px;
border-radius: 16px;
}
&[data-theme="box-with-header"] {
.tippy-content {
background-color: ${themeVars.color.menu};
.ui.attached.header {
background-color: ${themeVars.color.body};
padding: 16px 20px; // 增加内边距
font-weight: 600;
border-bottom: 1px solid ${themeVars.color.light.border}; // 添加底部边框
}
}
}
@@ -31,9 +40,15 @@ export const tippyBox = css`
.tippy-content {
padding: 8px;
.item {
border-radius: ${otherThemeVars.border.radius};
border-radius: 10px; // 增加圆角
padding: 8px 16px; // 增加内边距
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
font-weight: 500; // 增加字体粗细
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
position: relative;
left: 4px;
color: ${themeVars.color.primary.self}; // 改变文字颜色
}
}
}
@@ -42,8 +57,12 @@ export const tippyBox = css`
&[data-theme="tooltip"] {
.tippy-content {
font-size: 12px;
font-weight: 400;
padding: 4px 8px;
font-weight: 500; // 增加字体粗细
padding: 8px 16px; // 增加内边距
border-radius: 10px; // 增加圆角
background-color: ${themeVars.color.menu};
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // 增强阴影
color: ${themeVars.color.text.self}; // 确保文字颜色
}
}
}

74
styles/public/transition.ts
View File

@@ -1,6 +1,6 @@
import { css } from "src/types/vars";
// 简单的渐变过渡
// 增强的渐变过渡，参考 Nano-Banana-AI-Image-Editor 的设计
export const transition = css`
// 差异对比的代码折叠按钮
.code-expander-button,
@@ -36,7 +36,7 @@ export const transition = css`
.ui.selection.active.dropdown:hover .menu,
.ui.vertical.menu .header.item,
.ui.secondary.menu .item {
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
// Gitea 表单元素原始过渡覆盖
input,
@@ -56,6 +56,74 @@ export const transition = css`
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"] {
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
// 添加按钮点击脉冲动画
@keyframes pulse-click {
0% {
transform: scale(1);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
.pulse-click {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
// 添加滑入动画
@keyframes slide-in-from-top-full {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-from-right {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-out-to-right {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
.animate-in {
animation-duration: 300ms;
animation-fill-mode: both;
}
.slide-in-from-top-full {
animation-name: slide-in-from-top-full;
}
.slide-in-from-right {
animation-name: slide-in-from-right;
}
.slide-out-to-right {
animation-name: slide-out-to-right;
}
`;

89
themes/modern-dark.css.ts Normal file
View File

@@ -0,0 +1,89 @@
/**
* @author iFlow CLI
* 现代化暗色主题，基于 Nano-Banana-AI-Image-Editor 的设计风格
*/
import { defineTheme } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
export const modernDarkGithubColors: GithubColor = {
isDarkTheme: true,
display: {
blue: { fgColor: "#4493f8" },
brown: { fgColor: "#b69a6d" },
cyan: { fgColor: "#07ace4" },
indigo: { fgColor: "#9899ec" },
lemon: { fgColor: "#fde047" }, // 使用香蕉黄作为柠檬色
olive: { fgColor: "#a2a626" },
teal: { fgColor: "#1cb0ab" },
},
diffBlob: {
addtionNum: { bgColor: "#3fb9504d" },
addtionWord: { bgColor: "#2ea04366" },
deletionNum: { bgColor: "#f851494d" },
deletionWord: { bgColor: "#f8514966" },
hunkNum: { bgColor: { rest: "#0c2d6b" } },
},
fgColor: {
accent: "#fde047", // 使用香蕉黄作为主色调
attention: "#d29922",
danger: "#f85149",
default: "#f0f6fc",
disabled: "#656c76",
done: "#ab7df8",
muted: "#9198a1",
neutral: "#9198a1",
severe: "#db6d28",
sponsors: "#db61a2",
success: "#3fb950",
black: "#010409",
white: "#ffffff",
onEmphasis: "#ffffff",
},
bgColor: {
accent: { emphasis: "#fde047", muted: "#fde0471a" }, // 使用香蕉黄作为强调色
attention: { muted: "#bb800926" },
danger: { muted: "#f851491a" },
default: "#0d1117",
done: { emphasis: "#8957e5" },
emphasis: "#3d444d",
muted: "#151b23",
neutral: { muted: "#656c7633" },
success: { emphasis: "#238636", muted: "#2ea04326" },
inset: "#010409",
},
borderColor: {
accent: { emphasis: "#fde047" }, // 使用香蕉黄作为边框强调色
attention: { emphasis: "#9e6a03" },
default: "#3d444d",
done: { emphasis: "#8957e5" },
success: { emphasis: "#238636" },
muted: "#3d444db3",
translucent: "#ffffff26",
},
button: {
primary: {
fgColor: { accent: "#0d1117", rest: "#0d1117" }, // 深色文字在黄色背景上
bgColor: { rest: "#fde047", hover: "#eab308" }, // 香蕉黄按钮
},
danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
star: { iconColor: "#fde047" }, // 使用香蕉黄作为星标颜色
},
control: {
bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
overlay: { backdrop: { bgColor: "#21283066" } },
underlineNav: { borderColor: { active: "#fde047" } }, // 使用香蕉黄作为导航下划线
contribution: {
default: {
bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364" },
borderColor: { num0: "#0104090d" },
},
},
};
export const modernDarkColors = github2ThemeColor(modernDarkGithubColors);
export default defineTheme(modernDarkColors);

90
themes/modern-light.css.ts Normal file
View File

@@ -0,0 +1,90 @@
/**
* @author iFlow CLI
* 现代化亮色主题，基于 Nano-Banana-AI-Image-Editor 的设计风格
*/
import { defineTheme } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
export const modernLightGithubColors: GithubColor = {
isDarkTheme: false,
display: {
blue: { fgColor: "#0969da" },
brown: { fgColor: "#755f43" },
cyan: { fgColor: "#006a80" },
indigo: { fgColor: "#494edf" },
lemon: { fgColor: "#f3cb00ff" }, // 使用香蕉黄作为柠檬色
olive: { fgColor: "#56682c" },
teal: { fgColor: "#106e75" },
},
diffBlob: {
addtionNum: { bgColor: "#aceebb" },
addtionWord: { bgColor: "#aceebb" },
deletionNum: { bgColor: "#ffcecb" },
deletionWord: { bgColor: "#ffcecb" },
hunkNum: { bgColor: { rest: "#b6e3ff" } },
},
fgColor: {
accent: "#f3cb00ff", // 使用香蕉黄作为主色调
attention: "#9a6700",
danger: "#d1242f",
default: "#1f2328",
disabled: "#818b98",
done: "#8250df",
muted: "#59636e",
neutral: "#59636e",
severe: "#bc4c00",
sponsors: "#bf3989",
success: "#1a7f37",
black: "#1f2328",
white: "#ffffff",
onEmphasis: "#ffffff",
},
bgColor: {
accent: { emphasis: "#f3cb00ff", muted: "#fffbeb" }, // 使用香蕉黄作为强调色
attention: { muted: "#fff8c5" },
danger: { muted: "#ffebe9" },
default: "#ffffff",
done: { emphasis: "#8250df" },
emphasis: "#25292e",
muted: "#f6f8fa",
neutral: { muted: "#818b981f" },
success: { emphasis: "#1f883d", muted: "#dafbe1" },
inset: "#f6f8fa",
},
borderColor: {
accent: { emphasis: "#f3cb00ff" }, // 使用香蕉黄作为边框强调色
attention: { emphasis: "#9a6700" },
default: "#d1d9e0",
done: { emphasis: "#8250df" },
success: { emphasis: "#1a7f37" },
muted: "#d1d9e0b3",
translucent: "#1f232826",
},
button: {
primary: {
fgColor: { accent: "#1f2328", rest: "#1f2328" }, // 深色文字在黄色背景上
bgColor: { rest: "#f3cb00ff", hover: "#eab308" }, // 香蕉黄按钮
},
danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
star: { iconColor: "#f3cb00ff" }, // 使用香蕉黄作为星标颜色
},
control: {
bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
},
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
overlay: { backdrop: { bgColor: "#c8d1da66" } },
underlineNav: { borderColor: { active: "#f3cb00ff" }, // 使用香蕉黄作为导航下划线
},
contribution: {
default: {
bgColor: { num0: "#eff2f5", num1: "#aceebb", num2: "#4ac26b", num3: "#2da44e", num4: "#116329" },
borderColor: { num0: "#1f23280d" },
},
},
};
export const modernLightColors = github2ThemeColor(modernLightGithubColors);
export default defineTheme(modernLightColors);