/* ============================================================ Z 系列（剧情模式）样式 — 1080×2388 设计稿还原 Z001 剧情聊天 / Z002 工作台 / ZDL 大纲 / ZLS 历史记录 ZTS 提示词总览 / ZSET 剧情模式设置 / Z003A 抽屉 / Z003B 管理 ============================================================ */ .z-screen{ background:#f6f3ee; } /* ---------- 通用头部 ---------- */ .z-head{ position:absolute; top:0; left:0; width:1080px; height:180px; } .z-head .z-back{ position:absolute; left:30px; top:30px; width:100px; height:100px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .z-head .z-back img{ width:72px; height:72px; } .z-head .z-title{ position:absolute; left:0; right:0; top:34px; text-align:center; font-size:52px; font-weight:700; letter-spacing:2px; } .z-head .z-hbtns{ position:absolute; right:24px; top:44px; display:flex; gap:26px; align-items:center; } .z-head .z-hbtns img{ width:60px; height:60px; cursor:pointer; opacity:.9; } .z-head .z-hbtns img:active{ transform:scale(.92); } .z-divider{ position:absolute; top:180px; left:0; width:1080px; height:2px; background:#000; } .z-scroll{ position:absolute; top:182px; bottom:0; left:0; width:1080px; overflow-y:auto; overflow-x:hidden; padding:30px 40px 60px; } .z-empty{ padding:80px 30px; text-align:center; color:var(--ink2); font-size:36px; line-height:1.6; } /* ---------- 通用小控件 ---------- */ .z-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:150px; height:76px; padding:0 30px; white-space:nowrap; border:3px solid #000; border-radius:12px; background:#fff; font-size:32px; font-family:var(--serif); cursor:pointer; } .z-btn.pri{ background:#111; color:#fff; } .z-btn.warn{ border-color:#a33; color:#a33; } .z-btn:active{ transform:scale(.96); } .z-input,.z-area{ width:100%; border:3px solid #000; border-radius:10px; background:rgba(255,255,255,.92); font-size:32px; font-family:var(--serif); padding:16px 20px; color:#000; outline:none; } .z-area{ min-height:200px; line-height:1.5; resize:vertical; } .z-input::placeholder,.z-area::placeholder{ color:var(--ink2); } .z-field{ margin-bottom:26px; } .z-field>label{ display:block; font-size:30px; color:#333; margin-bottom:10px; } .z-toggle{ position:relative; width:110px; height:54px; border:3px solid #000; border-radius:27px; background:#fff; cursor:pointer; flex:0 0 auto; } .z-toggle::after{ content:''; position:absolute; top:3px; left:5px; width:42px; height:42px; border-radius:50%; background:#999; transition:left .15s,background .15s; } .z-toggle.on{ background:#dfd8cc; } .z-toggle.on::after{ left:55px; background:#111; } .z-rowitem{ position:relative; display:flex; align-items:center; gap:20px; min-height:96px; padding:16px 24px; margin-bottom:18px; background:rgba(255,255,255,.92); border:3px solid #000; border-radius:12px; } .z-rowitem .grow{ flex:1 1 auto; min-width:0; } .z-rowitem .t1{ font-size:32px; font-weight:600; word-break:break-all; } .z-rowitem .t2{ font-size:26px; color:var(--ink2); margin-top:4px; word-break:break-all; } .z-icbtn{ width:56px; height:56px; cursor:pointer; flex:0 0 auto; } .z-icbtn:active{ transform:scale(.9); } .z-tag{ display:inline-block; padding:4px 14px; border:2px solid #000; border-radius:8px; font-size:24px; background:#fff; margin-right:10px; } .z-tag.dark{ background:#111; color:#fff; } /* ============================================================ Z001 剧情模式主页面（闲聊共用，加 .x-mode） ============================================================ */ #Z001 .z-bg{ position:absolute; inset:0; background:linear-gradient(180deg,#f7f4ee 0%,#efe9df 100%); } #Z001 .z-bg img{ width:100%; height:100%; object-fit:cover; } /* 闲聊模式（微信风）用自己的美化，不该再画剧情那张背景图 —— 它铺满整屏又会从聊天气泡四周露出来，看着像聊天界面多了个碍眼的边。 */ #Z001.x-mode > .z-bg{ display:none; } #z1top{ position:absolute; top:70px; left:0; width:1080px; height:80px; z-index:5; } #z1menu{ position:absolute; left:66px; top:0; width:64px; height:64px; cursor:pointer; } #z1tools{ position:absolute; left:230px; top:0; display:flex; gap:56px; } #z1tools img{ width:64px; height:64px; cursor:pointer; } #z1tools img:active{ transform:scale(.9); } #z1tools img.off{ opacity:.3; } #z1tools img.act{ opacity:1; filter:drop-shadow(0 0 6px #8b5e3c); } /* 场景状态栏（插件） */ #z1sceneBar{ position:absolute; top:180px; left:66px; width:948px; height:74px; z-index:4; background:rgba(255,255,255,.9); border:5px solid #000; border-radius:10px; display:flex; align-items:center; padding:0 20px; cursor:pointer; } #z1sceneTxt{ flex:1; font-size:34px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #z1sceneBar img{ width:56px; height:56px; flex:0 0 auto; } /* 聊天区 */ #z1chat{ /* ⚠ bottom 原来是 180（底边 2208），可底部头像栏占 2021~2121、输入行占 2157~2263 —— 聊天区有 187px 是压在它们**下面**的，滚到底时最后一条消息永远被盖住、滚不上来。 改成贴着头像栏上沿（2388-2021=367），内容就再也不会钻到它们下面。 */ position:absolute; top:272px; left:66px; width:948px; bottom:367px; overflow-y:auto; overflow-x:hidden; padding:20px 0 30px; z-index:2; } .z-msg{ margin:36px 0; cursor:pointer; } .z-msg-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:-24px; position:relative; z-index:2; } .z-msg-top.r{ flex-direction:row-reverse; } .z-msg-name{ min-width:120px; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:8px 24px; height:58px; background:rgba(255,255,255,.9); border:2px solid #000; border-radius:30px; font-size:32px; font-weight:700; display:flex; align-items:center; white-space:nowrap; } .z-msg-no{ font-size:30px; font-weight:500; color:#333; background:rgba(255,255,255,.6); padding:2px 10px; border-radius:8px; } .z-msg-box{ margin-top:0; padding:44px 40px 36px; background:rgba(255,255,255,.92); border:2px solid #000; border-radius:12px; font-size:var(--zfs,42px); line-height:var(--zlhh,1.5); word-break:break-word; } .z-msg.hide .z-msg-box{ opacity:.42; border-style:dashed; } .z-msg.hide .z-msg-name{ opacity:.55; } .z-msg.sel .z-msg-box{ border-color:#8b5e3c; box-shadow:0 0 0 4px rgba(139,94,60,.25); } .z-msg.stream .z-msg-box{ border-color:#8b5e3c; } .z-msg .caret{ display:inline-block; width:4px; height:var(--zfs,42px); background:#8b5e3c; vertical-align:-6px; animation:zblink 1s infinite; } @keyframes zblink{ 50%{opacity:0;} } /* 消息操作条（容器33） */ #z1actbar{ position:absolute; top:1868px; left:40px; width:1000px; height:64px; z-index:6; background:#efefef; border:2px solid #000; border-radius:10px; display:flex; align-items:center; justify-content:space-around; } #z1actbar img{ height:48px; width:48px; cursor:pointer; } #z1actbar img:active{ transform:scale(.85); } /* 头像栏 */ #z1avatars{ position:absolute; top:2021px; left:66px; width:948px; height:100px; z-index:5; display:flex; gap:64px; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; } .z-ava{ position:relative; width:100px; height:100px; flex:0 0 auto; border-radius:50%; border:3px solid #000; background:#d9d9d9 center/cover no-repeat; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:36px; color:#333; } .z-ava.speaking{ box-shadow:0 0 0 6px rgba(139,94,60,.55); } .z-ava .z-ava-me{ position:absolute; right:-8px; bottom:-8px; width:36px; height:36px; border-radius:50%; background:#fff; border:2px solid #000; font-size:22px; display:flex; align-items:center; justify-content:center; } .z-ava.plus{ background:#fff; } /* 输入行 */ #z1inputrow{ position:absolute; top:2157px; left:66px; width:948px; height:106px; z-index:5; background:rgba(255,255,255,.9); border:5px solid #000; border-radius:10px; display:flex; align-items:center; } #z1inputrow img{ width:64px; height:64px; flex:0 0 auto; cursor:pointer; margin:0 14px; } #z1inputrow img:active{ transform:scale(.9); } #z1input{ flex:1; border:none; outline:none; background:transparent; font-size:38px; font-family:var(--serif); min-width:0; } #z1input::placeholder{ color:var(--ink2); } /* 上拉提示词总览 / 悬浮球 */ #z1pull{ position:absolute; top:2300px; left:508px; width:64px; height:64px; cursor:pointer; z-index:6; } #z1hudball{ position:absolute; top:1900px; left:940px; width:120px; height:120px; border-radius:50%; overflow:hidden; border:3px solid #000; cursor:pointer; z-index:7; background:#cbb89a center/cover no-repeat; box-shadow:0 6px 18px rgba(0,0,0,.25); } #z1hudball img{ width:100%; height:100%; object-fit:cover; } #z1hudball:active{ transform:scale(.93); } /* 闲聊模式视觉差异 */ #Z001.x-mode #z1chat .z-msg-box{ background:rgba(255,250,238,.94); } /* ---------- Z003A 快速切换抽屉 ---------- */ #z003a{ position:absolute; top:0; left:0; width:676px; height:2388px; z-index:20; background:#fbfaf7; border-right:3px solid #000; transform:translateX(-105%); transition:transform .22s ease; display:flex; flex-direction:column; } #z003a.open{ transform:translateX(0); box-shadow:20px 0 60px rgba(0,0,0,.35); } /* 关着的时候整块移出屏幕（包括那个把手）。 用户明确要求：把手**不该出现在聊天界面**上 —— 聊天界面只用左上角那个展开按钮拉起 Z003A， 把手是 Z003A 里的东西，而且点它要「完全拉开」进 Z003B（不是收起）。 （早期版本把它留在屏幕外沿想当"拉出抽屉"的抓手，用户说那样很碍事，已改回。） */ #z003a{ transform:translateX(-105%); } #z003a .za-top{ position:relative; height:170px; flex:0 0 auto; } #z003a .za-set{ position:absolute; left:41px; top:60px; width:64px; height:64px; cursor:pointer; } #z003a .za-close{ position:absolute; left:520px; top:60px; width:64px; height:64px; cursor:pointer; } #z003a .za-body{ flex:1 1 auto; overflow-y:auto; padding:60px 0 120px; } .za-char{ margin-bottom:26px; } .za-char .za-name{ padding:0 15px; font-size:42px; font-weight:900; display:flex; align-items:center; gap:14px; cursor:pointer; } .za-char .za-name .za-arrow{ width:34px; height:26px; transition:transform .18s; } .za-char.fold .za-name .za-arrow{ transform:rotate(-90deg); } .za-char.fold .za-rooms{ display:none; } .za-room{ width:576px; min-height:76px; margin:14px 0 14px 50px; padding:8px 20px; background:#fff; border:2px solid #000; border-radius:10px; font-size:36px; font-weight:600; display:flex; align-items:center; gap:12px; cursor:pointer; } .za-room.cur{ background:#111; color:#fff; } .za-room .za-bm{ width:40px; height:40px; flex:0 0 auto; } .za-room .za-new{ color:#8b5e3c; font-weight:700; } #z003a .za-hint{ position:absolute; right:8px; top:1100px; width:56px; height:64px; opacity:.35; } /* ============================================================ Z002 工作台 ============================================================ */ #z2cards{ position:absolute; top:210px; left:50px; width:980px; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:26px; } .z2-tile{ height:190px; background:rgba(255,255,255,.92); border:3px solid #000; border-radius:14px; display:flex; align-items:center; gap:26px; padding:0 30px; cursor:pointer; } .z2-tile img{ width:76px; height:76px; flex:0 0 auto; } .z2-tile .t{ font-size:38px; font-weight:700; } .z2-tile .s{ font-size:24px; color:var(--ink2); margin-top:6px; } .z2-tile:active{ transform:scale(.97); } .z2-tile.cur{ background:#111; color:#fff; } .z2-tile.cur .s{ color:#bbb; } #z2panel{ position:absolute; left:50px; width:980px; z-index:1; top:1080px; background:rgba(255,255,255,.96); border:3px solid #000; border-radius:14px; padding:30px; display:none; max-height:1080px; overflow-y:auto; } #z2panel.open{ display:block; } #z2cmd{ position:absolute; bottom:40px; left:66px; width:948px; height:96px; background:rgba(255,255,255,.9); border:5px solid #000; border-radius:10px; display:flex; align-items:center; z-index:3; } #z2cmd input{ flex:1; border:none; outline:none; background:transparent; font-size:36px; padding:0 24px; font-family:var(--serif); } #z2cmd img{ width:60px; height:60px; margin-right:16px; cursor:pointer; } /* ============================================================ ZDL 大纲 ============================================================ */ #zdlCanvasWrap{ position:absolute; top:190px; left:0; width:1080px; bottom:120px; overflow:auto; background: linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/70px 100%; } #zdlCanvas{ position:relative; min-width:1080px; min-height:600px; } .zdl-lane{ position:absolute; left:0; width:100%; height:70px; } .zdl-lane .zdl-lname{ position:absolute; left:16px; top:6px; font-size:30px; font-weight:700; z-index:3; background:rgba(255,255,255,.85); border:2px solid #000; border-radius:8px; padding:2px 12px; cursor:pointer; } .zdl-lane.cur .zdl-lname{ background:#111; color:#fff; } .zdl-lane .zdl-line{ position:absolute; left:210px; right:40px; top:33px; height:4px; border-radius:2px; opacity:.75; } .zdl-dot{ position:absolute; top:21px; width:28px; height:28px; border-radius:50%; border:3px solid #000; cursor:pointer; z-index:2; background:#ccc; } .zdl-dot.ghost{ background:transparent !important; border-style:dashed; opacity:.6; } .zdl-dot.sel{ box-shadow:0 0 0 6px rgba(163,51,51,.4); } .zdl-dot .zdl-ck{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; border:3px solid #000; display:none; align-items:center; justify-content:center; font-size:26px; color:#111; } #ZDL.multi .zdl-dot{ top:13px; width:44px; height:44px; } #ZDL.multi .zdl-dot .zdl-ck{ display:flex; } #ZDL.multi .zdl-dot.pick .zdl-ck{ background:#a33; color:#fff; } #zdlCard{ position:absolute; left:120px; right:120px; bottom:140px; z-index:8; background:rgba(255,255,255,.97); border:3px solid #000; border-radius:14px; padding:26px 30px; display:none; } #zdlCard.open{ display:block; } #zdlCard .c-no{ font-size:28px; color:var(--ink2); } #zdlCard .c-txt{ font-size:32px; line-height:1.5; margin:10px 0 14px; max-height:220px; overflow-y:auto; word-break:break-all; } #zdlCard .c-btns{ display:flex; gap:22px; } #zdlAdd{ position:absolute; left:36px; bottom:26px; width:72px; height:72px; cursor:pointer; z-index:9; } #zdlBar{ position:absolute; left:0; bottom:0; width:1080px; height:110px; z-index:9; background:#111; display:none; align-items:center; justify-content:space-around; padding:0 20px; } #zdlBar.open{ display:flex; } #zdlBar .zb{ color:#fff; font-size:28px; padding:12px 20px; border:2px solid #fff; border-radius:10px; cursor:pointer; } #zdlBar .zb.warn{ border-color:#f88; color:#f88; } /* ============================================================ ZLS 历史记录 ============================================================ */ .zls-row{ position:relative; display:flex; align-items:center; gap:16px; background:rgba(255,255,255,.92); border:3px solid #000; border-radius:12px; padding:18px 20px; margin-bottom:20px; cursor:pointer; } .zls-row.hide{ opacity:.5; border-style:dashed; } .zls-row .no{ font-size:26px; color:#8b5e3c; font-weight:700; flex:0 0 auto; width:230px; } .zls-row .nm{ font-size:30px; font-weight:700; flex:0 0 auto; max-width:170px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .zls-row .sn{ flex:1; font-size:26px; color:var(--ink2); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .zls-row .ops{ display:flex; gap:12px; flex:0 0 auto; } .zls-row .ops img{ width:48px; height:48px; cursor:pointer; } .zls-ck{ width:44px; height:44px; border-radius:50%; border:3px solid #000; background:#fff; flex:0 0 auto; display:none; align-items:center; justify-content:center; font-size:26px; } #ZLS.multi .zls-ck{ display:flex; } #ZLS.multi .zls-row .ops{ display:none; } .zls-row.pick .zls-ck{ background:#a33; color:#fff; } #zlsBar{ position:absolute; left:0; bottom:0; width:1080px; height:120px; z-index:9; background:#111; display:none; align-items:center; justify-content:space-around; padding:0 16px; } #zlsBar.open{ display:flex; } #zlsBar .zb{ color:#fff; font-size:26px; padding:12px 16px; border:2px solid #fff; border-radius:10px; cursor:pointer; } #zlsBar .zb.warn{ border-color:#f88; color:#f88; } #zlsFilter{ position:absolute; top:190px; right:30px; z-index:5; font-size:28px; padding:10px 18px; border:3px solid #000; border-radius:10px; background:#fff; font-family:var(--serif); max-width:420px; } /* ============================================================ ZTS 提示词总览 / ZSET 设置 ------------------------------------------------------------ 总览改成「底色分块 + 一次全部展开」：不再手风琴逐个点开。 每段的底色/色条来自 N.BLOCKS 的 c/a（见 z-prompt.js）， 全部是浅色底 + 深色字，长段落能连续读；色条在左，扫一眼就知道 这是哪一段。段落多的时候头部 sticky 住，滚到中段也知道自己在哪。 ============================================================ */ .zts-top{ font-size:27px; line-height:1.65; color:#4a4a4a; margin-bottom:20px; } .zts-top b{ color:#111; font-size:30px; } .zts-tip{ font-size:23px; color:#7a7a7a; } .zts-blk{ background:var(--c,#F5F3EE); border-left:10px solid var(--a,#999); border-radius:14px; margin-bottom:18px; box-shadow:0 1px 0 rgba(0,0,0,.07); } .zts-blk.off{ opacity:.62; } /* 关掉的段：整块压暗，但仍看得见内容 */ .zts-bh{ position:sticky; top:0; z-index:2; /* 长段落滚到中段也知道这是哪一段 */ background:var(--c,#F5F3EE); border-radius:14px 14px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 22px 14px 18px; border-bottom:2px dashed rgba(0,0,0,.15); } .zts-no{ font-size:27px; font-weight:700; color:var(--a,#666); min-width:46px; text-align:center; background:rgba(255,255,255,.8); border-radius:10px; padding:2px 8px; } .zts-nm{ font-size:33px; font-weight:700; color:#161616; } .zts-chip{ font-size:21px; padding:3px 13px; border-radius:20px; background:rgba(0,0,0,.08); color:#5b5b5b; white-space:nowrap; } .zts-chip.on{ background:rgba(40,120,60,.17); color:#26602f; } .zts-meta{ flex:1; font-size:23px; color:#636363; text-align:right; white-space:nowrap; } .zts-ctl{ display:flex; align-items:center; gap:8px; } .zts-arw{ font-size:22px; line-height:1; cursor:pointer; color:#6f6f6f; padding:6px 10px; border-radius:9px; background:rgba(255,255,255,.7); } .zts-arw:active{ color:#111; background:#fff; } .zts-bb{ padding:16px 22px 20px; font-size:28px; line-height:1.78; color:#1b1b1b; white-space:pre-wrap; word-break:break-word; } .zts-bb.empty{ color:#8d8d8d; font-style:italic; } /* 只有超长段落（聊天历史/记忆这类）才内层滚动，其余整段铺开 */ .zts-bb.wrap{ max-height:1400px; overflow-y:auto; } /* 行会换行（flex-wrap）：某些行的控件固有宽度能到 900px，而 .t 的 flex:1 基准宽度是 0， 结果标签列被挤到只剩 60px —— 文字一个字一行、行高撑到 1200px，右边还空一大片。 给 .t 一个 flex-basis 下限：并排放不下就整块折到下一行，标签占整行、控件在下面自己排。 font-size 是这一行的基准字号：行里的裸文字（「主色」「字色」、滑块旁那个 42px…） 以前没人管，会掉到浏览器默认的 16px —— 恰恰是最该看清的数值最小。 */ /* ---------- 设置页分模块（仿 iOS 设置：一组一张卡 + 组标题） ---------- 以前所有行平铺成一条长列表，找功能全靠翻，用户原话「很乱，找功能很烦」。 分组只加视觉层次，不动任何逻辑；行本身还是 .zset-row。 */ .zset-group{ margin:0 0 36px; } .zset-gt{ font-size:28px; color:#8a857a; padding:0 14px 12px; letter-spacing:1px; } .zset-card{ background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.07); } .zset-card .zset-row{ border-bottom:1px solid #eee; padding:28px 22px; } .zset-card .zset-row:last-child{ border-bottom:none; } /* 滑块在手机上要够大才点得准（用户：「太小了，在手机上非常容易误触，根本没法调」） */ #zsetBody input[type=range]{ height:56px; min-width:260px; vertical-align:middle; } /* 自定义 CSS 是长文本：给足高度让页面纵向滚（#zsetBody 本来就是 z-scroll，能滚）， 不要再挤成一小块。 */ #zsetBody .z-area.z-code{ width:100%; min-height:460px; box-sizing:border-box; } .zset-row{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding:26px 6px; border-bottom:2px solid #ddd; font-size:32px; } .zset-row .t{ flex:1 1 460px; min-width:0; } .zset-row .t .n{ font-size:38px; font-weight:700; } .zset-row .t .d{ font-size:28px; color:var(--ink2); margin-top:6px; line-height:1.4; } /* ============================================================ Z003B 角色及聊天室管理 ============================================================ */ #z3bChars{ position:absolute; top:200px; left:0; width:250px; bottom:0; overflow-y:auto; border-right:2px solid #000; background:rgba(0,0,0,.04); padding:20px 0; } .z3b-char{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 0; cursor:pointer; } .z3b-char .av{ width:110px; height:110px; border-radius:50%; border:3px solid #000; background:#d9d9d9 center/cover; display:flex; align-items:center; justify-content:center; font-size:34px; color:#333; } .z3b-char.cur .av{ box-shadow:0 0 0 6px rgba(139,94,60,.5); } .z3b-char .nm{ font-size:26px; } #z3bRooms{ position:absolute; top:200px; left:250px; right:0; bottom:140px; overflow-y:auto; padding:24px 28px; } .z3b-room{ background:rgba(255,255,255,.94); border:3px solid #000; border-radius:12px; padding:20px 22px; margin-bottom:20px; display:flex; align-items:center; gap:14px; } .z3b-room .nm{ flex:1; font-size:32px; font-weight:700; cursor:pointer; word-break:break-all; } .z3b-room img{ width:52px; height:52px; cursor:pointer; flex:0 0 auto; } .z3b-room .lk{ font-size:24px; color:#8b5e3c; border:2px solid #8b5e3c; padding:2px 10px; border-radius:8px; } #z3bNew{ position:absolute; left:250px; right:0; bottom:24px; height:100px; display:flex; gap:16px; justify-content:center; align-items:center; } /* ⚠ 这三个按钮原来总宽约 846 > 容器 830（left:250 right:0）—— 字体渲染稍有差异就会挤压折行， 而 .z-btn 是固定 76 高，一折行文字就溢出按钮。收一点字号和内边距，留出余量。 */ #z3bNew .z-btn{ font-size:29px; padding:0 20px; min-width:0; } /* ============================================================ 弹窗（全局，挂 #stage） ============================================================ */ .z-modal-mask{ position:absolute; inset:0; z-index:60; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; } .z-modal-mask.on{ display:flex; } .z-modal{ width:880px; max-height:2050px; background:#fff; border:4px solid #000; border-radius:18px; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.4); } .z-modal.sm{ width:700px; } .z-modal.lg{ width:1000px; } .z-modal-head{ flex:0 0 auto; height:96px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; border-bottom:3px solid #000; font-size:36px; font-weight:700; } .z-modal-head .z-modal-x{ font-size:48px; cursor:pointer; line-height:1; padding:0 10px; } .z-modal-body{ flex:1 1 auto; overflow-y:auto; padding:30px 34px; } .z-modal-foot{ flex:0 0 auto; min-height:100px; border-top:2px solid #ddd; display:flex; align-items:center; justify-content:center; gap:30px; padding:14px; } /* 悬浮球弹窗（跟随/独立） */ #zhudMain,#zhudLog{ background:#f4f2ee; border:3px solid #999; border-radius:12px; padding:20px; font-size:30px; line-height:1.5; white-space:pre-wrap; word-break:break-all; } #zhudMain{ min-height:220px; max-height:560px; overflow-y:auto; } #zhudLog{ min-height:120px; max-height:380px; overflow-y:auto; margin-top:18px; color:#444; } .zhud-hd{ display:flex; align-items:center; gap:18px; margin-bottom:20px; } .zhud-hd .av{ width:88px; height:88px; border-radius:50%; border:3px solid #000; background:#d9d9d9 center/cover; display:flex; align-items:center; justify-content:center; font-size:32px; } .zhud-hd .sp{ flex:1; } .zhud-hd img{ width:56px; height:56px; cursor:pointer; } .zhud-hd img.off{ opacity:.3; } .zhud-hd img.act{ filter:drop-shadow(0 0 6px #8b5e3c); } .zhud-lbl{ font-size:26px; color:var(--ink2); margin:14px 0 6px; } #zhudInputRow{ display:flex; gap:14px; margin-top:18px; } #zhudInputRow input{ flex:1; } /* 美化预览块（消息楼层美化视图复用样式） */ .z-preview{ background:rgba(255,255,255,.95); border:2px solid #000; border-radius:12px; padding:44px 40px; font-size:var(--zfs,42px); line-height:var(--zlhh,1.5); } /* ============================================================ 追加：横屏大纲 / 调试面板 / 讨论模式 ============================================================ */ /* 弹窗根移到 body：fixed 定位，横屏旋转时不跟着转 */ .z-modal-mask{ position:fixed !important; z-index:10000; } .z-modal{ max-height:86vh; } /* ---------- ZDL 横屏 ---------- */ #ZDL.zland{ width:2388px !important; height:1080px !important; left:-654px !important; top:654px !important; right:auto !important; bottom:auto !important; transform:rotate(-90deg) !important; transform-origin:center center !important; background:#f2ede4; } .zdl-topbar{ position:absolute; top:0; left:0; width:2388px; height:110px; display:flex; align-items:center; gap:34px; padding:0 44px; border-bottom:2px solid #000; background:rgba(255,255,255,.7); z-index:5; } /* ⚠ ZDL 横屏多选顶栏：多选态下同时挂着多选按钮 + 筛选下拉 + 解散支线 + 6 个操作按钮， 总宽粗算接近 2388（屏幕宽），flex 不换行 → 会被挤压甚至溢出。 给这一行加 min-width:0 让子项可以收缩（配 .zdl-mbtn 的 nowrap，宁可挤也不掉出去）。 */ .zdl-topbar > *{ min-width:0; } .zdl-mbtn{ white-space:nowrap; } .zdl-topbar img{ width:60px; height:60px; cursor:pointer; } .zdl-topbar img:active{ transform:scale(.92); } .zdl-filter{ font-size:30px; font-family:var(--serif); padding:10px 18px; border:3px solid #000; border-radius:10px; background:#fff; max-width:420px; } .zdl-dissolve{ font-size:26px; color:#a33; border-bottom:2px solid #a33; cursor:pointer; display:none; } .zdl-dissolve.show{ display:inline; } .zdl-sp{ flex:1; } .zdl-picked{ display:none; font-size:28px; background:#e5e0d5; border-radius:20px; padding:8px 26px; } #ZDL.multi .zdl-picked{ display:inline; } .zdl-mbtn{ display:none; font-size:28px; color:#fff; background:#111; border:2px solid #000; border-radius:10px; padding:10px 22px; cursor:pointer; } .zdl-mbtn.warn{ background:#a33; } #ZDL.multi .zdl-mbtn{ display:inline-block; } #zdlCanvas{ position:absolute; top:110px; left:0; right:0; bottom:0; overflow:auto; background:#f2ede4; } #zdlCanvas.dark{ background:#26241f; } .zdl-node{ position:absolute; width:300px; cursor:pointer; z-index:2; } .zdl-node .card{ position:relative; height:104px; border:2px solid #000; border-radius:8px; background: linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%), repeating-linear-gradient(45deg,rgba(60,90,160,.24) 0 14px,rgba(120,150,210,.18) 14px 34px), #dfe6f2; box-shadow:0 4px 10px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; padding:0 18px; } .zdl-node .card .nm{ font-size:32px; font-weight:900; letter-spacing:2px; text-align:center; color:#15213a; text-shadow:0 1px 0 rgba(255,255,255,.55); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; } .zdl-node .no{ text-align:center; font-size:24px; margin-top:8px; color:#333; font-weight:700; } .zdl-node.main .card{ background: linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%), repeating-linear-gradient(-45deg,rgba(160,120,60,.26) 0 14px,rgba(200,170,110,.2) 14px 34px), #efe4cd; } .zdl-node.main .card .nm{ color:#3a2a10; } .zdl-node.cur .card{ outline:4px solid #8b5e3c; outline-offset:3px; } .zdl-node.ghost .card{ background:transparent; border:2px dashed #999; box-shadow:none; color:#999; font-size:56px; justify-content:center; } .zdl-node .ck{ position:absolute; right:-16px; top:-16px; width:48px; height:48px; border-radius:50%; border:3px solid #000; background:#fff; display:none; align-items:center; justify-content:center; font-size:28px; z-index:3; } #ZDL.multi .zdl-node .ck{ display:flex; } #ZDL.multi .zdl-node.pick .ck{ background:#2f8b46; color:#fff; border-color:#1c5c2c; } #ZDL.multi .zdl-node.pick .card{ outline:4px solid #2f8b46; outline-offset:3px; } #zdlDetail{ position:absolute; right:44px; top:150px; width:470px; max-height:880px; background:rgba(255,255,255,.97); border:3px solid #000; border-radius:16px; padding:26px; display:none; z-index:6; flex-direction:column; } #zdlDetail.open{ display:flex; } #zdlDetail .d-ic{ position:absolute; left:26px; top:20px; display:flex; gap:20px; } #zdlDetail .d-ic img{ width:52px; height:52px; cursor:pointer; } #zdlDetail .d-hero{ height:200px; border-radius:12px; margin:16px 0 18px; border:2px solid #000; background: linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 60%), repeating-linear-gradient(45deg,rgba(60,90,160,.35) 0 16px,rgba(120,150,210,.25) 16px 40px), #3a4d76; } #zdlDetail .d-name{ font-size:38px; font-weight:900; text-align:center; margin-bottom:8px; } #zdlDetail .d-meta{ font-size:24px; color:#656565; text-align:center; margin-bottom:16px; } #zdlDetail .d-desc{ flex:1; font-size:27px; line-height:1.65; overflow-y:auto; min-height:120px; max-height:330px; white-space:pre-wrap; word-break:break-all; } #zdlDetail .d-btns{ display:flex; gap:18px; margin-top:18px; justify-content:center; flex-wrap:wrap; } #zdlDetail .d-btns .z-btn{ min-width:120px; height:70px; font-size:28px; } #zdlAdd,#zdlLoc{ position:absolute; left:40px; width:78px; height:78px; cursor:pointer; z-index:6; } #zdlAdd{ bottom:36px; } #zdlLoc{ bottom:140px; } /* ---------- 调试面板 ---------- */ .zdbg-gear{ /* 必须高于 #z-modal-root（它自己 z-index:10050，形成一个层叠上下文）。 否则弹窗一开，整块弹窗层都盖在调试球上面，球和讨论开关就点不到了 —— 而讨论模式恰恰最需要「弹窗开着的时候点开关/点弹窗里的元素」。 */ position:fixed; bottom:14px; right:14px; z-index:10100; width:58px; height:58px; border-radius:50%; background:#111; color:#ffd43b; border:3px solid #ffd43b; display:none; align-items:center; justify-content:center; font-size:28px; cursor:pointer; font-weight:700; } .zdbg-gear.on{ display:flex; } .zdbg-gear:active{ transform:scale(.92); } .zdbg-panel{ position:fixed; top:84px; right:14px; width:460px; max-height:82vh; overflow-y:auto; /* ⚠ 面板**故意**留在弹窗之下（10002 < #z-modal-root 的 10050）。 要提到最上层的是悬浮球和讨论开关（见 .zdbg-gear / .zdbg-quick），不是面板： 面板是右上角一大块（460px 宽、82vh 高），提上去会把弹窗盖住， 连弹窗自己的关闭键都点不到 —— 那就本末倒置了。 */ background:#fff; border:4px solid #000; border-radius:16px; z-index:10002; padding:20px 22px; display:none; font-size:26px; box-shadow:0 16px 50px rgba(0,0,0,.35); } .zdbg-panel.on{ display:block; } .zdbg-panel h4{ font-size:28px; margin:6px 0 12px; border-bottom:2px solid #ddd; padding-bottom:8px; } .zdbg-row{ display:flex; align-items:center; gap:14px; margin:12px 0; } .zdbg-row .t{ flex:1; line-height:1.35; } .zdbg-row .t .d{ font-size:22px; color:#656565; } .zdbg-btns{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; } .zdbg-btn{ font-size:24px; padding:10px 16px; border:2px solid #000; border-radius:10px; background:#fff; cursor:pointer; font-family:var(--serif); } .zdbg-btn.warn{ border-color:#a33; color:#a33; } .zdbg-btn:active{ transform:scale(.95); } .zdbg-state{ font-size:22px; color:#555; background:#f4f1ea; border-radius:8px; padding:10px 14px; line-height:1.6; margin:10px 0; } /* ---------- 讨论模式 ---------- */ body.z-discuss-on *{ cursor:crosshair !important; } body.z-discuss-on *:hover{ outline:3px dashed #2b6cd4 !important; outline-offset:2px; } .z-note-mark{ outline:3px solid #d43a3a !important; outline-offset:2px; } .z-note-mark.note-hover{ outline:6px solid #fc0 !important; } .zdbg-note{ border:2px solid #000; border-radius:10px; padding:12px 14px; margin:10px 0; font-size:24px; background:#fff; } .zdbg-note .sel{ color:#2b6cd4; font-size:20px; word-break:break-all; } .zdbg-note .snip{ color:#888; font-size:20px; margin:4px 0; } .zdbg-note .ops{ display:flex; gap:14px; margin-top:6px; } .zdbg-note .ops span{ cursor:pointer; color:#2b6cd4; text-decoration:underline; font-size:22px; } .zdbg-note .ops span.del{ color:#a33; } /* 已归档：压暗 + 虚线边框，一眼看出"它还在，但已经退出当前这轮讨论" */ .zdbg-note.arch{ background:#f4f1ea; border-style:dashed; border-color:#8a857a; opacity:.85; } .zdbg-archbox{ margin:16px 0 0; } .zdbg-archbox>summary{ cursor:pointer; font-size:24px; padding:12px 14px; border:2px dashed #8a857a; border-radius:10px; background:#f4f1ea; color:#555; list-style:none; } .zdbg-archbox>summary::-webkit-details-marker{ display:none; } .zdbg-archbox>summary::before{ content:'▸ '; } .zdbg-archbox[open]>summary::before{ content:'▾ '; } /* ============================================================ 追加2：工作台芯片 / 大纲节点样式 / 幽灵 / 提示词分块 / 抽屉修正 ============================================================ */ /* ---------- Z002 工作台：卡片 + 芯片（快速切换） ---------- */ .z2-tile{ height:auto; min-height:170px; align-items:flex-start; padding:24px 26px; } .z2-tile-main{ flex:1; min-width:0; } .z2-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } .z2-chip{ display:inline-block; font-size:24px; padding:6px 16px; border-radius:20px; border:2px solid #000; background:#fff; color:#000; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; } .z2-chip.on{ background:#111; color:#fff; } .z2-chip.off{ border-style:dashed; color:#888; } .z2-tile.cur{ background:#111; color:#fff; } .z2-tile.cur .z2-chip{ background:#fff; color:#000; border-color:#fff; } .z2-tile.cur .z2-chip.on{ background:#8b5e3c; border-color:#8b5e3c; color:#fff; } /* ---------- ZDL 节点：单卡美化样式 + 幽灵小图标 ---------- */ .zdl-node.st-blue .card{ background:repeating-linear-gradient(45deg,rgba(60,90,160,.4) 0 14px,rgba(120,150,210,.28) 14px 34px),#c9d8f0; } .zdl-node.st-warm .card{ background:repeating-linear-gradient(-45deg,rgba(180,120,60,.36) 0 14px,rgba(220,180,120,.26) 14px 34px),#f3e3cc; } .zdl-node.st-paper .card{ background:repeating-linear-gradient(0deg,rgba(120,110,90,.22) 0 10px,rgba(200,190,170,.18) 10px 26px),#f6f2e8; } .zdl-node.st-dark .card{ background:repeating-linear-gradient(45deg,rgba(40,40,40,.9) 0 14px,rgba(70,70,70,.8) 14px 34px),#2b2b2b; } .zdl-node.st-dark .card .nm{ color:#f2e9d8; text-shadow:none; } #zdlDetail .d-hero.st-blue{ background:repeating-linear-gradient(45deg,rgba(60,90,160,.5) 0 16px,rgba(120,150,210,.32) 16px 40px),#c9d8f0; } #zdlDetail .d-hero.st-warm{ background:repeating-linear-gradient(-45deg,rgba(180,120,60,.46) 0 16px,rgba(220,180,120,.3) 16px 40px),#f3e3cc; } #zdlDetail .d-hero.st-paper{ background:repeating-linear-gradient(0deg,rgba(120,110,90,.28) 0 12px,rgba(200,190,170,.2) 12px 30px),#f6f2e8; } #zdlDetail .d-hero.st-dark{ background:repeating-linear-gradient(45deg,rgba(40,40,40,.92) 0 16px,rgba(70,70,70,.8) 16px 40px),#2b2b2b; } .zdl-node.ghost{ width:110px; } .zdl-node.ghost .card{ width:100px; height:100px; border:none; background:transparent !important; box-shadow:none; padding:0; display:flex; align-items:center; justify-content:center; opacity:.75; } .zdl-node.ghost .card img{ width:96px; height:96px; } .zdl-node.ghost .ck{ display:none; } #ZDL.multi .zdl-node.ghost .ck{ display:flex; right:-6px; top:-6px; } /* ---------- ZTS 分块排序/开关（底色与色条见上面的 .zts-blk） ---------- */ /* ---------- 抽屉：折叠箭头 & 管理入口 ---------- */ .za-char .za-name .za-arrow{ width:auto; height:auto; font-size:30px; line-height:1; display:inline-block; transform-origin:center center; transition:transform .18s; color:#333; } .za-char.fold .za-name .za-arrow{ transform:rotate(-90deg); } .za-char .za-name{ gap:12px; } .za-char .za-name .za-ntext{ font-size:42px; font-weight:900; } .za-room .za-rtxt{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .za-manage{ margin:34px 50px 0; padding:18px 20px; text-align:center; font-size:30px; border:3px dashed #000; border-radius:12px; background:#fff; cursor:pointer; } .za-manage:active{ background:#111; color:#fff; } /* ============================================================ 追加3：修复标题条/分割线吃掉返回键点击（全宽透明层拦截命中） ============================================================ */ .z-head .z-title{ pointer-events:none; } .z-divider{ pointer-events:none; } .z-head .z-back{ z-index:3; } .zdl-topbar .zdl-back{ z-index:3; } /* 头部条整体不拦事件，交互元素单独放开（防止将来再加的全宽层再犯） */ .z-head{ pointer-events:none; } .z-head .z-back, .z-head .z-hbtns, .z-head .z-hbtns img{ pointer-events:auto; } /* ============================================================ 追加4：弹窗/调试面板改为手机尺寸（跟随舞台缩放，横屏反向旋转） ============================================================ */ #z-modal-root{ position:absolute; inset:0; z-index:10050; pointer-events:none; } #z-modal-root.z-land{ left:-654px; top:654px; width:2388px; height:1080px; right:auto; bottom:auto; transform:rotate(-90deg); transform-origin:center center; } .z-modal-mask{ position:absolute !important; inset:0; z-index:10050; pointer-events:auto; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; } .z-modal-mask.on{ display:flex; } .z-modal{ width:900px; max-height:2000px; } .z-modal.sm{ width:760px; } .z-modal.lg{ width:1000px; } .z-modal-head{ height:110px; padding:0 40px; font-size:40px; } .z-modal-head .z-modal-x{ font-size:56px; } .z-modal-body{ padding:34px 40px; font-size:34px; } .z-modal-foot{ min-height:120px; gap:34px; padding:18px; } .z-modal .z-btn{ min-width:180px; height:88px; font-size:34px; } .z-modal .z-input,.z-modal .z-area{ font-size:34px; padding:18px 22px; } .z-modal .z-rowitem .t1{ font-size:34px; } .z-modal .z-rowitem .t2{ font-size:27px; } .z-modal .z-field>label{ font-size:32px; } /* 调试面板也进舞台：手机尺寸 + 横屏跟随 */ /* 齿轮按钮放右下角：右上角在 Z001 会压住顶栏第 7 个键（退出）， 右下角在 Z001 位于发送键与悬浮球下方，实测无遮挡；面板本体也从右下往上展开 */ .zdbg-gear{ position:absolute; bottom:26px; right:26px; width:104px; height:104px; font-size:48px; border-width:4px; } .zdbg-panel{ position:absolute; bottom:150px; right:26px; width:920px; max-height:1700px; font-size:32px; padding:26px 28px; } .zdbg-panel h4{ font-size:36px; } .zdbg-row .t{ font-size:32px; } .zdbg-row .t .d{ font-size:26px; } .zdbg-btn{ font-size:30px; padding:14px 20px; } .zdbg-state{ font-size:26px; } .zdbg-note{ font-size:28px; } /* ============================================================ 追加5：大纲点状画布（单元=聊天记录）+ 详情卡（背景铺满/图标右上） ============================================================ */ .zdl-flabel{ font-size:30px; color:#333; } .zdl-lane{ position:absolute; left:0; width:100%; height:120px; } .zdl-lane .zdl-lname{ position:absolute; left:24px; top:36px; font-size:30px; font-weight:700; z-index:3; background:rgba(255,255,255,.9); border:2px solid #000; border-radius:8px; padding:6px 14px; cursor:pointer; max-width:250px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .zdl-lane.cur .zdl-lname{ background:#111; color:#fff; } .zdl-lane .zdl-track{ position:absolute; left:290px; right:40px; top:58px; height:6px; border-radius:3px; opacity:.55; } .zdl-pt{ position:absolute; top:44px; width:34px; height:34px; border-radius:50%; border:3px solid #000; background:#ccc; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; } .zdl-pt .lb{ position:absolute; top:38px; font-size:20px; color:#333; white-space:nowrap; } .zdl-pt.sel{ box-shadow:0 0 0 7px rgba(139,94,60,.45); } .zdl-pt .ck{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:#fff; border:3px solid #000; display:none; align-items:center; justify-content:center; font-size:30px; z-index:3; } #ZDL.multi .zdl-pt .ck{ display:flex; } #ZDL.multi .zdl-pt.pick .ck{ background:#2f8b46; color:#fff; border-color:#1c5c2c; } .zdl-pt.ghost{ background:transparent !important; border:none; width:60px; height:60px; top:31px; opacity:.8; } .zdl-pt.ghost img{ width:56px; height:56px; } .zdl-pt.ghost .lb{ display:none; } /* 详情卡：背景图铺满整卡，图标在右上角 */ #zdlDetail{ position:absolute; right:44px; top:150px; width:470px; height:820px; border:3px solid #000; border-radius:16px; overflow:hidden; display:none; z-index:6; } #zdlDetail.open{ display:block; } #zdlDetail .d-hero{ position:absolute; inset:0; z-index:0; background: linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55)), repeating-linear-gradient(45deg,rgba(60,90,160,.45) 0 18px,rgba(120,150,210,.3) 18px 44px), #3a4d76; } #zdlDetail .d-hero.main{ background: linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55)), repeating-linear-gradient(-45deg,rgba(160,120,60,.45) 0 18px,rgba(200,170,110,.3) 18px 44px), #6b5330; } #zdlDetail .d-ic{ position:absolute; top:16px; right:16px; z-index:3; display:flex; gap:16px; } #zdlDetail .d-ic img{ width:56px; height:56px; cursor:pointer; background:rgba(255,255,255,.85); border-radius:10px; padding:6px; } #zdlDetail .d-inner{ position:relative; z-index:2; height:100%; padding:26px 26px 22px; display:flex; flex-direction:column; color:#fff; } #zdlDetail .d-name{ font-size:38px; font-weight:900; text-align:center; text-shadow:0 2px 6px rgba(0,0,0,.6); margin-top:26px; } #zdlDetail .d-meta{ font-size:23px; text-align:center; opacity:.9; margin:10px 0 16px; text-shadow:0 1px 4px rgba(0,0,0,.6); } #zdlDetail .d-desc{ flex:1; font-size:28px; line-height:1.6; overflow-y:auto; white-space:pre-wrap; word-break:break-all; background:rgba(0,0,0,.28); border-radius:12px; padding:16px 18px; text-shadow:0 1px 3px rgba(0,0,0,.5); } #zdlDetail .d-btns{ display:flex; gap:20px; justify-content:center; margin-top:18px; } #zdlDetail .d-btns .z-btn{ min-width:140px; height:74px; font-size:30px; } /* ============================================================ 追加6：Z002 工作台按设计稿重做（大卡片/大芯片/面板内联可滚动） ------------------------------------------------------------ 追加8 又改了三处（见文件末尾「追加8」）： · 只允许垂直滚动：容器 overflow-x 锁死 + touch-action:pan-y · 10 张卡**尺寸一致**（grid-auto-rows 固定），不再按内容高低错落 · 卡片内芯片区**自己垂直滚动**（框挤满了就在框里滚，不外溢、不撑高） ============================================================ */ .z2-scroll{ position:absolute; top:182px; left:0; width:1080px; bottom:170px; overflow-y:auto; overflow-x:hidden; padding:26px 40px 60px; touch-action:pan-y; /* 手机上别让它被横向拖着滑 */ overscroll-behavior-x:none; -webkit-overflow-scrolling:touch; } #z2cards{ position:static; left:auto; top:auto; width:auto; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:26px; grid-auto-rows:560px; /* 每张卡一样高，内容多的在卡内滚 */ } #z2panel{ position:static; left:auto; top:auto; width:auto; margin-top:26px; max-height:none; overflow:visible; display:none; } #z2panel.open{ display:block; } /* 卡片：高度由网格统一给，内部纵向分两段（头部固定 + 芯片区可滚） */ .z2-tile{ height:100%; min-height:0; padding:28px 26px; border-radius:18px; gap:22px; align-items:stretch; min-width:0; overflow:hidden; } .z2-tile img{ width:88px; height:88px; } .z2-tile .t{ font-size:44px; } .z2-tile .s{ font-size:26px; } .z2-tile-main{ display:flex; flex-direction:column; min-width:0; min-height:0; } .z2-chips{ gap:14px; margin-top:16px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; /* 框内内容自己竖向滚动 */ align-content:flex-start; touch-action:pan-y; overscroll-behavior:contain; /* 滚到底不要把整页带着一起滚 */ padding-right:8px; } /* 空状态：不是按钮，长得也不能像按钮，否则分不清哪个能点 */ .z2-none{ display:block; font-size:26px; color:var(--ink2); padding:8px 2px; } .z2-chip{ font-size:30px; padding:10px 22px; border-radius:26px; border-width:3px; min-height:58px; display:inline-flex; align-items:center; min-width:0; } /* 卡内滚动条做细一点，别抢视线 */ .z2-chips::-webkit-scrollbar{ width:8px; } .z2-chips::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.28); border-radius:4px; } .z2-chips::-webkit-scrollbar-track{ background:transparent; } #z2cmd{ bottom:30px; height:110px; } #z2cmd input{ font-size:38px; } /* ============================================================ 追加7：消息操作条跟随消息 + 闲聊模式仿微信 ============================================================ */ .z-msg-acts{ display:flex; gap:22px; justify-content:flex-end; align-items:center; margin-top:12px; padding:12px 20px; background:#efefef; border:2px solid #000; border-radius:12px; } .z-msg-acts img{ width:56px; height:56px; cursor:pointer; } .z-msg-acts img:active{ transform:scale(.88); } /* 闲聊（微信风） */ .z-wx{ margin:26px 0; cursor:pointer; } .z-wx .z-wx-time{ text-align:center; font-size:24px; color:#9a9a9a; margin-bottom:10px; } .z-wx .z-wx-row{ display:flex; gap:18px; align-items:flex-start; } .z-wx.me .z-wx-row{ flex-direction:row-reverse; } .z-wx .z-wx-av{ width:88px; height:88px; border-radius:10px; flex:0 0 auto; background:#d9d9d9 center/cover no-repeat; border:2px solid #cfcfcf; display:flex; align-items:center; justify-content:center; font-size:36px; color:#555; } .z-wx .z-wx-main{ max-width:700px; } .z-wx.me .z-wx-main{ display:flex; flex-direction:column; align-items:flex-end; } .z-wx .z-wx-name{ font-size:24px; color:#8a8a8a; margin-bottom:6px; padding:0 8px; } .z-wx .z-wx-bub{ position:relative; padding:22px 26px; border-radius:14px; font-size:38px; line-height:1.5; background:#fff; border:2px solid #e2e2e2; word-break:break-word; } .z-wx.me .z-wx-bub{ background:#95ec69; border-color:#7fd257; } .z-wx .z-wx-bub::before{ content:''; position:absolute; left:-12px; top:26px; border:8px solid transparent; border-right-color:#e2e2e2; } .z-wx.me .z-wx-bub::before{ left:auto; right:-12px; border-right-color:transparent; border-left-color:#7fd257; } .z-wx.hide{ opacity:.45; } .z-wx .z-msg-acts{ margin-top:10px; } .z-wx.me .z-msg-acts{ justify-content:flex-end; } .z3b-room{ cursor:pointer; } .z3b-room .go{ font-size:26px; color:#8b5e3c; flex:0 0 auto; } .z3b-room:active{ background:#f0ece4; } /* 覆盖：详情卡背景铺满整卡（早期规则里的固定高度/外边距要清掉） */ #zdlDetail .d-hero{ height:auto; margin:0; } #zdlDetail .d-inner{ height:100%; box-sizing:border-box; } /* ============================================================ 追加8：讨论27-36 修复 ============================================================ */ /* [27] 操作条：与消息两端对齐、图标等距排开 */ .z-msg .z-msg-acts{ display:flex; justify-content:space-between; align-items:center; margin:14px 0 0; padding:12px 6px; background:transparent; border:none; } .z-msg .z-msg-acts img{ width:60px; height:60px; } .z-wx .z-msg-acts{ width:100%; } /* [35] 按钮文字颜色显式声明（详情卡里白底白字的修复） */ .z-btn{ color:#000; } .z-btn.pri{ color:#fff; } /* [28][29][30] 抽屉：加宽 + .za-rooms 折叠容器 + 右缘凸起把手 */ #z003a{ width:760px; } .za-room{ width:640px; } .za-rooms{ display:block; } .za-char.fold .za-rooms{ display:none; } .za-grip{ position:absolute; right:-40px; top:46%; width:48px; height:200px; background:#fbfaf7; border:3px solid #000; border-left:none; border-radius:0 26px 26px 0; cursor:pointer; z-index:21; display:flex; align-items:center; justify-content:center; font-size:44px; color:#333; } .za-grip:active{ background:#eee; } #z003a .za-hint{ display:none; } /* [31][33] 设置页字号。原来跟着 var(--zui)（界面字号设置）走，那条设置已经删掉了 —— 它跟 zoom 一起把界面撑出屏幕，理由见下面 [45]。这里统一成固定值。 */ #zsetBody .z-input{ font-size:38px; } #zsetBody .z-btn{ font-size:34px; } .z-field>label{ font-size:32px; } .z-modal .z-field>label{ font-size:32px; } /* [32] 聊天美化颜色变量 */ .z-msg-box{ color:var(--zink,#000); background:rgba(255,255,255,var(--zbubop,0.92)); } .z-msg-name{ color:var(--zaccent,#000); } .z-msg-no{ color:var(--zemph,#333); } .z-msg-box s, .z-msg-box del{ color:var(--zstrike,#999); } .z-wx .z-wx-bub{ background:rgba(255,255,255,var(--zbubop,0.92)); color:var(--zink,#000); } .z-wx.me .z-wx-bub{ background:rgba(149,236,105,calc(var(--zbubop,0.92)*0.9 + 0.1)); color:var(--zink,#000); } /* [36] 大纲节点=设计稿命名卡片 */ .zdl-cardnode{ position:absolute; width:250px; cursor:pointer; z-index:2; } .zdl-cardnode .card{ height:120px; border:2px solid #000; border-radius:10px; background: linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%), repeating-linear-gradient(45deg,rgba(60,90,160,.24) 0 14px,rgba(120,150,210,.18) 14px 34px), #dfe6f2; box-shadow:0 4px 10px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; padding:0 14px; opacity:var(--zdlcardop,1); } .zdl-cardnode.main .card{ background: linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%), repeating-linear-gradient(-45deg,rgba(160,120,60,.26) 0 14px,rgba(200,170,110,.2) 14px 34px), #efe4cd; } .zdl-cardnode .nm{ font-size:var(--zdlfs,34px); font-weight:900; letter-spacing:2px; text-align:center; color:var(--zdltitlecolor,#15213a); opacity:var(--zdltitleop,1); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; text-shadow:0 1px 0 rgba(255,255,255,.55); } .zdl-cardnode .no{ text-align:center; font-size:22px; margin-top:6px; color:#333; font-weight:700; } .zdl-cardnode.cur .card{ outline:4px solid #8b5e3c; outline-offset:3px; } .zdl-cardnode .ck{ position:absolute; right:-16px; top:-16px; width:50px; height:50px; border-radius:50%; border:3px solid #000; background:#fff; display:none; align-items:center; justify-content:center; font-size:30px; z-index:3; } #ZDL.multi .zdl-cardnode .ck{ display:flex; } #ZDL.multi .zdl-cardnode.pick .ck{ background:#2f8b46; color:#fff; border-color:#1c5c2c; } #ZDL.multi .zdl-cardnode.pick .card{ outline:4px solid #2f8b46; outline-offset:3px; } .zdl-cardnode.ghostnode{ width:110px; } .zdl-cardnode.ghostnode .card{ width:100px; height:100px; border:none; background:transparent !important; box-shadow:none; display:flex; align-items:center; justify-content:center; opacity:.8; padding:0; } .zdl-cardnode.ghostnode .card img{ width:92px; height:92px; } .zdl-cardnode.ghostnode .no{ display:none; } .zdl-lane{ height:210px; } .zdl-lane .zdl-track{ top:88px; } .zdl-lane .zdl-lname{ top:14px; max-width:230px; } /* 覆盖：操作条统一两端等距（剧情/闲聊通用） */ .z-msg-acts{ display:flex !important; justify-content:space-between !important; align-items:center; gap:0 !important; margin:14px 0 0; padding:12px 6px; background:transparent; border:none; } .z-wx .z-msg-acts{ width:100% !important; margin:12px 0 0; } /* ============================================================ 追加9：讨论 40/42/43/44/45/48/52 ============================================================ */ /* [40] 闲聊：气泡与操作条同列对齐（统一气泡列宽） */ .z-wx .z-wx-main{ width:min(720px,74%); } .z-wx.me .z-wx-main{ display:flex; flex-direction:column; align-items:flex-end; } /* ⚠ 气泡要**贴着内容**（微信就是这样：发一句"在吗"就一个小气泡）。 原来是 `width:100%` —— 于是短消息也被撑成整列宽，一条"好"跟一大段话一样长，很难看。 `fit-content` 让它按内容收缩，`max-width:100%` 保证长文本仍然换行不溢出。 */ .z-wx .z-wx-bub{ width:fit-content; max-width:100%; box-sizing:border-box; } .z-wx .z-msg-acts{ width:100%; } /* [42] 新建聊天室的在场头像横向排列 */ #znrParts{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; } /* [43] 抽屉顶部：右侧收起键与左侧设置键对称 */ #z003a .za-close{ left:auto; right:41px; } /* [44] 抽屉右缘把手：用设计稿图标 + 正确方向 */ .za-grip{ font-size:0; } .za-grip img{ width:44px; height:52px; } /* [45] 「界面字号」这个设置已经删掉了。它是个自相矛盾的设置： 一边用 !important 把 .zset-row 的字号钉死（所以拧了也没反应）， 一边又用 zoom 把 #zsetBody 整体放大 —— 字没变大、盒子先撑大了， uiFont=52 时 #ZSET 可滚动宽度 1478、可视只有 1080，右边直接被切掉（「调大就看不全」的真相）。 既没用又有害，改为一套固定字号；小字的问题在 .zset-row 的基准字号那一处解决。 */ /* [48] 大纲画布：卡片不越界（画布内边距） */ #zdlCanvas{ padding:0 20px 20px 0; } /* ============================================================ 追加10：闲聊独立美化（46）+ 聊天记录行内文字 ============================================================ */ .z-wx .z-wx-bub{ background:var(--zxOtherBub,rgba(255,255,255,.95)); color:var(--zxInk,#000); font-size:var(--zxFs,38px); } .z-wx.me .z-wx-bub{ background:var(--zxMeBub,#95ec69); } .z-wx .z-wx-av{ width:var(--zxAv,88px); height:var(--zxAv,88px); } .z-wx .z-wx-name{ font-size:calc(var(--zxFs,38px) - 14px); } /* ============================================================ 追加11：横屏（大纲）下的弹窗改横版式（49/50/51） 舞台旋转90°后：弹窗的"布局高"决定视觉宽、"布局宽"决定视觉高 → 布局 1000×2150 视觉约 1150×536，铺满横屏且不越界 ============================================================ */ /* 反向旋转后：弹窗视觉尺寸 = 布局尺寸，所以按横屏可视区(约1280×579@0.536)反推 */ #z-modal-root.z-land .z-modal{ width:1180px; max-height:880px; } #z-modal-root.z-land .z-modal.sm{ width:1020px; max-height:800px; } #z-modal-root.z-land .z-modal.lg{ width:1320px; max-height:930px; } #z-modal-root.z-land .z-modal-head{ height:92px; font-size:34px; } #z-modal-root.z-land .z-modal-head .z-modal-x{ font-size:48px; } #z-modal-root.z-land .z-modal-body{ padding:22px 38px; font-size:31px; } #z-modal-root.z-land .z-modal-foot{ min-height:86px; padding:10px; gap:26px; } #z-modal-root.z-land .z-modal .z-btn{ min-width:160px; height:70px; font-size:29px; } #z-modal-root.z-land .z-modal .z-input, #z-modal-root.z-land .z-modal .z-area{ font-size:30px; padding:12px 18px; } #z-modal-root.z-land .z-modal .z-field{ margin-bottom:16px; } #z-modal-root.z-land .z-modal .z-field>label{ font-size:28px; margin-bottom:5px; } #z-modal-root.z-land .z-modal .z-area{ min-height:130px; } #z-modal-root.z-land .z-modal .z-rowitem{ min-height:76px; padding:10px 16px; margin-bottom:12px; } #z-modal-root.z-land .z-modal .z-rowitem .t1{ font-size:31px; } #z-modal-root.z-land .z-modal .z-rowitem .t2{ font-size:25px; } /* 追加：全局调试面板 —— 真实API测试结果行 */ .zdbg-ping{ font-size:22px; color:#333; background:#eef3ea; border-radius:8px; padding:10px 14px; line-height:1.6; margin:6px 0 10px; word-break:break-all; white-space:pre-line; } .zdbg-ping:empty{ display:none; } .zdbg-ping.good{ background:#e8f6e8; color:#1c6b1c; } .zdbg-ping.bad{ background:#fdecec; color:#a02020; border:2px solid #e3b4b4; } /* 私密数据包：选文件的那个框 */ .zdbg-file{ flex:1; min-width:0; font-size:24px; font-family:var(--serif); padding:10px; border:2px dashed #999; border-radius:10px; background:#faf8f3; color:#555; } .zdbg-file::file-selector-button{ font-family:var(--serif); font-size:24px; padding:8px 18px; margin-right:14px; border:2px solid #000; border-radius:10px; background:#fff; color:#000; cursor:pointer; } @media (min-width:520px){ .zdbg-ping{ font-size:24px; } } /* ============================================================ 调试球：拖动 / 闲置淡化 / 长按收起 背景：球原来钉死在右下角，在列表屏正好压住最后一行（ZLS/ZTS/ZSET 的滚动列表底行、Z002 的 #z2cmd）。现在可拖走、闲置自动缩成半透明、 长按整个收起只留一个小角标，面板里还有「遮挡自检」直接报压住了谁。 ============================================================ */ .zdbg-gear{ transition:opacity .25s, transform .25s; touch-action:none; /* 拖动时别让页面跟着滚 */ transform-origin:center center; } /* 闲置：缩小 + 半透明，视觉上不抢戏（仍可点、可拖） */ .zdbg-gear.idle{ opacity:.38; transform:scale(.66); } /* 拖动中：加个描边，别淡 */ .zdbg-gear.drag{ opacity:1; transform:scale(1.06); box-shadow:0 0 0 8px rgba(255,212,59,.35); } .zdbg-gear.hide{ display:none; } /* 收起后的小角标 */ .zdbg-tab{ position:absolute; z-index:10100; width:30px; height:30px; border-radius:50%; background:rgba(17,17,17,.55); color:#ffd43b; border:2px solid rgba(255,212,59,.75); display:none; align-items:center; justify-content:center; font-size:18px; cursor:pointer; font-weight:700; opacity:.5; } .zdbg-tab.on{ display:flex; } .zdbg-tab:active{ transform:scale(.9); } .zdbg-tab:hover{ opacity:1; } /* 讨论模式快捷开关：贴在调试球左边（位置由 z-ui.js 的 applyPos 跟着球算），这里只管长相。 开着的时候变成实心红：屏幕上本来就到处是红框，开关自己也得一眼看出是开是关。 */ .zdbg-quick{ position:absolute; z-index:10101; width:72px; height:72px; border-radius:50%; background:rgba(17,17,17,.82); color:#ffd43b; border:3px solid rgba(255,212,59,.65); display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:700; cursor:pointer; user-select:none; transition:background .2s, color .2s, border-color .2s, transform .2s; } .zdbg-quick.on{ background:#d43a3a; color:#fff; border-color:#8f2b2b; } .zdbg-quick:active{ transform:scale(.9); } .zdbg-quick.hide{ display:none; } /* 空 src 的 ：浏览器当成加载失败会显示碎图图标 —— 直接不显示 */ img[src=""]{ display:none; } /* ============================================================ 追加12：工作台「预设」卡片（第 10 张）—— 拆解条目的搜索 / 分组 / 开关 ============================================================ */ .zp-search .z-input{ font-size:30px; } .zp-group{ border-left:8px solid #000; padding-left:20px; } .zp-group[data-g="cotList"]{ border-left-color:#6c5b8f; } .zp-group[data-g="globals"]{ border-left-color:#8b5e3c; } .zp-group[data-g="presetEntries"]{ border-left-color:#3f7365; } .zp-group>label{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .zp-count{ color:#8b5e3c; font-weight:700; } .zp-gacts{ display:flex; gap:14px; margin:4px 0 14px; } .zp-gacts .z-btn{ min-width:120px; height:64px; font-size:28px; padding:0 22px; } .zp-row .grow{ cursor:pointer; } .zp-row .zp-more{ color:#8b5e3c; } .zp-full{ margin-top:12px; padding:14px 18px; max-height:620px; overflow-y:auto; background:#f4f1ea; border:2px solid #ddd6c8; border-radius:10px; font-size:26px; line-height:1.6; color:#000; white-space:pre-wrap; word-break:break-word; } .zp-samp{ color:#3f3f3f; } /* ---------- 追加13：输出组装器（出哪些块 / 什么顺序 / 包什么标签） ---------- */ .zp-group[data-g="outBlocks"]{ border-left-color:#4a7c96; } /* 这一行不能用 .zp-row —— 那个类带"点标题展开全文"的交互，会跟输入框抢点击 */ .zp-obrow{ min-height:80px; } .zp-obrow .ob-in{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; } .zp-obrow .z-input{ font-size:28px; padding:10px 14px; min-width:0; } .zp-obrow .ob-name{ flex:0 1 220px; } .zp-obrow .ob-tag{ flex:0 1 240px; } .zp-obrow .ob-lt,.zp-obrow .ob-gt{ font-size:28px; font-weight:700; flex:0 0 auto; } .zp-obrow .z-icbtn{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:30px; } .zp-obacts{ display:flex; gap:14px; margin:4px 0 14px; } .zp-obacts .z-btn{ min-width:120px; height:64px; font-size:28px; padding:0 22px; } .zp-obprev{ margin-top:12px; padding:14px 18px; max-height:420px; overflow-y:auto; background:#f4f1ea; border:2px solid #ddd6c8; border-radius:10px; font-size:26px; line-height:1.6; color:#000; white-space:pre-wrap; word-break:break-word; } /* 提示词总览里"不在分块表里的段"（预设条目）：只读，没有 ▲▼ 和开关 */ .zts-blk.zts-ro{ border-left-style:dashed; } /* ============================================================ 闲聊（微信风）界面 —— 照参考图重做 ------------------------------------------------------------ 1) 气泡里加「译文框」：原文在上，一条分隔线，译文在下（更小更淡） 2) 时间从气泡上方移到下方 3) 整体深色（xTheme 的默认值已经改成深色；用户改过颜色仍以用户的为准） 4) 输入行左边加「＋」，展开成 4×2 的功能宫格 ============================================================ */ /* ---- 译文框 ---- */ .z-wx .z-wx-sep{ height:1px; background:currentColor; opacity:.18; margin:16px 0 14px; } .z-wx .z-wx-tr{ color:currentColor; opacity:.62; font-size:calc(var(--zxFs,38px) - 6px); line-height:1.5; } /* ---- 非文本消息的气泡内容（闲聊八宫格：语音/图片/位置/文件/转账/通话/表情） ---- 都塞在原来的气泡里，所以只需要管内部排版；颜色一律 currentColor，跟着气泡底色走 （自己的绿气泡和对方的白气泡共用同一套，不写死颜色）。 */ .z-fb{ display:block; } .z-fb-sub{ font-size:calc(var(--zxFs,38px) - 6px); line-height:1.5; opacity:.78; margin-top:10px; word-break:break-word; } .z-fb-ttl{ font-size:calc(var(--zxFs,38px) + 4px); font-weight:600; line-height:1.4; word-break:break-word; } .z-fb-st{ font-size:calc(var(--zxFs,38px) - 8px); opacity:.6; margin-top:8px; } /* 图片没出来时的占位（生成中 / 没配生图API / 失败）——别让它只剩一行描述文字 */ .z-fb-ph{ display:flex; align-items:center; justify-content:center; width:320px; height:200px; border-radius:14px; background:currentColor; opacity:.12; font-size:calc(var(--zxFs,38px) - 10px); color:#000; } /* 拍一拍：微信里是一行居中的灰字，不是气泡正文 */ .z-fb-pat{ text-align:center; font-size:calc(var(--zxFs,38px) - 8px); opacity:.6; } /* 拍一拍那条不要气泡壳（底色/边框/小尾巴全去掉），否则会像一条空消息带个尖角 */ .z-wx .z-wx-bub.pat, .z-wx.me .z-wx-bub.pat{ background:transparent; border-color:transparent; box-shadow:none; padding:0; } .z-wx .z-wx-bub.pat::before{ display:none; } /* 语音：波形 + 秒数 */ .z-fb-voice{ display:flex; align-items:center; gap:16px; min-width:180px; cursor:pointer; } .z-fb-wave{ width:52px; height:52px; flex:none; border-radius:50%; background:currentColor; opacity:.22; } .z-fb-voice:active .z-fb-wave{ opacity:.4; } .z-fb-secs{ font-size:calc(var(--zxFs,38px) - 6px); opacity:.7; } /* 图片 / 表情：限宽，别把气泡撑破 */ .z-fb-img{ display:block; max-width:100%; width:auto; max-height:640px; border-radius:14px; } .z-fb-emoji{ display:block; width:240px; height:240px; object-fit:contain; } /* 卡片类（位置/文件/转账/通话） */ .z-fb-card{ display:block; min-width:260px; } .z-fb-pay .z-fb-ttl{ font-size:calc(var(--zxFs,38px) + 14px); } .z-fb-pay.done{ opacity:.66; } /* 表单里的快捷填入小按钮（「位置」里点世界地点名直接填）。 比 .z-btn 小一号 —— 它不是主操作，只是省打字。 */ .z-fb-picks{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; } .z-fb-picks .z-btn{ min-width:0; height:60px; padding:0 22px; font-size:26px; } /* ---- 时间挪到气泡下方 ---- */ .z-wx .z-wx-time{ text-align:left; margin:12px 0 0; padding:0 10px; } .z-wx.me .z-wx-time{ text-align:right; } /* ---- 深色底 ---- */ #Z001.x-mode{ background:var(--zxBg,#14161a); } #Z001.x-mode .z-scene-bar, #Z001.x-mode #z1sceneBar{ background:rgba(255,255,255,.06); color:#c8ccd4; } #Z001.x-mode #z1inputrow{ background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.13); border-radius:56px; } #Z001.x-mode #z1input{ background:transparent; color:var(--zxInk,#e6e8ec); } #Z001.x-mode #z1input::placeholder{ color:rgba(230,232,236,.4); } #Z001.x-mode #z1inputrow img{ filter:invert(1) brightness(1.6); opacity:.8; } #Z001.x-mode #z1avatars .z-ava{ border-color:rgba(255,255,255,.18); } #Z001.x-mode #z1pull{ filter:invert(1) brightness(1.6); opacity:.5; } /* ---- 输入行左边那个「＋」---- */ #Z001 #z1plus{ width:64px; height:64px; flex:0 0 auto; margin:0 6px 0 14px; cursor:pointer; display:none; align-items:center; justify-content:center; border:3px solid #000; border-radius:50%; font-size:40px; line-height:1; font-weight:700; } #Z001.x-mode #z1plus{ display:flex; border-color:rgba(255,255,255,.35); color:#e6e8ec; } #Z001.x-mode #z1plus.on{ background:rgba(255,255,255,.14); } #Z001 #z1plus:active{ transform:scale(.92); } /* ---- 功能宫格（4 列 × 2 行）---- */ #Z001 #z1plugin{ position:absolute; left:66px; width:948px; bottom:392px; z-index:6; background:#1b1e23; border-radius:28px; padding:34px 30px 10px; display:none; grid-template-columns:repeat(4,1fr); gap:30px 0; box-shadow:0 -6px 30px rgba(0,0,0,.35); } #Z001 #z1plugin.on{ display:grid; } #Z001 #z1plugin .z-pl{ display:flex; flex-direction:column; align-items:center; gap:14px; cursor:pointer; } #Z001 #z1plugin .z-pl-ic{ width:132px; height:132px; border-radius:34px; background:#2a2e35; display:flex; align-items:center; justify-content:center; font-size:62px; line-height:1; color:#dfe3ea; } #Z001 #z1plugin .z-pl-t{ font-size:26px; color:#c3c8d1; } #Z001 #z1plugin .z-pl:active .z-pl-ic{ transform:scale(.94); background:#333842; } /* 宫格打开时，聊天区底部让出高度，别把最后几条消息压在宫格下面 */ #Z001.x-mode.gridOpen #z1chat{ bottom:650px; } /* 我这一侧的气泡：上一版的规则只改了底色、**没改字色**，于是深底上还是黑字（看不清）； 绿边 + 绿尾巴也是浅色主题（#95ec69 那套）留下的。统一让边框跟着 --zxInk 走， 这样用户把配色改成浅色时边框也会跟着变浅。 */ .z-wx .z-wx-bub{ border-color:rgba(255,255,255,.18); border-color:color-mix(in srgb, var(--zxInk,#e6e8ec) 18%, transparent); } .z-wx.me .z-wx-bub{ color:var(--zxInk,#e6e8ec); border-color:rgba(255,255,255,.26); border-color:color-mix(in srgb, var(--zxInk,#e6e8ec) 26%, transparent); } .z-wx .z-wx-bub::before{ border-right-color:rgba(255,255,255,.18); border-right-color:color-mix(in srgb, var(--zxInk,#e6e8ec) 18%, transparent); } .z-wx.me .z-wx-bub::before{ border-left-color:rgba(255,255,255,.26); border-left-color:color-mix(in srgb, var(--zxInk,#e6e8ec) 26%, transparent); } /* [78] 顶栏图标暗色适配：聊天底色是深色时，#z1top 的黑线条图标反成白色线条。 触发条件在 z-ui.js 的 applyTheme（剧情自定义深底 或 闲聊默认深底 → #Z001.top-dark）。 */ #Z001.top-dark #z1top img{ filter: brightness(0) invert(1); } #Z001.top-dark #z1top img:hover{ filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,.45)); } /* ============================================================ 追加14：同人模式（ZF1 首页 / ZF2 连载 / ZF3 新建 / ZF4 阅读） ------------------------------------------------------------ 参考稿是一整套深底金调，跟 Z 系列的米色完全不搭，所以这四屏单独上色， 全部收在 .zf-screen 下，不影响其它屏。图标用内联 SVG（深色描边的那套在这儿看不见）。 ============================================================ */ .zf-screen{ background:#171210; color:#e6cda2; overflow:hidden; font-family:var(--serif); } .zf-screen::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1200px 700px at 78% 3%, rgba(216,180,137,.11), transparent 62%), radial-gradient(900px 620px at 8% 97%, rgba(216,180,137,.07), transparent 60%); } /* ---------- 顶栏：返回 + 两个刻（tab） ---------- */ .zf-top{ position:absolute; top:0; left:0; width:1080px; height:200px; z-index:6; } .zf-back{ position:absolute; left:26px; top:58px; width:78px; height:78px; z-index:2; color:#d8b489; cursor:pointer; display:block; } .zf-back svg{ width:78px; height:78px; } .zf-back:active{ transform:scale(.9); } /* ⚠ .zf-tabs 是整屏宽的定位块，DOM 又在 .zf-back 后面 —— 不给 z-index 的话 它会盖住左边的返回键（点击穿透不到），返回键就"点了没反应"。 */ .zf-tabs{ position:absolute; top:26px; left:0; width:1080px; height:150px; z-index:1; display:flex; align-items:center; justify-content:center; gap:110px; } .zf-tab{ position:relative; font-size:48px; letter-spacing:4px; color:#7d6d58; cursor:pointer; padding:8px 10px; transition:color .15s; } .zf-tab.on{ color:#f6e6c4; font-weight:700; text-shadow:0 0 22px rgba(216,180,137,.35); } .zf-tab.on::after{ content:''; position:absolute; left:12%; right:12%; bottom:-4px; height:4px; border-radius:2px; background:linear-gradient(90deg,transparent,#d8b489,transparent); } .zf-tabline{ position:absolute; bottom:26px; left:150px; width:780px; height:2px; background:linear-gradient(90deg,transparent,rgba(216,180,137,.5),transparent); } .zf-tabline::after{ content:'✦'; position:absolute; left:50%; top:-19px; transform:translateX(-50%); font-size:24px; color:#d8b489; background:#171210; padding:0 14px; } /* ---------- 标签行（左右滑动） ---------- */ /* ZF1 的标签行钉在 tab 下面；ZF2 里的那份在滚动容器里，走行内流（见下面的覆盖） */ .zf-tagrow{ position:absolute; top:206px; left:0; width:1080px; height:104px; display:flex; align-items:center; gap:16px; overflow-x:auto; overflow-y:hidden; padding:0 34px; box-sizing:border-box; -webkit-overflow-scrolling:touch; z-index:5; } .zf-tagrow::-webkit-scrollbar{ display:none; } .zf-tag{ flex:0 0 auto; height:74px; padding:0 34px; display:inline-flex; align-items:center; border:2px solid rgba(216,180,137,.26); border-radius:40px; background:rgba(255,255,255,.03); color:#b39a76; font-size:30px; cursor:pointer; } .zf-tag.on{ background:rgba(216,180,137,.17); color:#f6e6c4; border-color:rgba(216,180,137,.72); } .zf-tag.ro{ cursor:default; } .zf-tag-lbl{ flex:0 0 auto; font-size:26px; color:#8a7a63; padding-right:6px; } /* ---------- 列表 ---------- */ .zf-list{ position:absolute; top:318px; left:0; bottom:0; width:1080px; overflow-y:auto; overflow-x:hidden; padding:8px 34px 210px; box-sizing:border-box; } .zf-scroll{ position:absolute; top:200px; left:0; bottom:0; width:1080px; overflow-y:auto; overflow-x:hidden; padding:20px 34px 210px; box-sizing:border-box; } /* ⚠ ZF2 的标签行与章节列表在 .zf-scroll 里面 —— 那里必须走正常文档流。 照抄 ZF1 的绝对定位（top:318px）会让章节卡片正好落到书封大图上，糊成一团。 */ .zf-scroll .zf-tagrow{ position:static; width:auto; height:auto; overflow:visible; flex-wrap:wrap; gap:12px; padding:22px 0 6px; } .zf-scroll .zf-list{ position:static; width:auto; overflow:visible; padding:0; } .zf-empty{ padding:130px 60px; text-align:center; font-size:32px; line-height:1.9; color:#8a7a63; } /* ---------- 单篇/章节卡片（照参考稿：右边一张图，左上标题，右上「查看》」，右下双箭头） ---------- */ .zf-card{ position:relative; display:flex; min-height:268px; margin-bottom:26px; border-radius:26px; overflow:hidden; cursor:pointer; background:linear-gradient(120deg, rgba(60,44,32,.95), rgba(30,22,17,.95)); border:2px solid rgba(216,180,137,.16); } .zf-card:active{ transform:scale(.995); } .zf-cover{ position:absolute; right:0; top:0; width:440px; height:100%; background-size:cover; background-position:center; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 58%); mask-image:linear-gradient(90deg,transparent 0%,#000 58%); } .zf-cover.nopic{ background:linear-gradient(135deg,#2b2018,#463322); } .zf-cmain{ position:relative; z-index:2; padding:28px 30px; width:100%; box-sizing:border-box; } .zf-ttl{ display:flex; align-items:baseline; gap:16px; font-size:44px; font-weight:700; color:#f6e6c4; } .zf-ttl .no{ font-size:40px; color:#d8b489; } .zf-sub{ margin-top:12px; font-size:26px; color:#b39a76; } .zf-desc{ margin-top:18px; max-width:640px; font-size:28px; line-height:1.55; color:#c9b391; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .zf-view{ position:absolute; right:28px; top:24px; z-index:3; padding:10px 24px; border-radius:12px; font-size:28px; color:#f6e6c4; border:2px solid rgba(216,180,137,.5); background:rgba(28,19,13,.62); } .zf-chev{ position:absolute; right:36px; bottom:14px; width:66px; height:66px; color:rgba(216,180,137,.7); z-index:3; } /* ---------- 连载：书名 + 两行简介为一行 ---------- */ .zf-book{ display:flex; align-items:center; gap:24px; padding:24px 26px; margin-bottom:22px; border-radius:22px; cursor:pointer; background:linear-gradient(120deg, rgba(60,44,32,.95), rgba(30,22,17,.95)); border:2px solid rgba(216,180,137,.16); } .zf-book:active{ transform:scale(.995); } .zf-bcover{ flex:0 0 auto; width:124px; height:164px; border-radius:14px; background-size:cover; background-position:center; } .zf-bcover.nopic{ background:linear-gradient(135deg,#2b2018,#463322); } .zf-bmain{ flex:1; min-width:0; } .zf-bttl{ font-size:42px; font-weight:700; color:#f6e6c4; } .zf-bdesc{ margin-top:14px; font-size:28px; line-height:1.5; color:#c9b391; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .zf-bmeta{ flex:0 0 auto; text-align:right; font-size:24px; line-height:1.4; color:#b39a76; } .zf-bmeta b{ font-size:40px; color:#d8b489; } /* ---------- 新建按钮（右下角大圆钮，两个 tab 都有） ---------- */ /* 动作表（zm-pick）的选项行 */ .z-pick-item{ padding:26px 28px; font-size:34px; color:#2a2a2a; border-bottom:1px solid rgba(0,0,0,.08); cursor:pointer; border-radius:12px; } .z-pick-item:last-child{ border-bottom:none; } .z-pick-item:active{ background:rgba(0,0,0,.06); } .z-pick-item.danger{ color:#C0392B; font-weight:600; } /* ---------- 同人模式：长标题不再压到「查看》」/ 不再换行 ---------- ZF1 的卡片标题原来没有宽度上限（.zf-ttl 是整宽 flex），而「查看》」是绝对定位在右上的； AI 提示词虽然要求"12 字以内"，但标题输入框没有 maxlength，用户能填任意长。 */ .zf-ttl{ min-width:0; } /* ⚠ 只给标题那个 .t 加省略 —— .no 也是 span，别一起套（那样序号右边会白空 190px） */ .zf-ttl .t{ min-width:0; max-width:560px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ZF4 / ZF2 顶栏那行书名·章节名：48px 字号下书名 12 字 + 章节名很容易超 1080， 原来会折成两行挤在 150px 高的顶栏里。 */ #zf4Name, #zf2Name{ display:block; max-width:760px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .zf-more{ position:absolute; right:34px; top:58px; width:78px; height:78px; z-index:3; color:#d8b489; cursor:pointer; display:block; } .zf-more svg{ width:78px; height:78px; fill:currentColor; } .zf-add{ position:absolute; right:46px; bottom:196px; width:132px; height:132px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:7; cursor:pointer; background:linear-gradient(160deg,#ecd8b0,#c19c68); color:#251a11; box-shadow:0 14px 36px rgba(0,0,0,.55), 0 0 0 6px rgba(216,180,137,.08); } .zf-add svg{ width:62px; height:62px; } .zf-add:active{ transform:scale(.93); } /* ---------- ZF2 连载详情头部 ---------- */ .zf2-cover{ position:relative; height:430px; border-radius:26px; overflow:hidden; background-size:cover; background-position:center; display:flex; align-items:flex-end; border:2px solid rgba(216,180,137,.18); } .zf2-cover.nopic{ background:linear-gradient(135deg,#2b2018,#4a3526); } .zf2-htxt{ width:100%; box-sizing:border-box; padding:36px 32px 26px; background:linear-gradient(0deg,rgba(18,12,9,.96),transparent); } .zf2-h1{ font-size:54px; font-weight:700; color:#f8e9c8; } .zf2-h2{ margin-top:12px; font-size:28px; color:#c9b391; } .zf2-desc{ margin:24px 6px 26px; font-size:30px; line-height:1.65; color:#c9b391; } /* ---------- ZF3 新建向导 ---------- */ .zf3-sec{ margin-bottom:46px; } .zf3-h{ display:flex; align-items:center; gap:16px; margin-bottom:20px; } .zf3-h .n{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:2px solid rgba(216,180,137,.5); color:#e6cda2; font-size:28px; } .zf3-h .t{ font-size:36px; font-weight:700; color:#f6e6c4; } .zf3-h .h{ font-size:24px; color:#8a7a63; } .zf3-sub{ margin:16px 0 10px; font-size:26px; color:#8a7a63; } .zf3-chips{ display:flex; flex-wrap:wrap; gap:16px; } .zf-chip{ padding:14px 30px; border-radius:40px; font-size:28px; cursor:pointer; border:2px solid rgba(216,180,137,.26); background:rgba(255,255,255,.03); color:#b39a76; } .zf-chip.on{ background:rgba(216,180,137,.18); border-color:rgba(216,180,137,.75); color:#f6e6c4; } .zf-chip.lib{ border-style:dashed; } .zf3-row{ display:flex; gap:18px; align-items:center; margin-top:18px; } .zf3-none{ font-size:26px; color:#8a7a63; } .zf3-cover{ height:300px; margin-top:20px; border-radius:20px; background-size:cover; background-position:center; border:2px solid rgba(216,180,137,.18); } .zf3-cover.nopic{ background:repeating-linear-gradient(45deg,rgba(255,255,255,.03),rgba(255,255,255,.03) 22px,transparent 22px,transparent 44px); } .zf3-hint{ margin-top:14px; font-size:24px; color:#8a7a63; } /* 深底上的通用控件换色（.zf-screen 前缀提高优先级，盖住 z.css 前面的米色定义） */ .zf-screen .z-input,.zf-screen .z-area{ background:rgba(255,255,255,.06); border:2px solid rgba(216,180,137,.3); color:#f2e4c8; } .zf-screen .z-input::placeholder,.zf-screen .z-area::placeholder{ color:#7d6d58; } .zf-screen .z-field>label{ color:#b39a76; } .zf-screen .z-btn{ background:rgba(255,255,255,.06); border:2px solid rgba(216,180,137,.45); color:#f0dcb8; } .zf-screen .z-btn.pri{ background:linear-gradient(160deg,#ecd8b0,#c19c68); color:#251a11; border-color:transparent; font-weight:700; } /* ---------- 底部按钮条 ---------- */ .zf-foot{ position:absolute; left:0; bottom:0; width:1080px; height:176px; z-index:6; display:flex; align-items:center; justify-content:flex-end; gap:24px; padding:0 46px; box-sizing:border-box; background:linear-gradient(0deg,#171210 42%,rgba(23,18,16,0)); } /* ---------- ZF4 阅读 ---------- */ .zf4-head{ padding:6px 6px 26px; margin-bottom:26px; border-bottom:2px solid rgba(216,180,137,.16); } .zf4-h1{ font-size:50px; font-weight:700; color:#f8e9c8; } .zf4-h2{ margin-top:12px; font-size:26px; color:#8a7a63; } .zf4-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; } .zf4-desc{ margin-top:18px; font-size:30px; line-height:1.65; color:#c9b391; } .zf4-text p{ margin:0 0 28px; font-size:34px; line-height:1.85; color:#eadfc7; text-indent:2em; } /* ---------- AI 写文时的遮罩（挂在当前屏里，跟着舞台缩放） ---------- */ .zf-busy{ position:absolute; inset:0; z-index:30; display:none; align-items:center; justify-content:center; background:rgba(12,9,7,.86); } .zf-busy.on{ display:flex; } .zf-busy-box{ text-align:center; } .zf-spin{ width:96px; height:96px; margin:0 auto 30px; border-radius:50%; border:6px solid rgba(216,180,137,.18); border-top-color:#e0c294; animation:zfspin 1s linear infinite; } @keyframes zfspin{ to{ transform:rotate(360deg); } } .zf-busy-t{ font-size:34px; color:#e6cda2; } .zf-busy-s{ margin-top:14px; font-size:24px; color:#8a7a63; } /* ============================================================ 追加15：同人模式 —— 配色返工 + 美化（自定义 CSS / 毛玻璃雨滴） ------------------------------------------------------------ 追加14 那版卡片是"棕色渐变"，压得发浑、对比也低（用户原话：这个颜色很丑）。 这里**保留版式**，只把底和面重做：冷灰底 + 明确的层次 + 干净的金色点缀。 美化两档：night（默认，本段）/ rain（毛玻璃雨滴，见下）。 用户导入的 CSS 单独走