aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/css
diff options
context:
space:
mode:
authorsilverwind <me@silverwind.io>2023-06-20 22:35:25 +0200
committerGitHub <noreply@github.com>2023-06-20 20:35:25 +0000
commite50c3e8431972a41fc9792939956c3281b1b4810 (patch)
treea96591babff24e625fecd81aad931b5bb6fc4556 /web_src/css
parent54259dbf37f4a7f7d8865755484cbcad1c9ea8c0 (diff)
downloadgitea-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.css96
-rw-r--r--web_src/css/index.css1
-rw-r--r--web_src/css/modules/navbar.css138
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 */
+}