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

banana v1

Browse Source
This commit is contained in:
User
2025-09-25 10:29:31 +08:00
parent d4f873a8c1
commit a35a81009c
28 changed files with 1657 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
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 {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: 8px; // 增加圆角
transform: translateX(2px); // 轻微右移效果
}
// 菜单项
.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,20 @@ 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};
transform: translateY(-1px); // 轻微上移效果
}
}
// 一些水平小型菜单的颜色更改
.small-menu-items .item {
background-color: ${themeVars.color.body} !important;
border-radius: 8px; // 增加圆角
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
}
}
// 一些菜单的悬浮色更改
@@ -134,8 +150,11 @@ 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};
transform: translateY(-1px); // 轻微上移效果
}
}
}
@@ -148,9 +167,12 @@ 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};
transform: translateY(-1px); // 轻微上移效果
}
}
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
@@ -162,20 +184,26 @@ 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 {
transform: translateY(-1px); // 轻微上移效果
}
}
.active.item {
// 取消激活时的下划线, 需要为透明, 保持间距
@@ -184,7 +212,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 +238,18 @@ 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};
transform: translateY(-1px); // 轻微上移效果
}
// 设置透明边框线避免 hover 时元素大小变化
&:not(.active) {
@@ -227,6 +257,7 @@ export const paginationMenu = css`
&:hover {
background: unset;
border-color: ${themeVars.color.secondary.self};
transform: translateY(-1px); // 轻微上移效果
}
}
&.navigation {
@@ -240,6 +271,9 @@ export const paginationMenu = css`
svg {
margin-top: 2px;
}
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
}
}
@@ -262,15 +296,19 @@ 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;
transform: translateY(-1px); // 轻微上移效果
}
&::before {
display: none;
@@ -290,9 +328,10 @@ export const smallCompactMenu = css`
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
}
}
}
}
}
`;
`;