diff --git a/src/styles/ContextMenu.scss b/src/styles/ContextMenu.scss new file mode 100644 index 0000000..86fa8b3 --- /dev/null +++ b/src/styles/ContextMenu.scss @@ -0,0 +1,37 @@ +.main-contextMenu-menu { + background-color: transparent !important; + overflow: visible; + position: relative; + border-radius: var(--main-corner-radius); + padding: 8px; + + &::before { + z-index: -1; + 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; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 97b9d48..4aebe39 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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; @@ -1189,10 +1178,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container { background-color: spiceColor("selected-row", 0.3); } -.bookmark-filter { - color: spiceColor(main) !important; -} - /* 1.1.56 */ .main-navBar-navBar { width: var(--sidebar-width) !important; @@ -1274,11 +1259,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; }