Hide UI Rework

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
+        // Don't remove StyleTags completely, just remove the class to show elements again
-        lyricsStyleTag.remove();
+        if (nowPlayingContainer) {
-        baseStyleTag.remove();
+            nowPlayingContainer.classList.remove('radiant-lyrics-ui-hidden');
-        playerBarStyleTag.remove();
+        }
+        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();
 };

plugins/radiant-lyrics-luna/src/player-bar-hidden.css

@@ -1,16 +1,15 @@
-/* Hide player bar when setting is disabled, but show on hover */
+/* Hide player bar when setting is disabled, but show on hover - only when UI is hidden */
-[data-test="footer-player"] {
+.radiant-lyrics-ui-hidden [data-test="footer-player"] {
     opacity: 0 !important;
-    transition: opacity 0.3s ease-in-out !important;
+    transition: opacity 0.5s ease-in-out !important;
-    pointer-events: auto !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 */
+/* Also show player bar when hovering over the bottom area - only when UI is hidden */
-body:has([data-test="footer-player"]:hover) [data-test="footer-player"],
+.radiant-lyrics-ui-hidden:has([data-test="footer-player"]:hover) [data-test="footer-player"],
-body [data-test="footer-player"]:hover {
+.radiant-lyrics-ui-hidden [data-test="footer-player"]:hover {
     opacity: 1 !important;
 } 

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 */
+/* Tab and container visibility - only when UI is hidden */
-[class*="tabItems"] {
+.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"] {
+/* Remove image container positioning - let it stay where it is */
-    margin-top: 40px !important;
-}
 
-[class*="_tabItems"]:hover {
+.radiant-lyrics-ui-hidden [class*="_tabItems"]:hover {
     opacity: 1 !important;
 }
 
-[data-test="header-container"] {
+.radiant-lyrics-ui-hidden [data-test="header-container"] {
-    opacity: 0;
+    opacity: 0 !important;
-    margin: -40px;
+    transition: opacity 0.4s ease-in-out;
 }
 
-/* Hide bottom gradient */
+/* Hide bottom gradient - only when UI is hidden */
-[class^="_bottomGradient"] {
+.radiant-lyrics-ui-hidden [class^="_bottomGradient"] {
-    visibility: hidden;
+    opacity: 0 !important;
+    transition: opacity 0.4s ease-in-out;
 }
 
-/* Credits button positioning */
+/* Remove credits button repositioning - let it stay where it is */
-[aria-label="Show credits"] {
-    top: calc(var(--headerHeight) + 80px);
-}
 
-/* Hide lyrics provider */
+/* Hide lyrics provider - only when UI is hidden */
-[class^="_lyricsProvider"] {
+.radiant-lyrics-ui-hidden [class^="_lyricsProvider"] {
-    visibility: hidden;
+    opacity: 0 !important;
+    transition: opacity 0.4s ease-in-out;
 }
 
 /* Sync button margin */

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"] {
+/* Default state - visible */
-    margin-top: 40px !important;
+[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;
+    transition: opacity 0.4s ease-in-out;
-    margin: -40px;
 }
 
 /* Only prevent specific text elements in player bar from being affected by margin adjustments */
@@ -25,64 +34,105 @@
     transform: none !important;
 }
 
-[class*="_nowPlayingContainer"] {
+/* Remove all layout-changing rules - only fade buttons, keep everything else in place */
-    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;
-}
 
 [class^="_bar"] {
     background-color: transparent;
 }
 
-[class^="_bar"]>* {
+.radiant-lyrics-ui-hidden [class^="_bar"]>* {
-    opacity: 0;
+    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 */