dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-24 20:41:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add sidebar hover animation (can be disabled in settings)

Browse source
This commit is contained in:
Send_Nukez 2021-10-12 10:25:29 +02:00
parent d48827d0e2
commit 97eba93ce8
2 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
dribbblish.js
View file

@ -329,13 +329,16 @@ DribbblishShared.config.register({
name: "Round Sidebar Icons",
description: "If the Sidebar Icons should be round instead of square",
defaultValue: false,
onChange: (val) => {
if (val) {
document.documentElement.style.setProperty("--sidebar-icons-border-radius", "50%");
} else {
document.documentElement.style.setProperty("--sidebar-icons-border-radius", "var(--image-radius)");
}
}
onChange: (val) => document.documentElement.style.setProperty("--sidebar-icons-border-radius", val ? "50%" : "var(--image-radius)")
});
DribbblishShared.config.register({
type: "checkbox",
key: "sidebarHoverAnimation",
name: "Sidebar Hover Animation",
description: "If the Sidebar Icons should have an animated background on hover",
defaultValue: true,
onChange: (val) => document.documentElement.style.setProperty("--sidebar-icons-hover-animation", val ? "1" : "0")
});
DribbblishShared.config.register({
@ -365,9 +368,7 @@ DribbblishShared.config.register({
}
`);
},
onChange: (val) => {
document.body.setAttribute("hide-ads", val ? "" : null);
}
onChange: (val) => document.body.setAttribute("hide-ads", val ? "" : null)
});
waitForElement(["#main"], () => {

25
user.css
View file

@ -439,6 +439,7 @@ html {
.main-rootlist-rootlistItemLink:visited,
.main-rootlist-rootlistContent span,
.main-navBar-entryPoints span {
z-index: 999;
color: var(--spice-sidebar-text)
}
@ -1113,18 +1114,30 @@ span.main-userWidget-displayName,
position: relative;
}
.main-navBar-navBarItem::before,
.main-rootlist-rootlistItem::before,
.main-rootlist-rootlistItemLinkActive::before,
.main-collectionLinkButton-collectionLinkButton::before,
.main-collectionLinkButton-selected::before,
.main-createPlaylistButton-button::before {
content: "";
position: absolute;
width: 100%;
inset: 0px;
left: -200%;
background-color: rgba(var(--spice-rgb-main), 0.4);
border-radius: var(--image-radius);
pointer-events: none;
transition: left calc(var(--sidebar-icons-hover-animation) * 0.2s) ease;
}
.main-navBar-navBarItem:hover::before,
.main-rootlist-rootlistItem:hover::before,
.main-rootlist-rootlistItemLinkActive::before,
.main-collectionLinkButton-collectionLinkButton:hover::before,
.main-collectionLinkButton-selected::before,
.main-createPlaylistButton-button:hover::before {
content: "";
position: absolute;
inset: 0px;
background-color: rgba(var(--spice-rgb-main), 0.4);
border-radius: var(--image-radius);
pointer-events: none;
left: 0px;
}
.main-rootlist-rootlist .main-navBar-navBarItem:hover::before {