From e50c3e8431972a41fc9792939956c3281b1b4810 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 20 Jun 2023 22:35:25 +0200 Subject: 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 Screenshot 2023-06-18 at 13 41 16 Screenshot 2023-06-18 at 14 03 43 Screenshot 2023-06-18 at 14 03 18 Screenshot 2023-06-18 at 13 58 28 --------- Co-authored-by: wxiaoguang Co-authored-by: Giteabot --- web_src/css/base.css | 96 ---------------------------- web_src/css/index.css | 1 + web_src/css/modules/navbar.css | 138 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+), 96 deletions(-) create mode 100644 web_src/css/modules/navbar.css (limited to 'web_src/css') 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 */ +} -- cgit v1.2.3