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

banana v3

Browse Source
This commit is contained in:
User
2025-09-25 14:02:34 +08:00
parent 12915214b6
commit 1f321e6bdd
19 changed files with 233 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
styles/components/clone.ts
View File

@@ -33,7 +33,8 @@ export const clone = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
&.active:after {
content: "";
@@ -89,6 +90,7 @@ export const clone = css`
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 {
@@ -121,7 +123,8 @@ export const clone = css`
color: ${themeVars.color.text.self};
text-decoration: none;
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
}
}
> .item:hover {

15
styles/components/commit.ts
View File

@@ -34,7 +34,8 @@ export const commit = css`
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -48,7 +49,8 @@ export const commit = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -66,7 +68,8 @@ export const commit = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -75,7 +78,8 @@ export const commit = css`
// 整行悬停色
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
}
// 偶数行悬停色
&:nth-child(2n):hover {
@@ -126,7 +130,8 @@ export const commitStatus = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}

18
styles/components/dashboard.ts
View File

@@ -20,7 +20,8 @@ export const dashboard = css`
background: ${themeVars.color.menu};
box-shadow: ${themeVars.github.shadow.floating.small};
font-weight: 600;
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&::before {
display: none;
@@ -31,7 +32,8 @@ export const dashboard = css`
width: calc(50% - 8px); // 调整宽度
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -73,7 +75,8 @@ export const dashboard = css`
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
}
a.muted:hover {
color: inherit;
@@ -119,7 +122,8 @@ export const dashboardIssues = css`
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
&.active {
color: ${themeVars.color.text.self};
@@ -138,7 +142,8 @@ export const dashboardIssues = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -183,7 +188,8 @@ export const fixOrgLabel = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
`;

3
styles/components/diff.ts
View File

@@ -40,7 +40,8 @@ export const diff = css`
&:hover {
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果

21
styles/components/filelist.ts
View File

@@ -16,7 +16,8 @@ export const branchButton = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
}
@@ -38,7 +39,8 @@ export const syncFork = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
}
@@ -250,7 +252,8 @@ export const repoFileView = css`
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -281,7 +284,8 @@ export const repoFileView = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 打开文件树按钮
@@ -342,7 +346,8 @@ export const repoFileView = css`
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -370,7 +375,8 @@ export const repoFileView = css`
&:hover {
background: ${themeVars.color.hover.self};
color: ${themeVars.color.text.light.num1};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -507,7 +513,8 @@ export const repoSidebarBottom = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
.flex-item {
padding: 16px 0 0 0;

9
styles/components/footer.ts
View File

@@ -22,7 +22,8 @@ export const footer = css`
&:hover {
color: ${themeVars.color.primary.self};
background-color: ${themeVars.color.hover.self};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
> strong {
@@ -39,7 +40,8 @@ export const footer = css`
&:hover {
color: ${themeVars.color.primary.self};
background-color: ${themeVars.color.hover.self};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
> a {
@@ -52,7 +54,8 @@ export const footer = css`
&:hover {
color: ${themeVars.color.primary.self};
background-color: ${themeVars.color.hover.self};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}

22
styles/components/heatmap.ts
View File

@@ -38,7 +38,7 @@ export const heatmap = css`
// 悬停效果
&:hover {
outline: 2px solid ${themeVars.color.primary.self}; // 添加主色调边框
z-index: 10; // 确保悬停时在最上层
position: relative; // 使用相对定位而不是 z-index
}
&[style="fill: var(--color-secondary-alpha-60);"] {
@@ -46,28 +46,28 @@ export const heatmap = css`
}
&[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};
}
}
}

68
styles/components/issue.ts
View File

