:root{--bg:#fff;--panel:#fff;--side:#f9fafb;--tx:#21252b;--sub:#8a919c;--line:#eceef1;--gl:#c3c9d2;--tgl:#d9dce1;--acc:#3370ff;--acc2:#eaf1ff;--sel:#e6efff;--hov:#f2f3f5;--mark:#ffe58f;--danger:#d9534f;--tree:320px} [data-theme=dark]{--bg:#111418;--panel:#1b1f24;--side:#16191e;--tx:#d6d9dd;--sub:#8b929a;--line:#2d333b;--gl:#4d5661;--tgl:#3a4048;--acc:#5b8def;--acc2:#1c2636;--sel:#22304a;--hov:#20242a;--mark:#7a5d00} *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--tx);font-size:15px;overflow:hidden} /* 页面锁住，别一会儿大一会儿小：禁掉双击放大与捏合缩放（手机上"点两下就放大"就是它） */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation} body{touch-action:manipulation} button,input,textarea,select{font:inherit;color:var(--tx);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px} button{cursor:pointer;white-space:nowrap} button:hover{border-color:var(--acc);color:var(--acc)} button.pri{background:var(--acc);border-color:var(--acc);color:#fff} button.pri:hover{opacity:.9;color:#fff} button.danger:hover{border-color:var(--danger);color:var(--danger)} button.mini{padding:2px 8px;font-size:12px;border-radius:6px} input:focus,textarea:focus{outline:none;border-color:var(--acc)} .sp{flex:1} .hide{display:none!important} #app{display:flex;height:100vh;width:100%} /* ---------- v3.218：首屏骨架 ---------- 为什么要有它（线上冷启动实测）：424~452ms 才画出第一个像素，而**真正的目录要等 /api/articles 回来** （再 200ms 左右），中间那四五百毫秒整页只有 20 来个可读字符 —— 侧栏和正文**全是白的**。 骨架是**写死在 HTML 里**的（不靠 JS 生成），所以它跟首屏一起出现； `renderTree()` / `renderContent()` 一渲染就把整块 innerHTML 顶掉，**不需要额外清理**。 ★ 单色、不用彩色（业主定过「图标统一单色」）；★ 尊重 prefers-reduced-motion。 */ .skwrap{padding:10px 6px} .skrow{display:flex;align-items:center;min-height:26px;padding:2px 8px} .sk{display:inline-block;height:11px;border-radius:6px;background-color:var(--line)} .sk{background-image:linear-gradient(90deg,transparent,rgba(128,128,128,.15),transparent); background-size:220px 100%;background-repeat:no-repeat;animation:skmove 1.15s linear infinite} .sk.skh{height:19px;border-radius:7px} @keyframes skmove{0%{background-position:-220px 0}100%{background-position:440px 0}} html[data-theme=dark] .sk{background-color:#262b31} html[data-theme=dark] .sk{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)} @media (prefers-reduced-motion:reduce){.sk{animation:none;background-image:none}} /* ---------- 左侧树（幕布式） ---------- */ #tree{width:var(--tree);flex:0 0 var(--tree);border-right:1px solid var(--line);background:var(--side);display:flex;flex-direction:column;min-height:0;position:relative} #sbDrag{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:60} #sbDrag:hover,#sbDrag.on{background:color-mix(in srgb,var(--acc) 22%,transparent)} .thead{padding:9px 10px 7px;display:flex;gap:6px;align-items:center} .thead input{flex:1;min-width:0;border:1px solid transparent;background:var(--hov);border-radius:6px;font-size:13px;padding:6px 9px} .thead input:hover{background:var(--line)} .thead .addbtn{width:28px;height:28px;flex:0 0 28px;padding:0;border:1px solid transparent;background:transparent;border-radius:6px;font-size:16px;line-height:1;color:var(--sub);display:flex;align-items:center;justify-content:center} #modeBtn{width:28px;height:28px;flex:0 0 28px;padding:0;border:1px solid transparent;background:transparent;border-radius:6px;color:var(--sub);display:flex;align-items:center;justify-content:center} #modeBtn:hover{color:var(--acc);border-color:var(--acc)} /* ★v3.190：侧栏底下那条常驻横条整条去掉（＋文档 / ＋文件夹 / 📥导入 在顶上「＋」下拉和右上「我的 ▾」里都有，纯重复， 白占 ~37px 高度）。「批量」搬到侧栏顶上这一排，跟 字 / ＋ / 锁 / 收起 并排 —— 一个小方块，不占高度、随时看得见， 批量开着时变蓝（.on），点它自己也能退出。批量模式一开，底下才浮出那条操作条（.tfoot#batchBar）。 */ #btnBatch{width:28px;height:28px;flex:0 0 28px;padding:0;border:1px solid transparent;background:transparent;border-radius:6px;color:var(--sub);display:flex;align-items:center;justify-content:center} #btnBatch:hover{color:var(--acc);border-color:var(--acc)} #btnBatch.on{color:var(--acc);border-color:var(--acc);background:var(--acc2)} .thead .addbtn:hover{color:var(--acc);border-color:var(--acc)} #tbody{flex:1;overflow-y:auto;padding:2px 6px 12px;scrollbar-width:thin} #tbody::-webkit-scrollbar{width:6px} #tbody::-webkit-scrollbar-thumb{background:transparent;border-radius:3px} #tbody:hover::-webkit-scrollbar-thumb{background:var(--line)} .tnode{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:13.5px;user-select:none;position:relative;color:var(--tx)} .tnode:hover{background:var(--hov)} /* 目录树里「当前选中的那一条」（按 F2 改名的对象）：给个细边框，一眼知道改的是谁 */ .tnode.tsel{box-shadow:inset 0 0 0 1.5px var(--acc)} /* 就地改名的输入框 */ .tree-ren{flex:1;min-width:0;font:inherit;font-size:13.5px;color:var(--tx);background:var(--bg);border:1px solid var(--acc);border-radius:5px;padding:1px 5px;outline:none} .tnode.on{background:var(--sel);color:var(--tx);font-weight:600;box-shadow:inset 3px 0 0 var(--acc)} /* 从搜索结果点文件夹跳过来时：一直亮着（不是闪一下），点别处或重新搜索才消失，省得自己找 */ .tnode.hitfolder{background:color-mix(in srgb,var(--acc) 20%,transparent);box-shadow:inset 3px 0 0 var(--acc)} .tnode.hitfolder .nm{color:var(--acc);font-weight:700} .tnode.hitfolder::after{content:'← 在这里';margin-left:auto;flex:none;font-size:11px;color:#fff;background:var(--acc);border-radius:9px;padding:1px 7px} html[data-theme=dark] .tnode.hitfolder{background:color-mix(in srgb,var(--acc) 32%,transparent)} /* 「返回搜索结果」常驻条：跳过去以后一键回到刚才那份结果，不用重新搜 */ .spback{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:6px;background:var(--acc2);border:1px solid var(--line);border-radius:9px;padding:6px 10px;margin:2px 2px 8px;font-size:12.5px;color:var(--tx);cursor:pointer} .spback:hover{background:color-mix(in srgb,var(--acc) 16%,transparent)} .spback b{color:var(--acc);max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spback .sx{margin-left:auto;color:var(--sub);font-size:11.5px} .tnode[data-folder] .nm{font-weight:600} .tnode[data-doc]:not(.on) .nm{color:var(--sub)} .tnode .st{display:inline-flex;align-items:center;gap:3px;flex:none;margin-left:4px} .tnode .st .ico{width:13px;height:13px;flex:0 0 13px;opacity:.7} /* v3.160：左栏三个节标题（固定入口 / 文档库 / 我的笔记）统一成同一套长相 —— 同一字号、同一灰度、同一字距、同一行高。「这是私密的」这件事只交给前面那把锁（锁留一点彩色）， 标题文字不再单独染紫，否则三个节看着不像一家人。 */ .tglbl{font-size:11px;color:var(--sub);opacity:1;letter-spacing:.5px;padding:11px 10px 4px;display:flex;align-items:center;gap:4px;font-weight:600} /* v3.344：栏头折叠三角（最近编辑 / 快捷访问 / 记住过的目录 / 固定入口） */ .tglbl .car.seccar{width:14px;height:14px;flex:0 0 14px;display:inline-flex;align-items:center;justify-content:center;color:var(--sub);font-size:0;cursor:pointer;border-radius:4px;transition:transform .16s ease,background .12s ease} .tglbl .car.seccar:hover{color:var(--acc)} .tglbl .car.seccar.closed{transform:rotate(-90deg)} .tglbl .car.seccar::before{content:'';display:block;width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .sechidden{display:none!important} .tdiv{height:1px;background:var(--line);margin:7px 10px 1px} .nbpriv{background:linear-gradient(90deg,rgba(138,92,246,.07),rgba(138,92,246,0) 62%);border-radius:8px;margin:2px 2px 0;padding:1px 0 3px} .nbpriv-lbl{display:flex;align-items:center} .nbpriv-lbl>.lock{color:#8a5cf6;opacity:.85;flex:0 0 auto} /* v3.159：「我的笔记」这一排（＋ ⬆ 🔍 ☑ 🧹 🗑）跟「文档库」那排统一 —— 圆角浅底小按钮，不再是纯文字 */ .nbpriv-lbl .nbadd{margin-left:auto;flex:none;cursor:pointer;font-weight:700;font-size:12.5px;line-height:1.55;padding:1px 6px;border-radius:7px;background:var(--hov);border:1px solid var(--line);transition:background .12s,border-color .12s} .nbpriv-lbl .nbadd+.nbadd{margin-left:4px} .nbpriv-lbl .nbadd:hover{background:var(--acc2);border-color:var(--acc)} /* v3.160：这一排换成单色线条图标后，尺寸要跟着调小（整站 .ico 默认 16px，这里放不下）。 ★pointer-events:none 是必需的：图标不能抢鼠标事件，否则 e.target 变成图标、 按钮的点击判断（看 data-nb* 属性）就认不出来 = 点了没反应（v3.161 修过一次）。 */ .nbpriv-lbl .nbadd .ico{width:14px;height:14px;flex:0 0 14px;opacity:.8;vertical-align:-2px;pointer-events:none} .nbpriv-lbl .nbadd:hover .ico{opacity:1} .nbpriv-lbl .nbquota{font-size:11.5px;opacity:.7;font-weight:400} .nbpriv-lbl .nbvip{margin-left:auto;font-size:11.5px;padding:1px 7px;border-radius:20px;background:linear-gradient(90deg,#f5b301,#e79b00);color:#fff;opacity:1;font-weight:600} .nbpriv-lbl .nbvip:hover{background:linear-gradient(90deg,#ffc21f,#f0a500)} /* 本地草稿：恢复提示条 + 侧栏小徽标（v3.121） */ #drBanner{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:10050;display:flex;align-items:center;gap:10px; background:var(--panel);border:1px solid #e79b00;box-shadow:0 10px 30px rgba(0,0,0,.22);border-radius:12px;padding:10px 14px;font-size:13px;max-width:min(94vw,720px)} #drBanner b{color:#e79b00} /* ★v3.206：草稿「不是这一篇的」时那条横幅：红色、只给丢弃（不给恢复） */ #drBanner.warn{border-color:#e03131} #drBanner.warn b{color:#e03131} #drBadge{margin:4px 6px 2px;padding:5px 8px;border-radius:8px;background:rgba(231,155,0,.13);color:#b97c00;font-size:12px;cursor:default} body.dark #drBadge{color:#f0b64a} /* ★v3.268：「整篇被替换」的熔断条 —— 跟草稿横幅同一套长相（红边、浮在顶上）， 点「确认保存」才真的发；「先不存」之后还能点保存状态那行把它调回来。 */ #repBanner{position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:10060;display:flex;align-items:center;gap:10px; background:var(--panel);border:1px solid #e03131;box-shadow:0 10px 30px rgba(0,0,0,.22);border-radius:12px;padding:10px 14px;font-size:13px;max-width:min(94vw,760px);flex-wrap:wrap} #repBanner b{color:#e03131} .msave.held{color:#e03131;cursor:pointer} /* 页内搜索命中行上的两个动作（v3.123） */ .lqact{display:inline-flex;gap:6px;margin-left:8px;flex:none;vertical-align:middle} .lqa{font-size:11.5px;line-height:1.5;padding:1px 7px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--sub);cursor:pointer;white-space:nowrap} .lqa:hover{border-color:var(--acc);color:var(--acc);background:var(--acc2)} /* 笔记全文搜索面板（v3.124） */ .nbswrap{padding:2px 6px 8px} .nbswrap input.search{width:100%;box-sizing:border-box} .nbpriv-lbl .nbadd[data-nbsearch]{margin-left:0} /* 目录那一行的工具条（v3.125）：展开 / 折叠 / ⇧到顶 / ⇩到底 */ /* 目录那一行的工具条（v3.125）：展开 / 折叠 / ⇧到顶 / ⇩到底 v3.127：**钉在侧栏顶上**（position:sticky），滚动目录时不跟着滚走。 这里必须给不透明背景（--side）并把 opacity 还原成 1 —— 否则行会从按钮背后透出来。 */ /* v3.181：这一排在最窄的时候（320px 侧栏 + 出现滚动条）只剩 238px 可用， 「文档库」四个字 + 6 个按钮刚好差几个像素 —— 右边距从 10px 收到 4px 把这点让出来， 再配上 .tacts 允许换行（真的放不下时才换，不再像以前那样硬挤出去）。 */ .tglbl-acts{display:flex;align-items:center;position:sticky;top:0;z-index:6;background:var(--side);opacity:1;padding-right:4px;box-shadow:0 1px 0 var(--line)} .tglbl-t{flex:none;white-space:nowrap} .tacts{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;min-width:0} /* v3.159：业主口径「这两排太素了，做成搜索框那种圆角浅底小按钮」。 原来默认是**纯文字没有底**，只在 hover 才有底色 —— 所以看着像一堆灰字。 现在默认就给底色 + 一圈细边，一个个独立成小按钮。 */ .tact{font-size:11px;line-height:1.55;padding:1px 6px;border-radius:7px;color:var(--sub);cursor:pointer;background:var(--hov);border:1px solid var(--line);white-space:nowrap;transition:background .12s,color .12s,border-color .12s} .tact:hover{color:var(--acc);background:var(--acc2);border-color:var(--acc)} .tact.on{color:var(--acc);background:var(--acc2);border-color:var(--acc);font-weight:600} /* ★v3.191：「我的笔记」这一节也配一排跟「文档库」一样的小按钮（记住 / ↺恢复 / 展开 / 折叠 / ⇧ / ⇩）。 原来这排只挂在「文档库」名下 —— 可是普通用户那边的「文档库」几乎是空的（内容多是会员/站长专属）， 他们真正天天用的是「我的笔记」，抬头却看不到这些按钮。 放在标题那一行的**下面一行**、右对齐：320px 侧栏一行塞不下 12 个（量过，要 464px）， 与其硬挤成乱糟糟的折行，不如规规矩矩两行。 */ .nbtools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;padding:0 10px 3px} /* 「会员」小标（v3.129：笔记导图等会员功能） */ .viptag{font-size:10px;line-height:1.4;padding:0 4px;margin-left:4px;border-radius:8px;background:rgba(231,155,0,.16);color:#b97c00;vertical-align:middle} body.dark .viptag, [data-theme=dark] .viptag{color:#f0b64a} /* 笔记回收站入口（v3.130）：有东西时按钮发红 + 数字角标 */ .nbadd.nbdanger{color:#e03131} .nbadd .nbcnt{font-size:10px;background:#e03131;color:#fff;border-radius:8px;padding:0 4px;margin-left:1px;vertical-align:1px} /* 底部「撤销」小条（v3.130） */ #undobar{position:fixed;left:50%;bottom:74px;transform:translateX(-50%) translateY(6px);z-index:10060;display:flex;align-items:center;gap:10px; background:var(--panel);color:var(--tx);border:1px solid var(--line);border-radius:22px;padding:8px 10px 8px 16px; box-shadow:0 8px 26px rgba(0,0,0,.18);font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:88vw} #undobar.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} #undobar .um{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw} #undobar .ub{border:1px solid var(--acc);background:var(--acc2);color:var(--acc);border-radius:16px;padding:4px 12px;font-size:13px;cursor:pointer;font-family:inherit} #undobar .ub:hover{background:var(--acc);color:#fff} #undobar .ux{color:var(--sub);cursor:pointer;padding:0 4px} /* 笔记多选 / 批量条（v3.131） */ .nbck{width:13px;height:13px;flex:none;margin:0 4px 0 1px;border:1.4px solid var(--gl);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:#fff} .nbck.on{background:var(--acc);border-color:var(--acc)} .tnode.nbsel{background:var(--sel)} #nbbar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:10055;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center; background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:13px;max-width:94vw} #nbbar .n{color:var(--sub)} #nbbar .n b{color:var(--tx)} #nbbar button{border:1px solid var(--line);background:var(--bg);color:var(--tx);border-radius:10px;padding:6px 10px;font-size:12.5px;cursor:pointer;font-family:inherit} #nbbar button:hover{border-color:var(--acc);color:var(--acc);background:var(--acc2)} #nbbar button.dg{color:#e03131;border-color:#f0c2c2} /* v3.181：手机上这排「记住 / 恢复 / 展开 / 折叠 / ⇧ / ⇩」太小按不准（业主实报）→ 整排放大到约 34px 高、字号 13px。 电脑端**不动**（11px 那套刚好放得下一行，放大反而会挤成两行）。 */ @media (max-width:820px){.tact{font-size:13px;line-height:1.2;padding:9px 11px;border-radius:10px}.tacts{gap:6px;row-gap:6px}} html.phone .tact{font-size:13px;line-height:1.2;padding:9px 11px;border-radius:10px} html.phone .tacts{gap:6px;row-gap:6px} .nbempty{color:var(--sub);font-size:12.5px;line-height:1.7;padding:4px 8px 6px 10px} .nbempty b{color:#8a5cf6} .nbpriv-lbl .lock{color:#8a5cf6} .tnode .car{width:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sub);font-size:0;line-height:1;transition:transform .16s ease} .tnode .car.closed{transform:rotate(-90deg)} .tnode .car:not(:empty)::before{content:'';display:block;width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .tnode .car:hover{color:var(--acc)} .tnode .ic{flex:0 0 17px;text-align:center;display:flex;align-items:center;justify-content:center} .ico{width:16px;height:16px;background:currentColor;opacity:.62;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;display:inline-block;flex:0 0 16px} .ico-folder{--m:url("data:image/svg+xml;utf8,")} .ico-doc{--m:url("data:image/svg+xml;utf8,")} .ico-home{--m:url("data:image/svg+xml;utf8,")} .ico-trash{--m:url("data:image/svg+xml;utf8,")} /* v3.160：补两个单色图标 —— 左栏「我的笔记」那排原来用的是彩色 emoji（🔍 🧹）， 跟整站这套 mask 单色图标不是一路。凑齐了就能把那一排全换成线条图标。 */ .ico-find{--m:url("data:image/svg+xml;utf8,")} .ico-tidy{--m:url("data:image/svg+xml;utf8,")} .ico-star{--m:url("data:image/svg+xml;utf8,")} .ico-clock{--m:url("data:image/svg+xml;utf8,")} /* v3.171：刷新图标（圆形箭头）—— 手机加到主屏幕后是全屏的，没有浏览器的刷新按钮，站点自己得有一个 */ .ico-reload{--m:url("data:image/svg+xml;utf8,")} .ico-note{--m:url("data:image/svg+xml;utf8,")} .ico-crown{--m:url("data:image/svg+xml;utf8,")} .ico-lock{--m:url("data:image/svg+xml;utf8,")} .ico-shield{--m:url("data:image/svg+xml;utf8,")} .ico-coin{--m:url("data:image/svg+xml;utf8,")} .ico-check{--m:url("data:image/svg+xml;utf8,")} .ico-pen{--m:url("data:image/svg+xml;utf8,")} .ico-map{--m:url("data:image/svg+xml;utf8,")} .ico-eye{--m:url("data:image/svg+xml;utf8,")} .ico-export{--m:url("data:image/svg+xml;utf8,")} .ico-more{--m:url("data:image/svg+xml;utf8,")} .ico-user{--m:url("data:image/svg+xml;utf8,")} .ico-sun{--m:url("data:image/svg+xml;utf8,")} .ico-moon{--m:url("data:image/svg+xml;utf8,")} /* 补充的单色图标(下拉菜单用)。风格与上面一致:只描边、stroke='black'、无彩色 */ .ico-users{--m:url("data:image/svg+xml;utf8,")} .ico-sync{--m:url("data:image/svg+xml;utf8,")} .ico-import{--m:url("data:image/svg+xml;utf8,")} .ico-cmd{--m:url("data:image/svg+xml;utf8,")} .ico-screen{--m:url("data:image/svg+xml;utf8,")} /* ★v3.222：行尾录音按钮的图标（业主口径「话筒图标不好看，换成图 1 的样子，手机端也要」）。 图 1 = 一个圈里一支话筒，跟站里其它图标同一套单色线条。以前用的是彩色表情 🎤。 */ .ico-rec{--m:url("data:image/svg+xml;utf8,")} /* 下拉菜单里的图标:和文字对齐、右边留一点空 */ .mpanel button .ico{width:15px;height:15px;flex:0 0 15px;margin-right:7px;vertical-align:-3px} .tnode .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tnode .ct{display:none} .tnode .del{display:none;color:var(--sub);padding:0 3px} .tnode:hover .del{display:inline} .tnode .del:hover{color:var(--danger)} /* 批量勾选框：始终可见（不用 .del 的悬停显示） */ .tnode .bxc{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 16px;margin-right:1px;border:1.5px solid var(--sub);border-radius:4px;color:#fff;font-size:11px;line-height:1;background:var(--panel)} .tnode .bxc.on{background:var(--acc);border-color:var(--acc)} .tnode.bxsel{background:var(--sel)} /* 选中文字浮动格式栏（幕布式） */ #selbar{position:fixed;z-index:10020;display:flex;gap:2px;align-items:center;background:#2b2f36;border-radius:10px;padding:5px 6px;box-shadow:0 10px 30px rgba(0,0,0,.28)} #selbar button{border:1px solid transparent;background:transparent;color:#e6e8ea;border-radius:7px;padding:4px 8px;font-size:13px;min-width:28px} #selbar button:hover{background:#3d434c;color:#fff} #selbar .sb-sep{width:1px;height:16px;background:#454b54;margin:0 3px} #selbar .sb-sw{width:15px;height:15px;border-radius:4px;border:1px solid #555c66;cursor:pointer;display:inline-block;margin:0 1px} #selbar .sb-lbl{color:#9aa2ad;font-size:11px;padding:0 4px} /* 阅读区选中快捷栏 */ #rdbar{position:fixed;z-index:75;display:flex;gap:2px;align-items:center;background:#2b2f36;border-radius:10px;padding:5px 6px;box-shadow:0 10px 30px rgba(0,0,0,.28)} #rdbar button{border:1px solid transparent;background:transparent;color:#e6e8ea;border-radius:7px;padding:4px 9px;font-size:12.5px} #rdbar button:hover{background:#3d434c;color:#fff} /* 目录树垂直引线（幕布式层级引导） */ .tnode .tt{position:relative;align-self:stretch;flex:0 0 14px;width:14px;min-width:14px} .tnode .tt::before{content:'';position:absolute;left:6px;top:0;bottom:0;border-left:1px solid var(--tgl)} .tnode .tt.nn::before{display:none} .tnode.dropf{outline:2px solid var(--acc);outline-offset:-2px;border-radius:8px} .tnode .nf{display:none;color:var(--sub);padding:0 3px;font-size:12px} .tnode:hover .nf{display:inline} .tnode .nf:hover{color:var(--acc)} /* 树行 ⋯ 设置菜单 ★v3.188：层级 900 → **10010**。窄屏/手机上左栏 `#tree` 是 `position:fixed; z-index:9996` 的**整屏浮层**， 而这个菜单只有 900 —— 开在它背后、被整个盖住，表现就是「点了 ⋯ 什么都不出现」。 实测：菜单本身**创建成功了**（13 个按钮、位置也对、display:block、visibility:visible）， 但菜单正中心那一点上 `document.elementFromPoint` 拿到的是 `div.tnode`（侧栏里的一行），不是菜单。 10010 跟「正文行 ⋯ 菜单」`#mbmenu` 同一层：高于侧栏 9996 与笔记浮层 9999， 低于选中浮条 10020 / 弹层 10030 / 提示条 10050。 `max-height` + `overflow:auto` 是兜底：13 项约 421px 高，小屏或横屏时不至于顶出屏幕。 */ #tmenu{position:fixed;z-index:10010;min-width:186px;max-height:calc(100vh - 20px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.14);padding:5px} #tmenu .tmh{font-size:12px;color:var(--sub);padding:4px 8px 6px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #tmenu button{display:block;width:100%;text-align:left;border:none;background:transparent;border-radius:7px;padding:6px 9px;font-size:13px;color:var(--tx)} #tmenu button:hover{background:var(--acc2);color:var(--acc)} /* 思维导图右侧竖排控件（幕布式） */ #mmSide{position:absolute;right:14px;top:14px;z-index:12;display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 6px 22px rgba(0,0,0,.10);align-items:center} #mmSide button{border:1px solid transparent;background:transparent;border-radius:7px;padding:5px 7px;font-size:13px;color:var(--tx);min-width:30px} #mmSide button:hover{background:var(--hov);color:var(--acc)} #mmSide button.pri{background:var(--acc);color:#fff} #mmSide .mmz{font-size:11px;color:var(--sub);padding:2px 0;font-variant-numeric:tabular-nums} #mmSide .mms{width:86%;height:1px;background:var(--line);margin:4px 0} #mmSide .mmpal{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:2px 0} #mmSide .mmpal i{width:15px;height:15px;border-radius:50%;cursor:pointer;border:2px solid transparent;display:block} #mmSide .mmpal i.on{border-color:var(--acc)} .card .cedit{display:none;position:absolute;top:10px;right:12px;font-size:12px;padding:2px 10px;border:1px solid var(--acc);color:var(--acc);border-radius:12px;cursor:pointer;z-index:2} .card:hover .cedit{display:inline-block} /* ★v3.187：卡片右上角这个「编辑」是**绝对定位**（`.card` 是 relative、它 top:10px right:12px）， 而窄屏/手机上它是常驻显示的 —— **长标题一换行就钻到按钮底下**。 实测截图：手机上按钮盖住了 "…Eliminated Heavy" 的最后一个词，另一张卡片盖住了 "from"。 给标题留出按钮那一块的宽度，任何屏宽都不会压字；按钮没露出来时这点右边距也看不出来。 */ .card h3{padding-right:78px} .card .cedit:hover{background:var(--acc);color:#fff} .tfoot{padding:8px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px;background:var(--side)} /* v3.174：侧栏底栏那排照「代码块」那一套（v3.190 起底栏只剩批量模式那条 #batchBar 还在用） */ .tfoot button{flex:1;min-width:70px;font-size:12.5px;padding:6px 6px;border:0;border-radius:4px;background:color-mix(in srgb,var(--acc2) 70%,transparent);color:var(--tx);font-family:ui-monospace,Consolas,"Courier New",monospace} .tfoot button:hover{background:var(--acc2);color:var(--acc)} /* ---------- 右侧内容 ---------- */ #content{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)} #chead{display:flex;gap:6px;align-items:center;padding:8px 46px 8px 12px;border-bottom:1px solid var(--line);background:var(--side);flex-wrap:wrap;position:relative;min-height:46px} #ctitle{font-weight:600;font-size:13px;color:var(--tx);background:var(--hov);border:1px solid var(--line);border-radius:8px;padding:4px 10px 4px 8px;display:inline-flex;align-items:center;gap:6px;max-width:min(46vw,340px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ctitle::before{content:'';width:8px;height:8px;flex:0 0 8px;border-radius:2px;background:var(--acc);opacity:.85} #ctitle{font-weight:700;font-size:15.5px;max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #cactions{display:flex;gap:2px;align-items:center;flex-wrap:wrap} /* ---------- 功能条分组菜单（统一：无边框幽灵钮 + 单色图标 + 主操作淡蓝底） ---------- */ .mgrp{position:relative;display:inline-flex} /* v3.174：右上那排（导图/视图/导出/更多/删除笔记/我的）照「代码块」那一套 —— 浅蓝底 + 4px 圆角 + 无描边 + 等宽字体（跟编辑工具栏 v3.162 / 搜索词条 v3.150 同一套长相）。 高度仍是 30px，顶栏不会因此跳动。 */ #cactions>button,.mgrp>button,#vipBtn{height:30px;padding:0 9px;font-size:12.5px;line-height:1;color:var(--tx);background:color-mix(in srgb,var(--acc2) 70%,transparent);border:0;border-radius:4px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:ui-monospace,Consolas,"Courier New",monospace;transition:background .14s ease,color .14s ease} #cactions>button:hover,.mgrp>button:hover,#vipBtn:hover{background:var(--acc2);color:var(--acc)} #cactions>button.act,.mgrp>button.act{background:var(--acc2);color:var(--acc);font-weight:600} #cactions>button.pri,#cactions>button[data-edit]{color:var(--acc);font-weight:600;background:var(--acc2)} #cactions>button.pri:hover,#cactions>button[data-edit]:hover{background:var(--acc);color:#fff} #cactions .ico,.mgrp>button .ico,#vipBtn .ico{width:14px;height:14px;flex:0 0 14px;opacity:.8} #cactions>button.pri .ico,#cactions>button[data-edit]:hover .ico{opacity:1} #cactions>button.icononly{width:30px;padding:0;justify-content:center} #cactions>button.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);border-color:transparent} .mpanel button.danger:hover{background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger);border-color:transparent} .tbsep{width:1px;height:16px;background:var(--line);margin:0 5px;flex:0 0 1px;align-self:center} #vipBtn{color:var(--sub)}#vipBtn.hide{display:none!important} #vipBtn.vip-on{color:var(--acc)}#vipBtn.vip-on .ico{opacity:1} #vipBtn.vip-cta{background:#fff6dd;color:#9a6b00;font-weight:600} /* 会员快到期（v3.137）：按钮变金色实心，比「会员至 X」显眼 */ #vipBtn.vip-soon{background:linear-gradient(90deg,#f5b301,#e79b00);color:#fff;font-weight:700;border-color:#e79b00} #vipBtn.vip-soon .ico{opacity:1} #vipBtn.vip-soon:hover{background:linear-gradient(90deg,#ffc31f,#f0a500);color:#fff} [data-theme=dark] #vipNotice{background:#3b2f12!important;border-color:#6b5518!important;color:#e8c268!important} #vipBtn.vip-cta:hover{background:#ffeab8;color:#7d5500;border-color:transparent} [data-theme=dark] #vipBtn.vip-cta{background:#3b2f12;color:#e8c268} [data-theme=dark] #vipBtn.vip-cta:hover{background:#4a3b18;color:#f4d68a} .mgrp>button .arr{font-size:9px;color:var(--sub);transition:transform .15s} .mgrp>button.act .arr{transform:rotate(180deg);color:var(--acc)} .mpanel{position:absolute;top:calc(100% + 6px);left:0;z-index:10040;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 26px rgba(20,30,60,.12);padding:7px;min-width:230px;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:2px} .mpanel button{border:1px solid transparent;background:transparent;border-radius:7px;padding:7px 9px;font-size:13px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx)} .mpanel button:hover{background:var(--acc2);color:var(--acc);border-color:transparent} .mpanel button.act{background:var(--sel);color:var(--acc);font-weight:600} .mpanel .glbl{grid-column:1/-1;font-size:11px;color:var(--sub);padding:5px 6px 1px;border-top:1px solid var(--line);margin-top:4px} .mpanel .glbl:first-child{border-top:none;margin-top:0;padding-top:1px} /* ★v3.236：会员按钮从顶栏收进「我的 ▾」菜单（业主：顶栏那个方块太占地方，手机端尤其挤）。 在菜单里就按**菜单行**的样子来（整行、左对齐、透明底）， 但「已开通」和「快到期催续费」的金色强调**保留** —— 那是要让人一眼看到的。 ★ 选择器写成 `.mpanel #vipBtn` 是有意的：它压得过上面那条 `#vipBtn{height:30px;…}`（0,1,0）， 而 `.mpanel #vipBtn.vip-cta` 又压得过 `#vipBtn.vip-cta`（0,2,0）—— 顺序和权重都算过的。 */ .mpanel #vipBtn{height:auto;width:100%;justify-content:flex-start;text-align:left; padding:7px 9px;font-size:13px;border-radius:7px;background:transparent;border:1px solid transparent;color:var(--tx)} .mpanel #vipBtn:hover{background:var(--acc2);color:var(--acc);border-color:transparent} .mpanel #vipBtn .ico{width:15px;height:15px;flex:0 0 15px;margin-right:7px;opacity:.8;vertical-align:-3px} .mpanel #vipBtn.vip-on{color:var(--acc)} .mpanel #vipBtn.vip-on .ico{opacity:1} .mpanel #vipBtn.vip-cta{background:#fff6dd;color:#9a6b00;font-weight:600} .mpanel #vipBtn.vip-cta:hover{background:#ffeab8;color:#7d5500;border-color:transparent} .mpanel #vipBtn.vip-soon{background:linear-gradient(90deg,#f5b301,#e79b00);color:#fff;font-weight:700} .mpanel #vipBtn.vip-soon:hover{background:linear-gradient(90deg,#ffc31f,#f0a500);color:#fff} .mpanel #vipBtn.vip-soon .ico{opacity:1} [data-theme=dark] .mpanel #vipBtn.vip-cta{background:#3b2f12;color:#e8c268} [data-theme=dark] .mpanel #vipBtn.vip-cta:hover{background:#4a3b18;color:#f4d68a} #foldBtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:1px solid transparent;background:transparent;color:var(--sub);width:28px;height:28px;padding:0;border-radius:7px;display:flex;align-items:center;justify-content:center} #foldBtn:hover{background:var(--hov);color:var(--acc);border-color:transparent} #foldBtn svg{transition:transform .18s ease} #chead.folded #foldBtn svg{transform:rotate(180deg)} #chead.folded .hidefold{display:none!important} #modeTag{font-size:11px;padding:1px 8px;border-radius:10px;background:var(--acc2);color:var(--acc)} #modeTag.admin{background:#fff3e0;color:#b8860b} [data-theme=dark] #modeTag.admin{background:#3a2f10;color:#e8c268} #cbody{flex:1;overflow-y:auto;padding:26px clamp(16px,4vw,64px) 90px;background:var(--bg)} .wrap{max-width:none;width:100%;margin:0} /* 阅读区宽度自适应：随窗口铺满（和幕布一致），超宽屏封顶 1800px 防止一行太长 */ .wrap.rd{max-width:min(100%,1800px);margin:0 auto} /* 阅读大纲（幕布式：小圆点 + 灰色引导线 + 宽松行距） */ .r{display:flex;align-items:baseline;padding:3px 8px 3px 0;line-height:1.85;word-break:break-word;border-radius:6px;font-size:15.5px} .r:hover{background:var(--hov)} .r.flash{background:var(--sel)!important} /* 主题链接跳到的那一条：先黄底粗框闪一下，再留一条绿色左边杠，一眼能认出来 */ #mlist .mrow.flash,#otree .r.flash{background:#ffe9a8!important;box-shadow:inset 0 0 0 2px #f0a820;border-radius:6px} #mlist .mrow.flash .minner,#mlist .mrow.flash .mtext,#mlist .mrow.flash .mnb,#otree .r.flash .x{background:transparent!important} html[data-theme=dark] #mlist .mrow.flash{background:#5c4a12!important;box-shadow:inset 0 0 0 2px #c88a12} #mlist .mrow.jumped,#otree .r.jumped{box-shadow:inset 4px 0 0 var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)} html[data-theme=dark] #mlist .mrow.jumped{background:color-mix(in srgb,var(--acc) 16%,transparent)} .gl{flex:0 0 18px;width:18px;align-self:stretch;position:relative;min-height:1.85em} .gl::before{content:'';position:absolute;left:8px;top:0;bottom:0;border-left:1px solid var(--tgl)} .t{cursor:pointer;color:var(--sub);width:22px;flex:0 0 22px;text-align:center;font-size:19px;line-height:1} .t::before{content:'▾'}.t.closed::before{content:'▸'} /* 大纲三角与左侧树统一：细箭头（chevron），展开朝下、收起朝右 */ #otree .t,#shtree .t{font-size:0;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s ease} #otree .t::before,#shtree .t::before{content:'';display:block;width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} #otree .t.closed::before,#shtree .t.closed::before{content:''} #otree .t.closed,#shtree .t.closed{transform:rotate(-90deg)} #otree .r:has(.t),#shtree .r:has(.t){cursor:pointer} #otree .r:has(.t):active,#shtree .r:has(.t):active{background:var(--sel)} .b{color:var(--sub);width:20px;flex:0 0 20px;text-align:center} .b::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.75} .x{flex:1} mark{background:var(--mark);color:inherit;border-radius:2px} mark.hm-yellow{background:#ffe58f} mark.hm-pink{background:#ffd6e7} mark.hm-blue{background:#cfe8ff} mark.hm-red{background:#ffd4cf} mark.hm-olive{background:#e6e8c8} mark.hm-cyan{background:#c8f0ef} mark.hm-grey{background:#e3e5e8} [data-theme=dark] mark.hm-yellow{background:#6b5a1e} [data-theme=dark] mark.hm-pink{background:#5a2740} [data-theme=dark] mark.hm-blue{background:#1d3a52} [data-theme=dark] mark.hm-red{background:#52251f} [data-theme=dark] mark.hm-olive{background:#3d4020} [data-theme=dark] mark.hm-cyan{background:#14403f} [data-theme=dark] mark.hm-grey{background:#3a3f45} #otree a{color:var(--acc);text-decoration:underline;cursor:pointer} #otree code{background:color-mix(in srgb,var(--acc2) 70%,transparent);border-radius:4px;padding:0 5px;font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:.92em} .wl{color:var(--acc);text-decoration:none;border-bottom:1px dashed var(--acc);cursor:pointer;font-weight:600} .wl:hover{background:var(--acc2)} .blpanel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0 0;font-size:13px;line-height:1.9} .blpanel .bl{color:var(--acc);cursor:pointer;margin-right:14px;text-decoration:underline} .etoolbar .fmt{font-weight:700} .empty{color:var(--sub);text-align:center;padding:40px 0} .empty .big{font-size:15px;margin-bottom:8px;color:var(--tx)} .card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer} .card:hover{border-color:var(--acc)} .card h3{font-size:15px;margin-bottom:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .card .meta{color:var(--sub);font-size:12px} .badge{font-size:11px;padding:1px 8px;border-radius:10px;background:var(--acc2);color:var(--acc);font-weight:400} .tag{font-size:11px;padding:1px 7px;border-radius:6px;border:1px solid var(--line);color:var(--sub);margin-left:4px} /* 卡片标签：可点=按标签筛文档；+N 是折叠开关 */ .tag.tgc{cursor:pointer} .tag.tgc:hover{border-color:var(--acc);color:var(--acc);background:var(--acc2)} .tag.tgm{cursor:pointer;color:var(--acc);border-style:dashed} .tag.tgm:hover{background:var(--acc2)} /* 首页标签条里被收起来的后半段：收起时整段不占位，展开时用 display:contents 跟着前面的标签一起换行 */ .tgx{display:none} .tgx.open{display:contents} /* 编辑器 */ .emeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .emeta .f{flex:1;min-width:150px} .emeta label{display:block;font-size:12px;color:var(--sub);margin-bottom:3px} .emeta input{width:100%} .etoolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:10px} .etoolbar .sep{width:1px;height:18px;background:var(--line);margin:0 2px} #saveState{font-size:12px;color:var(--sub);white-space:nowrap} #saveState.dirty{color:#b8860b}#saveState.saved{color:var(--acc)} /* ★v3.223：管理登录过期要**看得见**（以前是悄悄删令牌，界面还写着「后台·编辑」） */ #saveState.expired{color:#c0392b;cursor:pointer;text-decoration:underline} #modeTag.exp{background:#fdecea;color:#c0392b;border-color:#f3c6c0} /* ★v3.225：粘进来的内嵌大图害得这一篇存不上 —— 底下给一条提示条 + 一键搬到服务器 */ #bigimgbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60; display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:min(92vw,760px); background:#fff7e0;border:1px solid #f0d59a;color:#8a6d1b;border-radius:10px; padding:9px 13px;font-size:13px;line-height:1.6;box-shadow:0 8px 24px rgba(0,0,0,.14)} #bigimgbar b{font-weight:600} #bigimgbar button{font:inherit;font-size:13px;border-radius:7px;padding:4px 11px;cursor:pointer;border:1px solid transparent} #bigimgbar .bb{background:#8a6d1b;color:#fff;border-color:#8a6d1b} #bigimgbar .bb:hover{opacity:.9} #bigimgbar .bb2{background:transparent;color:#8a6d1b;border-color:#e2cb9d} html[data-theme="dark"] #bigimgbar{background:#3a3320;border-color:#5c5030;color:#e8d9a8} html[data-theme="dark"] #bigimgbar .bb{background:#e8d9a8;color:#3a3320;border-color:#e8d9a8} html[data-theme="dark"] #bigimgbar .bb2{color:#e8d9a8;border-color:#5c5030} html.phone #bigimgbar{left:10px;right:10px;transform:none;max-width:none;bottom:10px} /* ★v3.233「没存好就不许走」的拦截条（业主 2026-10-16 要求）。平时不显示，拦人的时候才 .on */ #navhold{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:75; display:none;align-items:center;gap:10px;flex-wrap:wrap;max-width:min(92vw,820px); background:#fff2f2;border:1px solid #e8b4b4;color:#a12b2b;border-radius:10px; padding:10px 14px;font-size:13px;line-height:1.6;box-shadow:0 10px 28px rgba(0,0,0,.18)} #navhold.on{display:flex} #navhold #navhold-tx{flex:1 1 260px;min-width:180px} #navhold button{font:inherit;font-size:13px;border-radius:7px;padding:5px 12px;cursor:pointer;border:1px solid transparent;white-space:nowrap} #navhold #navhold-save{background:#a12b2b;color:#fff;border-color:#a12b2b} #navhold #navhold-save:hover{opacity:.9} #navhold #navhold-cancel{background:transparent;color:#a12b2b;border-color:#e8c4c4} #navhold #navhold-anyway{background:transparent;color:#8a6d1b;border-color:#e2cb9d} html[data-theme="dark"] #navhold{background:#3a2323;border-color:#5c3434;color:#f0b9b9} html[data-theme="dark"] #navhold #navhold-save{background:#f0b9b9;color:#3a2323;border-color:#f0b9b9} html[data-theme="dark"] #navhold #navhold-cancel{color:#f0b9b9;border-color:#5c3434} html.phone #navhold{left:10px;right:10px;transform:none;max-width:none;bottom:10px} html.phone #navhold button{flex:1 1 auto} /* ★v3.234 多标签（文档标签页 / Document Tabs）。顶上一条，能横向滑（手机上尤其要紧） */ #dtabs{display:flex;align-items:stretch;gap:0;overflow-x:auto;overflow-y:hidden; background:var(--panel);border-bottom:1px solid var(--line);padding:0 6px; scrollbar-width:thin;-webkit-overflow-scrolling:touch;flex:0 0 auto} #dtabs.hide{display:none} #dtabs::-webkit-scrollbar{height:5px} #dtabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} #dtabs .dtab{display:flex;align-items:center;gap:6px;flex:0 0 auto;max-width:210px; padding:8px 8px 8px 11px;margin:4px 2px 0;border:1px solid var(--line);border-bottom:none; border-radius:7px 7px 0 0;background:var(--bg);color:var(--sub);cursor:pointer;font-size:12.5px; white-space:nowrap;user-select:none} #dtabs .dtab b{font-weight:400;overflow:hidden;text-overflow:ellipsis} #dtabs .dtab:hover{color:var(--fg)} #dtabs .dtab.cur{background:var(--panel);color:var(--fg);border-color:var(--line);font-weight:600; box-shadow:0 -2px 0 0 var(--acc,#3da8f5) inset} #dtabs .dtab.cur b{font-weight:600} #dtabs .dtab.bad{color:#c0392b} #dtabs .dtab.bad::after{content:'';width:7px;height:7px;border-radius:50%;background:#c0392b;flex:0 0 auto} #dtabs .dtx{font-style:normal;opacity:.45;padding:0 2px;border-radius:4px;font-size:11px} #dtabs .dtx:hover{opacity:1;background:rgba(0,0,0,.08)} #dtabs .dtabnew{flex:0 0 auto;align-self:center;margin:0 6px;padding:3px 9px;border-radius:6px; color:var(--sub);cursor:pointer;font-size:15px;line-height:1.2} #dtabs .dtabnew:hover{background:rgba(0,0,0,.07);color:var(--fg)} html[data-theme="dark"] #dtabs .dtx:hover{background:rgba(255,255,255,.12)} html[data-theme="dark"] #dtabs .dtabnew:hover{background:rgba(255,255,255,.12)} html.phone #dtabs{padding:0 2px} html.phone #dtabs .dtab{max-width:44vw;padding:9px 7px 9px 10px;margin:4px 1px 0;font-size:13px} html.phone #dtabs .dtx{padding:0 5px;font-size:13px} #elist{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px} .erow{display:flex;align-items:center;gap:6px;padding:3px 0} .erow .grip{cursor:grab;color:var(--sub);flex:0 0 18px;text-align:center;user-select:none} .erow .dot{flex:0 0 14px;color:var(--sub);text-align:center;font-size:12px} .erow input.etxt{flex:1;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px;min-width:0} .erow input.etxt:hover{border-color:var(--line)} .erow input.etxt:focus{border-color:var(--acc);background:var(--bg)} .erow .eact{display:flex;gap:2px;opacity:.5;flex:0 0 auto} .erow:hover .eact{opacity:1} .erow .eact button{padding:1px 6px;font-size:12px;border-radius:5px;border:1px solid transparent;background:transparent} .erow .eact button:hover{border-color:var(--acc);color:var(--acc);background:var(--panel)} .erow .eact button.del:hover{border-color:var(--danger);color:var(--danger)} .erow.dragging{opacity:.35} .erow.drop-before{box-shadow:inset 0 2px 0 var(--acc)} .erow.drop-after{box-shadow:inset 0 -2px 0 var(--acc)} .erow.drop-child{background:var(--acc2);border-radius:6px} .err{color:var(--danger);font-size:13px;min-height:18px;margin:6px 0} /* ---------- 幕布式编辑器 ---------- */ #edwrap{padding:10px 10px 90px 62px;max-width:none;width:100%;zoom:var(--doczoom,1)} .mtitle{font-size:30px;font-weight:700;border:none;background:transparent;padding:2px 6px;width:100%;margin-bottom:4px;border-radius:6px;line-height:1.35;letter-spacing:-.3px} .mtitle:hover{background:var(--hov)} .mtitle:focus{outline:none;background:var(--bg)} .mtitle::placeholder{color:var(--sub);font-weight:400} .mmeta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--sub);font-size:12px;margin:2px 0 16px;padding:2px 6px} .mmeta .mf{display:flex;align-items:center;gap:3px} .mmeta input{border:none;background:transparent;font-size:12px;color:var(--sub);padding:2px 5px;border-radius:5px;min-width:40px;width:auto} .mmeta input:hover{background:var(--bg)} .mmeta input:focus{outline:none;background:var(--bg);color:var(--tx)} .mmeta .msave{margin-left:auto;font-weight:600} .msave.dirty{color:#b8860b}.msave.saved{color:var(--acc)} #mlist{background:transparent;border:none;padding:0} .mrow{display:flex;align-items:flex-start;padding:1px 0;position:relative;line-height:1.85;border-radius:6px} .mrow:hover .mgutter{opacity:1} .minner{display:flex;align-items:flex-start;flex:1;min-width:0;position:relative} /* ---------- 阅读记录（v3.164）：前台只读时每一行**最右边**那个小数字 ---------- 平时不显示（opacity:0，但占位不跳字）；鼠标移到那一行才淡淡露出来，好让你找得到； 一旦记过（≥1）就**一直显示**蓝色的数字。 左键 +1 · 右键（在数字上）-1 · Shift+左键 归零。 */ .rdbtn{flex:0 0 auto;align-self:center;margin-left:6px;min-width:22px;text-align:center;font-size:11.5px;line-height:18px;padding:0 5px;border-radius:9px;font-family:ui-monospace,Consolas,"Courier New",monospace;color:var(--sub);background:var(--hov);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;opacity:0;transition:opacity .12s,background .12s,color .12s} .mrow:hover .rdbtn{opacity:.5} .rdbtn:hover{opacity:1;background:var(--acc2);color:var(--acc)} .rdbtn.on{opacity:1;background:var(--acc2);color:var(--acc);font-weight:600} .mgutter{position:absolute;left:-26px;top:0;display:flex;gap:0;opacity:0;transition:opacity .12s;height:calc(15.5px*1.85 + 2px);align-items:center} .mbub{cursor:pointer;color:var(--sub);font-size:16px;line-height:1;padding:0 3px;border-radius:5px;font-weight:700} .mbub:hover{background:var(--line);color:var(--tx)} .mgl{flex:0 0 24px;width:24px;align-self:stretch;position:relative;min-height:1.7em} .mgl::before{content:'';position:absolute;left:11px;top:-2px;bottom:-2px;width:1px;background:var(--line)} .mtri{cursor:pointer;color:var(--sub);width:18px;flex:0 0 18px;height:calc(15.5px*1.85 + 2px);display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:1;opacity:0;transition:transform .15s,opacity .12s;user-select:none} .mtri::before{content:'';width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .mrow:hover .mtri:not(.leaf){opacity:1} .mtri.closed{transform:rotate(-90deg)}.mtri.leaf{visibility:hidden}.mtri:hover{color:var(--acc)} .mbullet{color:var(--sub);width:18px;flex:0 0 18px;height:calc(15.5px*1.85 + 2px);display:inline-flex;align-items:center;justify-content:center;user-select:none} .mbullet .bd{width:14px;height:14px;flex:0 0 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:grab;background:transparent;transition:background .14s} .mbullet .bd::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--sub);transition:background .14s} .mbullet.fold .bd{background:var(--line)} .mbullet:hover .bd{background:var(--tgl)}.mbullet:hover .bd::after{background:var(--tx)} .mbullet:active .bd{cursor:grabbing} .mrow.dragging .mbullet .bd{background:var(--acc2)} .mtext{flex:1;min-width:0;padding:1px 5px;border-radius:5px;cursor:text;word-break:break-word;white-space:pre-wrap;line-height:1.85;font-size:15.5px} .mtext code{background:color-mix(in srgb,var(--acc2) 70%,transparent);border-radius:4px;padding:0 5px;font-family:ui-monospace,Consolas,monospace;font-size:.92em} .mtext a{color:var(--acc);text-decoration:underline} /* 主题链接（跳到具体某一条）和文档链接（跳到整篇）长得不一样，一眼能分：主题链接做成小块 */ #mlist .mtext a[href*="?n="],#otree .r .x a[href*="?n="],.mnote a[href*="?n="]{background:color-mix(in srgb,var(--acc) 13%,transparent);border-bottom:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:5px;padding:1px 5px;margin:0 1px;text-decoration:none;box-decoration-break:clone;-webkit-box-decoration-break:clone} #mlist .mtext a[href*="?n="]:hover,#otree .r .x a[href*="?n="]:hover,.mnote a[href*="?n="]:hover{background:color-mix(in srgb,var(--acc) 26%,transparent)} html[data-theme=dark] #mlist .mtext a[href*="?n="]{background:color-mix(in srgb,var(--acc) 22%,transparent)} .mtext .wl{color:var(--acc);text-decoration:none;border-bottom:1px dashed var(--acc);cursor:pointer;font-weight:600} /* 正文图片默认缩略图（照幕布的形态）：小图占位、点开看原图。原来只限宽不限高，一张竖屏截图能把整屏撑满 */ .mtext img,.x img{max-width:100%;max-height:520px;width:auto;height:auto;object-fit:contain;display:inline-block;vertical-align:middle;margin:2px 6px 2px 0;padding:2px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--line) 22%,transparent);cursor:zoom-in} .mtext img.imgwide,.x img.imgwide{max-width:min(680px,100%);max-height:520px} .mtext img.imgdead,.x img.imgdead{display:inline-block;max-width:none;max-height:none;padding:3px 10px;border:1px dashed var(--line);background:transparent;cursor:help} html[data-imgsize=full] .mtext img,html[data-imgsize=full] .x img{max-width:min(760px,100%);max-height:none;cursor:zoom-in} /* ★v3.376 图片大小四档 —— 业主 2026-10-26 原话：「图片太大了，设置成图中这样有几个选项可以切换」， 照 Windows 资源管理器「查看」菜单给 超大 / 大 / 中 / 小 四档（偏好存 localStorage['ot_imgsize']：xl/l/m/s）。 默认「中」＝320px：原来基础规则是 100%/520px，一张竖屏截图就把整屏撑满，业主要的正是别再那么大。 放在 .imgwide / 基础规则之后、且特异性更高（html[attr] + 类 + 元素），所以带 imgwide 的图也听档位。 */ html[data-imgsize=xl] .mtext img,html[data-imgsize=xl] .x img{max-width:min(760px,100%);max-height:none} html[data-imgsize=l] .mtext img,html[data-imgsize=l] .x img{max-width:520px;max-height:390px} html[data-imgsize=m] .mtext img,html[data-imgsize=m] .x img{max-width:320px;max-height:240px} html[data-imgsize=s] .mtext img,html[data-imgsize=s] .x img{max-width:160px;max-height:120px} /* 手机上再按屏宽收一档，别把整段正文挤成一列小图 */ @media (max-width:640px){ html[data-imgsize=xl] .mtext img,html[data-imgsize=xl] .x img{max-width:100%;max-height:none} html[data-imgsize=l] .mtext img,html[data-imgsize=l] .x img{max-width:min(360px,84%);max-height:270px} html[data-imgsize=m] .mtext img,html[data-imgsize=m] .x img{max-width:min(240px,60%);max-height:180px} html[data-imgsize=s] .mtext img,html[data-imgsize=s] .x img{max-width:min(130px,38%);max-height:100px} } @media (max-width:640px){.mtext img,.x img{max-width:100%;max-height:520px}} /* ★★★ v3.302：**点一下那一行进编辑，图片按原尺寸炸开** —— 业主 2026-10-22 实报 「点一下会显示原尺寸那么大，太大了，点了没有反应」。 根因：上面这几条只管 .mtext / .x（阅读态），编辑态用的是 `.mrow .medit`（一个 contenteditable）， **一条 img 规则都没有** → 框里的 按 naturalWidth 画。一张 1170 宽的竖屏照片 在 390 宽的手机上就是 1170×2532，把整屏顶满、底下的字全被推走； 而且 contenteditable 里点图片只是"放光标"，不会有灯箱 → 用户看到的就是"点了没反应"。 现在编辑态跟阅读态同一套尺寸；「原始大小」那个全页开关照样能放大它。 */ .mrow .medit img{max-width:100%;max-height:520px;width:auto;height:auto;object-fit:contain;display:inline-block;vertical-align:top;margin:2px 4px 2px 0;border-radius:6px;background:color-mix(in srgb,var(--line) 22%,transparent);cursor:default} html.phone .mrow .medit img{max-width:100%;max-height:520px} html[data-imgsize=full] .mrow .medit img{max-width:min(760px,100%);max-height:320px} /* ★v3.376 编辑态也听四档。必须放在这一行之后：上面 `html.phone .mrow .medit img` 跟下面这几条 权重相同（都是 0,3,2），同权重就按先后顺序裁决 —— 放前面会被手机那条盖掉，编辑时就又变回 520px。 */ html[data-imgsize=xl] .mrow .medit img{max-width:min(760px,100%);max-height:320px} html[data-imgsize=l] .mrow .medit img{max-width:520px;max-height:390px} html[data-imgsize=m] .mrow .medit img{max-width:320px;max-height:240px} html[data-imgsize=s] .mrow .medit img{max-width:160px;max-height:120px} /* 灯箱顶栏/左右箭头压在图上面：图再大也盖不住「×」（手机屏幕上唯一确定能出去的地方） */ #imgbox .ibbar,#imgbox .ibn{z-index:3} /* 编辑态图片操作条：常驻，不靠 hover/右键（手机端也能点） */ .imgbtns{display:inline-flex;gap:4px;vertical-align:top;margin:4px 8px 4px 0;flex-wrap:wrap} .imgbtns .ibtn{font-size:11px;line-height:1;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--sub);cursor:pointer;user-select:none} .imgbtns .ibtn:hover{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)} .imgbtns .ibdel:hover{color:#d1443c;border-color:#d1443c;background:color-mix(in srgb,#d1443c 10%,transparent)} .imgdead{display:inline-block;padding:3px 10px;margin:4px 0;border:1px dashed #c9ccd1;border-radius:6px;background:#f6f7f8;color:#9aa0a6;font-size:13px;line-height:1.6;cursor:help} [data-theme=dark] .imgdead{background:#22252a;border-color:#3a3f45;color:#7a8089} .mtext .cb{cursor:pointer;color:var(--sub);margin-right:5px;font-size:1.05em} .mtext .cb.done{color:var(--acc)} .mtext.h1{font-size:22px;font-weight:700}.mtext.h2{font-size:18px;font-weight:700}.mtext.h3{font-size:16px;font-weight:700} .mtext-ph{color:var(--sub)} .mrow .medit{flex:1;border:none;background:transparent;border-radius:5px;padding:1px 5px;font-family:inherit;font-size:15.5px;line-height:1.85;min-width:0;box-shadow:none;color:inherit;caret-color:var(--acc);resize:none;overflow:hidden;display:block;white-space:pre-wrap;word-break:break-word;margin:0} .mrow .medit.ce{min-height:1.85em;outline:none;overflow:visible} .mrow .medit.ce:empty{min-height:1.85em} .mrow .medit:focus{outline:none} .mrow .medit.h1{font-size:22px;font-weight:700}.mrow .medit.h2{font-size:18px;font-weight:700}.mrow .medit.h3{font-size:16px;font-weight:700} .mrow.dragging{opacity:.4} /* v3.195：拖拽落点横线**跟落点层级走**（原来用 box-shadow 是整行等宽，看不出会落到哪一级）。 `--dl` = 这条线离行左边缘多少 px，由 JS 按「落点会在第几级」写进 style；1~8 级各一个类，`dropl9` 封顶。 竖直位置跟原来一样：落在这条前面 = 贴行的上边，落在这条后面 = 贴行的下边。 */ .mrow.dropl1,.mrow.dropl2,.mrow.dropl3,.mrow.dropl4,.mrow.dropl5,.mrow.dropl6,.mrow.dropl7,.mrow.dropl8,.mrow.dropl9{position:relative;--dl:11px} .mrow.dropl1{--dl:35px}.mrow.dropl2{--dl:59px}.mrow.dropl3{--dl:83px}.mrow.dropl4{--dl:107px} .mrow.dropl5{--dl:131px}.mrow.dropl6{--dl:155px}.mrow.dropl7{--dl:179px}.mrow.dropl8,.mrow.dropl9{--dl:203px} .mrow.dropl1::after,.mrow.dropl2::after,.mrow.dropl3::after,.mrow.dropl4::after,.mrow.dropl5::after, .mrow.dropl6::after,.mrow.dropl7::after,.mrow.dropl8::after,.mrow.dropl9::after{content:'';position:absolute;display:block;left:var(--dl);right:0;height:2px;border-radius:2px;background:var(--acc);pointer-events:none} .mrow.dropl1.drop-before::after,.mrow.dropl2.drop-before::after,.mrow.dropl3.drop-before::after,.mrow.dropl4.drop-before::after,.mrow.dropl5.drop-before::after,.mrow.dropl6.drop-before::after,.mrow.dropl7.drop-before::after,.mrow.dropl8.drop-before::after,.mrow.dropl9.drop-before::after{top:-1px;bottom:auto} .mrow.dropl1.drop-after::after,.mrow.dropl2.drop-after::after,.mrow.dropl3.drop-after::after,.mrow.dropl4.drop-after::after,.mrow.dropl5.drop-after::after,.mrow.dropl6.drop-after::after,.mrow.dropl7.drop-after::after,.mrow.dropl8.drop-after::after,.mrow.dropl9.drop-after::after{top:auto;bottom:-1px} .mrow.drop-before,.mrow.drop-after{box-shadow:none} .mrow.drop-child .mtext{background:var(--acc2)} .mtip{color:var(--sub);font-size:12px;margin-top:16px;padding:0 6px;line-height:1.7} #mbmenu{position:fixed;z-index:10010;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:6px;min-width:268px;font-size:13px;max-height:80vh;overflow:auto} #mbmenu .mi .mt{flex:1;text-align:left} #mbmenu .mi .mk{color:var(--sub);font-size:11px;font-family:ui-monospace,Consolas,monospace;white-space:nowrap} #mbmenu .mg{padding:3px 0;border-bottom:1px solid var(--line);margin-bottom:4px} #mbmenu .mg:last-child{border-bottom:none;margin-bottom:0} #mbmenu .mrow2{display:flex;gap:4px;flex-wrap:wrap;padding:1px 4px;align-items:center} #mbmenu button{border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 9px;font-size:13px;color:var(--tx)} #mbmenu button:hover{background:var(--acc2);color:var(--acc)} #mbmenu button.on{background:var(--acc);color:#fff} #mbmenu .mi{display:flex;align-items:center;gap:9px;width:100%;justify-content:flex-start;padding:6px 8px} #mbmenu .danger:hover{background:#fdecea;color:var(--danger)} #mbmenu .lbl{color:var(--sub);font-size:12px;padding:0 6px} #mbmenu .sw i{width:17px;height:17px;border-radius:4px;border:1px solid var(--line);cursor:pointer;display:inline-block;margin:0 1px} /* ---------- 新增幕布功能样式 ---------- */ .mbullet{overflow:hidden} .mbullet.mbi{font-size:13px;line-height:1} .mnote{color:var(--sub);font-size:.86em;line-height:1.55;white-space:pre-wrap;padding:0 5px 2px;word-break:break-word} .mnote::before{content:'↳ '} .mbadge{display:inline-block;margin-left:6px;font-size:11px;color:var(--acc);background:var(--acc2);border-radius:9px;padding:0 7px;vertical-align:middle} pre.rb{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:.88em;white-space:pre-wrap;margin:3px 0;overflow:auto;line-height:1.5} /* #标签气泡（v3.303 改款式）：业主口径 2026-10-22「气泡形状要是能做成代码块一样的就好了那样好看」。 ★这里**照抄站里那套已经定过三次的"代码块长相"**（行内代码 `.mtext code` / 搜索词条 `.sp-chip` / 编辑工具按钮 `#nbTb button`）：**浅蓝底 + 4px 小圆角 + 无描边 + 等宽字体 + 本体字色**， 悬停时底色加深、字变蓝。原来是「999px 圆胶囊 + 1px 蓝描边 + 蓝字加粗」—— 业主这次就是要把那个换掉。 ★别再改回圆胶囊 + 描边（那是被退回来的样子）。 */ .tagx{display:inline-block;color:var(--tx);cursor:pointer;font-weight:400;font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:.92em;line-height:1.62;padding:0 5px;margin:0 1px;border:0;border-radius:4px;background:color-mix(in srgb,var(--acc2) 70%,transparent);text-decoration:none;vertical-align:baseline} .tagx:hover{background:var(--acc2);color:var(--acc);box-shadow:none} /* 面包屑 */ #crumb{display:flex;gap:5px;align-items:center;font-size:13.5px;color:var(--sub);flex-wrap:wrap;padding:2px 0 8px;margin-bottom:2px;border-bottom:1px solid var(--line)} #crumb .ccur{color:var(--tx);font-weight:700;font-size:21px;line-height:1.35} #crumb a{color:var(--sub);text-decoration:none;cursor:pointer;padding:1px 4px;border-radius:4px} #crumb a:hover{background:var(--acc2);color:var(--acc)} #crumb .sepc{color:var(--line)} /* 阅读页字号 / TOC */ #fsbar{display:flex;gap:2px;align-items:center} /* 目录（右侧那一栏）：以前是 float + sticky 的浮层，会压在正文文字上、还会被钉顶的编辑工具栏盖住。 现在改成「正文 + 目录」两栏（#docrow），目录占自己那一列，正文永远绕开它； 滚动时靠 sticky 一直停在眼前，并且用 --tbh 给工具栏让出高度（--tbh 由 tocTopSync() 实时量）。 */ #docrow{display:flex;align-items:flex-start;gap:22px} #docrow>#mlist{flex:1;min-width:0} #toc{flex:0 0 220px;position:sticky;top:calc(var(--tbh,0px) + 8px);max-height:calc(100vh - var(--tbh,0px) - 56px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 6px;font-size:12.5px;box-shadow:0 1px 3px rgba(20,30,60,.05)} #toc .ti{padding:3px 6px;border-radius:6px;cursor:pointer;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #toc .ti:hover{background:var(--acc2);color:var(--acc)} #toc .ti.l2{padding-left:16px}#toc .ti.l3{padding-left:28px} #toc .th{font-weight:700;color:var(--tx);font-size:12px;padding:2px 6px 6px} @media(max-width:1100px){#toc{display:none}} /* 树：置顶星 + 拖拽 */ .tnode .pin{display:none;color:var(--sub);padding:0 3px;font-size:12px} .tnode:hover .pin{display:inline} .tnode .pin.on{display:inline;color:#f0a020} .tnode.dragging{opacity:.4} .tnode.drop-before{box-shadow:inset 0 2px 0 var(--acc)} .tnode.drop-after{box-shadow:inset 0 -2px 0 var(--acc)} /* 命令面板 / 查找替换 / 历史 / 回收站 通用弹层 */ .ovl{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10030;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh} /* 快捷键面板（照幕布那份清单） */ #kblist{display:flex;flex-direction:column;gap:2px} #kblist .kbgrp{font-weight:700;color:var(--acc);font-size:12.5px;padding:10px 4px 4px;border-top:1px solid var(--line);margin-top:6px} #kblist .kbgrp:first-child{border-top:none;margin-top:0;padding-top:2px} #kblist .kbrow{display:flex;align-items:center;gap:10px;font-size:13px;padding:3px 4px;border-radius:6px} #kblist .kbrow:hover{background:var(--hov)} #kblist .kbt{flex:1;min-width:0;color:var(--tx)} #kblist .kbk{flex:none;color:var(--sub);background:var(--hov);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:12px;white-space:nowrap} .ovlbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.3);width:min(560px,92vw);max-height:74vh;overflow:auto;padding:10px} .ovlbox input.search{width:100%;font-size:15px;padding:10px 12px;margin-bottom:8px} /* 树形文件夹选择器（移动到此） */ .fsel{max-height:44vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px;margin:0 0 10px;background:var(--bg)} .frow{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:7px;cursor:pointer;font-size:14px;white-space:nowrap} .frow:hover{background:var(--acc2)} .frow.on{background:var(--acc);color:#fff} .frow .car{width:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sub);font-size:0;line-height:1;transition:transform .16s ease} .frow .car.closed{transform:rotate(-90deg)} .frow .car:not(:empty)::before{content:'';display:block;width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .frow .car:hover{color:var(--acc)} .frow.on .car{color:rgba(255,255,255,.8)} .frow .ic{flex:0 0 17px;display:flex;align-items:center;justify-content:center} .frow .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .frow .ct{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--sub)} .frow.on .ct{color:rgba(255,255,255,.85)} .fhint{font-size:12px;color:var(--sub);margin:0 2px 8px;line-height:1.6} .fhint b{color:var(--acc)} .ffoot{display:flex;gap:6px;align-items:center} .ffoot .sp{flex:1 1 auto} .cmdi{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px} .cmdi:hover,.cmdi.sel{background:var(--acc2);color:var(--acc)} .cmdi .k{margin-left:auto;font-size:11px;color:var(--sub)} .ovlhd{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:2px 4px 8px} .ovlhd .x{margin-left:auto;cursor:pointer;color:var(--sub);font-size:18px;padding:0 6px} .frrow{display:flex;gap:6px;margin-bottom:8px} .frrow input{flex:1;min-width:0} .histitem,.trashitem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px} .histitem:last-child,.trashitem:last-child{border-bottom:none} .histitem .t,.trashitem .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .histitem .ts,.trashitem .ts{color:var(--sub);font-size:12px} /* 双链自动补全 */ #acc{position:fixed;z-index:10015;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);max-height:240px;overflow:auto;min-width:220px;font-size:13px} #acc .ai{padding:7px 12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #acc .ai:hover,#acc .ai.sel{background:var(--acc2);color:var(--acc)} #acc .ai .c{color:var(--sub);font-size:11px;margin-left:8px} @media print{ #tree,#chead,.mtip,#mbmenu,.ovl,#mask,#toast,#toc,#fsbar{display:none!important} body,*{overflow:visible!important;height:auto!important} #app,#content,#cbody{display:block!important;height:auto!important;overflow:visible!important} #edwrap,#cwrap,#nbEdWrap{max-width:100%!important;padding:0!important} .mgutter{display:none!important} } /* ---------- 思维导图视图 ---------- */ .mmtb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px} .mmtb .hint{color:var(--sub);font-size:12px;margin-left:4px} .mmtb .sepm{width:1px;height:16px;background:var(--line);margin:0 2px} /* 幕布的画布是干净的白底,没有点阵底纹 */ #mapwrap{position:relative;height:calc(100vh - 150px);overflow:auto;border:1px solid var(--line);border-radius:12px;background-color:var(--panel);cursor:grab} #mapwrap.grab{cursor:grabbing;user-select:none} #mapinner{display:inline-block;min-width:100%;padding:12px} #mapsvg{display:block} .mmnode{cursor:pointer} /* 幕布:鼠标移上去才有一层淡高亮;文字不跟着加粗(加粗会重排,字会跳一下) */ .mmnode .hx{opacity:0;transition:opacity .12s} .mmnode:hover .hx{opacity:.08} /* 折叠圆钮:平时不显示,鼠标移上去、或者本来就是折叠状态才出现(幕布就是这样,连线不再被一排圆圈打断) */ .mmnode .mmfold{opacity:0;transition:opacity .12s} .mmnode:hover .mmfold,.mmnode.mmfolded .mmfold{opacity:1} /* 表格块 + 图标选择器 */ .mtable{border-collapse:collapse;margin:4px 0;font-size:13px;max-width:100%;display:table} .mtable th,.mtable td{border:1px solid var(--line);padding:4px 9px;text-align:left;vertical-align:top;word-break:break-word} .mtable th{background:var(--acc2);font-weight:600} .mtext .mtable th,.mtext .mtable td{border-color:var(--line)} .mtable.edit td{padding:2px} .mtable.edit input{border:1px solid var(--line);background:var(--bg);padding:3px 5px;width:100%;min-width:70px;border-radius:5px} .mtable.edit input:focus{outline:none;border-color:var(--acc)} .icgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px} .icgrid .ico{font-size:22px;padding:6px 0;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;text-align:center;line-height:1.1} .icgrid .ico:hover{background:var(--acc2);border-color:var(--acc)} .icgrid .clr{grid-column:1/-1;font-size:13px;text-align:center} /* 模板库 */ .tplcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px} .tplcard h3{font-size:15px;margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .tplmeta{font-size:13px;color:var(--sub);line-height:1.7;margin:3px 0;word-break:break-word} .tplmeta b{color:var(--tx);font-weight:600} .tplex{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12.5px;line-height:1.6;max-height:280px;overflow:auto;margin:8px 0;color:var(--tx)} .tplbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} #toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:8px 18px;border-radius:20px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:10050;max-width:80vw} #toast.show{opacity:.92} /* ---------- 骨架屏 / 失败态 ---------- */ .skelwrap{padding:14px 4px} .skelrow{display:flex;align-items:center;gap:10px;margin:0 0 18px} .skelline,.skelbul{display:block;background:linear-gradient(90deg,var(--hov) 25%,var(--line) 37%,var(--hov) 63%);background-size:400% 100%;animation:skelSh 1.3s ease infinite;border-radius:6px} .skelbul{width:9px;height:9px;border-radius:50%;flex:0 0 9px} .skelline{height:15px;flex:0 1 auto;min-width:40px} @keyframes skelSh{0%{background-position:100% 50%}100%{background-position:0 50%}} .errbox{max-width:420px;margin:56px auto;text-align:center;padding:0 16px} .erri{font-size:38px;line-height:1.1} .errt{font-size:15px;font-weight:600;margin:10px 0 4px} .errd{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:16px} .errb{border:1px solid var(--acc);background:var(--acc2);color:var(--acc);border-radius:10px;padding:9px 26px;font-size:14px;cursor:pointer;font-family:inherit} .errb:hover{background:var(--acc);color:#fff} .errbox .errb+.errb{margin-left:8px} a.errb{display:inline-block;text-decoration:none} /* 出错红条：底部一条，把脚本错误原文写出来，方便一眼看出问题、截图给谁看都行 */ #errbar{position:fixed;left:0;right:0;bottom:0;z-index:99999;background:#7a1f1f;color:#fff;font-size:12.5px;line-height:1.5;padding:9px 36px 9px 12px;display:none;word-break:break-all} #errbar.on{display:block} #errbar .ex{position:absolute;right:8px;top:5px;font-size:16px;padding:2px 7px;cursor:pointer} /* v3.172：装到桌面（独立窗口）后，**手机系统的状态栏会画在网页上面** —— 时间/信号/电量正好压住顶栏那排按钮。 根因：`` 里有 `viewport-fit=cover`（网页可以铺到刘海/状态栏底下）， 那就**必须自己留安全区**（`env(safe-area-inset-*)`），我们以前没留。 ★独立窗口里再兜一个最小 26px：万一某些浏览器把 env() 给成 0，也不至于又被盖住。 普通浏览器标签页里这几个值都是 0，一点不影响。 */ :root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)} @media(display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){ :root{--sat:max(env(safe-area-inset-top,0px),26px);--sab:max(env(safe-area-inset-bottom,0px),10px)} } html.phone #chead{padding-top:calc(8px + var(--sat))} html.phone #tree{padding-top:var(--sat);padding-bottom:var(--sab)} html.phone #upbar{bottom:calc(14px + var(--sab))} @media(max-width:820px){ #chead{padding-top:calc(8px + var(--sat))} #tree{padding-top:var(--sat);padding-bottom:var(--sab)} #upbar{bottom:calc(14px + var(--sab))} } /* v3.175：**触屏上没有「鼠标悬停」** —— 电脑靠 :hover 才露出来的按钮/把手，在手机上等于不存在。 这里统一让它们常显。判据用「无 hover / 粗指针 / 窄屏」三选一（窄屏这条是为了能在无头里验）。 ★电脑版（有鼠标、窗口够宽）**一点不变**。 */ @media (hover:none),(pointer:coarse),(max-width:820px){ .tnode .del,.tnode .nf,.tnode .pin{display:inline!important} .card .cedit{display:inline-block!important} .erow .eact{opacity:1!important} .mrow .mgutter{opacity:1!important} .mrow .mtri:not(.leaf){opacity:1!important} .rdbtn{opacity:.55!important} /* 阅读记录的数字按钮（v3.164） */ .mmnode .mmfold{opacity:1!important} .mmnode .hx{opacity:.08!important} .r .mk{opacity:.5!important} /* ★v3.177：**别动** `#mlist .mkm / .mnl` —— 手机版本来就 `display:none` 掉它们（那两个图标 在手机上多余，对应的功能在行尾的「…」菜单里）。v3.175 我多手把它们放出来了，业主实报要去掉，这里撤回。 */ /* ★v3.178：**别动 `.mbullet .bd` 的底色** —— 「有下级」和「没下级」就是靠它区分的： 叶子 = 中间一个小灰点；有下级 = 外面再套一圈浅环（`.mbullet.fold .bd{background:var(--line)}`）。 v3.175 我写了一条 `.mbullet .bd{background:var(--tgl)!important}`，把所有圆点都染成一个样， 业主实报「全部一样了，有下级和没下级的都一样」→ 已撤回。 内层那个 6px 的小点（`::after`）本来就是**一直可见**的，触屏上根本不需要这条。 */ .nb-frow .nb-fops,.nb-drow .nb-fops,.nb-row .nb-ops{display:flex!important} .nb-row .nb-hd,.nb-row .nb-bub{visibility:visible!important} #tagpanel .tgbar .tgcar{color:var(--acc)} /* ★v3.187：手机端**热区达标**。实测（430×932 真渲染）93 个可点元素里 **36 个 <40px**： 「字」#sortBtn / .addbtn / #modeBtn = 28px、#sbCol = 29px、#btnTheme = 30px、 「我的 ▾」= 30px、开通会员 = 30px、#foldBtn = 28px、.sp-x = 20px。 手指点这些就是「点不准、点错」。触摸目标按 40px 起 （真要 44px 更舒服，但这几排本来就贴着宽度临界线、v3.181 已经踩过一次，40 是折中）。 */ #sortBtn,.thead .addbtn,#modeBtn,#btnTheme,#foldBtn,#sbCol,#treeToggle{min-width:40px;min-height:40px} .sp-x{min-width:40px;min-height:40px} button.mini{min-height:40px} /* v3.181 把这排 `.tact` 做到 36px，还差一点；顶部那一排（编辑/导图/视图/导出/更多/我的 ▾）和 「开通会员」是写死的 height:30px —— 手机上一并抬到 40。`min-height` 会盖过 `height`。 */ .tact{min-height:40px} #cactions>button,.mgrp>button,#vipBtn{min-height:40px} /* 小票（标签 / 最近搜索）密度高：给到 32px —— 整块可点，又不会把面板撑成三行 */ .sp-chip{min-height:32px;padding:6px 9px;line-height:20px} #nbtagbar .sp-chip{min-height:28px;line-height:16px} } #mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:24} /* v3.171：有新版本提示条 —— 手机加到主屏幕是全屏的、桌面版窗口也不会自己重载， 所以页面自己定期问服务端「index.html 变了没」，变了就弹这条，点一下刷新。 */ #upbar{position:fixed;left:50%;top:10px;transform:translateX(-50%) translateY(-180%);z-index:60;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--acc);color:#fff;font-size:13px;box-shadow:0 6px 22px rgba(0,0,0,.2);cursor:pointer;transition:transform .22s ease;max-width:92vw;user-select:none} #upbar.on{transform:translateX(-50%) translateY(0)} #upbar b{font-weight:600;flex:0 0 auto} #upbar span{opacity:.86;font-size:12px} #upbar i{font-style:normal;background:rgba(255,255,255,.22);padding:2px 9px;border-radius:6px;flex:0 0 auto} html.phone #upbar span{display:none} @media(max-width:820px){#upbar{top:auto;bottom:14px;transform:translateX(-50%) translateY(220%)}#upbar.on{transform:translateX(-50%) translateY(0)}} @media(max-width:820px){ /* v3.169：手机端侧栏**铺满整屏**（原来是 84vw/340px，右边留一条正文，业主说不要留） */ #tree{position:fixed;left:0;top:0;bottom:0;z-index:9996;width:100%;max-width:100%;flex:0 0 auto;transform:translateX(-105%);transition:transform .2s;box-shadow:2px 0 14px rgba(0,0,0,.2)} #tree.open{transform:none} #mask.show{display:block} #treeToggle{display:inline-block!important} .ctitle{max-width:50vw} } #treeToggle{display:none} /* ---------- 手机版 / 电脑版 模板（手动切换，可在桌面预览手机版） ---------- */ html.phone #tree{position:fixed;left:0;top:0;bottom:0;z-index:9996;width:100%;max-width:100%;flex:0 0 auto;transform:translateX(-105%);transition:transform .2s;box-shadow:2px 0 14px rgba(0,0,0,.2)} html.phone #tree.open{transform:none} html.phone #mask.show{display:block} html.phone #treeToggle{display:inline-block!important} html.phone #ctitle{max-width:46vw} html.phone #chead{padding:calc(8px + var(--sat)) 40px 8px 10px;min-height:52px} /* 手机编辑工具栏：粘在顶部（钉住不跟正文滚），但它占的是自己那一行位置， 不会像浮层那样把页面头部（标题/完成/视图/导出）盖住 */ html.phone #cbody>#nbTb{position:fixed;left:0;right:0;top:0;bottom:auto;z-index:9980;margin:0;border-radius:0;border-left:none;border-right:none;border-top:none;box-shadow:0 6px 18px rgba(0,0,0,.14);padding-top:env(safe-area-inset-top);max-height:150px;overflow-y:auto} /* 手机上每行只留一个「⋯」，点开弹出全部功能（★ ↗ ⋮ 都收进去）；电脑端还是三个都排开 */ html.phone #mlist .mkm,html.phone #mlist .mnl,html.phone #mlist .mgutter{display:none} .mrowact{display:none;flex:0 0 auto;align-self:center;padding:7px 8px;font-size:15px;color:var(--sub);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .mrowact.on{color:#f0a820} html.phone #mlist .mrowact{display:inline-block} html.phone #mlist .mtext,html.phone #mlist .mtri,html.phone #mlist .mbullet{touch-action:manipulation} html.phone #nbTbRows{overflow-x:auto;gap:0;padding:5px 6px 7px} html.phone #nbTb button{padding:9px 11px;font-size:14px;touch-action:manipulation;-webkit-tap-highlight-color:transparent} #tbSheet{position:fixed;left:0;right:0;top:0;bottom:auto;z-index:9981;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.22);border-radius:0 0 14px 14px;padding:9px 8px;display:flex;flex-wrap:wrap;gap:7px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} #tbSheet.tp{top:60px;bottom:auto;border-top:none;border-bottom:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.22);border-radius:0 0 14px 14px;padding-bottom:9px} #tbSheet button{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:9px 13px;font-size:14px;color:var(--tx);font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} #tbSheet button:active{background:var(--acc2);color:var(--acc);border-color:var(--acc)} #tbSheet button.on{background:var(--acc2);color:var(--acc);border-color:var(--acc)} #tbSheet .tsw{width:28px;height:28px;border-radius:8px;border:1px solid var(--line)} #tbSheet .tshd{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--sub);padding:0 4px 1px} #tbSheet .tshd b{font-size:13px;color:var(--tx)} #tbSheet .dg{color:#e03131} /* 手机上点一行末尾的「⋯」弹出来的功能面板：底部弹层，拇指够得着 */ #rowSheet{position:fixed;left:0;right:0;bottom:0;z-index:9990;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -10px 26px rgba(0,0,0,.22);padding:8px 8px calc(10px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:7px} #rowSheet button{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:11px 13px;font-size:14px;color:var(--tx);font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} #rowSheet button:active{background:var(--acc2);color:var(--acc);border-color:var(--acc)} #rowSheet button.dg{color:#e03131} #rowSheet .rshd{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--sub);padding:0 4px 2px} #rowSheet .rshd b{color:var(--tx);font-size:14px} #rowSheet .rsx{padding:4px 10px;font-size:16px;cursor:pointer} html.phone #otree .r{font-size:16.5px;line-height:2.05} html.phone .tnode{padding:5px 8px;font-size:13.5px} html.phone .tnode .car{font-size:0} html.phone .tfoot button{padding:10px 4px;font-size:13px} html.phone #toc{display:none} /* ---- 触屏没有 hover：把"悬停才出现"的操作全部常驻，否则 ⋮ 菜单里那约 30 项命令在手机上完全不可达 ---- */ html.phone .mgutter{opacity:1;left:-42px} html.phone .mbub{padding:7px 5px;font-size:17px;min-width:30px;text-align:center} html.phone .mtri{width:24px;flex:0 0 24px;opacity:1} html.phone .mbullet{width:24px;flex:0 0 24px} /* 手机上 HTML5 拖拽不支持触屏，圆点只作视觉符号；⋮ 菜单常驻显示，避免 30 项命令不可达 */ html.phone #nbEdWrap{padding-left:52px} html.phone #nbEdWrap .mgutter{left:-40px} html.phone .r .mk{opacity:.75;padding:8px 7px;font-size:15px} html.phone .tnode .pin{display:inline} html.phone .card .cedit{display:block} html.phone .tnode{min-height:34px} html.phone button.mini{padding:7px 12px;font-size:13px} html.phone #top button,html.phone #top select{min-height:40px} /* v3.187：热区达标那一套，`html.phone` 也来一份 —— 本站「手机端」有两套判定 （JS 的 effPhone() → `html.phone`，和 CSS 的 @media），照 v3.181 的老规矩两处都写，免得漏。 */ html.phone #sortBtn,html.phone .thead .addbtn,html.phone #modeBtn,html.phone #btnTheme,html.phone #foldBtn,html.phone #sbCol,html.phone #treeToggle,html.phone .sp-x{min-width:40px;min-height:40px} html.phone button.mini{min-height:40px} html.phone .sp-chip{min-height:32px;padding:6px 9px;line-height:20px} html.phone #nbtagbar .sp-chip{min-height:28px;line-height:16px} html.phone .tact{min-height:40px} html.phone #cactions>button,html.phone .mgrp>button,html.phone #vipBtn{min-height:40px} /* 点按反馈：手机上没有 hover，用 active 态给出"按到了"的确认 */ html.phone .mbub:active,html.phone .mk:active{background:var(--acc2);color:var(--acc)} /* 阅读区选中后弹出的快捷栏：手机上按钮也要够大 */ html.phone #rdbar button,html.phone #selbar button{padding:9px 12px;min-width:40px;font-size:15px} html.pc #tree{position:relative!important;transform:none!important;width:var(--tree);flex:0 0 var(--tree);box-shadow:none} /* ---------- 收起侧边栏（v3.166，照幕布那个「收起侧边栏 Ctrl+\」）---------- 以前 ☰（#treeToggle）只在窄屏/手机版露出来；现在电脑版也露出来， 它就是「收起来之后把侧栏叫回来」的那个按钮。收起 = 把 #tree 宽度收成 0（带动画）， 正文 #content 是 flex:1，会自己铺满。 ★★ 注意：本站**根本没有 `html.pc` 这个类**（`pc` 从没被设过，老 CSS 里那些 `html.pc …` 是死代码）—— 「电脑版」的正确判断是 `html:not(.phone)` 再叠一个宽度 > 820。手机版侧栏本来就是 「滑进来 + 遮罩」那套（`#tree.open`），这里一个字都不动。 */ @media(min-width:821px){ html:not(.phone) #treeToggle{display:inline-flex!important;align-items:center;justify-content:center} html:not(.phone) #tree{transition:width .16s ease,flex-basis .16s ease} /* ★★ flex 子项默认 `min-width:auto`，**不会**缩到比内容还窄 —— 光写 `width:0` 是白写的（实测宽度还是 320），必须一起给 `min-width:0`。 */ html:not(.phone).sbcol #tree{width:0;min-width:0;flex:0 0 0;border-right:0;overflow:hidden} html:not(.phone).sbcol #sbDrag{display:none} html:not(.phone).sbcol #treeToggle{color:var(--acc);background:var(--acc2);border-radius:7px} html:not(.phone) #sbCol{display:inline-flex;align-items:center;justify-content:center} } /* v3.169：这个「收起」按钮**电脑版和手机版都显示** —— 手机端侧栏铺满整屏后，右边那层遮罩点不到了，**必须靠它才能关**。 */ #sbCol{display:inline-flex;align-items:center;justify-content:center} html.pc #mask{display:none!important} /* ---------- 阅读体验：专注 / 排版 / 字体 / 编号 / 进度 / 摘录 ---------- */ #pbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--acc);z-index:99;pointer-events:none;opacity:.85} body.focus #tree,body.focus #chead,body.focus #pctChip{display:none!important} body.focus #cbody{padding-top:32px} body.focus #fexit{display:inline-flex!important} body.focus .wrap{max-width:44em;margin:0 auto} #fexit{display:none;position:fixed;top:10px;right:12px;z-index:97;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 6px 4px 12px;font-size:12px;color:var(--sub);box-shadow:0 4px 16px rgba(0,0,0,.12)} body.rp1 #otree .r{line-height:2.05} body.rp2 #otree .r{line-height:2.6} body.rp2 #otree .mnote{margin-bottom:8px} body.rp1 #cwrap,body.rp2 #cwrap{letter-spacing:.02em} body.rp1 .wrap,body.rp2 .wrap{max-width:42em;margin:0 auto} /* v3.193 手机端「字体切换点了还是一样」——两个病根都在这一组规则里： ① 只认 #otree/#toc/#mlist/.mtitle，「我的笔记」浮层（#nbOverlay）里的正文行根本没被覆盖； ② 字体名单全是 iOS / Windows 的名字（苹方 / 雅黑 / Songti SC / Kaiti SC）， 安卓机上一个都匹配不到，四个选项最后落到同一个系统中文黑体上 → 看着「一模一样」。 所以这里：① 把范围补全（含 #cbody / #nbOverlay）② 每个名单后面补上安卓 / Linux 那一串（思源 / Noto / MiSans / 鸿蒙）。 */ body.ff-song #otree,body.ff-song #toc,body.ff-song #mlist,body.ff-song .mtitle,body.ff-song #cbody,body.ff-song #nbOverlay{font-family:"SiteSerif","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC","Source Han Serif CN",Songti SC,STSong,SimSun,"宋体",serif} body.ff-kai #otree,body.ff-kai #toc,body.ff-kai #mlist,body.ff-kai .mtitle,body.ff-kai #cbody,body.ff-kai #nbOverlay{font-family:"SiteKai","Kaiti SC","STKaiti",KaiTi,"Kaiti TC","TW-Kai","楷体","Noto Serif CJK SC",serif} body.ff-hei #otree,body.ff-hei #toc,body.ff-hei #mlist,body.ff-hei .mtitle,body.ff-hei #cbody,body.ff-hei #nbOverlay{font-family:"SiteSans","PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei UI","Microsoft YaHei",-apple-system,sans-serif} .r .num{color:var(--sub);font-size:.85em;margin-right:7px;font-variant-numeric:tabular-nums;user-select:none;flex:0 0 auto;opacity:.75} .r .mk{opacity:0;cursor:pointer;color:var(--sub);flex:0 0 auto;padding:0 5px;font-size:12px;user-select:none} .r:hover .mk{opacity:.5} .r .mk:hover{opacity:1;color:var(--acc)} .r .mk.on{opacity:1;color:#f0a820} /* 前台只读与后台编辑共用 #mlist 一套渲染，以下补齐只读态原有的阅读能力 */ .mtitle.ro{cursor:default} .mtitle.ro:hover{background:transparent} #mlist .num{color:var(--sub);font-size:.85em;margin-right:7px;font-variant-numeric:tabular-nums;user-select:none;flex:0 0 auto;opacity:.75} #mlist .mkm{opacity:0;cursor:pointer;color:var(--sub);flex:0 0 auto;padding:0 5px;font-size:12px;user-select:none;align-self:center} #mlist .mrow:hover .mkm{opacity:.5} #mlist .mkm:hover{opacity:1;color:var(--acc)} #mlist .mkm.on{opacity:1;color:#f0a820} #mlist .mnl{opacity:0;cursor:pointer;color:var(--sub);flex:0 0 auto;padding:0 5px;font-size:13px;user-select:none;align-self:center} #mlist .mrow:hover .mnl{opacity:.5} #mlist .mnl:hover{opacity:1;color:var(--acc)} /* ---------- v3.199 C2：断网小胶囊（底部居中，只在有离线/待传时出现） ---------- */ #offbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:10045; max-width:calc(100vw - 24px);padding:7px 12px;border-radius:999px;font-size:12.5px; background:#2b2f36;color:#f2f4f6;box-shadow:0 8px 24px rgba(0,0,0,.22); display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #offbar .ob{cursor:pointer;color:#9ecbff;text-decoration:underline;user-select:none} html.phone #offbar{bottom:10px;font-size:12px;padding:8px 12px} /* ---------- v3.197b：我的批注（行尾记号 + 行下批注条 + 弹层里的输入框） ---------- */ .annomk{flex:0 0 auto;cursor:pointer;color:#d98b1f;font-size:12px;padding:0 5px;user-select:none;align-self:center} .annomk:hover{color:#b8730d} /* ---------- v3.200 录音条（语音消息）---------- 照微信语音条的样子：一条浅灰圆角条 + 信号图标 + 秒数，点一下播放 / 再点暂停。 为什么不做声波动画：业主定过「图标统一单色」，灰条上再堆彩色声波，浅色/深色两套主题都不好看。 播放时只让那个小信号图标轻轻呼吸一下（单色 opacity 动画）—— 克制，但看得见。 */ .mvoxwrap{display:flex;align-items:center;gap:6px;margin:2px 0 3px 0;flex-wrap:wrap} .vdel{flex:0 0 auto;cursor:pointer;color:var(--sub);font-size:13px;padding:0 5px;opacity:0; user-select:none;-webkit-user-select:none;transition:opacity .12s;align-self:center} #mlist .mrow:hover .vdel,#nbList .mrow:hover .vdel{opacity:.55} .vdel:hover{opacity:1!important;color:#d9534f} html.phone .vdel{opacity:.55} .mvox{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;-webkit-user-select:none; background:var(--hov);border:1px solid var(--line);border-radius:16px;padding:4px 12px 4px 9px; font-size:13px;color:var(--tx);line-height:1.5;max-width:min(340px,72vw); -webkit-tap-highlight-color:transparent;transition:background .12s,border-color .12s} .mvox:hover{background:color-mix(in srgb,var(--acc) 9%,var(--hov));border-color:color-mix(in srgb,var(--acc) 30%,var(--line))} .mvox .vico{width:15px;height:15px;flex:0 0 15px;background:currentColor;opacity:.7; -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;display:inline-block} .mvox .vdur{font-variant-numeric:tabular-nums;color:var(--sub);font-size:12.5px;min-width:22px;text-align:right} .mvox.playing{background:color-mix(in srgb,var(--acc) 15%,var(--hov));border-color:color-mix(in srgb,var(--acc) 45%,var(--line))} .mvox.playing .vico{opacity:1;animation:voxpulse 1.05s ease-in-out infinite} @keyframes voxpulse{0%,100%{opacity:.32}50%{opacity:1}} .mvox.local{border-style:dashed} .mvox .vtag{font-size:11px;color:#d98b1f;flex:none} .mvox .vstt{font-size:12px;color:var(--acc);flex:none;border-left:1px solid var(--line);padding-left:8px;margin-left:2px} .mvox .vstt:hover{text-decoration:underline} /* 转文字的结果（下一轮才有）：挂在条子下面，灰字、可选中复制 */ .mvoxtext{margin:0 0 3px 0;font-size:13px;color:var(--sub);white-space:pre-wrap;word-break:break-word; border-left:2px solid var(--line);padding:1px 0 1px 8px;max-width:min(560px,80vw)} /* 录的时候那条主题整行泛红，一眼看出「其实在录这一条」 */ .mrow.mrec{background:color-mix(in srgb,#d9534f 11%,transparent);border-radius:6px} .mvox.rec{background:color-mix(in srgb,#d9534f 13%,var(--hov));border-color:color-mix(in srgb,#d9534f 40%,var(--line))} .mvox.rec .vico{opacity:1;color:#d9534f;animation:voxpulse .85s ease-in-out infinite} /* ---------- ★v3.210 修：录音条那两个按钮在**电脑上根本看不见** ---------- ① 🎤 当初图省事借用了 `.mrowact` —— 那是**手机专用**的类（电脑端 `display:none`， 电脑端那一格由行首悬停出来的「⋮」菜单代替）。结果行尾永远是空的，业主在电脑上 只能去「⋮ → 🎤」里找。现在给它自己的类 `.mvbtn`，**照抄 ★ / ↗ 那一套**： 透明占位 + 鼠标移到这一行才显形（用 opacity 不用 display，免得把文字推来推去）。 ② 语音条右边那个 ✕（`.vdel`）挂在 `.mrow` 的**外面**（`.mvoxwrap` 是它的**下一个兄弟**）， 而原来那条 `#mlist .mrow:hover .vdel` 是当它在下级找的 → 永远匹配不到，也是看不见。 这里用相邻兄弟选择器补上。手机端本来就常显，一个字没动。 */ #mlist .mvbtn{opacity:0;cursor:pointer;color:var(--sub);flex:0 0 auto;padding:0 5px;font-size:14px; user-select:none;-webkit-user-select:none;align-self:center;touch-action:manipulation;transition:opacity .12s} #mlist .mrow:hover .mvbtn{opacity:.6} #mlist .mvbtn:hover{opacity:1;color:var(--acc)} #mlist .mvbtn.on{opacity:1;color:#d9534f} html.phone #mlist .mvbtn{opacity:.6;padding:10px 8px;font-size:16px} /* ★v3.222：图标版的对齐与尺寸。用 flex 把圈里话筒摆正，不再靠 font-size 撑。 手机端放到 19px + padding 撑出约 41px 的点击高度（热区标准 ≥40px）。 */ #mlist .mvbtn{display:inline-flex;align-items:center;justify-content:center} #mlist .mvbtn .ico{width:15px;height:15px;flex:0 0 15px;opacity:1} html.phone #mlist .mvbtn .ico{width:19px;height:19px;flex:0 0 19px} .mpanel button .ico-rec{width:15px;height:15px;flex:0 0 15px} #mlist .mrow:hover + .mvoxwrap .vdel{opacity:.55} /* ================= v3.211：使用说明（每条功能一份说明书）================= 业主口径：「以后每次改动和添加新功能都要做一套说明书……而且要有结构大纲模式，跟大站目录和文章一样有结构」。 所以这一页**两边都是大纲**：左边一棵目录树（分组 → 功能），右边一篇正文大纲（是什么 / 为什么 / 怎么办）， 两边都用**缩进引线 + 折叠三角 + 圆点**，跟文档库的树和正文一个长相。 为什么写成大纲：说明书本来就该"一层一层"的；而且折叠起来才好读 —— 找的时候看目录，学的时候展开那一条。 */ .gdw{display:flex;gap:24px;align-items:flex-start;max-width:1060px} .gds{flex:0 0 250px;position:sticky;top:0;border-right:1px solid var(--line);padding:2px 18px 20px 0} .gdsearch{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--hov);border-radius:9px;padding:7px 10px;font-size:13px;color:var(--tx);font-family:inherit;margin:0 0 10px} .gdsearch:focus{outline:none;border-color:var(--acc);background:var(--bg)} .gdr{display:flex;align-items:flex-start;padding:3px 4px;border-radius:6px;line-height:1.7;font-size:13.5px} .gdr.clk{cursor:pointer} .gdr.clk:hover{background:var(--hov)} .gdr.on{background:var(--acc2)} .gdr.on .gdt{color:var(--acc);font-weight:600} .gdr.on .gdv{color:var(--acc);opacity:.7} .gdgl{flex:0 0 20px;width:20px;align-self:stretch;position:relative} .gdgl::before{content:'';position:absolute;left:9px;top:-3px;bottom:-3px;width:1px;background:var(--line)} .gdtri{flex:0 0 16px;width:16px;height:22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sub);transition:transform .15s} .gdtri::before{content:'';width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .gdtri.cl{transform:rotate(-90deg)} .gdtri.leaf{visibility:hidden} .gdbul{flex:0 0 16px;width:16px;height:22px;display:inline-flex;align-items:center;justify-content:center} .gdbul::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--sub)} .gdbul.o::after{width:5px;height:5px;background:transparent;border:1px solid var(--sub);box-sizing:border-box} .gdt{flex:1;min-width:0;color:var(--tx);padding-right:4px} .gdv{font-size:11px;color:var(--sub);margin-left:4px;white-space:nowrap} .gdgrp{font-weight:600} .gdm{flex:1;min-width:0} .gdh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px} .gdtitle{font-size:21px;font-weight:700;color:var(--tx)} .gdmeta{margin-left:auto;font-size:12px;color:var(--sub);white-space:nowrap} .gdmeta b{color:var(--acc);background:var(--acc2);border-radius:7px;padding:2px 8px;font-weight:600} .gddoc{font-size:14.5px} .gddoc .gdt{font-size:14.5px;line-height:1.9} .gddoc .gdr[data-lv="0"] .gdt{font-size:15.5px} .gddoc .gdr[data-lv="1"] .gdt{font-size:15px} .gddoc .gdr[data-lv="1"] .gdbul::after{width:7px;height:7px;background:var(--tx);opacity:.75} .gdfig{margin:6px 0 10px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--hov);max-width:720px} .gdfig img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:#fff} .gdcap{font-size:12.5px;color:var(--sub);line-height:1.8;margin:9px 2px 0} .gdnote{margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,#5aa469 35%,var(--line));background:color-mix(in srgb,#5aa469 9%,var(--hov));font-size:13px;color:var(--tx);line-height:1.8} .gdempty{font-size:13.5px;color:var(--sub);line-height:2;padding:24px 0} /* ★v3.211 C 部分：功能旁就地那个「?」 —— 点了直接跳到说明书里那条（跟左栏「使用说明」共用一份数据） */ .gdq{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%; border:1px solid var(--line);color:var(--sub);font-size:10.5px;font-weight:700;line-height:1;cursor:pointer; flex:0 0 16px;vertical-align:middle;margin-left:5px;user-select:none;-webkit-user-select:none;background:transparent;font-family:inherit} .gdq:hover{border-color:var(--acc);color:var(--acc);background:var(--acc2)} html.phone .gds{flex:0 0 100%;position:static;border-right:none;border-bottom:1px solid var(--line);padding:0 0 12px;margin:0 0 12px} html.phone .gdw{flex-direction:column;gap:0} /* ================= v3.212：意见需求大全 ================= ★ 正文骨架**故意复用上面的 .gd*（使用说明那套）** —— 业主的要求就是"跟大站目录和文章一样有结构"， 复用同一套样式是唯一能保证两边永远长得一样、而且以后改一处两边都跟着改的做法。 ★ 这里只加"意见"独有的东西：状态徽章 / 作者行 / 操作按钮 / 那个大纲编辑器。 */ .fbbadge{font-size:11px;border-radius:6px;padding:1.5px 8px;white-space:nowrap;border:1px solid transparent} .fbb-new{background:var(--hov);color:var(--sub);border-color:var(--line)} .fbb-doing{background:color-mix(in srgb,#3b82f6 14%,transparent);color:#2563eb;border-color:color-mix(in srgb,#3b82f6 35%,transparent)} .fbb-done{background:color-mix(in srgb,#5aa469 16%,transparent);color:#3f8a53;border-color:color-mix(in srgb,#5aa469 35%,transparent)} .fbb-reject{background:color-mix(in srgb,var(--sub) 14%,transparent);color:var(--sub);border-color:var(--line)} .fbmeta{font-size:12px;color:var(--sub);margin:2px 0 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;line-height:1.8} .fbacts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} .fbacts button{font-size:12.5px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--tx);cursor:pointer;font-family:inherit;touch-action:manipulation} .fbacts button:hover{border-color:var(--acc);color:var(--acc)} .fbacts button.dg:hover{border-color:#d9534f;color:#d9534f} .fbempty{font-size:13.5px;color:var(--sub);line-height:2;padding:20px 2px} .fbwho{font-size:11px;color:var(--sub);margin-left:5px;white-space:nowrap} /* ---- 大纲编辑器（浮层）---- */ .fbedwrap{position:fixed;left:0;right:0;top:0;bottom:0;z-index:10060;background:rgba(0,0,0,.42); display:flex;align-items:center;justify-content:center;padding:18px} .fbed{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(780px,100%); max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)} .fbedhd{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:15px} .fbedhd .x{margin-left:auto;cursor:pointer;color:var(--sub);font-size:19px;padding:0 5px;line-height:1} .fbedhd .x:hover{color:#d9534f} .fbedbd{padding:14px 16px;overflow:auto;flex:1} .fbedt,.fbedn{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--bg);color:var(--tx); border-radius:9px;font-family:inherit;margin:0 0 8px} .fbedt{padding:9px 11px;font-size:15px} .fbedn{padding:7px 11px;font-size:13px} .fbedt:focus,.fbedn:focus,.fbin:focus{outline:none;border-color:var(--acc)} .fbedtip{font-size:12px;color:var(--sub);line-height:1.85;margin:0 0 10px} .fbrows{border:1px solid var(--line);border-radius:10px;padding:8px 6px;background:var(--bg);min-height:96px;max-height:46vh;overflow:auto} .fbrow2{display:flex;align-items:flex-start;border-radius:6px;padding:1px 0} .fbrow2.on{background:var(--hov)} .fbrow2 .fbbul{flex:0 0 16px;width:16px;height:28px;display:inline-flex;align-items:center;justify-content:center} .fbrow2 .fbbul::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--sub)} .fbin{flex:1;min-width:0;border:1px solid transparent;background:transparent;color:var(--tx);font-family:inherit; font-size:14.5px;line-height:1.75;padding:3px 7px;border-radius:6px;white-space:pre-wrap;word-break:break-word;min-height:28px} .fbin:focus{background:var(--bg);border-color:var(--acc)} .fbedft{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap} .fbedft button{font-size:13px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:var(--bg); color:var(--tx);cursor:pointer;font-family:inherit;touch-action:manipulation} .fbedft button:hover{border-color:var(--acc);color:var(--acc)} .fbedft button.pri{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600} .fbedft button.pri:hover{opacity:.9;color:#fff} html.phone .fbedwrap{padding:0} html.phone .fbed{width:100%;max-height:100%;height:100%;border-radius:0} /* 底部那条「有录音还没传上去」的提示（跟 v3.199 的离线胶囊一样：必须看得见，不许静默） */ #voxbar{position:fixed;z-index:10046;left:0;right:0;bottom:0;padding:6px 12px;font-size:12.5px;text-align:center; background:#7a4a00;color:#fff;box-shadow:0 -2px 8px rgba(0,0,0,.18)} .manno{margin:2px 0 8px;padding:6px 10px;border-left:3px solid #e0b070; background:color-mix(in srgb,#e8b96a 14%,transparent);border-radius:0 7px 7px 0; font-size:13px;line-height:1.75;white-space:pre-wrap;word-break:break-word} .manno .aq{display:block;color:var(--sub);font-size:12px;margin-bottom:2px} .manno .aact{margin-left:8px;font-size:12px;color:var(--acc);cursor:pointer;white-space:nowrap;user-select:none} #annoTx{width:100%;min-height:96px;box-sizing:border-box;margin:8px 0;padding:8px 10px; border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--tx); font-size:14px;line-height:1.7;font-family:inherit;resize:vertical} /* ================= v3.201：左栏「最近编辑」/「快捷访问」（照幕布那两栏，但带上层级） ================= 业主口径：① 两栏放在「固定入口」**上面**；② 快捷访问是**真分组树**（能建分组/子分组，文件夹也能钉）； ③ 本机存 + 云端跟账号走。这里只放长相，逻辑在下面 v3.201 那个大块里。 */ .ico-group{--m:url("data:image/svg+xml;utf8,")} .ico-pin{--m:url("data:image/svg+xml;utf8,")} .rqlbl .tgacts{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:400} .rqlbl .tgacts .tact{font-size:11.5px} .rqempty{font-size:11.5px;color:var(--sub);padding:1px 10px 7px;font-weight:400;letter-spacing:0;line-height:1.65;white-space:normal} .rcday{font-size:11px;color:var(--sub);padding:6px 10px 1px;letter-spacing:.4px;font-weight:600;opacity:.9} .tnode.rcrow,.tnode.qkrow{font-size:13px;gap:4px} .tnode.rcrow .nm,.tnode.qkrow .nm{font-weight:400} .rcrow .rcp{font-size:11px;color:var(--sub);max-width:76px;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85} .rcrow .rqt{font-size:11px;color:var(--sub);flex:none;white-space:nowrap;opacity:.8} .rcrow .rce{font-size:11px;color:var(--acc);flex:none} .rcrow .del[data-rcpin]:hover{color:var(--acc)} .qkrow .qkc{font-size:11px;color:var(--sub);flex:none;opacity:.8} .qkrow .del:hover{color:var(--danger)} .qkrow.qk-drag{opacity:.45} .qkrow.qk-before{box-shadow:inset 0 2px 0 var(--acc)} .qkrow.qk-after{box-shadow:inset 0 -2px 0 var(--acc)} .qkrow.qk-into{background:color-mix(in srgb,var(--acc) 16%,transparent);box-shadow:inset 0 0 0 1.5px var(--acc)} /* v3.281：侧栏「记住过的目录」—— 行跟快捷访问同一套，只补时间 / 结构那几行 */ .tmrow .tmt{font-size:11px;color:var(--sub);flex:none;white-space:nowrap;opacity:.8} .tmrow .qkc{min-width:10px;text-align:right} .tmfold{font-size:12.5px;color:var(--sub)} .tmfold .nm{font-weight:400} .tmfold .ic{opacity:.7} .tmfsep{font-size:11px;color:var(--sub);padding:3px 6px 1px 24px;opacity:.85;letter-spacing:.3px} /* 两个整页（最近编辑 / 快捷访问） */ .rqpage{font-size:13.5px;color:var(--tx)} .rqbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .rqfind{flex:1;min-width:200px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--tx);font-size:13px;font-family:inherit} .rqtip{color:var(--sub);font-size:12px;line-height:1.7;margin:0 0 10px} .rqtip b{color:var(--tx)} .rqres{margin:8px 0 4px} .rqpick,.rqrow{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:var(--panel)} .rqpick{cursor:pointer} .rqpick:hover,.rqrow:hover{background:var(--hov)} .rqpick .ico,.rqrow .ico{opacity:.7} .rqt2{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} .rqrow .rqt2{flex:0 1 auto} .rqp{color:var(--sub);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:40px} .rqw{margin-left:auto;color:var(--sub);font-size:12px;white-space:nowrap;flex:none} .rqa{color:var(--acc);font-size:12px;cursor:pointer;white-space:nowrap;flex:none} .rqa:hover{text-decoration:underline} .rqgrp{margin:14px 0 6px;font-weight:700;color:var(--sub);font-size:12px;letter-spacing:.4px} .rqempty2{color:var(--sub);font-size:12.5px;line-height:1.9;padding:8px 2px} .rqind{display:inline-block;width:14px} .rqroot{border:1px dashed var(--line);border-radius:8px;padding:7px 10px;color:var(--sub);font-size:12.5px;margin-bottom:8px} .rqroot.qk-into{border-color:var(--acc);color:var(--acc)} /* 手机端：栏目标题那一排允许折行（否则窄屏上「整页」被挤出屏幕）； 最近编辑那一行把「所属文件夹」收起来，把地方让给行尾的 📌 / ✕（不然钉不了） */ @media (hover:none),(pointer:coarse),(max-width:820px){ .tglbl.rqlbl{flex-wrap:wrap} .tglbl.rqlbl .tgacts{margin-left:auto;justify-content:flex-end;flex-wrap:wrap} .tnode.rcrow .rcp{display:none} .rqrow .rqp{display:none} } /* ---------- v3.196：朗读条 / 我的书架 / 每日一读 ---------- */ #ttsbar{position:fixed;left:0;right:0;bottom:0;z-index:10005;display:flex;align-items:center;gap:5px;flex-wrap:wrap; padding:7px 10px;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.07); font-size:12.5px;color:var(--tx)} #ttsbar.hide{display:none} #ttsbar .ttsb{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px; border:1px solid var(--line);border-radius:7px;cursor:pointer;user-select:none;flex:none} #ttsbar .ttsb:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)} #ttsbar .ttsb.b{min-width:38px;font-weight:700} #ttsbar .ttsb.x{margin-left:auto} #ttsbar .ttsi{color:var(--sub);white-space:nowrap;padding:0 2px} #ttsbar .ttssel{max-width:160px;height:30px;padding:0 4px;border:1px solid var(--line);border-radius:7px; background:transparent;color:var(--tx);font-size:12.5px} #ttsbar .ttstip{color:var(--sub);font-size:11.5px;flex-basis:100%} html.phone #ttsbar{padding:6px 8px;gap:4px} html.phone #ttsbar .ttstip{display:none} html.phone #ttsbar .ttsb{min-width:38px;height:38px} #mlist .mrow.tts-now>.minner>.mtext{background:color-mix(in srgb,var(--acc) 17%,transparent);border-radius:6px} #otree .r.tts-now .x{background:color-mix(in srgb,var(--acc) 17%,transparent);border-radius:6px} .dailysec{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;background:var(--panel)} .dailysec h4{margin:0 0 6px;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dailysec h4 .dfx{margin-left:auto;font-weight:400;font-size:12px;color:var(--acc);cursor:pointer} .dailysec h4 .dfx+.dfx{margin-left:0} .ditem{padding:7px 2px;border-top:1px dashed var(--line);cursor:pointer;font-size:13.5px;line-height:1.75} .ditem:hover{background:color-mix(in srgb,var(--acc) 7%,transparent)} .ditem .dsrc{display:block;color:var(--sub);font-size:11.5px;margin-top:3px} .cfav{display:inline-flex;align-items:center;gap:3px;cursor:pointer;color:var(--sub);font-size:12px; padding:0 4px;border-radius:5px;margin-left:6px} .cfav:hover{background:color-mix(in srgb,var(--acc) 12%,transparent)} .cfav.on{color:#d98b1f} #mlist.ro .mtext{cursor:default;font-size:1em} #mlist.ro .mrow:hover{background:var(--hov)} #mlist .mrow mark{background:var(--mark);color:inherit;border-radius:2px} #mlist .mrow.mlock .mtext{user-select:none} #tagpanel:empty{display:none} /* 顶栏这四个分组钮都贴着屏幕右边，面板必须右对齐、往左长。 血泪坑：data-mg 挂在 button 上，.mpanel 是它的兄弟节点，写成 "[data-mg=main] .mpanel" 永远匹配不到，等于没改。 */ #mp-main,#mp-v,#mp-x,#mp-m{left:auto;right:0} .mpanel{max-width:min(380px,calc(100vw - 18px))} /* v3.193：字体不再是「点一下循环到下一个」——四个选项并排，每个**按它自己的字体**显示， 当前那个高亮；点一下立刻生效、面板不关（手机上一眼就能看出哪个在这台机器上真的不一样）。 */ .fchips{display:flex;flex-wrap:wrap;gap:4px;grid-column:1/-1;margin:0 0 4px} .fchips button{flex:1 1 auto;min-width:72px;text-align:center;white-space:nowrap;overflow:visible;text-overflow:clip;padding:7px 6px} .fchips button.act{background:var(--sel);color:var(--acc);font-weight:600} /* 手机端：菜单不再贴着按钮往左长——窄屏必然被屏幕切掉半边（视图/导出菜单左边的字都被啃掉）。 JS 只在手机模式给面板加 .phonepop：改成屏幕正中弹层，宽度跟内容走、封顶到屏宽，超高内部滚动，点蒙层关闭。 #mp-add 在侧栏抽屉里，抽屉带 transform 会把 fixed 定位拉歪，所以排除它，仍走原来的贴按钮方案。 */ #mmask{display:none;position:fixed;inset:0;z-index:10030;background:rgba(10,14,22,.4)} #mmask.show{display:block} .mpanel.phonepop{position:fixed;left:50%!important;right:auto!important;top:50%;transform:translate(-50%,-50%)!important; width:max-content;max-width:calc(100vw - 22px);min-width:min(264px,calc(100vw - 22px)); max-height:min(64vh,560px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; grid-template-columns:repeat(auto-fill,minmax(min(138px,44vw),1fr));padding:9px;border-radius:14px; box-shadow:0 20px 52px rgba(0,0,0,.32)} .mpanel.phonepop button{padding:11px 10px;font-size:14.5px;white-space:normal;word-break:break-word;overflow:visible;text-overflow:clip} /* 目录树字体：默认走苹方／雅黑UI 这一路，观感对齐手机端 */ /* v3.193：目录树字体同样补上安卓那一串，并且也管到「我的笔记」浮层自己那棵树（#nbTree）。 */ body.tfhei #tree,body.tfhei #nbTree{font-family:"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","Microsoft YaHei",sans-serif} body.tfsans #tree,body.tfsans #nbTree{font-family:"SiteSans","Source Han Sans SC","Noto Sans CJK SC","MiSans","PingFang SC","Microsoft YaHei",sans-serif} body.tfsong #tree,body.tfsong #nbTree{font-family:"SiteSerif","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC",Songti SC,SimSun,"宋体",serif} body.tfkai #tree,body.tfkai #nbTree{font-family:"SiteKai","Kaiti SC","STKaiti",KaiTi,"Kaiti TC","TW-Kai","楷体",serif} /* 多选节点的批量操作条 ★v3.284：从「插在列表最前面的 sticky 条」改成**浮层（fixed）**。 为什么要改：sticky 条会占 40px 高，一出现就把整篇往下顶 → 全表重排（2168 行 61ms、8462 行约 1/4 秒）， 这就是「一进多选就卡」的第二号原因。fixed 之后它不占流，列表只多一条 padding-bottom（只改滚动高度）。 位置：手机贴底（拇指够得到），电脑居中偏下；不遮正文最后一行。 */ #msbar{display:none;position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:60;align-items:center;gap:5px;flex-wrap:wrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--panel);border:1px solid var(--acc);border-radius:12px;padding:7px 10px;margin:0;font-size:13px;box-shadow:0 8px 26px rgba(0,0,0,.20);max-width:min(980px,calc(100vw - 16px));margin-left:auto;margin-right:auto} #msbar::-webkit-scrollbar{height:4px} /* 电脑上**换行**（三排也看得全，按钮不会被挤到屏幕外）；手机上**单排横滑**（不占半屏） */ html.phone #msbar{flex-wrap:nowrap} /* ★手机上原本还要往让 58px —— 那是给正文底下那条「加宽」滑动条（#panbar）让位的。 v3.293 那条滑动条整条去掉了（改成顶部一个按钮），所以这里回到贴底（8px）。 */ html.phone #msbar{bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:9971} body.msbar-on #cbody{padding-bottom:150px} body.msbar-on #nbEdWrap{padding-bottom:150px} html.phone body.msbar-on #cbody{padding-bottom:calc(184px + env(safe-area-inset-bottom,0px))} html.phone body.msbar-on #nbEdWrap{padding-bottom:calc(184px + env(safe-area-inset-bottom,0px))} /* 「取消选择」永远排在最前，且给个明确的浅红底，免得在 30 个按钮里找不到出口 */ #msbar .msx{color:#c62828;border-color:#f0b4b4;font-weight:700} #msbar .msx:hover{background:#fdecea;border-color:#e03131} /* 多选条浮在底部时，把右下角那条「别处有新改动」往上让一让，别压住「取消选择」 */ body.msbar-on #syncChip{bottom:150px!important} html.phone body.msbar-on #syncChip{bottom:108px!important} #msbar.show{display:flex} #msbar .msn{font-weight:700;color:var(--acc);margin-right:4px;white-space:nowrap;flex:0 0 auto} #msbar button{border:1px solid var(--line);background:transparent;border-radius:7px;padding:3px 8px;font-size:12.5px;color:var(--tx);cursor:pointer;font-family:inherit;white-space:nowrap;flex:0 0 auto} #msbar button:hover{background:var(--hov);border-color:var(--acc)} #msbar button.dg:hover{color:#e03131;border-color:#e03131} /* 多选期间把钉顶的编辑工具栏让位收起，免得盖住操作条 */ #cbody>#nbTb.msHide{display:none!important} #msbar .ms-sep{display:inline-block;width:1px;height:16px;background:var(--line);margin:0 3px} #msbar .msw{display:inline-block;width:15px;height:15px;border-radius:4px;border:1px solid var(--line);cursor:pointer;margin:0 2px;vertical-align:-3px} #msbar .msw:hover{box-shadow:0 0 0 2px var(--acc)} /* ---------- 左侧全站搜索面板（学幕布：按文档分组+面包屑+命中行+展开更多） ---------- */ .sp-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2} .sp-cnt{font-size:12.5px;color:var(--sub)} .sp-x{border:none;background:transparent;color:var(--sub);cursor:pointer;font-size:14px;padding:2px 7px;border-radius:6px} .sp-x:hover{background:var(--hov);color:var(--tx)} .sp-doc{display:block;position:relative;padding:8px 10px 6px 31px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)} .sp-doc:hover{background:var(--hov)} .sp-ttl{font-weight:700;font-size:13.5px;cursor:pointer;line-height:1.55;word-break:break-word} .sp-ttl:hover{color:var(--acc)} .sp-n{font-size:11px;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);border-radius:8px;padding:0 6px;margin-left:6px;vertical-align:1px;font-weight:400} .sp-path{font-size:11.5px;color:var(--sub);margin:2px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sp-line{font-size:12.5px;color:var(--tx);line-height:1.65;cursor:pointer;padding:2px 5px;border-radius:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word} .sp-line:hover{background:var(--hov)} .sp-line mark,.sp-ttl mark{background:#ffe58a;color:inherit;padding:0 1px;border-radius:3px} html[data-theme=dark] .sp-line mark,html[data-theme=dark] .sp-ttl mark{background:#5c4a12;color:inherit} .sp-more{font-size:12px;color:var(--acc);cursor:pointer;padding:3px 5px 1px;user-select:none} .sp-more:hover{text-decoration:underline} .sp-pp{color:var(--sub);font-size:11px;margin-right:4px} /* 键盘上下键当前选中的结果行（幕布同款：底纹 + 左侧强调条） */ .sp-ttl.sp-on,.sp-line.sp-on{background:var(--hov);box-shadow:inset 2px 0 0 var(--acc)} .sp-ttl.sp-on{color:var(--acc)} /* 搜索结果按文件夹分组的小标题:整条路径 + 这一组有几篇 */ .sp-grp{display:flex;align-items:center;gap:6px;padding:7px 10px 5px;font-size:12px;font-weight:700;color:var(--sub);background:var(--panel);border-bottom:1px solid var(--line);word-break:break-all;line-height:1.5} .sp-gi{color:var(--acc);font-size:11px;flex:0 0 auto} .sp-gn{margin-left:auto;font-weight:400;font-size:11px;color:var(--sub);flex:0 0 auto;white-space:nowrap} /* 幕布同款:每条结果左边一个文档图标,整行悬停变浅灰 */ .sp-dico{position:absolute;left:10px;top:11px;width:15px;height:15px;color:var(--sub);pointer-events:none} .sp-dico .ico{width:15px;height:15px;display:block} /* 搜索中 / 暂无结果 */ .sp-spin{display:flex;align-items:center;justify-content:center;gap:8px;padding:30px 10px;color:var(--sub);font-size:12.5px} .sp-spin i{width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;display:inline-block;animation:sp-spin .7s linear infinite} @keyframes sp-spin{to{transform:rotate(360deg)}} /* 空状态:最近搜索 / 标签 的词条 —— 长相**照抄站内行内代码块**(`.mtext code`)。 v3.147:业主口径「最近搜索和标签的词条都改成跟代码块一样的」= 浅蓝底 + 4px 小圆角 + 等宽字体 + 无描边;和页内搜索里的历史词(`[data-lhq]`)用同一套值,别只改一边。 */ .sp-sec{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 4px;font-size:12.5px} .sp-sec b{font-weight:700;color:var(--sub)} .sp-lnk{background:none;border:none;color:var(--sub);font-size:12px;cursor:pointer;font-family:inherit;padding:0} .sp-lnk:hover{color:var(--acc)} .sp-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 10px} .sp-chip{border:0;border-radius:4px;background:color-mix(in srgb,var(--acc2) 70%,transparent);color:var(--tx);padding:1px 6px;font-size:12.5px;line-height:18px;cursor:pointer;font-family:ui-monospace,Consolas,"Courier New",monospace;white-space:nowrap} .sp-chip:hover{background:var(--acc2);color:var(--acc)} .sp-chip.sp-on{background:var(--acc2);color:var(--acc);font-weight:600} .sp-acts{display:flex;gap:2px;flex:0 0 auto} /* 结果行上的「命中标签」小标 */ .sp-tags{margin:1px 0 2px} .sp-tg{display:inline-block;font-size:11px;color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);border-radius:9px;padding:0 7px;margin-right:5px;line-height:1.7} .mrow.msel{background:var(--sel)} .mrow.msel .mtext{color:var(--tx)} /* ★v3.284：拖动时**不再切 user-select**（那一下要给整棵子树重算样式，2168 行 272ms）； 划选改由 JS 的 `selectstart` 拦住（多选态才拦），零样式成本。 */ body.dragmsel{cursor:default} /* ★v3.284：手机上**静态**禁掉长按选字 / 放大镜 —— 规则烧在样式表里，加载时算一次，之后不再切。 （以前是运行时给 #mlist 挂 sellock，一进多选就卡 1 秒；现在这条规则一直都在，进出多选零成本。） */ @media (pointer:coarse){ #mlist .mrow,#nbList .mrow{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} } #mlist.sellock,#nbList.sellock{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .mmeta .dtag{color:var(--acc);cursor:pointer;border:1px solid var(--line);border-radius:5px;padding:0 5px;background:var(--panel)} .mmeta .dtag:hover{background:var(--acc2);border-color:var(--acc)} body.rp1 #mlist .mtext{line-height:2.05} body.rp2 #mlist .mtext{line-height:2.6} html.phone #mlist .mtext{font-size:16.5px;line-height:1.8} /* 手机上正文和编辑框字号都不小于 16.5px：iOS 一旦聚焦小于 16px 的输入框就会自己把页面放大 */ html.phone #mlist .medit{font-size:16.5px} html.phone #mlist .medit.h1{font-size:22px} html.phone #mlist .medit.h2{font-size:19px} html.phone #mlist .medit.h3{font-size:17px} html.phone #mlist .mtri:not(.leaf){opacity:1} html.phone #mlist .mkm{opacity:.7;padding:8px 7px;font-size:15px} html.phone #mlist .mnl{opacity:.7;padding:8px 7px;font-size:16px} #mlist.ro .mtri:not(.leaf){opacity:.55} #mlist.ro .mrow:hover .mtri:not(.leaf){opacity:1} .mmeta .dcat{color:var(--sub);cursor:pointer;padding:0 3px;border-radius:4px} .mmeta .dcat:hover{background:var(--acc2);color:var(--acc)} .mmeta .csep{opacity:.45;margin:0 1px} .mmeta .cnone{opacity:.45} #toc .ti.on{background:var(--acc2);color:var(--acc);font-weight:700} #toc .ti{border-left:2px solid transparent} #toc .ti.on{border-left-color:var(--acc)} .chips button.on{background:var(--acc);border-color:var(--acc);color:#fff} .pcth{font-size:11px;color:var(--sub);border:1px solid var(--line);border-radius:10px;padding:0 7px;margin-left:6px} .contsec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px} .contsec h4{font-size:13px;color:var(--sub);font-weight:600;margin-bottom:8px} .contsec .ci{display:flex;gap:8px;align-items:center;padding:5px 6px;border-radius:7px;cursor:pointer;font-size:13.5px} .contsec .ci:hover{background:var(--acc2)} .contsec .ci .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .contsec .ci .cp{color:var(--sub);font-size:11px;flex:0 0 auto} /* v3.219：首页「新鲜内容」两块并排（宽屏两栏，窄屏自动折成上下） */ .hfrow{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap;align-items:flex-start} .hfrow>.contsec{flex:1 1 320px;min-width:260px;margin-bottom:0} .bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;flex:0 0 60px} .bar i{display:block;height:100%;background:var(--acc)} .noteitem{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.7} .noteitem:last-child{border-bottom:none} .noteitem .ntx{flex:1;min-width:0;word-break:break-word} .noteitem .nmeta{color:var(--sub);font-size:11px;margin-top:2px} .noteitem .nmeta a{color:var(--acc);cursor:pointer;text-decoration:underline} .notegrp{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px 8px;margin-bottom:12px} .notegrp .gh{font-size:13px;font-weight:700;padding:8px 6px 4px;color:var(--tx)} /* 文内标签区：独立分区 + 可收起 */ #tagpanel{background:var(--side);border:1px solid var(--tgl);border-radius:10px;margin:0 0 12px} #tagpanel .tgbar{display:flex;gap:8px;align-items:center;padding:7px 10px;cursor:pointer;user-select:none;border-radius:10px} #tagpanel .tgbar:hover{background:var(--acc2)} #tagpanel .tgcar{width:13px;height:13px;flex:0 0 13px;color:var(--sub);background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .16s ease} #tagpanel.closed .tgcar{transform:rotate(-90deg)} #tagpanel .tgbar:hover .tgcar{color:var(--acc)} #tagpanel .tgtitle{font-size:12.5px;font-weight:700;color:var(--tx)} #tagpanel .tgsum{font-size:12px;color:var(--sub)} #tagpanel .tgright{margin-left:auto;display:flex;gap:6px;align-items:center} #tagpanel .tgbody{display:flex;flex-wrap:wrap;gap:0 18px;padding:0 10px 9px;border-top:1px solid var(--tgl)} #tagpanel.closed .tgbody{display:none} #tagpanel .tgsec{flex:1 1 300px;min-width:0;padding-top:8px} #tagpanel .tgsec+.tgsec{border-left:1px solid var(--tgl);padding-left:18px;flex:2 1 420px} #tagpanel .tgh{font-size:11px;color:var(--sub);margin:0 0 7px} #tagpanel .tgr{display:flex;flex-wrap:wrap;gap:6px;align-items:center} @media(max-width:760px){#tagpanel .tgsec+.tgsec{border-left:0;padding-left:0}html.phone #tagpanel .tgcar{width:16px;height:16px;flex:0 0 16px}} /* 正文顶部的「只看某标签」提示条 */ .tfbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--acc2);border:1px solid var(--line);border-radius:9px;padding:6px 10px;margin:0 0 10px;font-size:12.5px;color:var(--tx)} .tfbar b{color:var(--acc);font-weight:700} /* 进入主题（照幕布：点主题前的圆点钻进去，整页只看这一条和它的下级） */ .zbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--acc2);border:1px solid var(--line);border-radius:9px;padding:6px 10px;margin:0 0 10px;font-size:12.5px;color:var(--tx)} .zbar .zx{cursor:pointer;color:var(--acc);font-weight:700;white-space:nowrap} .zbar .zcrumb{cursor:pointer;color:var(--acc);border-bottom:1px dashed color-mix(in srgb,var(--acc) 45%,transparent);max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .zbar .zcrumb:hover{background:color-mix(in srgb,var(--acc) 14%,transparent)} .zbar .zsep{color:var(--sub)} .zbar .zcur{font-weight:600;max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .zbar .ztip{color:var(--sub);margin-left:auto;font-size:11.5px} html.phone .zbar .ztip{display:none} .mbullet.zoomb{cursor:pointer} .mbullet.zoomb .bd{cursor:pointer} .mbullet.zoomb:hover .bd{background:var(--acc2)} #mlist .mrow.mzoom>.minner>.mtext{font-weight:600} body.share #tree,body.share #chead,body.share #mask,body.share #prog{display:none!important} body.share #content{height:100vh} .shhd{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:4px} .shttl{font-size:22px;font-weight:700} .shsub{color:var(--sub);font-size:12px;margin-top:4px} .r.locked .x{user-select:none} #shtree{max-width:900px} /* v3.186：分享正文页的垂直引线 + 圆点照大站正文（#mlist .mgl / .mbullet 那一套）。 ①.gml 每层一格，行与行之间补 4px 不留缝（大站正文是 -2px，这里 .r 的 padding 大一点） ②圆点：叶子实心 6px（原来 4px、透明度 .75）；有下级的行多一圈浅环，跟大站正文的父级圆点一致 */ #shtree .gl::before{top:-4px;bottom:-4px} #shtree .b::before{width:6px;height:6px;opacity:1} #shtree .b.bring::before{box-shadow:0 0 0 4px var(--line)} /* 文件夹分享页(#/sf/):一列篇目,点一篇进那一篇的独立只读页 */ #sflist{max-width:900px} .sfrow{display:flex;align-items:baseline;gap:10px;padding:10px 11px;border-bottom:1px solid var(--line);cursor:pointer} .sfrow:hover{background:var(--hov)} .sfrow .sfn{flex:1;min-width:0;font-size:14px} .sfrow .sfm{color:var(--sub);font-size:12px;white-space:nowrap} /* v3.183：文件夹分享页改成「文件夹 + 文件」的树（原来是一个压平的长列表，业主实报「我要的是跟大站目录一样」） */ .sfbar{display:flex;align-items:center;gap:6px;margin:12px 0 8px} .sfbar #sfq{flex:1;min-width:0;margin:0} .sfr{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px} .sfr:hover{background:var(--hov)} .sfr .sft{width:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sub);font-size:0;transition:transform .16s ease} .sfr .sft::before{content:'';display:block;width:11px;height:11px;background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .sfr .sft.closed{transform:rotate(-90deg)} .sfr .sft.leaf{visibility:hidden} .sfr .sfnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sfr.fd .sfnm{font-weight:600} .sfr .sfm{color:var(--sub);font-size:12px;white-space:nowrap} /* v3.186：文件夹分享页补「大站左栏目录」同款垂直引线（每层一个 .tt 格子 + nn 收线）。 ★这里比左栏多一条 top/bottom:-7px —— 分享页每行 padding 是 7px，不补就成一条条虚线。 */ .sfr .tt{position:relative;align-self:stretch;flex:0 0 14px;width:14px;min-width:14px} .sfr .tt::before{content:'';position:absolute;left:6px;top:-7px;bottom:-7px;border-left:1px solid var(--tgl)} .sfr .tt.nn::before{display:none} .shback{display:inline-block;margin:0 0 10px;cursor:pointer;color:var(--acc)} /* ---------- 后台「会员与用户管理」面板（v3.141：做大做精致） ---------- */ /* 弹层容器默认只有 560px 宽，这个面板要更宽：:has() 选到它再放宽（内容不再被裁掉） */ .ovlbox:has(.um-shell){width:min(980px,95vw);max-height:82vh} .um-shell{width:100%} .um-tabs{display:flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:13px;background:var(--side)} .um-tab{flex:1 1 0;min-width:0;width:100%;height:36px;border:0;background:transparent;color:var(--sub);font-size:13.5px;border-radius:10px;cursor:pointer;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .um-tab:hover{background:var(--hov);color:var(--tx)} .um-tab.on{background:var(--acc);color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.14)} .um-stats{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 12px} .um-chip{display:flex;align-items:baseline;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)} .um-chip b{font-size:20px;font-weight:700;line-height:1} .um-chip span{font-size:11.5px;color:var(--sub)} .um-q{width:100%;box-sizing:border-box;height:38px;padding:0 13px;margin:0 0 14px;font-size:13.5px;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--tx)} .um-q:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc2)} .um-row{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;margin-bottom:9px;background:var(--bg);transition:border-color .15s,box-shadow .15s} .um-row:hover{border-color:var(--acc);box-shadow:0 3px 14px rgba(0,0,0,.07)} .um-av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,#8a94a6,#5f6b7d);text-transform:uppercase} .um-av.mem{background:linear-gradient(135deg,#f7c948,#e08b00)} .um-av.ban{background:linear-gradient(135deg,#e35d5d,#b93b3b)} .um-nm{flex:1;min-width:0} .um-nm b{font-size:14px} .um-sub{font-size:11.5px;color:var(--sub);margin-top:3px} .um-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600} .um-pill.mem{background:#fff4d6;color:#996a00} .um-pill.free{background:var(--hov);color:var(--sub)} .um-pill.ban{background:#ffe3e3;color:#c92a2a} [data-theme=dark] .um-pill.mem{background:#3b2f12;color:#e8c268} [data-theme=dark] .um-pill.ban{background:#3d1f1f;color:#ff8787} .um-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .um-acts .mini{height:29px;padding:0 11px;font-size:12.5px;border-radius:9px} .um-pay{display:flex;gap:13px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:13px;margin-bottom:9px;background:var(--bg)} .um-pay:hover{border-color:var(--acc);box-shadow:0 3px 14px rgba(0,0,0,.07)} .um-pay img{width:94px;height:120px;object-fit:cover;border-radius:11px;border:1px solid var(--line);cursor:zoom-in;flex:0 0 94px} .um-code{display:flex;gap:11px;align-items:center;padding:10px 13px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:var(--bg)} .um-code:hover{border-color:var(--acc)} .um-code code{flex:1;min-width:0;user-select:all;font-size:14.5px;letter-spacing:1.2px;font-weight:600} .um-empty{padding:30px 12px;text-align:center;color:var(--sub);font-size:13px} /* 「我的笔记」的标签（v3.154）：左栏那一节里的标签条 + 行尾的小标签。 词条长相直接复用搜索面板那套 .sp-chip（v3.150~152 定的：浅蓝底 + 4px 圆角 + 等宽 + 无描边）， 所以这里只压小字号，不另起一套样式。 */ #nbtagbar{display:flex;flex-wrap:wrap;gap:5px;padding:2px 8px 7px;align-items:center} #nbtagbar .sp-chip{font-size:11.5px;line-height:16px} #nbtagbar .nbtgmore{font-size:11px;color:var(--sub);cursor:pointer;padding:0 4px} #nbtagbar .nbtgmore:hover{color:var(--acc)} .nbpriv .nbtgs{display:inline-flex;gap:3px;flex:none;margin-left:4px;max-width:96px;overflow:hidden} .nbpriv .nbtgs i{font-style:normal;font-size:10.5px;line-height:15px;padding:0 4px;border-radius:3px; background:color-mix(in srgb,var(--acc2) 70%,transparent);color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px} /* 「我的笔记」行尾的阅读进度（v3.155）：注意不能用 .ct —— 那条被 `.tnode .ct{display:none}` 全局藏了 */ .nbpriv .nbpct{font-size:10.5px;line-height:15px;color:var(--acc);flex:none;margin-left:4px;white-space:nowrap} /* 笔记树里「跳过去闪一下」（v3.156）：主站那套 .flash 只给 .r / .mrow 写过，.tnode 没有，这里补一条 */ .tnode.flash{background:var(--sel)!important;box-shadow:inset 0 0 0 2px var(--acc);border-radius:6px} /* 「我的笔记」清单页（v3.155）：点「我的笔记」这几个字进去；分类/标签胶囊复用主站首页那套 */ .nbpriv-lbl .nbhome{cursor:pointer;border-radius:6px;padding:0 3px;white-space:nowrap;flex:0 0 auto} .nbpriv-lbl .nbhome:hover{background:rgba(138,92,246,.16)} #nbOverlay{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column} #nbOverlay.hide{display:none!important} #nbHead{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel)} #nbHead .nb-logo{font-weight:700;font-size:16px} #nbSave{font-size:12px;color:var(--sub)} #nbBody{flex:1;display:flex;min-height:0} #nbSide{width:280px;flex:0 0 280px;border-right:1px solid var(--line);background:var(--side);display:flex;flex-direction:column;min-height:0} #nbSideBar{padding:9px 10px 7px;display:flex;gap:4px;align-items:center} #nbSideBar input{flex:1;min-width:0;border:1px solid transparent;background:var(--hov);border-radius:6px;font-size:13px;padding:6px 9px;color:var(--tx)} #nbSideBar input:hover{background:var(--line)} #nbSideBar input:focus{outline:none;background:var(--bg);border-color:var(--acc)} #nbSideBar .nbadd{width:28px;height:28px;flex:0 0 28px;padding:0;border:1px solid transparent;background:transparent;border-radius:6px;font-size:15px;line-height:1;color:var(--sub);display:flex;align-items:center;justify-content:center;cursor:pointer} #nbSideBar .nbadd:hover{color:var(--acc);border-color:var(--acc)} #nbSideBar .nbadd.danger:hover{color:var(--danger);border-color:var(--danger)} #nbTree{flex:1;overflow:auto;padding:2px 6px 20px} #nbSide .tnode[data-nbf] .nm{font-weight:600} #nbSide .tnode[data-nbdoc]:not(.on) .nm{color:var(--sub)} .nb-frow,.nb-drow{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13.5px;user-select:none;color:var(--tx);position:relative} .nb-frow:hover,.nb-drow:hover{background:var(--hov)} .nb-frow.on{background:var(--sel)} .nb-frow .nm,.nb-drow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nb-fops{display:none;gap:2px} .nb-frow:hover .nb-fops,.nb-drow:hover .nb-fops{display:flex} .nb-fops span{cursor:pointer;font-size:12px;color:var(--sub);padding:0 3px;border-radius:4px} .nb-fops span:hover{color:var(--acc);background:var(--acc2)} .nb-car{width:14px;flex:0 0 14px;text-align:center;color:var(--sub);font-size:10px} .nb-drow.drop,.nb-frow.drop{outline:2px dashed var(--acc);outline-offset:-2px} #nbEdit{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0} #nbTitleBar{display:flex;align-items:center;gap:10px;padding:10px 18px 4px} #nbTitle{flex:1;border:1px solid transparent;background:transparent;font-size:20px;font-weight:700;padding:6px 8px;border-radius:8px} #nbTitle:hover,#nbTitle:focus{border-color:var(--line);background:var(--panel)} #nbBar{display:flex;flex-wrap:wrap;gap:4px;padding:6px 18px;border-bottom:1px solid var(--line);position:relative;background:var(--panel)} #nbBar button{border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 8px;font-size:13px;color:var(--tx)} #nbBar button:hover{background:var(--hov);border-color:var(--line)} #nbBar button.on{background:var(--acc2);color:var(--acc);border-color:var(--acc)} #nbRows{flex:1;overflow:auto;padding:14px 40px 120px}#nbEdWrap{flex:1;overflow:auto;padding:12px 10px 120px 62px;min-width:0}#nbEdWrap .mtitle{max-width:920px}#nbEdWrap .mtip{margin-top:26px}#nbHead .mgrp>button{border:1px solid var(--line)} .nb-row{display:flex;align-items:flex-start;gap:4px;border-radius:6px;position:relative} .nb-row:hover{background:var(--hov)} .nb-gut{display:flex;align-items:center;gap:2px;flex:0 0 auto;padding-top:3px} .nb-hd{cursor:grab;color:var(--sub);font-size:12px;padding:0 2px;user-select:none;visibility:hidden} .nb-row:hover .nb-hd{visibility:visible} .nb-bub{cursor:pointer;color:var(--sub);font-size:14px;padding:0 2px;user-select:none;visibility:hidden;line-height:22px} .nb-row:hover .nb-bub,.nb-row:focus-within .nb-bub{visibility:visible} .nb-bub:hover{color:var(--acc)} #nbselbar{position:fixed;z-index:76;display:flex;gap:2px;align-items:center;background:#2b2f36;border-radius:10px;padding:5px 6px;box-shadow:0 10px 30px rgba(0,0,0,.28)} #nbselbar button{border:1px solid transparent;background:transparent;color:#e6e8ea;border-radius:7px;padding:4px 8px;font-size:13px;min-width:28px} #nbselbar button:hover{background:#3d434c;color:#fff} #nbselbar .sb-sep{width:1px;height:16px;background:#454b54;margin:0 3px} #nbselbar .sb-sw{width:15px;height:15px;border-radius:4px;border:1px solid #555c66;cursor:pointer;display:inline-block;margin:0 1px} #nbRows .nb-t code{background:var(--acc2);border-radius:4px;padding:0 5px;font-family:ui-monospace,Consolas,monospace;font-size:.92em} .nb-arr{width:16px;flex:0 0 16px;text-align:center;cursor:pointer;color:var(--sub);font-size:11px;line-height:22px;user-select:none} .nb-arr.off{visibility:hidden} .nb-arr.nb-dot{font-size:9px;opacity:.6} .nb-chk{width:15px;height:15px;flex:0 0 15px;border:1.5px solid var(--sub);border-radius:3px;margin:4px 2px 0 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:transparent} .nb-chk.on{background:var(--acc);border-color:var(--acc);color:#fff} .nb-ico{flex:0 0 auto;font-size:14px;margin-right:2px} .nb-body{flex:1;min-width:0} .nb-t{outline:none;line-height:1.65;font-size:15px;word-break:break-word;min-height:24px;padding:1px 2px} .nb-t.nb-h1{font-size:22px;font-weight:700;line-height:1.4} .nb-t.nb-h2{font-size:18px;font-weight:700;line-height:1.45} .nb-t.nb-h3{font-size:16px;font-weight:600;line-height:1.5} .nb-t.done{text-decoration:line-through;color:var(--sub)} .nb-t table{border-collapse:collapse;margin:4px 0} .nb-t td{border:1px solid var(--line);padding:4px 10px;min-width:60px} .nb-t img{max-width:100%;border-radius:6px;margin:4px 0} .nb-img{margin:2px 0} .nb-img img{max-width:100%;max-height:420px;border-radius:6px;display:block} .nb-note{display:inline-flex;align-items:center;gap:3px;margin:2px 0 0 6px;font-size:12px;color:var(--sub);background:var(--hov);border-radius:6px;padding:1px 7px;cursor:pointer} .nb-ops{display:none;gap:2px;flex:0 0 auto;padding-top:2px} .nb-row:hover .nb-ops{display:flex} .nb-ops span{cursor:pointer;color:var(--sub);font-size:13px;padding:0 4px;border-radius:4px} .nb-ops span:hover{color:var(--acc);background:var(--acc2)} .nb-row.dragging{opacity:.4} .nb-row.drop-in{outline:2px dashed var(--acc);outline-offset:-2px} .nb-row.drop-before{box-shadow:0 -2px 0 var(--acc)} .nb-row.drop-after{box-shadow:0 2px 0 var(--acc)} #nbFoot{display:flex;gap:14px;padding:6px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--sub);background:var(--panel)} #nbPal{position:fixed;z-index:10001;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:8px;display:none;gap:4px;flex-wrap:wrap;max-width:240px} #nbPal.on{display:flex} #nbPal .sw{width:22px;height:22px;border-radius:6px;cursor:pointer;border:1px solid var(--line)} #nbPal .em{cursor:pointer;padding:2px 5px;border-radius:6px;font-size:16px} #nbPal .em:hover,#nbPal .sw:hover{background:var(--hov)} #nbPal .mv{cursor:pointer;padding:4px 8px;border-radius:6px;font-size:13px;white-space:nowrap} #nbPal .mv:hover{background:var(--hov)} #nbLogin{margin:auto;width:320px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px} #nbLogin h3{font-size:18px;margin-bottom:2px} #nbLogin p{font-size:12px;color:var(--sub)} #nbLogin input{width:100%} #nbClose{font-size:16px} #nbToast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:var(--tx);color:var(--bg);padding:8px 18px;border-radius:20px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:10002} #nbToast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- 文件夹目录：可整体折叠 / 手机抽屉 ---------- */ #nbSideToggle{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:3px 9px;font-size:14px;line-height:1.4;cursor:pointer;color:var(--tx);flex:0 0 auto} #nbSideToggle:hover,#nbSideToggle.on{background:var(--acc2);color:var(--acc);border-color:var(--acc)} #nbMask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:9990} #nbMask.on{display:block} #nbMain.side-hide #nbSide{display:none} #nbMain.nb-drawer #nbSide{display:none} #nbMain.nb-drawer.side-open #nbSide{display:flex;position:fixed;left:0;top:0;bottom:0;z-index:9995;width:min(78vw,300px);flex-basis:auto;border-right:1px solid var(--line);box-shadow:2px 0 18px rgba(0,0,0,.3);animation:nbSlide .18s ease} @keyframes nbSlide{from{transform:translateX(-16px);opacity:.35}to{transform:none;opacity:1}} #nbSideClose{display:none} #nbMain.nb-drawer #nbSideClose{display:flex} #nbMain.nb-drawer .nb-fops{display:flex}#nbMain.nb-drawer .tnode .del,#nbMain.nb-drawer .tnode .nf{display:inline} #nbMain.nb-drawer #nbTree{padding-bottom:60px} /* ---------- 写作区顶部编辑工具栏（可上推 / 下拉收起） ---------- */ #nbTb{flex:0 0 auto;border-bottom:1px solid var(--line);background:var(--panel);position:relative;z-index:20} #cbody>#nbTb{position:sticky;top:0;z-index:30;display:none;margin:0 0 12px;border:1px solid var(--line);border-radius:10px;overflow:hidden} #cbody>#nbTb.show{display:block} #nbTbHandle{display:flex;align-items:center;gap:8px;height:20px;padding:0 12px;cursor:ns-resize;user-select:none;-webkit-user-select:none;touch-action:none;font-size:12px;color:var(--sub)} #nbTbHandle:hover{background:var(--hov);color:var(--acc)} #nbTbHandle .hd{flex:1;display:flex;justify-content:center} #nbTbHandle .hd i{display:block;width:44px;height:3px;border-radius:2px;background:var(--line)} #nbTbHandle .caret{display:inline-block;transition:transform .2s;font-size:12px;line-height:1;font-weight:700;color:var(--tx)} #nbTb.min #nbTbHandle .caret{transform:rotate(180deg)} /* 收起来的时候别只剩一条空栏：写清楚这里能点开 */ #nbTb.min #nbTbHandle .hd i{display:none} #nbTb.min #nbTbHandle .hd::after{content:'工具栏已收起 · 点这里展开';font-size:12px;color:var(--sub)} #nbTbBody{overflow:hidden;max-height:340px;transition:max-height .2s ease,opacity .16s ease} #nbTb.min #nbTbBody{max-height:0;opacity:0} #nbTbRows{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px 0;padding:7px 8px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} @media(max-width:900px){#nbTbRows{flex-wrap:nowrap}} html.phone #nbTbRows{flex-wrap:nowrap} .tb-g{display:flex;flex-direction:column;align-items:stretch;gap:1px;padding:0 6px;border-right:none;flex:0 0 auto} .tb-g:last-child{border-right:none} .tb-g>.tbgl{font-size:9.5px;color:var(--sub);white-space:nowrap;line-height:1.3;text-align:center;opacity:.8} .tb-b{display:flex;align-items:center;gap:2px} #nbTb button{border:1px solid transparent;background:transparent;border-radius:7px;padding:4px 7px;font-size:13px;line-height:1.25;color:var(--tx);cursor:pointer;white-space:nowrap;flex:0 0 auto;font-family:inherit;font-variant-emoji:text} #nbTb button:hover{background:var(--hov);border-color:var(--line)} #nbTb button:active,#nbTb button.on{background:var(--acc2);color:var(--acc);border-color:var(--acc)} #nbTb button.dg:hover{color:#e03131;border-color:#e03131} #nbTb .sw{width:16px;height:16px;border-radius:5px;border:1px solid var(--line);cursor:pointer;display:inline-block;flex:0 0 auto;margin:0 1px} #nbTb .sw:hover{box-shadow:0 0 0 2px var(--acc2)} #nbTb.docked{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:9980;border-bottom:none;box-shadow:0 -6px 18px rgba(0,0,0,.16);padding-bottom:env(safe-area-inset-bottom)} /* 打字模式：整行固定在屏幕顶部，键盘永远盖不到它 */ #nbBig{position:fixed;left:0;right:0;top:0;z-index:10003;background:var(--panel);border-bottom:2px solid var(--acc);box-shadow:0 8px 24px rgba(0,0,0,.2);padding:6px 10px calc(10px + env(safe-area-inset-top))} #nbBig.hide{display:none} #nbBigBar{display:flex;align-items:center;gap:8px;margin-bottom:5px} #nbBigTip{flex:1;font-size:11.5px;color:var(--sub);line-height:1.35} #nbBigIn{width:100%;box-sizing:border-box;font-family:inherit;font-size:17px;line-height:1.6;color:var(--tx);background:var(--bg);border:1.5px solid var(--acc);border-radius:10px;padding:9px 12px;resize:none;outline:none} #nbBigX{border:1px solid var(--acc);background:var(--acc2);color:var(--acc);border-radius:7px;padding:4px 12px;font-size:12.5px;flex:0 0 auto} /* 手机端工具栏在加载时就固定贴底，之后聚焦任何一行都不再改动布局（改布局= iOS 立刻收键盘） */ html.phone #nbFoot{display:none} html.phone #nbEdWrap{padding-bottom:170px} @media (max-width:820px){#nbSide{width:210px;flex-basis:210px}#nbRows{padding:10px 12px 100px}#nbEdWrap{padding:10px 8px 110px 44px}#nbHead{flex-wrap:wrap;gap:6px;padding:8px 10px}#nbHead .nb-logo{font-size:15px}#nbTb button{padding:6px 8px;font-size:13.5px}#nbTbHandle{height:24px}} html.phone #nbSide{width:min(78vw,260px)}html.phone #nbRows{padding:10px 12px 110px}html.phone #nbEdWrap{padding:10px 8px 110px 52px}html.phone .nb-t{font-size:16px;line-height:1.8}html.phone .nb-bub{visibility:visible} html.phone #nbHead{flex-wrap:wrap;gap:6px;padding:8px 10px}html.phone #nbHead .nb-logo{font-size:15px}html.phone #nbHead .mgrp>button,html.phone #nbDelDoc,html.phone #nbClose{padding:6px 10px;font-size:13px} html.phone #nbTb button{padding:6px 9px;font-size:13.5px}html.phone #nbTbHandle{height:26px}html.phone #nbEdWrap .mtip{display:none} html.phone .tb-g>.tbgl{display:none}html.phone .tb-g{padding:0 4px}html.phone #nbTbBody{max-height:60px} html.phone #nbx-cat{max-width:46%}html.phone .mmeta{flex-wrap:wrap;gap:6px} /* ===== 玻璃拟态主题（笔记编辑器）：纯样式覆盖，不改任何逻辑，可整体删除回退 ===== */ #nbHead,#nbTb,#nbFoot,#nbSide{background:color-mix(in srgb,var(--panel) 66%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)} #nbHead{position:relative;z-index:9990;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.35) inset} #nbTb{border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)} #nbSide{border-right:1px solid color-mix(in srgb,var(--line) 80%,transparent)} #nbFoot{border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)} #nbTbRows{align-items:flex-start;gap:13px 0;padding:7px 8px 11px} #nbTb .tb-g{padding:0 11px;border-right:none} #nbTb .tb-g:last-child{border-right:none} #nbTb .tb-g>.tbgl{font-size:12px;font-weight:500;color:var(--sub);letter-spacing:0;opacity:.9;padding:0 2px 0 1px;align-self:auto;line-height:1.5;text-align:left} /* v3.162：业主口径「编辑工具这一块不好看，做成代码块那样的」。 原来按钮**默认透明无框**（只有 hover / 选中时才有底色），一整块灰字显得乱、也看不出哪里能点。 现在照抄站内行内代码块(`.mtext code`) / 搜索词条(`.sp-chip`)那一套： **浅蓝底 + 4px 小圆角 + 无描边 + 等宽字体**；三个状态也照那套 —— 默认浅蓝、悬停加深、选中蓝字加粗。 ★别再改回「透明 + 描边」：那正是业主这次退回来的样子。 */ #nbTb button{border:0;background:color-mix(in srgb,var(--acc2) 70%,transparent);border-radius:4px;padding:2px 7px;font-size:12.5px;line-height:18px;color:var(--tx);font-family:ui-monospace,Consolas,"Courier New",monospace;transition:background .12s ease,color .12s ease} #nbTb button:hover{background:var(--acc2);color:var(--acc);box-shadow:none} #nbTb button:active,#nbTb button.on{background:var(--acc2);color:var(--acc);font-weight:600} #nbTb button.dg:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)} #nbTb button.tb-pri{color:var(--acc);font-weight:600;background:var(--acc2)} #nbTb button.tb-pri:hover{background:var(--acc);color:#fff} #nbTb .sw{border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.28)} #nbTb.docked{background:color-mix(in srgb,var(--panel) 82%,transparent);border-top:1px solid color-mix(in srgb,var(--line) 85%,transparent);box-shadow:0 -8px 26px rgba(20,30,60,.14)} #nbHead .mgrp>button,#nbDelDoc,#nbClose{border:1px solid color-mix(in srgb,var(--line) 90%,transparent);border-radius:9px;background:color-mix(in srgb,var(--panel) 58%,transparent);transition:box-shadow .14s ease,color .14s ease,border-color .14s ease} #nbHead .mgrp>button:hover,#nbDelDoc:hover,#nbClose:hover{box-shadow:0 2px 10px rgba(20,30,60,.08)} #nbBig{background:color-mix(in srgb,var(--panel) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid color-mix(in srgb,var(--acc) 30%,transparent);box-shadow:0 10px 30px rgba(20,30,60,.16)} #nbBigIn{background:color-mix(in srgb,var(--bg) 70%,transparent);border:1.5px solid color-mix(in srgb,var(--acc) 40%,transparent);box-shadow:0 2px 12px rgba(51,112,255,.10)} [data-theme=dark] #nbTb button:hover{box-shadow:0 2px 10px rgba(0,0,0,.35)} [data-theme=dark] #nbHead{box-shadow:0 1px 0 rgba(255,255,255,.04) inset} /* ---------- 左基线统一：编辑工具栏与正文列共用同一条左边线 ---------- 正文列 #edwrap 额外留 62px 是给悬停时浮出的 ⋮ 菜单（.mgutter left:-26px）腾地方， 但工具栏 #nbTb 挂在 #cbody 上吃不到这 62px，于是它的按钮比正文左移 42px = 上下不平齐。 现在把 62px 抽成 --edgutter，工具栏按 calc(基线 - 自身内缩) 对齐； 自身内缩实测桌面与手机都是 20px（1 边框 + 8 #nbTbRows + 11 .tb-g），故两端共用一个常数即可。 */ :root{--edgutter:62px;--tbinset:20px} #edwrap{padding:10px 10px 90px var(--edgutter)} #cbody>#nbTb{margin-left:calc(var(--edgutter) - var(--tbinset));margin-right:10px} #cbody>#nbTb>#nbTbHandle{padding-left:calc(var(--tbinset) - 1px)} /* 只读态标题与元信息行原本比搜索框右移 6px（.mtitle/.mmeta 的左内边距），一并归零 */ .mtitle,.mmeta{padding-left:0} /* ---------- 手机端阅读宽度：把只读态白占的左槽收回来 ---------- 上面那 62px 的 --edgutter 是给编辑态悬停浮出的 ⋮ 菜单留的位置， 但只读态压根不渲染 .mgutter（renderEditorList 里 ro?'':…），于是前台正文 凭空右移 62px。手机屏只有 430px 宽，等于白丢 15%，读和写都挤。 现在：只读态左槽归零；编辑态在手机上压到 34px（⋮ 实测 30px 宽，left:-30 放得下）。 工具栏 #nbTb 走的是同一个变量，会自动跟着对齐，不用再单独伺候。 */ #edwrap.ro{--edgutter:0px} html.phone{--edgutter:12px} /* 手机上没有那个悬停出现的 ⋮ 按钮了，左边这条空白收掉，正文多出 20 多像素 */ html.phone .mgutter{left:-30px} /* 行首「折叠三角 + 圆点」在手机上是 24+24=48px，收窄到 20+20；层级引导线同步跟 */ html.phone #mlist .mgl{flex:0 0 16px;width:16px} html.phone #mlist .mgl::before{left:7px} html.phone #mlist .mrow{margin:1px 0} html.phone #mlist .mgl::before{left:9px} html.phone #mlist .mtri{width:20px;flex:0 0 20px} /* 手机上把"展开/收起"的三角挪到整行最右边（和你要的那张图一样），左边不再占位 */ html.phone #mlist .minner .mtri{order:9;margin-left:2px;margin-right:4px} html.phone #mlist .mbullet{width:20px;flex:0 0 20px} /* 正文列本身离屏幕边距也从 14 收到 10，再挤出 8px */ html.phone #cbody{padding:14px 10px 90px;padding-bottom:calc(90px + env(safe-area-inset-bottom))} html.phone #cbody.hasTb{padding-top:0} /* ===== 手机端「加宽档」（v3.181 引入 · v3.293 改形） ===== 业主原话（v3.181）：「正文底下有一条滑动条，左右滑动的时候正文内容会跟着变化，这样就能解决空间太窄的问题； 空间为什么太窄就是因为左右有图标按钮占据了，把这些图标按钮滑到后面去不就有空间了吗」。 业主原话（v3.293）：「把底下那一条去掉，把这个功能变成一个按钮放在顶部的视图里」—— 于是 #panbar 那条常驻滑动条**整块删掉**（下面这些「加宽档让位」的规则照旧生效）， 开关改到「视图 ▾」和「编辑工具」那一行右端各一个按钮（JS 见 panwToggle / panwPaint）。 加宽档让位的东西：行尾「⋯」操作区 + 阅读记录的数字 + **每级缩进 16px → 7px**（缩进才是深层行的大头）。 ★左边那个圆点和折叠三角**故意不动** —— 收走就没法折叠、没法「进入主题」，大纲就等于不能用了； 这一点和业主原话（"左右都有"）不同，属于有意为之。 */ #nbTbHandle .tbpw{margin-left:auto;flex:0 0 auto;border:0;border-radius:6px;padding:4px 8px;cursor:pointer; background:color-mix(in srgb,var(--acc2) 78%,transparent);color:var(--tx);font-family:inherit;font-size:11.5px; line-height:1.1;letter-spacing:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #nbTbHandle .tbpw:hover{background:var(--acc2);color:var(--acc)} #nbTbHandle .tbpw.on{background:var(--acc);color:#fff;font-weight:600} /* 电脑版不显示它：加宽那一套（让出行尾按钮 / 缩进收窄）全挂在 html.phone 上，电脑上按了也不会有变化 */ html:not(.phone) #nbTbHandle .tbpw{display:none} /* 加宽档：把行尾占地方的按钮整块让出去，正文立刻拿到这部分宽度 */ html.phone.panw #mlist .mrowact,html.phone.panw #mlist .rdbtn, html.phone.panw #mlist .mvbtn,html.phone.panw #mlist .mkm,html.phone.panw #mlist .mnl{display:none!important} html.phone.panw #mlist .mgl{flex:0 0 7px;width:7px} html.phone.panw #mlist .mgl::before{left:3px} html.phone.panw #cbody{padding-left:6px;padding-right:6px} /* ★v3.331（业主要求）：名字显示两态 —— 默认单行省略（原样不动） ⇄ html.nmfull 时多行全显示。 只加规则，不改任何原有选择器；开关打开后文件夹名、文档名都看得到全称，行高由内容自己撑开。 */ html.nmfull .tnode{align-items:flex-start} html.nmfull .tnode .nm{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;overflow-wrap:anywhere;line-height:1.45;padding:1px 0} html.nmfull .tnode .car,html.nmfull .tnode .ic,html.nmfull .tnode .del,html.nmfull .tnode .pin,html.nmfull .tnode .ct,html.nmfull .tnode .st,html.nmfull .tnode .bxc{margin-top:1px} /* 顺手让搜索面板、面包屑、我的笔记目录也一起放开，一处开关全局一致 */ html.nmfull .frow,html.nmfull .sfr,html.nmfull .nb-frow,html.nmfull .nb-drow{align-items:flex-start} html.nmfull .frow .nm,html.nmfull .sfr .sfnm,html.nmfull .nb-frow .nm,html.nmfull .nb-drow .nm{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;overflow-wrap:anywhere;line-height:1.45} /* 开关按钮的"已打开"态 */ #nmBtn.on,#nmBtn2.on{color:var(--acc)} #nmBtn.on{background:var(--acc2)} /* ===== v3.356 字体选项补全 ===== ① 新增方正三款（黑体 / 书宋 / 仿宋，方正官方免费商用那四款里的三款）； ② 顺手修一个旧 bug：wenkai/neohei/smiley/zcool* 六款当初只加了按钮和字体文件， **忘了写 CSS 规则** —— 所以选了那六款正文其实一直没变。这里一并补上。 */ body.ff-wenkai #otree,body.ff-wenkai #toc,body.ff-wenkai #mlist,body.ff-wenkai .mtitle,body.ff-wenkai #cbody,body.ff-wenkai #nbOverlay{font-family:"SiteWenKai","LXGW WenKai","Kaiti SC","STKaiti",KaiTi,"楷体",serif} body.ff-neohei #otree,body.ff-neohei #toc,body.ff-neohei #mlist,body.ff-neohei .mtitle,body.ff-neohei #cbody,body.ff-neohei #nbOverlay{font-family:"SiteNeoXiHei","LXGW Neo XiHei","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif} body.ff-smiley #otree,body.ff-smiley #toc,body.ff-smiley #mlist,body.ff-smiley .mtitle,body.ff-smiley #cbody,body.ff-smiley #nbOverlay{font-family:"SiteSmiley","Smiley Sans","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif} body.ff-zcoolxw #otree,body.ff-zcoolxw #toc,body.ff-zcoolxw #mlist,body.ff-zcoolxw .mtitle,body.ff-zcoolxw #cbody,body.ff-zcoolxw #nbOverlay{font-family:"SiteZcoolXiaoWei","ZCOOL XiaoWei","Kaiti SC",KaiTi,"楷体",serif} body.ff-zcoolqk #otree,body.ff-zcoolqk #toc,body.ff-zcoolqk #mlist,body.ff-zcoolqk .mtitle,body.ff-zcoolqk #cbody,body.ff-zcoolqk #nbOverlay{font-family:"SiteZcoolQingKe","ZCOOL QingKe HuangYou","Kaiti SC",KaiTi,"楷体",serif} body.ff-zcoolkl #otree,body.ff-zcoolkl #toc,body.ff-zcoolkl #mlist,body.ff-zcoolkl .mtitle,body.ff-zcoolkl #cbody,body.ff-zcoolkl #nbOverlay{font-family:"SiteZcoolKuaiLe","ZCOOL KuaiLe","PingFang SC","MiSans","Microsoft YaHei",sans-serif} body.ff-fzhei #otree,body.ff-fzhei #toc,body.ff-fzhei #mlist,body.ff-fzhei .mtitle,body.ff-fzhei #cbody,body.ff-fzhei #nbOverlay{font-family:"SiteFzHei","FZHei-B01S","方正黑体简体","PingFang SC","Microsoft YaHei",sans-serif} body.ff-fzsong #otree,body.ff-fzsong #toc,body.ff-fzsong #mlist,body.ff-fzsong .mtitle,body.ff-fzsong #cbody,body.ff-fzsong #nbOverlay{font-family:"SiteFzSong","FZShuSong-Z01S","方正书宋简体",Songti SC,SimSun,"宋体",serif} body.ff-fzfs #otree,body.ff-fzfs #toc,body.ff-fzfs #mlist,body.ff-fzfs .mtitle,body.ff-fzfs #cbody,body.ff-fzfs #nbOverlay{font-family:"SiteFzFs","FZFangSong-Z02S","方正仿宋简体",FangSong,"仿宋",serif} body.tfwenkai #tree,body.tfwenkai #nbTree{font-family:"SiteWenKai","LXGW WenKai","Kaiti SC","STKaiti",KaiTi,"楷体",serif} body.tfneohei #tree,body.tfneohei #nbTree{font-family:"SiteNeoXiHei","LXGW Neo XiHei","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif} body.tfsmiley #tree,body.tfsmiley #nbTree{font-family:"SiteSmiley","Smiley Sans","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif} body.tfzcoolxw #tree,body.tfzcoolxw #nbTree{font-family:"SiteZcoolXiaoWei","ZCOOL XiaoWei","Kaiti SC",KaiTi,"楷体",serif} body.tfzcoolqk #tree,body.tfzcoolqk #nbTree{font-family:"SiteZcoolQingKe","ZCOOL QingKe HuangYou","Kaiti SC",KaiTi,"楷体",serif} body.tfzcoolkl #tree,body.tfzcoolkl #nbTree{font-family:"SiteZcoolKuaiLe","ZCOOL KuaiLe","PingFang SC","MiSans","Microsoft YaHei",sans-serif} body.tffzhei #tree,body.tffzhei #nbTree{font-family:"SiteFzHei","FZHei-B01S","方正黑体简体","PingFang SC","Microsoft YaHei",sans-serif} body.tffzsong #tree,body.tffzsong #nbTree{font-family:"SiteFzSong","FZShuSong-Z01S","方正书宋简体",Songti SC,SimSun,"宋体",serif} body.tffzfs #tree,body.tffzfs #nbTree{font-family:"SiteFzFs","FZFangSong-Z02S","方正仿宋简体",FangSong,"仿宋",serif} /* ================= ★v3.359 排序与筛选（左侧「⇅ 排序」面板） ================= */ #sfPanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9990;width:min(460px,calc(100vw - 20px));max-height:min(78vh,620px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 56px rgba(0,0,0,.28);overflow:hidden} .sfh{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px;flex:0 0 auto} .sfx{cursor:pointer;color:var(--sub);padding:0 4px} #sfPanel .sfl{font-size:12px;color:var(--sub);padding:9px 14px 4px;display:flex;align-items:center;gap:8px;flex:0 0 auto} .sfd{margin-left:auto;cursor:pointer;color:var(--acc);font-size:12px} .sfmini{cursor:pointer;color:var(--acc);font-size:11px;border:1px solid var(--acc);border-radius:8px;padding:0 6px;line-height:16px} .sfnote{padding:0 14px 5px;font-size:11px;color:var(--sub);opacity:.85;flex:0 0 auto} #sfPanel .sfb{padding:0 14px 6px;display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto} .sfc{border:1px solid var(--line);background:transparent;color:inherit;border-radius:9px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit} .sfc.on{border-color:var(--acc);color:var(--acc);font-weight:700} .sfc.pri{background:var(--acc);color:#fff;border-color:var(--acc)} .sfsc{overflow:auto;max-height:210px;min-height:60px;padding:0 10px 6px;display:flex;flex-direction:column;gap:1px;flex:1 1 auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .sfki{display:flex;align-items:center;gap:7px;padding:5px 4px;border-radius:7px;cursor:pointer;font-size:12.5px} .sfki:hover{background:rgba(128,128,128,.12)} .sfki.on{color:var(--acc);font-weight:600} .sfki input{flex:0 0 auto;margin:0} .sfki span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sff{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);flex:0 0 auto} .sff .sfc{flex:1;padding:8px 10px;text-align:center} /* 行内星标：重要程度 */ .dstar{flex:0 0 auto;font-size:11px;color:var(--sub);opacity:0;cursor:pointer;padding:0 2px;letter-spacing:-.5px} .tnode:hover .dstar{opacity:.55} .dstar.on{opacity:1;color:#e8a320;font-weight:600} html.phone .dstar{opacity:.45} html.phone .dstar.on{opacity:1} /* ================= ★v3.360 平铺模式：解构后的独立条目 ================= */ .frow .nm{flex:1 1 auto;min-width:0} .fpath{flex:0 1 auto;max-width:46%;font-size:10.5px;color:var(--sub);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dstar.dim{opacity:.45;color:var(--sub);font-size:10px;font-weight:400} .flatmeta{padding:1px 9px 7px;font-size:11px;color:var(--sub);opacity:.82} .flatmore{margin:8px 6px 16px;padding:9px;text-align:center;font-size:12px;color:var(--acc);border:1px dashed var(--acc);border-radius:9px;cursor:pointer} .flatmore:hover{background:rgba(128,128,128,.1)} .flatscope{display:flex;align-items:center;gap:8px;margin:2px 8px 6px;padding:5px 8px;font-size:11.5px;background:rgba(128,128,128,.13);border-radius:8px} .flatscope span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .flatscope b{flex:0 0 auto;cursor:pointer;color:var(--acc);font-weight:400} /* ================= ★v3.361 主题重要程度面板 ================= */ .tphint{padding:0 2px 10px;font-size:12px;color:var(--sub);line-height:1.65} .tphint b{color:var(--acc)} .tplist{max-height:min(60vh,500px);overflow:auto;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .tprow{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid var(--line)} .tprow:last-child{border-bottom:none} .tprow:hover{background:rgba(128,128,128,.10)} .tpnm{flex:1 1 auto;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tprow .dstar{opacity:.6;cursor:pointer;font-size:12px;flex:0 0 auto} .tprow .dstar.on{opacity:1} .flatclear{color:var(--acc);cursor:pointer;font-weight:400} /* ★v3.362 范围列表：文件夹图标（照左栏的样子） */ .sfki .sfld{flex:0 0 auto;opacity:.72;font-size:13px} /* ================= ★v3.363 筛选面板加大 + 文件夹树折叠 ================= */ #sfPanel{max-height:min(90vh,760px)} #sfPanel .sftags{max-height:80px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;align-content:flex-start} #sfPanel .sfsc{max-height:none;min-height:190px;flex:1 1 auto} .sfcar{flex:0 0 12px;width:12px;text-align:center;font-size:10px;color:var(--sub);cursor:pointer;opacity:.85;line-height:1} .sfcar.ph{visibility:hidden;cursor:default} .sfcar.open{transform:rotate(90deg)} #sfPanel .sfki{gap:5px} /* ★v3.363c 折叠箭头放大一点（原来像个点） */ .sfcar{font-size:12px;font-weight:700;color:var(--sub);opacity:1} .sfcar.open{transform:rotate(90deg);color:var(--acc)}