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

fix(Dribbblish): show sidebar icons (#889)

Browse Source
This commit is contained in:
harbassan 2023-02-24 00:22:54 +13:00 committed by GitHub
parent 5d5eca15ae
commit a547f3d28c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Dribbblish/dribbblish.js
View File

@ -36,7 +36,7 @@ function waitForElement(els, func, timeout = 100) {
}
waitForElement([
`ul[tabindex="0"]`,
`ul[tabindex="0"]`,
`ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
@ -51,7 +51,7 @@ waitForElement([
let [_, app, uid ] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = Spicetify.URI.playlistV2URI(uid);
uri = `spotify:playlist:${uid}`;
} else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
let img = link.querySelector("img");
@ -65,7 +65,7 @@ waitForElement([
}
Spicetify.CosmosAsync.get(
`sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`,
`sp://core-playlist/v1/playlist/${uri}/metadata`,
{ policy: { picture: true } }
).then(res => {
const meta = res.metadata;
@ -191,7 +191,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
} else {
tooltip.style.left = String(offsetX - ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
Spicetify.Player.formatTime(Spicetify.Player.getDuration());
}
Spicetify.Player.addEventListener("onprogress", updateProgTime);
@ -214,12 +214,12 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
/** @type {HTMLInputElement} */
const filePickerInput = filePickerForm.childNodes[0];
filePickerInput.accept = [
"image/jpeg",
"image/apng",
"image/avif",
"image/gif",
"image/png",
"image/svg+xml",
"image/jpeg",
"image/apng",
"image/avif",
"image/gif",
"image/png",
"image/svg+xml",
"image/webp"
].join(",");
@ -233,7 +233,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
const id = Spicetify.URI.from(filePickerInput.uri).id;
try {
localStorage.setItem(
"dribbblish:folder-image:" + id,
"dribbblish:folder-image:" + id,
result
);
} catch {

43
Dribbblish/user.css
View File

@ -59,7 +59,7 @@ body {
.lyrics-lyricsContainer-LyricsLine {
font-family: var(--glue-font-family);
letter-spacing: -.03em !important;
letter-spacing: -0.03em !important;
}
.main-rootlist-rootlistDivider {
@ -342,7 +342,7 @@ html:not(.sidebar-hide-text) .main-rootlist-expandArrow {
}
html.sidebar-hide-text .main-rootlist-expandArrow {
right: 4px;
display: none;
}
html.sidebar-hide-text .main-navBar-navBarItem a span,
@ -404,7 +404,7 @@ html.sidebar-hide-text .main-rootlist-statusIcons {
.progress-bar {
--progress-bar-height: 2px;
--fg-color: var(--spice-button);
--bg-color: rgba(var(--spice-rgb-text), .2);
--bg-color: rgba(var(--spice-rgb-text), 0.2);
}
.minimal-player .player-controls__buttons {
@ -488,9 +488,9 @@ img.playlist-picture[src$=".svg"] {
}
.main-rootlist-rootlistItem {
padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width)) !important;
padding-left: calc(var(--indentation) * var(--left-sidebar-item-indentation-width)) !important;
padding-right: 0 !important;
transition: padding-left .5s ease;
transition: padding-left 0.5s ease;
}
html.sidebar-hide-text .main-rootlist-rootlistItem {
@ -540,7 +540,7 @@ li.GlueDropTarget {
padding-top: calc(var(--os-windows-icon-dodge) * 32px);
}
.spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .main-topBar-container {
.spotify__container--is-desktop.spotify__os--is-windows[dir="ltr"] .main-topBar-container {
padding-right: calc(var(--os-windows-icon-dodge) * 135px + 32px);
}
@ -587,7 +587,7 @@ li.GlueDropTarget {
color: var(--spice-text);
background-color: var(--spice-button);
opacity: 0;
transition: opacity,left 0.2s ease;
transition: opacity, left 0.2s ease;
}
.playback-bar:hover .prog-tooltip {
@ -630,7 +630,6 @@ li.GlueDropTarget {
flex-direction: row;
}
.main-playPauseButton-button svg {
width: 32px !important;
height: 32px !important;
@ -687,14 +686,14 @@ li.GlueDropTarget {
padding: var(--main-gap) 0;
}
.spotify__container--is-desktop .Root__top-container--right-sidebar-visible {
.Root__top-container:has(> .main-buddyFeed-container ) {
grid-template-areas:
"top-bar top-bar top-bar"
"nav-bar main-view right-sidebar"
"nav-bar now-playing-bar right-sidebar";
}
.Root__top-container:not(.Root__top-container--right-sidebar-visible) {
.Root__top-container:not(:has(> .main-buddyFeed-container )) {
grid-template-areas:
"top-bar top-bar"
"nav-bar main-view"
@ -777,12 +776,12 @@ html.right-expanded-cover .Root__top-container--right-sidebar-visible .main-cove
.main-dropDown-dropDown,
.x-sortBox-sortDropdown {
background-color: rgba(var(--spice-rgb-selected-row), .1) !important;
background-color: rgba(var(--spice-rgb-selected-row), 0.1) !important;
}
.connect-device-list-item:focus,
.connect-device-list-item:hover {
background-color: rgba(var(--spice-rgb-selected-row), .3);
background-color: rgba(var(--spice-rgb-selected-row), 0.3);
}
.bookmark-filter {
@ -807,7 +806,7 @@ html.right-expanded-cover .Root__top-container--right-sidebar-visible .main-cove
}
.main-userWidget-dropDownMenu > li > button {
color: rgba(var(--spice-rgb-selected-row), .7);
color: rgba(var(--spice-rgb-selected-row), 0.7);
padding-left: 8px;
text-decoration: none;
}
@ -888,8 +887,14 @@ section.contentSpacing {
height: auto !important;
}
/* fix sidebar resizer position (stops from causing scroll) */
.LayoutResizer__resize-bar {
top: 0;
}
/* buddy feed w/ hidden text*/
.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ {
.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ,
.buddyFeed-hide-text .main-buddyFeed-header {
display: none;
}
@ -915,11 +920,17 @@ section.contentSpacing {
}
/* buddy feed heading and icons */
.NdQkQZhcYIEcJnRdAYcQ h1 {
.NdQkQZhcYIEcJnRdAYcQ h1,
.main-buddyFeed-header h1 {
color: var(--spice-sidebar-text);
}
.NdQkQZhcYIEcJnRdAYcQ {
.main-buddyFeed-actions button {
color: var(--spice-sidebar-text)
}
.NdQkQZhcYIEcJnRdAYcQ,
.main-buddyFeed-header {
padding-left: 16px;
}