Browse Source

style: improve settings panel shadow with smooth multi-stop gradient

Replace the narrow hard-edged gradient strip with a wide, smooth
multi-stop gradient that extends behind the panel for a natural
shadow falloff instead of a stepped/hard edge.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
9ce515f5ae
  1. 11
      src/components/nodes/ControlPanel.tsx

11
src/components/nodes/ControlPanel.tsx

@ -117,8 +117,15 @@ export function ControlPanel() {
return (
<div className="fixed top-0 right-6 h-screen z-[50] flex items-center pointer-events-none">
{/* Shadow/gradient overlay on left edge */}
<div className="absolute right-full top-0 h-full w-24 bg-gradient-to-r from-transparent to-black/20 pointer-events-none" />
{/* Shadow overlay behind panel - wide, smooth, multi-stop gradient */}
<div
className="absolute top-0 h-full pointer-events-none"
style={{
right: 0,
width: 'calc(100% + 20rem)',
background: 'linear-gradient(to right, transparent 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.08) 65%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0.35) 95%, rgba(0,0,0,0.45) 100%)',
}}
/>
<div className="w-80 bg-neutral-800 border border-neutral-700 rounded-xl shadow-xl max-h-[80vh] overflow-y-auto pointer-events-auto transition-opacity duration-200 nowheel">
<div className="p-4">
{/* Header */}

Loading…
Cancel
Save