oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Use mask-based fade-out effect for `.new-menu` (#27181)

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/)

authored by

silverwind and committed by
GitHub 6af34c09 c2eed613

+21 -32
+17 -15
templates/explore/navbar.tmpl
··· 1 1 <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> 2 - <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> 3 - {{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} 4 - </a> 5 - {{if not .UsersIsDisabled}} 6 - <a class="{{if .PageIsExploreUsers}}active {{end}}item" href="{{AppSubUrl}}/explore/users"> 7 - {{svg "octicon-person"}} {{.locale.Tr "explore.users"}} 2 + <div class="new-menu-inner"> 3 + <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> 4 + {{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} 8 5 </a> 9 - {{end}} 10 - <a class="{{if .PageIsExploreOrganizations}}active {{end}}item" href="{{AppSubUrl}}/explore/organizations"> 11 - {{svg "octicon-organization"}} {{.locale.Tr "explore.organizations"}} 12 - </a> 13 - {{if and (not $.UnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled}} 14 - <a class="{{if .PageIsExploreCode}}active {{end}}item" href="{{AppSubUrl}}/explore/code"> 15 - {{svg "octicon-code"}} {{.locale.Tr "explore.code"}} 16 - </a> 17 - {{end}} 6 + {{if not .UsersIsDisabled}} 7 + <a class="{{if .PageIsExploreUsers}}active {{end}}item" href="{{AppSubUrl}}/explore/users"> 8 + {{svg "octicon-person"}} {{.locale.Tr "explore.users"}} 9 + </a> 10 + {{end}} 11 + <a class="{{if .PageIsExploreOrganizations}}active {{end}}item" href="{{AppSubUrl}}/explore/organizations"> 12 + {{svg "octicon-organization"}} {{.locale.Tr "explore.organizations"}} 13 + </a> 14 + {{if and (not $.UnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled}} 15 + <a class="{{if .PageIsExploreCode}}active {{end}}item" href="{{AppSubUrl}}/explore/code"> 16 + {{svg "octicon-code"}} {{.locale.Tr "explore.code"}} 17 + </a> 18 + {{end}} 19 + </div> 18 20 </div>
+4 -16
web_src/css/base.css
··· 217 217 --color-input-toggle-background: #dedede; 218 218 --color-input-border: var(--color-secondary); 219 219 --color-input-border-hover: var(--color-secondary-dark-1); 220 + --color-header-wrapper: transparent; 220 221 --color-light: #00000006; 221 222 --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); 222 223 --color-light-border: #0000001d; ··· 1542 1543 margin-left: auto; 1543 1544 margin-right: auto; 1544 1545 overflow-x: auto; 1545 - } 1546 - 1547 - .ui.menu.new-menu::after { 1548 - position: absolute; 1549 - display: block; 1550 - background: linear-gradient(to right, var(--color-header-wrapper-transparent), var(--color-header-wrapper) 100%); 1551 - content: ""; 1552 - right: 0; 1553 - height: 39px; 1554 - width: 60px; 1555 - visibility: visible; 1556 - pointer-events: none; 1557 - } 1558 - 1559 - .ui.menu.new-menu.shadow-body::after { 1560 - background: linear-gradient(to right, transparent, var(--color-body) 100%); 1546 + width: 100%; 1547 + mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%); 1548 + -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%); 1561 1549 } 1562 1550 1563 1551 .ui.menu.new-menu .item {
-1
web_src/css/themes/theme-arc-green.css
··· 198 198 --color-input-border: var(--color-secondary); 199 199 --color-input-border-hover: var(--color-secondary-dark-1); 200 200 --color-header-wrapper: #202430; 201 - --color-header-wrapper-transparent: #20243000; 202 201 --color-light: #00000028; 203 202 --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); 204 203 --color-light-border: #ffffff28;