Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-21 18:32:45 +01:00
Code Issues Projects Releases Activity

fix(StarryNight): improve visibility of text on artist page and fix occasional missing shooting stars (#1112)

Browse Source 
Co-authored-by: jal1077 <jal1077@nyu.edu>
This commit is contained in:
Brandon Chen 2024-10-23 20:56:35 -04:00 committed by GitHub
parent bf2263b71b
commit a37af009a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
StarryNight/theme.js
View File

@ -53,48 +53,47 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
// handles resizing of playbar panel to match right sidebar below it
const playbar = document.querySelector('.Root__now-playing-bar');
const rightbar = document.querySelector('.Root__right-sidebar');
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.target === rightbar) {
let newWidth = entry.contentRect.width;
if (newWidth === 0) {
const localStorageWidth = localStorage.getItem(
'223ni6f2epqcidhx5etjafeai:panel-width-saved'
);
if (localStorageWidth) {
newWidth = localStorageWidth;
} else {
newWidth = 420;
waitForElement(['.Root__right-sidebar'], ([rightbar]) => {
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.target === rightbar) {
let newWidth = entry.contentRect.width;
if (newWidth === 0) {
const localStorageWidth = localStorage.getItem(
'223ni6f2epqcidhx5etjafeai:panel-width-saved'
);
if (localStorageWidth) {
newWidth = localStorageWidth;
} else {
newWidth = 420;
}
}
playbar.style.width = `${newWidth}px`;
break;
}
playbar.style.width = `${newWidth}px`;
break;
}
}
});
resizeObserver.observe(rightbar);
});
resizeObserver.observe(rightbar);
// start or stop spinning animation based on whether something is playing
const targetElement = document.querySelector('[data-encore-id="buttonPrimary"]');
const playObserver = new MutationObserver((mutationsList, observer) => {
for (const mutation of mutationsList) {
if (
mutation.type === 'attributes' &&
mutation.attributeName === 'aria-label'
) {
handleLabelChange();
waitForElement(['[data-encore-id="buttonPrimary"]'], ([targetElement]) => {
// start or stop spinning animation based on whether something is playing
const playObserver = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (
mutation.type === 'attributes' &&
mutation.attributeName === 'aria-label'
) {
handleLabelChange();
}
}
}
});
const playConfig = { attributes: true, attributeFilter: ['aria-label'] };
playObserver.observe(targetElement, playConfig);
});
const playConfig = { attributes: true, attributeFilter: ['aria-label'] };
playObserver.observe(targetElement, playConfig);
function handleLabelChange() {
const img = document.querySelector(
'.main-nowPlayingWidget-coverArt .cover-art img'

24
StarryNight/user.css
View File

@ -6,12 +6,9 @@
background-color: #00000000 !important;
}
.main-actionBarBackground-background {
background-color: #00000000 !important;
}
.main-home-homeHeader {
background-color: #00000000 !important;
background-image: none !important;
}
.Root__top-container {
@ -27,7 +24,6 @@
"global-nav global-nav global-nav"
"left-sidebar main-view now-playing-bar"
"left-sidebar main-view right-sidebar" !important;
grid-template-rows: auto 1fr 1fr;
}
.Root__right-sidebar {
@ -75,15 +71,19 @@
}
.main-actionBarBackground-background {
background-image: linear-gradient(rgba(var(--spice-rgb-shadow), .6) 0, #000000 100%), #00000000 !important;
background-image: none;
background-color: #00000000 !important;
animation: none !important;
-webkit-animation: none !important;
}
.main-entityHeader-background.main-entityHeader-overlay {
background-image: none !important;
.main-entityHeader-overlay {
background: none !important;
}
.main-entityHeader-background.main-entityHeader-gradient {
opacity: 0.5;
animation: none !important;
-webkit-animation: none !important;
}
.main-entityHeader-background.main-entityHeader-overlay:after {
@ -93,7 +93,7 @@
}
.pUNc2aOeOQANHrhYa1GU .RDZ61ETnag1ilfZTkVxe {
color: #000000 !important;
color: #00000000 !important;
}
.playlist-playlist-playlistContent {
@ -122,10 +122,6 @@
background-color: #00000000 !important;
}
.main-home-homeHeader {
background-image: linear-gradient(rgba(var(--spice-rgb-shadow), .6) 0, #00000000 100%), var(--background-noise);
}
.main-nowPlayingBar-center {
width: 100%;
}