@@ -41,7 +41,8 @@ export const issueList = css`
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
&.active {
color: ${themeVars.color.text.self};
@@ -63,7 +64,8 @@ export const issueList = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -91,7 +93,8 @@ export const issueList = css`
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateX(2px); // 轻微右移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateX(2px); // 轻微右移效果
}
> .flex-item-icon {
display: flex;
@@ -134,7 +137,8 @@ export const issueList = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
.milestone-header {
h3 {
@@ -195,7 +199,8 @@ export const issuePins = css`
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-2px); // 轻微上移效果
position: relative;
top: -2px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 增强阴影
}
.content {
@@ -233,7 +238,8 @@ export const button = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.self};
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
@@ -248,7 +254,8 @@ export const button = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
@@ -263,7 +270,8 @@ export const button = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
@@ -304,7 +312,8 @@ export const babel = css`
border-color: ${themeVars.github.bgColor.success.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
@@ -314,7 +323,8 @@ export const babel = css`
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
@@ -324,7 +334,8 @@ export const babel = css`
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -345,7 +356,8 @@ export const prBranch = css`
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
@@ -394,7 +406,8 @@ export const comment = css`
border-radius: 25px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 隐藏顶部菜单的表情按钮
@@ -414,9 +427,9 @@ export const comment = css`
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};
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
}
}
}
@@ -436,7 +449,8 @@ export const comment = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.hover.self};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 底部表情栏
@@ -450,7 +464,8 @@ export const comment = css`
&:hover {
background-color: ${themeVars.color.reaction.hoverBg} !important;
border-color: ${themeVars.color.light.border};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
.reaction {
font-size: 12px;
@@ -498,7 +513,8 @@ export const dropdown = css`
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
}
}
}
@@ -552,6 +568,7 @@ export const prMerge = css`
}
}
&:hover {
position: relative;
transform: scale(1.05); // 轻微放大效果
}
}
@@ -586,7 +603,8 @@ export const prMerge = css`
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
}
}
}
@@ -721,7 +739,8 @@ export const issueSidebar = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
.ui.list {
@@ -739,7 +758,8 @@ export const issueSidebar = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 选中日期颜色
@@ -760,7 +780,8 @@ export const issueSidebar = css`
margin: 0 !important;
}
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// PIN 按钮
@@ -778,7 +799,8 @@ export const issueSidebar = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
}
}
.ui.show-modal.button[data-modal="#sidebar-delete-issue"] {

15
styles/components/navbar.ts
View File

@@ -32,7 +32,8 @@ export const navbarRight = css`
}
&:hover:not(#navbar-logo) {
background-color: ${themeVars.color.nav.hoverBg};
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
}
@@ -79,12 +80,14 @@ export const navbarRight = css`
}
&:hover {
background-color: ${themeVars.color.nav.hoverBg};
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
&:hover:not(.ui.dropdown) {
background-color: ${themeVars.color.nav.hoverBg};
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
}
.item.ui.dropdown {
@@ -105,7 +108,8 @@ export const navbarRight = css`
width: 36px; // 增加宽度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: scale(1.05); // 轻微放大效果
// 移除 transform 以避免创建新的层叠上下文
// transform: scale(1.05); // 轻微放大效果
}
}
}
@@ -220,7 +224,8 @@ export const secondaryNav = css`
}
&:hover {
background-color: ${themeVars.color.hover.self};
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&.active {
background-color: ${themeVars.color.active};

18
styles/components/repo.ts
View File

@@ -10,7 +10,8 @@ export const repoHeader = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
@@ -37,7 +38,8 @@ export const repoHeader = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
}
&.muted:not(.tw-font-normal) {
font-weight: 600;
@@ -79,12 +81,14 @@ export const repoMenu = css`
color: ${themeVars.color.text.light.num1};
}
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
&:hover:not(.active) {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -107,7 +111,8 @@ export const repoTopic = css`
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
`;
@@ -120,7 +125,8 @@ export const closedIssueTableCell = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
opacity: 0.9; // 悬停时降低不透明度
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
`;

24
styles/public/button.ts
View File

@@ -12,7 +12,8 @@ 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: "translateY(-1px)", // 添加轻微的上移效果
// 移除 transform 以避免创建新的层叠上下文
// transform: "translateY(-1px)", // 添加轻微的上移效果
boxShadow: `0 4px 12px rgba(0, 0, 0, 0.1), ${themeVars.github.shadow.resting.small}`, // 增强阴影
};
@@ -48,7 +49,8 @@ export const baseButton = css`
${primaryHoverStyle}
}
&:active {
transform: translateY(0); // 点击时回到原位
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(0); // 点击时回到原位
}
}
// 按钮组整体有阴影
@@ -72,11 +74,13 @@ export const baseButton = css`
background-color: ${themeVars.color.hover.self};
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
transform: translateY(-1px); // 添加轻微的上移效果
position: relative;
top: -1px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
}
&:active {
transform: translateY(0); // 点击时回到原位
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
@@ -87,11 +91,13 @@ export const baseButton = css`
border-radius: 8px; // 增加圆角
&:hover {
border-color: ${themeVars.color.light.border};
transform: translateY(-1px); // 添加轻微的上移效果
position: relative;
top: -1px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
}
&:active {
transform: translateY(0); // 点击时回到原位
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
@@ -124,11 +130,13 @@ export const redButton = css`
background-color: ${themeVars.github.button.danger.bgColor.hover};
border-color: ${themeVars.github.button.danger.borderColor.hover};
box-shadow: ${themeVars.github.shadow.resting.small};
transform: translateY(-1px); // 添加轻微的上移效果
position: relative;
top: -1px;
}
&:active {
transform: translateY(0); // 点击时回到原位
// 移除 transform 以避免创建新的层叠上下文
// transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}

12
styles/public/dropdown.ts
View File

@@ -34,7 +34,10 @@ export const dropdown = css`
}
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateX(2px); // 轻微右移效果
position: relative;
left: 2px;
// 使用 margin-left 代替 transform 来实现右移效果
margin-left: 2px;
}
&.selected {
background-color: ${themeVars.color.active} !important;
@@ -160,7 +163,8 @@ export const selectionDropdown = css`
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
// 悬停提供伪元素
.item:hover:after {
@@ -190,7 +194,8 @@ export const selectionDropdown = css`
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 选择输入框效果和输入框 focus 效果一样
@@ -283,6 +288,7 @@ export const emojiDropdown = css`
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); // 轻微放大效果
}
}

