mirrors/gitea-github-theme
1
0
Fork 0
mirror of https://github.com/lutinglt/gitea-github-theme.git synced 2025-12-21 22:23:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize top navbar style on mobile

Browse Source
This commit is contained in:
lutinglt
2025-11-13 20:32:45 +08:00
parent f33a0ae81c
commit fd12236144
2 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -6,6 +6,7 @@
- Optimize the workflow log page style. - Optimize the workflow log page style.
- Optimize repository header name style. - Optimize repository header name style.
- Optimize organization detail page style. - Optimize organization detail page style.
- Optimize top navbar style on mobile.
### 🐞 Fix ### 🐞 Fix

43
styles/components/navbar.ts
View File

@@ -4,8 +4,12 @@ import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"
export const navbarRight = css` export const navbarRight = css`
#navbar { #navbar {
border-bottom: 0; border-bottom: 0;
padding: 0px 16px; padding: 8px 16px; // 上下内边距 + .navbar-left & .navbar-right 的 min-height = 64px
min-height: 64px; min-height: 64px;
.navbar-left,
.navbar-right {
min-height: 48px;
}
.navbar-left { .navbar-left {
gap: 8px; gap: 8px;
> .item { > .item {
@@ -32,15 +36,12 @@ export const navbarRight = css`
gap: 8px; gap: 8px;
// 右侧按钮, 但不包括头像 // 右侧按钮, 但不包括头像
> .item:not(:last-child) { > .item:not(:last-child) {
display: grid;
gap: 4px;
grid-auto-columns: max-content;
align-items: center; align-items: center;
align-content: center;
justify-content: center; justify-content: center;
gap: 4px;
border: 1px solid ${themeVars.color.light.border}; border: 1px solid ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius}; border-radius: ${otherThemeVars.border.radius};
padding: unset; padding: 0;
height: 32px; height: 32px;
min-width: 32px; min-width: 32px;
min-height: 32px; min-height: 32px;
@@ -127,13 +128,33 @@ export const navbarRight = css`
} }
} }
} }
// 手机下的创建菜单按钮 // 手机下的导航栏
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
#navbar .navbar-right:has(.user-menu) > .item:not(:last-child) { #navbar {
display: none; &.navbar-menu-open {
gap: 8px;
}
.navbar-mobile-right {
gap: 8px;
> .item {
align-items: center;
justify-content: center;
border: 1px solid ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
padding: 0;
height: 32px;
min-width: 32px;
min-height: 32px;
// 纠正内容保证居中
.tw-relative {
height: 16px;
width: 16px;
}
.svg {
margin: 0;
}
}
} }
#navbar.navbar-menu-open .navbar-right:has(.user-menu) > .item:not(:last-child) {
display: grid;
} }
} }
`; `;