/* ═══════════ 门楣 + 通栏顶栏 ═══════════ 顶栏两副面孔，靠切换，开关在 Dials： data-top="banner" 通栏：左汉堡 · 名字 + 门楣 · 右设置（默认） data-top="capsule" 悬浮胶囊（a97 的老样子，theme.css 里那套原样生效）这个文件只写 banner 那一副，并且只在 banner 下用高特异度压过 theme.css 的胶囊规则 —— capsule 模式下这里一条都不生效，切回去永远是干净的老样子。 */ /* ── 通栏本体 ───────────────────────────────────────────────────────── */ body[data-top="banner"] #page-murmur .topbar{ position: fixed; top: 0; left: 0; right: 0; width: auto; height: auto; min-height: 0; /* 左右给两颗侧钮让路（它们是 .chat-app 的直接子节点、各自 fixed 在角上，不在这个栏的流里，所以只能用 padding 空出位置）。通栏里侧钮改成无框小图标（见下），占位比原来的 38px 圆钮小，所以左边这一档可以收到 34px —— 名字就更靠边。 */ /* 左边不再留位置：返回键已经是栏内第一格，名字紧跟其后。右边留 40px 给还浮在角上的汉堡。 */ padding: calc(env(safe-area-inset-top) + 4px) 40px 5px 6px; border: 0; border-radius: 0; border-bottom: 1px solid rgba(181,126,134,.14); background: var(--frost-card, rgba(252,253,255,.55)); -webkit-backdrop-filter: blur(16px) saturate(1.18); backdrop-filter: blur(16px) saturate(1.18); box-shadow: 0 2px 18px rgba(120,90,96,.07); /* 名字和 online 要真正贴在一起，可它们分属 .peerpill 和 .pill-left 两个父节点。把这两层都设成 display:contents（下面），三个孙节点就直接成为这个 grid 的成员，于是能排成：第一行「名字 online」，第二行「门楣」。这样做的好处是 DOM 一个节点都不用搬 —— 搬 DOM 正是上一版把胶囊搞散的原因。 */ display: grid; /* 返回键 · 名字 · online · 余量。四格都显式指派，不留任何自动放置 —— 上一版就是没给返回键指格子，它自己落到 online 后面那个空格里去了（a96 早把它改成 position:static，所以它是这个栏里实打实的一个 grid item，不是浮在角上的钮）。 */ grid-template-columns: auto auto auto 1fr; grid-template-rows: auto auto; column-gap: 6px; row-gap: 0; z-index: 60; } /* 两层容器在通栏里让位，孙节点直接进 grid */ body[data-top="banner"] #page-murmur .pill-left, body[data-top="banner"] #page-murmur .peerpill{ display: contents; } body[data-top="banner"] #page-murmur .peerpill .name{ grid-column: 2; grid-row: 1; font-family: "Cormorant Garamond", "Songti SC", Georgia, serif; font-size: 19px; font-weight: 500; line-height: 1.1; color: var(--text); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 56vw; text-shadow: 0 1px 12px rgba(255,255,255,.5); } /* ── 门楣那一行 ─────────────────────────────────────────────────────── */ #lintelLine{ display: none; /* 有内容才显形，空着不占位 */ max-width: 100%; margin-top: 1px; color: var(--accent, #B57E86); font-family: "Songti SC", "Noto Serif SC", serif; font-size: 12px; line-height: 1.35; letter-spacing: .01em; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 壁纸有蕾丝花纹，细宋体直接压上去会看不清 */ text-shadow: 0 1px 7px rgba(255,255,255,.92), 0 0 3px rgba(255,255,255,.85); } body[data-top="banner"] #lintelLine.on{ display: block; /* 第二行，从名字那一格起横到最右 —— 门楣比名字长得多，但左缘要跟名字对齐（不占返回键那一格）。 */ grid-column: 2 / -1; grid-row: 2; } /* 胶囊模式下门楣不出现：胶囊只有一行的高度，塞进去会把它撑变形 */ body[data-top="capsule"] #lintelLine{ display: none !important; } /* ── 胶囊：名字在前、online 在后 ──────────────────────────────────────── DOM 顺序是返回键 → .pill-left(online) → .peerpill(名字)，所以原样渲染出来 online 在名字左边。用 flex order 调个位，DOM 不动（胶囊那套 CSS 认父子关系，搬节点会让名字飘到胶囊外面 —— 已经踩过一次）。 */ body[data-top="capsule"] #page-murmur .topbar .api-back{ order: 0; } body[data-top="capsule"] #page-murmur .peerpill{ order: 1; } body[data-top="capsule"] #page-murmur .pill-left{ order: 2; } /* 换位之后 online 贴着名字右边，原来朝右的那点边距挪到左边 */ body[data-top="capsule"] #page-murmur .pill-left{ margin-left: 5px; } /* 开盲盒那一下：当天第一次拿到才播，SSE 补上时也播 */ @keyframes lintelIn{ from{ opacity:0; transform:translateY(-3px); filter:blur(2px); } to { opacity:.88; transform:none; filter:none; } } #lintelLine.reveal{ animation: lintelIn 1s cubic-bezier(.2,.7,.2,1) both; } /* ── 两侧的键 ───────────────────────────────────────────────────────── */ /* 返回键：栏内第一格，名字左边。a96 已经把它改成 position:static + 无框，这里只指派格子、对齐到名字那一行。 */ body[data-top="banner"] #page-murmur .topbar .api-back{ grid-column: 1; grid-row: 1; align-self: center; opacity: .55; padding: 0; } body[data-top="banner"] #page-murmur .topbar .api-back svg{ width: 17px; height: 17px; } /* 汉堡：唯一还浮在角上的那颗（在

