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

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

View File

@ -53,8 +53,7 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
// handles resizing of playbar panel to match right sidebar below it // handles resizing of playbar panel to match right sidebar below it
const playbar = document.querySelector('.Root__now-playing-bar'); const playbar = document.querySelector('.Root__now-playing-bar');
const rightbar = document.querySelector('.Root__right-sidebar'); waitForElement(['.Root__right-sidebar'], ([rightbar]) => {
const resizeObserver = new ResizeObserver((entries) => { const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) { for (const entry of entries) {
if (entry.target === rightbar) { if (entry.target === rightbar) {
@ -76,11 +75,11 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
}); });
resizeObserver.observe(rightbar); resizeObserver.observe(rightbar);
});
waitForElement(['[data-encore-id="buttonPrimary"]'], ([targetElement]) => {
// start or stop spinning animation based on whether something is playing // start or stop spinning animation based on whether something is playing
const targetElement = document.querySelector('[data-encore-id="buttonPrimary"]'); const playObserver = new MutationObserver((mutationsList) => {
const playObserver = new MutationObserver((mutationsList, observer) => {
for (const mutation of mutationsList) { for (const mutation of mutationsList) {
if ( if (
mutation.type === 'attributes' && mutation.type === 'attributes' &&
@ -92,8 +91,8 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
}); });
const playConfig = { attributes: true, attributeFilter: ['aria-label'] }; const playConfig = { attributes: true, attributeFilter: ['aria-label'] };
playObserver.observe(targetElement, playConfig); playObserver.observe(targetElement, playConfig);
});
function handleLabelChange() { function handleLabelChange() {
const img = document.querySelector( const img = document.querySelector(

View File

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