mirror of https://github.com/go-gitea/gitea
Navbar styling rework (#25343)
- Extract navbar CSS to own file - Reduce height from 52px to 50px - Give every item a hover effect of of 36px, including the logo and on mobile - Consistent horizontal padding of 10px left and right <img width="549" alt="Screenshot 2023-06-18 at 13 41 16" src="https://github.com/go-gitea/gitea/assets/115237/0b00d101-253e-4b1f-9ee2-322d60fb2e26"> <img width="98" alt="Screenshot 2023-06-18 at 14 03 43" src="https://github.com/go-gitea/gitea/assets/115237/4ef5d98b-4d1e-45de-822e-c2c844e19876"> <img width="234" alt="Screenshot 2023-06-18 at 14 03 18" src="https://github.com/go-gitea/gitea/assets/115237/a4d9b04b-83de-42aa-a9ce-f010a9690688"> <img width="873" alt="Screenshot 2023-06-18 at 13 58 28" src="https://github.com/go-gitea/gitea/assets/115237/8cb8e31e-2adf-40c8-ae3f-d00d011b4d1b"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>pull/25294/head^2
silverwind
1 year ago
committed by
GitHub
parent
54259dbf37
commit
e50c3e8431
@ -0,0 +1,138 @@ |
||||
#navbar { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background: var(--color-nav-bg); |
||||
border-bottom: 1px solid var(--color-secondary); |
||||
margin: 0 !important; |
||||
padding: 0 10px; |
||||
} |
||||
|
||||
#navbar, |
||||
#navbar .navbar-left, |
||||
#navbar .navbar-right { |
||||
min-height: 49px; /* +1px border-bottom */ |
||||
} |
||||
|
||||
#navbar .navbar-left, |
||||
#navbar .navbar-right { |
||||
margin: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
#navbar-logo { |
||||
margin: 0; |
||||
} |
||||
|
||||
#navbar .item { |
||||
min-height: 36px; |
||||
min-width: 36px; |
||||
padding-top: 3px; |
||||
padding-bottom: 3px; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
#navbar a.item:hover, |
||||
#navbar button.item:hover { |
||||
background: var(--color-nav-hover-bg); |
||||
} |
||||
|
||||
#navbar .secondary.menu > .item > .svg, |
||||
#navbar .right.menu > .item > .svg { |
||||
margin-right: 0; |
||||
} |
||||
|
||||
@media (max-width: 767.98px) { |
||||
#navbar { |
||||
align-items: stretch; |
||||
} |
||||
/* hide all items */ |
||||
#navbar .item { |
||||
display: none; |
||||
} |
||||
#navbar #navbar-logo { |
||||
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; |
||||
margin-left: auto !important; |
||||
width: auto !important; |
||||
} |
||||
#navbar .navbar-mobile-right > .item { |
||||
display: flex; |
||||
width: auto !important; |
||||
} |
||||
/* 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 { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
#navbar.navbar-menu-open .item { |
||||
display: flex; |
||||
width: 100%; |
||||
} |
||||
#navbar.navbar-menu-open .navbar-left #navbar-logo { |
||||
justify-content: flex-start; |
||||
width: 50%; |
||||
min-height: 48px; |
||||
} |
||||
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right { |
||||
justify-content: flex-end; |
||||
width: 50%; |
||||
min-height: 48px; |
||||
} |
||||
#navbar.navbar-menu-open .mobile-right-item { |
||||
width: auto !important; |
||||
} |
||||
} |
||||
|
||||
@media (min-width: 767.98px) { |
||||
#navbar .navbar-mobile-right, |
||||
#navbar .mobile-only { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
#navbar a.item .notification_count { |
||||
color: var(--color-nav-bg); |
||||
padding: 0 3.75px; |
||||
font-size: 12px; |
||||
line-height: 12px; |
||||
font-weight: var(--font-weight-bold); |
||||
} |
||||
|
||||
#navbar a.item:hover .notification_count, |
||||
#navbar a.item:hover .header-stopwatch-dot { |
||||
border-color: var(--color-nav-hover-bg); |
||||
} |
||||
|
||||
#navbar a.item .notification_count, |
||||
#navbar a.item .header-stopwatch-dot { |
||||
background: var(--color-primary); |
||||
border: 2px solid var(--color-nav-bg); |
||||
position: absolute; |
||||
left: 6px; |
||||
top: -9px; |
||||
min-width: 17px; |
||||
min-height: 17px; |
||||
border-radius: 17px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
z-index: 1; /* prevent menu button background from overlaying icon */ |
||||
} |
||||
Loading…
Reference in new issue