Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use gradient overlay instead of box-shadow for status bar shadow

Browse Source 
The box-shadow rendered outside the pseudo-element, placing the shadow
below the status bar boundary. Switch to a multi-stop linear gradient
inside the element so the shadow fades smoothly through the status bar
area (+20% overshoot for softer transition).
This commit is contained in:
Alexander Bocken
2026-04-09 21:30:55 +02:00
parent 396174fd34
commit 830a1f98a9
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "homepage", "name": "homepage",
"version": "1.21.0", "version": "1.21.1",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {

13
src/app.css
View File

@@ -298,16 +298,21 @@ body {
} }
/* Status bar drop shadow for edge-to-edge Android/Tauri. /* Status bar drop shadow for edge-to-edge Android/Tauri.
Sits flush at the top; the downward shadow marks the Covers the status-bar area; the bottom third fades out
boundary between status bar and page content. */ to create a soft shadow at the boundary. */
body::before { body::before {
content: ''; content: '';
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: env(safe-area-inset-top, 0px); height: calc(env(safe-area-inset-top, 0px) * 1.2);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.32) 62%,
rgba(0, 0, 0, 0.2) 75%,
rgba(0, 0, 0, 0.1) 87%,
transparent);
z-index: 9999; z-index: 9999;
pointer-events: none; pointer-events: none;
} }