From 71d67f6475edc9fe2c681570825eae0048d8f9da Mon Sep 17 00:00:00 2001 From: Brandon Chen <90290521+b-chen00@users.noreply.github.com> Date: Thu, 22 Aug 2024 08:02:38 -0400 Subject: [PATCH] fix(StarryNight): make various button text visibility fixes in and out of apps (#1106) Co-authored-by: jal1077 --- StarryNight/color.ini | 10 +++---- StarryNight/theme.js | 15 +++-------- StarryNight/user.css | 61 ++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 66 insertions(+), 20 deletions(-) diff --git a/StarryNight/color.ini b/StarryNight/color.ini index 31713e4..cd112fa 100644 --- a/StarryNight/color.ini +++ b/StarryNight/color.ini @@ -19,7 +19,7 @@ button = FFF3C4 button-disabled = 000000 highlight = 191919 -highlight-elevated = FFFFFF +highlight-elevated = 152238 shadow = 000000 selected-row = FFFFFF @@ -81,7 +81,7 @@ button = c4c6ff button-disabled = 000000 highlight = 191919 -highlight-elevated = FFFFFF +highlight-elevated = 011502 shadow = 000000 selected-row = FFFFFF @@ -112,7 +112,7 @@ button = FFF3C4 button-disabled = 939bb6 highlight = 9f45b0 -highlight-elevated = FFFFFF +highlight-elevated = 9f45b0 shadow = 000000 selected-row = FFFFFF @@ -143,7 +143,7 @@ button = fbe39b button-disabled = 000000 highlight = 191919 -highlight-elevated = FFFFFF +highlight-elevated = e69138 shadow = 000000 selected-row = FFFFFF @@ -205,7 +205,7 @@ button = FFF3C4 button-disabled = 000000 highlight = 191919 -highlight-elevated = FFFFFF +highlight-elevated = C49C48 shadow = 000000 selected-row = 000000 diff --git a/StarryNight/theme.js b/StarryNight/theme.js index bc941b6..af4ee98 100644 --- a/StarryNight/theme.js +++ b/StarryNight/theme.js @@ -20,12 +20,6 @@ waitForElement(['.Root__top-container'], ([topContainer]) => { backgroundContainer.className = 'starrynight-bg-container'; topContainer.appendChild(backgroundContainer); - // make --spice-main transparent for a more visible background - r.style.setProperty( - '--spice-main', - `${rs.getPropertyValue('--spice-main')}00` - ); - // to position stars and shooting stars between the background and everything else const rootElement = document.querySelector('.Root__top-container'); rootElement.style.zIndex = '0'; @@ -46,6 +40,7 @@ waitForElement(['.Root__top-container'], ([topContainer]) => { star.style.height = `${size}px`; star.style.backgroundColor = rs.getPropertyValue('--spice-star'); star.style.zIndex = '-1'; + star.style.borderRadius = '50%'; if (Math.random() < 1 / 5) { star.style.animation = `twinkle${ @@ -83,7 +78,7 @@ waitForElement(['.Root__top-container'], ([topContainer]) => { resizeObserver.observe(rightbar); // start or stop spinning animation based on whether something is playing - const targetElement = document.querySelector('.main-playPauseButton-button'); + const targetElement = document.querySelector('[data-encore-id="buttonPrimary"]'); const playObserver = new MutationObserver((mutationsList, observer) => { for (const mutation of mutationsList) { @@ -105,11 +100,7 @@ waitForElement(['.Root__top-container'], ([topContainer]) => { '.main-nowPlayingWidget-coverArt .cover-art img' ); // checks the state of the play button on the playbar - if ( - document - .querySelector('.main-playPauseButton-button') - .getAttribute('aria-label') === 'Pause' - ) { + if (document.querySelector('[data-encore-id="buttonPrimary"]').getAttribute('aria-label') == 'Pause'){ img.classList.add('running-animation'); } else { img.classList.remove('running-animation'); diff --git a/StarryNight/user.css b/StarryNight/user.css index 1d5d657..819bec4 100644 --- a/StarryNight/user.css +++ b/StarryNight/user.css @@ -26,7 +26,8 @@ grid-template-areas: "global-nav global-nav global-nav" "left-sidebar main-view now-playing-bar" - "left-sidebar main-view right-sidebar"; + "left-sidebar main-view right-sidebar" !important; + grid-template-rows: auto 1fr 1fr; } .Root__right-sidebar { @@ -42,7 +43,7 @@ } .Root__nav-bar { - background-color: var(--spice-main) !important; + background-color: #00000000 !important; } .main-trackList-trackListRow:hover { @@ -54,9 +55,50 @@ } .rX_OmqCngvY5ZCoYBZgb { - background-color: var(--background-base) !important; + background-color: #00000000 !important; } +.main-yourLibraryX-entryPoints { + background-color: #00000000 !important; +} + +.marketplace-header { + background-color: #00000000 !important; +} + +.EmeHQXR87mUskYK6xEde { + background-color: #00000000 !important; +} + +.lyrics-lyrics-background { + background-color: #00000000 !important; +} + +.main-actionBarBackground-background { + background-image: linear-gradient(rgba(var(--spice-rgb-shadow), .6) 0, #000000 100%), #00000000 !important; + animation: none !important; + -webkit-animation: none !important; +} + +.main-entityHeader-background.main-entityHeader-overlay { + background-image: none !important; + animation: none !important; + -webkit-animation: none !important; +} + +.main-entityHeader-background.main-entityHeader-overlay:after { + background-image: none !important; + animation: none !important; + -webkit-animation: none !important; +} + +.pUNc2aOeOQANHrhYa1GU .RDZ61ETnag1ilfZTkVxe { + color: #000000 !important; +} + +.playlist-playlist-playlistContent { + background: #00000000 !important; +} .main-nowPlayingBar-nowPlayingBar { min-height: 400px; @@ -76,6 +118,14 @@ grid-area: main-view/main-view/main-view/span 1; } +.Root__main-view { + 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%; } @@ -95,6 +145,7 @@ width: 220px !important; margin: auto; background-color: #00000000; + box-shadow: 0 0 0px var(--spice-rgb-shadow); } .main-nowPlayingWidget-coverArt .cover-art img { @@ -175,6 +226,10 @@ background-color: transparent; } +.ffFwfKcPDbmAPLXzxzKq { + background-color: #00000000 !important; +} + @keyframes twinkle1 { 0% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow);