Add blur effect and border to the page overlay

Adds a semi-transparent background with a blur effect and a subtle border to the ::after pseudo-element of the body in static/css/styles.css.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 75bceff7-98f2-4f6e-ae8e-e735399a1fe8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 6753aa83-74a2-4f4c-8613-167c4bd28afd
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/75bceff7-98f2-4f6e-ae8e-e735399a1fe8/KoFNjBb
This commit is contained in:
abhiramtx
2025-11-09 00:09:19 +00:00
parent 01289d6157
commit 5e8d778d3a

View File

@@ -66,7 +66,11 @@ body::after {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 16px 32px; padding: 16px 32px;
background: transparent; background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
} }
.navbar-logo { .navbar-logo {