Gitea-John71/Gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-10-05 04:53:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance(ui): cleanup navbar template and styling (#39554)

Browse Source 
Clean up the navbar template and styling, and fix the navbar stopwatch,
which navigated to the issue instead of opening its popup since
https://github.com/go-gitea/gitea/pull/36965.

1. Add hover background to the create and user menus
2. Simplify navbar HTML and CSS and remove Fomantic styles
3. Render the notification and stopwatch icons once instead of separate
mobile and desktop copies
4. Make the stopwatch a keyboard accessible button whose popup updates
on push and closes when the stopwatch stops

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: bircni <bircni@icloud.com>
This commit is contained in:
silverwind
2026-10-03 18:35:54 +02:00
committed by GitHub
parent f65e01226a
commit 516a4883fa
9 changed files with 165 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/css/modules/navbar.css
+41 -62
View File
@@ -1,28 +1,22 @@
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--color-nav-bg);
border-bottom: 1px solid var(--color-secondary);
padding: 0 10px;
}
#navbar .navbar-left,
#navbar .navbar-right {
#navbar,
.navbar-list {
display: flex;
align-items: center;
gap: 5px;
min-height: 49px; /* +1px border-bottom */
}
.navbar-left > .item,
.navbar-right > .item,
.navbar-mobile-right > .item {
#navbar > .item,
#navbar > .navbar-list > .item {
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--color-nav-text);
position: relative;
text-decoration: none;
min-height: 36px;
min-width: 36px;
@@ -30,81 +24,67 @@
border-radius: 4px;
}
#navbar .item.active {
#navbar-logo {
margin: 6.5px 0; /* center the 36px items in the 49px row */
}
#navbar > .item.active,
#navbar > .navbar-list > .item.active {
background: var(--color-active);
}
#navbar :is(a, button).item:not(.dropdown *):hover {
#navbar > .item:hover,
#navbar > .navbar-list > .item:hover {
background: var(--color-nav-hover-bg);
}
#navbar .item.ui.dropdown {
#navbar > .navbar-list > .item.ui.dropdown {
padding-right: 5px;
}
#navbar > .navbar-left {
margin-right: auto;
}
@media (max-width: 767.98px) {
#navbar {
flex-wrap: wrap;
row-gap: 0;
}
#navbar-logo {
margin-right: auto;
}
#navbar-expand-toggle {
order: 1;
}
.navbar-list {
display: none;
order: 2;
width: 100%;
flex-direction: column;
align-items: stretch;
}
/* hide all items */
#navbar .navbar-left > .item,
#navbar .navbar-right > .item {
display: none;
.navbar-left {
margin-top: 5px;
}
#navbar #navbar-logo {
.navbar-menu-open .navbar-list {
display: flex;
}
/* show the first navbar item (logo and its mobile right items) */
#navbar .navbar-left {
flex: 1;
display: flex;
justify-content: space-between;
}
#navbar .navbar-mobile-right {
display: flex;
align-items: center;
margin: 0 0 0 auto;
width: auto;
}
#navbar .navbar-mobile-right > .item {
display: flex;
width: auto;
}
/* show items if the navbar is open */
#navbar.navbar-menu-open {
padding-bottom: 8px;
}
#navbar.navbar-menu-open,
#navbar.navbar-menu-open .navbar-right {
flex-direction: column;
}
#navbar.navbar-menu-open .navbar-left {
flex-wrap: wrap;
}
#navbar.navbar-menu-open .navbar-left > .item,
#navbar.navbar-menu-open .navbar-right > .item {
display: flex;
width: 100%;
}
#navbar.navbar-menu-open .navbar-left #navbar-logo {
justify-content: flex-start;
width: auto;
}
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
justify-content: flex-end;
min-height: 49px;
}
}
#navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot,
#navbar .item:hover .notification_count,
#navbar .item:hover .header-stopwatch-dot,
#navbar .item:hover .navbar-admin-badge,
#navbar .item.active .navbar-admin-badge {
border-color: var(--color-nav-hover-bg);
}
#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot,
#navbar .item .navbar-admin-badge {
#navbar .notification_count,
#navbar .header-stopwatch-dot,
#navbar .navbar-admin-badge {
color: var(--color-nav-bg);
padding: 0 3.75px;
font-size: 12px;
@@ -132,8 +112,7 @@
display: inline-flex;
}
#navbar .item .navbar-admin-badge {
position: absolute;
#navbar .navbar-admin-badge {
left: auto;
right: -7px;
bottom: -5px;