diff --git a/Dreary/user.css b/Dreary/user.css new file mode 100644 index 0000000..b2113fe --- /dev/null +++ b/Dreary/user.css @@ -0,0 +1,609 @@ +/* Dreary Theme*/ + +.main-rootlist-rootlistDividerGradient { + display: none; + visibility: hidden !important; +} + +.main-rootlist-rootlistDivider { + background-color: var(--spice-text) !important; +} + +input { + background-color: unset !important; + border-bottom: solid 1px var(--spice-text) !important; + border-radius: 0 !important; + padding: 6px 10px 6px 48px; + color: var(--spice-text) !important; +} + +.x-833-searchInput-searchInputSearchIcon { + color: var(--spice-text) !important; +} + +.main-home-homeHeader, +.x-441-entityHeader-overlay, +.main-actionBarBackground-background, +.main-entityHeader-overlay, +.main-entityHeader-backgroundColor { + background-color: unset !important; + background-image: unset !important; +} + +.main-playlistEditDetailsModal-textElement:focus { + border: 0; +} + +.connect-title, +.connect-header { + display: none; +} + +/* Topbar visibility bug */ + +.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn) > * { + opacity: unset !important; +} + +.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn) + > * { + opacity: 0 !important; +} + +/* Remove Topbar background colour */ + +.main-topBar-background { + background-color: unset !important; +} + +.main-topBar-overlay { + background-color: var(--spice-main); +} + +.main-entityHeader-shadow { + box-shadow: 0 04px 20px #21212130; +} + +.main-trackList-playingIcon { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E"); + background: var(--spice-text); + content-visibility: hidden; +} + +span.artist-artistVerifiedBadge-badge svg:nth-child(1) { + fill: black; +} + +/* Hide Banner Ads */ + +.main-leaderboardComponent-container { + display: none; +} + +.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer, +.desktoproutes-homepage-takeover-ad-hptoComponent-container { + display: none !important; +} + +/* Hide Upgrade Button */ + +.main-topBar-UpgradeButton { + display: none; +} + +[aria-label="Playing"] { + color: var(--spice-text); +} + +/* Fix design fault */ + +@media (min-width: 1024px) { + .main-trackList-trackListHeader { + border-bottom: solid 1px; + margin: 10px; + } +} + +.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { + background: var(--spice-main); + border: 0; +} + +.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow { + border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8); +} + +/* Changing Playback Bar Location */ + +.progress-bar__bg, +.progress-bar__fg_wrapper { + border-radius: 0; + z-index: 1; +} + +.playback-bar__progress-time { + display: none; +} + +.playback-bar { + width: 100%; + bottom: 83px; + position: absolute; + left: -1px; + z-index: 1; +} + +.main-playbackBarRemainingTime-container { + position: absolute; + left: 49.68%; + top: 60%; + border: solid 1px; + border-radius: 20px; + z-index: 5; + color: var(--spice-subtext) !important; + padding-left: 5px; +} + +.player-controls__buttons { + transform: translateY(6px); +} + +.main-playPauseButton-button { + background-color: var(--spice-main); + box-shadow: var(--spice-shadow) 0 5px 9px 0px; + --button-size: 50px !important; + color: var(--spice-text); + background-color: var(--spice-player) !important; + cursor: pointer; +} + +.player-controls__buttons { + align-items: center; + position: relative; + left: 2.3%; +} + +.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold { + border: 2px var(--spice-text) solid; + border-radius: 4px; + width: fit-content; + display: inline; + text-align: center; + padding: 0 5px; +} + +.os-theme-spotify.os-host-transition + > .os-scrollbar-vertical + > .os-scrollbar-track + > .os-scrollbar-handle { + border-radius: 4px; + background-color: var(--spice-text); +} + +/* Hide Profile Options in Nav Bar */ + +.main-userWidget-notificationIndicator { + display: none; +} + +.main-avatar-userIcon { + color: white; +} + +.main-userWidget-box { + background-color: var(--spice-sidebar); + text-decoration-line: underline; +} + +/* Improve Sidebar Buttons */ + +.main-likedSongsButton-likedSongsIcon { + background: var(--spice-text); +} + +.main-likedSongsButton-likedSongsIcon { + color: var(--spice-sidebar); +} + +.main-trackList-trackListHeaderRow { + border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8); +} + +.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow { + border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8); +} + +.main-trackList-trackListRow.main-trackList-selected, +.main-trackList-trackListRow.main-trackList-selected:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.8) !important; +} + +.main-trackList-trackListRow:focus-within, +.main-trackList-trackListRow:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.4); +} + +.main-duplicateTracksDialog-container { + background-color: var(--spice-card); + color: var(--spice-subtext); +} + +.main-duplicateTracksDialog-secondaryButton { + color: var(--spice-text); +} + +._9eb5acf729a98d62135ca21777fef244-scss { + color: var(--spice-card); +} + +.x-sortBox-sortDropdown, +.x-filterBox-expandButton { + color: var(--spice-text) !important; +} + +/* Main Play Button Change */ + +.main-playButton-PlayButton.main-playButton-primary { + color: var(--spice-main); + background-color: var(--spice-playback-bar); + cursor: pointer !important; +} + +.main-entityHeader-metaDataText.main-type-mesto:nth-child(2) { + display: none; +} + +.main-entityHeader-image { + border-radius: 10%; +} + +.x-downloadButton-button { + background: var(--spice-player); + border-radius: 50%; +} + +/* Link playback-bar color */ + +.playback-bar .progress-bar__fg { + background-color: var(--spice-playback-bar); +} + +:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg { + background-color: var(--spice-playback-bar); +} + +.main-navBar-navBarLinkActive { + background-color: var(--spice-main); +} + +.main-navBar-navBarLinkActive, +.main-navBar-navBarLinkActive:focus, +.main-navBar-navBarLinkActive:hover, +.logo { + color: var(--spice-text) !important; + background-color: var(--spice-selected-row); +} + +.progress-bar__slider { + opacity: 1 !important; + background-color: var(--spice-sidebar) !important; + height: 16px !important; + border: solid 2px var(--spice-subtext) !important; + width: 16px !important; + display: unset !important; +} + +a.x-categoryCard-CategoryCard, +a.x-heroCategoryCard-HeroCategoryCard { + color: var(--spice-subtext); +} + +.main-heroCard-card a, +.collection-collectionEntityHeroCard-descriptionContainer { + color: var(--spice-subtext) !important; +} + +.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a, +.main-buddyFeed-activityMetadata .main-buddyFeed-username a, +.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink, +p.main-buddyFeed-timestamp.main-type-finale, +.main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon { + color: var(--spice-subtext); +} + +/* Recolor sub-buttons */ + +.main-moreButton-button { + color: var(--spice-sub-button); +} + +.x-downloadButton-button { + color: var(--spice-sub-button) !important; +} + +.x-downloadButton-button:hover { + color: var(--spice-text) !important; +} + +.main-addButton-button { + color: var(--spice-sub-button); +} + +.main-entityHeader-metaDataText { + color: var(--spice-sub-button); +} + +.main-duration-container { + color: var(--spice-sub-button); +} + +.main-tag-container { + background-color: var(--spice-sub-button); +} + +.x-sortBox-sortDropdown { + background-color: var(--spice-selected-row) !important; +} + +.x-filterBox-searchIconContainer { + color: var(--spice-sub-button) !important; +} + +.x-filterBox-expandButton:focus, +.x-filterBox-expandButton:hover { + background-color: var(--spice-selected-row) !important; +} + +.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, +.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { + background-color: var(--spice-selected-row) !important; +} + +.view-homeShortcutsGrid-shortcut { + background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important; +} + +.view-homeShortcutsGrid-shortcut:focus-within, +.view-homeShortcutsGrid-shortcut:hover, +.view-homeShortcutsGrid-shortcut[data-context-menu-open="true"] { + background-color: var(--spice-selected-row) !important; +} + +.main-rootlist-textWrapper.main-type-viola { + cursor: pointer !important; +} + +.main-navBar-navBar { + border-right: 2px solid var(--spice-misc); +} + +.cMigZB * { + color: var(--spice-misc) !important; +} + +.main-trackInfo-name a { + color: var(--spice-misc) !important; +} + +.main-trackInfo-artists a:link { + color: var(--spice-misc) !important; +} + +[class*=" spoticon-"]:before { + color: var(--spice-misc) !important; +} + +.main-connectToFacebook-headerTitle { + color: var(--spice-misc) !important; +} + +.main-repeatButton-button, +.main-skipForwardButton-button, +.main-skipBackButton-button, +.main-shuffleButton-button { + cursor: pointer !important; +} + +#spicetify-playlist-list { + display: inline; + height: 10%; + align-items: center; + box-sizing: border-box; + position: relative; + overflow: hidden; + overflow-y: scroll; +} + +#spicetify-playlist-list > div > div:nth-child(2) > li { + margin: 4px 3.2vw; + width: 84%; + flex-shrink: 0; + padding-top: 10%; + padding-bottom: 10%; + box-sizing: border-box; + position: relative; + margin-bottom: -1px; + border-radius: 10px; + border: 2px solid var(--spice-text); + display: flex; + text-align: center; + flex-direction: column; + transition: all 500ms; +} + +#spicetify-playlist-list > div > div:nth-child(2) > li:hover { + border-color: var(--spice-button); +} + +.main-connectToFacebook-text, +.main-connectToFacebook-disclaimer { + color: unset !important; +} + +.main-type-mesto { + color: var(--spice-button); +} + +.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, +.main-rootlist-rootlistItemLink { + transition: 500ms; +} + +.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, +.main-rootlist-rootlistItemLink:focus { + color: var(--spice-text); +} + +.view-homeShortcutsGrid-shortcut { + background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important; + border: solid 3px var(--spice-text); + border-radius: 10px; + padding-bottom: 80.7px; + transition: 500ms; +} + +.main-card-card .main-card-cardLink { + border: solid 3px; + transition: 500ms; + border-radius: 27px; +} + +.main-card-card { + border-radius: 27px !important; +} + +.view-homeShortcutsGrid-shortcut:hover, +.main-card-card .main-card-cardLink:hover { + border-color: var(--spice-button); +} + +.main-createPlaylistButton-button, +.main-collectionLinkButton-collectionLinkButton { + padding-left: 16px !important; + padding-top: 8px; +} + +.main-trackCreditsModal-closeBtn { + color: var(--spice-button-disabled) !important; +} + +.main-contextMenu-menu { + max-height: 400px; + opacity: 0.9676; +} +.main-trackList-trackList { + border-radius: 30px; + background-color: var(--spice-player); + border: 1px solid; +} +.main-buddyFeed-friendsFeedContainer { + border-left: solid 2px var(--spice-text); +} +.main-yourEpisodesButton-yourEpisodesIcon { + background: var(--spice-text); +} +.main-yourEpisodesButton-yourEpisodesIcon path { + fill: var(--spice-player); + opacity: 0.7; +} +.main-navBar-entryPoints > div:first-of-type { + margin-top: 20px; +} +.cMigZB { + cursor: pointer; +} +.control-button { + color: var(--spice-misc); +} +.main-buddyFeed-buddyFeed { + -webkit-box-shadow: none; + box-shadow: none; +} +.main-buddyFeed-friendActivity { + border-bottom: solid 1px; +} +.collection-collectionEntityHeroCard-likedSongs { + background: linear-gradient( + 149.46deg, + var(--spice-sidebar), + var(--spice-main) 99.16% + ) !important; +} + +.main-repeatButton-button[disabled] { + color: var(--spice-button); +} +.main-shuffleButton-button[disabled] { + color: var(--spice-button); +} +.progress-bar_bg { + z-index: 20; +} +.main-deletePlaylistDialog-secondaryButton { + color: var(--spice-subbutton-text); +} +.main-connectToFacebook-facebookButton { + color: var(--spice-subbutton-text); +} +.div.GlueDropTarget.personal-library > *.active { + background: var(--spice-selected-row); +} +.main-connectBar-connectBar { + overflow: visible !important; + --triangle-position: 147px !important; + align-items: unset !important; + height: 0px !important; + position: absolute !important; + left: 80% !important; + display: flex !important; + bottom: 2% !important; + padding: unset !important; +} +#spicetify-playlist-list > div { + scroll-behavior: smooth; + overflow-y: scroll; + overflow: hidden; + contain: unset !important; + height: fit-content !important; + padding-bottom: 10px; +} +div.main-cardImage-imageWrapper.main-cardImage-roundedCorners + > div + > div + > svg + > path { + color: blue; + background-color: blue; + fill: var(--spice-sidebar); + opacity: 0.7; +} +div.main-cardImage-imageWrapper.main-cardImage-roundedCorners + > div + > div + > svg + > path { + color: blue; + background-color: blue; + fill: var(--spice-sidebar); + opacity: 0.7; +} +.main-yourEpisodes-coverContainer { + background-color: var(--spice-text); +} +.playback-bar__progress-time-elapsed { + visibility: hidden; + width: 0px; + height: 0px; + padding: 0px; + margin: 0px; + position: absolute; +} +.Root__nav-bar { + min-width: 281px !important; +} +.playback-bar__progress-time-elapsed { + display: none !important; +} +#spicetify-playlist-list > div { + height: 100% !important; +} diff --git a/Dribbblish/dribbblish.js b/Dribbblish/dribbblish.js index 8919ca4..b5d059f 100644 --- a/Dribbblish/dribbblish.js +++ b/Dribbblish/dribbblish.js @@ -35,8 +35,8 @@ function waitForElement(els, func, timeout = 100) { } waitForElement([ - `.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, - `.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"] li` + `ul[tabindex="0"]`, + `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders` ], ([root, firstItem]) => { const listElem = firstItem.parentElement; root.classList.add("dribs-playlist-list"); @@ -152,7 +152,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => progBar.append(tooltip); const progKnob = progBar.querySelector(".progress-bar__slider"); - + function updateProgTime({ data: e }) { const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2; const maxWidth = progBar.offsetWidth; diff --git a/Dribbblish/user.css b/Dribbblish/user.css index 33204f8..7ad49e8 100644 --- a/Dribbblish/user.css +++ b/Dribbblish/user.css @@ -1,3 +1,7 @@ +.Root { + padding-top: 30px; +} + :root { --bar-height: 70px; --bar-cover-art-size: 40px; @@ -487,7 +491,7 @@ html.sidebar-hide-text .main-rootlist-statusIcons { border-radius: 4px; display: flex; height: 56px; - padding: 0 12px; + padding: 0 20px; } img.playlist-picture { @@ -504,8 +508,8 @@ img.playlist-picture { } .main-rootlist-rootlistItem { - padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width)); - padding-right: 0; + padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width)) !important; + padding-right: 0 !important; transition: padding-left .5s ease; } diff --git a/Ziro/user.css b/Ziro/user.css index 9782154..fb9857b 100644 --- a/Ziro/user.css +++ b/Ziro/user.css @@ -9,7 +9,7 @@ .main-actionBarBackground-background { display: none; } -.main-topBar-overlay { +.main-topBar-overlay, .main-view-container, .Root__nav-bar{ background-color: var(--spice-main); } .main-topBar-background { @@ -120,13 +120,17 @@ color: var(--spice-subtext); position: absolute; margin-bottom: 30px; - right: 266px; -} -.playback-bar__progress-time-elapsed { right: 308px; } +/* playback-bar progress-time-remaining */ +.npFSJSO1wsu3mEEGb5bh { + color: var(--spice-subtext); + position: absolute; + margin-bottom: 30px; + right: 266px; +} .playback-bar__progress-time-elapsed::after { - content: ' /'; + content: ' / '; } .player-controls__buttons { margin: 0; @@ -253,6 +257,7 @@ } .bqeOGM:hover .ButtonInner-sc-14ud5tc-0, .dkGAhA:hover .ButtonInner-sc-14ud5tc-0, +.jEaMNl:hover .ButtonInner-sc-14ud5tc-0, .fBTYgGyvIbHizHIj7AAX, .main-playPauseButton-button { background-color: var(--spice-button); @@ -365,7 +370,7 @@ /* tracklist */ .main-trackList-trackList .JUa6JJNj7R_Y3i4P8YUX { background: var(--spice-card); - border-radius: var(--br-1); + border-radius: 10px 10px 0px 0px; padding: 8px; } .main-trackList-trackListHeaderRow { @@ -504,3 +509,11 @@ input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator { .XmR5VFpqXOcxRvhuf6OB { border-radius: var(--br-1); } + +.main-rootlist-rootlistDividerContainer { + display: none; +} + +.n87ifzfQlmGX8vkeYGDL { + display: none; +}