3
styles/public/input.ts
View File

@@ -31,7 +31,8 @@ export const input = css`
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 3px rgba(253, 224, 71, 0.2); // 增强焦点效果
outline: none;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
&:hover:not(:focus) {
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色

57
styles/public/label.ts
View File

@@ -32,7 +32,8 @@ export const label = css`
color: ${themeVars.color.primary.self};
&:hover {
background-color: ${themeVars.color.primary.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
/* 红色标签 */
@@ -42,7 +43,8 @@ export const label = css`
color: ${themeVars.color.purple.self};
&:hover {
background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
/* 橙色标签 */
@@ -52,7 +54,8 @@ export const label = css`
color: ${themeVars.color.yellow.self};
&:hover {
background-color: ${themeVars.color.yellow.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
/* 黄色标签 */
@@ -62,7 +65,8 @@ export const label = css`
color: ${themeVars.color.orange.self};
&:hover {
background-color: ${themeVars.color.orange.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
/* 黄绿色标签 */
@@ -72,7 +76,8 @@ export const label = css`
color: ${themeVars.color.olive.self};
&:hover {
background-color: ${themeVars.color.olive.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
/* 绿色标签 */
@@ -82,7 +87,8 @@ export const label = css`
color: ${themeVars.color.green.self};
&:hover {
background-color: ${themeVars.color.green.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
/* 紫色标签 */
@@ -92,13 +98,15 @@ export const label = css`
color: ${themeVars.color.purple.self};
&:hover {
background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
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}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -127,7 +135,8 @@ export const shaLabel = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.label.hoverBg};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
// 验证提交 SHA 标签
&.commit-is-signed {
@@ -135,7 +144,8 @@ export const shaLabel = css`
background-color: unset !important;
&:hover {
background-color: ${themeVars.color.label.hoverBg} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
span.ui.label.commit-is-signed {
padding: 3px 5px;
@@ -154,7 +164,8 @@ export const shaLabel = css`
color: ${themeVars.color.green.badge.self} !important;
&:hover {
background-color: ${themeVars.color.green.badge.bg} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 验证未信任
@@ -163,7 +174,8 @@ export const shaLabel = css`
color: ${themeVars.color.yellow.badge.self} !important;
&:hover {
background-color: ${themeVars.color.yellow.badge.bg} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 验证未匹配
@@ -172,7 +184,8 @@ export const shaLabel = css`
color: ${themeVars.color.orange.badge.self} !important;
&:hover {
background-color: ${themeVars.color.orange.badge.bg} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 验证警告
@@ -181,7 +194,8 @@ export const shaLabel = css`
color: ${themeVars.color.red.badge.self} !important;
&:hover {
background-color: ${themeVars.color.red.badge.bg} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -199,7 +213,8 @@ export const taskStatusLabel = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.success.bg}; // 悬停时改变背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
@@ -212,7 +227,8 @@ export const taskStatusLabel = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.error.bg.self}; // 悬停时改变背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
@@ -226,7 +242,8 @@ export const taskStatusLabel = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.info.bg}; // 悬停时改变背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
@@ -240,7 +257,8 @@ export const taskStatusLabel = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.warning.bg}; // 悬停时改变背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -261,7 +279,8 @@ export const repoLabel = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}

42
styles/public/menu.ts
View File

@@ -27,10 +27,10 @@ export const verticalMenu = css`
padding: 8px 12px; // 增加内边距
}
// 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染
a.item:hover {
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: 8px; // 增加圆角
transform: translateX(2px); // 轻微右移效果
position: relative;
top: -1px;
}
// 菜单项
.item,
@@ -132,7 +132,8 @@ export const menu = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 一些水平小型菜单的颜色更改
@@ -141,7 +142,8 @@ export const menu = css`
border-radius: 8px; // 增加圆角
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 一些菜单的悬浮色更改
@@ -154,7 +156,8 @@ export const menu = css`
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -172,7 +175,8 @@ export const secondaryMenu = css`
}
a.item:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
@@ -202,7 +206,8 @@ export const secondaryMenu = css`
margin-right: 8px;
}
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
.active.item {
@@ -247,17 +252,19 @@ export const paginationMenu = css`
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};
transform: translateY(-1px); // 轻微上移效果
}
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
position: relative;
top: -1px;
}
// 设置透明边框线避免 hover 时元素大小变化
&:not(.active) {
border: 1px solid #ffffff00;
&:hover {
background: unset;
border-color: ${themeVars.color.secondary.self};
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
&.navigation {
@@ -272,7 +279,8 @@ export const paginationMenu = css`
margin-top: 2px;
}
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}
@@ -308,7 +316,8 @@ export const smallCompactMenu = css`
background: ${themeVars.color.menu} !important;
border-color: ${themeVars.color.light.border};
font-weight: 600;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
&::before {
display: none;
@@ -328,7 +337,8 @@ export const smallCompactMenu = css`
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
}
}

3
styles/public/modal.ts
View File

@@ -39,7 +39,8 @@ export const modal = css`
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
position: relative;
top: -1px;
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果

3
styles/public/other.ts
View File

@@ -33,7 +33,8 @@ export const card = css`
&:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 悬停时增强阴影
transform: translateY(-2px); // 轻微上移效果
position: relative;
top: -2px;
}
}

6
styles/public/tippy.ts
View File

@@ -16,7 +16,8 @@ export const tippyBox = css`
border: unset;
box-shadow: ${themeVars.github.shadow.floating.small};
&:hover {
transform: translateY(-4px); // 增强上移效果
position: relative;
top: -4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 6px 8px rgba(0, 0, 0, 0.1); // 增强阴影
}
}
@@ -45,7 +46,8 @@ export const tippyBox = css`
font-weight: 500; // 增加字体粗细
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateX(4px); // 增强右移效果
position: relative;
left: 4px;
color: ${themeVars.color.primary.self}; // 改变文字颜色
}
}

