/* ═══════════════════════════════════════════════════════════════ 鲸御舰 · 轻拟物设计系统 v2（全局改造设计方案 v2 · P1 材质层） 唯一令牌真源：所有色彩/阴影/圆角/动效令牌单点定义于此。 组件禁止手写 rgba / !important；透明度一律引用 --ac-*/--nk-* 阶梯。 本文件由 desktop.php 内联样式全量抽离重写（去玻璃/去覆盖层/去死代码）。 ═══════════════════════════════════════════════════════════════ */ /* ── 字体：拉丁 Play + 中文品牌体 TeZhan（汉仪长宋简）。 TeZhan 文件原部署在 ../../Fonts/（不存在），全站 13 处 font-family 一直静默回退； P3·v20261030 字体现已放入 assets/fonts/kesongchanggui.woff2 并接回 @font-face。 注意：全字符集 2.5MB——首访惰性下载（font-display:swap 不阻塞首屏），30 天长缓存兜底； 若首访流量敏感，后续可用 fonttools 按常用汉字子集化到 <1MB。 ── */ @font-face { font-family: 'Play'; src: url('../fonts/play-v21-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Play'; src: url('../fonts/play-v21-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'TeZhan'; src: url('../fonts/kesongchanggui.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ── 亮模式令牌 ── */ html { /* 字体方案（P3·v20261030）：后台「界面配置 → 基础设置」标题/正文字体可覆盖此变量； file: 类上传字体由 index.php 注入 @font-face（family=JYF-*） */ --jy-font-title: var(--jy-font-title, 'TeZhan'),"PingFang SC", "Microsoft YaHei", sans-serif; --jy-font-body: 'Play', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; /* 画布与面（v3 降蓝：底色偏中性冷灰，拉开与青色的色相距离，强调色不再发飘） */ --bg: #E9EDF3; --surface: #F7FAFD; --well: #E1E8F0; /* 文字四级（ink-3/4 对齐 samsara 灰阶 #758397/#8492A6，三级文字不再发蓝） */ --ink-1: #324057; --ink-2: #465573; --ink-3: #758397; --ink-4: #8492A6; /* 边框四级 */ --line-0: #BFCFE2; --line-1: #D3DCE6; --line-2: #DCE4F0; --line-3: #EFF2F7; /* 品牌强调 · 青蓝三档分工（v3：--accent 仅作填充配白字；--accent-2=UI 图标/边框 3.6:1；--accent-ink=小字 4.7:1 AA） */ --accent: #30B9C9; --accent-2: #0E8FA3; --accent-ink: #0A7A8D; --accent-tint: #D9F2F5; --accent-tint-2: #BCE9EF; --accent-3: #3FC3D1; /* 实底填充（渐变按钮/me 气泡）：深青渐变 + 填充文字色（白）；暗模式反转为浅青 + 深字 */ --accent-fill: linear-gradient(135deg, var(--accent-2), var(--accent-ink)); --accent-fill-ink: #FFFFFF; /* 分区强调色默认档（后台「界面配置」配色区可逐项覆盖，注入为 :root 内联变量） */ --wh-accent: #6FD8E4; /* 虫洞 · 暗色层强调 */ --pl-accent: #C56F24; /* 播放器 · 影视卡（暖橙，与冷界面互补） */ --dy-accent: #E0457A; /* 抖音 · 放映卡片（品红调） */ --rd-accent: #8C6D3F; /* 阅读 · 亮档（暖纸青铜） */ --rd-accent-d: #E8C98A; /* 阅读 · 暗档（床头灯金） */ /* 语义色 */ --ok: #01847F; --warn: #B07818; --err: #C2453E; /* 在线点光晕（随 --ok 换基底） */ --ok-ring: rgba(1,132,127,.2); --ok-ring-2: rgba(1,132,127,.1); /* 他人消息气泡面（窗格 --surface 之上再亮半档，避免面面相融） */ --bubble-bg: #FFFFFF; /* 玻璃配方（仅悬浮层使用：底条/移动 navbar/搜索浮层；落地卡片禁止 blur） */ --glass-bg: color-mix(in srgb, var(--surface) 78%, transparent); --glass-blur: blur(14px) saturate(1.5); --glass-edge: inset 0 1px 0 rgba(255,255,255,.55); --glass-border: rgba(255,255,255,.55); /* 拟物标题高光 */ --text-shadow: 0 1px 0 rgba(255,255,255,.6); /* 透明度阶梯 · 强调青（组件只引用，不发明） */ --ac-05: rgba(48,185,201,.05); --ac-10: rgba(48,185,201,.10); --ac-15: rgba(48,185,201,.15); --ac-25: rgba(48,185,201,.25); --ac-35: rgba(48,185,201,.35); --ac-50: rgba(48,185,201,.50); --ac-75: rgba(48,185,201,.75); /* 透明度阶梯 · 墨蓝（阴影/分隔基底） */ --nk-05: rgba(50,64,94,.05); --nk-10: rgba(50,64,94,.10); --nk-15: rgba(50,64,94,.15); --nk-25: rgba(50,64,94,.25); --nk-35: rgba(50,64,94,.35); --nk-50: rgba(50,64,94,.50); /* 拟物阴影三态：凸起 / 凸起悬停 / 内嵌（v3·深海蓝工艺：白环+深蓝发丝线+深蓝环境影） */ --neu-out: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55), 0 0 0 1px rgba(0,24,94,.05), 0 10px 20px rgba(0,24,94,.13); --neu-out-hover: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(0,24,94,.07), 0 12px 26px rgba(0,24,94,.18); --neu-in: inset 2px 2px 6px rgba(0,24,94,.12), inset -1px -1px 2px rgba(255,255,255,.95); /* 激活态 · 强调色环 + 青色环境光（nvpress 彩色激活工艺） */ --neu-glow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px var(--ac-25), 0 6px 14px var(--ac-25); /* 圆角 / 动效（v3：Quint 缓出 + 回弹曲线双轨） */ --r-lg: 20px; --r-md: 16px; --r-sm: 12px; --r-xs: 8px; --r-pill: 999px; --ease: cubic-bezier(.23,1,.32,1); --ease-spring: cubic-bezier(.1,1.2,.5,1); --dur: .2s; --dur-fast: .1s; /* 布局令牌（自 desktop.php 移交） */ --sidebar-w: 340px; --nav-h: 58px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); /* ── 过渡期别名（组件改造完成后移除，勿在新代码中使用） ── */ --hairline: var(--line-1); --line-soft: var(--line-3); --sh-1: 0 1px 2px var(--nk-10); --sh-2: 0 4px 16px var(--nk-15); --sh-3: 0 10px 28px var(--nk-25); } /* ── 暗模式 · 深海蓝 + 沙丘米（html.is-dark 完整令牌交换） ── */ html.is-dark { --bg: #0A1A3C; --surface: #1E3158; --well: #18294A; --ink-1: #E8E4D8; --ink-2: #D5D2C6; --ink-3: #8FA3C0; --ink-4: #5B6E8C; --line-0: #2A3F66; --line-1: #22375C; --line-2: #1A2E50; --line-3: #152646; --accent: #8FE3EC; --accent-2: #5BC9D6; --accent-ink: var(--accent); --accent-tint: rgba(143,227,236,.16); --accent-tint-2: rgba(143,227,236,.24); --accent-fill: linear-gradient(135deg, var(--accent), var(--accent-2)); --accent-fill-ink: #083642; --wh-accent: #6FD8E4; --pl-accent: #E5A25E; --dy-accent: #F07CA8; --rd-accent: #E8C98A; --rd-accent-d: #E8C98A; --ok: #3DDC97; --warn: #E0B15C; --err: #E8827C; --ok-ring: rgba(61,220,151,.25); --ok-ring-2: rgba(61,220,151,.12); --bubble-bg: #26395F; --glass-bg: color-mix(in srgb, var(--surface) 86%, transparent); --glass-blur: blur(14px) saturate(1.15); --glass-edge: inset 0 1px 0 rgba(255,255,255,.14); --glass-border: rgba(255,255,255,.12); --text-shadow: none; --ac-05: rgba(143,227,236,.05); --ac-10: rgba(143,227,236,.10); --ac-15: rgba(143,227,236,.15); --ac-25: rgba(143,227,236,.25); --ac-35: rgba(143,227,236,.35); --ac-50: rgba(143,227,236,.50); --ac-75: rgba(143,227,236,.75); --nk-05: rgba(0,0,0,.05); --nk-10: rgba(0,0,0,.10); --nk-15: rgba(0,0,0,.15); --nk-25: rgba(0,0,0,.25); --nk-35: rgba(0,0,0,.35); --nk-50: rgba(0,0,0,.50); --neu-out: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.30); --neu-out-hover: inset 0 1px 0 rgba(255,255,255,.20), inset 0 0 0 1px rgba(255,255,255,.09), 0 12px 26px rgba(0,0,0,.38); --neu-in: inset 2px 2px 6px rgba(0,0,0,.5), inset -1px -1px 2px rgba(255,255,255,.05); --neu-glow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(143,227,236,.25), 0 6px 14px rgba(143,227,236,.10); --sh-1: 0 1px 2px rgba(0,0,0,.30); --sh-2: 0 4px 16px rgba(0,0,0,.40); --sh-3: 0 10px 28px rgba(0,0,0,.50); } /* ── 品牌区（侧栏头部） ── */ .brand-row { display: flex; align-items: center; gap: 10px; } .brand-row h1 { margin: 0; } .brand-sub { font-size: 12px; color: var(--accent-ink); font-weight: 600; letter-spacing: 1px; } /* ══════════ 基础 ══════════ */ ::selection { background: var(--ac-15); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; overflow: hidden; } body { font-family: var(--jy-font-body, 'Play', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif); background: var(--bg); color: var(--ink-2); display: flex; flex-direction: column; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-weight: 400; } #app-body { display: flex; flex: 1; min-height: 0; } .jy-app-content { display: flex; min-width: 0; min-height: 0; } body.global-view #toolbar, body.global-view #navbar { display: none !important; } /* ══════════ 侧栏（透明轨道，内容卡片凸起） ══════════ */ #sidebar { width: var(--sidebar-w); flex-shrink: 0; background: transparent; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; height: 100%; position: relative; } .side-head { padding: 20px 16px 16px; border-bottom: 1px solid var(--line-3); } .side-head h1 { font-size: 17px; font-weight: 700; color: var(--ink-1); font-family: var(--jy-font-title, 'TeZhan'),"PingFang SC", "Microsoft YaHei", sans-serif; text-shadow: var(--text-shadow); } @media (min-width: 769px) { .side-head { display: none; } } .links { display: flex; gap: 6px; margin-top: 10px; } .links a { flex: 1; text-align: center; background: var(--surface); color: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 0; font-size: 12.5px; text-decoration: none; box-shadow: var(--neu-out); transition: all var(--dur) var(--ease); } .links a:hover { color: var(--accent-ink); border-color: var(--accent-tint); } /* P1·v20261030 滚动 affordance：滚动条不再隐藏——长列表/多标签可见可滚（6px 细条，令牌淡色，全局样式接管） */ .side-list { flex: 1; overflow-y: auto; padding: 12px; scrollbar-width: thin; scrollbar-color: var(--nk-25) transparent; display: flex; flex-direction: column; position: relative; } @media (max-width: 768px) { .side-list { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 16px); } } .side-sec { font-size: 11px; color: var(--ink-3); padding: 16px 16px 9px; letter-spacing: 2px; font-weight: 600; text-transform: uppercase; display: flex; align-items: center; gap: 6px; font-family: var(--jy-font-title, 'TeZhan'),sans-serif; } .side-sec::before { content: ''; width: 4px; height: 14px; background: var(--accent); border-radius: 2px; opacity: .85; } /* 会话卡：凸起；激活 = 内嵌 */ .conv { display: flex; align-items: center; gap: 12px; padding: 12px 6px 12px 16px; border-radius: var(--r-md); cursor: pointer; user-select: none; margin: 9px 4px 9px 8px; background: var(--surface); border: 1px solid var(--line-1); box-shadow: var(--neu-out); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .conv:hover { box-shadow: var(--neu-out-hover); transform: translateY(-2px); } .conv.active { background: var(--ac-10); border-color: var(--accent-tint); box-shadow: var(--neu-in); transform: none; } .conv.active .name { color: var(--accent-ink); } .conv .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-2), var(--accent-ink)); color: #fff; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .conv .av.ch, .conv .av.pt { border-radius: 12px; } .conv .av img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; } .conv .av.ch img, .conv .av.pt img { border-radius: 12px; } .conv .av.ch { background: linear-gradient(135deg, #4E8FBF, #2A9AAF); } .conv .av.pt { background: linear-gradient(135deg, #3E9CB8, #2F8A9E); } .conv .dot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--surface); background: var(--ink-4); transition: all .2s ease; } .conv .dot.on { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-ring); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 2px var(--ok-ring); } 50% { box-shadow: 0 0 0 5px var(--ok-ring-2); } } .conv .info { flex: 1; min-width: 0; } .conv .name { font-size: 15px; font-weight: 600; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--jy-font-title, 'TeZhan'),sans-serif; margin-bottom: 8px; } .conv .note { font-size: 12px; color: var(--ink-4); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv .st { font-size: 12px; flex-shrink: 0; padding: 6px 8px; border-radius: 20px; background: var(--well); color: var(--ink-4); font-weight: 500; transition: all .2s ease; margin-top: -10px; } .conv .st.on { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .empty-tip { padding: 20px; color: var(--ink-4); font-size: 13px; text-align: center; } /* 侧栏拉伸手柄 */ .side-resizer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 20; transition: background .15s ease; } .side-resizer:hover, .side-resizer.on { background: var(--ac-35); } /* ══════════ 主区 ══════════ */ #main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; background: transparent; } #toolbar { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-t)) 14px 10px; background: transparent; border-bottom: 1px solid var(--line-2); flex-shrink: 0; } #toolbar .tt { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--jy-font-title, 'TeZhan'),sans-serif; color: var(--ink-1); text-shadow: var(--text-shadow); } #toolbar .tt small { font-weight: 400; color: var(--ink-4); font-size: 12px; margin-left: 8px; } #backbtn { display: none; align-items: center; color: var(--accent-ink); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; flex-shrink: 0; } .pane { flex: 1; min-height: 0; display: none; position: relative; } .pane.on { display: flex; flex-direction: column; } #placeholder { align-items: center; justify-content: center; } /* 空态卡（P2）：凸起卡 + 统一 SVG + 聚合入口 + 推荐频道 3 枚 */ .ph-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 44px; max-width: 400px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--neu-out); } .ph-ico { width: 44px; height: 44px; color: var(--ink-4); } .ph-tip { margin: 0; font-size: 14px; color: var(--ink-3); } #ph-gl { height: 34px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--accent-tint); background: var(--accent-fill); color: var(--accent-fill-ink); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px var(--ac-25), inset 0 1px 0 rgba(255, 255, 255, .35); transition: all var(--dur) var(--ease); } #ph-gl:hover { filter: brightness(1.05); box-shadow: 0 6px 16px var(--ac-35), inset 0 1px 0 rgba(255, 255, 255, .35); } .ph-rec { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .ph-rec-item { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--neu-out); cursor: pointer; font-size: 12.5px; color: var(--ink-2); transition: all var(--dur) var(--ease); } .ph-rec-item:hover { color: var(--accent-ink); border-color: var(--accent-tint); box-shadow: var(--neu-out-hover); } .ph-rec-item img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } /* 只读消息视图 / 私聊视图：画布直出，限宽居中 */ #ch-wrap, #gl-wrap { flex: 1; overflow-y: auto; padding: 4px 18px 56px; background: var(--bg); display: flex; flex-direction: column; align-items: center; } #ch-wrap > *, #gl-wrap > * { width: 100%; max-width: 880px; } #ch-wrap .rdonly, #gl-wrap .rdonly { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11.5px; color: var(--warn); background: rgba(224,177,24,.10); border: 1px solid rgba(224,177,24,.25); padding: 5px 10px; border-radius: var(--r-xs); margin-bottom: 14px; } /* 历史消息行（.mrow，jy-msg 契约之外的兜底渲染） */ .mrow { display: flex; gap: 10px; margin-bottom: 14px; max-width: 720px; } .mrow.me { flex-direction: row-reverse; margin-left: auto; } .mrow .mav { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-4); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mrow .mav.kf { background: var(--accent-2); } .mrow .mav img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; } .mrow .mbody { min-width: 0; } .mrow .mname { font-size: 11.5px; color: var(--ink-4); margin-bottom: 3px; } .mrow.me .mname { text-align: right; } .mrow .mbubble { display: inline-block; padding: 8px 12px; border-radius: var(--r-sm); background: var(--bubble-bg); border: 1px solid var(--line-2); box-shadow: var(--neu-out); font-size: 14px; line-height: 1.6; word-break: break-word; white-space: pre-wrap; } .mrow.me .mbubble { background: var(--accent-fill); color: var(--accent-fill-ink); border-color: transparent; } .mrow.me .mbubble a { color: var(--accent-fill-ink); text-decoration: underline; } .mrow .mtime { font-size: 10.5px; color: var(--ink-4); margin-top: 3px; } .ch-empty, .ch-err { text-align: center; color: var(--ink-4); font-size: 13px; padding: 40px 12px; } .ch-err { color: var(--err); } .mrow .mbubble img { max-width: 260px; max-height: 200px; border-radius: var(--r-xs); display: block; cursor: pointer; } .mrow .mbubble a { color: var(--accent-ink); text-decoration: none; } .mrow .mbubble a:hover { text-decoration: underline; } .mbubble pre { white-space: pre-wrap; } .mbubble table, .mbubble td, .mbubble th { border: 1px solid var(--line-1) !important; } .mbubble table { border-collapse: collapse !important; } .mbubble td, .mbubble th { padding: 4px 8px; } .mrow.me .mbubble table, .mrow.me .mbubble td, .mrow.me .mbubble th { border-color: rgba(255,255,255,.55) !important; } /* 私聊视图 */ #dm-wrap { flex: 1; overflow-y: auto; padding: 18px 18px 56px; background: var(--bg); display: flex; flex-direction: column; align-items: center; } #dm-wrap > * { width: 100%; max-width: 880px; } .dm-sys { text-align: center; font-size: 11.5px; color: var(--err); padding: 6px 0; } .dm-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-2); flex-shrink: 0; } .dm-foot input { flex: 1; min-width: 0; border: 0; border-radius: var(--r-sm); padding: 9px 12px; font-size: 13.5px; outline: none; background: var(--well); box-shadow: var(--neu-in); color: var(--ink-1); transition: box-shadow var(--dur) var(--ease); } .dm-foot input:focus { box-shadow: var(--neu-in), 0 0 0 3px var(--accent-tint); } .dm-foot button { border: 0; background: var(--accent-fill); color: var(--accent-fill-ink); border-radius: var(--r-sm); padding: 0 18px; cursor: pointer; font-size: 13px; font-weight: 600; box-shadow: 0 6px 14px var(--ac-35), inset 0 1px 0 rgba(255, 255, 255, .4); transition: all var(--dur) var(--ease); } .dm-foot button:hover { filter: brightness(1.08); box-shadow: 0 8px 18px var(--ac-35), inset 0 1px 0 rgba(255, 255, 255, .4); } .dm-foot button:active { box-shadow: var(--neu-in); } .dm-foot button:disabled { opacity: .5; } /* ══════════ 滚动工具 + 关键词搜索 ══════════ */ .scroll-tools { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 6; pointer-events: none; --st-btm: 16px; } #pane-dm .scroll-tools { --st-btm: 80px; } .st-btn { pointer-events: auto; position: absolute; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); box-shadow: var(--neu-out); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease); } .st-btn.s-search { top: 50%; transform: translateY(-50%); } .st-btn.s-search:hover { transform: translateY(-50%) scale(1.08); color: var(--accent-ink); } .st-btn.s-bottom { bottom: calc(var(--st-btm) + 56px); } .st-btn.s-top { bottom: var(--st-btm); } .st-btn.s-top:hover, .st-btn.s-bottom:hover { transform: scale(1.08); color: var(--accent-ink); } .st-search { pointer-events: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 6px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-pill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--neu-out-hover); padding: 8px 10px 8px 18px; width: min(460px, calc(100% - 160px)); box-sizing: border-box; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .st-search.show { display: flex; } .st-search:focus-within { border-color: var(--accent-tint); box-shadow: var(--neu-in), 0 0 0 3px var(--accent-tint); } .st-search input { flex: 1; min-width: 0; border: none; outline: none; font-size: 14.5px; background: transparent; color: var(--ink-1); } .st-search input::placeholder { color: var(--ink-4); } .st-search .cnt { font-size: 11.5px; color: var(--accent-ink); background: var(--ac-10); padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-search button { border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-size: 15px; color: var(--ink-3); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur) var(--ease); } .st-search button:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; transform: scale(1.07); } .st-search button.close:hover { background: var(--err); border-color: var(--err); } mark.jy-hl { background: var(--accent-tint); color: inherit; border-radius: 2px; padding: 0 1px; } mark.jy-hl.cur { background: var(--accent-tint-2); box-shadow: 0 0 0 2px var(--ac-25); border-radius: 3px; } @media (max-width: 768px) { .st-search { width: calc(100% - 32px); top: auto; bottom: 14px; transform: translateX(-50%); } #pane-dm .st-search { bottom: 80px; } #pane-dm .scroll-tools { --st-btm: 70px; } .scroll-tools .st-btn { display: none !important; } .nav-item.fx { flex: 1 1 0; } .nav-item { white-space: nowrap; } } /* 顶部导航容器（内容已移入侧栏，保留占位隐藏） */ #topmenu { display: none !important; } /* 聚合频道主按钮：品牌青渐变药丸 */ .gl-btn { display: flex; align-items: center; justify-content: center; gap: 7px; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); z-index: 3; width: auto; padding: 8px 28px; border-radius: var(--r-pill); white-space: nowrap; color: var(--accent-fill-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; background: var(--accent-fill); box-shadow: 0 8px 18px var(--ac-35), inset 0 1px 0 rgba(255, 255, 255, .4); cursor: pointer; user-select: none; transition: all var(--dur) var(--ease); font-family: var(--jy-font-title, 'TeZhan'),sans-serif; } .gl-btn:hover { transform: translateX(-50%) translateY(-2px); } .gl-btn:active { transform: translateX(-50%) translateY(0); } /* ══════════ 侧栏分段标签（stab） ══════════ */ .side-tabs { position: relative; display: flex; flex-direction: column; align-items: stretch; margin: 22px 10px calc(10px + var(--safe-b)); padding: 20px 6px 6px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--neu-out); } .stab-row { display: flex; gap: 2px; background: var(--well); border-radius: var(--r-sm); padding: 3px; box-shadow: var(--neu-in); } .stab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 0; font-size: 12px; color: var(--ink-3); cursor: pointer; background: transparent; border-radius: var(--r-xs); font-family: var(--jy-font-title, 'TeZhan'),sans-serif; user-select: none; transition: all var(--dur) var(--ease); } .stab .ti { font-size: 12px; line-height: 1; } .stab:hover { color: var(--ink-1); } .stab.on { background: var(--surface); color: var(--accent-ink); font-weight: 700; box-shadow: var(--neu-out); } /* 分页面板：内嵌凹槽，卡片在其中凸起 */ .stab-page { display: none; background: var(--well); border-radius: var(--r-md); margin: 16px 6px 2px; padding: 2px 8px 10px; box-shadow: var(--neu-in); } .stab-page.on { display: block; } .side-list > .stab-page { flex: 1; min-height: 0; overflow-y: auto; } .stab-page .conv { box-shadow: var(--neu-out); } .stab-page .side-sec { flex-direction: column; align-items: center; gap: 7px; font-size: 15px; color: var(--ink-2); letter-spacing: 3px; padding: 9px 8px 4px; } .stab-page .side-sec::before { display: none; } .stab-page .side-sec::after { content: ''; width: 42px; height: 3.5px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-tint)); } .stab-page .empty-tip { margin: 8px 4px; background: transparent; } #tab-nav .links { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; } #tab-nav .links a { padding: 10px 14px; border-radius: 10px; } /* ══════════ 移动端抽屉 ══════════ */ #drawer-mask { display: none; position: fixed; inset: 0; background: var(--nk-35); z-index: 90; } #drawer-mask.on { display: block; } #drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(250px, 72vw); background: var(--surface); z-index: 95; transform: translateX(-105%); transition: transform .28s var(--ease-spring); box-shadow: var(--neu-out-hover); display: flex; flex-direction: column; padding: 16px; } #drawer.on { transform: translateX(0); } #drawer .dw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 700; font-size: 15px; color: var(--ink-1); font-family: var(--jy-font-title, 'TeZhan'),sans-serif; } #dw-close { cursor: pointer; font-size: 22px; color: var(--ink-4); padding: 0 6px; line-height: 1; } #drawer .links { display: flex; flex-direction: column; gap: 8px; } #drawer .links a { padding: 11px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; text-decoration: none; box-shadow: var(--neu-out); transition: all var(--dur) var(--ease); } #drawer .links a:hover { color: var(--accent-ink); border-color: var(--accent-tint); } /* ══════════ 分屏宿主（窗格 + 任务栏 + 底条；P2·PHP 期定型） ══════════ */ /* 骨架默认隐藏，body.split-host 激活后显示（窄窗/嵌入保持经典布局，首屏零跳变） */ #split-host-right { display: none; } body.split-host #main { display: none; } body.split-host #split-host-right { flex: 1; display: flex; flex-direction: row; align-items: stretch; min-width: 0; min-height: 0; position: relative; } #split-content-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 14px 10px; box-sizing: border-box; background: transparent; } #split { flex: 1; display: flex; min-width: 0; min-height: 0; background: transparent; gap: 14px; box-sizing: border-box; justify-content: center; align-items: stretch; } #split.n1 .sp { flex: none; width: min(960px, 100%); } #split.n2 .sp { flex: none; width: min(760px, calc(50% - 6px)); } #split.n3 .sp { flex: 1; } #split.fixed { justify-content: center; gap: 14px; } #split.fixed.fx1 .sp { flex: none; width: min(900px, 100%); } #split.fixed.fx2 .sp { flex: none; width: min(900px, calc(50% - 10px)); } #split.fixed.fx3 .sp { flex: none; width: min(900px, calc(33.333% - 12px)); } /* 窗格：凸起厚卡 */ .sp { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--neu-out); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .sp.hidden { display: none; } .sp.active { border-color: var(--accent-tint); box-shadow: var(--neu-glow); } .sp.drop-target { border-color: var(--accent-ink); box-shadow: var(--neu-glow); } .sp-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line-2); flex-shrink: 0; cursor: grab; user-select: none; } .sp-head:active { cursor: grabbing; } .sp-t { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--jy-font-title, 'TeZhan'),sans-serif; text-shadow: var(--text-shadow); } .sp-min, .sp-x { flex: none; width: 26px; height: 26px; border-radius: var(--r-xs); display: grid; place-items: center; font-size: 13px; line-height: 1; color: var(--ink-3); cursor: pointer; transition: all var(--dur) var(--ease); } .sp-min:hover { background: var(--nk-10); color: var(--ink-1); } .sp-x:hover { background: rgba(194,69,62,.10); color: var(--err); } .sp-body { flex: 1; position: relative; min-height: 0; } .sp-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: var(--surface); } .sp-hint { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; justify-items: center; text-align: center; color: var(--ink-4); font-size: 13px; background: radial-gradient(220px 130px at 50% 42%, var(--nk-05), transparent 72%); } .sp-hint svg { width: 36px; height: 36px; opacity: .45; } /* 任务栏：透明轨道 + 凸起标签卡 */ #taskbar { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 64px; padding: 10px 8px calc(10px + var(--safe-b)); background: transparent; border-left: 1px solid var(--line-2); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--nk-25) transparent; position: relative; align-self: stretch; } body.tb-folded #taskbar { width: 64px; } #tbFold .chev { width: 6px; height: 6px; flex: none; transition: all var(--dur) var(--ease); border-top: 1.4px solid var(--ink-3); border-left: 1.4px solid var(--ink-3); transform: rotate(-45deg); } #tbFold:hover .chev { border-color: var(--accent-ink); } body.tb-folded #tbFold .chev { border-left: none; border-right: 1.4px solid var(--ink-3); transform: rotate(45deg); } #tbTabs { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: stretch; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--nk-25) transparent; padding: 2px; } #tbTabs::before { content: '页面标签'; display: block; font-size: 10px; letter-spacing: 2px; color: var(--ink-4); font-weight: 600; padding: 2px 4px; } body.tb-folded #tbTabs::before { display: none; } .tb-tab { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 8px 8px; border-radius: var(--r-sm); text-align: left; background: var(--surface); border: 1px solid var(--line-1); box-shadow: var(--neu-out); font-size: 12px; color: var(--ink-2); cursor: pointer; user-select: none; transition: all var(--dur) var(--ease); } .tb-tab .tbi { position: relative; width: 32px; height: 32px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; font-family: var(--jy-font-title, 'TeZhan'),sans-serif; line-height: 1; flex: none; } .tb-tab .tbi i { font-style: normal; } .tb-tab .tbi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .tb-tab .tbi-g { background: linear-gradient(135deg, #4E8FBF, #2A9AAF); } .tb-tab .tbi-p { background: linear-gradient(135deg, #3E9CB8, #2F8A9E); } .tb-tab .tbi-u { background: linear-gradient(135deg, var(--accent-2), var(--accent-ink)); } .tb-tab .tbi-gl { background: var(--accent-fill); } .tb-tab:hover { box-shadow: var(--neu-out-hover); transform: translateX(-2px); } .tb-tab.active { background: var(--ac-10); border-color: var(--accent-tint); box-shadow: var(--neu-in); } .tb-tab.drop-target { border-color: var(--accent-ink); box-shadow: var(--neu-glow); transform: translateX(-3px); } .tb-tab .tbn { width: 100%; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-1); } .tb-tab.active .tbn { color: var(--accent-2); } .tb-meta { width: 100%; display: flex; align-items: center; justify-content: space-between; } /* P1·v20261030：关闭钮不再 hover 才出现——常显 55%，悬停/触屏加深（此前触屏与键盘用户无法发现关闭入口） */ .tb-tab .tbx { cursor: pointer; color: var(--ink-4); font-size: 13px; padding: 0 3px; border-radius: 5px; line-height: 1.3; opacity: .55; transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease); } .tb-tab:hover .tbx { opacity: 1; } @media (hover: none) { .tb-tab .tbx { opacity: .8; } } .tb-tab .tbx:hover { color: var(--err); background: rgba(194,69,62,.08); } .tb-tab .tbp { font-style: normal; font-size: 10px; color: var(--accent-ink); background: var(--ac-10); border-radius: 4px; padding: 0 4px; line-height: 1.6; } .tb-tab .tbb { font-style: normal; font-size: 10px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; } #taskbar .tb-empty { color: var(--ink-4); font-size: 11px; line-height: 1.7; text-align: center; padding: 4px 2px; border: 1.5px dashed var(--line-1); border-radius: var(--r-sm); } .tb-side { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex-shrink: 0; border-top: 1px solid var(--line-2); padding-top: 10px; margin: 0; } #tbHint { border: 1px solid var(--line-2); background: var(--well); border-radius: var(--r-xs); padding: 5px 4px; font-size: 10px; color: var(--ink-3); width: 100%; outline: none; text-align: center; } .tb-group { display: flex; flex-direction: column; gap: 6px; } .tb-group::before { content: '功能切换'; display: block; font-size: 10px; letter-spacing: 2px; color: var(--ink-4); font-weight: 600; padding: 0 2px; } body.tb-folded .tb-group::before { display: none; } .tb-btn { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-3); border-radius: var(--r-sm); padding: 8px 0; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: var(--neu-out); transition: all var(--dur) var(--ease); font-family: var(--jy-font-title, 'TeZhan'),sans-serif; } .tb-btn:hover { color: var(--accent-ink); box-shadow: var(--neu-out-hover); } .tb-btn .bi { font-size: 12px; margin-right: 2px; } .tb-btn .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--ok-ring); flex: none; } body.tb-folded .tb-tab { padding: 10px 4px; align-items: center; } body.tb-folded .tb-tab .tbi { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; } body.tb-folded .tb-tab .tbn, body.tb-folded .tb-tab .tb-meta { display: none; } body.tb-folded #tbHint { display: none; } body.tb-folded .tb-btn { padding: 8px 0; justify-content: center; } body.tb-folded .tb-btn .bt { display: inline; font-size: 13px; } /* 侧栏底部导航 */ .side-nav { border-top: 1px solid var(--line-3); padding: 12px 14px calc(12px + var(--safe-b)); flex-shrink: 0; } .sn-title { font-size: 11px; color: var(--ink-4); letter-spacing: 2px; font-weight: 600; margin-bottom: 8px; font-family: var(--jy-font-title, 'TeZhan'),sans-serif; } .sn-grid { display: flex; flex-wrap: wrap; gap: 6px; } .sn-grid span { padding: 6px 12px; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); cursor: pointer; box-shadow: var(--neu-out); transition: all var(--dur) var(--ease); } .sn-grid span:hover { color: var(--accent-ink); border-color: var(--accent-tint); } /* ══════════ 底部状态栏 ══════════ */ #statusbar { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 40px; padding: 0 4px; font-size: 11.5px; color: var(--ink-3); } #statusbar .sb-item { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; font-size: 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--neu-out); } #statusbar .sb-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--ok-ring); } #statusbar .sb-tools { display: inline-flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); box-shadow: var(--neu-out); } #statusbar .sb-tools button { border: none; background: transparent; color: var(--ink-3); font-size: 12px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: all var(--dur) var(--ease); font-family: inherit; } #statusbar .sb-tools button:hover { background: var(--ac-10); color: var(--accent-ink); } body.embed #statusbar { display: none !important; } @media (max-width: 768px) { #statusbar { display: none; } } /* ══════════ 侧栏分类条 + 底部三键 ══════════ */ #sidebar .side-cats-wrap { flex: none; margin: 8px 10px 0; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); } #sidebar .side-cats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } #sidebar .side-cats button { flex: none; width: auto; min-width: 0; height: 30px; padding: 0 10px; border-radius: 10px; font-size: 12px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--neu-out); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all var(--dur) var(--ease); } #sidebar .side-cats button:hover { color: var(--ink-1); box-shadow: var(--neu-out-hover); } #sidebar .side-cats button.on { color: var(--accent-ink); font-weight: 700; border-color: var(--accent-tint); box-shadow: var(--neu-glow); } #sidebar #channel-list, #sidebar #contact-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; } .side-dock { flex: none; display: flex; gap: 6px; padding: 8px 12px calc(8px + var(--safe-b, 0px)); } .side-dock button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--neu-out); color: var(--ink-3); font-size: 11px; cursor: pointer; transition: all var(--dur) var(--ease); } .side-dock button .ti { display: grid; place-items: center; color: currentColor; } .side-dock button .ti svg { width: 19px; height: 19px; display: block; } .side-dock button:hover { transform: translateY(-2px); color: var(--ink-1); box-shadow: var(--neu-out-hover); } .side-dock button.on { color: var(--accent-ink); font-weight: 700; border-color: var(--accent-tint); background: var(--ac-10); box-shadow: var(--neu-in); } /* ══════════ 嵌入模式 ══════════ */ /* 平台主题底栏（Voce 可能异步注入）：全站隐藏——原 jyMoveChrome 反复内联隐藏，现 CSS 一条取代 */ footer.jy-theme-bar { display: none !important; } body.embed #sidebar, body.embed #topmenu, body.embed #toolbar, body.embed #drawer, body.embed #drawer-mask, body.embed #navbar { display: none !important; } body.embed .scroll-tools { display: none !important; } #host-tools { position: absolute; z-index: 60; --st-btm: 62px; left: 0; right: 64px; transition: right .2s var(--ease); } #host-tools .st-btn.s-jump { bottom: calc(var(--st-btm) + 56px); } #host-tools .st-btn.s-search { top: auto; bottom: var(--st-btm); transform: none; } #host-tools .st-btn.s-search:hover { transform: scale(1.08); } #host-tools .st-search { left: auto; right: 38px; top: auto; bottom: calc(var(--st-btm) + 28px); transform: none; width: min(480px, calc(100% - 140px)); } body.embed #main { padding-bottom: 0; } /* ══════════ 移动端底部菜单 ══════════ */ #navbar { display: none; } @media (max-width: 768px) { body { flex-direction: column; height: 100dvh; } #app-body { flex-direction: column; } #sidebar { width: 100%; border-right: none; flex: 1; display: flex; } #sidebar.hidden { display: none; } #main { display: none; position: fixed; top: 0; left: 0; right: 0; height: 100dvh; padding-bottom: calc(var(--nav-h) + var(--safe-b)); box-sizing: border-box; z-index: 70; background: var(--bg); } #main.m-on { display: flex; } #backbtn { display: flex; } .dm-foot { padding-bottom: calc(10px + var(--safe-b)); } .side-resizer { display: none; } #navbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); align-items: stretch; justify-content: space-around; border-top: 1px solid var(--glass-border); box-shadow: var(--glass-edge), 0 -4px 16px var(--nk-10); } .nav-item { display: flex; flex-direction: column; flex: 1; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--accent-ink); cursor: pointer; user-select: none; font-family: var(--jy-font-title, 'TeZhan'),sans-serif; font-weight: 700; } .nav-item .ni { font-size: 20px; line-height: 1; } } /* ══════════ 宿主框架：窗格区 + 底条纵排、任务栏全高贴右 ══════════ */ #jy-host-mid { flex: 1; display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; } #jy-host-mid #split-content-col { flex: 1; min-width: 0; min-height: 0; } /* ── 底部横条：悬浮药丸（主题菜单 + 状态栏 + 模态任务图标组） ── */ #jy-bottom-strip { flex: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; box-sizing: border-box; margin: 0 12px calc(10px + var(--safe-b, 0px)); padding: 6px 8px 6px 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-md); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--neu-out); } #jy-bottom-strip footer.jy-theme-bar { flex: 1; min-width: 0; background: transparent !important; border-bottom: 0 !important; padding: 0; } #jy-bottom-strip #statusbar { flex: none; margin: 0; height: 40px; } #jy-bottom-strip #jy-theme-toggle { flex: none; } #jy-bottom-strip #statusbar .sb-item { height: 28px; padding: 0 12px; font-size: 12px; } #jy-bottom-strip .sb-tools button { height: 28px; padding: 0 12px; font-size: 12px; } #jy-bottom-strip .sb-tools button:hover { background: var(--ac-10); color: var(--accent-ink); } #pane-global, #pane-channel { padding-bottom: 16px; } /* ── 任务坞单一入口（P2·四钮合一：底条药丸钮，角标=全部模态任务聚合） ── */ #jym-dock-toggle { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 30px; padding: 0; margin-right: 6px; border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--neu-out); color: var(--ink-2); cursor: pointer; transition: all var(--dur) var(--ease); } #jym-dock-toggle:hover { color: var(--accent-ink); box-shadow: var(--neu-out-hover); } #jym-dock-toggle svg { width: 19px; height: 19px; } #jym-dock-toggle .cnt { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: var(--r-pill); background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1206; font-size: 9.5px; font-weight: 800; font-style: normal; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--surface); box-shadow: 0 2px 6px rgba(245, 158, 11, .45); } #jym-dock-toggle[data-empty="1"] { opacity: .45; } /* 抽屉快捷入口行（沉浸式阅读 / 放映厅 / 虫洞） */ .jym-dock-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .jym-dock-quick button { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--neu-out); color: var(--ink-2); font-size: 13px; cursor: pointer; transition: all var(--dur) var(--ease); } .jym-dock-quick button:hover { color: var(--accent-ink); box-shadow: var(--neu-out-hover); } .jym-dock-quick button svg { width: 17px; height: 17px; flex: none; } .jym-dock-quick button[data-empty="1"] { opacity: .5; } /* 行内计数（覆盖角标的绝对定位语义） */ .jym-dock-quick .cnt { position: static; display: inline-grid; min-width: 17px; height: 17px; border-radius: var(--r-pill); background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1206; font-size: 10px; font-weight: 800; font-style: normal; place-items: center; padding: 0 4px; border: 0; box-shadow: none; } /* ── 向上抽屉（模态任务面板；遮罩为弹态层，blur 保留） ── */ #jym-dock-mask { position: fixed; inset: 0; z-index: 94; background: var(--nk-35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); } #jym-dock-mask.on { opacity: 1; pointer-events: auto; } #jym-dock-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px var(--nk-25); transform: translateY(106%); transition: transform .32s var(--ease-spring); padding: 12px 16px calc(14px + var(--safe-b, 0px)); max-height: 50vh; overflow-y: auto; height: auto; } #jym-dock-sheet.on { transform: none; } #jym-dock-sheet .jym-dock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } #jym-dock-sheet .jym-dock-head b { font-size: 13.5px; color: var(--ink-1); } #jym-dock-sheet .jym-dock-head .jym-dock-acts { display: flex; gap: 6px; } #jym-dock-sheet .jym-dock-head button { border: 0; background: var(--well); border-radius: var(--r-pill); padding: 5px 13px; font-size: 12px; color: var(--ink-2); cursor: pointer; transition: all var(--dur) var(--ease); } #jym-dock-sheet .jym-dock-head button:hover { background: var(--nk-10); color: var(--ink-1); } /* 「清空任务」琥珀语义色（由 --warn 派生，同 --ac-10 派生手法） */ #jym-dock-sheet .jym-dock-head #jym-dock-clear { color: var(--warn); background: rgba(176, 120, 24, .10); } #jym-dock-sheet .jym-dock-head #jym-dock-clear:hover { background: rgba(176, 120, 24, .18); } #jym-dock-sheet .jym-dock-body { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-start; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; } #jym-dock-sheet .jym-dock-body::-webkit-scrollbar { display: none; } /* 抽屉内重置插件注入 #jyMTaskbar 的桌面定位（important 为功能对抗，保留） */ #jym-dock-body #jyMTaskbar { position: static !important; inset: auto !important; width: 100%; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 8px; align-items: center; } #jym-dock-body #jyMTaskbar .mt-chip { flex: none !important; width: auto !important; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; display: flex; align-items: center; gap: 7px; background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink-1) !important; font-size: 13px; font-weight: 600; border-radius: var(--r-xs); padding: 8px 12px; box-shadow: var(--neu-out); cursor: pointer; } #jym-dock-body #jyMTaskbar .mt-chip:hover { border-color: var(--accent-tint) !important; color: var(--accent-ink) !important; } #jym-dock-body #jyMTaskbar .mt-chip .mt-close, #jym-dock-body #jyMTaskbar .mt-chip [class*="close"], #jym-dock-body #jyMTaskbar .mt-chip .x { opacity: .55; } #jym-dock-body #jyMTaskbar .mt-chip .mt-close:hover, #jym-dock-body #jyMTaskbar .mt-chip [class*="close"]:hover { opacity: 1; color: var(--err); } /* ═══ 沉浸式阅读：开灯=米纸亮室 · 关灯=墨纸暗室（纸色系独立世界，原样保留） ═══ */ #jym-stage{position:fixed;inset:0;z-index:9980;display:none;background:rgba(30,32,38,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} #jym-stage.on{display:block} /* ── 内容浮窗（共用骨架） ── */ #jym-stage .jym-st-win{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(calc(52em + 80px),94vw) /* 自适应=窗随内容 */;height:min(82vh,980px);display:flex;flex-direction:column;background:#F6F1E7;border:1px solid #E4DCC9;border-radius:18px;box-shadow:0 24px 64px rgba(70,58,38,.16);overflow:hidden;transition:background .25s ease,border-color .25s ease} #jym-stage[data-width="narrow"] .jym-st-win{width:min(645px,94vw);height:min(84vh,960px)} #jym-stage[data-width="full"] .jym-st-win{width:calc(100vw - 20px);height:min(90vh,1000px)} #jym-stage .jym-st-head{flex:none;position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;height:48px;padding:0 14px;background:#EFE8D9;border-bottom:1px solid #E2D9C4;transition:background .25s ease,border-color .25s ease} #jym-stage .jym-st-head b{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 130px);font-size:15px;font-weight:600;letter-spacing:.02em;color:#3B352C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s ease} #jym-stage .jym-st-body{flex:1;overflow-y:auto;padding:16px 24px 26px} #jym-stage .jym-read{font-size:15px;line-height:1.9;word-break:break-word;color:#3B352C;transition:color .25s ease} #jym-stage .jym-st-head .x,#jym-stage .jym-st-head .min,#jym-stage .jym-st-head .fs{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:rgba(59,53,44,.06);color:#8A8272;cursor:pointer;font-size:14px;display:grid;place-items:center;padding:0;transition:all .15s ease} #jym-stage .jym-st-head .min:hover,#jym-stage .jym-st-head .fs:hover{background:rgba(59,53,44,.10);color:#3B352C} #jym-stage .jym-st-head .x:hover{background:rgba(190,60,40,.12);color:#B4532A} /* ── 悬浮药丸（关灯+三档） ── */ #jym-stage .jym-st-width{position:fixed;left:50%;bottom:calc(58px + var(--safe-b,0px));transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:99px;background:rgba(246,241,231,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(138,130,114,.25);box-shadow:0 8px 26px rgba(70,58,38,.12);z-index:9981;transition:background .25s ease,border-color .25s ease} #jym-stage .jym-st-width button{flex:none;height:28px;padding:0 12px;border-radius:99px;border:0;background:transparent;color:#6E6653;font-size:12px;cursor:pointer;white-space:nowrap;transition:all .15s ease} #jym-stage .jym-st-width button:hover{color:#3B352C} #jym-stage .jym-st-width button.act{background:var(--md-accent);color:#fff;font-weight:600} #jym-stage.dark .jym-st-width button.act{color:#2A2723} #jym-stage .jym-st-width .wsp{flex:none;width:1px;height:16px;background:rgba(148,163,184,.3);margin:0 3px} /* ── 底部任务栏（沉浸式任务） ── */ #jym-stage .jym-st-foot{position:fixed;left:0;right:0;bottom:0;z-index:9981;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px calc(10px + var(--safe-b,0px));background:rgba(246,241,231,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(138,130,114,.20);overflow-x:auto;scrollbar-width:none;transition:background .25s ease,border-color .25s ease} #jym-stage .jym-st-foot::-webkit-scrollbar{display:none} #jym-stage .jym-st-foot .jym-st-chips{display:inline-flex;flex-wrap:nowrap;gap:8px;align-items:center;flex:none;max-width:100%;overflow-x:auto;scrollbar-width:none} #jym-stage .jym-st-foot .jym-st-chips::-webkit-scrollbar{display:none} #jym-stage .jym-st-foot .jym-chip{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:8px;border:1px solid #DFD6C0;background:#FCF9F1;color:#6E6653;font-size:12px;cursor:pointer;white-space:nowrap;max-width:240px;overflow:hidden;transition:all .15s ease} #jym-stage .jym-st-foot .jym-chip:hover{color:#3B352C} #jym-stage .jym-st-foot .jym-chip.on{border-color:var(--md-accent);color:var(--md-accent);font-weight:700;background:color-mix(in srgb, var(--md-accent) 10%, transparent)} #jym-stage .jym-st-foot .jym-chip i{font-style:normal;opacity:.55;margin-left:2px} #jym-stage .jym-st-foot .jym-chip i:hover{opacity:1;color:#dc2626} /* ══ 关灯：墨纸暗室（与开灯同骨架、同圆角、同语义，只反转明度） ══ */ #jym-stage.dark{background:rgba(12,11,10,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} #jym-stage.dark .jym-st-win{background:#2A2723;border-color:rgba(255,255,255,.08);box-shadow:0 24px 64px rgba(0,0,0,.45),0 0 80px rgba(255,200,120,.07) /* 床头灯下的一页书：暖纸亮一档 + 昏黄光晕 */} #jym-stage.dark .jym-st-head{background:#332F29;border-bottom-color:rgba(255,255,255,.08)} #jym-stage.dark .jym-st-head b{color:#F2EDE0} #jym-stage.dark .jym-read{color:#D9D2C2} #jym-stage.dark .jym-st-head .x,#jym-stage.dark .jym-st-head .min{background:rgba(255,255,255,.12);color:#C9CFD8} #jym-stage.dark .jym-st-head .min:hover,#jym-stage.dark .jym-st-head .fs:hover{color:#fff} #jym-stage.dark .jym-st-width{background:rgba(42,39,35,.72);border-color:rgba(255,255,255,.12);box-shadow:0 8px 26px rgba(0,0,0,.35)} #jym-stage.dark .jym-st-width button{color:#CDC5B0} #jym-stage.dark .jym-st-width button:hover{color:#fff} #jym-stage.dark .jym-st-width .wsp{background:rgba(255,255,255,.16)} #jym-stage.dark .jym-st-foot{background:rgba(36,33,29,.92);border-top-color:rgba(255,255,255,.09)} #jym-stage.dark .jym-st-foot .jym-chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#E2DCCB} #jym-stage.dark .jym-st-foot .jym-chip.on{color:var(--md-accent);border-color:color-mix(in srgb, var(--md-accent) 45%, transparent);background:color-mix(in srgb, var(--md-accent) 10%, transparent)} /* ═══ 长消息 Markdown 排版优化（阅读正文：行宽 / 节奏 / 层级 / 媒体） ═══ */ #jym-stage{--md-accent:var(--rd-accent);--md-mark:color-mix(in srgb, var(--rd-accent) 14%, transparent);--md-faint:rgba(59,53,44,.55)} #jym-stage.dark{--md-accent:var(--rd-accent-d);--md-mark:color-mix(in srgb, var(--rd-accent-d) 14%, transparent);--md-faint:rgba(217,210,194,.5)} /* 基线：行宽 40em（≈34 字）、字 16、行距 2 */ #jym-stage .jym-read{font-size:16px;line-height:1.72;letter-spacing:.015em;margin:0 auto /* 宽度随画布档位：自适应=40em 舒适行宽，全屏=通栏用满 */} #jym-stage[data-width="auto"] .jym-read{max-width:52em} #jym-stage[data-width="narrow"] .jym-read{max-width:none} #jym-stage[data-width="full"] .jym-read{max-width:none;padding:0 8px} #jym-stage .jym-read>*:first-child{margin-top:0} /* 源文每段一行、行间无空行：标题行尾的
渲染成空行，直接隐藏 */ #jym-stage .jym-read h1+br,#jym-stage .jym-read h2+br,#jym-stage .jym-read h3+br, #jym-stage .jym-read h4+br,#jym-stage .jym-read h5+br,#jym-stage .jym-read h6+br{display:none} /* 段落节奏 */ #jym-stage .jym-read p{margin:0 0 .4em /* MD 源自带空行，段距收敛防双重间距 */} /* 标题层级：h2 主色竖条锚点，逐级收敛 */ #jym-stage .jym-read h1,#jym-stage .jym-read h2,#jym-stage .jym-read h3,#jym-stage .jym-read h4,#jym-stage .jym-read h5,#jym-stage .jym-read h6{font-weight:700;line-height:1.5;margin:.5em 0 .25em;color:inherit} #jym-stage .jym-read h1{font-size:1.45em} #jym-stage .jym-read h2{font-size:1.28em;padding-left:13px;border-left:4px solid var(--md-accent)} #jym-stage .jym-read h3{font-size:1.15em} #jym-stage .jym-read h4{font-size:1.05em} #jym-stage .jym-read h5,#jym-stage .jym-read h6{font-size:1em;color:var(--md-faint)} /* 强调 */ #jym-stage .jym-read strong{font-weight:700;color:inherit} #jym-stage .jym-read em{opacity:.85} /* 引用：主色左边线 + 淡底 */ #jym-stage .jym-read blockquote{margin:.8em 0;padding:.5em 1em;border-left:4px solid var(--md-accent);background:var(--md-mark);border-radius:0 10px 10px 0;color:inherit} #jym-stage .jym-read blockquote p:last-child{margin-bottom:0} /* 列表 */ #jym-stage .jym-read ul,#jym-stage .jym-read ol{margin:0 0 .55em;padding-left:1.6em} #jym-stage .jym-read li{margin:.15em 0;line-height:1.85} #jym-stage .jym-read li::marker{color:var(--md-accent)} /* 分隔线 */ #jym-stage .jym-read hr{border:0;border-top:1px solid var(--md-mark);margin:1.3em auto;width:60%} /* 行内代码 / 代码块 */ #jym-stage .jym-read code{background:var(--md-mark);border-radius:5px;padding:.12em .4em;font-size:.88em;font-family:Consolas,Menlo,monospace} #jym-stage .jym-read pre{background:var(--md-mark);border:1px solid var(--md-mark);border-radius:10px;padding:14px 16px;overflow-x:auto;line-height:1.7} #jym-stage .jym-read pre code{background:transparent;padding:0} /* 链接 */ #jym-stage .jym-read a{color:var(--md-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--md-mark)} #jym-stage .jym-read a:hover{text-decoration-color:var(--md-accent)} /* 图片：居中、圆角、柔影 */ #jym-stage .jym-read img{display:block;max-width:100%;height:auto;margin:.9em auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14)} /* 表格：全宽、表头主色淡底、细线 */ #jym-stage .jym-read table{width:100%!important;border-collapse:collapse!important;margin:.8em 0;font-size:.92em} #jym-stage .jym-read th{background:var(--md-mark);font-weight:700;text-align:left} #jym-stage .jym-read th,#jym-stage .jym-read td{padding:9px 12px!important;border:1px solid var(--md-mark)!important} /* 上下标微调 */ #jym-stage .jym-read sup,#jym-stage .jym-read sub{line-height:0} /* ── 侧栏底部通用菜单（聚合频道按钮容器；important 为功能定位覆盖，保留） ── */ .jy-side-menu { margin: 10px 10px calc(10px + var(--safe-b)) !important; padding: 6px !important; display: flex !important; justify-content: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--neu-out); } .jy-side-menu .gl-btn { position: static !important; transform: none !important; } .jy-side-menu .gl-btn:hover { transform: translateY(-2px) !important; } .jy-side-menu .gl-btn:active { transform: translateY(0) !important; } .jy-lib-btn { background: linear-gradient(135deg, var(--pl-accent), #B8621A); box-shadow: 0 6px 16px color-mix(in srgb, var(--pl-accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4); } /* ── 主题开关（底条内，P3 双通道：图标+文字） ── */ #jy-theme-toggle { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--neu-out); color: var(--ink-2); font-size: 12.5px; cursor: pointer; transition: all var(--dur) var(--ease); } #jy-theme-toggle:hover { color: var(--accent-ink); box-shadow: var(--neu-out-hover); } #jy-theme-toggle svg { width: 15px; height: 15px; } #jy-theme-toggle .ic-sun { display: none; } html.is-dark #jy-theme-toggle .ic-sun { display: block; } html.is-dark #jy-theme-toggle .ic-moon { display: none; } /* ══════════ 消息行契约 .jy-msg* ══════════ */ .jy-msg { display: flex; gap: 12px; margin: 16px 0; align-items: flex-start; } .jy-msg-av { flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--nk-10); color: var(--ink-3); font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line-2); } .jy-msg-av img { width: 100%; height: 100%; object-fit: cover; } .jy-msg-bd { flex: 1; min-width: 0; } .jy-msg-name { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; } .jy-msg-name .jy-msg-tag { display: inline-block; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; line-height: 1.7; font-weight: 600; background: var(--ac-10); color: var(--accent-ink); margin-right: 3px; vertical-align: 1px; } .jy-msg-name .jy-msg-read { float: right; width: 96px; text-align: center; color: var(--accent-ink); font-size: 13px; font-weight: 600; cursor: pointer; } .jy-msg-name .jy-msg-read:hover { text-decoration: underline; } .jy-msg-bubble { background: var(--bubble-bg); border: 1px solid var(--line-2); border-radius: 4px 16px 16px 16px; box-shadow: var(--neu-out); padding: 10px 14px; line-height: 1.65; word-break: break-word; overflow-wrap: anywhere; } .jy-msg-me .jy-msg-bubble { background: var(--accent-fill); border-color: transparent; color: var(--accent-fill-ink); box-shadow: 0 4px 14px var(--ac-35); } .jy-msg-me .jy-msg-bubble a { color: var(--accent-fill-ink); text-decoration: underline; } .jy-msg-time { font-size: 10.5px; color: var(--ink-4); margin-top: 4px; } .jy-msg-cp { margin: 3px 0 0; } .jy-msg-cp .jy-msg-av { visibility: hidden; height: 0; overflow: hidden; } .jy-msg-cp .jy-msg-name { display: none; } .jy-msg-cp .jy-msg-bubble { border-radius: var(--r-sm); } .jy-msg-bubble:has(.movie-message), .jy-msg-bubble:has(.long-message) { width: 100%; max-width: 100%; box-sizing: border-box; } /* ══════════ 聚合频道：分组卡片 ══════════ */ .gl-group { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--neu-out); margin: 0 0 14px; overflow: hidden; } .glg-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-1); cursor: pointer; } .glg-head:hover { background: var(--nk-05); } .glg-av { flex: none; width: 26px; height: 26px; border-radius: var(--r-xs); object-fit: cover; background: var(--nk-10); color: var(--ink-3); font-size: 12px; font-weight: 700; display: grid; place-items: center; } .glg-head b { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glg-meta { flex: none; font-size: 11px; color: var(--ink-4); white-space: nowrap; } .glg-list { padding: 4px 10px 6px; } .glg-item { display: flex; gap: 10px; padding: 8px 4px; border-radius: var(--r-xs); cursor: pointer; align-items: flex-start; } .glg-item:hover { background: var(--nk-05); } .glg-poster { flex: none; width: 52px; height: 70px; object-fit: cover; border-radius: var(--r-xs); background: var(--well); } .glg-it { flex: 1; min-width: 0; } .glg-t { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.5; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .glg-m { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .glg-more { display: block; width: 100%; text-align: center; padding: 9px 0; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); background: var(--nk-05); border: 0; border-top: 1px solid var(--line-1); cursor: pointer; } .glg-more:hover { background: var(--nk-10); } /* ══════════ 影视消息 ══════════ */ /* 查看全文药丸（唯一生效版：右对齐淡灰药丸，轻提示不抢戏） */ .jy-msg-bubble .movie-message .movie-expand { display: flex; width: fit-content; align-items: center; gap: 5px; margin: 10px 0 2px auto; padding: 4px 15px; border-radius: var(--r-pill); border: 1px solid var(--line-1); background: var(--well); color: var(--ink-3); font-size: 12px; font-weight: 400; letter-spacing: 1px; cursor: pointer; line-height: 1.5; box-shadow: var(--neu-in); transition: all var(--dur) var(--ease); } .jy-msg-bubble .movie-message .movie-expand::after { content: '▾'; font-size: 10px; opacity: .7; } .jy-msg-bubble .movie-message .movie-expand:hover { background: color-mix(in srgb, var(--pl-accent) 10%, var(--surface)); color: var(--pl-accent); border-color: color-mix(in srgb, var(--pl-accent) 35%, transparent); text-decoration: none; } .jy-msg-bubble .movie-message .movie-expand:active { box-shadow: var(--neu-in); transform: scale(.96); } /* 影视表格展示框架：弱化（细边/无斑马）；影院暗色语境的白色半透明为内容层语义，原样保留 */ .jy-msg-bubble table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; table-layout: fixed; } .jy-msg-bubble td, .jy-msg-bubble th { border: 1px solid var(--line-1) !important; padding: 4px 9px; word-break: break-word; font-size: 12.5px; color: inherit; } .jy-msg-bubble img { border: 1px solid var(--line-2); box-shadow: var(--neu-out); border-radius: var(--r-sm); } .jy-msg-bubble a { text-decoration: none; } .jy-msg-bubble:has(.movie-message) { border-radius: 6px 6px var(--r-md) var(--r-md); } .jy-msg-bubble a:hover { text-decoration: none; } body.imm-on .jy-msg-bubble .movie-message .movie-expand { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .45); border-color: transparent; } body.imm-on .jy-msg-bubble td { border-color: rgba(148, 163, 184, .22) !important; } body.imm-on .jy-msg-bubble img { border-color: rgba(255, 255, 255, .14); box-shadow: none; } /* 折叠卡片：预览占满气泡宽度，收起/展开互斥 */ .movie-message { width: 100% !important; max-width: 100%; box-sizing: border-box; display: block; } .movie-message .movie-preview, .movie-message .movie-rest { width: 100% !important; max-width: 100%; box-sizing: border-box; } .movie-message .movie-preview table, .movie-message .movie-rest table { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .movie-message .movie-preview td, .movie-message .movie-rest td { word-break: break-word; } .movie-message .movie-rest { display: none; } .movie-message.is-expanded .movie-preview { display: none; } .movie-message.is-expanded .movie-rest { display: block; } .jy-msg .jy-msg-bubble.b-wide, .jy-msg .jy-msg-bubble:has(.movie-message), .jy-msg .jy-msg-bubble:has(.long-message) { width: 100% !important; max-width: 100%; box-sizing: border-box; } .movie-message .movie-modal-btn { margin-left: 10px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-pill); padding: 2px 12px; font-size: 12px; cursor: pointer; color: var(--pl-accent); line-height: 1.5; vertical-align: middle; box-shadow: var(--neu-out); transition: all var(--dur) var(--ease); } .movie-message .movie-modal-btn:hover { border-color: color-mix(in srgb, var(--pl-accent) 40%, transparent); color: var(--pl-accent); box-shadow: var(--neu-out-hover); } .movie-message .movie-modal-btn:active { box-shadow: var(--neu-in); transform: scale(.96); } .movie-message .movie-watch-link { color: var(--pl-accent); cursor: pointer; text-decoration: none; } .movie-message .movie-watch-link:hover { text-decoration: underline; } /* ══════════ 长消息插件卡片：首图 + 标题 + 简述，全文折叠 ══════════ */ .long-message { width: 100%; max-width: 100%; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: start; } .long-message:not(:has(.long-thumb)) { grid-template-columns: minmax(0, 1fr); } .long-message:not(:has(.long-thumb)) .long-title, .long-message:not(:has(.long-thumb)) .long-summary { grid-column: 1; } .long-message .long-title { grid-column: 1; grid-row: 1; } /* 长消息行重排：头像/名称/时间一行；卡片全宽下沉（bd 拆格参与父级网格） */ .jy-msg:has(.long-message) { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: end /* 头像/用户名/时间贴底部对齐，不垂直居中 */; } .jy-msg:has(.long-message) .jy-msg-bd { display: contents; } .jy-msg:has(.long-message) .jy-msg-av { grid-column: 1; grid-row: 1; } .jy-msg:has(.long-message) .jy-msg-name { grid-column: 2; grid-row: 1; width: 100%; align-items: center; } .jy-msg:has(.long-message) .jy-msg-bubble { grid-column: 1/-1; grid-row: 2; max-width: 100%; width: 100%; } .long-message .long-summary { grid-column: 1; grid-row: 2; } .long-message .long-thumb { grid-column: 2; grid-row: 1/span 2; width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-xs); background: var(--well); margin: 0; } .long-message .long-noimg { grid-column: 2; grid-row: 1/span 2; width: 96px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-weight: 700; color: var(--ink-4); background: var(--well); box-shadow: var(--neu-in); letter-spacing: 1px; line-height: 1.25; text-align: center; padding: 4px; box-sizing: border-box; border-radius: var(--r-xs); margin: 0; } .long-message .long-noimg i { font-style: normal; display: block; } .long-message .noimg-1 { font-size: 26px; } .long-message .noimg-2-lg { font-size: 21px; } .long-message .noimg-2-md { font-size: 17px; } .long-message .noimg-2-sm { font-size: 14px; } .long-message .long-title { font-size: 14.5px; font-weight: 700; color: var(--ink-1); line-height: 1.45; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .long-message .long-summary { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .long-message .long-read { margin: 0; color: var(--accent-ink); font-size: 12px; text-align: center; } /* ══════════ 滚动条（P2·6px 细条；html.is-mac 关闭——macOS 系统叠加滚动条更优） ══════════ */ html:not(.is-mac) ::-webkit-scrollbar { width: 6px; height: 6px; } html:not(.is-mac) ::-webkit-scrollbar-thumb { background: var(--nk-25); border-radius: var(--r-pill); border: 1px solid transparent; background-clip: content-box; } html:not(.is-mac) ::-webkit-scrollbar-thumb:hover { background: var(--nk-35); } html:not(.is-mac) ::-webkit-scrollbar-track { background: transparent; } /* ══════════ 数据源频道卡片：抖音 / 通用字段 ══════════ */ .dy-card { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--neu-out); cursor: pointer; margin: 8px 0; transition: all var(--dur) var(--ease); } .dy-card:hover { border-color: color-mix(in srgb, var(--dy-accent) 45%, transparent); box-shadow: var(--neu-out-hover), 0 6px 16px color-mix(in srgb, var(--dy-accent) 16%, transparent); } .dy-card:active { transform: scale(.985); box-shadow: var(--neu-in); } .dy-body { display: flex; gap: 10px; align-items: flex-start; } .dy-cover { flex: none; width: 96px; height: 64px; border-radius: var(--r-xs); background: linear-gradient(160deg, #14333D, #0A1A21); display: grid; place-items: center; } .dy-thumb { flex: none; width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-xs); background: #111827; display: block; } .dy-info { flex: 1; min-width: 0; } .dy-cover .dy-play { width: 28px; height: 28px; font-size: 12px; } /* 一行双栏：记录卡片两列分布 */ .dy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dy-grid .dy-card { margin: 0; } .dy-grid .dy-body { display: flex; flex-direction: column; gap: 3px; } .dy-grid .dy-pair { display: flex; gap: 10px; align-items: center; } .dy-grid .dy-ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--neu-out); display: grid; place-items: center; } .dy-grid .dy-ic svg { width: 22px; height: 22px; fill: var(--ink-1); } .dy-grid .dy-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .dy-grid .dy-line { min-width: 0; font-size: 12.5px; line-height: 1.55; word-break: break-all; } .dy-grid .dy-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dy-grid .dy-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dy-grid .dy-time { color: var(--ink-4); } .dy-play { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--dy-accent), color-mix(in srgb, var(--dy-accent) 55%, #06222A)); color: #fff; display: grid; place-items: center; font-size: 15px; box-shadow: 0 5px 12px color-mix(in srgb, var(--dy-accent) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.35); transition: all var(--dur) var(--ease); } .dy-play:hover { filter: brightness(1.06); transform: scale(1.06); } .dy-play:active { transform: scale(.94); box-shadow: inset 0 2px 5px rgba(0,20,30,.35); } .dy-title { font-size: 14.5px; font-weight: 700; color: var(--ink-1); line-height: 1.4; word-break: break-all; } .dy-author { font-size: 12px; color: var(--dy-accent); margin-top: 4px; font-weight: 600; } .dy-brief { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; } .dy-time { font-size: 11px; color: var(--ink-4); margin-top: 6px; } .ds-card { font-size: 13px; line-height: 1.7; } .ds-flat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; } .ds-title { font-size: 14.5px; font-weight: 700; color: var(--ink-1); margin-bottom: 4px; } /* ═══ 抖音放映厅 · 内建引擎（黑色视频 UI，与主题无关，原样保留； 壳宽 430<730 触发官方播放器竖版 UI；引擎=scroll-snap 滑页 + IO 懒挂载 + 三页窗口销毁） ═══ */ #jy-dy-stage { position: fixed; inset: 0; z-index: 100000; display: none; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #jy-dy-stage.on { display: block; } #jy-dy-stage .dy-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, 96vw); height: min(96vh, calc(min(480px, 96vw) * 672 / 324)) /* 壳锁 324:672 内容比例：与官方内容区等比，零黑边；矮屏受限 96vh 时超高从顶部裁（底部锚点） */; display: flex; flex-direction: column; background: #000; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); } #jy-dy-stage .dy-top { position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: 7; display: flex; align-items: center; padding: 0 10px; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)) /* 悬浮覆盖：不占 track 高度，视频区用满全高 */; } #jy-dy-stage .dy-x, #jy-dy-stage .dy-min { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; cursor: pointer; flex: none; } #jy-dy-stage .dy-min { font-size: 15px; line-height: 1; } #jy-dy-stage .dy-ttl { flex: 1; text-align: center; font-size: 14px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; color: #fff; } #jy-dy-stage .dy-open { flex: none; font-size: 12px; color: #fff; opacity: .85; text-decoration: none; background: rgba(255, 255, 255, .12); padding: 6px 10px; border-radius: 14px; } #jy-dy-stage .dy-track { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } #jy-dy-stage .dy-track::-webkit-scrollbar { display: none; } #jy-dy-stage .dy-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000 /* 与官方页内容同色，缺口无分界 */; } #jy-dy-stage .dy-holder { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center /* 底部对齐：内容按宽放大，超高部分从顶部剪裁，作者/控制条区永远完整贴底 */; } #jy-dy-stage .dy-veil { position: absolute; inset: 0; z-index: 4 /* 盖住官方 iframe：触摸/滚轮被拦截，滑动手势归引擎；点击经短暂撤下穿透（暂停/播放） */; } /* 自建