mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-27 14:13:52 +03:00
Improve notification icon and navbar (#25111)
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">
This commit is contained in:
parent
eac1bddb8d
commit
b6bcb79987
7 changed files with 51 additions and 44 deletions
|
@ -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 {
|
||||
#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.light {
|
||||
background: var(--color-header-bar);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
Loading…
Reference in a new issue