Fix mobile navbar and misc cleanups (#25134)

- Fix and improve mobile navbar layout
- Apply all cleanups suggested in
https://github.com/go-gitea/gitea/pull/25111
- Make media query breakpoints match Fomantic's exactly
- Clean up whitespace in class on navbar items

Mobile navbar before and after:
<img width="745" alt="Screenshot 2023-06-08 at 08 40 56"
src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28">
<img width="739" alt="Screenshot 2023-06-08 at 08 41 23"
src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

web_src/css/admin.css

@@ -20,7 +20,7 @@
   width: calc(100% - 245px);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .admin dl.admin-dl-horizontal dd {
     width: calc(100% - 185px);
   }
@@ -40,7 +40,7 @@
   white-space: nowrap;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .admin dl.admin-dl-horizontal dt {
     width: 160px;
   }

web_src/css/base.css

@@ -930,7 +930,7 @@ img.ui.avatar,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .page-content .ui.ui.ui.container:not(.fluid) {
     width: calc(100vw - 16px);
     max-width: calc(100vw - 16px);
@@ -950,46 +950,91 @@ img.ui.avatar,
   margin: 0 !important;
 }
 
-#navbar .column .menu {
-  margin-top: 0;
-}
-
-#navbar .fitted .svg {
-  margin-right: 0;
-  vertical-align: middle;
-}
-
-#navbar .searchbox {
-  background-color: var(--color-input-background) !important;
-}
-
-#navbar .text .svg {
-  width: 16px;
-  text-align: center;
-}
-
 #navbar a.item:hover {
   background: var(--color-nav-hover-bg);
 }
 
-#navbar .dropdown .avatar {
-  margin-right: 0 !important;
+#navbar .navbar-mobile-right {
+  margin-left: auto;
 }
 
-@media (max-width: 767px) {
-  #navbar:not(.shown) > *:not(:first-child) {
+#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;
+  }
 }
 
-.right.stackable.menu {
-  /* responsive fix: this makes sure that the right menu when the page */
-  /* is on mobile view will have elements stacked on top of each other. */
-  /* no, stackable won't work on right menus. */
-  margin-left: auto;
+@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: inherit;
-  flex-direction: inherit;
+  align-items: center;
+  justify-content: center;
+}
+
+#navbar .right.menu {
+  width: 100%;
+  justify-content: flex-end;
 }
 
 .ui.pagination.menu .active.item {
@@ -1444,7 +1489,7 @@ img.ui.avatar,
   line-height: 20px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .ui.pagination.menu .item:not(.active,.navigation),
   .ui.pagination.menu .item.navigation span.navigation_label {
     display: none;
@@ -1518,56 +1563,13 @@ img.ui.avatar,
   text-align: center;
 }
 
-/* Conditional display */
-@media (min-width: 768px) {
-  .mobile-only,
-  .ui.button.mobile-only {
-    display: none !important;
-  }
-
-  /* has the same behaviour of sr-only, hiding the content for */
-  /* non-screenreaders, but is shown on mobile devices. */
-  .sr-mobile-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-}
-
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   /* double selector so it wins over .gt-df etc */
   .not-mobile.not-mobile {
     display: none !important;
   }
 }
 
