admin/Cozytile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Evergreen Spicetify Theme

Browse Source
This commit is contained in:
Darkkal44
2023-05-07 22:12:16 +05:30
parent c1194e2222
commit cb628fa854
15 changed files with 420 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Themes/Everforest/.config/spicetify/Extensions/adblock/README.md
+44
View File
@@ -0,0 +1,44 @@
# Adblock
[Spicetify](https://github.com/khanhas/spicetify-cli) extension to block all audio ads and UI ads
* Simply run the extension and it will work!
## Install
Copy `adblock.js` into your [Spicetify](https://github.com/khanhas/spicetify-cli) extensions directory:
| **Platform** | **Path** |
|------------|-----------------------------------------------------------------------------------|
| **Linux** | `~/.config/spicetify/Extensions` or `$XDG_CONFIG_HOME/.config/spicetify/Extensions/` |
| **MacOS** | `~/spicetify_data/Extensions` or `$SPICETIFY_CONFIG/Extensions` |
| **Windows** | `%appdata%\spicetify\Extensions\` |
After putting the extension file into the correct folder, run the following command to install the extension or install through marketplace:
```
spicetify config extensions adblock.js
spicetify apply
```
Note: Using the `config` command to add the extension will always append the file name to the existing extensions list. It does not replace the whole key's value.
Or you can manually edit your `config-xpui.ini` file. Add your desired extension filenames in the extensions key, separated them by the | character.
Example:
```ini
[AdditionalOptions]
...
extensions = autoSkipExplicit.js|shuffle+.js|trashbin.js|adblock.js
```
Then run:
```
spicetify apply
```
## Usage
Toggle in the Profile menu.
![Screenshot](https://raw.githubusercontent.com/CharlieS1103/spicetify-extensions/main/adblock/adblock.png)
## More
🌟 Like it? Gimme some love!
[![Github Stars badge](https://img.shields.io/github/stars/CharlieS1103/spicetify-extensions?logo=github&style=social)](https://github.com/CharlieS1103/spicetify-extensions/)
If you find any bugs, please [create a new issue](https://github.com/CharlieS1103/spicetify-extensions/issues/new/choose) on the GitHub repo.
![https://github.com/CharlieS1103/spicetify-extensions/issues](https://img.shields.io/github/issues/CharlieS1103/spicetify-extensions?logo=github)
Themes/Everforest/.config/spicetify/Extensions/adblock.js → Themes/Everforest/.config/spicetify/Extensions/adblock/adblock.js
Executable → Regular
+18 -10
View File
@@ -7,17 +7,17 @@
/// <reference path="../../spicetify-cli/globals.d.ts" />
(function adblock() {
const { Platform} = Spicetify;
const { Platform } = Spicetify;
if (!(Platform)) {
setTimeout(adblock, 300)
return
}
var styleSheet = document.createElement("style")
styleSheet.innerHTML =
`
.MnW5SczTcbdFHxLZ_Z8j, .WiPggcPDzbwGxoxwLWFf, .ReyA3uE3K7oEz7PTTnAn, .main-leaderboardComponent-container, .sponsor-container, a.link-subtle.main-navBar-navBarLink.GKnnhbExo0U9l7Jz2rdc{
`
.MnW5SczTcbdFHxLZ_Z8j, .WiPggcPDzbwGxoxwLWFf, .ReyA3uE3K7oEz7PTTnAn, .main-leaderboardComponent-container, .sponsor-container, a.link-subtle.main-navBar-navBarLink.GKnnhbExo0U9l7Jz2rdc, button[title="Upgrade to Premium"], button[aria-label="Upgrade to Premium"], .main-contextMenu-menuItem a[href^="https://www.spotify.com/premium/"] {
display: none !important;
}
`
@@ -29,7 +29,6 @@
// hook before call
var ret = billboard.apply(this, arguments);
// hook after call
console.log("Adblock.js: Billboard blocked! Leave a star!")
Spicetify.Platform.AdManagers.billboard.finish()
const observer = new MutationObserver((mutations, obs) => {
const billboardAd = document.getElementById('view-billboard-ad');
@@ -51,9 +50,18 @@
Spicetify.Platform.AdManagers.audio.audioApi.cosmosConnector.increaseStreamTime(-100000000000)
Spicetify.Platform.AdManagers.billboard.billboardApi.cosmosConnector.increaseStreamTime(-100000000000)
}
setInterval(delayAds, 720 *10000);
})()
setInterval(delayAds, 720 * 10000);
(async function disableEsperantoAds() {
if (!Spicetify.Platform?.UserAPI?._product_state) {
setTimeout(disableEsperantoAds, 300);
return;
}
await Spicetify.Platform.UserAPI._product_state.putValues({pairs: { ads: 0 }});
Spicetify.Platform.UserAPI._product_state.subValues({ keys: ["ads"] }, ({ pairs }) => {
if (pairs.ads !== "0") {
Spicetify.Platform.UserAPI._product_state.putValues({ pairs: { ads: "0" }});
}
});
})();
})()
Themes/Everforest/.config/spicetify/Extensions/adblock/adblock.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

