dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-07 00:30:42 +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", name: "Round Sidebar Icons",
description: "If the Sidebar Icons should be round instead of square", description: "If the Sidebar Icons should be round instead of square",
defaultValue: false, defaultValue: false,
onChange: (val) => { onChange: (val) => document.documentElement.style.setProperty("--sidebar-icons-border-radius", val ? "50%" : "var(--image-radius)")
if (val) { });
document.documentElement.style.setProperty("--sidebar-icons-border-radius", "50%");
} else { DribbblishShared.config.register({
document.documentElement.style.setProperty("--sidebar-icons-border-radius", "var(--image-radius)"); 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({ DribbblishShared.config.register({
@ -365,9 +368,7 @@ DribbblishShared.config.register({
} }
`); `);
}, },
onChange: (val) => { onChange: (val) => document.body.setAttribute("hide-ads", val ? "" : null)
document.body.setAttribute("hide-ads", val ? "" : null);
}
}); });
waitForElement(["#main"], () => { waitForElement(["#main"], () => {

25
user.css
View file

@ -439,6 +439,7 @@ html {
.main-rootlist-rootlistItemLink:visited, .main-rootlist-rootlistItemLink:visited,
.main-rootlist-rootlistContent span, .main-rootlist-rootlistContent span,
.main-navBar-entryPoints span { .main-navBar-entryPoints span {
z-index: 999;
color: var(--spice-sidebar-text) color: var(--spice-sidebar-text)
} }
@ -1113,18 +1114,30 @@ span.main-userWidget-displayName,
position: relative; 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-navBar-navBarItem:hover::before,
.main-rootlist-rootlistItem:hover::before, .main-rootlist-rootlistItem:hover::before,
.main-rootlist-rootlistItemLinkActive::before, .main-rootlist-rootlistItemLinkActive::before,
.main-collectionLinkButton-collectionLinkButton:hover::before, .main-collectionLinkButton-collectionLinkButton:hover::before,
.main-collectionLinkButton-selected::before, .main-collectionLinkButton-selected::before,
.main-createPlaylistButton-button:hover::before { .main-createPlaylistButton-button:hover::before {
content: ""; left: 0px;
position: absolute;
inset: 0px;
background-color: rgba(var(--spice-rgb-main), 0.4);
border-radius: var(--image-radius);
pointer-events: none;
} }
.main-rootlist-rootlist .main-navBar-navBarItem:hover::before { .main-rootlist-rootlist .main-navBar-navBarItem:hover::before {