[Port] gitea#29982 Introduce .secondary-nav and handle .page-content spacing universally

Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce
`.secondary-nav` as a universal way for styling and margin adjustments
inside `.page-content`.

If the first child of `.page-content` is `.secondary-nav`, we add margin
below it, otherwise we add padding to the first child. Notable changes:

- `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`.
- `navbar` class is removed.

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

---

Conflict resolution: Trivial conflict & changed selector to reflect new
classes.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit 3ccda41a539b8ba7841919ee12dc2877ddc03818)

web_src/css/base.css

@@ -749,9 +749,16 @@ img.ui.avatar,
   padding-bottom: 80px;
 }
 
-.page-content.new:is(.repo,.migrate,.org),
-.page-content.profile:is(.user,.organization) {
-  padding-top: 15px;
+/* add margin below .secondary nav when it is the first child */
+.page-content > :first-child.secondary-nav {
+  margin-bottom: 14px;
+}
+
+/* add padding to all content when there is no .secondary.nav. this uses padding instead of
+   margin because with the negative margin on .ui.grid we would have to set margin-top: 0,
+   but that does not work universally for all pages */
+.page-content > :first-child:not(.secondary-nav) {
+  padding-top: 14px;
 }
 
 /* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
@@ -1337,7 +1344,6 @@ strong.attention-caution, svg.attention-caution {
 }
 
 overflow-menu {
-  margin-bottom: 15px !important;
   border-bottom: 1px solid var(--color-secondary) !important;
   display: flex;
 }
@@ -1351,6 +1357,10 @@ overflow-menu .overflow-menu-items .item {
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
+overflow-menu .ui.label {
+  margin-left: 7px !important; /* save some space */
+}
+
 .activity-bar-graph {
   background-color: var(--color-primary);
   color: var(--color-primary-contrast);