Add Audio Viz to Now Playing & Remove Lyrics Scrollbar

plugins/audio-visualizer-luna/src/index.ts

@@ -7,17 +7,11 @@ import visualizerStyles from "file://styles.css?minify";
 
 export const { trace } = Tracer("[Audio Visualizer]");
 
-// Helper function for consistent logging
 const log = (message: string) => console.log(`[Audio Visualizer] ${message}`);
-const warn = (message: string) => console.warn(`[Audio Visualizer] ${message}`);
-const error = (message: string) =>
-	console.error(`[Audio Visualizer] ${message}`);
 export { Settings };
 
-// Basic config with settings
 const config = {
 	enabled: true,
-	position: "left" as "left" | "right",
 	width: 200,
 	height: 40,
 	get barCount() {
@@ -31,7 +25,6 @@ const config = {
 	},
 	sensitivity: 1.5,
 	smoothing: 0.8,
-	visualizerType: "bars" as "bars" | "waveform" | "circular",
 };
 
 // Clean up resources
@@ -49,10 +42,15 @@ let animationId: number | null = null;
 let currentAudioElement: HTMLAudioElement | null = null;
 let isSourceConnected: boolean = false;
 
-// Canvas and container elements
+// Each placement gets its own container/canvas/context
-let visualizerContainer: HTMLDivElement | null = null;
+interface VisualizerSlot {
-let canvas: HTMLCanvasElement | null = null;
+	container: HTMLDivElement | null;
-let canvasContext: CanvasRenderingContext2D | null = null;
+	canvas: HTMLCanvasElement | null;
+	ctx: CanvasRenderingContext2D | null;
+}
+
+const navSlot: VisualizerSlot = { container: null, canvas: null, ctx: null };
+const npSlot: VisualizerSlot = { container: null, canvas: null, ctx: null };
 
 // Find the audio element - this is a bit of a hack but it works
 const findAudioElement = (): HTMLAudioElement | null => {
@@ -140,10 +138,7 @@ const initializeAudioVisualizer = async (): Promise<void> => {
 			audioContext.resume().catch(() => {}); // Fire and forget
 		}
 
-		// Create UI only if it doesn't exist
+		createVisualizerUI();
-		if (!visualizerContainer) {
-			createVisualizerUI();
-		}
 
 		// Start animation only if not already running
 		if (!animationId) {
@@ -155,120 +150,116 @@ const initializeAudioVisualizer = async (): Promise<void> => {
 	}
 };
 
-// Create the visualizer UI container and canvas
+const makeSlotElements = (): { container: HTMLDivElement; canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } | null => {
-const createVisualizerUI = (): void => {
+	const container = document.createElement("div");
-	// Remove existing visualizer if it exists
+	container.className = "audio-visualizer-container";
-	removeVisualizerUI();
+	container.style.cssText = `
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 8px;
+		padding: 4px;
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+	`;
 
-	if (!config.enabled) return;
+	const cvs = document.createElement("canvas");
+	cvs.width = config.width;
+	cvs.height = config.height;
+	cvs.style.cssText = `
+		width: ${config.width}px;
+		height: ${config.height}px;
+		border-radius: 4px;
+	`;
 
-	// Find the search bar
+	container.appendChild(cvs);
-	const searchField = document.querySelector(
+	const ctx = cvs.getContext("2d");
-		'input[class*="_searchField"]',
+	if (!ctx) return null;
-	) as HTMLInputElement;
+	return { container, canvas: cvs, ctx };
-	if (!searchField) {
+};
-		warn("Search field not found");
+
-		return;
+const clearSlot = (slot: VisualizerSlot): void => {
-	}
+	slot.container?.remove();
-
+	slot.container = null;
-	const searchContainer = searchField.parentElement;
+	slot.canvas = null;
-	if (!searchContainer) {
+	slot.ctx = null;
-		warn("Search container not found");
+};
-		return;
+
-	}
+const ensureNavSlot = (): void => {
-
+	if (navSlot.container?.isConnected) return;
-	// Create visualizer container
+	clearSlot(navSlot);
-	visualizerContainer = document.createElement("div");
+
-	visualizerContainer.id = "audio-visualizer-container";
+	const searchField = document.querySelector('input[class*="_searchField"]') as HTMLInputElement;
-	visualizerContainer.style.cssText = `
+	if (!searchField) return;
-        display: flex;
+	const searchContainer = searchField.parentElement;
-        align-items: center;
+	if (!searchContainer?.parentElement) return;
-        justify-content: center;
+
-        margin-${config.position === "left" ? "right" : "left"}: 12px;
+	const els = makeSlotElements();
-        background: rgba(0, 0, 0, 0.2);
+	if (!els) return;
-        border-radius: 8px;
+	els.container.style.marginRight = "12px";
-        padding: 4px;
+	Object.assign(navSlot, els);
-        backdrop-filter: blur(10px);
+	searchContainer.parentElement.insertBefore(els.container, searchContainer);
-        -webkit-backdrop-filter: blur(10px);
+};
-    `;
+
-
+const ensureNpSlot = (): void => {
-	// Create canvas
+	if (npSlot.container?.isConnected) return;
-	canvas = document.createElement("canvas");
+	clearSlot(npSlot);
-	canvas.width = config.width;
+
-	canvas.height = config.height;
+	const artistInfo = document.querySelector('[data-test="artist-info"]');
-	canvas.style.cssText = `
+	if (!artistInfo) return;
-        width: ${config.width}px;
+	const leftContent = artistInfo.parentElement;
-        height: ${config.height}px;
+	if (!leftContent) return;
-        border-radius: 4px;
+
-    `;
+	const els = makeSlotElements();
-
+	if (!els) return;
-	visualizerContainer.appendChild(canvas);
+	els.container.style.marginLeft = "12px";
-	canvasContext = canvas.getContext("2d");
+	Object.assign(npSlot, els);
-
+	leftContent.insertBefore(els.container, artistInfo.nextSibling);
-	// Insert visualizer next to search bar
+};
-	if (config.position === "left") {
+
-		searchContainer.parentElement?.insertBefore(
+const createVisualizerUI = (): void => {
-			visualizerContainer,
+	if (!config.enabled) return;
-			searchContainer,
+	ensureNavSlot();
-		);
+	ensureNpSlot();
-	} else {
-		searchContainer.parentElement?.insertBefore(
-			visualizerContainer,
-			searchContainer.nextSibling,
-		);
-	}
 };
 
-// Remove visualizer UI
 const removeVisualizerUI = (): void => {
-	if (visualizerContainer) {
+	clearSlot(navSlot);
-		visualizerContainer.remove();
+	clearSlot(npSlot);
-		visualizerContainer = null;
-		canvas = null;
-		canvasContext = null;
-	}
 };
 
 // Animation loop for rendering visualizer
 const animate = (): void => {
-	if (!canvasContext || !canvas) {
+	// Re-attach slots that got disconnected from the DOM
-		animationId = null;
+	createVisualizerUI();
+
+	const slots = [navSlot, npSlot].filter(s => s.ctx && s.canvas);
+	if (slots.length === 0) {
+		animationId = requestAnimationFrame(animate);
 		return;
 	}
 
-	// Update canvas color in case it changed
-	canvasContext.fillStyle = config.color;
-	canvasContext.strokeStyle = config.color;
-
-	// Check if we have real audio data - this might not be needed but its a good idea
 	let hasRealAudio = false;
 	if (analyser && dataArray) {
 		analyser.getByteFrequencyData(dataArray);
-		// Check if there's actual audio signal (not just silence)
 		const avgVolume =
 			dataArray.reduce((sum, val) => sum + val, 0) / dataArray.length;
-		hasRealAudio = avgVolume > 5; // Threshold for detecting actual audio
+		hasRealAudio = avgVolume > 5;
 	}
 
-	// Clear canvas
+	for (const slot of slots) {
-	canvasContext.clearRect(0, 0, canvas.width, canvas.height);
+		const ctx = slot.ctx!;
+		const cvs = slot.canvas!;
+		ctx.fillStyle = config.color;
+		ctx.strokeStyle = config.color;
+		ctx.clearRect(0, 0, cvs.width, cvs.height);
 
-	if (hasRealAudio && analyser && dataArray) {
+		if (hasRealAudio && analyser && dataArray) {
-		// Draw real audio visualization
+			drawBars(ctx, cvs);
-		switch (config.visualizerType) {
+		} else {
-			case "bars": // Is implemented YAYYY (default)
+			drawScrollingWave(ctx, cvs);
-				drawBars();
-				break;
-			case "waveform": // Not implemented yet
-				drawWaveform();
-				break;
-			case "circular": // Not implemented yet
-				drawCircular();
-				break;
 		}
-	} else {
-		// Draw cool scrolling wave effect when no audio
-		drawScrollingWave();
 	}
 
 	animationId = requestAnimationFrame(animate);
@@ -291,67 +282,54 @@ const drawRoundedRect = (
 	ctx.fill();
 };
 
-// Draw scrolling wave effect when no audio is detected
+const drawScrollingWave = (ctx: CanvasRenderingContext2D, cvs: HTMLCanvasElement): void => {
-const drawScrollingWave = (): void => {
+	waveTime += 0.05 / [navSlot, npSlot].filter(s => s.ctx).length;
-	if (!canvasContext || !canvas) return;
-
-	waveTime += 0.05; // Speed of wave animation
 
 	const barCount = config.barCount;
-	const barWidth = canvas.width / barCount;
+	const barWidth = cvs.width / barCount;
-	const maxHeight = canvas.height * 0.6;
+	const maxHeight = cvs.height * 0.6;
 
-	canvasContext.fillStyle = config.color;
+	ctx.fillStyle = config.color;
 
 	for (let i = 0; i < barCount; i++) {
-		// Create a sine wave that scrolls back and forth
 		const x = i / barCount;
 		const wave1 = Math.sin(x * Math.PI * 2 + waveTime) * 0.3;
 		const wave2 = Math.sin(x * Math.PI * 4 + waveTime * 1.3) * 0.2;
 		const wave3 = Math.sin(x * Math.PI * 6 + waveTime * 0.7) * 0.1;
-
+		const combinedWave = (wave1 + wave2 + wave3 + 1) / 2;
-		// Combine waves for complex pattern
-		const combinedWave = (wave1 + wave2 + wave3 + 1) / 2; // Normalize to 0-1
-
-		// Add a traveling wave effect
 		const travelWave = Math.sin(x * Math.PI * 3 - waveTime * 2) * 0.5 + 0.5;
-
+		const barHeight = maxHeight * combinedWave * travelWave * 0.8 + 2;
-		// Final height calculation
-		const barHeight = maxHeight * combinedWave * travelWave * 0.8 + 2; // Minimum height of 2px
 
 		const xPos = i * barWidth;
-		const yPos = (canvas.height - barHeight) / 2;
+		const yPos = (cvs.height - barHeight) / 2;
 
-		// Draw rounded or square bars based on setting
 		if (config.barRounding) {
-			drawRoundedRect(canvasContext, xPos, yPos, barWidth - 1, barHeight, 2);
+			drawRoundedRect(ctx, xPos, yPos, barWidth - 1, barHeight, 2);
 		} else {
-			canvasContext.fillRect(xPos, yPos, barWidth - 1, barHeight);
+			ctx.fillRect(xPos, yPos, barWidth - 1, barHeight);
 		}
 	}
 };
 
-// Draw frequency bars - default
+const drawBars = (ctx: CanvasRenderingContext2D, cvs: HTMLCanvasElement): void => {
-const drawBars = (): void => {
+	if (!dataArray) return;
-	if (!canvasContext || !dataArray || !canvas) return;
 
-	const barWidth = canvas.width / config.barCount;
+	const barWidth = cvs.width / config.barCount;
-	const heightScale = canvas.height / 255;
+	const heightScale = cvs.height / 255;
 
-	canvasContext.fillStyle = config.color;
+	ctx.fillStyle = config.color;
 
 	for (let i = 0; i < config.barCount; i++) {
 		const dataIndex = Math.floor(i * (dataArray.length / config.barCount));
 		const barHeight = dataArray[dataIndex] * config.sensitivity * heightScale;
 
 		const x = i * barWidth;
-		const y = canvas.height - barHeight;
+		const y = cvs.height - barHeight;
 
-		// Draw rounded or square bars based on setting
 		if (config.barRounding) {
-			drawRoundedRect(canvasContext, x, y, barWidth - 1, barHeight, 2);
+			drawRoundedRect(ctx, x, y, barWidth - 1, barHeight, 2);
 		} else {
-			canvasContext.fillRect(x, y, barWidth - 1, barHeight);
+			ctx.fillRect(x, y, barWidth - 1, barHeight);
 		}
 	}
 };
@@ -412,23 +390,23 @@ const drawBars = (): void => {
 //     }
 // };
 
-// Update visualizer settings
 const updateAudioVisualizer = (): void => {
 	if (analyser) {
-		// use a fixed size that provides enough frequency bins
+		analyser.fftSize = 512;
-		analyser.fftSize = 512; // Fixed power of 2 - important
 		analyser.smoothingTimeConstant = config.smoothing;
 		dataArray = new Uint8Array(analyser.frequencyBinCount);
 	}
 
-	if (canvas) {
+	for (const slot of [navSlot, npSlot]) {
-		canvas.width = config.width;
+		if (slot.canvas) {
-		canvas.height = config.height;
+			slot.canvas.width = config.width;
-		canvas.style.width = `${config.width}px`;
+			slot.canvas.height = config.height;
-		canvas.style.height = `${config.height}px`;
+			slot.canvas.style.width = `${config.width}px`;
+			slot.canvas.style.height = `${config.height}px`;
+		}
 	}
 
-	// Recreate UI if position changed
+	removeVisualizerUI();
 	createVisualizerUI();
 };
 

plugins/audio-visualizer-luna/src/styles.css

@@ -1,50 +1,40 @@
-/* Audio Visualizer CSS - Only applies to the Visualizer */
+/* Audio Visualizer CSS */
 
-#audio-visualizer-container {
+.audio-visualizer-container {
 	transition: all 0.3s ease-in-out;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 	border: 1px solid rgba(255, 255, 255, 0.1);
+	animation: av-fadeIn 0.5s ease-out;
 }
 
-#audio-visualizer-container:hover {
+.audio-visualizer-container:hover {
 	transform: scale(1.02);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
-#audio-visualizer-container canvas {
+.audio-visualizer-container canvas {
 	display: block;
 	transition: all 0.3s ease-in-out;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-	#audio-visualizer-container {
+	.audio-visualizer-container {
 		margin: 4px;
 		padding: 2px;
 	}
 
-	#audio-visualizer-container canvas {
+	.audio-visualizer-container canvas {
 		max-width: 150px;
 		max-height: 30px;
 	}
 }
 
-/* Where to put the thingy */
+.audio-visualizer-container.active {
-[class*="_searchField"] {
-	transition: all 0.3s ease-in-out;
-}
-
-[data-type="search-field"] {
-	min-width: 220px !important;
-}
-
-/* Shadow when active - doesnt seem to only apply when active but thats better */
-#audio-visualizer-container.active {
 	box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
 }
 
-/* Fade in animation */
+@keyframes av-fadeIn {
-@keyframes fadeIn {
 	from {
 		opacity: 0;
 		transform: scale(0.8);
@@ -55,6 +45,6 @@
 	}
 }
 
-#audio-visualizer-container {
+[data-type="search-field"] {
-	animation: fadeIn 0.5s ease-out;
+	min-width: 220px !important;
 }

plugins/colorama-lyrics-luna/src/Settings.tsx

@@ -8,53 +8,24 @@ declare global {
 	}
 }
 
-// Define a typed onChange signature for the switch
 type SwitchChangeHandler = (
 	event: React.ChangeEvent<HTMLInputElement> | null,
 	checked: boolean,
 ) => void;
 
-export type ColoramaMode =
-	| "single"
-	| "gradient-experimental"
-	| "cover"
-	| "cover-gradient";
-
 export const settings = await ReactiveStore.getPluginStorage("ColoramaLyrics", {
 	enabled: true,
-	mode: "single" as ColoramaMode,
-	// Store colors as RGB hex (#RRGGBB) and opacity separately (0-100)
 	singleColor: "#FFFFFF",
 	singleAlpha: 100,
-	gradientStart: "#FFFFFF",
-	gradientStartAlpha: 100,
-	gradientEnd: "#AAFFFF",
-	gradientEndAlpha: 100,
-	gradientAngle: 0,
 	customColors: [] as string[],
 	excludeInactive: false,
 });
 
 export const Settings = () => {
-	// const [enabled, setEnabled] = React.useState(settings.enabled);
-	const [mode, setMode] = React.useState<ColoramaMode>(settings.mode);
 	const [singleColor, setSingleColor] = React.useState(settings.singleColor);
 	const [singleAlpha, setSingleAlpha] = React.useState<number>(
 		settings.singleAlpha ?? 100,
 	);
-	const [gradientStart, setGradientStart] = React.useState(
-		settings.gradientStart,
-	);
-	const [gradientStartAlpha, setGradientStartAlpha] = React.useState<number>(
-		settings.gradientStartAlpha ?? 100,
-	);
-	const [gradientEnd, setGradientEnd] = React.useState(settings.gradientEnd);
-	const [gradientEndAlpha, setGradientEndAlpha] = React.useState<number>(
-		settings.gradientEndAlpha ?? 100,
-	);
-	const [gradientAngle, setGradientAngle] = React.useState(
-		settings.gradientAngle,
-	);
 	const [customInput, setCustomInput] = React.useState(settings.singleColor);
 	const [customColors, setCustomColors] = React.useState(settings.customColors);
 	const [showPicker, setShowPicker] = React.useState(false);
@@ -63,9 +34,6 @@ export const Settings = () => {
 	const [excludeInactive, setExcludeInactive] = React.useState(
 		settings.excludeInactive,
 	);
-	const [activeEndpoint, setActiveEndpoint] = React.useState<
-		"single" | "start" | "end"
-	>("single");
 	const AnySwitch = LunaSwitchSetting as unknown as React.ComponentType<{
 		title: string;
 		desc?: string;
@@ -73,28 +41,23 @@ export const Settings = () => {
 		onChange: SwitchChangeHandler;
 	}>;
 
-	// Helper for HEX normalization
 	const normalizeToRGB = (
 		hex: string,
 		fallback: string = "#FFFFFF",
 	): string => {
 		let v = hex.trim().toLowerCase();
 		if (!v.startsWith("#")) v = `#${v}`;
-		// #rgb or #rgba -> expand
 		if (/^#([0-9a-f]{3,4})$/.test(v)) {
 			const m = v.slice(1);
 			const r = m[0];
 			const g = m[1];
 			const b = m[2];
-			// ignore alpha if provided (#rgba)
 			return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
 		}
-		// #aarrggbb -> strip alpha
 		if (/^#([0-9a-f]{8})$/.test(v)) {
 			const rrggbb = v.slice(3);
 			return `#${rrggbb}`.toUpperCase();
 		}
-		// #rrggbb
 		if (/^#([0-9a-f]{6})$/.test(v)) return v.toUpperCase();
 		return fallback;
 	};
@@ -121,8 +84,7 @@ export const Settings = () => {
 		"#1976D2",
 	];
 
-	const openPicker = (endpoint: "single" | "start" | "end" = "single") => {
+	const openPicker = () => {
-		setActiveEndpoint(endpoint);
 		setShowPicker(true);
 		setShouldRender(true);
 		setTimeout(() => setIsAnimatingIn(true), 10);
@@ -140,22 +102,10 @@ export const Settings = () => {
 	const applyCustomInputColor = (raw: string, updateInput: boolean): void => {
 		const trimmed = raw.trim();
 		if (!hexColorRegex.test(trimmed)) return;
-		if (mode === "single") {
+		const next = normalizeToRGB(trimmed);
-			const next = normalizeToRGB(trimmed);
+		settings.singleColor = next;
-			settings.singleColor = next;
+		setSingleColor(next);
-			setSingleColor(next);
+		if (updateInput) setCustomInput(next);
-			if (updateInput) setCustomInput(next);
-		} else if (mode === "gradient-experimental") {
-			const next = normalizeToRGB(trimmed);
-			if (activeEndpoint === "end") {
-				settings.gradientEnd = next;
-				setGradientEnd(next);
-			} else {
-				settings.gradientStart = next;
-				setGradientStart(next);
-			}
-			if (updateInput) setCustomInput(next);
-		}
 		requestApply();
 	};
 
@@ -172,12 +122,6 @@ export const Settings = () => {
 		}
 	};
 
-	// const removeCustomColor = (color: string) => {
-	// 	const updated = customColors.filter((c) => c !== color);
-	// 	setCustomColors(updated);
-	// 	settings.customColors = updated;
-	// };
-
 	const allColors = [...colorPresets, ...customColors];
 
 	const requestApply = () => {
@@ -186,66 +130,11 @@ export const Settings = () => {
 
 	return (
 		<LunaSettings>
-			{/* Mode selection via dropdown (aligned right) */}
+			{/* Single color picker button */}
 			<div
 				style={{
 					padding: "8px 0",
 					display: "flex",
-					alignItems: "center",
-					gap: 12,
-				}}
-			>
-				<div style={{ display: "flex", flexDirection: "column" }}>
-					<div style={{ fontWeight: "normal", fontSize: "1.075rem" }}>Mode</div>
-					<div style={{ opacity: 0.7, fontSize: 14 }}>
-						Choose how lyrics are colored
-					</div>
-				</div>
-				<select
-					value={mode}
-					onChange={(e) => {
-						const next = e.target.value as ColoramaMode;
-						settings.mode = next;
-						setMode(next);
-						requestApply();
-					}}
-					style={{
-						padding: "6px 10px",
-						borderRadius: 6,
-						border: "1px solid rgba(255,255,255,0.2)",
-						background: "rgba(255,255,255,0.08)",
-						color: "#fff",
-						cursor: "pointer",
-						marginLeft: "auto",
-						minWidth: 180,
-					}}
-				>
-					<option value="single" style={{ color: "#000", background: "#fff" }}>
-						Single
-					</option>
-					<option
-						value="gradient-experimental"
-						style={{ color: "#000", background: "#fff" }}
-					>
-						Gradient - Experimental
-					</option>
-					<option value="cover" style={{ color: "#000", background: "#fff" }}>
-						Cover - Experimental
-					</option>
-					<option
-						value="cover-gradient"
-						style={{ color: "#000", background: "#fff" }}
-					>
-						Cover (Gradient) - Experimental
-					</option>
-				</select>
-			</div>
-
-			{/* Single color */}
-			<div
-				style={{
-					padding: "8px 0",
-					display: mode === "single" ? "flex" : "none",
 					justifyContent: "space-between",
 					alignItems: "center",
 				}}
@@ -272,7 +161,7 @@ export const Settings = () => {
 				>
 					<button
 						type="button"
-						onClick={() => (showPicker ? closePicker() : openPicker("single"))}
+						onClick={() => (showPicker ? closePicker() : openPicker())}
 						style={{
 							width: 32,
 							height: 32,
@@ -285,84 +174,7 @@ export const Settings = () => {
 				</div>
 			</div>
 
-			{/* Gradient controls (open picker) */}
+			{/* Color picker modal */}
-			<div
-				style={{
-					padding: "8px 0",
-					display: mode === "gradient-experimental" ? "flex" : "none",
-					justifyContent: "space-between",
-					alignItems: "center",
-				}}
-			>
-				<div>
-					<div
-						style={{
-							fontWeight: "normal",
-							fontSize: "1.075rem",
-							marginBottom: 4,
-						}}
-					>
-						Gradient (Experimental)
-					</div>
-					<div style={{ opacity: 0.7, fontSize: 14 }}>Set colors & angle</div>
-				</div>
-				<button
-					type="button"
-					onClick={() => {
-						setCustomInput(gradientStart);
-						openPicker("start");
-					}}
-					style={{
-						padding: "8px 12px",
-						borderRadius: 8,
-						border: "1px solid rgba(255,255,255,0.2)",
-						background: "rgba(255,255,255,0.08)",
-						color: "#fff",
-						cursor: "pointer",
-					}}
-				>
-					Configure
-				</button>
-			</div>
-
-			{/* Cover gradient controls (open picker for angle) */}
-			<div
-				style={{
-					padding: "8px 0",
-					display: mode === "cover-gradient" ? "flex" : "none",
-					justifyContent: "space-between",
-					alignItems: "center",
-				}}
-			>
-				<div>
-					<div
-						style={{
-							fontWeight: "normal",
-							fontSize: "1.075rem",
-							marginBottom: 4,
-						}}
-					>
-						Cover (Gradient) - Experimental
-					</div>
-					<div style={{ opacity: 0.7, fontSize: 14 }}>Set angle</div>
-				</div>
-				<button
-					type="button"
-					onClick={() => openPicker("start")}
-					style={{
-						padding: "8px 12px",
-						borderRadius: 8,
-						border: "1px solid rgba(255,255,255,0.2)",
-						background: "rgba(255,255,255,0.08)",
-						color: "#fff",
-						cursor: "pointer",
-					}}
-				>
-					Configure
-				</button>
-			</div>
-
-			{/* Modal for picking and managing colors (reused) */}
 			{shouldRender && (
 				<>
 					<button
@@ -415,369 +227,122 @@ export const Settings = () => {
 								fontSize: 14,
 							}}
 						>
-							{mode === "single" ? "Single Color" : "Gradient Colors"}
+							Lyrics Color
 						</div>
-						{mode === "gradient-experimental" && (
+						<div
-							<div
+							style={{
-								style={{
+								display: "grid",
-									display: "flex",
+								gridTemplateColumns: "repeat(7, 1fr)",
-									gap: 8,
+								gap: 8,
-									alignItems: "center",
+								marginBottom: 16,
-									marginBottom: 12,
+							}}
-								}}
+						>
-							>
+							{allColors.map((color) => (
-								<div style={{ color: "rgba(255,255,255,0.7)", fontSize: 12 }}>
-									Editing
-								</div>
-								<button
-									onClick={() => {
-										setActiveEndpoint("start");
-										setCustomInput(gradientStart);
-									}}
-									style={{
-										display: "flex",
-										alignItems: "center",
-										gap: 8,
-										padding: "6px 10px",
-										borderRadius: 8,
-										border:
-											activeEndpoint === "start"
-												? "1px solid rgba(255,255,255,0.5)"
-												: "1px solid rgba(255,255,255,0.2)",
-										background: "rgba(255,255,255,0.05)",
-										color: "#fff",
-										cursor: "pointer",
-									}}
-									type="button"
-								>
-									<span
-										style={{
-											width: 14,
-											height: 14,
-											borderRadius: 3,
-											background: normalizeToRGB(gradientStart),
-											border: "1px solid rgba(255,255,255,0.3)",
-										}}
-									/>
-									<span style={{ fontSize: 12 }}>Start</span>
-								</button>
 								<button
+									key={color}
 									type="button"
 									onClick={() => {
-										setActiveEndpoint("end");
+										const next = normalizeToRGB(color);
-										setCustomInput(gradientEnd);
+										settings.singleColor = next;
+										setSingleColor(next);
+										setCustomInput(next);
+										requestApply();
 									}}
 									style={{
-										display: "flex",
+										width: 32,
-										alignItems: "center",
+										height: 32,
-										gap: 8,
+										borderRadius: 6,
-										padding: "6px 10px",
+										border: "1px solid rgba(255,255,255,0.2)",
-										borderRadius: 8,
+										background: normalizeToRGB(color),
-										border:
-											activeEndpoint === "end"
-												? "1px solid rgba(255,255,255,0.5)"
-												: "1px solid rgba(255,255,255,0.2)",
-										background: "rgba(255,255,255,0.05)",
-										color: "#fff",
 										cursor: "pointer",
 									}}
-								>
+								/>
-									<span
+							))}
-										style={{
+						</div>
-											width: 14,
+						<div style={{ marginBottom: 12 }}>
-											height: 14,
-											borderRadius: 3,
-											background: normalizeToRGB(gradientEnd),
-											border: "1px solid rgba(255,255,255,0.3)",
-										}}
-									/>
-									<span style={{ fontSize: 12 }}>End</span>
-								</button>
-							</div>
-						)}
-						{mode !== "cover-gradient" && (
 							<div
 								style={{
-									display: "grid",
+									color: "rgba(255,255,255,0.7)",
-									gridTemplateColumns: "repeat(7, 1fr)",
+									fontSize: 12,
-									gap: 8,
+									marginBottom: 6,
-									marginBottom: 16,
 								}}
 							>
-								{allColors.map((color) => (
+								Custom Hex (#RRGGBB)
-									<button
-										key={color}
-										type="button"
-										onClick={() => {
-											const next = normalizeToRGB(color);
-											if (mode === "single") {
-												settings.singleColor = next;
-												setSingleColor(next);
-											} else if (mode === "gradient-experimental") {
-												if (activeEndpoint === "end") {
-													settings.gradientEnd = next;
-													setGradientEnd(next);
-												} else {
-													settings.gradientStart = next;
-													setGradientStart(next);
-												}
-											}
-											setCustomInput(next);
-											requestApply();
-										}}
-										style={{
-											width: 32,
-											height: 32,
-											borderRadius: 6,
-											border: "1px solid rgba(255,255,255,0.2)",
-											background: normalizeToRGB(color),
-											cursor: "pointer",
-										}}
-									/>
-								))}
 							</div>
-						)}
+							<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
-						{mode !== "cover-gradient" && (
+								<input
-							<div style={{ marginBottom: 12 }}>
+									type="text"
-								<div
+									value={customInput}
-									style={{
+									onChange={(e) => setCustomInput(e.target.value)}
-										color: "rgba(255,255,255,0.7)",
+									onKeyDown={(e) => {
-										fontSize: 12,
+										if (e.key === "Enter") {
-										marginBottom: 6,
+											applyCustomInputColor(customInput, true);
-									}}
-								>
-									Custom Hex (#RRGGBB)
-								</div>
-								<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
-									<input
-										type="text"
-										value={customInput}
-										onChange={(e) => setCustomInput(e.target.value)}
-										onKeyDown={(e) => {
-											if (e.key === "Enter") {
-												applyCustomInputColor(customInput, true);
-												addCustomColor();
-											}
-										}}
-										placeholder="#RRGGBB"
-										style={{
-											flex: 1,
-											padding: "8px 12px",
-											borderRadius: 6,
-											border: "1px solid rgba(255,255,255,0.2)",
-											background: "rgba(255,255,255,0.1)",
-											color: "#fff",
-											fontSize: 14,
-											fontFamily: "monospace",
-											boxSizing: "border-box",
-										}}
-									/>
-									<button
-										onClick={() => {
-											applyCustomInputColor(customInput, false);
 											addCustomColor();
-										}}
+										}
-										style={{
+									}}
-											width: 32,
+									placeholder="#RRGGBB"
-											height: 32,
-											borderRadius: 6,
-											border: "1px solid rgba(255,255,255,0.3)",
-											background: "rgba(255,255,255,0.15)",
-											color: "#fff",
-											cursor: "pointer",
-											fontSize: 16,
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "center",
-											transition: "all 0.2s ease",
-										}}
-										type="button"
-									>
-										+
-									</button>
-								</div>
-							</div>
-						)}
-						{/* Sliders inside picker based on mode */}
-						{mode === "single" && (
-							<div style={{ marginBottom: 16 }}>
-								<div
 									style={{
-										color: "rgba(255,255,255,0.8)",
+										flex: 1,
-										fontSize: 12,
+										padding: "8px 12px",
-										marginBottom: 6,
+										borderRadius: 6,
+										border: "1px solid rgba(255,255,255,0.2)",
+										background: "rgba(255,255,255,0.1)",
+										color: "#fff",
+										fontSize: 14,
+										fontFamily: "monospace",
+										boxSizing: "border-box",
 									}}
-								>
-									Alpha
-								</div>
-								<input
-									type="range"
-									min={0}
-									max={100}
-									step={1}
-									value={singleAlpha}
-									onChange={(e) => {
-										const value = Number(e.target.value);
-										settings.singleAlpha = value;
-										setSingleAlpha(value);
-										requestApply();
-									}}
-									style={{ width: "100%" }}
 								/>
-							</div>
+								<button
-						)}
+									onClick={() => {
-
+										applyCustomInputColor(customInput, false);
-						{mode === "gradient-experimental" && (
+										addCustomColor();
-							<div style={{ marginBottom: 16, display: "grid", gap: 16 }}>
+									}}
-								<div>
-									<div
-										style={{
-											display: "flex",
-											alignItems: "center",
-											gap: 8,
-											marginBottom: 6,
-										}}
-									>
-										<div
-											style={{
-												width: 12,
-												height: 12,
-												borderRadius: 3,
-												background: normalizeToRGB(gradientStart),
-												border: "1px solid rgba(255,255,255,0.3)",
-											}}
-										/>
-										<div
-											style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}
-										>
-											Start Alpha
-										</div>
-									</div>
-									<input
-										type="range"
-										min={0}
-										max={100}
-										step={1}
-										value={gradientStartAlpha}
-										onChange={(e) => {
-											const value = Number(e.target.value);
-											settings.gradientStartAlpha = value;
-											setGradientStartAlpha(value);
-											requestApply();
-										}}
-										style={{ width: "100%" }}
-									/>
-								</div>
-								<div>
-									<div
-										style={{
-											display: "flex",
-											alignItems: "center",
-											gap: 8,
-											marginBottom: 6,
-										}}
-									>
-										<div
-											style={{
-												width: 12,
-												height: 12,
-												borderRadius: 3,
-												background: normalizeToRGB(gradientEnd),
-												border: "1px solid rgba(255,255,255,0.3)",
-											}}
-										/>
-										<div
-											style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}
-										>
-											End Alpha
-										</div>
-									</div>
-									<input
-										type="range"
-										min={0}
-										max={100}
-										step={1}
-										value={gradientEndAlpha}
-										onChange={(e) => {
-											const value = Number(e.target.value);
-											settings.gradientEndAlpha = value;
-											setGradientEndAlpha(value);
-											requestApply();
-										}}
-										style={{ width: "100%" }}
-									/>
-								</div>
-								<div>
-									<div
-										style={{
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "space-between",
-											marginBottom: 6,
-										}}
-									>
-										<div
-											style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}
-										>
-											Angle
-										</div>
-										<div
-											style={{ color: "rgba(255,255,255,0.6)", fontSize: 12 }}
-										>
-											{gradientAngle}°
-										</div>
-									</div>
-									<input
-										type="range"
-										min={0}
-										max={360}
-										step={1}
-										value={gradientAngle}
-										onChange={(e) => {
-											const value = Number(e.target.value);
-											settings.gradientAngle = value;
-											setGradientAngle(value);
-											requestApply();
-										}}
-										style={{ width: "100%" }}
-									/>
-								</div>
-							</div>
-						)}
-
-						{mode === "cover-gradient" && (
-							<div style={{ marginBottom: 16 }}>
-								<div
 									style={{
+										width: 32,
+										height: 32,
+										borderRadius: 6,
+										border: "1px solid rgba(255,255,255,0.3)",
+										background: "rgba(255,255,255,0.15)",
+										color: "#fff",
+										cursor: "pointer",
+										fontSize: 16,
 										display: "flex",
 										alignItems: "center",
-										justifyContent: "space-between",
+										justifyContent: "center",
-										marginBottom: 6,
+										transition: "all 0.2s ease",
 									}}
+									type="button"
 								>
-									<div style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}>
+									+
-										Angle
+								</button>
-									</div>
-									<div style={{ color: "rgba(255,255,255,0.6)", fontSize: 12 }}>
-										{gradientAngle}°
-									</div>
-								</div>
-								<input
-									type="range"
-									min={0}
-									max={360}
-									step={1}
-									value={gradientAngle}
-									onChange={(e) => {
-										const value = Number(e.target.value);
-										settings.gradientAngle = value;
-										setGradientAngle(value);
-										requestApply();
-									}}
-									style={{ width: "100%" }}
-								/>
 							</div>
-						)}
+						</div>
+						<div style={{ marginBottom: 16 }}>
+							<div
+								style={{
+									color: "rgba(255,255,255,0.8)",
+									fontSize: 12,
+									marginBottom: 6,
+								}}
+							>
+								Alpha
+							</div>
+							<input
+								type="range"
+								min={0}
+								max={100}
+								step={1}
+								value={singleAlpha}
+								onChange={(e) => {
+									const value = Number(e.target.value);
+									settings.singleAlpha = value;
+									setSingleAlpha(value);
+									requestApply();
+								}}
+								style={{ width: "100%" }}
+							/>
+						</div>
 
 						<button
 							onClick={closePicker}
@@ -800,7 +365,7 @@ export const Settings = () => {
 			)}
 			<AnySwitch
 				title="Exclude Inactive"
-				desc="Apply color/gradient only to the currently active lyric line"
+				desc="Apply color only to the currently active lyric line"
 				checked={excludeInactive}
 				onChange={(_event: React.ChangeEvent<HTMLInputElement> | null, checked: boolean) => {
 					settings.excludeInactive = checked;

plugins/colorama-lyrics-luna/src/index.ts

@@ -1,5 +1,5 @@
 import { LunaUnload, Tracer } from "@luna/core";
-import { StyleTag, PlayState } from "@luna/lib";
+import { StyleTag } from "@luna/lib";
 import { settings, Settings } from "./Settings";
 
 import styles from "file://styles.css?minify";
@@ -11,66 +11,6 @@ export const unloads = new Set<LunaUnload>();
 
 new StyleTag("ColoramaLyrics", unloads, styles);
 
-// Simple dominant color extraction from current cover art
-async function getCoverArtElement(): Promise<HTMLImageElement | null> {
-	const img = document.querySelector(
-		'figure[class*="_albumImage"] > div > div > div > img',
-	) as HTMLImageElement | null;
-	if (img) return img;
-	const video = document.querySelector(
-		'figure[class*="_albumImage"] > div > div > div > video',
-	) as HTMLVideoElement | null;
-	if (video) {
-		const poster = video.getAttribute("poster");
-		if (!poster) return null;
-		const tempImg = new Image();
-		tempImg.crossOrigin = "anonymous";
-		tempImg.src = poster;
-		await new Promise<void>((resolve) => {
-			tempImg.onload = () => resolve();
-			tempImg.onerror = () => resolve();
-		});
-		return tempImg as unknown as HTMLImageElement;
-	}
-	return null;
-}
-
-function getDominantColorsFromImage(
-	img: HTMLImageElement,
-	count: number = 2,
-): string[] {
-	try {
-		const canvas = document.createElement("canvas");
-		const ctx = canvas.getContext("2d");
-		if (!ctx) return ["#ffffff", "#88aaff"]; // fallback
-		const w = 64;
-		const h = 64;
-		canvas.width = w;
-		canvas.height = h;
-		ctx.drawImage(img, 0, 0, w, h);
-		const data = ctx.getImageData(0, 0, w, h).data;
-
-		// Simple k-means-ish binning into 16 buckets per channel
-		const buckets = new Map<string, number>();
-		for (let i = 0; i < data.length; i += 4) {
-			const r = data[i];
-			const g = data[i + 1];
-			const b = data[i + 2];
-			const key = `${Math.round(r / 16)},${Math.round(g / 16)},${Math.round(b / 16)}`;
-			buckets.set(key, (buckets.get(key) ?? 0) + 1);
-		}
-		const sorted = [...buckets.entries()].sort((a, b) => b[1] - a[1]);
-		const picked = sorted.slice(0, Math.max(1, count)).map(([key]) => {
-			const [r, g, b] = key.split(",").map((v) => parseInt(v, 10) * 16);
-			return `#${[r, g, b].map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("")}`;
-		});
-		return picked;
-	} catch {
-		return ["#ffffff", "#88aaff"]; // fallback
-	}
-}
-
-// build rgba() from hex + alpha percentage
 function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
 	let v = hex.trim();
 	if (!v.startsWith("#")) v = `#${v}`;
@@ -86,8 +26,6 @@ function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
 		const b = parseInt(v.slice(5, 7), 16);
 		return { r, g, b };
 	}
-	// 8-digit hex expects #AARRGGBB. Indices 1-3 are the alpha byte (ignored here),
-	// so r/g/b are extracted from v.slice(3,5), v.slice(5,7), v.slice(7,9) respectively.
 	if (/^#([0-9a-fA-F]{8})$/.test(v)) {
 		const r = parseInt(v.slice(3, 5), 16);
 		const g = parseInt(v.slice(5, 7), 16);
@@ -113,102 +51,28 @@ function applySingleColor(color: string) {
 	document.documentElement.style.setProperty("--cl-lyrics-color", rgba);
 	document.documentElement.style.setProperty("--cl-glow1", rgba);
 	document.documentElement.style.setProperty("--cl-glow2", rgba);
-	document.documentElement.style.removeProperty("--cl-grad-start");
-	document.documentElement.style.removeProperty("--cl-grad-end");
-	document.documentElement.style.removeProperty("--cl-grad-angle");
-	document.body.classList.remove("colorama-gradient");
 	document.body.classList.add("colorama-single");
 }
 
-function applyGradient(start: string, end: string, angle: number) {
-	const startAlpha = (settings as any).gradientStartAlpha ?? 100;
-	const endAlpha = (settings as any).gradientEndAlpha ?? 100;
-	const startRgba = rgbaFromHexAndAlpha(start, startAlpha);
-	const endRgba = rgbaFromHexAndAlpha(end, endAlpha);
-	document.documentElement.style.setProperty("--cl-grad-start", startRgba);
-	document.documentElement.style.setProperty("--cl-grad-end", endRgba);
-	document.documentElement.style.setProperty("--cl-grad-angle", `${angle}deg`);
-	document.documentElement.style.setProperty("--cl-glow1", startRgba);
-	document.documentElement.style.setProperty("--cl-glow2", endRgba);
-	document.body.classList.remove("colorama-single");
-	document.body.classList.add("colorama-gradient");
-}
-
-function resetModeClasses(): void {
-	document.body.classList.remove("colorama-single", "colorama-gradient");
-}
-
-async function applyCoverColors(gradient: boolean) {
-	const img = await getCoverArtElement();
-	if (!img) return;
-	const colors = getDominantColorsFromImage(img, gradient ? 2 : 1);
-	if (gradient) {
-		const start = colors[0] ?? settings.gradientStart;
-		const end = colors[1] ?? settings.gradientEnd;
-		applyGradient(start, end, settings.gradientAngle);
-	} else {
-		const color = colors[0] ?? settings.singleColor;
-		applySingleColor(color);
-	}
-}
-
 function applyColoramaLyrics(): void {
 	if (!settings.enabled) {
-		document.body.classList.remove("colorama-single", "colorama-gradient");
+		document.body.classList.remove("colorama-single");
 		return;
 	}
 
-	// Toggle only-active-line mode class
 	if (settings.excludeInactive) {
 		document.body.classList.add("colorama-only-active");
 	} else {
 		document.body.classList.remove("colorama-only-active");
 	}
-	resetModeClasses();
+
-	switch (settings.mode) {
+	applySingleColor(settings.singleColor);
-		case "single":
-			applySingleColor(settings.singleColor);
-			break;
-		case "gradient-experimental":
-			applyGradient(
-				settings.gradientStart,
-				settings.gradientEnd,
-				settings.gradientAngle,
-			);
-			break;
-		case "cover":
-			applyCoverColors(false);
-			break;
-		case "cover-gradient":
-			applyCoverColors(true);
-			break;
-	}
 }
 
 (window as any).applyColoramaLyrics = applyColoramaLyrics;
 
-// Re-apply on track changes (for auto modes)
-function observeTrackChanges(): void {
-	let lastTrackId: string | null = null;
-	const check = () => {
-		const currentTrackId = PlayState.playbackContext?.actualProductId;
-		if (currentTrackId && currentTrackId !== lastTrackId) {
-			lastTrackId = currentTrackId;
-			if (settings.mode === "cover" || settings.mode === "cover-gradient") {
-				setTimeout(() => applyColoramaLyrics(), 200);
-			}
-		}
-	};
-	const interval = setInterval(check, 500);
-	unloads.add(() => clearInterval(interval));
-	check();
-}
-
-// Initial apply and observers
 setTimeout(() => applyColoramaLyrics(), 200);
-observeTrackChanges();
 
-// for some reason, re-apply after Radiant updates its styles/backgrounds
 function hookRadiantUpdates(): void {
 	const w = window as any;
 	const wrap = (name: string) => {

plugins/colorama-lyrics-luna/src/styles.css

@@ -1,9 +1,6 @@
 /* Variables used by Colorama Lyrics */
 :root {
 	--cl-lyrics-color: #ffffff;
-	--cl-grad-start: #ffffff;
-	--cl-grad-end: #88aaff;
-	--cl-grad-angle: 0deg;
 	--cl-glow1: #ffffff;
 	--cl-glow2: #ffffff;
 }
@@ -24,54 +21,9 @@
 	-webkit-text-fill-color: initial !important;
 }
 
-/* Apply gradient to lyrics text */
-.colorama-gradient [class*="_lyricsText"] > div > span,
-.colorama-gradient [class*="_lyricsText"] > div > span[data-current="true"],
-.colorama-gradient [class^="_lyricsContainer"] > div > div > span,
-.colorama-gradient
-	[class^="_lyricsContainer"]
-	> div
-	> div
-	> span[data-current="true"] {
-	background: linear-gradient(
-		var(--cl-grad-angle),
-		var(--cl-grad-start),
-		var(--cl-grad-end)
-	) !important;
-	-webkit-background-clip: text !important;
-	background-clip: text !important;
-	color: transparent !important;
-	-webkit-text-fill-color: transparent !important;
-}
-
-/* Only-active: apply container class only on the active line via JS */
-
-/* Slight emphasis on current line (uniform to single mode) */
-.colorama-gradient [class*="_lyricsText"] > div > span[data-current="true"],
-.colorama-gradient
-	[class^="_lyricsContainer"]
-	> div
-	> div
-	> span[data-current="true"] {
-	filter: brightness(1.1) !important;
-}
-
-/* Keep song title color unchanged; its glow is controlled in Radiant CSS */
-
 /* Color Radiant glow shadows using Colorama colors (respect RL sizes) */
 .colorama-single [class*="_lyricsText"] > div > span[data-current="true"],
 .colorama-single
-	[class^="_lyricsContainer"]
-	> div
-	> div
-	> span[data-current="true"],
-.colorama-gradient [class*="_lyricsText"] > div > span[data-current="true"],
-.colorama-gradient
-	[class^="_lyricsContainer"]
-	> div
-	> div
-	> span[data-current="true"],
-.colorama-gradient
 	[class^="_lyricsContainer"]
 	> div
 	> div
@@ -90,20 +42,6 @@
 		0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
 }
 
-.colorama-gradient [class*="_lyricsText"] > div > span:hover,
-.colorama-gradient [class^="_lyricsContainer"] > div > div > span:hover {
-	background: linear-gradient(
-		var(--cl-grad-angle),
-		var(--cl-grad-start),
-		var(--cl-grad-end)
-	) !important;
-	-webkit-background-clip: text !important;
-	background-clip: text !important;
-	color: transparent !important;
-	-webkit-text-fill-color: transparent !important;
-	/* Do not increase glow strength on hover for gradients */
-}
-
 /* MARKER: Radiant WBW Lyrics Support */
 
 /* Single color: active wbw words & syllable finished */
@@ -123,31 +61,6 @@
 		0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
 }
 
-/* Gradient: active wbw words */
-.colorama-gradient .rl-wbw-word.rl-wbw-active {
-	background: linear-gradient(
-		var(--cl-grad-angle),
-		var(--cl-grad-start),
-		var(--cl-grad-end)
-	) !important;
-	-webkit-background-clip: text !important;
-	background-clip: text !important;
-	color: transparent !important;
-	-webkit-text-fill-color: transparent !important;
-}
-
-/* Gradient: syllable finished (solid color — gradient conflicts with sweep animation) */
-.colorama-gradient .rl-wbw-word.rl-syl-finished {
-	color: var(--cl-glow1, #ffffff) !important;
-}
-
-/* Gradient: active wbw word glow */
-.colorama-gradient .rl-wbw-word.rl-wbw-active {
-	text-shadow:
-		0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #ffffff),
-		0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
-}
-
 /* Hover: wbw words pick up Colorama colors */
 .colorama-single .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover,
 .colorama-single .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word.rl-wbw-word-hover {
@@ -157,23 +70,8 @@
 		0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
 }
 
-.colorama-gradient .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover,
-.colorama-gradient .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word.rl-wbw-word-hover {
-	background: linear-gradient(
-		var(--cl-grad-angle),
-		var(--cl-grad-start),
-		var(--cl-grad-end)
-	) !important;
-	-webkit-background-clip: text !important;
-	background-clip: text !important;
-	color: transparent !important;
-	-webkit-text-fill-color: transparent !important;
-}
-
 /* Only-active: wbw words on inactive lines stay default */
 body.colorama-only-active.colorama-single
-	.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word,
-body.colorama-only-active.colorama-gradient
 	.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word {
 	color: rgba(128, 128, 128, 0.4) !important;
 	background: none !important;
@@ -185,8 +83,6 @@ body.colorama-only-active.colorama-gradient
 
 /* Only-active: hover on inactive wbw lines keeps default */
 body.colorama-only-active.colorama-single
-	.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover,
-body.colorama-only-active.colorama-gradient
 	.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover {
 	color: lightgray !important;
 	background: none !important;
@@ -198,13 +94,8 @@ body.colorama-only-active.colorama-gradient
 
 /* Only color active line mode */
 body.colorama-only-active.colorama-single [class*="_lyricsText"]
-	> div
-	> span:not([data-current="true"]),
-body.colorama-only-active.colorama-gradient
-	[class*="_lyricsText"]
 	> div
 	> span:not([data-current="true"]) {
-	/* Match Radiant inactive styling */
 	color: rgba(128, 128, 128, 0.4) !important;
 	background: none !important;
 	-webkit-background-clip: initial !important;
@@ -215,10 +106,6 @@ body.colorama-only-active.colorama-gradient
 
 /* In only-active mode, keep TIDAL defaults even on hover for inactive lines */
 body.colorama-only-active.colorama-single [class*="_lyricsText"]
-	> div
-	> span:not([data-current="true"]):hover,
-body.colorama-only-active.colorama-gradient
-	[class*="_lyricsText"]
 	> div
 	> span:not([data-current="true"]):hover {
 	color: lightgray !important;

plugins/radiant-lyrics-luna/src/styles.css

@@ -271,6 +271,7 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
+
 /* MARKER: PATCHES (Random Fixes for Tidals Changes) */
 /* These change allot so i gave them their own section */
 
@@ -284,3 +285,9 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
 	/* biome-ignore lint: Override flat corners */
 	border-radius: 10px !important;
 }
+
+/* Hide the Overlay Scrollbar (people just use mouse scroll) */
+.os-scrollbar {
+	display: none !important;
+	pointer-events: none !important;
+}