From c7803c4a08fa1887f69199ff7b66fc556c509e59 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 20 Jun 2021 21:25:36 +0200
Subject: [PATCH] UPD: spotify v1.1.56 support

---
 dribbblish-dynamic.js |  17 ++++-
 dribbblish.js         |   6 +-
 user.css              | 140 +++++++++++++++++++++++++++++++-----------
 3 files changed, 124 insertions(+), 39 deletions(-)

diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js
index 06f610e..42df592 100644
--- a/dribbblish-dynamic.js
+++ b/dribbblish-dynamic.js
@@ -1,4 +1,4 @@
-let current = '1.3'
+let current = '1.4'
 
 /* css is injected so this works with untouched user.css from Dribbblish */
 /* dark theme */
@@ -6,6 +6,7 @@ document.styleSheets[0].insertRule(`
     :root {
         --system_is_dark: 1;
     }`)
+
 document.styleSheets[0].insertRule(`
     @media (prefers-color-scheme: light) {
         :root {
@@ -27,6 +28,7 @@ document.styleSheets[0].insertRule(`
         background-color: rgba(var(--spice-rgb-subtext), 0.15) !important;
         color: var(--spice-text);
     }`)
+
 document.styleSheets[0].insertRule(`
     .reddit-sort-container button.switch:hover,
     .new-releases-header button.switch:hover,
@@ -41,18 +43,29 @@ document.styleSheets[0].insertRule(`
         fill: var(--spice-text) !important;
     }`)
 
+document.styleSheets[0].insertRule(`
+    .lyrics-lyricsContainer-LyricsBackground {
+        background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important;
+    }`)
+
 /* big cover opacity on hover */
 document.styleSheets[0].insertRule(`
     .main-coverSlotExpanded-container:hover .cover-art,
-    .main-coverSlotExpanded-container:hover img  {
+    .main-coverSlotExpanded-container:hover img {
         opacity: 0.5;
     }`)
+
 /* temporary fix */
 document.styleSheets[0].insertRule(`
     .main-shuffleButton-button {
         order: unset !important;
     }`)
