From ca17b2329b1bfa7a8af846bd7f20b2c6c61ae348 Mon Sep 17 00:00:00 2001
From: root <root@localhost>
Date: Wed, 30 Sep 2026 22:40:55 +0800
Subject: [PATCH] fix(web): opaque solid background for floating layers
 (SEARCH-4)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/app/app.css | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/app.css b/apps/web/app/app.css
index 4df6287e..e863b6d3 100644
--- a/apps/web/app/app.css
+++ b/apps/web/app/app.css
@@ -328,10 +328,11 @@
   --mat-chrome-shadow: 0 8px 24px -20px rgba(20, 22, 28, 0.25);
   --mat-chrome-side-shadow: 8px 0 24px -20px rgba(20, 22, 28, 0.25);
   --mat-chrome-solid: rgba(255, 255, 255, 0.95);
-  /* float:门户小型悬浮面板 */
-  --mat-float-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.82) 100%);
-  --mat-float-blur: blur(28px) saturate(170%);
-  --mat-float-border: rgba(255, 255, 255, 0.75);
+  /* float:门户小型悬浮面板。SEARCH-4(2026-09-30)起不透明实底 = popover token,不做背景模糊:
+     半透明弹层压在资源列表上文字看不清(用户反馈) */
+  --mat-float-bg: var(--popover);
+  --mat-float-blur: none;
+  --mat-float-border: rgba(20, 22, 28, 0.1);
   --mat-float-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(20, 22, 28, 0.05), 0 2px 6px -2px rgba(20, 22, 28, 0.08), 0 20px 40px -20px rgba(20, 22, 28, 0.2);
   --mat-float-solid: rgb(251, 251, 252);
   /* 胶囊按钮:主操作是有填充的薄玻璃,次操作只描边。日夜对称——夜间白色薄玻璃配白字,
@@ -474,9 +475,9 @@
   --mat-chrome-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
   --mat-chrome-side-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
   --mat-chrome-solid: rgba(12, 13, 17, 0.92);
-  --mat-float-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.035) 32%, rgba(255, 255, 255, 0) 62%), rgba(20, 21, 25, 0.9);
+  --mat-float-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 40%), var(--popover);
   --mat-float-solid: rgb(22, 23, 27);
-  --mat-float-blur: blur(36px) saturate(180%);
+  --mat-float-blur: none;
   --mat-float-border: rgba(255, 255, 255, 0.14);
   /* 胶囊按钮:夜间主操作是白色玻璃 */
   --mat-pill-primary-bg: rgba(255, 255, 255, 0.05);
@@ -910,7 +911,8 @@
 
   /* 全站唯一的悬浮层材质(2026-09-26 起):下拉菜单、弹出框、下拉选择、对话框、抽屉,
      门户与流媒体、播放器共用;日夜跟随,播放页恒为夜间。圆角分两档:菜单类 rounded-2xl,
-     对话框 rounded-3xl。悬浮物打开时是静态的,可以放心用 backdrop-filter。 */
+     对话框 rounded-3xl。2026-09-30(SEARCH-4)起底色是不透明的 popover 实底、不做背景模糊,
+     立体感只靠边框与投影;组件侧不要再给弹层加半透明底或 backdrop-blur。 */
   .pg-float {
     background: var(--mat-float-bg);
     backdrop-filter: var(--mat-float-blur);