fix: narrow-screen sidebar no longer blurred

The sidebar's backdrop-filter: blur() made the popup sidebar itself
unreadable on ≤900px screens. Disabled the blur in the responsive
media query; now sidebar has solid glass background and the
full-screen blur only applies to the backdrop behind it.
This commit is contained in:
root
2026-08-12 16:05:52 +08:00
parent 3a590e5053
commit 084c9fee2b

View File

@ -459,10 +459,11 @@ td.t-tag{white-space:nowrap}
/* ---- responsive: collapsible sidebar (NapCat-like) ---- */
@media (max-width:900px){
.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .3s var(--ease-spring)}
.sidebar.open{transform:none;box-shadow:var(--sh-lg);z-index:50}
.sidebar.open{transform:none;box-shadow:var(--sh-lg);z-index:55}
.sidebar{backdrop-filter:none;-webkit-backdrop-filter:none}
.main{width:100%}
.sb-ham{display:flex}
.sb-backdrop{position:fixed;inset:0;background:rgba(20,12,40,.35);z-index:51;backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s}
.sb-backdrop{position:fixed;inset:0;background:rgba(20,12,40,.35);z-index:54;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s}
.sidebar.open + .sb-backdrop{opacity:1;pointer-events:auto}
main#main{padding:8px 14px 32px}
.breadcrumb{padding:12px 16px 6px}