fix(navbar): remove border artifact and add 10px bottom fade
Fixed two visual issues with the navbar: 1. Removed black border line when transparent: Changed borderBottom to conditionally be 'none' instead of '1px solid transparent', which was showing up as a visible line when the navbar is transparent on homepage 2. Added 10px gradient fade at bottom: Applied linear-gradient that fades from the dark background to transparent over the last 10px, creating a softer transition instead of a sharp cut-off The navbar now seamlessly blends into the page content with no visual artifacts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
284fc90a53
commit
d5f60ce9d2
|
|
@ -575,11 +575,15 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
|
|||
return (
|
||||
<Tooltip.Provider delayDuration={200}>
|
||||
<header
|
||||
style={{
|
||||
background: isTransparent
|
||||
? 'transparent'
|
||||
: 'linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) calc(100% - 10px), transparent 100%)',
|
||||
}}
|
||||
className={css({
|
||||
bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
|
||||
backdropFilter: isTransparent ? 'none' : 'blur(12px)',
|
||||
shadow: isTransparent ? 'none' : 'lg',
|
||||
borderBottom: '1px solid',
|
||||
borderBottom: isTransparent ? 'none' : '1px solid',
|
||||
borderColor: isTransparent ? 'transparent' : 'rgba(139, 92, 246, 0.2)',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
|
|
|
|||
Loading…
Reference in New Issue