restyle context menus

This commit is contained in:
Send_Nukez 2021-11-04 13:21:14 +01:00
parent 8b7e96bf39
commit a39d7b99f2
2 changed files with 38 additions and 17 deletions

View file

@ -0,0 +1,36 @@
.main-contextMenu-menu {
background-color: transparent !important;
overflow: visible;
position: relative;
border-radius: var(--main-corner-radius);
padding: 8px;
&::before {
content: "";
position: absolute;
inset: 0px;
background-color: spiceColor("main", calc(0.75 - 0.1 * var(--is_light))) !important;
backdrop-filter: blur(10px);
border-radius: var(--main-corner-radius);
}
.main-contextMenu-menuItem {
.main-contextMenu-menuItemButton {
border-radius: var(--main-corner-radius);
color: spiceColor("subtext") !important;
&:hover,
&:focus,
&:active,
&[aria-expanded="true"] {
background-color: spiceColor("subtext", calc(0.1 + 0.3 * var(--is_light)));
}
&::before,
&::after {
left: 5px;
right: 5px;
}
}
}
}

View file

@ -6,6 +6,7 @@
@import "Colors";
@import "Inputs";
@import "ConfigMenu";
@import "ContextMenu.scss";
@import "NoAds";
:root {
@ -137,7 +138,6 @@ body {
}
.main-entityHeader-shadow,
.main-contextMenu-menu,
.connect-device-list-container {
box-shadow: 0 4px 20px #21212130;
}
@ -191,17 +191,6 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
line-height: 120px !important;
}
.main-contextMenu-menu {
background-color: spiceColor("button");
}
.main-contextMenu-menuHeading,
.main-contextMenu-menuItemButton,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
color: spiceColor("main");
}
.main-playPauseButton-button {
background-color: spiceColor("button");
color: white;
@ -1274,11 +1263,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
.main-rootlist-expandArrow:focus,
.main-rootlist-expandArrow:hover,
.main-rootlist-textWrapper:focus,
.main-rootlist-textWrapper:hover,
.main-contextMenu-menuHeading,
.main-contextMenu-menuItemButton,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
.main-rootlist-textWrapper:hover {
color: spiceColor("sidebar-text") !important;
}