-/* Accessibility for screen readers */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-}
-
 .ui.menu.new-menu {
   margin-bottom: 15px;
   background: var(--color-header-wrapper);
@@ -1602,7 +1604,7 @@ img.ui.avatar,
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .ui.menu.new-menu .item {
     width: auto !important;
   }
@@ -2117,40 +2119,6 @@ a.ui.basic.label:hover {
   margin-top: 1rem;
 }
 
-.header-stopwatch-dot {
-  position: absolute;
-  left: 8px;
-  top: -8px;
-  width: 13px;
-  height: 13px;
-  background: var(--color-primary);
-  border: 2px solid var(--color-nav-bg);
-  border-radius: 100%;
-}
-
-.notification_count {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  left: 6px;
-  top: -8px;
-  min-width: 17px;
-  min-height: 17px;
-  background: var(--color-primary);
-  border: 2px solid var(--color-nav-bg);
-  color: var(--color-nav-bg);
-  border-radius: 17px;
-  padding: 0 3.5px;
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: var(--font-weight-bold);
-}
-
-#navbar a.item:hover .notification_count {
-  border-color: var(--color-nav-hover-bg);
-}
-
 .rss-icon {
   display: inline-flex;
   color: var(--color-text-light-1);

web_src/css/dashboard.css

@@ -35,7 +35,7 @@
   width: 15%;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard.feeds .filter.menu .item .floating.label,
   .dashboard.issues .filter.menu .item .floating.label {
     top: 10px;
@@ -60,7 +60,7 @@
   left: auto !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard.feeds .filter.menu,
   .dashboard.issues .filter.menu {
     width: 100%;
@@ -90,7 +90,7 @@
   max-width: 100%;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard .dashboard-navbar .ui.dropdown > .menu {
     position: static;
   }

web_src/css/form.css

@@ -197,7 +197,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   #create-page-form form .optional .title {
     margin-left: 15px;
   }
@@ -315,7 +315,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.activate form .optional .title,
   .user.forgot.password form .optional .title,
   .user.reset.password form .optional .title,
@@ -353,7 +353,7 @@ textarea:focus,
   width: 200px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.activate form .inline.field > label,
   .user.forgot.password form .inline.field > label,
   .user.reset.password form .inline.field > label,
@@ -449,7 +449,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo form .optional .title,
   .repository.new.migrate form .optional .title,
   .repository.new.fork form .optional .title {
@@ -483,7 +483,7 @@ textarea:focus,
   width: 50% !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo form label,
   .repository.new.migrate form label,
   .repository.new.fork form label,
@@ -516,7 +516,7 @@ textarea:focus,
   width: 50% !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
     width: 100% !important;
   }
@@ -534,7 +534,7 @@ textarea:focus,
   font-family: var(--fonts-monospace);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .new.org .ui.form .field button,
   .new.org .ui.form .field a {
     margin-bottom: 1em;

web_src/css/helpers.css

@@ -269,7 +269,7 @@ Gitea's private styles use `g-` prefix.
 .gt-font-17 { font-size: 17px !important }
 .gt-font-18 { font-size: 18px !important }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .gt-db-small { display: block !important; }
   .gt-w-100-small { width: 100% !important; }
   .gt-js-small { justify-content: flex-start !important; }

web_src/css/home.css

@@ -2,7 +2,7 @@
   max-width: 220px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .home .hero h1 {
     font-size: 3.5em;
   }

web_src/css/modules/tippy.css

@@ -25,8 +25,8 @@
 }
 
 .tippy-box[data-theme="menu"] {
-  background-color: transparent;
-  color: var(--color-tooltip-text);
+  background-color: var(--color-menu);
+  color: var(--color-text);
 }
 
 .tippy-content {

web_src/css/org.css

@@ -31,7 +31,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   #create-page-form form .optional .title {
     margin-left: 15px;
   }
@@ -77,7 +77,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .organization.new.org form .optional .title {
     margin-left: 15px;
   }
@@ -222,7 +222,7 @@
   height: 60px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .organization.teams #repo-top-segment {
     height: 100px;
   }

web_src/css/repo.css

@@ -194,13 +194,13 @@
   width: 320px;
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   .repository #clone-panel #repo-clone-url {
     width: 200px;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository #clone-panel #repo-clone-url {
     width: 200px;
   }
@@ -298,7 +298,7 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   .repository.file.list #repo-files-table td.name {
     max-width: 300px;
   }
@@ -321,7 +321,7 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   .repository.file.list #repo-files-table td.message {
     max-width: 250px;
   }
@@ -643,7 +643,7 @@
   display: flex;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .issue-title {
     flex-direction: column;
   }
@@ -939,7 +939,7 @@
   border: 1px solid var(--color-light-border);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .comment-list .timeline-item .ui.segments {
     margin-left: -2rem;
   }
