bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(header): match header glass tint to sidebar, add drop shadow

Browse Source 
.header used a lighter 0.30 background tint than .sidebar's 0.40, so
scrolled content underneath showed through almost undimmed even though
backdrop-filter was applied — the two fixed chrome surfaces no longer
read as one consistent glass layer. Aligns the tint and adds a shadow
to give the header separation from content.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bonamin
2026-09-21 18:22:23 +03:00
co-authored by Claude Sonnet 5
parent 2f7c5e859d
commit 7f6145ca35
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/components.css
+8 -2
View File
@@ -2109,7 +2109,12 @@ tr:focus-within .btn-table-actions {
display: none; display: none;
} }
/* Header: fixed, covers content area only (not sidebar) — glass treatment */ /* Header: fixed, covers content area only (not sidebar) — glass treatment.
Same tint/blur strength as .sidebar so both fixed chrome surfaces read as
one consistent glass layer — .header previously used a lighter 0.30 tint
than .sidebar's 0.40, which made scrolled content underneath show through
almost undimmed and read as "no glass effect" even though backdrop-filter
was technically applied. */
.header { .header {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -2117,10 +2122,11 @@ tr:focus-within .btn-table-actions {
right: 0; right: 0;
height: var(--header-height); height: var(--header-height);
z-index: var(--z-sticky); z-index: var(--z-sticky);
background-color: rgba(28, 32, 38, 0.30); background-color: rgba(28, 32, 38, 0.40);
backdrop-filter: var(--blur-modal); backdrop-filter: var(--blur-modal);
-webkit-backdrop-filter: var(--blur-modal); -webkit-backdrop-filter: var(--blur-modal);
border-bottom: 1px solid rgba(70, 69, 84, 0.12); border-bottom: 1px solid rgba(70, 69, 84, 0.12);
box-shadow: var(--shadow-lg);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 var(--space-6); padding: 0 var(--space-6);