Themes/Everforest/.config/spicetify/Themes/Dribbblish/EverForest(base).png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

Themes/Everforest/.config/spicetify/Themes/Dribbblish/README.md
Executable → Regular
+4 -12
View File
@@ -57,11 +57,8 @@ Run these commands:
In **Bash**:
```bash
cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish"
mkdir -p ../../Extensions
cp dribbblish.js ../../Extensions/.
spicetify config extensions dribbblish.js
spicetify config current_theme Dribbblish color_scheme base
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
spicetify apply
```
@@ -69,10 +66,8 @@ spicetify apply
In **Powershell**:
```powershell
cd "$(spicetify -c | Split-Path)\Themes\Dribbblish"
Copy-Item dribbblish.js ..\..\Extensions
spicetify config extensions dribbblish.js
spicetify config current_theme Dribbblish color_scheme base
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
spicetify apply
```
@@ -97,12 +92,9 @@ Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/
```
## Manual uninstall
Remove the dribbblish script with the following commands
Remove the dribbblish theme with the following commands
```
spicetify config extensions dribbblish.js-
```
And remove Patch lines you added in config file earlier. Finally, run:
```
spicetify config current_theme " " color_scheme " "
spicetify apply
```
Themes/Everforest/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayMedium.woff2
Executable → Regular
View File
Themes/Everforest/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayRegular.woff2
Executable → Regular
View File
Themes/Everforest/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/Roboto.woff2
Executable → Regular
View File
Themes/Everforest/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/RobotoMedium.woff2
Executable → Regular
View File
Themes/Everforest/.config/spicetify/Themes/Dribbblish/color.ini
Executable → Regular
+3 -2
View File
@@ -18,7 +18,8 @@ misc = BFBFBF
progress-fg = CAA9E0
progress-bg = 91B1F0
[white]
[...]
text = 363636
subtext = 3D3D3D
sidebar-text = FFF9F4
@@ -193,7 +194,7 @@ selected-row = 797979
button = 31748f
button-active = 31748f
button-disabled = 555169
tab-active = ebbcba
tab-active = 31748f
notification = 1db954
notification-error = eb6f92
misc = 6e6a86
Themes/Everforest/.config/spicetify/Themes/Dribbblish/dribbblish.js
-266
View File
@@ -1,266 +0,0 @@
// Hide popover message
// document.getElementById("popover-container").style.height = 0;
const DribbblishShared = {
configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
setRightBigCover: () => {
if (DribbblishShared.rightBigCover) {
document.documentElement.classList.add("right-expanded-cover");
} else {
document.documentElement.classList.remove("right-expanded-cover");
}
}
};
// register drib menu item
DribbblishShared.configMenu.register();
DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
"Right expanded cover",
DribbblishShared.rightBigCover,
(self) => {
self.isEnabled = !self.isEnabled;
DribbblishShared.rightBigCover = self.isEnabled;
localStorage.setItem("dribs-right-big-cover", self.isEnabled);
DribbblishShared.setRightBigCover();
}
));
DribbblishShared.setRightBigCover();
function waitForElement(els, func, timeout = 100) {
const queries = els.map(el => document.querySelector(el));
if (queries.every(a => a)) {
func(queries);
} else if (timeout > 0) {
setTimeout(waitForElement, 300, els, func, --timeout);
}
}
waitForElement([
`ul[tabindex="0"]`,
`ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
root.classList.add("dribs-playlist-list");
/** Replace Playlist name with their pictures */
function loadPlaylistImage() {
for (const item of listElem.children) {
let link = item.querySelector("a");
if (!link) continue;
let [_, app, uid ] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = `spotify:playlist:${uid}`;
} else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
continue;
}
Spicetify.CosmosAsync.get(
`sp://core-playlist/v1/playlist/${uri}/metadata`,
{ policy: { picture: true } }
).then(res => {
const meta = res.metadata;
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
});
}
}
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage();
new MutationObserver(loadPlaylistImage)
.observe(listElem, {childList: true});
});
waitForElement([".Root__top-container"], ([topContainer]) => {
const shadow = document.createElement("div");
shadow.id = "dribbblish-back-shadow";
topContainer.prepend(shadow);
});
// allow resizing of the navbar
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() {
let value = resizer.value;
if (value < 121) {
value = 72;
document.documentElement.classList.add("sidebar-hide-text");
} else {
document.documentElement.classList.remove("sidebar-hide-text");
}
document.documentElement.style.setProperty(
"--sidebar-width", value + "px");
}
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);
function updateVariable([ event ]) {
document.documentElement.style.setProperty(
"--main-view-width", event.contentRect.width + "px");
if (event.contentRect.width < 700) {
document.documentElement.classList.add("minimal-player");
} else {
document.documentElement.classList.remove("minimal-player");
}
if (event.contentRect.width < 550) {
document.documentElement.classList.add("extra-minimal-player");
} else {
document.documentElement.classList.remove("extra-minimal-player");
}
}
});
(function Dribbblish() {
// dynamic playback time tooltip
const progBar = document.querySelector(".playback-bar");
const root = document.querySelector(".Root");
if (!Spicetify.Player.origin || !progBar || !root) {
setTimeout(Dribbblish, 300);
return;
}
const tooltip = document.createElement("div");
tooltip.className = "prog-tooltip";
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;
const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
const ttWidth = tooltip.offsetWidth / 2;
if (curWidth < ttWidth) {
tooltip.style.left = String(offsetX) + "px";
} else if (curWidth > maxWidth - ttWidth) {
tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
} else {
tooltip.style.left = String(offsetX - ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
Spicetify.Player.formatTime(Spicetify.Player.getDuration());
}
Spicetify.Player.addEventListener("onprogress", updateProgTime);
updateProgTime({ data: Spicetify.Player.getProgress() });
Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
const isExternal = state.devices.some(a => a.is_active);
if (isExternal) {
root.classList.add("is-connectBarVisible");
} else {
root.classList.remove("is-connectBarVisible");
}
});
// filepicker for custom folder images
const filePickerForm = document.createElement("form");
filePickerForm.setAttribute("aria-hidden", true);
filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
document.body.appendChild(filePickerForm);
/** @type {HTMLInputElement} */
const filePickerInput = filePickerForm.childNodes[0];
filePickerInput.accept = [
"image/jpeg",
"image/apng",
"image/avif",
"image/gif",
"image/png",
"image/svg+xml",
"image/webp"
].join(",");
filePickerInput.onchange = () => {
if (!filePickerInput.files.length) return;
const file = filePickerInput.files[0];
const reader = new FileReader;
reader.onload = (event) => {
const result = event.target.result;
const id = Spicetify.URI.from(filePickerInput.uri).id;
try {
localStorage.setItem(
"dribbblish:folder-image:" + id,
result
);
} catch {
Spicetify.showNotification("File too large");
}
DribbblishShared.loadPlaylistImage?.call();
}
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;
localStorage.removeItem("dribbblish:folder-image:" + id);
DribbblishShared.loadPlaylistImage?.call();
},
([uri]) => Spicetify.URI.isFolder(uri),
"x",
).register();
new Spicetify.ContextMenu.Item("Choose folder image",
([uri]) => {
filePickerInput.uri = uri;
filePickerForm.reset();
filePickerInput.click();
},
([uri]) => Spicetify.URI.isFolder(uri),
"edit",
).register();
})();
Themes/Everforest/.config/spicetify/Themes/Dribbblish/images/tracklist-row-song-fallback.svg
Executable → Regular
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 686 B

