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

93
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,10 @@ export const navbarRight = css`
width: 32px;
}
}
&:hover:not(#navbar-logo) {
background-color: ${themeVars.color.nav.hoverBg};
transform: translateY(-1px); // 轻微上移效果
}
}
}
// 进入用户页面后, 避免注册, 登录和首页等意外覆盖
@@ -39,11 +48,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 +64,7 @@ export const navbarRight = css`
}
// 带下拉菜单的按钮
&.ui.dropdown {
padding: 0 8px;
padding: 0 12px; // 增加内边距
.text {
display: grid;
grid-auto-flow: column;
@@ -69,8 +79,13 @@ export const navbarRight = css`
}
&:hover {
background-color: ${themeVars.color.nav.hoverBg};
transform: translateY(-1px); // 轻微上移效果
}
}
&:hover:not(.ui.dropdown) {
background-color: ${themeVars.color.nav.hoverBg};
transform: translateY(-1px); // 轻微上移效果
}
}
.item.ui.dropdown {
// 头像菜单
@@ -85,8 +100,13 @@ 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: scale(1.05); // 轻微放大效果
}
}
}
}
@@ -114,6 +134,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 +146,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 +172,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 +202,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 +218,31 @@ export const secondaryNav = css`
margin-right: 4px;
}
}
&:hover {
background-color: ${themeVars.color.hover.self};
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; // 增加边距
}
}
}
`;