rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix ambient background: use positive z-index layering instead of negative

Browse Source 
Negative z-index (-z-10) placed orbs behind the body's opaque background,
making them invisible. Moved all ambient layers (orbs, noise texture,
vignette) into the DashboardAmbient component as absolute-positioned
children at z-0, with content at z-10. Boosted orb opacities to 12%/7%
for perceptible effect. Removed CSS pseudo-element approach in favor of
inline React elements for better stacking control.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-12 09:26:02 +08:00
parent 6b02cfa1f8
commit 11fe3df513
3 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/dashboard/DashboardAmbient.tsx
View File

@ -3,13 +3,15 @@
* Two accent-colored drifting orbs at very low opacity — adds depth
* and movement without distracting from content. Reuses the same
* drift keyframes as the login AmbientBackground but at ~25% opacity.
*
* Also renders a noise texture and vignette overlay for tactile depth.
*/
export default function DashboardAmbient() {
return (
<div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden" aria-hidden="true">
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
{/* Primary orb — top-left drift */}
<div
className="absolute h-[600px] w-[600px] rounded-full opacity-[0.04] blur-[120px] animate-drift-1"
className="absolute h-[600px] w-[600px] rounded-full opacity-[0.12] blur-[120px] animate-drift-1"
style={{
background: 'radial-gradient(circle, hsl(var(--accent-color)) 0%, transparent 70%)',
top: '-5%',
@ -18,13 +20,29 @@ export default function DashboardAmbient() {
/>
{/* Secondary orb — bottom-right drift */}
<div
className="absolute h-[450px] w-[450px] rounded-full opacity-[0.025] blur-[120px] animate-drift-2"
className="absolute h-[450px] w-[450px] rounded-full opacity-[0.07] blur-[120px] animate-drift-2"
style={{
background: 'radial-gradient(circle, hsl(var(--accent-color)) 0%, transparent 70%)',
bottom: '5%',
right: '-5%',
}}
/>
{/* Noise texture */}
<div
className="absolute inset-0 opacity-[0.035]"
style={{
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
backgroundRepeat: 'repeat',
backgroundSize: '256px 256px',
}}
/>
{/* Radial vignette */}
<div
className="absolute inset-0"
style={{
background: 'radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.45) 100%)',
}}
/>
</div>
);
}

6
frontend/src/components/dashboard/DashboardPage.tsx
View File

@ -165,10 +165,10 @@ export default function DashboardPage() {
: null;
return (
<div className="flex flex-col h-full dashboard-ambient">
<div className="flex flex-col h-full relative">
<DashboardAmbient />
{/* Header — greeting + date + quick add */}
<div className="px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
<div className="relative z-10 px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
<div>
<h1 className="font-heading text-3xl font-bold tracking-tight animate-fade-in">
{getGreeting(settings?.preferred_name || undefined)}
@ -239,7 +239,7 @@ export default function DashboardPage() {
</div>
</div>
<div className="flex-1 overflow-y-auto px-4 md:px-6 pb-6">
<div className="relative z-10 flex-1 overflow-y-auto px-4 md:px-6 pb-6">
<div className="space-y-3 sm:space-y-5 animate-content-reveal">
{/* Week Timeline */}
{upcomingData && (

23
frontend/src/index.css
View File

@ -457,29 +457,6 @@ form[data-submitted] input:invalid + button {
/* ── Dashboard ambient layers ── */
/* SVG noise texture — adds tactile depth to flat dark backgrounds */
.dashboard-ambient::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
opacity: 0.03;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
}
/* Radial vignette — darkens edges, draws focus to center content */
.dashboard-ambient::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
}
/* Card breathing glow — data-aware "alive" pulse for urgent cards */
@keyframes card-breathe {
0%, 100% { box-shadow: 0 0 0 0 hsl(var(--accent-color) / 0.05); }