apunkt/PriceGhost
1
0
Fork 0
mirror of https://github.com/clucraft/PriceGhost.git synced 2026-05-18 13:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ghostly wispy effect to Ghost text in navbar

Browse source 
- Ghost text fades from solid to transparent (left to right)
- Soft ethereal glow effect via text-shadow
- Enhanced glow on hover
- Works in both light and dark modes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
clucraft 2026-01-23 10:24:42 -05:00
parent 6896dd0c7e
commit 059336536f
1 changed files with 34 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/components/Layout.tsx
View file

@ -109,6 +109,36 @@ export default function Layout({ children }: LayoutProps) {
height: 28px;
}
.navbar-brand-text {
display: flex;
}
.navbar-brand-ghost {
background: linear-gradient(90deg, var(--text) 0%, var(--text) 20%, transparent 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 8px var(--ghost-glow, rgba(150, 150, 150, 0.4));
position: relative;
}
.navbar-brand:hover .navbar-brand-ghost {
background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 20%, transparent 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 0 12px var(--primary-glow, rgba(99, 102, 241, 0.5));
}
[data-theme="dark"] {
--ghost-glow: rgba(200, 200, 200, 0.3);
--primary-glow: rgba(129, 140, 248, 0.5);
}
[data-theme="light"] {
--ghost-glow: rgba(100, 100, 100, 0.25);
--primary-glow: rgba(99, 102, 241, 0.4);
}
.navbar-user {
display: flex;
align-items: center;
@ -266,7 +296,10 @@ export default function Layout({ children }: LayoutProps) {
<div className="navbar-content">
<Link to="/" className="navbar-brand">
<img src="/icon.svg" alt="" className="navbar-brand-icon" />
<span>PriceGhost</span>
<span className="navbar-brand-text">
<span>Price</span>
<span className="navbar-brand-ghost">Ghost</span>
</span>
</Link>
<div className="navbar-user">