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

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}; // 改变文字颜色
}
}