fix(dribbblish): update whole theme (#874)

Dribbblish/dribbblish.js

@@ -12,6 +12,7 @@ const DribbblishShared = {
     }
 };
 
+// register drib menu item
 DribbblishShared.configMenu.register();
 DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
     "Right expanded cover",
@@ -34,13 +35,6 @@ function waitForElement(els, func, timeout = 100) {
     }
 }
 
-// Avoid clipping playlists at the bottom of scroll node
-waitForElement([".main-rootlist-wrapper"], () => {
-    const mainRootlist = document.querySelector(".main-rootlist-wrapper");
-    const playListItems = document.getElementsByClassName("main-rootlist-rootlistItemLink")
-    mainRootlist.style.height = `${playListItems.length * 56}px`;
-});
-
 waitForElement([
     `ul[tabindex="0"]`,
     `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
@@ -72,7 +66,7 @@ waitForElement([
 
             Spicetify.CosmosAsync.get(
                 `sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`,
-                { policy: { picture: true } }
+            { policy: { picture: true } }
             ).then(res => {
                 const meta = res.metadata;
                 let img = link.querySelector("img");
@@ -99,12 +93,7 @@ waitForElement([".Root__top-container"], ([topContainer]) => {
     topContainer.prepend(shadow);
 });
 
-waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
+// allow resizing of the navbar
-    const fade = document.createElement("div");
-    fade.id = "dribbblish-sidebar-fade-in";
-    queries[0].append(fade);
-});
-
 waitForElement([
     ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
 ], ([resizer]) => {
@@ -124,6 +113,37 @@ waitForElement([
     updateVariable();
 });
 
+// allow resizing of the buddy feed
+waitForElement([".Root__right-sidebar .LayoutResizer__input, .Root__right-sidebar .LayoutResizer__resize-bar input"], ([resizer]) => {
+    const observer = new MutationObserver(updateVariable);
+    observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
+    function updateVariable() {
+        let value = resizer.value;
+        if (value == 320) {
+            value = 72;
+            document.documentElement.classList.add("buddyFeed-hide-text");
+        } else {
+            document.documentElement.classList.remove("buddyFeed-hide-text");
+        }
+    }
+    updateVariable();
+});
+
+// add fade effect on playlist/folder list
+waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
+    scrollNode.setAttribute("fade", "bottom");
+    scrollNode.addEventListener("scroll", () => {
+        if (scrollNode.scrollTop == 0) {
+            scrollNode.setAttribute("fade", "bottom");
+        } else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) {
+            scrollNode.setAttribute("fade", "top");
+        } else {
+            scrollNode.setAttribute("fade", "full");
+        }
+    });
+});
+
+// improve styles at smaller sizes
 waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
     const observer = new ResizeObserver(updateVariable);
     observer.observe(resizeHost);
@@ -144,6 +164,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
 });
 
 (function Dribbblish() {
+    // dynamic playback time tooltip
     const progBar = document.querySelector(".playback-bar");
     const root = document.querySelector(".Root");
 
@@ -185,6 +206,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
         }
     });
 
+    // filepicker for custom folder images
     const filePickerForm = document.createElement("form");
     filePickerForm.setAttribute("aria-hidden", true);
     filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
@@ -222,6 +244,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
         reader.readAsDataURL(file);
     }
 
+    // context menu items for custom folder images
     new Spicetify.ContextMenu.Item("Remove folder image",
         ([uri]) => {
             const id = Spicetify.URI.from(uri).id;

Dribbblish/user.css

@@ -1,7 +1,3 @@
-.Root {
-  padding-top: 30px;
-}
-
 :root {
     --bar-height: 70px;
     --bar-cover-art-size: 40px;
@@ -12,6 +8,10 @@
     --os-windows-icon-dodge: 0;
 }
 
+html.buddyFeed-hide-text {
+    --panel-width: 72px !important;
+}
+
 @font-face {
     font-family: "Google Sans Display";
     src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
@@ -41,21 +41,14 @@
 }
 
 body {
-    --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
+    --glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial,
-    --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
+        Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
+    --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo,
+        MS Gothic, sans-serif;
     font-family: var(--glue-font-family);
     letter-spacing: normal;
 }
 
-.main-type-mesto,
-.main-type-mestoBold,
-.main-type-ballad,
-.main-type-balladBold,
-.main-type-canon {
-    font-family: var(--info-font-family);
-    letter-spacing: normal;
-}
-
 .main-type-bass {
     font-family: var(--glue-font-family);
 }
@@ -91,17 +84,13 @@ input {
 .x-actionBarBackground-background,
 .main-actionBarBackground-background,
 .main-entityHeader-overlay,
-.main-entityHeader-backgroundColor
+.main-entityHeader-backgroundColor {
-{
     background-color: unset !important;
     background-image: unset !important;
 }
 
-.main-playButton-PlayButton.main-playButton-primary {
+.connect-title,
-    color: white;
+.connect-header {
-}
-
-.connect-title, .connect-header {
     display: none;
 }
 
@@ -153,10 +142,6 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
     padding-left: 9%;
 }
 
-.main-entityHeader-background.main-entityHeader-overlay:after {
-    background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main));
-}
-
 .artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
     font-size: 120px !important;
     line-height: 120px !important;
@@ -184,8 +169,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .main-playPauseButton-button {
-    background-color: var(--spice-button);
+    background-color: transparent !important;
-    color: white;
 }
 
 /** Queue page header */
@@ -213,7 +197,8 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
     -webkit-box-shadow: unset;
 }
 
-.main-cardImage-imagePlaceholder, .main-cardImage-image {
+.main-cardImage-imagePlaceholder,
+.main-cardImage-image {
     border-radius: var(--cover-border-radius);
 }
 
@@ -239,7 +224,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
     overflow: hidden;
 }
 
-.main-buddyFeed-buddyFeed {
+.main-buddyFeed-friendsFeedContainer {
     box-shadow: unset;
     -webkit-box-shadow: unset;
     z-index: 0;
@@ -260,12 +245,6 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
     color: rgba(var(--spice-rgb-sidebar-text), 0.8);
 }
 
-.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
-.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay {
-    width: 32px !important;
-    height: 32px !important;
-}
-
 .main-avatar-avatar.main-avatar-withBadge:after {
     box-shadow: 0 0 0 2px var(--spice-sidebar);
     background-color: var(--spice-notification);
@@ -298,17 +277,18 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
     width: var(--sidebar-width) !important;
 }
 
-.main-buddyFeed-buddyFeedRoot {
+.spotify__os--is-windows .Root__nav-bar,
-    height: 100%;
+.spotify__os--is-windows .main-buddyFeed-friendsFeedContainer {
+    padding-top: 15px;
 }
 
-.main-buddyFeed-buddyFeedRoot .os-content {
+.main-buddyFeed-friendsFeedContainer .os-content {
     padding-top: 0 !important;
 }
 
 html,
 .Root__nav-bar,
-.main-buddyFeed-buddyFeed {
+.main-buddyFeed-friendsFeedContainer {
     background-color: var(--spice-sidebar) !important;
 }
 
@@ -322,17 +302,13 @@ html {
 .main-rootlist-rootlistItemLink:visited,
 .main-rootlist-rootlistContent span,
 .main-navBar-entryPoints span {
-    color: var(--spice-sidebar-text)
+    color: var(--spice-sidebar-text);
 }
 
 .main-navBar-navBarItem {
     padding: 0 8px;
 }
 
-#spicetify-show-list >* {
-    padding: 0 8px;
-}
-
 .main-rootlist-statusIcons {
     color: var(--spice-sidebar-text);
     padding-right: 16px;
@@ -349,9 +325,6 @@ html {
     width: 16px;
     height: 16px;
     color: var(--spice-sidebar-text) !important;
-    background-color: var(--spice-button);
-    border-radius: 50%;
-    box-shadow: 0 0 0 2px var(--spice-sidebar);
     opacity: 0;
 }
 
@@ -384,11 +357,11 @@ html.sidebar-hide-text .main-rootlist-statusIcons {
 }
 
 .Root__nav-bar .os-scrollbar-vertical,
-.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical {
+.main-buddyFeed-friendsFeedContainer .os-scrollbar-vertical,
+.main-buddyFeed-friendsFeedContainer .os-scrollbar-horizontal {
     display: none;
 }
 
-/** */
 .main-topBar-historyButtons .main-topBar-button {
     background-color: unset;
     width: 24px;
@@ -413,7 +386,8 @@ html.sidebar-hide-text .main-rootlist-statusIcons {
     bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
 }
 
-.Root.is-connectBarVisible .playback-bar {
+/* when connect bar is visible */
+.main-nowPlayingBar-nowPlayingBar:nth-last-child(2) .playback-bar {
     bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
 }
 
@@ -540,6 +514,7 @@ html.sidebar-hide-text .main-rootlist-rootlistItem {
 .main-navBar-navBarItem .search-icon {
     flex: 0 0 auto;
     margin-right: 8px;
+    color: var(--spice-sidebar-text);
 }
 
 .main-collectionLinkButton-icon,
@@ -591,7 +566,6 @@ li.GlueDropTarget {
 }
 .dribs-playlist-list {
     padding: 0px 8px;
-    padding-bottom: 56px;
 }
 #dribbblish-back-shadow {
     z-index: 2;
@@ -656,9 +630,6 @@ li.GlueDropTarget {
     flex-direction: row;
 }
 
-.main-playPauseButton-button {
-    background-color: transparent;
-}
 
 .main-playPauseButton-button svg {
     width: 32px !important;
@@ -716,14 +687,14 @@ li.GlueDropTarget {
     padding: var(--main-gap) 0;
 }
 
-.spotify__container--is-desktop.buddyfeed-visible .Root__top-container {
+.spotify__container--is-desktop .Root__top-container--right-sidebar-visible {
     grid-template-areas:
         "top-bar top-bar top-bar"
-        "nav-bar main-view buddy-feed"
+        "nav-bar main-view right-sidebar"
-        "nav-bar now-playing-bar buddy-feed";
+        "nav-bar now-playing-bar right-sidebar";
 }
 
-html:not(.buddyfeed-visible) .Root__top-container {
+.Root__top-container:not(.Root__top-container--right-sidebar-visible) {
     grid-template-areas:
         "top-bar top-bar"
         "nav-bar main-view"
@@ -738,51 +709,6 @@ span.main-userWidget-displayName,
     display: none;
 }
 
-/** Sidebar config */
-#dribs-hidden-list {
-    background-color: rgba(var(--spice-rgb-main), .3);
-}
-
-#dribs-sidebar-config {
-    position: relative;
-    width: 100%;
-    height: 0;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    top: -30px;
-    left: 0;
-}
-
-#dribs-sidebar-config button {
-    min-width: 60px;
-    border-radius: 3px;
-    background-color: var(--spice-main);
-    color: var(--spice-text);
-    border: 1px solid var(--spice-text);
-}
-#dribs-sidebar-config button:disabled {
-    color: var(--spice-button-disabled);
-}
-
-.main-navBar-entryPoints {
-    --left-sidebar-padding-left: 24px;
-    --left-sidebar-padding-right: 24px;
-}
-
-div.GlueDropTarget.personal-library  {
-    padding: 0 8px;
-}
-div.GlueDropTarget.personal-library >* {
-    padding: 0 16px;
-    height: 56px;
-    border-radius: 4px;
-}
-
-div.GlueDropTarget.personal-library >*.active {
-    background: var(--spice-button);
-}
-
 /** Big cover, small cover */
 .main-coverSlotExpanded-container {
     position: fixed;
@@ -802,8 +728,8 @@ html.right-expanded-cover .main-coverSlotExpanded-container {
     left: unset;
 }
 
-html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
+html.right-expanded-cover .Root__top-container--right-sidebar-visible .main-coverSlotExpanded-container {
-    right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px);
+    right: calc(var(--main-gap) + var(--panel-width) + 10px);
     left: unset;
 }
 
@@ -896,9 +822,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 .main-userWidget-dropDownMenu > li svg {
     position: absolute;
 }
-.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
-    z-index: 4;
-}
 .main-view-container {
     min-height: 90vh !important;
 }
@@ -907,3 +830,189 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
         min-height: 85vh !important;
     }
 }
+
+/* player control buttons */
+button.main-shuffleButton-button {
+    position: absolute;
+    left: 200px;
+}
+
+.player-controls__buttons {
+    position: relative;
+}
+
+button.main-skipForwardButton-button,
+button.main-repeatButton-button,
+button.main-skipBackButton-button,
+button.main-shuffleButton-button {
+    color: var(--spice-text);
+}
+
+.player-controls__left,
+.player-controls__right {
+    gap: 16px;
+}
+
+.control-button {
+    color: var(--spice-text);
+}
+
+.main-genericButton-button {
+    color: var(--spice-text);
+}
+
+/* increase spacing b/w history buttons */
+.main-topBar-historyButtons {
+    gap: 15px;
+}
+
+/* add top spacing to all */
+section.contentSpacing {
+    margin-top: 40px;
+}
+
+/* add fade to sidebar playlist list */
+.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] {
+    -webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
+}
+.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] {
+    -webkit-mask-image: linear-gradient(transparent 0%, black 10%);
+}
+.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
+    -webkit-mask-image: linear-gradient(black 90%, transparent 100%);
+}
+
+/* fix sidebar playlist section */
+.main-navBar-navBar .main-rootlist-wrapper {
+    contain: layout;
+    height: auto !important;
+}
+
+/* buddy feed w/ hidden text*/
+.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ {
+    display: none;
+}
+
+.buddyFeed-hide-text .main-buddyFeed-friendActivity {
+    padding: 0 0 0 4px;
+}
+
+.buddyFeed-hide-text .main-avatar-avatar > div > div > div {
+    display: flex;
+    justify-content: center;
+    padding-top: 7px;
+}
+
+.buddyFeed-hide-text .main-avatar-avatar,
+.buddyFeed-hide-text .main-avatar-avatar div,
+.buddyFeed-hide-text .main-buddyFeed-overlay {
+    width: 32px !important;
+    height: 32px !important;
+}
+
+/* buddy feed heading and icons  */
+.NdQkQZhcYIEcJnRdAYcQ h1 {
+    color: var(--spice-sidebar-text);
+}
+
+.NdQkQZhcYIEcJnRdAYcQ {
+    padding-left: 16px;
+}
+
+.spotify__os--is-windows .zuwPpHAEtIqahnB2u9NR {
+    margin-top: 16px;
+}
+
+span.YEaaNScT6lyJCVBeQoxd button {
+    color: var(--spice-sidebar-text);
+}
+
+.main-avatar-avatar.BzunmwrVMyWGpopPJRt2::after {
+    background: var(--spice-sidebar-text);
+}
+
+/* fix marketplace heading alignment */
+.marketplace-header {
+    flex-direction: row !important;
+}
+
+.marketplace-header__left {
+    position: initial !important;
+}
+
+/* liked songs sidebar icon */
+a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected.active {
+    background: var(--spice-button);
+}
+
+.main-collectionLinkButton-collectionLinkButton {
+    height: 56px !important;
+}
+
+.GlueDropTarget.GlueDropTarget--tracks.personal-library {
+    height: 56px;
+}
+
+.main-collectionLinkButton-collectionLinkText {
+    padding-left: 8px;
+}
+
+/* topbar play button */
+.main-topBar-topbarContent .main-playButton-PlayButton > button > span {
+    inline-size: 32px;
+    block-size: 32px;
+    min-block-size: auto;
+}
+.main-topBar-topbarContent .main-playButton-PlayButton svg {
+    width: 18px;
+    height: 18px;
+}
+.main-topBar-topbarContent .main-playButton-PlayButton > button > span > span {
+    position: initial;
+    height: 18px;
+}
+
+/* keep progress knob on page : important for js to work */
+.progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr) .progress-bar__slider {
+    display: block;
+    visibility: hidden;
+}
+
+/* progress bar moves smoothly */
+.x-progressBar-fillColor {
+    transition: transform 1s linear;
+}
+
+.progress-bar__slider {
+    transition: left 1s linear;
+}
+
+.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor,
+.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider {
+    transition: none;
+}
+
+/* marketplace page  */
+.marketplace-header__left h1,
+.marketplace-card-type-heading {
+    font-family: var(--font-family, CircularSpTitle, CircularSpTitle-Tall, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif));
+}
+
+[dir="ltr"] .collection-collection-tabBar {
+    padding-left: 0;
+}
+
+.marketplace-tabBar,
+.main-topBar-topbarContent {
+    padding-left: 16px;
+}
+
+/* playbutton color */
+.main-playButton-PlayButton > button > span {
+    color: var(--spice-text);
+}
+
+/* lyrics background  */
+.lyrics-lyrics-background {
+    background-color: var(--spice-main);
+}