mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-04 18:24:19 +00:00
silverwind
516a4883fa
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>
130 lines
2.5 KiB
CSS
130 lines
2.5 KiB
CSS
#navbar {
|
|
background: var(--color-nav-bg);
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#navbar,
|
|
.navbar-list {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
#navbar > .item,
|
|
#navbar > .navbar-list > .item {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--color-nav-text);
|
|
text-decoration: none;
|
|
min-height: 36px;
|
|
min-width: 36px;
|
|
padding: 3px 13px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#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 > .item:hover,
|
|
#navbar > .navbar-list > .item:hover {
|
|
background: var(--color-nav-hover-bg);
|
|
}
|
|
|
|
#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;
|
|
}
|
|
.navbar-left {
|
|
margin-top: 5px;
|
|
}
|
|
.navbar-menu-open .navbar-list {
|
|
display: flex;
|
|
}
|
|
#navbar.navbar-menu-open {
|
|
padding-bottom: 8px;
|
|
}
|
|
}
|
|
|
|
#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 .notification_count,
|
|
#navbar .header-stopwatch-dot,
|
|
#navbar .navbar-admin-badge {
|
|
color: var(--color-nav-bg);
|
|
padding: 0 3.75px;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
font-weight: var(--font-weight-bold);
|
|
background: var(--color-primary);
|
|
border: 2px solid var(--color-nav-bg);
|
|
position: absolute;
|
|
left: calc(100% - 9px);
|
|
bottom: calc(100% - 9px);
|
|
min-width: 17px;
|
|
height: 17px;
|
|
border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1; /* prevent menu button background from overlaying icon */
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
overflow: visible;
|
|
}
|
|
|
|
.navbar-avatar {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
#navbar .navbar-admin-badge {
|
|
left: auto;
|
|
right: -7px;
|
|
bottom: -5px;
|
|
padding: 1.5px;
|
|
}
|
|
|
|
.secondary-nav {
|
|
background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
|
|
}
|
|
|
|
.issue-navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|