dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-27 14:02:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

restyle context menus

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/styles/ContextMenu.scss Normal file
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;
}
}
}
}

19
src/styles/main.scss
View file

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