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 @@ diff --git a/web_src/css/base.css b/web_src/css/base.css index 6b33ec4111..5efb0bfae5 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 ce0989a5f6..96d9f5821c 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;