mirror of
https://github.com/go-gitea/gitea
synced 2024-09-12 04:09:41 +02:00
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/)
This commit is contained in:
parent
c2eed61329
commit
6af34c09a7
3 changed files with 21 additions and 32 deletions
|
@ -1,4 +1,5 @@
|
|||
<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
|
||||
<div class="new-menu-inner">
|
||||
<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
|
||||
{{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}}
|
||||
</a>
|
||||
|
@ -15,4 +16,5 @@
|
|||
{{svg "octicon-code"}} {{.locale.Tr "explore.code"}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -217,6 +217,7 @@
|
|||
--color-input-toggle-background: #dedede;
|
||||
--color-input-border: var(--color-secondary);
|
||||
--color-input-border-hover: var(--color-secondary-dark-1);
|
||||
--color-header-wrapper: transparent;
|
||||
--color-light: #00000006;
|
||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
|
||||
--color-light-border: #0000001d;
|
||||
|
@ -1542,22 +1543,9 @@ img.ui.avatar,
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ui.menu.new-menu::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: linear-gradient(to right, var(--color-header-wrapper-transparent), var(--color-header-wrapper) 100%);
|
||||
content: "";
|
||||
right: 0;
|
||||
height: 39px;
|
||||
width: 60px;
|
||||
visibility: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.menu.new-menu.shadow-body::after {
|
||||
background: linear-gradient(to right, transparent, var(--color-body) 100%);
|
||||
width: 100%;
|
||||
mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
|
||||
}
|
||||
|
||||
.ui.menu.new-menu .item {
|
||||
|
|
|
@ -198,7 +198,6 @@
|
|||
--color-input-border: var(--color-secondary);
|
||||
--color-input-border-hover: var(--color-secondary-dark-1);
|
||||
--color-header-wrapper: #202430;
|
||||
--color-header-wrapper-transparent: #20243000;
|
||||
--color-light: #00000028;
|
||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
|
||||
--color-light-border: #ffffff28;
|
||||
|
|
Loading…
Reference in a new issue