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

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;
}
}
}