mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
BIOME Formating
This commit is contained in:
@@ -5,34 +5,55 @@ import React from "react";
|
||||
export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
|
||||
hideUIEnabled: true,
|
||||
trackTitleGlow: false,
|
||||
playerBarVisible: false,
|
||||
playerBarVisible: false,
|
||||
lyricsGlowEnabled: true,
|
||||
textGlow: 20,
|
||||
spinningCoverEverywhere: true,
|
||||
spinningCoverEverywhere: true,
|
||||
performanceMode: false,
|
||||
spinningArtEnabled: true,
|
||||
backgroundContrast: 120,
|
||||
backgroundBlur: 80,
|
||||
backgroundBlur: 80,
|
||||
backgroundBrightness: 40,
|
||||
spinSpeed: 45,
|
||||
settingsAffectNowPlaying: true
|
||||
settingsAffectNowPlaying: true,
|
||||
});
|
||||
|
||||
export const Settings = () => {
|
||||
const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled);
|
||||
const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
|
||||
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
|
||||
const [hideUIEnabled, setHideUIEnabled] = React.useState(
|
||||
settings.hideUIEnabled,
|
||||
);
|
||||
const [playerBarVisible, setPlayerBarVisible] = React.useState(
|
||||
settings.playerBarVisible,
|
||||
);
|
||||
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(
|
||||
settings.lyricsGlowEnabled,
|
||||
);
|
||||
const [textGlow, setTextGlow] = React.useState(settings.textGlow);
|
||||
const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
|
||||
const [performanceMode, setPerformanceMode] = React.useState(settings.performanceMode);
|
||||
const [spinningArtEnabled, setSpinningArtEnabled] = React.useState(settings.spinningArtEnabled);
|
||||
const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast);
|
||||
const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur);
|
||||
const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness);
|
||||
const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(
|
||||
settings.spinningCoverEverywhere,
|
||||
);
|
||||
const [performanceMode, setPerformanceMode] = React.useState(
|
||||
settings.performanceMode,
|
||||
);
|
||||
const [spinningArtEnabled, setSpinningArtEnabled] = React.useState(
|
||||
settings.spinningArtEnabled,
|
||||
);
|
||||
const [backgroundContrast, setBackgroundContrast] = React.useState(
|
||||
settings.backgroundContrast,
|
||||
);
|
||||
const [backgroundBlur, setBackgroundBlur] = React.useState(
|
||||
settings.backgroundBlur,
|
||||
);
|
||||
const [backgroundBrightness, setBackgroundBrightness] = React.useState(
|
||||
settings.backgroundBrightness,
|
||||
);
|
||||
const [spinSpeed, setSpinSpeed] = React.useState(settings.spinSpeed);
|
||||
const [settingsAffectNowPlaying, setSettingsAffectNowPlaying] = React.useState(settings.settingsAffectNowPlaying);
|
||||
const [trackTitleGlow, setTrackTitleGlow] = React.useState(settings.trackTitleGlow);
|
||||
|
||||
const [settingsAffectNowPlaying, setSettingsAffectNowPlaying] =
|
||||
React.useState(settings.settingsAffectNowPlaying);
|
||||
const [trackTitleGlow, setTrackTitleGlow] = React.useState(
|
||||
settings.trackTitleGlow,
|
||||
);
|
||||
|
||||
return (
|
||||
<LunaSettings>
|
||||
<LunaSwitchSetting
|
||||
@@ -48,16 +69,16 @@ export const Settings = () => {
|
||||
}}
|
||||
/>
|
||||
<LunaSwitchSetting
|
||||
title="Track Title Glow"
|
||||
desc="Apply glow to the track title"
|
||||
checked={trackTitleGlow}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
setTrackTitleGlow((settings.trackTitleGlow = checked));
|
||||
if ((window as any).updateRadiantLyricsStyles) {
|
||||
(window as any).updateRadiantLyricsStyles();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
title="Track Title Glow"
|
||||
desc="Apply glow to the track title"
|
||||
checked={trackTitleGlow}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
setTrackTitleGlow((settings.trackTitleGlow = checked));
|
||||
if ((window as any).updateRadiantLyricsStyles) {
|
||||
(window as any).updateRadiantLyricsStyles();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<LunaSwitchSetting
|
||||
title="Hide UI Feature"
|
||||
desc="Enable hide/unhide UI functionality with toggle buttons"
|
||||
@@ -84,8 +105,13 @@ export const Settings = () => {
|
||||
desc="Apply the spinning Cover Art background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
|
||||
checked={spinningCoverEverywhere}
|
||||
onChange={(_, checked: boolean) => {
|
||||
console.log("Spinning Cover Everywhere:", checked ? "enabled" : "disabled");
|
||||
setSpinningCoverEverywhere((settings.spinningCoverEverywhere = checked));
|
||||
console.log(
|
||||
"Spinning Cover Everywhere:",
|
||||
checked ? "enabled" : "disabled",
|
||||
);
|
||||
setSpinningCoverEverywhere(
|
||||
(settings.spinningCoverEverywhere = checked),
|
||||
);
|
||||
// Update styles immediately when setting changes
|
||||
if ((window as any).updateRadiantLyricsGlobalBackground) {
|
||||
(window as any).updateRadiantLyricsGlobalBackground();
|
||||
@@ -113,31 +139,37 @@ export const Settings = () => {
|
||||
desc="Enable the spinning cover art background animation"
|
||||
checked={spinningArtEnabled}
|
||||
onChange={(_, checked: boolean) => {
|
||||
console.log("Background Cover Spin:", checked ? "enabled" : "disabled");
|
||||
console.log(
|
||||
"Background Cover Spin:",
|
||||
checked ? "enabled" : "disabled",
|
||||
);
|
||||
setSpinningArtEnabled((settings.spinningArtEnabled = checked));
|
||||
if ((window as any).updateRadiantLyricsGlobalBackground) {
|
||||
(window as any).updateRadiantLyricsGlobalBackground();
|
||||
}
|
||||
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
|
||||
if (
|
||||
settings.settingsAffectNowPlaying &&
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground
|
||||
) {
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Text Glow"
|
||||
desc="Adjust the glow size of lyrics (0-100, default: 20)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={textGlow}
|
||||
onNumber={(value: number) => {
|
||||
setTextGlow((settings.textGlow = value));
|
||||
// Update variables immediately when setting changes
|
||||
if ((window as any).updateRadiantLyricsTextGlow) {
|
||||
(window as any).updateRadiantLyricsTextGlow();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
title="Text Glow"
|
||||
desc="Adjust the glow size of lyrics (0-100, default: 20)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={textGlow}
|
||||
onNumber={(value: number) => {
|
||||
setTextGlow((settings.textGlow = value));
|
||||
// Update variables immediately when setting changes
|
||||
if ((window as any).updateRadiantLyricsTextGlow) {
|
||||
(window as any).updateRadiantLyricsTextGlow();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Background Contrast"
|
||||
desc="Adjust the contrast of the spinning background (0-200, default: 120)"
|
||||
@@ -150,7 +182,10 @@ export const Settings = () => {
|
||||
if ((window as any).updateRadiantLyricsGlobalBackground) {
|
||||
(window as any).updateRadiantLyricsGlobalBackground();
|
||||
}
|
||||
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
|
||||
if (
|
||||
settings.settingsAffectNowPlaying &&
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground
|
||||
) {
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground();
|
||||
}
|
||||
}}
|
||||
@@ -168,7 +203,10 @@ export const Settings = () => {
|
||||
if ((window as any).updateRadiantLyricsGlobalBackground) {
|
||||
(window as any).updateRadiantLyricsGlobalBackground();
|
||||
}
|
||||
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
|
||||
if (
|
||||
settings.settingsAffectNowPlaying &&
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground
|
||||
) {
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground();
|
||||
}
|
||||
}}
|
||||
@@ -186,7 +224,10 @@ export const Settings = () => {
|
||||
if ((window as any).updateRadiantLyricsGlobalBackground) {
|
||||
(window as any).updateRadiantLyricsGlobalBackground();
|
||||
}
|
||||
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
|
||||
if (
|
||||
settings.settingsAffectNowPlaying &&
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground
|
||||
) {
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground();
|
||||
}
|
||||
}}
|
||||
@@ -204,7 +245,10 @@ export const Settings = () => {
|
||||
if ((window as any).updateRadiantLyricsGlobalBackground) {
|
||||
(window as any).updateRadiantLyricsGlobalBackground();
|
||||
}
|
||||
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
|
||||
if (
|
||||
settings.settingsAffectNowPlaying &&
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground
|
||||
) {
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground();
|
||||
}
|
||||
}}
|
||||
@@ -214,8 +258,13 @@ export const Settings = () => {
|
||||
desc="Apply background settings to Now Playing view"
|
||||
checked={settingsAffectNowPlaying}
|
||||
onChange={(_, checked: boolean) => {
|
||||
console.log("Settings Affect Now Playing:", checked ? "enabled" : "disabled");
|
||||
setSettingsAffectNowPlaying((settings.settingsAffectNowPlaying = checked));
|
||||
console.log(
|
||||
"Settings Affect Now Playing:",
|
||||
checked ? "enabled" : "disabled",
|
||||
);
|
||||
setSettingsAffectNowPlaying(
|
||||
(settings.settingsAffectNowPlaying = checked),
|
||||
);
|
||||
// Update Now Playing background immediately when setting changes
|
||||
if ((window as any).updateRadiantLyricsNowPlayingBackground) {
|
||||
(window as any).updateRadiantLyricsNowPlayingBackground();
|
||||
@@ -224,4 +273,4 @@ export const Settings = () => {
|
||||
/>
|
||||
</LunaSettings>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,105 +1,105 @@
|
||||
/* Global Spinning Background Styles - PERFORMANCE OPTIMIZED */
|
||||
|
||||
.global-background-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: -3;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
/* Hardware acceleration */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: -3;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
/* Hardware acceleration */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.global-spinning-black-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.global-spinning-image {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 150vw;
|
||||
height: 150vh;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
filter: blur(80px) brightness(0.4) contrast(1.2) saturate(1);
|
||||
opacity: 1;
|
||||
animation: spinGlobal 45s linear infinite;
|
||||
will-change: transform;
|
||||
/* Hardware acceleration */
|
||||
transform-origin: center center;
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 150vw;
|
||||
height: 150vh;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
filter: blur(80px) brightness(0.4) contrast(1.2) saturate(1);
|
||||
opacity: 1;
|
||||
animation: spinGlobal 45s linear infinite;
|
||||
will-change: transform;
|
||||
/* Hardware acceleration */
|
||||
transform-origin: center center;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Performance mode optimizations - keep spinning but optimize other aspects */
|
||||
.global-spinning-image.performance-mode-static {
|
||||
/* Keep animation enabled in performance mode */
|
||||
/* Lighter blur for performance */
|
||||
filter: blur(20px) brightness(0.4) contrast(1.2) saturate(1) !important;
|
||||
/* Smaller size for performance */
|
||||
width: 120vw !important;
|
||||
height: 120vh !important;
|
||||
/* Keep animation enabled in performance mode */
|
||||
/* Lighter blur for performance */
|
||||
filter: blur(20px) brightness(0.4) contrast(1.2) saturate(1) !important;
|
||||
/* Smaller size for performance */
|
||||
width: 120vw !important;
|
||||
height: 120vh !important;
|
||||
}
|
||||
|
||||
.now-playing-background-image.performance-mode-static {
|
||||
/* Keep animation enabled in performance mode */
|
||||
/* Optimized size and effects for performance */
|
||||
width: 80vw !important;
|
||||
height: 80vh !important;
|
||||
/* Keep animation enabled in performance mode */
|
||||
/* Optimized size and effects for performance */
|
||||
width: 80vw !important;
|
||||
height: 80vh !important;
|
||||
}
|
||||
|
||||
/* Now Playing Background Container Optimization */
|
||||
.now-playing-background-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -3;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
/* Hardware acceleration */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -3;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
/* Hardware acceleration */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Optimized keyframe animations with GPU acceleration */
|
||||
@keyframes spinGlobal {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion for users who prefer it */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.global-spinning-image,
|
||||
.now-playing-background-image {
|
||||
animation: none !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
.global-spinning-image,
|
||||
.now-playing-background-image {
|
||||
animation: none !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Performance mode: optimize effects but keep spinning */
|
||||
.performance-mode .global-spinning-image,
|
||||
.performance-mode .now-playing-background-image {
|
||||
/* Keep animations but optimize filter effects */
|
||||
filter: blur(10px) brightness(0.4) contrast(1.1) !important;
|
||||
/* Keep animations but optimize filter effects */
|
||||
filter: blur(10px) brightness(0.4) contrast(1.1) !important;
|
||||
}
|
||||
|
||||
/* Make Notification Feed sidebar transparent */
|
||||
@@ -115,13 +115,13 @@ main,
|
||||
[data-test="stream-metadata"],
|
||||
[data-test="footer-player"],
|
||||
/* Notification Feed sidebar specific container */
|
||||
[class^="_feedSidebarVStack"],
|
||||
[class^="_feedSidebarVStack"],
|
||||
[class^="_feedSidebarSpacer"],
|
||||
[class^="_feedSidebarItem"],
|
||||
[class^="_feedSidebarItemDiv"],
|
||||
[class^="_cellContainer"],
|
||||
[class^="_cellTextContainer"] {
|
||||
background: unset !important;
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
/* Make sidebar and player bar semi-transparent with optimized backdrop-filter */
|
||||
@@ -129,9 +129,9 @@ main,
|
||||
[data-test="main-layout-sidebar-wrapper"],
|
||||
[class^="_bar"],
|
||||
[class^="_sidebarItem"]:hover {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
/* Performance mode: reduce backdrop blur */
|
||||
@@ -139,21 +139,21 @@ main,
|
||||
.performance-mode [data-test="main-layout-sidebar-wrapper"],
|
||||
.performance-mode [class^="_bar"],
|
||||
.performance-mode [class^="_sidebarItem"]:hover {
|
||||
backdrop-filter: blur(5px) !important;
|
||||
-webkit-backdrop-filter: blur(5px) !important;
|
||||
backdrop-filter: blur(5px) !important;
|
||||
-webkit-backdrop-filter: blur(5px) !important;
|
||||
}
|
||||
|
||||
/* Feed sidebar panel - black tint background for readability */
|
||||
[data-test="feed-sidebar"] {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
/* Performance mode: reduce sidebar backdrop blur */
|
||||
.performance-mode [data-test="feed-sidebar"] {
|
||||
backdrop-filter: blur(5px) !important;
|
||||
-webkit-backdrop-filter: blur(5px) !important;
|
||||
backdrop-filter: blur(5px) !important;
|
||||
-webkit-backdrop-filter: blur(5px) !important;
|
||||
}
|
||||
|
||||
/* Feed sidebar items - transparent */
|
||||
@@ -162,10 +162,10 @@ main,
|
||||
[class*="_cellContainer"],
|
||||
[data-test="feed-interval"],
|
||||
[data-test="feed-item"] {
|
||||
background-color: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Remove bottom gradient */
|
||||
[class^="_bottomGradient"] {
|
||||
display: none !important;
|
||||
}
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,82 +1,103 @@
|
||||
/* Font imports for lyrics */
|
||||
@font-face {
|
||||
font-family: "AbyssFont";
|
||||
font-weight: 400;
|
||||
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2");
|
||||
font-family: "AbyssFont";
|
||||
font-weight: 400;
|
||||
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2")
|
||||
format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "AbyssFont";
|
||||
font-weight: 500;
|
||||
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2");
|
||||
font-family: "AbyssFont";
|
||||
font-weight: 500;
|
||||
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2")
|
||||
format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "AbyssFont";
|
||||
font-weight: 600;
|
||||
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2");
|
||||
font-family: "AbyssFont";
|
||||
font-weight: 600;
|
||||
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2")
|
||||
format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "AbyssFont";
|
||||
font-weight: 700;
|
||||
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2");
|
||||
font-family: "AbyssFont";
|
||||
font-weight: 700;
|
||||
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2")
|
||||
format("woff2");
|
||||
}
|
||||
|
||||
/* Enhanced lyrics styling with glow effects */
|
||||
[class*="_lyricsText"] > div > span[data-current="true"] {
|
||||
text-shadow: 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff), 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
|
||||
padding-left: 20px;
|
||||
transition-duration: 0.7s;
|
||||
font-size: 55px;
|
||||
color: white !important;
|
||||
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: 700;
|
||||
text-shadow:
|
||||
0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff),
|
||||
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
|
||||
padding-left: 20px;
|
||||
transition-duration: 0.7s;
|
||||
font-size: 55px;
|
||||
color: white !important;
|
||||
font-family:
|
||||
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[class*="_lyricsText"] > div > span {
|
||||
text-shadow: 0 0 0px transparent, 0 0 0px transparent;
|
||||
transition-duration: 0.25s;
|
||||
color: rgba(128, 128, 128, 0.4);
|
||||
font-size: 40px;
|
||||
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: 700;
|
||||
text-shadow:
|
||||
0 0 0px transparent,
|
||||
0 0 0px transparent;
|
||||
transition-duration: 0.25s;
|
||||
color: rgba(128, 128, 128, 0.4);
|
||||
font-size: 40px;
|
||||
font-family:
|
||||
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[class*="_lyricsText"] > div > span:hover {
|
||||
text-shadow: 0 0 var(--rl-glow-inner, 2px) lightgray, 0 0 var(--rl-glow-outer, 20px) lightgray !important;
|
||||
color: lightgray !important;
|
||||
padding-left: 20px;
|
||||
transition-duration: 0.7s;
|
||||
text-shadow:
|
||||
0 0 var(--rl-glow-inner, 2px) lightgray,
|
||||
0 0 var(--rl-glow-outer, 20px) lightgray !important;
|
||||
color: lightgray !important;
|
||||
padding-left: 20px;
|
||||
transition-duration: 0.7s;
|
||||
}
|
||||
|
||||
/* Track title glow */
|
||||
[data-test="now-playing-track-title"] {
|
||||
/* Title text color/gradient is left to default app styling; only glow is customized. */
|
||||
text-shadow: 0 0 var(--rl-glow-inner, 1px) var(--cl-glow1, #fff), 0 0 var(--rl-glow-outer, 30px) #fff !important;
|
||||
-webkit-background-clip: initial !important;
|
||||
background-clip: initial !important;
|
||||
-webkit-text-fill-color: initial !important;
|
||||
color: inherit !important;
|
||||
/* Title text color/gradient is left to default app styling; only glow is customized. */
|
||||
text-shadow:
|
||||
0 0 var(--rl-glow-inner, 1px) var(--cl-glow1, #fff),
|
||||
0 0 var(--rl-glow-outer, 30px) #fff !important;
|
||||
-webkit-background-clip: initial !important;
|
||||
background-clip: initial !important;
|
||||
-webkit-text-fill-color: initial !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* When track title glow setting is disabled, remove glow regardless of Colorama */
|
||||
.rl-title-glow-disabled[data-test="now-playing-track-title"] {
|
||||
text-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Current line transitions */
|
||||
[class*="_lyricsText"] > div > span {
|
||||
transition: text-shadow 0.7s ease-in-out, color 0.7s ease-in-out, padding 0.7s ease-in-out !important;
|
||||
transition:
|
||||
text-shadow 0.7s ease-in-out,
|
||||
color 0.7s ease-in-out,
|
||||
padding 0.7s ease-in-out !important;
|
||||
}
|
||||
|
||||
/* Lyrics container styling */
|
||||
[class^="_lyricsContainer"] > div > div > span {
|
||||
margin-bottom: 2rem;
|
||||
opacity: 1;
|
||||
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 38px !important;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 1;
|
||||
font-family:
|
||||
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 38px !important;
|
||||
}
|
||||
|
||||
/* Reset all lyrics styling when disabled */
|
||||
@@ -85,13 +106,13 @@
|
||||
.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover,
|
||||
.lyrics-glow-disabled [data-test="now-playing-track-title"],
|
||||
.lyrics-glow-disabled [class^="_lyricsContainer"] > div > div > span {
|
||||
text-shadow: none !important;
|
||||
padding-left: 0 !important;
|
||||
transition: none !important;
|
||||
font-size: inherit !important;
|
||||
color: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
margin-bottom: inherit !important;
|
||||
opacity: inherit !important;
|
||||
}
|
||||
text-shadow: none !important;
|
||||
padding-left: 0 !important;
|
||||
transition: none !important;
|
||||
font-size: inherit !important;
|
||||
color: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
margin-bottom: inherit !important;
|
||||
opacity: inherit !important;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
/* 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.5s ease-in-out !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.5s ease-in-out !important;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [data-test="footer-player"]:hover {
|
||||
opacity: 1 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Also show player bar when hovering over the bottom area - only when UI is hidden */
|
||||
.radiant-lyrics-ui-hidden body.rl-footer-hover [data-test="footer-player"],
|
||||
.radiant-lyrics-ui-hidden [data-test="footer-player"]:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,32 @@
|
||||
/* Only apply styles when UI is hidden */
|
||||
.radiant-lyrics-ui-hidden [class*="tabItems"] {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* Default state - visible */
|
||||
[class*="tabItems"] {
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* Tab items stay hidden - no hover functionality (if the song changes and it doesnt have lyrics.. and ya want them back.. you can unhide the UI <3) */
|
||||
|
||||
.radiant-lyrics-ui-hidden [data-test="header-container"]:not(.rl-header-has-hide-btn) {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
.radiant-lyrics-ui-hidden
|
||||
[data-test="header-container"]:not(.rl-header-has-hide-btn) {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* Keep header visible if it contains the Hide UI button, but hide its other children */
|
||||
.radiant-lyrics-ui-hidden [data-test="header-container"].rl-header-has-hide-btn > *:not(.hide-ui-button) {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
.radiant-lyrics-ui-hidden [data-test="header-container"].rl-header-has-hide-btn
|
||||
> *:not(.hide-ui-button) {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* Default state for header */
|
||||
[data-test="header-container"] {
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* Only prevent specific text elements in player bar from being affected by margin adjustments */
|
||||
@@ -32,30 +34,30 @@
|
||||
[data-test="footer-player"] [class*="_artistName"],
|
||||
[data-test="footer-player"] [class*="_trackInfo"],
|
||||
[data-test="footer-player"] [class*="_trackContainer"] {
|
||||
margin-top: 0 !important;
|
||||
transform: none !important;
|
||||
margin-top: 0 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Immediate hide class for unhide button with smooth transition (had issues with the fade out.. so I removed it) */
|
||||
.hide-immediately {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
[class^="_bar"] {
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [class^="_bar"]>*:not(.hide-ui-button) {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
.radiant-lyrics-ui-hidden [class^="_bar"] > *:not(.hide-ui-button) {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* Default state for bar elements */
|
||||
[class^="_bar"]>* {
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
[class^="_bar"] > * {
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* Hide search box and make it non-interactive */
|
||||
@@ -73,54 +75,81 @@
|
||||
.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;
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/* Hide bottom left controls completely - no hover functionality */
|
||||
/* Exclude heart button 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"] *),
|
||||
.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
|
||||
[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*="_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"] *),
|
||||
.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 - (idk if this is needed.. but it's here) */
|
||||
.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),
|
||||
.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 - (idk if this is needed.. but it's here) */
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* No hover functionality in Hide UI Mode - buttons stay hidden.. yea thats right, you heard me */
|
||||
|
||||
/* Default state for control buttons */
|
||||
[data-test="add-to-playlist"],
|
||||
[data-test="remove-from-playlist"],
|
||||
[data-test="remove-from-playlist"],
|
||||
[data-test="like-toggle"],
|
||||
[data-test="dislike-toggle"],
|
||||
[data-test="favorite-toggle"],
|
||||
@@ -146,33 +175,38 @@ button[aria-label*="Favorite"],
|
||||
button[aria-label*="Heart"],
|
||||
[class*="_nowPlayingContainer"] button[class*="_button"]:not(.unhide-ui-button),
|
||||
[class*="_nowPlayingContainer"] [class*="_iconButton"]:not(.unhide-ui-button),
|
||||
[class*="_nowPlayingContainer"] > div > div:first-child button:not(.unhide-ui-button),
|
||||
[class*="_nowPlayingContainer"] > div:first-child button:not(.unhide-ui-button) {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
[class*="_nowPlayingContainer"]
|
||||
> div
|
||||
> div:first-child
|
||||
button:not(.unhide-ui-button),
|
||||
[class*="_nowPlayingContainer"]
|
||||
> div:first-child
|
||||
button:not(.unhide-ui-button) {
|
||||
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;
|
||||
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;
|
||||
transform: translateX(80px) !important;
|
||||
}
|
||||
|
||||
/* Smooth track info wrapper movement when UI is hidden (Arists & Track Title) */
|
||||
[class*="_infoWrapper"],
|
||||
[class*="_textContainer"] {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [class*="_infoWrapper"],
|
||||
.radiant-lyrics-ui-hidden [class*="_textContainer"] {
|
||||
transform: translateX(40px) !important;
|
||||
transform: translateX(40px) !important;
|
||||
}
|
||||
|
||||
/* Move parent containers instead of lyrics container directly to preserve gradient fade */
|
||||
@@ -183,7 +217,7 @@ figure[class*="_albumImage"] {
|
||||
[class*="_sidePanel"],
|
||||
[class*="_lyricsSection"],
|
||||
[class*="_lyricsWrapper"] {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [data-test="stream-metadata"],
|
||||
@@ -193,32 +227,46 @@ figure[class*="_albumImage"] {
|
||||
.radiant-lyrics-ui-hidden [class*="_sidePanel"],
|
||||
.radiant-lyrics-ui-hidden [class*="_lyricsSection"],
|
||||
.radiant-lyrics-ui-hidden [class*="_lyricsWrapper"] {
|
||||
transform: translateX(60px) translateY(-70px) !important;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user