From 6af34c09a7fba3b987497ac09713bcfa03e3c35c Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 25 Sep 2023 03:03:00 +0200 Subject: [PATCH] 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: Screenshot 2023-09-21 at 21 13 19 Screenshot 2023-09-21 at 21 32 36 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/) --- templates/explore/navbar.tmpl | 32 ++++++++++++++------------ web_src/css/base.css | 20 ++++------------ web_src/css/themes/theme-arc-green.css | 1 - 3 files changed, 21 insertions(+), 32 deletions(-) diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl index 3a556812f..9dbb0320b 100644 --- a/templates/explore/navbar.tmpl +++ b/templates/explore/navbar.tmpl @@ -1,18 +1,20 @@
- - {{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} - - {{if not .UsersIsDisabled}} - - {{svg "octicon-person"}} {{.locale.Tr "explore.users"}} +
+ + {{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} - {{end}} - - {{svg "octicon-organization"}} {{.locale.Tr "explore.organizations"}} - - {{if and (not $.UnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled}} - - {{svg "octicon-code"}} {{.locale.Tr "explore.code"}} - - {{end}} + {{if not .UsersIsDisabled}} + + {{svg "octicon-person"}} {{.locale.Tr "explore.users"}} + + {{end}} + + {{svg "octicon-organization"}} {{.locale.Tr "explore.organizations"}} + + {{if and (not $.UnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled}} + + {{svg "octicon-code"}} {{.locale.Tr "explore.code"}} + + {{end}} +
diff --git a/web_src/css/base.css b/web_src/css/base.css index 6b33ec411..5efb0bfae 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -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 { diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index ce0989a5f..96d9f5821 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -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;