After

Width:  |  Height:  |  Size: 686 B

Themes/Everforest/.config/spicetify/Extensions/dribbblish.js → Themes/Everforest/.config/spicetify/Themes/Dribbblish/theme.js
Executable → Regular
+266 -266
View File
@@ -1,266 +1,266 @@
// Hide popover message
// document.getElementById("popover-container").style.height = 0;
const DribbblishShared = {
configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
setRightBigCover: () => {
if (DribbblishShared.rightBigCover) {
document.documentElement.classList.add("right-expanded-cover");
} else {
document.documentElement.classList.remove("right-expanded-cover");
}
}
};
// register drib menu item
DribbblishShared.configMenu.register();
DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
"Right expanded cover",
DribbblishShared.rightBigCover,
(self) => {
self.isEnabled = !self.isEnabled;
DribbblishShared.rightBigCover = self.isEnabled;
localStorage.setItem("dribs-right-big-cover", self.isEnabled);
DribbblishShared.setRightBigCover();
}
));
DribbblishShared.setRightBigCover();
function waitForElement(els, func, timeout = 100) {
const queries = els.map(el => document.querySelector(el));
if (queries.every(a => a)) {
func(queries);
} else if (timeout > 0) {
setTimeout(waitForElement, 300, els, func, --timeout);
}
}
waitForElement([
`ul[tabindex="0"]`,
`ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
root.classList.add("dribs-playlist-list");
/** Replace Playlist name with their pictures */
function loadPlaylistImage() {
for (const item of listElem.children) {
let link = item.querySelector("a");
if (!link) continue;
let [_, app, uid ] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = `spotify:playlist:${uid}`;
} else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
continue;
}
Spicetify.CosmosAsync.get(
`sp://core-playlist/v1/playlist/${uri}/metadata`,
{ policy: { picture: true } }
).then(res => {
const meta = res.metadata;
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
});
}
}
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage();
new MutationObserver(loadPlaylistImage)
.observe(listElem, {childList: true});
});
waitForElement([".Root__top-container"], ([topContainer]) => {
const shadow = document.createElement("div");
shadow.id = "dribbblish-back-shadow";
topContainer.prepend(shadow);
});
// allow resizing of the navbar
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() {
let value = resizer.value;
if (value < 121) {
value = 72;
document.documentElement.classList.add("sidebar-hide-text");
} else {
document.documentElement.classList.remove("sidebar-hide-text");
}
document.documentElement.style.setProperty(
"--sidebar-width", value + "px");
}
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);
function updateVariable([ event ]) {
document.documentElement.style.setProperty(
"--main-view-width", event.contentRect.width + "px");
if (event.contentRect.width < 700) {
document.documentElement.classList.add("minimal-player");
} else {
document.documentElement.classList.remove("minimal-player");
}
if (event.contentRect.width < 550) {
document.documentElement.classList.add("extra-minimal-player");
} else {
document.documentElement.classList.remove("extra-minimal-player");
}
}
});
(function Dribbblish() {
// dynamic playback time tooltip
const progBar = document.querySelector(".playback-bar");
const root = document.querySelector(".Root");
if (!Spicetify.Player.origin || !progBar || !root) {
setTimeout(Dribbblish, 300);
return;
}
const tooltip = document.createElement("div");
tooltip.className = "prog-tooltip";
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;
const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
const ttWidth = tooltip.offsetWidth / 2;
if (curWidth < ttWidth) {
tooltip.style.left = String(offsetX) + "px";
} else if (curWidth > maxWidth - ttWidth) {
tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
} else {
tooltip.style.left = String(offsetX - ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
Spicetify.Player.formatTime(Spicetify.Player.getDuration());
}
Spicetify.Player.addEventListener("onprogress", updateProgTime);
updateProgTime({ data: Spicetify.Player.getProgress() });
Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
const isExternal = state.devices.some(a => a.is_active);
if (isExternal) {
root.classList.add("is-connectBarVisible");
} else {
root.classList.remove("is-connectBarVisible");
}
});
// filepicker for custom folder images
const filePickerForm = document.createElement("form");
filePickerForm.setAttribute("aria-hidden", true);
filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
document.body.appendChild(filePickerForm);
/** @type {HTMLInputElement} */
const filePickerInput = filePickerForm.childNodes[0];
filePickerInput.accept = [
"image/jpeg",
"image/apng",
"image/avif",
"image/gif",
"image/png",
"image/svg+xml",
"image/webp"
].join(",");
filePickerInput.onchange = () => {
if (!filePickerInput.files.length) return;
const file = filePickerInput.files[0];
const reader = new FileReader;
reader.onload = (event) => {
const result = event.target.result;
const id = Spicetify.URI.from(filePickerInput.uri).id;
try {
localStorage.setItem(
"dribbblish:folder-image:" + id,
result
);
} catch {
Spicetify.showNotification("File too large");
}
DribbblishShared.loadPlaylistImage?.call();
}
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;
localStorage.removeItem("dribbblish:folder-image:" + id);
DribbblishShared.loadPlaylistImage?.call();
},
([uri]) => Spicetify.URI.isFolder(uri),
"x",
).register();
new Spicetify.ContextMenu.Item("Choose folder image",
([uri]) => {
filePickerInput.uri = uri;
filePickerForm.reset();
filePickerInput.click();
},
([uri]) => Spicetify.URI.isFolder(uri),
"edit",
).register();
})();
// Hide popover message
// document.getElementById("popover-container").style.height = 0;
const DribbblishShared = {
configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
setRightBigCover: () => {
if (DribbblishShared.rightBigCover) {
document.documentElement.classList.add("right-expanded-cover");
} else {
document.documentElement.classList.remove("right-expanded-cover");
}
}
};
// register drib menu item
DribbblishShared.configMenu.register();
DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
"Right expanded cover",
DribbblishShared.rightBigCover,
(self) => {
self.isEnabled = !self.isEnabled;
DribbblishShared.rightBigCover = self.isEnabled;
localStorage.setItem("dribs-right-big-cover", self.isEnabled);
DribbblishShared.setRightBigCover();
}
));
DribbblishShared.setRightBigCover();
function waitForElement(els, func, timeout = 100) {
const queries = els.map(el => document.querySelector(el));
if (queries.every(a => a)) {
func(queries);
} else if (timeout > 0) {
setTimeout(waitForElement, 300, els, func, --timeout);
}
}
waitForElement([
`ul[tabindex="0"]`,
`ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
root.classList.add("dribs-playlist-list");
/** Replace Playlist name with their pictures */
function loadPlaylistImage() {
for (const item of listElem.children) {
let link = item.querySelector("a");
if (!link) continue;
let [_, app, uid ] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = `spotify:playlist:${uid}`;
} else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
continue;
}
Spicetify.CosmosAsync.get(
`sp://core-playlist/v1/playlist/${uri}/metadata`,
{ policy: { picture: true } }
).then(res => {
const meta = res.metadata;
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
});
}
}
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage();
new MutationObserver(loadPlaylistImage)
.observe(listElem, {childList: true});
});
waitForElement([".Root__top-container"], ([topContainer]) => {
const shadow = document.createElement("div");
shadow.id = "dribbblish-back-shadow";
topContainer.prepend(shadow);
});
// allow resizing of the navbar
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() {
let value = resizer.value;
if (value < 121) {
value = 72;
document.documentElement.classList.add("sidebar-hide-text");
} else {
document.documentElement.classList.remove("sidebar-hide-text");
}
document.documentElement.style.setProperty(
"--sidebar-width", value + "px");
}
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 == 280) {
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);
function updateVariable([ event ]) {
document.documentElement.style.setProperty(
"--main-view-width", event.contentRect.width + "px");
if (event.contentRect.width < 700) {
document.documentElement.classList.add("minimal-player");
} else {
document.documentElement.classList.remove("minimal-player");
}
if (event.contentRect.width < 550) {
document.documentElement.classList.add("extra-minimal-player");
} else {
document.documentElement.classList.remove("extra-minimal-player");
}
}
});
(function Dribbblish() {
// dynamic playback time tooltip
const progBar = document.querySelector(".playback-bar");
const root = document.querySelector(".Root");
if (!Spicetify.Player.origin || !progBar || !root) {
setTimeout(Dribbblish, 300);
return;
}
const tooltip = document.createElement("div");
tooltip.className = "prog-tooltip";
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;
const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
const ttWidth = tooltip.offsetWidth / 2;
if (curWidth < ttWidth) {
tooltip.style.left = String(offsetX) + "px";
} else if (curWidth > maxWidth - ttWidth) {
tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
} else {
tooltip.style.left = String(offsetX - ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
Spicetify.Player.formatTime(Spicetify.Player.getDuration());
}
Spicetify.Player.addEventListener("onprogress", updateProgTime);
updateProgTime({ data: Spicetify.Player.getProgress() });
Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
const isExternal = state.devices.some(a => a.is_active);
if (isExternal) {
root.classList.add("is-connectBarVisible");
} else {
root.classList.remove("is-connectBarVisible");
}
});
// filepicker for custom folder images
const filePickerForm = document.createElement("form");
filePickerForm.setAttribute("aria-hidden", true);
filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
document.body.appendChild(filePickerForm);
/** @type {HTMLInputElement} */
const filePickerInput = filePickerForm.childNodes[0];
filePickerInput.accept = [
"image/jpeg",
"image/apng",
"image/avif",
"image/gif",
"image/png",
"image/svg+xml",
"image/webp"
].join(",");
filePickerInput.onchange = () => {
if (!filePickerInput.files.length) return;
const file = filePickerInput.files[0];
const reader = new FileReader;
reader.onload = (event) => {
const result = event.target.result;
const id = Spicetify.URI.from(filePickerInput.uri).id;
try {
localStorage.setItem(
"dribbblish:folder-image:" + id,
result
);
} catch {
Spicetify.showNotification("File too large");
}
DribbblishShared.loadPlaylistImage?.call();
}
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;
localStorage.removeItem("dribbblish:folder-image:" + id);
DribbblishShared.loadPlaylistImage?.call();
},
([uri]) => Spicetify.URI.isFolder(uri),
"x",
).register();
new Spicetify.ContextMenu.Item("Choose folder image",
([uri]) => {
filePickerInput.uri = uri;
filePickerForm.reset();
filePickerInput.click();
},
([uri]) => Spicetify.URI.isFolder(uri),
"edit",
).register();
})();
Themes/Everforest/.config/spicetify/Themes/Dribbblish/user.css
Executable → Regular
+85 -25
View File
@@ -14,14 +14,16 @@ html.buddyFeed-hide-text {
@font-face {
font-family: "Google Sans Display";
src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2")
format("woff2");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Google Sans Display";
src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2")
format("woff2");
font-style: normal;
font-weight: 500;
}
@@ -41,10 +43,14 @@ html.buddyFeed-hide-text {
}
body {
--glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial,
--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;
--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;
--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;
}
@@ -259,7 +265,11 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
.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-sidebar), 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;
}
@@ -488,7 +498,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 0.5s ease;
}
@@ -532,7 +544,8 @@ li.GlueDropTarget {
padding-top: calc(var(--os-windows-icon-dodge) * 24px);
}
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints {
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows
.main-navBar-entryPoints {
padding-top: calc(var(--os-windows-icon-dodge) * 12px + 12px);
}
@@ -540,7 +553,8 @@ 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);
}
@@ -549,8 +563,10 @@ li.GlueDropTarget {
}
/** Linux-specific remove padding */
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-entryPoints,
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-navBar {
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux
.main-navBar-entryPoints,
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux
.main-navBar-navBar {
padding-top: 0;
}
@@ -652,7 +668,8 @@ li.GlueDropTarget {
}
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
.main-collectionLinkButton-collectionLinkButton
.main-collectionLinkButton-collectionLinkText,
.main-createPlaylistButton-button {
opacity: 1;
}
@@ -686,14 +703,27 @@ li.GlueDropTarget {
padding: var(--main-gap) 0;
}
.Root__top-container:has(> .main-buddyFeed-container ) {
.Root__top-container:has(> .main-buddyFeed-container):not(
.Root__top-container--right-sidebar-hidden
) {
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(:has(> .main-buddyFeed-container )) {
/* for spotify v prior to 1.2.9 */
.Root__top-container:not(:has(> .main-buddyFeed-container)) {
grid-template-areas:
"top-bar top-bar"
"nav-bar main-view"
"nav-bar now-playing-bar";
padding-right: var(--main-gap);
}
/* for spotify v 1.2.9 */
.Root__top-container.Root__top-container--right-sidebar-hidden {
grid-template-areas:
"top-bar top-bar"
"nav-bar main-view"
@@ -727,7 +757,9 @@ html.right-expanded-cover .main-coverSlotExpanded-container {
left: unset;
}
html.right-expanded-cover .Root__top-container--right-sidebar-visible .main-coverSlotExpanded-container {
html.right-expanded-cover
.Root__top-container--right-sidebar-visible
.main-coverSlotExpanded-container {
right: calc(var(--main-gap) + var(--panel-width) + 10px);
left: unset;
}
@@ -871,13 +903,21 @@ section.contentSpacing {
}
/* 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="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"] {
.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"] {
.main-navBar-navBar
.os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
-webkit-mask-image: linear-gradient(black 90%, transparent 100%);
}
@@ -893,6 +933,11 @@ section.contentSpacing {
}
/* buddy feed w/ hidden text*/
.buddyFeed-hide-text .Root__right-sidebar {
width: 72px !important;
}
.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ,
.buddyFeed-hide-text .main-buddyFeed-header {
display: none;
@@ -926,12 +971,12 @@ section.contentSpacing {
}
.main-buddyFeed-actions button {
color: var(--spice-sidebar-text)
color: var(--spice-sidebar-text);
}
.NdQkQZhcYIEcJnRdAYcQ,
.main-buddyFeed-header {
padding-left: 16px;
padding-left: 0;
}
.spotify__os--is-windows .zuwPpHAEtIqahnB2u9NR {
@@ -988,7 +1033,8 @@ a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selec
}
/* keep progress knob on page : important for js to work */
.progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr) .progress-bar__slider {
.progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr)
.progress-bar__slider {
display: block;
visibility: hidden;
}
@@ -1002,15 +1048,29 @@ a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selec
transition: left 1s linear;
}
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor,
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider {
.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));
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 {
Themes/Everforest/.config/spicetify/Themes/manifest.json
-159
View File
@@ -1,159 +0,0 @@
[
{
"name": "BurntSienna",
"description": "BurntSienna",
"preview": "BurntSienna/screenshot.png",
"readme": "BurntSienna/README.md",
"usercss": "BurntSienna/user.css",
"schemes": "BurntSienna/color.ini",
"authors": [
{
"name": "pjaspinski",
"url": "https://github.com/pjaspinski"
}
]
},
{
"name": "Default",
"description": "Default",
"preview": "Default/ocean.png",
"readme": "Default/README.md",
"usercss": "Default/user.css",
"schemes": "Default/color.ini",
"authors": [
{
"name": "Blacksuan19",
"url": "https://github.com/Blacksuan19"
}
]
},
{
"name": "Dreary",
"description": "Dreary",
"preview": "Dreary/deeper.png",
"readme": "Dreary/README.md",
"usercss": "Dreary/user.css",
"schemes": "Dreary/color.ini",
"authors": [
{
"name": "CharlieS1103",
"url": "https://github.com/CharlieS1103"
}
]
},
{
"name": "Dribbblish",
"description": "Dribbblish",
"preview": "Dribbblish/base.png",
"readme": "Dribbblish/README.md",
"usercss": "Dribbblish/user.css",
"schemes": "Dribbblish/color.ini",
"include": [
"https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/dribbblish.js"
],
"authors": [
{
"name": "khanhas",
"url": "https://github.com/khanhas"
}
]
},
{
"name": "Onepunch",
"description": "Onepunch",
"preview": "Onepunch/screenshots/dark_home.png",
"readme": "Onepunch/README.md",
"usercss": "Onepunch/user.css",
"schemes": "Onepunch/color.ini",
"authors": [
{
"name": "okarin001",
"url": "https://github.com/okarin001"
}
]
},
{
"name": "Sleek",
"description": "Sleek",
"preview": "Sleek/coral.png",
"readme": "Sleek/README.md",
"usercss": "Sleek/user.css",
"schemes": "Sleek/color.ini",
"authors": [
{
"name": "harbassan",
"url": "https://github.com/harbassan"
}
]
},
{
"name": "Turntable",
"description": "Turntable",
"preview": "Turntable/screenshots/turntable.png",
"readme": "Turntable/README.md",
"usercss": "Turntable/user.css",
"schemes": "Turntable/color.ini",
"include": [
"https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Turntable/turntable.js"
],
"authors": [
{
"name": "Grason Chan",
"url": "https://github.com/grasonchan"
}
]
},
{
"name": "Ziro",
"description": "a smooth theme inspired by zorin os",
"preview": "https://raw.githubusercontent.com/schnensch0/ziro/main/preview/mockup.png",
"readme": "Ziro/README.md",
"usercss": "Ziro/user.css",
"schemes": "Ziro/color.ini",
"authors": [
{
"name": "schnensch0",
"url": "https://github.com/schnensch0"
}
]
},
{
"name": "Flow",
"description": "Spicetify theme that has linear gradient effect and vertical playbar",
"preview": "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png",
"readme": "Flow/README.md",
"usercss": "Flow/user.css",
"schemes": "Flow/color.ini",
"authors": [
{
"name": "Ian Liao",
"url": "https://github.com/ian-Liaozy"
},
{
"name": "Victoria Zhang",
"url": "https://github.com/Ruixi-Zhang"
},
{
"name": "Yu Sung Lee",
"url": "https://github.com/yslDevelop"
},
{
"name": "Alex Casieri",
"url": "https://github.com/alexcasieri30"
}
]
},
{
"name": "Blossom",
"description": "Blossom Theme, a simple theme.",
"preview": "https://user-images.githubusercontent.com/72624799/203471073-4a5e6cf0-a5dc-4ecc-9a12-56d5fc716ac4.png",
"readme": "Blossom/README.md",
"usercss": "Blossom/user.css",
"schemes": "Blossom/color.ini",
"authors": [
{
"name": "Robatortas", "url": "https://github.com/Robatortas"
}
]
}
]