14
themes/modern-light.css.ts
View File

@@ -13,7 +13,7 @@ export const modernLightGithubColors: GithubColor = {
brown: { fgColor: "#755f43" },
cyan: { fgColor: "#006a80" },
indigo: { fgColor: "#494edf" },
lemon: { fgColor: "#fde047" }, // 使用香蕉黄作为柠檬色
lemon: { fgColor: "#f3cb00ff" }, // 使用香蕉黄作为柠檬色
olive: { fgColor: "#56682c" },
teal: { fgColor: "#106e75" },
},
@@ -25,7 +25,7 @@ export const modernLightGithubColors: GithubColor = {
hunkNum: { bgColor: { rest: "#b6e3ff" } },
},
fgColor: {
accent: "#fde047", // 使用香蕉黄作为主色调
accent: "#f3cb00ff", // 使用香蕉黄作为主色调
attention: "#9a6700",
danger: "#d1242f",
default: "#1f2328",
@@ -41,7 +41,7 @@ export const modernLightGithubColors: GithubColor = {
onEmphasis: "#ffffff",
},
bgColor: {
accent: { emphasis: "#fde047", muted: "#fffbeb" }, // 使用香蕉黄作为强调色
accent: { emphasis: "#f3cb00ff", muted: "#fffbeb" }, // 使用香蕉黄作为强调色
attention: { muted: "#fff8c5" },
danger: { muted: "#ffebe9" },
default: "#ffffff",
@@ -53,7 +53,7 @@ export const modernLightGithubColors: GithubColor = {
inset: "#f6f8fa",
},
borderColor: {
accent: { emphasis: "#fde047" }, // 使用香蕉黄作为边框强调色
accent: { emphasis: "#f3cb00ff" }, // 使用香蕉黄作为边框强调色
attention: { emphasis: "#9a6700" },
default: "#d1d9e0",
done: { emphasis: "#8250df" },
@@ -64,10 +64,10 @@ export const modernLightGithubColors: GithubColor = {
button: {
primary: {
fgColor: { accent: "#1f2328", rest: "#1f2328" }, // 深色文字在黄色背景上
bgColor: { rest: "#fde047", hover: "#eab308" }, // 香蕉黄按钮
bgColor: { rest: "#f3cb00ff", hover: "#eab308" }, // 香蕉黄按钮
},
danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
star: { iconColor: "#fde047" }, // 使用香蕉黄作为星标颜色
star: { iconColor: "#f3cb00ff" }, // 使用香蕉黄作为星标颜色
},
control: {
bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
@@ -75,7 +75,7 @@ export const modernLightGithubColors: GithubColor = {
},
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
overlay: { backdrop: { bgColor: "#c8d1da66" } },
underlineNav: { borderColor: { active: "#fde047" }, // 使用香蕉黄作为导航下划线
underlineNav: { borderColor: { active: "#f3cb00ff" }, // 使用香蕉黄作为导航下划线
},
contribution: {
default: {