+
 document.styleSheets[0].insertRule(`
+    .collection-collectionEntityHeroCard-likedSongs,
+    .collection-collectionEntityHeroCard-likedSongs .main-cardHeader-link,
+    .collection-collectionEntityHeroCard-likedSongs .collection-collectionEntityHeroCard-descriptionContainer,
+    .x-heroCategoryCard-heroTitle,
     .main-rootlist-expandArrow:focus,
     .main-rootlist-expandArrow:hover,
     .main-rootlist-textWrapper:focus,
diff --git a/dribbblish.js b/dribbblish.js
index 80f578a..c7e81ec 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -74,7 +74,7 @@ waitForElement([".main-rootlist-rootlistPlaylistsScrollNode ul"], ([query]) => {
                     img.classList.add("playlist-picture");
                     link.prepend(img);
                 }
-                img.src = meta.picture;
+                img.src = meta.picture || "/images/tracklist-row-song-fallback.svg";
             });
         }
     }
@@ -272,7 +272,9 @@ waitForElement([
     ));
 });
 
-waitForElement([".Root__nav-bar .LayoutResizer__input"], ([resizer]) => {
+waitForElement([
+    ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
+], ([resizer]) => {
     const observer = new MutationObserver(updateVariable);
     observer.observe(resizer, { attributes: true, attributeFilter: ["value"]});
     function updateVariable() {
diff --git a/user.css b/user.css
index a62344e..2c60ce4 100644
--- a/user.css
+++ b/user.css
@@ -58,11 +58,11 @@ body {
 
 .lyrics-lyricsContainer-LyricsLine {
     font-family: var(--glue-font-family);
-    letter-spacing: normal !important;
+    letter-spacing: -.03em !important;
 }
 
-.main-rootlist-rootlistDividerGradient {
-    background: unset;
+.main-rootlist-rootlistDivider {
+    display: none;
 }
 
 input {
@@ -119,8 +119,11 @@ input {
     filter: grayscale(1);
 }
 
-span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
-    fill: black;
+span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
+    fill: var(--spice-button);
+}
+span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
+    fill: var(--spice-text);
 }
 
 /* Full window artist background */
@@ -147,8 +150,8 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
 }
 
 .artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
-    font-size: 175px !important;
-    line-height: 175px !important;
+    font-size: 120px !important;
+    line-height: 120px !important;
 }
 
 /** Hightlight selected playlist */
@@ -245,16 +248,6 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
     color: rgba(var(--spice-rgb-sidebar-text), 0.8);
 }
 
-.main-avatar-avatar,
-.main-buddyFeed-overlay {
-    width: 32px !important;
-    height: 32px !important;
-}
-
-.main-buddyFeed-avatarContainer {
-    padding-left: 4px;
-}
-
 .main-avatar-avatar.main-avatar-withBadge:after {
     box-shadow: 0 0 0 2px var(--spice-sidebar);
     background-color: var(--spice-notification);
@@ -269,7 +262,7 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
 .main-nowPlayingBar-container {
     border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
     background-color: unset;
-    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-button), 0.55), var(--spice-main) 60%);
+    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
     border-top: 0;
     min-width: 518px;
 }
@@ -278,18 +271,7 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
     border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
     border: 2px solid var(--spice-main);
     border-top: 0;
-}
-
-@media(max-width:768px){
-    /* .control-button{
-        display: none;
-    } */
-    .volume-bar {
-        flex: 0 1 40px;
-    }
-    .volume-bar .progress-bar-wrapper {
-        display: none;
-    }
+    color: var(--spice-sidebar-text);
 }
 
 .Root__nav-bar {
@@ -312,6 +294,12 @@ html,
     background-color: var(--spice-sidebar) !important;
 }
 
+html {
+    background-image: url("http://local_resource_host/dribbblish.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 .Root__nav-bar .link-subtle,
 .main-rootlist-rootlistItemLink:link,
 .main-rootlist-rootlistItemLink:visited,
@@ -416,6 +404,7 @@ html.sidebar-hide-text .GlueDropTarget span {
 
 .player-controls__buttons {
     margin-bottom: 0;
+    width: 192px;
 }
 
 .progress-bar {
@@ -426,10 +415,21 @@ html.sidebar-hide-text .GlueDropTarget span {
 
 .minimal-player .player-controls__buttons {
     width: 120px;
+    gap: 0px;
 }
+
+.minimal-player .player-controls__left,
+.minimal-player .player-controls__right {
+    --button-size: 16px !important;
+    gap: 0px;
+}
+
 .minimal-player .volume-bar {
     flex: 0 1 70px;
 }
+.extra-minimal-player .player-controls__buttons {
+    width: 64px;
+}
 .extra-minimal-player .main-shuffleButton-button,
 .extra-minimal-player .main-repeatButton-button,
 .extra-minimal-player .ExtraControls__connect-device-picker,
@@ -580,15 +580,11 @@ li.GlueDropTarget {
 }
 
 /** Rearrange player bar */
-.main-shuffleButton-button {
-    order: 1;
-}
-
 .main-nowPlayingBar-left {
     order: 1;
     flex: 1;
     width: auto;
-    min-width: unset !important;
+    min-width: 0 !important;
 }
 
 .main-nowPlayingBar-center {
@@ -767,4 +763,78 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 
 .main-nowPlayingWidget-coverExpanded {
     transform: translateX(-27px);
+}
+
+/** Mini dribbblish */
+.x-categoryCard-CategoryCard > div {
+    background-color: var(--spice-main);
+    width: calc(100% - 14px);
+    height: calc(100% - 6px);
+    margin: 3px 10px;
+    border-radius: 5px;
+}
+
+.x-categoryCard-CategoryCard {
+    height: 100px;
+}
+
+.x-categoryCard-image {
+    width: 50px !important;
+    height: 50px !important;
+}
+
+.x-heroCategoryCard-HeroCategoryCard > div {
+    background-color: var(--spice-main);
+    width: calc(100% - 20px);
+    height: calc(100% - 6px);
+    margin: 3px 16px;
+    border-radius: 5px;
+}
+
+.main-dropDown-dropDown,
+.x-sortBox-sortDropdown {
+    background-color: rgba(var(--spice-rgb-selected-row), .1) !important;
+}
+
+.connect-device-list-item:focus,
+.connect-device-list-item:hover {
+    background-color: rgba(var(--spice-rgb-selected-row), .3);
+}
+
+
+/* 1.1.56 */
+.main-navBar-navBar {
+    width: var(--sidebar-width) !important;
+}
+
+.main-entityHeader-container.main-entityHeader-nonWrapped {
+    padding-left: 64px;
+    padding-right: 64px;
+}
+
+@media (min-width: 1024px) {
+    .main-entityHeader-container.main-entityHeader-nonWrapped {
+        padding-left: 128px;
+        padding-right: 128px;
+    }
+}
+
+.main-userWidget-dropDownMenu > context-menu-item > li > a.main-contextMenu-menuItemButton {
+    color: rgba(var(--spice-rgb-selected-row), .7);
+    padding-left: 8px;
+    text-decoration: none;
+}
+.main-userWidget-dropDownMenu > context-menu-item > li > a.main-contextMenu-menuItemButton:hover,
+.main-userWidget-dropDownMenu > context-menu-item > li > a.main-contextMenu-menuItemButton:focus {
+    color: var(--spice-text);
+}
+
+.main-userWidget-dropDownMenu svg {
+    position: unset;
+}
+.main-userWidget-dropDownMenu > li svg {
+    position: absolute;
+}
+.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
+    z-index: 4;
 }
\ No newline at end of file