Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-22 02:42:54 +01:00
Code Issues Projects Releases Activity

fix(dribbblish): bottom bar and box shadow (#840)

Browse Source
This commit is contained in:
Victor 2022-09-21 06:07:12 -05:00 committed by GitHub
parent 6612793f49
commit eb6b818368
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Dribbblish/dribbblish.js
View File

@ -93,10 +93,10 @@ waitForElement([
.observe(listElem, {childList: true}); .observe(listElem, {childList: true});
}); });
waitForElement([".Root__main-view"], ([mainView]) => { waitForElement([".Root__top-container"], ([topContainer]) => {
const shadow = document.createElement("div"); const shadow = document.createElement("div");
shadow.id = "dribbblish-back-shadow"; shadow.id = "dribbblish-back-shadow";
mainView.prepend(shadow); topContainer.prepend(shadow);
}); });
waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => { waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
@ -130,8 +130,6 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
function updateVariable([ event ]) { function updateVariable([ event ]) {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--main-view-width", event.contentRect.width + "px"); "--main-view-width", event.contentRect.width + "px");
document.documentElement.style.setProperty(
"--main-view-height", event.contentRect.height + "px");
if (event.contentRect.width < 700) { if (event.contentRect.width < 700) {
document.documentElement.classList.add("minimal-player"); document.documentElement.classList.add("minimal-player");
} else { } else {

21
Dribbblish/user.css
View File

@ -593,12 +593,10 @@ li.GlueDropTarget {
padding-bottom: 56px; padding-bottom: 56px;
} }
#dribbblish-back-shadow { #dribbblish-back-shadow {
position: fixed; z-index: 2;
width: var(--main-view-width); grid-area: main-view / main-view / now-playing-bar / main-view;
height: calc(var(--main-view-height) + var(--bar-height));
box-shadow: 0 0 10px 3px #0000003b; box-shadow: 0 0 10px 3px #0000003b;
border-radius: var(--main-corner-radius); border-radius: var(--main-corner-radius);
z-index: 2;
pointer-events: none; pointer-events: none;
} }
@ -712,14 +710,23 @@ li.GlueDropTarget {
} }
/** Grid */ /** Grid */
.Root__top-container { .Root__top-container {
grid-template-areas:
"nav-bar main-view buddy-feed"
"nav-bar now-playing-bar buddy-feed";
padding: var(--main-gap) 0; padding: var(--main-gap) 0;
} }
.spotify__container--is-desktop.buddyfeed-visible .Root__top-container {
grid-template-areas:
"top-bar top-bar top-bar"
"nav-bar main-view buddy-feed"
"nav-bar now-playing-bar buddy-feed";
}
html:not(.buddyfeed-visible) .Root__top-container { html:not(.buddyfeed-visible) .Root__top-container {
grid-template-areas:
"top-bar top-bar"
"nav-bar main-view"
"nav-bar now-playing-bar";
padding-right: var(--main-gap); padding-right: var(--main-gap);
} }