Stop sidebar nav items bleeding through the sticky header
The sticky .sidebar-header had two layered issues that let nav items
show through it while the user scrolled the sidebar:
- its background was a single linear-gradient of rgba() stops,
starting at ~14% accent on transparent — the upper portion of the
header was effectively translucent
- .sidebar > * sets z-index 1 on every sidebar child, so the header
and the nav buttons share a stacking level. Sticky alone doesn't
lift the header; with equal z-index the nav wins on DOM order
Layer the existing accent gradient over a solid rgb(18, 18, 18) base
(visual unchanged, fully opaque), and bump the header to z-index 2 so
it paints above the nav buttons as they scroll under it.
This commit is contained in:
parent
1aedc2ddcf
commit
1b3751598d
1 changed files with 10 additions and 2 deletions
|
|
@ -255,11 +255,15 @@ body {
|
||||||
|
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
min-height: 115px;
|
min-height: 115px;
|
||||||
background: linear-gradient(180deg,
|
/* Opaque base layered under the accent gradient so nav items scrolling
|
||||||
|
past the sticky header don't bleed through the translucent stops. */
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg,
|
||||||
rgba(var(--accent-rgb), 0.14) 0%,
|
rgba(var(--accent-rgb), 0.14) 0%,
|
||||||
rgba(var(--accent-rgb), 0.08) 30%,
|
rgba(var(--accent-rgb), 0.08) 30%,
|
||||||
rgba(var(--accent-rgb), 0.03) 70%,
|
rgba(var(--accent-rgb), 0.03) 70%,
|
||||||
rgba(18, 18, 18, 1) 100%);
|
rgba(18, 18, 18, 1) 100%),
|
||||||
|
rgb(18, 18, 18);
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
border-top-right-radius: 20px;
|
border-top-right-radius: 20px;
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
|
|
@ -269,6 +273,10 @@ body {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
/* Explicitly lift above the nav buttons. `.sidebar > *` sets z-index 1 on
|
||||||
|
every sidebar child, so without this the sticky header paints at the
|
||||||
|
same stacking level as the nav and loses to it on DOM order. */
|
||||||
|
z-index: 2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue