mirrors
/
gitea
espejo de https://github.com/go-gitea/gitea.git
Seguir 1
Destacar 0
Fork 0
Código Incidencias 0 Lanzamientos 211 Wiki Actividad
Explorar el Código

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">
tags/v1.21.0-dev^0
silverwind hace 1 año
padre
eac1bddb8d
commit
b6bcb79987
No account linked to committer's email address
Se han modificado 7 ficheros con 51 adiciones y 44 borrados
Unificar vista Mostrar estadísticas de diff
  1. 1
    3
      templates/base/head.tmpl
  2. 4
    4
      templates/base/head_navbar.tmpl
  3. 1
    1
      templates/status/500.tmpl
  4. 39
    31
      web_src/css/base.css
  5. 1
    1
      web_src/css/explore.css
  6. 1
    1
      web_src/css/repo.css
  7. 4
    3
      web_src/css/themes/theme-arc-green.css

+ 1
- 3
templates/base/head.tmpl Ver fichero

{{template "custom/body_inner_pre" .}} {{template "custom/body_inner_pre" .}}


{{if not .PageIsInstall}} {{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}} {{end}}


{{if false}} {{if false}}

+ 4
- 4
templates/base/head_navbar.tmpl Ver fichero

<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}} {{$notificationUnreadCount := 0}}
{{if .IsSigned}} {{if .IsSigned}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}} {{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
</div><!-- end dropdown avatar menu --> </div><!-- end dropdown avatar menu -->
</div> </div>
{{else if .IsSigned}} {{else if .IsSigned}}
<div class="right stackable menu">
<div class="right stackable menu gt-mr-4">
{{if EnableTimetracking}} {{if EnableTimetracking}}
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}"> <a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
<span class="fitted gt-relative"> <span class="fitted gt-relative">
</span> </span>
</a> </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="text">
<span class="fitted">{{svg "octicon-plus"}}</span> <span class="fitted">{{svg "octicon-plus"}}</span>
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span> <span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
</div><!-- end content create new menu --> </div><!-- end content create new menu -->
</div><!-- end dropdown menu create new --> </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"> <span class="text">
{{avatar $.Context .SignedUser 24 "tiny"}} {{avatar $.Context .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span> <span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>

+ 1
- 1
templates/status/500.tmpl Ver fichero

</head> </head>
<body> <body>
<div class="full height"> <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="ui container gt-df">
<div class="item brand gt-f1"> <div class="item brand gt-f1">
<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}"> <a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">

+ 39
- 31
web_src/css/base.css Ver fichero

--color-input-toggle-background: #dedede; --color-input-toggle-background: #dedede;
--color-input-border: #dedede; --color-input-border: #dedede;
--color-input-border-hover: #cecece; --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: #00000006;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000001d; --color-light-border: #0000001d;
--color-reaction-active-bg: var(--color-primary-light-6); --color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: #ffffff; --color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0; --color-tooltip-bg: #000000f0;
--color-header-bar: #ffffff;
--color-nav-bg: #ffffff;
--color-nav-hover-bg: #ebebeb;
--color-label-text: #232323; --color-label-text: #232323;
--color-label-bg: #cacaca5b; --color-label-bg: #cacaca5b;
--color-label-hover-bg: #cacacaa0; --color-label-hover-bg: #cacacaa0;
} }
} }


.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); 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; margin-top: 0;
} }


.following.bar .fitted .svg {
#navbar .fitted .svg {
margin-right: 0; margin-right: 0;
vertical-align: middle; vertical-align: middle;
} }


.following.bar .searchbox {
#navbar .searchbox {
background-color: var(--color-input-background) !important; background-color: var(--color-input-background) !important;
} }


.following.bar .text .svg {
#navbar .text .svg {
width: 16px; width: 16px;
text-align: center; 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; margin-right: 0 !important;
} }


@media (max-width: 767px) { @media (max-width: 767px) {
.following.bar #navbar:not(.shown) > *:not(:first-child) {
#navbar:not(.shown) > *:not(:first-child) {
display: none; display: none;
} }
} }


.ui.menu.new-menu { .ui.menu.new-menu {
margin-bottom: 15px; margin-bottom: 15px;
background: var(--color-navbar);
background: var(--color-header-wrapper);
border-bottom: 1px solid var(--color-secondary) !important; border-bottom: 1px solid var(--color-secondary) !important;
overflow: auto; overflow: auto;
} }
.ui.menu.new-menu::after { .ui.menu.new-menu::after {
position: absolute; position: absolute;
display: block; 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: ''; content: '';
right: 0; right: 0;
height: 39px; height: 39px;
width: 13px; width: 13px;
height: 13px; height: 13px;
background: var(--color-primary); background: var(--color-primary);
border: 2px solid var(--color-header-bar);
border: 2px solid var(--color-nav-bg);
border-radius: 100%; border-radius: 100%;
} }


.notification_count { .notification_count {
display: flex;
align-items: center;
justify-content: center;
position: absolute; 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); 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); font-weight: var(--font-weight-bold);
line-height: .7;
}

#navbar a.item:hover .notification_count {
border-color: var(--color-nav-hover-bg);
} }


.rss-icon { .rss-icon {

+ 1
- 1
web_src/css/explore.css Ver fichero

.explore .navbar { .explore .navbar {
margin-bottom: 15px !important; margin-bottom: 15px !important;
background-color: var(--color-navbar) !important;
background-color: var(--color-header-wrapper) !important;
border-width: 1px !important; border-width: 1px !important;
} }



+ 1
- 1
web_src/css/repo.css Ver fichero

} }


.repository .header-wrapper { .repository .header-wrapper {
background-color: var(--color-navbar);
background-color: var(--color-header-wrapper);
} }


.repository .header-wrapper .ui.tabs.divider { .repository .header-wrapper .ui.tabs.divider {

+ 4
- 3
web_src/css/themes/theme-arc-green.css Ver fichero

--color-input-toggle-background: #454a57; --color-input-toggle-background: #454a57;
--color-input-border: #454a57; --color-input-border: #454a57;
--color-input-border-hover: #505667; --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: #00000028;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #ffffff28; --color-light-border: #ffffff28;
--color-reaction-active-bg: var(--color-primary-light-5); --color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #ffffff; --color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0; --color-tooltip-bg: #000000f0;
--color-header-bar: #2e323e;
--color-nav-bg: #2e323e;
--color-nav-hover-bg: #434651;
--color-label-text: #dfe3ec; --color-label-text: #dfe3ec;
--color-label-bg: #7c84974b; --color-label-bg: #7c84974b;
--color-label-hover-bg: #7c8497a0; --color-label-hover-bg: #7c8497a0;

Escribir Vista previa
Cargando…
Cancelar
Guardar