diff options
author | silverwind <me@silverwind.io> | 2023-06-20 22:35:25 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-06-20 20:35:25 +0000 |
commit | e50c3e8431972a41fc9792939956c3281b1b4810 (patch) | |
tree | a96591babff24e625fecd81aad931b5bb6fc4556 /web_src/css | |
parent | 54259dbf37f4a7f7d8865755484cbcad1c9ea8c0 (diff) | |
download | gitea-e50c3e8431972a41fc9792939956c3281b1b4810.tar.gz gitea-e50c3e8431972a41fc9792939956c3281b1b4810.zip |
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>
Diffstat (limited to 'web_src/css')
-rw-r--r-- | web_src/css/base.css | 96 | ||||
-rw-r--r-- | web_src/css/index.css | 1 | ||||
-rw-r--r-- | web_src/css/modules/navbar.css | 138 |
3 files changed, 139 insertions, 96 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index a876885632..7322b778f3 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -930,102 +930,6 @@ img.ui.avatar, } } -#navbar { - display: flex; - align-items: center; - background: var(--color-nav-bg); - border-bottom: 1px solid var(--color-secondary); - min-height: 52px; - margin: 0 !important; -} - -#navbar a.item:hover { - background: var(--color-nav-hover-bg); -} - -#navbar .navbar-mobile-right { - margin-left: auto; -} - -#navbar .navbar-mobile-right a.item:hover { - background: transparent; -} - -#navbar .secondary.menu > .item > .svg, -#navbar .right.menu > .item > .svg { - margin-right: 0; -} - -@media (max-width: 767.98px) { - /* hide all items */ - #navbar .item { - display: none; - } - /* show the first navbar item (logo and its mobile right items) */ - #navbar > .item:first-child { - display: flex; - padding-top: 5px; - padding-bottom: 5px; - } - #navbar .navbar-mobile-right > .item { - display: flex; - } - /* show items if the navbar is open */ - #navbar.navbar-menu-open .item { - display: flex; - } - #navbar.navbar-menu-open > .item:first-child { - padding-bottom: 0; - } -} - -@media (min-width: 767.98px) { - #navbar .navbar-mobile-right, - #navbar .mobile-only { - display: none; - } - #navbar .right.menu { - padding-right: 1em; - } -} - -#navbar .navbar-mobile-right .item { - width: auto !important; -} - -#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; -} - -#navbar .right.menu { - width: 100%; - justify-content: flex-end; -} - .ui.pagination.menu .active.item { color: var(--color-text); background: var(--color-active); diff --git a/web_src/css/index.css b/web_src/css/index.css index 125249ceab..21ae4c1b1f 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -7,6 +7,7 @@ @import "./modules/breadcrumb.css"; @import "./modules/card.css"; @import "./modules/comment.css"; +@import "./modules/navbar.css"; @import "./shared/issuelist.css"; @import "./shared/milestone.css"; diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css new file mode 100644 index 0000000000..abc6afc690 --- /dev/null +++ b/web_src/css/modules/navbar.css @@ -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 */ +} |