diff options
| author | Giteabot <teabot@gitea.io> | 2023-09-25 15:52:41 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-09-25 07:52:41 +0000 |
| commit | 37c7780e85db0bca580a0ed2826eac338997079e (patch) | |
| tree | 378dd0d4075dd118d7e1fdee6acd5976f0d4ddc8 /templates | |
| parent | e0832da7fa61000bb5e97b9001d57fdbbbf7da79 (diff) | |
| download | gitea-37c7780e85db0bca580a0ed2826eac338997079e.tar.gz gitea-37c7780e85db0bca580a0ed2826eac338997079e.zip | |
Use mask-based fade-out effect for `.new-menu` (#27181) (#27243)
Backport #27181 by @silverwind
The `.new-menu` was using a pseudo-element based fade-out effect.
Replace this with a more modern mask-based effect which in this case
required a child element to avoid fading out the background as well, so
I applied it to child `new-menu-inner` which was present on all these
menus except explore where I added it.
There is no visual difference except that the items on the explore page
have no `gap` between them any longer, making it consistent with other
menus. Before and after:
<img width="221" alt="Screenshot 2023-09-21 at 21 13 19"
src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29">
<img width="222" alt="Screenshot 2023-09-21 at 21 32 36"
src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b">
Also, this cleans up the related CSS vars:
- `--color-header-wrapper-transparent` is removed, no longer needed
- `--color-header-wrapper` is defined in base theme as well, was
previously unset and therefor transparent.
[no whitespace
diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1)
[demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/)
Co-authored-by: silverwind <me@silverwind.io>
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/explore/navbar.tmpl | 32 |
1 files changed, 17 insertions, 15 deletions
diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl index 3a556812f9..9dbb0320b2 100644 --- a/templates/explore/navbar.tmpl +++ b/templates/explore/navbar.tmpl @@ -1,18 +1,20 @@ <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> - <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> - {{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} - </a> - {{if not .UsersIsDisabled}} - <a class="{{if .PageIsExploreUsers}}active {{end}}item" href="{{AppSubUrl}}/explore/users"> - {{svg "octicon-person"}} {{.locale.Tr "explore.users"}} + <div class="new-menu-inner"> + <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> + {{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} </a> - {{end}} - <a class="{{if .PageIsExploreOrganizations}}active {{end}}item" href="{{AppSubUrl}}/explore/organizations"> - {{svg "octicon-organization"}} {{.locale.Tr "explore.organizations"}} - </a> - {{if and (not $.UnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled}} - <a class="{{if .PageIsExploreCode}}active {{end}}item" href="{{AppSubUrl}}/explore/code"> - {{svg "octicon-code"}} {{.locale.Tr "explore.code"}} - </a> - {{end}} + {{if not .UsersIsDisabled}} + <a class="{{if .PageIsExploreUsers}}active {{end}}item" href="{{AppSubUrl}}/explore/users"> + {{svg "octicon-person"}} {{.locale.Tr "explore.users"}} + </a> + {{end}} + <a class="{{if .PageIsExploreOrganizations}}active {{end}}item" href="{{AppSubUrl}}/explore/organizations"> + {{svg "octicon-organization"}} {{.locale.Tr "explore.organizations"}} + </a> + {{if and (not $.UnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled}} + <a class="{{if .PageIsExploreCode}}active {{end}}item" href="{{AppSubUrl}}/explore/code"> + {{svg "octicon-code"}} {{.locale.Tr "explore.code"}} + </a> + {{end}} + </div> </div> |