Fix: change background of selected menu item corner for grey background

This commit is contained in:
Jorit Tijsen
2024-05-15 14:05:05 +02:00
parent d495cdde37
commit 9ae62ab798
3 changed files with 24 additions and 5 deletions

12
public/css/style.css vendored
View File

@@ -257,7 +257,9 @@ div.pp_default .pp_close:hover {
display: block; display: block;
width: 33px; width: 33px;
height: 25px; height: 25px;
background-image: URL("/images/menu-corner-1.svg"); -webkit-mask-image: URL("/images/menu-corner-1.svg");
mask-image: URL("/images/menu-corner-1.svg");
background-color: white;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -268,7 +270,9 @@ div.pp_default .pp_close:hover {
display: block; display: block;
width: 12px; width: 12px;
height: 15px; height: 15px;
background-image: URL("/images/menu-corner-2.svg"); -webkit-mask-image: URL("/images/menu-corner-2.svg");
mask-image: URL("/images/menu-corner-2.svg");
background-color: white;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: -1px; right: -1px;
@@ -586,10 +590,14 @@ div.pp_default .pp_close:hover {
.grey_background nav > div { .grey_background nav > div {
background: #f9f9f9; background: #f9f9f9;
border-color: #f9f9f9;
} }
.grey_background .menu > li a { .grey_background .menu > li a {
background: #f9f9f9; background: #f9f9f9;
} }
.grey_background .menu > li.selected a:before, .grey_background .menu > li.selected a:after, .grey_background .menu > li:hover a:before, .grey_background .menu > li:hover a:after, .grey_background .menu > li.hover a:before, .grey_background .menu > li.hover a:after {
background-color: #f9f9f9;
}
.grey_background .menu > li:last-child:after { .grey_background .menu > li:last-child:after {
background: #f9f9f9; background: #f9f9f9;
} }

File diff suppressed because one or more lines are too long

View File

@@ -61,7 +61,9 @@
display: block; display: block;
width: 33px; width: 33px;
height: 25px; height: 25px;
background-image: URL('/images/menu-corner-1.svg'); -webkit-mask-image: URL("/images/menu-corner-1.svg");
mask-image: URL("/images/menu-corner-1.svg");
background-color: white;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -73,7 +75,9 @@
display: block; display: block;
width: 12px; width: 12px;
height: 15px; height: 15px;
background-image: URL('/images/menu-corner-2.svg'); -webkit-mask-image: URL("/images/menu-corner-2.svg");
mask-image: URL("/images/menu-corner-2.svg");
background-color: white;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: -1px; right: -1px;
@@ -419,6 +423,7 @@
nav { nav {
> div { > div {
background: $container-bg; background: $container-bg;
border-color: $container-bg;
} }
} }
@@ -428,6 +433,12 @@
background: $container-bg; background: $container-bg;
} }
&.selected a, &:hover a, &.hover a {
&:before, &:after {
background-color: $container-bg;
}
}
&:last-child { &:last-child {
&:after { &:after {
background: $container-bg; background: $container-bg;