mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-21 18:32:45 +01:00
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:
parent
bf2263b71b
commit
a37af009a8
@ -53,48 +53,47 @@ 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) {
|
let newWidth = entry.contentRect.width;
|
||||||
let newWidth = entry.contentRect.width;
|
if (newWidth === 0) {
|
||||||
if (newWidth === 0) {
|
const localStorageWidth = localStorage.getItem(
|
||||||
const localStorageWidth = localStorage.getItem(
|
'223ni6f2epqcidhx5etjafeai:panel-width-saved'
|
||||||
'223ni6f2epqcidhx5etjafeai:panel-width-saved'
|
);
|
||||||
);
|
if (localStorageWidth) {
|
||||||
if (localStorageWidth) {
|
newWidth = localStorageWidth;
|
||||||
newWidth = localStorageWidth;
|
} else {
|
||||||
} else {
|
newWidth = 420;
|
||||||
newWidth = 420;
|
}
|
||||||
}
|
}
|
||||||
|
playbar.style.width = `${newWidth}px`;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
playbar.style.width = `${newWidth}px`;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
|
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 playObserver = new MutationObserver((mutationsList) => {
|
||||||
const targetElement = document.querySelector('[data-encore-id="buttonPrimary"]');
|
for (const mutation of mutationsList) {
|
||||||
|
if (
|
||||||
const playObserver = new MutationObserver((mutationsList, observer) => {
|
mutation.type === 'attributes' &&
|
||||||
for (const mutation of mutationsList) {
|
mutation.attributeName === 'aria-label'
|
||||||
if (
|
) {
|
||||||
mutation.type === 'attributes' &&
|
handleLabelChange();
|
||||||
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() {
|
function handleLabelChange() {
|
||||||
const img = document.querySelector(
|
const img = document.querySelector(
|
||||||
'.main-nowPlayingWidget-coverArt .cover-art img'
|
'.main-nowPlayingWidget-coverArt .cover-art img'
|
||||||
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user