Improvements to the notification icon and `<nav>`: - Add a opaque color for header hover and use it, allowing the border to be the right color on hover (sadly, not otherwise possible with CSS, not even `color-mix`). - Increase font size by 1px - Use flexbox for slightly better text centering - Reduce padding of user and add repo button, add margin on right side of user menu - Remove the `following bar` wrapper on navbar <img width="176" alt="Screenshot 2023-06-07 at 00 07 08" src="https://github.com/go-gitea/gitea/assets/115237/23cdc3d6-7f63-49df-bec3-f2e75e32a304"> <img width="63" alt="Screenshot 2023-06-07 at 00 07 14" src="https://github.com/go-gitea/gitea/assets/115237/fae602c2-4467-4d50-b1ec-56317843f9a2"> <img width="84" alt="Screenshot 2023-06-07 at 00 07 36" src="https://github.com/go-gitea/gitea/assets/115237/c48141b8-0b3c-48cc-846a-3a272524dbdb"> <img width="329" alt="Screenshot 2023-06-07 at 00 25 10" src="https://github.com/go-gitea/gitea/assets/115237/cda612f1-426e-466b-a351-fc992bfd18fd"> <img width="186" alt="Screenshot 2023-06-07 at 00 35 45" src="https://github.com/go-gitea/gitea/assets/115237/04484a2e-9bbf-493c-aa26-8e936da008fa"> <img width="797" alt="Screenshot 2023-06-07 at 16 57 40" src="https://github.com/go-gitea/gitea/assets/115237/e7ccb672-5807-4cb6-b306-b18ae0c7e321">tags/v1.21.0-dev^0
@@ -73,9 +73,7 @@ | |||
{{template "custom/body_inner_pre" .}} | |||
{{if not .PageIsInstall}} | |||
<div class="ui top secondary stackable main menu following bar light"> | |||
{{template "base/head_navbar" .}} | |||
</div><!-- end bar --> | |||
{{template "base/head_navbar" .}} | |||
{{end}} | |||
{{if false}} |
@@ -1,4 +1,4 @@ | |||
<nav class="ui container" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}"> | |||
<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}"> | |||
{{$notificationUnreadCount := 0}} | |||
{{if .IsSigned}} | |||
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}} | |||
@@ -78,7 +78,7 @@ | |||
</div><!-- end dropdown avatar menu --> | |||
</div> | |||
{{else if .IsSigned}} | |||
<div class="right stackable menu"> | |||
<div class="right stackable menu gt-mr-4"> | |||
{{if EnableTimetracking}} | |||
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}"> | |||
<span class="fitted gt-relative"> | |||
@@ -125,7 +125,7 @@ | |||
</span> | |||
</a> | |||
<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "create_new"}}"> | |||
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "create_new"}}"> | |||
<span class="text"> | |||
<span class="fitted">{{svg "octicon-plus"}}</span> | |||
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span> | |||
@@ -148,7 +148,7 @@ | |||
</div><!-- end content create new menu --> | |||
</div><!-- end dropdown menu create new --> | |||
<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}"> | |||
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}"> | |||
<span class="text"> | |||
{{avatar $.Context .SignedUser 24 "tiny"}} | |||
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span> |
@@ -15,7 +15,7 @@ | |||
</head> | |||
<body> | |||
<div class="full height"> | |||
<nav class="ui secondary menu following bar light"> | |||
<nav class="ui container secondary stackable main menu" id="navbar"> | |||
<div class="ui container gt-df"> | |||
<div class="item brand gt-f1"> | |||
<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}"> |
@@ -195,8 +195,8 @@ | |||
--color-input-toggle-background: #dedede; | |||
--color-input-border: #dedede; | |||
--color-input-border-hover: #cecece; | |||
--color-navbar: #f8f8f8; | |||
--color-navbar-transparent: #f8f8f800; | |||
--color-header-wrapper: #f8f8f8; | |||
--color-header-wrapper-transparent: #f8f8f800; | |||
--color-light: #00000006; | |||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); | |||
--color-light-border: #0000001d; | |||
@@ -223,7 +223,8 @@ | |||
--color-reaction-active-bg: var(--color-primary-light-6); | |||
--color-tooltip-text: #ffffff; | |||
--color-tooltip-bg: #000000f0; | |||
--color-header-bar: #ffffff; | |||
--color-nav-bg: #ffffff; | |||
--color-nav-hover-bg: #ebebeb; | |||
--color-label-text: #232323; | |||
--color-label-bg: #cacaca5b; | |||
--color-label-hover-bg: #cacacaa0; | |||
@@ -946,44 +947,44 @@ img.ui.avatar, | |||
} | |||
} | |||
.following.bar { | |||
margin: 0 !important; | |||
} | |||
.following.bar.light { | |||
background: var(--color-header-bar); | |||
#navbar { | |||
display: flex; | |||
align-items: center; | |||
background: var(--color-nav-bg); | |||
border-bottom: 1px solid var(--color-secondary); | |||
width: 100vw; | |||
min-height: 52px; | |||
margin: 0 !important; | |||
} | |||
.following.bar .column .menu { | |||
#navbar .column .menu { | |||
margin-top: 0; | |||
} | |||
.following.bar .fitted .svg { | |||
#navbar .fitted .svg { | |||
margin-right: 0; | |||
vertical-align: middle; | |||
} | |||
.following.bar .searchbox { | |||
#navbar .searchbox { | |||
background-color: var(--color-input-background) !important; | |||
} | |||
.following.bar .text .svg { | |||
#navbar .text .svg { | |||
width: 16px; | |||
text-align: center; | |||
} | |||
.following.bar #navbar { | |||
width: 100vw; | |||
min-height: 52px; | |||
#navbar a.item:hover { | |||
background: var(--color-nav-hover-bg); | |||
} | |||
.following.bar #navbar .dropdown .avatar { | |||
#navbar .dropdown .avatar { | |||
margin-right: 0 !important; | |||
} | |||
@media (max-width: 767px) { | |||
.following.bar #navbar:not(.shown) > *:not(:first-child) { | |||
#navbar:not(.shown) > *:not(:first-child) { | |||
display: none; | |||
} | |||
} | |||
@@ -1576,7 +1577,7 @@ img.ui.avatar, | |||
.ui.menu.new-menu { | |||
margin-bottom: 15px; | |||
background: var(--color-navbar); | |||
background: var(--color-header-wrapper); | |||
border-bottom: 1px solid var(--color-secondary) !important; | |||
overflow: auto; | |||
} | |||
@@ -1591,7 +1592,7 @@ img.ui.avatar, | |||
.ui.menu.new-menu::after { | |||
position: absolute; | |||
display: block; | |||
background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 100%); | |||
background: linear-gradient(to right, var(--color-header-wrapper-transparent), var(--color-header-wrapper) 100%); | |||
content: ''; | |||
right: 0; | |||
height: 39px; | |||
@@ -2126,24 +2127,31 @@ a.ui.basic.label:hover { | |||
width: 13px; | |||
height: 13px; | |||
background: var(--color-primary); | |||
border: 2px solid var(--color-header-bar); | |||
border: 2px solid var(--color-nav-bg); | |||
border-radius: 100%; | |||
} | |||
.notification_count { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
position: absolute; | |||
left: 7px; | |||
top: -9px; | |||
min-width: 1.5em; | |||
text-align: center; | |||
left: 6px; | |||
top: -8px; | |||
min-width: 17px; | |||
min-height: 17px; | |||
background: var(--color-primary); | |||
border: 2px solid var(--color-header-bar); | |||
color: var(--color-header-bar); | |||
padding: 2.75px; | |||
border-radius: 1em; | |||
font-size: 11px; | |||
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); | |||
line-height: .7; | |||
} | |||
#navbar a.item:hover .notification_count { | |||
border-color: var(--color-nav-hover-bg); | |||
} | |||
.rss-icon { |
@@ -1,6 +1,6 @@ | |||
.explore .navbar { | |||
margin-bottom: 15px !important; | |||
background-color: var(--color-navbar) !important; | |||
background-color: var(--color-header-wrapper) !important; | |||
border-width: 1px !important; | |||
} | |||
@@ -132,7 +132,7 @@ | |||
} | |||
.repository .header-wrapper { | |||
background-color: var(--color-navbar); | |||
background-color: var(--color-header-wrapper); | |||
} | |||
.repository .header-wrapper .ui.tabs.divider { |
@@ -180,8 +180,8 @@ | |||
--color-input-toggle-background: #454a57; | |||
--color-input-border: #454a57; | |||
--color-input-border-hover: #505667; | |||
--color-navbar: #2a2e3a; | |||
--color-navbar-transparent: #2a2e3a00; | |||
--color-header-wrapper: #2a2e3a; | |||
--color-header-wrapper-transparent: #2a2e3a00; | |||
--color-light: #00000028; | |||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); | |||
--color-light-border: #ffffff28; | |||
@@ -207,7 +207,8 @@ | |||
--color-reaction-active-bg: var(--color-primary-light-5); | |||
--color-tooltip-text: #ffffff; | |||
--color-tooltip-bg: #000000f0; | |||
--color-header-bar: #2e323e; | |||
--color-nav-bg: #2e323e; | |||
--color-nav-hover-bg: #434651; | |||
--color-label-text: #dfe3ec; | |||
--color-label-bg: #7c84974b; | |||
--color-label-hover-bg: #7c8497a0; |