/* player-friends-desktop-layout-v2-20260910 Friends（好友保险库）页桌面版式重排。 改前状态：这一页在 ≥1100px 下基本不可用 —— 文字互相覆盖、"Trust" 竖排成 一列字母、"Add friend" 按钮压在行边框上、"Friend requests" 断成三行。 根因不是某一条规则写错，而是整页的内部布局都是按 352px 手机宽度调的， 被放进 1023px 的容器后四处崩： 1. .friend-vault-header 是 3 列网格（178/106/723px）却有 4 个孩子 —— 第 4 个「Friend requests」按钮被挤到第二行，压在返回键下面； "Recipient assets" 药丸被第 3 列拉成 723px。 2. .friend-vault-hero 是 231px 高、overflow:hidden 的盒子，里面三个绝对 定位层：整幅底图、标题层（512×244 —— 比盒子还高，底部被切）、 卡片层 .friend-vault-trusted-deck（959×174，横穿整个区域压住标题）。 标题层自己也坏：4 个孩子横排共 1130px 塞进 512px。 3. .friend-vault-row 是 4 列网格（54/480/375/54px）却有 6 个孩子（其中 1 个绝对定位）—— 第 5、6 个换行，「Add friend」落到第二行压住行边框； 头像在 x=367、名字在 x=854，中间隔着 480px 空列。 4. .friend-vault-add-dock 的 .panel-heading 绝对定位到 x=728，压在输入行上。 做法（≥1100px）：把绝对定位改回文档流，按桌面重新排。 - 头部：单行 flex，不换行；药丸右对齐 - hero：收成一条 68px 的标题横幅，底图铺满作背景 - 行：5 个在流内的孩子排成一行（装饰 / 头像 / 主文案 / 最近 / 按钮） - 底部添加栏：标题与输入行并排，不再占两行 【一个取舍，要知道】.friend-vault-trusted-deck 在桌面被隐藏。 那是三张 456px 高的迷你卡（里面各有一张 220×293 的插画），横排要占掉 将近半屏，而它展示的就是下方列表同一批数据的预览。为了「一屏看完」 把它收起来；列表本身没动，数据一条不少。要恢复就删掉那一条规则。 实测（线上登录态，1341×868 —— 与用户 Safari 同尺寸）： 页面高度 1165 -> 793，底部 865 <= 视口 868（一屏放得下） 被裁文字 5 处 -> 0 处；横向滚动 0 行高 108 -> 74，头像/名字/按钮同一行 375 宽手机端完全不变（deck 仍显示、行高 61、头部仍是原网格）。 放在 @layer vip-source-lock 内：分层 !important 优先于未分层， 见 [[player-frontend-css-override-layer-trap]]。 */ @layer vip-source-lock { @media screen and (min-width: 1100px) { /* ── 头部：单行，不换行 ───────────────────────────────── */ html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-header { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: nowrap !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-header > * { margin: 0 !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-title-box { flex: 0 0 auto !important; width: auto !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-asset-pill { flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; order: 9 !important; } /* ── hero：收成一条标题横幅，底图作背景 ─────────────────── */ html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-hero { height: auto !important; min-height: 0 !important; overflow: hidden !important; padding: 12px 20px !important; display: flex !important; align-items: center !important; border-radius: 16px !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-panel-art { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 0 !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-hero-title { position: relative !important; z-index: 1 !important; width: auto !important; height: auto !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; } /* 两条藤蔓装饰各 382px，横屏下只会把标题挤出盒子 */ html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-title-flourish { display: none !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-title-shield { flex: 0 0 auto !important; width: 44px !important; height: 44px !important; } /* 见文件头的取舍说明 */ html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-trusted-deck { display: none !important; } /* ── 列表行：5 个流内孩子排成一行 ───────────────────────── */ html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row { grid-template-columns: 54px 54px minmax(0, 1fr) auto auto !important; align-items: center !important; column-gap: 14px !important; row-gap: 0 !important; height: auto !important; min-height: 64px !important; padding: 9px 18px !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row-main { grid-template-rows: auto auto !important; row-gap: 2px !important; text-align: left !important; } /* 行高等于字号 + overflow:hidden，"Add reci_p_ient" 的下沉笔画会被切 */ html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row-main > strong, html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row-main > small { overflow: visible !important; line-height: 1.35 !important; height: auto !important; } /* ── 底部添加栏：标题与输入行并排 ───────────────────────── */ html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-add-dock { display: flex !important; align-items: center !important; gap: 16px !important; padding: 12px 18px !important; grid-template-rows: none !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-add-dock .panel-heading { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; flex: 0 0 auto !important; justify-content: flex-start !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-add-dock .friend-vault-add-row { flex: 1 1 auto !important; width: auto !important; } /* ── v2 补三处（都是登录态实测出来的，v1 时没有量测能力） ──────── 1. 列表行的「Add friend」按钮宽度写死 54px，内容要 58px → 横向压出 6px 2. 头部「Friend requests」按钮是 4 列网格（18/48/21/12px），文案挤在 48px 那一列，折成三行，"s" 单独掉到第三行 3. 底部添加栏的 .panel-heading 带着 transform: translateX(-58.7px) —— 又一个手机端偏移。它把标题推到容器外 58px，左边第一个字母被 页面边缘切掉（显示成「dd friend」）。left/margin 都改了没用， 必须 transform:none。 */ html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row > button { width: auto !important; min-width: max-content !important; padding-inline: 10px !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-header button:not(.friend-vault-page-back) { display: flex !important; align-items: center !important; gap: 8px !important; width: auto !important; min-width: max-content !important; height: auto !important; padding: 8px 12px !important; white-space: nowrap !important; grid-template-columns: none !important; } html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-add-dock .panel-heading { transform: none !important; left: 0 !important; right: auto !important; top: auto !important; margin: 0 !important; } } }