dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-06 16:21:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #100 from JulienMaille/glassy-context-menu

Browse source 
Glassy context menus
This commit is contained in:
Erik 2021-11-06 00:00:51 +01:00 committed by GitHub
commit 984cc78159
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/styles/ContextMenu.scss Normal file
View file

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

23
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;
@ -1189,10 +1178,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
background-color: spiceColor("selected-row", 0.3); background-color: spiceColor("selected-row", 0.3);
} }
.bookmark-filter {
color: spiceColor(main) !important;
}
/* 1.1.56 */ /* 1.1.56 */
.main-navBar-navBar { .main-navBar-navBar {
width: var(--sidebar-width) !important; 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: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;
} }