mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
Reworked UI Shift Movement
This commit is contained in:
@@ -11,11 +11,15 @@
|
||||
|
||||
/* Remove image container positioning - let it stay where it is */
|
||||
|
||||
.radiant-lyrics-ui-hidden [class*="_tabItems"]:hover {
|
||||
opacity: 1 !important;
|
||||
/* Tab items stay hidden - no hover functionality */
|
||||
|
||||
.radiant-lyrics-ui-hidden [data-test="header-container"]:not(:has(.hide-ui-button)) {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [data-test="header-container"] {
|
||||
/* Keep header visible if it contains the Hide UI button, but hide its other children */
|
||||
.radiant-lyrics-ui-hidden [data-test="header-container"]:has(.hide-ui-button) > *:not(.hide-ui-button) {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
@@ -47,24 +51,41 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [class^="_bar"]>* {
|
||||
.radiant-lyrics-ui-hidden [class^="_bar"]>*:not(.hide-ui-button) {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* Show bar elements on hover */
|
||||
.radiant-lyrics-ui-hidden [class^="_bar"]:hover>*,
|
||||
.radiant-lyrics-ui-hidden [class^="_bar"]>*:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
/* Bar elements stay hidden - no hover functionality */
|
||||
|
||||
/* 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 */
|
||||
/* Hide search box and make it non-interactive - comprehensive selectors */
|
||||
.radiant-lyrics-ui-hidden [data-test="search-input"],
|
||||
.radiant-lyrics-ui-hidden [class*="_searchInput"],
|
||||
.radiant-lyrics-ui-hidden [class*="searchInput"],
|
||||
.radiant-lyrics-ui-hidden [class*="_search"],
|
||||
.radiant-lyrics-ui-hidden [class*="search"],
|
||||
.radiant-lyrics-ui-hidden input[type="search"],
|
||||
.radiant-lyrics-ui-hidden input[type="text"],
|
||||
.radiant-lyrics-ui-hidden input[placeholder*="Search"],
|
||||
.radiant-lyrics-ui-hidden input[placeholder*="search"],
|
||||
.radiant-lyrics-ui-hidden [placeholder*="Search"],
|
||||
.radiant-lyrics-ui-hidden [data-test="main-layout-header"] input,
|
||||
.radiant-lyrics-ui-hidden [data-test="main-layout-header"] [class*="input"],
|
||||
.radiant-lyrics-ui-hidden header input,
|
||||
.radiant-lyrics-ui-hidden nav input {
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/* Hide bottom left controls completely - no hover functionality */
|
||||
/* Exclude heart buttons in player bar and make sure hidden buttons can't be clicked */
|
||||
.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"] *),
|
||||
@@ -97,47 +118,11 @@
|
||||
.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;
|
||||
pointer-events: none !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;
|
||||
}
|
||||
/* No hover functionality in Hide UI Mode - buttons stay hidden */
|
||||
|
||||
/* Default state for control buttons */
|
||||
[data-test="add-to-playlist"],
|
||||
@@ -172,4 +157,55 @@ button[aria-label*="Heart"],
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Smooth cover art movement when UI is hidden */
|
||||
[class*="_albumImage"],
|
||||
[class*="_coverArt"],
|
||||
figure[class*="_albumImage"] {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [class*="_albumImage"],
|
||||
.radiant-lyrics-ui-hidden [class*="_coverArt"],
|
||||
.radiant-lyrics-ui-hidden figure[class*="_albumImage"] {
|
||||
transform: translateX(80px) !important;
|
||||
}
|
||||
|
||||
/* Smooth track info wrapper movement when UI is hidden (less movement to stay centered) */
|
||||
[class*="_infoWrapper"],
|
||||
[class*="_textContainer"] {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [class*="_infoWrapper"],
|
||||
.radiant-lyrics-ui-hidden [class*="_textContainer"] {
|
||||
transform: translateX(40px) !important;
|
||||
}
|
||||
|
||||
/* Move parent containers instead of lyrics container directly to preserve gradient fade */
|
||||
/* Use original movement distances: 30px right and 70px up */
|
||||
[data-test="stream-metadata"],
|
||||
[class*="_rightColumn"],
|
||||
[class*="_rightSide"],
|
||||
[class*="_contentRight"],
|
||||
[class*="_sidePanel"],
|
||||
[class*="_lyricsSection"],
|
||||
[class*="_lyricsWrapper"] {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [data-test="stream-metadata"],
|
||||
.radiant-lyrics-ui-hidden [class*="_rightColumn"],
|
||||
.radiant-lyrics-ui-hidden [class*="_rightSide"],
|
||||
.radiant-lyrics-ui-hidden [class*="_contentRight"],
|
||||
.radiant-lyrics-ui-hidden [class*="_sidePanel"],
|
||||
.radiant-lyrics-ui-hidden [class*="_lyricsSection"],
|
||||
.radiant-lyrics-ui-hidden [class*="_lyricsWrapper"] {
|
||||
transform: translateX(60px) translateY(-70px) !important;
|
||||
}
|
||||
|
||||
/* Hide UI button base styling - just the transition */
|
||||
.hide-ui-button {
|
||||
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out !important;
|
||||
}
|
||||
|
||||
/* Let JavaScript handle the unhide button visibility and transitions */
|
||||
Reference in New Issue
Block a user