From 6574e09a73d51b3a8d49af43c1b56e7d438afc8c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 21 Sep 2023 21:38:45 +0200
Subject: [PATCH 1/2] Use mask-based fade-out effect for new-menu

---
 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 3a556812f9b52..9dbb0320b236a 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>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 6b33ec4111ec3..87e6aa2b96fff 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: #ffffff;
   --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 ce0989a5f6952..96d9f5821c389 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;

From a3b262ab390723eff392799b1c91354cc161881e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 21 Sep 2023 22:11:45 +0200
Subject: [PATCH 2/2] use transparent

---
 web_src/css/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 87e6aa2b96fff..5efb0bfae541a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -217,7 +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: #ffffff;
+  --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;