外面），脱掉圆圈 */ body[data-top="banner"] #page-murmur .api-sessions{ width: 30px; height: 30px; background: transparent; border: 0; box-shadow: none; color: var(--text); opacity: .55; right: max(4px, calc(50vw - 211px)); } body[data-top="banner"] #page-murmur .api-sessions:active{ opacity: 1; background: transparent; } body[data-top="banner"] #page-murmur .api-sessions svg{ width: 19px; height: 19px; } /* ── 状态（online / typing）──────────────────────────────────────────── #status 仍在 .pill-left 里（DOM 没动过），靠父层 display:contents 直接进 grid，落在名字右边那一格、基线对齐。 */ body[data-top="banner"] #page-murmur .topbar .status{ grid-column: 3; grid-row: 1; position: static; top: auto; left: auto; height: auto; max-width: 22vw; align-self: baseline; font-size: 10px; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 让消息不被通栏压住 ─────────────────────────────────────────────── */ body[data-top="banner"] #page-murmur .scroll{ padding-top: calc(env(safe-area-inset-top) + 38px); } body[data-top="banner"].has-lintel #page-murmur .scroll{ padding-top: calc(env(safe-area-inset-top) + 56px); } /* 窄屏收一档 */ @media (max-width: 380px){ body[data-top="banner"] #page-murmur .peerpill .name{ font-size: 17.5px; } #lintelLine{ font-size: 11.5px; } } /* ── Dials 里那一段 ─────────────────────────────────────────────────── */ .lintel-now{ margin: 10px 0 0; padding: 11px 13px; border: 1px solid var(--card-line, rgba(150,168,182,.12)); border-radius: 14px; background: var(--card-bg, rgba(244,248,250,.42)); } .lintel-now .lintel-now-label{ display: block; margin-bottom: 5px; color: var(--text-dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } .lintel-now .lintel-now-text{ color: var(--text); font-family: "Songti SC", serif; font-size: 14px; line-height: 1.6; } .lintel-now .lintel-now-text.dim{ color: var(--text-dim); font-style: italic; } /* 模型不能用时把上游那句报错原文也带出来，方便排查 */ #mhNow{ white-space: pre-wrap; word-break: break-word; }