From d000cceb7ba76e4c1d96c2b1b204e83aeb8a1206 Mon Sep 17 00:00:00 2001 From: Hampton Lintorn-Catlin Date: Thu, 23 Jul 2026 17:05:05 -0400 Subject: [PATCH] =?UTF-8?q?Make=20the=20inbox=20panel=20solid=20=E2=80=94?= =?UTF-8?q?=20its=20glass=20could=20never=20blur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The panel is a descendant of the nav, whose own backdrop-filter stops a child backdrop-filter from sampling the page. The 'glass' was just 66% alpha over sharp page text. Dropdowns get a solid elevated surface. Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3 Co-authored-by: Amp --- engine/app/assets/stylesheets/coplan/application.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css index 47d6028..ca8a42d 100644 --- a/engine/app/assets/stylesheets/coplan/application.css +++ b/engine/app/assets/stylesheets/coplan/application.css @@ -2350,16 +2350,17 @@ img.avatar { padding: 0 4px; } -/* Floating inbox panel */ +/* Floating inbox panel. Solid, not glass: it lives inside the nav, + whose own backdrop-filter blocks a descendant's backdrop-filter from + sampling the page — translucency here would just let the page bleed + through unblurred. */ .inbox-panel { position: absolute; top: calc(100% + var(--space-sm)); right: 0; width: 420px; max-height: 480px; - background: var(--glass-bg-strong); - -webkit-backdrop-filter: var(--glass-blur); - backdrop-filter: var(--glass-blur); + background: var(--color-surface); border: 1px solid var(--glass-edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);