diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index 949cc30..f5300c3 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -192,14 +192,30 @@ const toggleRadiantLyrics = function(): void { // Toggle the state first isHidden = !isHidden; + const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement; + if (isHidden) { // Apply clean view styles updateRadiantLyricsStyles(); + // Add a class to the container to trigger CSS animations + if (nowPlayingContainer) { + nowPlayingContainer.classList.add('radiant-lyrics-ui-hidden'); + } + document.body.classList.add('radiant-lyrics-ui-hidden'); } else { - // Remove all clean view styles - lyricsStyleTag.remove(); - baseStyleTag.remove(); - playerBarStyleTag.remove(); + // Don't remove StyleTags completely, just remove the class to show elements again + if (nowPlayingContainer) { + nowPlayingContainer.classList.remove('radiant-lyrics-ui-hidden'); + } + document.body.classList.remove('radiant-lyrics-ui-hidden'); + // Remove styles after animation completes + setTimeout(() => { + if (!isHidden) { + lyricsStyleTag.remove(); + baseStyleTag.remove(); + playerBarStyleTag.remove(); + } + }, 500); // Wait for fade animation to complete } updateButtonStates(); }; diff --git a/plugins/radiant-lyrics-luna/src/player-bar-hidden.css b/plugins/radiant-lyrics-luna/src/player-bar-hidden.css index 553a6f4..53fbb24 100644 --- a/plugins/radiant-lyrics-luna/src/player-bar-hidden.css +++ b/plugins/radiant-lyrics-luna/src/player-bar-hidden.css @@ -1,16 +1,15 @@ -/* Hide player bar when setting is disabled, but show on hover */ -[data-test="footer-player"] { +/* Hide player bar when setting is disabled, but show on hover - only when UI is hidden */ +.radiant-lyrics-ui-hidden [data-test="footer-player"] { opacity: 0 !important; - transition: opacity 0.3s ease-in-out !important; - pointer-events: auto !important; + transition: opacity 0.5s ease-in-out !important; } -[data-test="footer-player"]:hover { +.radiant-lyrics-ui-hidden [data-test="footer-player"]:hover { opacity: 1 !important; } -/* Also show player bar when hovering over the bottom area */ -body:has([data-test="footer-player"]:hover) [data-test="footer-player"], -body [data-test="footer-player"]:hover { +/* Also show player bar when hovering over the bottom area - only when UI is hidden */ +.radiant-lyrics-ui-hidden:has([data-test="footer-player"]:hover) [data-test="footer-player"], +.radiant-lyrics-ui-hidden [data-test="footer-player"]:hover { opacity: 1 !important; } \ No newline at end of file diff --git a/plugins/radiant-lyrics-luna/src/separated-lyrics.css b/plugins/radiant-lyrics-luna/src/separated-lyrics.css index e61dc80..94d43b9 100644 --- a/plugins/radiant-lyrics-luna/src/separated-lyrics.css +++ b/plugins/radiant-lyrics-luna/src/separated-lyrics.css @@ -23,38 +23,35 @@ src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2"); } -/* Tab and container visibility */ -[class*="tabItems"] { +/* Tab and container visibility - only when UI is hidden */ +.radiant-lyrics-ui-hidden [class*="tabItems"] { opacity: 0 !important; - transition: opacity 0.3s ease-in-out; + transition: opacity 0.4s ease-in-out; } -[class*="_imageContainer"] { - margin-top: 40px !important; -} +/* Remove image container positioning - let it stay where it is */ -[class*="_tabItems"]:hover { +.radiant-lyrics-ui-hidden [class*="_tabItems"]:hover { opacity: 1 !important; } -[data-test="header-container"] { - opacity: 0; - margin: -40px; +.radiant-lyrics-ui-hidden [data-test="header-container"] { + opacity: 0 !important; + transition: opacity 0.4s ease-in-out; } -/* Hide bottom gradient */ -[class^="_bottomGradient"] { - visibility: hidden; +/* Hide bottom gradient - only when UI is hidden */ +.radiant-lyrics-ui-hidden [class^="_bottomGradient"] { + opacity: 0 !important; + transition: opacity 0.4s ease-in-out; } -/* Credits button positioning */ -[aria-label="Show credits"] { - top: calc(var(--headerHeight) + 80px); -} +/* Remove credits button repositioning - let it stay where it is */ -/* Hide lyrics provider */ -[class^="_lyricsProvider"] { - visibility: hidden; +/* Hide lyrics provider - only when UI is hidden */ +.radiant-lyrics-ui-hidden [class^="_lyricsProvider"] { + opacity: 0 !important; + transition: opacity 0.4s ease-in-out; } /* Sync button margin */ diff --git a/plugins/radiant-lyrics-luna/src/styles.css b/plugins/radiant-lyrics-luna/src/styles.css index e7a2fa9..69fd4f3 100644 --- a/plugins/radiant-lyrics-luna/src/styles.css +++ b/plugins/radiant-lyrics-luna/src/styles.css @@ -1,19 +1,28 @@ -[class*="tabItems"] { +/* Only apply styles when UI is hidden */ +.radiant-lyrics-ui-hidden [class*="tabItems"] { opacity: 0 !important; - transition: opacity 0.3s ease-in-out; + transition: opacity 0.4s ease-in-out; } -[class*="_imageContainer"] { - margin-top: 40px !important; +/* Default state - visible */ +[class*="tabItems"] { + transition: opacity 0.4s ease-in-out; } -[class*="_tabItems"]:hover { +/* Remove image container positioning - let it stay where it is */ + +.radiant-lyrics-ui-hidden [class*="_tabItems"]:hover { opacity: 1 !important; } +.radiant-lyrics-ui-hidden [data-test="header-container"] { + opacity: 0 !important; + transition: opacity 0.4s ease-in-out; +} + +/* Default state for header */ [data-test="header-container"] { - opacity: 0; - margin: -40px; + transition: opacity 0.4s ease-in-out; } /* Only prevent specific text elements in player bar from being affected by margin adjustments */ @@ -25,64 +34,105 @@ transform: none !important; } -[class*="_nowPlayingContainer"] { - padding-left: 6%; - padding-top: 20px !important; -} - -/* Move main content areas up */ -[class*="_trackTitleContainer"], -[class*="_artistContainer"], -[class*="_albumContainer"] { - margin-top: -20px !important; -} - -/* Move CoverArt and lyrics content up */ -[class*="_lyricsContainer"], -[class*="_mediaContainer"] { - margin-top: -30px !important; -} - -/* Move play queue content up to fill button space */ -[class*="_playQueueContainer"], -[class*="_queueContainer"], -[data-test="play-queue"], -#playQueueSidebar { - margin-top: -40px !important; - padding-top: 10px !important; -} - -/* Move play queue list content up - more aggressive */ -[class*="_playQueueList"], -[class*="_queueList"], -[class*="_trackList"] { - margin-top: -60px !important; - padding-top: 0px !important; -} - -/* Target specific play queue elements more aggressively */ -#playQueueSidebar > div, -#playQueueSidebar > div > div { - margin-top: -40px !important; - padding-top: 0px !important; -} - -/* Override any existing padding in queue content area */ -[class*="_queueContent"], -[class*="_playQueueContent"] { - margin-top: -50px !important; - padding-top: 20px !important; -} +/* Remove all layout-changing rules - only fade buttons, keep everything else in place */ [class^="_bar"] { background-color: transparent; } -[class^="_bar"]>* { - opacity: 0; +.radiant-lyrics-ui-hidden [class^="_bar"]>* { + opacity: 0 !important; + transition: opacity 0.4s ease-in-out; } -/* Hide bottom left controls completely - no hover reveal */ +/* Show bar elements on hover */ +.radiant-lyrics-ui-hidden [class^="_bar"]:hover>*, +.radiant-lyrics-ui-hidden [class^="_bar"]>*:hover { + opacity: 1 !important; +} + +/* Default state for bar elements */ +[class^="_bar"]>* { + transition: opacity 0.4s ease-in-out; +} + +/* Hide bottom left controls with smooth fade animation - keep space to prevent UI shifting */ +/* But exclude heart buttons in player bar */ +.radiant-lyrics-ui-hidden [data-test="add-to-playlist"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="remove-from-playlist"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="like-toggle"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="dislike-toggle"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="favorite-toggle"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="heart-button"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="playlist-add"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [class*="_trackActions"], +.radiant-lyrics-ui-hidden [class*="_bottomLeftControls"], +.radiant-lyrics-ui-hidden [class*="_actionButtons"], +.radiant-lyrics-ui-hidden [class*="_favoriteButton"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [class*="_addToPlaylist"], +.radiant-lyrics-ui-hidden [class*="_lowerLeft"], +.radiant-lyrics-ui-hidden [class*="_bottomActions"], +.radiant-lyrics-ui-hidden [class*="_mediaControls"] > div:first-child, +.radiant-lyrics-ui-hidden button[title*="Add to"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[title*="Remove from"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[title*="Like"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[title*="Favorite"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[title*="Heart"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Add to"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Remove from"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Like"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Favorite"]:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Heart"]:not([data-test="footer-player"] *), +/* Target buttons in bottom left area specifically */ +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] button[class*="_button"]:not(.unhide-ui-button), +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] [class*="_iconButton"]:not(.unhide-ui-button), +/* Additional catch-all for bottom left area buttons */ +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div > div:first-child button:not(.unhide-ui-button), +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div:first-child button:not(.unhide-ui-button) { + opacity: 0 !important; + transition: opacity 0.5s ease-in-out !important; +} + +/* Show buttons on hover for accessibility */ +.radiant-lyrics-ui-hidden [data-test="add-to-playlist"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="remove-from-playlist"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="like-toggle"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="dislike-toggle"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="favorite-toggle"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="heart-button"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [data-test="playlist-add"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [class*="_trackActions"]:hover, +.radiant-lyrics-ui-hidden [class*="_bottomLeftControls"]:hover, +.radiant-lyrics-ui-hidden [class*="_actionButtons"]:hover, +.radiant-lyrics-ui-hidden [class*="_favoriteButton"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden [class*="_addToPlaylist"]:hover, +.radiant-lyrics-ui-hidden [class*="_lowerLeft"]:hover, +.radiant-lyrics-ui-hidden [class*="_bottomActions"]:hover, +.radiant-lyrics-ui-hidden [class*="_mediaControls"] > div:first-child:hover, +.radiant-lyrics-ui-hidden button[title*="Add to"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[title*="Remove from"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[title*="Like"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[title*="Favorite"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[title*="Heart"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Add to"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Remove from"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Like"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Favorite"]:hover:not([data-test="footer-player"] *), +.radiant-lyrics-ui-hidden button[aria-label*="Heart"]:hover:not([data-test="footer-player"] *), +/* Show buttons on hover in bottom left area */ +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] button[class*="_button"]:hover:not(.unhide-ui-button), +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] [class*="_iconButton"]:hover:not(.unhide-ui-button), +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div > div:first-child button:hover:not(.unhide-ui-button), +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div:first-child button:hover:not(.unhide-ui-button), +/* Show buttons when hovering over their parent containers */ +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover button[class*="_button"]:not(.unhide-ui-button), +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover [class*="_iconButton"]:not(.unhide-ui-button), +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover > div > div:first-child button:not(.unhide-ui-button), +.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover > div:first-child button:not(.unhide-ui-button) { + opacity: 1 !important; +} + +/* Default state for control buttons */ [data-test="add-to-playlist"], [data-test="remove-from-playlist"], [data-test="like-toggle"], @@ -108,13 +158,11 @@ button[aria-label*="Remove from"], button[aria-label*="Like"], button[aria-label*="Favorite"], button[aria-label*="Heart"], -/* Target buttons in bottom left area specifically */ [class*="_nowPlayingContainer"] button[class*="_button"]:not(.unhide-ui-button), [class*="_nowPlayingContainer"] [class*="_iconButton"]:not(.unhide-ui-button), -/* Additional catch-all for bottom left area buttons */ [class*="_nowPlayingContainer"] > div > div:first-child button:not(.unhide-ui-button), [class*="_nowPlayingContainer"] > div:first-child button:not(.unhide-ui-button) { - display: none !important; + transition: opacity 0.5s ease-in-out; } /* Keep the Unhide button always visible with special styling */