Add admin badge to navbar avatar (#36790)

Replace the standalone site admin icon in the navbar with a
Discord-style shield badge on the user avatar.

<img width="278" height="73" alt="image"
src="https://github.com/user-attachments/assets/0b074006-30b9-43c6-8ef2-2120e32e139a"
/>


Fixes: https://github.com/go-gitea/gitea/issues/35904

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
silverwind
2026-03-01 21:48:47 +01:00
committed by GitHub
parent bc9817b317
commit c3b1e7372e
3 changed files with 22 additions and 9 deletions

View File

@@ -102,12 +102,14 @@
}
#navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot {
#navbar a.item:hover .header-stopwatch-dot,
#navbar .item.active .navbar-admin-badge {
border-color: var(--color-nav-hover-bg);
}
#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot {
#navbar a.item .header-stopwatch-dot,
#navbar .item .navbar-admin-badge {
color: var(--color-nav-bg);
padding: 0 3.75px;
font-size: 12px;
@@ -127,6 +129,19 @@
z-index: 1; /* prevent menu button background from overlaying icon */
user-select: none;
white-space: nowrap;
overflow: visible;
}
.navbar-avatar {
position: relative;
display: inline-flex;
}
#navbar .item .navbar-admin-badge {
position: absolute;
bottom: calc(100% - 29px);
left: calc(100% - 18px);
padding: 1.5px;
}
.secondary-nav {