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.
This commit is contained in:
MrOtherGuy
2024-02-12 19:07:01 +02:00
parent cb051f3ce7
commit 28ca1c6038

View File

@@ -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 }