@@ -964,7 +964,7 @@
   border-radius: var(--border-radius);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .comment-list .comment .content .form .button {
     width: 100%;
     margin: 0;
@@ -987,7 +987,7 @@
   margin-bottom: -0.25rem;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .comment-list .comment .merge-section .item-section {
     align-items: flex-start;
     flex-direction: column;
@@ -1133,7 +1133,7 @@
   box-shadow: none;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.view.issue .comment-list {
     padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
   }
@@ -1597,7 +1597,7 @@
   line-height: 30px;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   .repository .diff-detail-box {
     flex-direction: column;
     align-items: flex-start;
@@ -1849,7 +1849,7 @@
 }
 
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   .diff-file-box {
     scroll-margin-top: 77px; /* match .repository .diff-detail-box */
   }
@@ -1957,14 +1957,14 @@
   display: inline-block;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.wiki .dividing.header .stackable.grid .button {
     margin-top: 2px;
     margin-bottom: 2px;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.wiki #clone-panel #repo-clone-url {
     width: 160px;
   }
@@ -2265,7 +2265,7 @@
   border-radius: 0;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository .repository-summary .segment.language-stats {
     display: none;
   }
@@ -2292,7 +2292,7 @@
   width: 500px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   #cite-repo-modal #citation-panel {
     width: 100%;
   }
@@ -2753,7 +2753,7 @@ tbody.commit-list {
   display: inline-block;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   tr.commit-list {
     width: 100%;
   }
@@ -2766,7 +2766,7 @@ tbody.commit-list {
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   tr.commit-list {
     width: 723px;
   }
@@ -2862,7 +2862,7 @@ tbody.commit-list {
   word-break: break-word;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repo-header + .container {
     margin-top: 7px;
   }
@@ -2876,7 +2876,7 @@ tbody.commit-list {
   word-break: keep-all;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repo-buttons {
     margin-top: 1em;
   }
@@ -2923,7 +2923,7 @@ tbody.commit-list {
   pointer-events: none !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repo-buttons .ui.labeled.button .svg {
     display: none;
   }
@@ -3021,7 +3021,7 @@ tbody.commit-list {
   color: var(--color-primary);
 }
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   #diff-file-tree {
     display: none !important;
   }
@@ -3098,7 +3098,7 @@ tbody.commit-list {
   z-index: 7;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   .ui.attached.header.diff-file-header.sticky-2nd-row {
     top: 77px; /* match .repository .diff-detail-box */
   }
@@ -3137,7 +3137,7 @@ tbody.commit-list {
   overflow: hidden;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository-summary-language-stats {
     height: auto;
   }
@@ -3218,7 +3218,7 @@ tbody.commit-list {
   box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.file.list #repo-files-table .entry,
   .repository.file.list #repo-files-table .commit-list {
     align-items: center;
@@ -3340,13 +3340,13 @@ tbody.commit-list {
   vertical-align: bottom !important;
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   .branch-dropdown-button {
     max-width: 185px;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .branch-dropdown-button {
     max-width: 165px;
   }
@@ -3380,7 +3380,7 @@ tbody.commit-list {
   justify-content: flex-end;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .pr-status .status-details {
     flex-direction: column;
     align-items: flex-end;

web_src/css/repo/linebutton.css

@@ -16,7 +16,7 @@
   position: absolute;
   font-family: var(--fonts-regular);
   left: 0;
-  transform: translateX(-70%);
+  transform: translateX(-50%);
   cursor: pointer;
 }
 

web_src/css/repo/release-tag.css

@@ -119,7 +119,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.release .field button {
     margin-bottom: 1em;
   }

web_src/css/review.css

@@ -67,7 +67,7 @@
   max-width: 820px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .comment-code-cloud {
     max-width: none;
     padding: 0.75rem !important;
@@ -91,7 +91,7 @@
   padding: 0;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .comment-code-cloud .comments .comment {
     display: flex;
   }
@@ -182,7 +182,7 @@
   display: block;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .comment-code-cloud .button {
     width: 100%;
     margin: 0 !important;
@@ -252,7 +252,7 @@
   scroll-margin-top: 99px;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 991.98px) {
   .pull.files.diff .comment {
     scroll-margin-top: 130px;
   }

web_src/css/user.css

@@ -48,13 +48,13 @@
   height: auto;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.profile .ui.card #profile-avatar img {
     width: 30vw;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.profile .ui.card {
     width: 100%;
   }