From 28ca1c6038b4dac88cb41d4f90f93ec19655e59e Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Mon, 12 Feb 2024 19:07:01 +0200 Subject: [PATCH] hide tabs toolbar: Make menubar use multi-layer background-image This makes the menubar stay opaque even if the active theme has transparent toolbar background over some image background. --- chrome/hide_tabs_toolbar.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/chrome/hide_tabs_toolbar.css b/chrome/hide_tabs_toolbar.css index a2b9059..782a4fb 100644 --- a/chrome/hide_tabs_toolbar.css +++ b/chrome/hide_tabs_toolbar.css @@ -45,10 +45,16 @@ Window controls will be all wrong without it :root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{ flex-grow: 1; align-items: stretch; - background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor); - background-clip: padding-box; - border-right: 30px solid transparent; - border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px + background-attachment: scroll, fixed, fixed; + background-position: 0 0, var(--lwt-background-alignment), right top; + background-repeat: repeat-x, var(--lwt-background-tiling), no-repeat; + background-size: auto 100%, var(--lwt-background-size, auto auto), auto auto; + padding-right: 20px; +} +:root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive]) #main-menubar{ + background-color: var(--lwt-accent-color); + background-image: linear-gradient(var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor),var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor)), var(--lwt-additional-images,none), var(--lwt-header-image, none); + mask-image: linear-gradient(to left, transparent, black 20px); } #toolbar-menubar:not([inactive]){ z-index: 2 }