fix(web): opaque solid background for floating layers (SEARCH-4)

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-09-30 22:40:55 +08:00
1 parent b15c06ad20
commit ca17b2329b
1 file changed
+9 -7
+9 -7
View File
@@ -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);