meoware.exe/TidaLuna-Plugins
1
0
Fork 0
mirror of https://github.com/meowarex/TidaLuna-Plugins.git synced 2026-06-18 03:43:10 +10:00
Code Issues Packages Projects Releases Wiki Activity

Updated Unhide Button Appearance

Browse Source
This commit is contained in:
meowarex
2025-06-06 15:33:03 +10:00
parent 1fa6dcdce2
commit 80182ffbb9
3 changed files with 54 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/radiant-lyrics-luna/src/index.ts
+30 -1
View File
@@ -29,6 +29,7 @@ if (settings.lyricsGlowEnabled) {
}
var isHidden = false;
let unhideButtonAutoFadeTimeout: number | null = null;
const updateButtonStates = function(): void {
const hideButton = document.querySelector('.hide-ui-button') as HTMLElement;
@@ -52,21 +53,36 @@ const updateButtonStates = function(): void {
}
}
if (unhideButton) {
// Clear any existing auto-fade timeout
if (unhideButtonAutoFadeTimeout) {
window.clearTimeout(unhideButtonAutoFadeTimeout);
unhideButtonAutoFadeTimeout = null;
}
if (settings.hideUIEnabled && isHidden) {
unhideButton.style.display = 'flex';
// Remove the hide-immediately class and let it fade in smoothly
unhideButton.classList.remove('hide-immediately');
unhideButton.classList.remove('auto-faded');
// Small delay to ensure display is set first, then fade in - (Works for unhide button.. but not hide button.. because uhh idk)
setTimeout(() => {
unhideButton.style.opacity = '1';
unhideButton.style.visibility = 'visible';
unhideButton.style.pointerEvents = 'auto';
// Set up auto-fade after 2 seconds
unhideButtonAutoFadeTimeout = window.setTimeout(() => {
if (isHidden && unhideButton && !unhideButton.matches(':hover')) {
unhideButton.classList.add('auto-faded');
}
}, 2000);
}, 50);
} else {
// Smooth fade out for Unhide UI button
unhideButton.style.opacity = '0';
unhideButton.style.visibility = 'hidden';
unhideButton.style.pointerEvents = 'none';
unhideButton.classList.remove('auto-faded');
// Keep display: flex to maintain transitions, then hide after fade
setTimeout(() => {
if (unhideButton.style.opacity === '0') {
@@ -397,15 +413,22 @@ const createUnhideUIButton = function(): void {
pointer-events: none;
`;
// Add hover effect
// Add hover effect with auto-fade handling
unhideUIButton.addEventListener('mouseenter', () => {
unhideUIButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
unhideUIButton.style.transform = 'scale(1.05)';
unhideUIButton.classList.remove('auto-faded');
});
unhideUIButton.addEventListener('mouseleave', () => {
unhideUIButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
unhideUIButton.style.transform = 'scale(1)';
// Re-add auto-fade after a short delay if still in hidden mode
window.setTimeout(() => {
if (isHidden && !unhideUIButton.matches(':hover')) {
unhideUIButton.classList.add('auto-faded');
}
}, 2000);
});
unhideUIButton.onclick = toggleRadiantLyrics;
@@ -628,6 +651,12 @@ updateCoverArtBackground(1);
unloads.add(() => {
cleanUpDynamicArt();
// Clean up auto-fade timeout
if (unhideButtonAutoFadeTimeout) {
window.clearTimeout(unhideButtonAutoFadeTimeout);
unhideButtonAutoFadeTimeout = null;
}
// Clean up our custom buttons
const hideButton = document.querySelector('.hide-ui-button');
if (hideButton && hideButton.parentNode) {
plugins/radiant-lyrics-luna/src/styles.css
+22
View File
@@ -199,4 +199,26 @@ figure[class*="_albumImage"] {
/* 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;
}
/* Auto-fade styling for unhide button - (Keeps Text Visible, just not full opacity) | Cheers @Zyhn for the idea*/
.unhide-ui-button.auto-faded {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: rgba(255, 255, 255, 0.8) !important;
transition: background-color 0.8s ease-in-out, border-color 0.8s ease-in-out, box-shadow 0.8s ease-in-out, backdrop-filter 0.8s ease-in-out, color 0.8s ease-in-out;
}
/* Restore button styling on hover */
.unhide-ui-button.auto-faded:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
color: white !important;
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, color 0.3s ease-in-out;
}