From f1f4281e119ca853fd12448541ac15bdb7f72f36 Mon Sep 17 00:00:00 2001 From: Boris Kovalskii <36034823+JustYay@users.noreply.github.com> Date: Thu, 11 Jun 2026 09:46:17 +1000 Subject: [PATCH] fix(backgrounds): expose remaining hardcoded colors in shooting-stars, meteors, gradient-animation --- .../ui/backgrounds/background-gradient-animation.tsx | 3 ++- src/components/ui/backgrounds/meteors.tsx | 2 +- src/components/ui/backgrounds/registry.ts | 12 ++++++++++++ src/components/ui/backgrounds/shooting-stars.tsx | 7 +++++-- src/locales/en.json | 2 ++ src/locales/ru.json | 2 ++ 6 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/ui/backgrounds/background-gradient-animation.tsx b/src/components/ui/backgrounds/background-gradient-animation.tsx index 5f614fa..77c18a2 100644 --- a/src/components/ui/backgrounds/background-gradient-animation.tsx +++ b/src/components/ui/backgrounds/background-gradient-animation.tsx @@ -32,6 +32,7 @@ export default function BackgroundGradientAnimation({ settings }: Props) { const thirdColor = hexToRgbString(sanitizeColor(settings.thirdColor, '#64DCFF')); const fourthColor = hexToRgbString(sanitizeColor(settings.fourthColor, '#C83232')); const fifthColor = hexToRgbString(sanitizeColor(settings.fifthColor, '#B4B432')); + const pointerColor = hexToRgbString(sanitizeColor(settings.pointerColor, '#8C64FF')); const interactive = safeBoolean(settings.interactive, true); const size = safeSelect(settings.size, ['60%', '80%', '100%'] as const, '80%'); @@ -172,7 +173,7 @@ export default function BackgroundGradientAnimation({ settings }: Props) { ref={interactiveRef} className="absolute left-[calc(50%-var(--size)/2)] top-[calc(50%-var(--size)/2)] h-[var(--size)] w-[var(--size)] rounded-full opacity-70 mix-blend-hard-light" style={{ - background: `radial-gradient(circle at center, rgba(140, 100, 255, 0.8) 0, rgba(140, 100, 255, 0) 50%) no-repeat`, + background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`, }} /> )} diff --git a/src/components/ui/backgrounds/meteors.tsx b/src/components/ui/backgrounds/meteors.tsx index 9cc0e54..b5ad436 100644 --- a/src/components/ui/backgrounds/meteors.tsx +++ b/src/components/ui/backgrounds/meteors.tsx @@ -36,7 +36,7 @@ export default function Meteors({ settings }: Props) { animationPlayState: paused ? 'paused' : 'running', width: meteor.size, height: meteor.size, - boxShadow: `0 0 0 1px rgba(255,255,255,0.05), 0 0 2px 1px ${meteorColor}20, 0 0 20px 2px ${meteorColor}40`, + boxShadow: `0 0 0 1px ${meteorColor}0d, 0 0 2px 1px ${meteorColor}20, 0 0 20px 2px ${meteorColor}40`, background: meteorColor, }} > diff --git a/src/components/ui/backgrounds/registry.ts b/src/components/ui/backgrounds/registry.ts index d4494aa..d3e168f 100644 --- a/src/components/ui/backgrounds/registry.ts +++ b/src/components/ui/backgrounds/registry.ts @@ -194,6 +194,12 @@ export const backgroundRegistry: BackgroundDefinition[] = [ type: 'color', default: '#2EB9DF', }, + { + key: 'bgStarColor', + label: 'admin.backgrounds.bgStarColor', + type: 'color', + default: '#ffffff', + }, { key: 'starDensity', label: 'admin.backgrounds.density', @@ -248,6 +254,12 @@ export const backgroundRegistry: BackgroundDefinition[] = [ { key: 'thirdColor', label: 'admin.backgrounds.color3', type: 'color', default: '#64DCFF' }, { key: 'fourthColor', label: 'admin.backgrounds.color4', type: 'color', default: '#C83232' }, { key: 'fifthColor', label: 'admin.backgrounds.color5', type: 'color', default: '#B4B432' }, + { + key: 'pointerColor', + label: 'admin.backgrounds.pointerColor', + type: 'color', + default: '#8C64FF', + }, { key: 'interactive', label: 'admin.backgrounds.interactive', diff --git a/src/components/ui/backgrounds/shooting-stars.tsx b/src/components/ui/backgrounds/shooting-stars.tsx index cf94944..e4f1a6a 100644 --- a/src/components/ui/backgrounds/shooting-stars.tsx +++ b/src/components/ui/backgrounds/shooting-stars.tsx @@ -41,6 +41,7 @@ export default function ShootingStarsBackground({ settings }: Props) { const starColor = sanitizeColor(settings.starColor, '#9E00FF'); const trailColor = sanitizeColor(settings.trailColor, '#2EB9DF'); + const bgStarColor = sanitizeColor(settings.bgStarColor, '#ffffff'); const starDensity = clampNumber(settings.starDensity, 0.00001, 0.001, 0.00015); const minSpeed = clampNumber(settings.minSpeed, 1, 50, 10); const maxSpeed = clampNumber(settings.maxSpeed, 5, 100, 30); @@ -117,9 +118,11 @@ export default function ShootingStarsBackground({ settings }: Props) { } ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, Math.PI * 2); - ctx.fillStyle = `rgba(255,255,255,${opacity})`; + ctx.globalAlpha = opacity; + ctx.fillStyle = bgStarColor; ctx.fill(); } + ctx.globalAlpha = 1; if (time - state.lastShootingTime > state.nextShootingDelay) { state.shootingStars.push({ @@ -166,7 +169,7 @@ export default function ShootingStarsBackground({ settings }: Props) { return true; }); }, - [starColor, trailColor, starDensity, minSpeed, maxSpeed], + [starColor, trailColor, bgStarColor, starDensity, minSpeed, maxSpeed], ); return ; diff --git a/src/locales/en.json b/src/locales/en.json index 9eb484b..1fc760c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1168,6 +1168,8 @@ "particleColor": "Particle Color", "starColor": "Star Color", "trailColor": "Trail Color", + "bgStarColor": "Background Stars Color", + "pointerColor": "Pointer Color", "bgColor": "Background Color", "fillColor": "Fill Color", "color1": "Color 1", diff --git a/src/locales/ru.json b/src/locales/ru.json index 6a7db49..a3504bf 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -1198,6 +1198,8 @@ "particleColor": "Цвет частиц", "starColor": "Цвет звёзд", "trailColor": "Цвет следа", + "bgStarColor": "Цвет фоновых звёзд", + "pointerColor": "Цвет курсорного блоба", "bgColor": "Цвет фона", "fillColor": "Цвет заливки", "color1": "Цвет 1",