/* ========================================================= 小学拉新 · 数据报告协作平台 · 前端样式 v3（圆润 + 松绿 · 2026-08-11 重设计） 设计语言：单一松绿家族 + 字体 Nunito + 圆角大胆 + 柔和染墨投影； 浮动面板留出画布间隙，激活控件全部胶囊化。 单一强调色（松绿 #3FA867 / #2E8A55）；语义色独立。 ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: 'Nunito', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text-1); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; color: inherit; } a { color: var(--accent-strong); text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } :root { /* —— 画布 / 表面 / 边框 —— */ --bg: #F5F7FB; /* 冷调浅色画布 */ --surface: #FFFFFF; --surface-2: #FAFBFC; --border: #E6E8EB; --border-strong: #D4D7DC; --border-soft: #F1F3F5; /* 更浅的边框（评论框等想"隐形"的场景） */ /* —— 文字 —— */ --text-1: #1F2329; --text-2: #5C636E; --text-3: #9AA0A8; --text-3-soft: #C2C7CE; /* 更浅的占位/提示文字（让 placeholder 不抢眼） */ /* —— 松绿家族（呼应 logo「小学拉新」主色；2026-08-11 用户要求再暗一档） —— */ --accent: #2F9554; /* 主色，呼应 logo：图标/浅染/焦点环（v4 降饱和降明度） */ --accent-strong: #226B41; /* 更深一档：填充按钮 + 链接文字（过 WCAG AA） */ --accent-hover: #1B5434; --accent-weak: #DEEFE3; --accent-ink: #1B5434; --accent-soft-tint: #ECF6EF; /* —— 语义色 —— */ --danger: #E5484D; --danger-weak: #FDECEC; --success: #2E9E6B; --warn: #D4A017; --quote-weak: #FBF4E6; /* 原文摘录底色：暖奶白，与评论 hover 的浅绿明显区分（引文语义） */ /* —— 圆角系统 —— */ --radius-xs: 8px; --radius-sm: 12px; --radius: 16px; --radius-lg: 20px; --radius-xl: 28px; --pill: 999px; /* —— 阴影系统（柔和染墨，叠加偏移让卡片「右下飘」起来） —— */ /* v6.3 加重：双层 box-shadow 一层纯下层柔和、一层右下方向偏移，强化悬浮立体感 */ --shadow-1: 0 2px 6px rgba(31, 35, 41, .06), 2px 4px 10px rgba(31, 35, 41, .05); --shadow-2: 0 6px 16px rgba(31, 35, 41, .10), 3px 6px 14px rgba(31, 35, 41, .07); --shadow-3: 0 16px 36px rgba(31, 35, 41, .14), 8px 12px 22px rgba(31, 35, 41, .10); --shadow-focus: 0 0 0 3px rgba(47, 149, 84, .24); --shadow-accent-soft: 0 6px 18px rgba(47, 149, 84, .24); /* —— 间距 / 尺寸 —— */ --topbar-h: 56px; --sidebar-w: 264px; --comments-w: 320px; --rail-w: 56px; --canvas-pad: 12px; --ease: 160ms cubic-bezier(.2, .8, .2, 1); } /* ========================================================= 深色模式（v6.7.6）：挂在 上，覆盖全部语义变量。 松绿家族在暗底上提亮以保 WCAG AA 对比；阴影改用更深的黑底叠加。 ========================================================= */ html.dark { --bg: #15171C; /* 柔和深灰蓝画布 */ --surface: #1E2128; /* 卡片表面 */ --surface-2: #23272F; /* 次级表面（输入/浅染区） */ --border: #2E333C; --border-strong: #3A4049; --border-soft: #262A32; --text-1: #E6E8EC; --text-2: #A6ADB6; --text-3: #7A828D; --text-3-soft: #565E68; /* 松绿家族提亮（暗底需更亮才过 AA） */ --accent: #3FAE66; --accent-strong: #4FD07E; --accent-hover: #5FE08E; --accent-weak: #1C3A2A; --accent-ink: #9FE6BB; --accent-soft-tint: #1E3327; --danger: #F2666B; --danger-weak: #3A2326; --success: #4FD07E; --warn: #E0B341; --quote-weak: #2E2A1C; /* 深色模式原文摘录底色：暖深灰 */ /* 阴影在暗底改用更深的黑叠层 */ --shadow-1: 0 2px 6px rgba(0, 0, 0, .40), 2px 4px 10px rgba(0, 0, 0, .35); --shadow-2: 0 6px 16px rgba(0, 0, 0, .50), 3px 6px 14px rgba(0, 0, 0, .40); --shadow-3: 0 16px 36px rgba(0, 0, 0, .60), 8px 12px 22px rgba(0, 0, 0, .50); --shadow-focus: 0 0 0 3px rgba(79, 208, 126, .30); --shadow-accent-soft: 0 6px 18px rgba(79, 208, 126, .30); } /* 深色模式下的滚动条与选区（避免刺眼白条） */ html.dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.dark ::-webkit-scrollbar-thumb { background: #353B45; border-radius: 999px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #414852; } html.dark ::-webkit-scrollbar-track { background: transparent; } html.dark ::selection { background: rgba(79, 208, 126, .30); } /* 深色模式下少量硬编码浅底浮层需降级（变量未覆盖处） */ html.dark .filter-chips { background: rgba(30, 33, 40, .92); } html.dark .comments, html.dark .comment-compose, html.dark .reply-box, html.dark .comment-entry { background: var(--surface); } /* 评论输入框：兜底防 UA 默认白底（不依赖 className，兼容历史版本与第三方 textarea） 选择器覆盖三层：① 评论主框 ② 子回复框 ③ 任何 .compose-input（className 兜底） */ html.dark #commentCompose textarea, html.dark #commentCompose input, html.dark .reply-box textarea, html.dark .reply-box input, html.dark .compose-input, html.dark .compose-input:-webkit-autofill { background-color: var(--surface-2) !important; color: var(--text-1) !important; caret-color: var(--accent-strong); -webkit-text-fill-color: var(--text-1); } html.dark #commentCompose textarea::placeholder, html.dark .reply-box textarea::placeholder, html.dark .compose-input::placeholder { color: var(--text-3-soft) !important; } /* @通知行文字：跟评论区整体一致,不要失效到 var(--text-3) */ html.dark .notify-row { color: var(--text-2); } html.dark .notify-cb { accent-color: var(--accent-strong); } /* ---------- 主题切换按钮 ---------- */ /* v6.9 改版：去掉硬边框（border:none），改用 box-shadow 浮起（与 .rc-btn 一致的视觉语言）， 挪到「后台管理」与 profile 之间（renderHeader 已无 / 顶部动态内容由 index.html 静态挂载） */ .theme-toggle { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--pill); background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-1); transition: background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease); } .theme-toggle:hover { background: var(--accent-soft-tint); color: var(--accent-strong); box-shadow: var(--shadow-2); } .theme-toggle:active { transform: scale(.92); } .theme-toggle .icon { width: 18px; height: 18px; } /* 默认（浅色）显示月亮（点击进入深色）；深色模式显示太阳（点击回到浅色） */ html:not(.dark) .theme-toggle .i-sun { display: none; } html.dark .theme-toggle .i-moon { display: none; } /* ---------- 图标 ---------- */ .icon { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-sm { width: 14px; height: 14px; } .icon-lg { width: 18px; height: 18px; } /* ---------- 焦点可达性 ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } /* ---------- 顶栏：浮动胶囊容器 ---------- */ .topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 18px; margin: var(--canvas-pad) var(--canvas-pad) 0 var(--canvas-pad); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); position: sticky; top: var(--canvas-pad); z-index: 20; gap: 12px; } .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; } .topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; } .tabbar.tabbar-inline { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px; border-bottom: none; background: transparent; margin: 0; } /* —— Brand: logo + 名称 + 副标 —— */ .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-1); white-space: nowrap; cursor: pointer; padding: 6px 10px; border-radius: var(--pill); transition: background var(--ease); text-decoration: none; } .brand:hover { background: var(--accent-soft-tint); } .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .brand-mark { width: 32px; height: 32px; border-radius: 8px; flex: none; box-shadow: 0 2px 6px rgba(63, 168, 103, .18); object-fit: contain; background: var(--surface); } .brand-text { font-weight: 800; font-size: 15px; letter-spacing: .3px; line-height: 1.2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; } .brand-main { font-weight: 800; font-size: 15px; letter-spacing: .3px; } .brand-sub { font-weight: 500; font-size: 11px; color: var(--text-3); letter-spacing: .6px; text-align: center; font-family: 'Nunito', 'PingFang SC', sans-serif; } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .breadcrumb .sep { color: var(--border-strong); } .breadcrumb .crumb-current { color: var(--text-2); } .top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .top-actions .user { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; } .top-actions .user .user-name { color: var(--text-1); font-weight: 500; } .role-badge { background: var(--accent-strong); color: #fff; border-radius: var(--pill); padding: 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .2px; } .role-badge.member { background: var(--text-3); } .role-badge.super { background: linear-gradient(135deg, #b8860b, #d4a017); } /* 头像：图片或首字母色块，圆形 24px */ .avatar-wrap { width: 24px; height: 24px; flex: none; display: inline-flex; position: relative; border-radius: 50%; overflow: hidden; } .avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 700; } /* .comment-avatar 默认 inline-block —— 否则 .avatar-wrap 的 width:100% 在 inline 父里退化成 0，圆坍缩不可见。 min-width:0 —— 强制让 width 真正生效（v8.7 第二根因：作为 flex item 时 min-width:auto=内容尺寸，会把 18px 撑成 24px+，border-radius:50% 退化成圆角矩形）。 */ .comment-avatar { display: inline-block; vertical-align: middle; min-width: 0; border-radius: 50%; } .comment-avatar .avatar-wrap { width: 100%; height: 100%; } .avatar-initials { line-height: 1; } .avatar-img { position: absolute; inset: 0; } /* #461: 图片叠加在首字母之上,加载中透出首字母占位 */ .avatar-initials.two { font-size: 10px; } /* 两字头像：24px 圆内缩字体避免溢出 */ .member-card-av .avatar.two { font-size: 13px; } /* 44px 圆两字更舒展 */ .top-actions .user .avatar-wrap, .top-actions .user .avatar { width: 26px; height: 26px; } .comment .head .avatar-wrap, .comment .head .avatar { width: 24px; height: 24px; } .topbar-toggle { display: none; /* v8.8(#482):窄界面顶栏按钮胶囊样式——与 .topbar-link 同款(accent 强色 + pill + hover 浅底), 视觉与全站设计系统对齐。默认 hidden,@media ≤1024px 才 display:inline-flex 露出。 */ align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: var(--pill); background: transparent; border: 0; color: var(--accent-strong); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .topbar-toggle:hover { background: var(--accent-soft-tint); color: var(--accent-hover); } .topbar-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .topbar-toggle .icon { width: 18px; height: 18px; stroke: currentColor; fill: none; } /* ---------- 布局：三栏，全部浮动卡片 + 画布间隙 ---------- */ .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr var(--comments-w); gap: var(--canvas-pad); padding: var(--canvas-pad); height: calc(100vh - var(--topbar-h) - 2 * var(--canvas-pad)); } .layout.sidebar-collapsed { grid-template-columns: var(--rail-w) 1fr var(--comments-w); } .layout.comments-collapsed { grid-template-columns: var(--sidebar-w) 1fr var(--rail-w); } .layout.sidebar-collapsed.comments-collapsed { grid-template-columns: var(--rail-w) 1fr var(--rail-w); } /* v6.3: 用户明确要求"为什么还有角色"——任何状态下都不再显示（连展开态也隐藏）； 原 2026-08-11 v6.1 做的「收起态隐藏」和 560/480px 媒体查询兜底均取消—— 头像+昵称+箭头已足够辨识身份，徽章属于冗余视觉。 */ .profile-pill .pp-role { display: none !important; } .sidebar, .comments { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); overflow: hidden; display: flex; flex-direction: column; min-width: 0; position: relative; } .comments { } /* 评论区拖拽调宽手柄：贴在面板左缘（覆盖栅格间隙），宽屏可用，窄屏隐藏 */ .comments-resizer { position: absolute; top: 0; bottom: 0; left: -4px; width: 10px; cursor: col-resize; z-index: 6; background: transparent; transition: background var(--ease); } .comments-resizer::after { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 2px; height: 36px; border-radius: 2px; background: var(--border-strong); opacity: 0; transition: opacity var(--ease); } .comments-resizer:hover::after, .comments-resizer.dragging::after { opacity: 1; } body.resizing-comments { cursor: col-resize; user-select: none; } /* 目录侧栏拖拽调宽手柄：贴在面板右缘，宽屏可用，窄屏隐藏 */ .sidebar-resizer { position: absolute; top: 0; bottom: 0; right: -4px; width: 10px; cursor: col-resize; z-index: 6; background: transparent; transition: background var(--ease); } .sidebar-resizer::after { content: ''; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 2px; height: 36px; border-radius: 2px; background: var(--border-strong); opacity: 0; transition: opacity var(--ease); } .sidebar-resizer:hover::after, .sidebar-resizer.dragging::after { opacity: 1; } body.resizing-sidebar { cursor: col-resize; user-select: none; } @media (max-width: 1024px) { .comments-resizer { display: none; } .sidebar-resizer { display: none; } } .content { display: flex; flex-direction: column; overflow-y: auto; padding: 24px; min-width: 0; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); } /* 面板头 —— 简洁胶囊化 */ .panel-head { flex: none; height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-bottom: 1px solid var(--border); background: var(--surface); } .panel-title { font-size: 13px; font-weight: 700; color: var(--text-2); white-space: nowrap; letter-spacing: .3px; text-transform: uppercase; } .panel-actions { display: flex; gap: 6px; align-items: center; } .panel-body { flex: 1; min-height: 0; overflow-y: auto; } /* ===== 右侧面板「评论｜待办」分段切换 ===== */ .cp-tabs { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--pill); padding: 2px; } .cp-tab { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); padding: 4px 14px; border-radius: var(--pill); transition: background var(--ease), color var(--ease); } .cp-tab:hover { color: var(--text-1); } .cp-tab.is-active { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); } .cp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ===== 待办清单子视图 ===== */ .todo-progress { font-size: 12px; color: var(--text-3); padding: 10px 14px 4px; display: flex; align-items: center; gap: 8px; } .todo-bar { flex: 1; height: 6px; border-radius: var(--pill); background: var(--border); overflow: hidden; } .todo-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--pill); transition: width var(--ease); } .todo-items { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px; } /* M14-A：todo-item 加 flex-wrap:wrap，.todo-source-quote 已有 flex: 1 1 100%， 展开时自动换行到下一行（占整行），不再与 checkbox/text/origin-tag/acts 抢横向空间， 待办文本不再被挤成竖长条。 */ .todo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-radius: var(--radius-sm); } .todo-item.done .todo-text { color: var(--text-3); text-decoration: line-through; } .todo-check { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; } .todo-text { flex: 1; font-size: 14px; line-height: 1.5; color: var(--text-1); white-space: pre-wrap; word-break: break-word; } /* M4：@成员芯片 + 图片缩略图（与评论 .comment-images 等比松绿 token） */ .todo-mentions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .mention-chip { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; padding: 3px 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--pill); } .todo-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .todo-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; transition: transform var(--ease); } .todo-img:hover { transform: scale(1.04); } /* M7-B：编辑态下图片网格 + 移除按钮 */ .todo-edit-images.todo-images { margin-top: 0; margin-bottom: 6px; max-height: 96px; overflow-x: auto; overflow-y: hidden; } .todo-img-cell { position: relative; line-height: 0; } .todo-img-cell .img-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18); } /* M9-A：去掉「+ 添加图片」按钮 + 「可增删图片」说明；编辑框无图片时直接不显示占位。 */ .todo-edit-empty, .todo-edit-add, .todo-edit-hint { display: none !important; } .todo-acts { display: flex; gap: 8px; flex: 0 0 auto; } .link-btn { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12px; color: var(--text-3); padding: 0; } .link-btn:hover { color: var(--accent); } .link-btn.danger:hover { color: var(--danger); } /* ===== 侧栏「报告列表｜待办总览」分段切换 ===== */ .sidebar-mode { display: flex; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); justify-content: center; } .sm-tab { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); padding: 5px 14px; border-radius: var(--pill); transition: background var(--ease), color var(--ease); } .sm-tab:hover { color: var(--text-1); } .sm-tab.is-active { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); } .sm-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ===== 标签页待办总览（M2）===== */ .todo-ov-stat { font-size: 12px; color: var(--text-3); padding: 12px 16px 4px; } /* M8-A：总览列表 + 卡片复用报告卡视觉（box-shadow 浮起 + 无边框 + 标题两行截断 + meta + 操作行） */ .todo-ov-list { display: flex; flex-direction: column; gap: 14px; padding: 8px 16px 24px; } .todo-ov-card { background: var(--surface); border: none; border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-1); transition: transform var(--ease), box-shadow var(--ease); display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box; width: 100%; max-width: 100%; outline: none; cursor: pointer; } .todo-ov-card:focus-visible { box-shadow: var(--shadow-1), inset 0 0 0 2px var(--accent); } .todo-ov-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .todo-ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .todo-ov-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .todo-ov-name { font-size: 16px; font-weight: 700; color: var(--text-1); line-height: 1.45; min-height: calc(1.45em * 2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .todo-ov-path { font-size: 12px; color: var(--text-3); } .todo-ov-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); } .todo-ov-prog { color: var(--accent-strong); font-weight: 600; white-space: nowrap; } .todo-ov-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: auto; padding-top: 6px; } /* M8-A：模态里的"完整清单"容器 — 与报告内嵌待办一致 */ .todo-modal-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .todo-modal-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); margin-top: 4px; } .todo-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } /* M8-A：旧展开行/进度条整段隐藏 — 点击卡片弹模态 */ .todo-ov-items, .todo-ov-row, .todo-ov-acts, .todo-ov-edit-row, .todo-ov-textwrap, .todo-ov-text, .todo-ov-empty { display: none !important; } /* 收起为窄条 */ .layout.sidebar-collapsed .sidebar > .panel-head, .layout.comments-collapsed .comments > .panel-head { flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; height: auto; } .layout.sidebar-collapsed .sidebar > .panel-head > .panel-title, .layout.comments-collapsed .comments > .panel-head > .panel-title { writing-mode: vertical-rl; letter-spacing: 2px; color: var(--text-3); } .layout.sidebar-collapsed .sidebar > .panel-head > .panel-actions, .layout.comments-collapsed .comments > .panel-head > .panel-actions { flex-direction: column; } .layout.sidebar-collapsed .sidebar > .panel-body, .layout.comments-collapsed .comments > .panel-body { display: none; } /* M14-A：侧栏收起态 cp-tabs（评论/待办）默认是 inline-flex 横向药丸， 在 56px 窄条里被压成单字竖排、字距难看。改为纵向堆叠 + 紧凑 padding + 透明背景， 与 panel-title 的 vertical-rl 视觉一致。 */ .layout.sidebar-collapsed .sidebar > .panel-head > .cp-tabs, .layout.comments-collapsed .comments > .panel-head > .cp-tabs { flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; min-width: 0; } .layout.sidebar-collapsed .sidebar > .panel-head > .cp-tabs .cp-tab, .layout.comments-collapsed .comments > .panel-head > .cp-tabs .cp-tab { padding: 4px 6px; font-size: 11px; line-height: 1.1; writing-mode: vertical-rl; letter-spacing: 1px; min-width: 0; box-sizing: border-box; } /* 小按钮（面板头内） */ .btn-mini { background: transparent; border: none; border-radius: var(--pill); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 13px; transition: var(--ease); } .btn-mini:hover { background: var(--accent-soft-tint); color: var(--accent-strong); box-shadow: var(--shadow-1); } .btn-mini.primary { color: var(--accent-strong); } /* ---------- 目录树 ---------- */ .dir-list { padding: 10px 8px; } .dir-sub { padding-left: 16px; margin-left: 7px; border-left: 1px solid var(--border); } .dir-item { position: relative; } .dir-item.active::before { display: none; } /* 用浅染药丸代替左竖条 */ .dir-row { min-height: 38px; padding: 7px 12px; display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-1); transition: background var(--ease), color var(--ease); border-radius: var(--pill); margin: 2px 4px; } .dir-row:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } .dir-item.active > .dir-row { background: var(--accent-weak); color: var(--accent-strong); box-shadow: inset 0 0 0 1px rgba(63, 168, 103, .22); } .dir-item.active > .dir-row .dir-name { font-weight: 700; } /* 拖拽放置落点指示（需求3：hover 时给出明确「会放到哪里」的动效提醒） */ .dir-row.drop-inside { background: var(--accent-weak); color: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent-strong); } .dir-row.drop-before, .dir-row.drop-after { position: relative; } .dir-row.drop-before::before, .dir-row.drop-after::after { content: ''; position: absolute; left: 10px; right: 10px; height: 3px; background: var(--accent-strong); border-radius: 2px; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; } .dir-row.drop-before::before { top: -2px; } .dir-row.drop-after::after { bottom: -2px; } .dir-row.drag-source { opacity: .45; } .caret { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); transition: transform var(--ease); } .caret.open .icon { transform: rotate(90deg); } .caret.leaf { visibility: hidden; } .caret.dot { cursor: default; } .caret.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); } .dir-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 14px; position: relative; } .dir-name .icon { color: var(--text-3); flex: none; } .dir-item.active > .dir-row .dir-name .icon { color: var(--accent-strong); } .dir-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-name.is-truncated { cursor: default; } .name-tip { position: fixed; z-index: 80; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: normal; background: var(--text-1); color: #fff; font-size: 12px; line-height: 1.5; font-weight: 400; padding: 5px 10px; border-radius: var(--radius-xs); box-shadow: var(--shadow-3); pointer-events: none; } .name-tip[hidden] { display: none; } .dir-del { color: var(--text-3); font-size: 12px; flex: none; opacity: 0; transition: var(--ease); padding: 2px 6px; border-radius: var(--radius-xs); } .dir-row:hover .dir-del { opacity: 1; } .dir-del:hover { color: var(--danger); background: var(--danger-weak); } .dir-rename { color: var(--text-3); font-size: 12px; flex: none; opacity: 0; transition: var(--ease); padding: 2px 6px; border-radius: var(--radius-xs); } .dir-row:hover .dir-rename { opacity: 1; } .dir-rename:hover { color: var(--accent-strong); background: var(--accent-soft-tint); } .dir-dots { flex: none; width: 26px; height: 26px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-3); font-size: 20px; line-height: 1; border-radius: var(--radius-xs); cursor: pointer; /* 需求3：默认隐藏（opacity:0），仅 hover 或键盘聚焦时显示；保留 display:inline-flex 不位移 */ opacity: 0; transition: opacity var(--ease), background var(--ease), color var(--ease); } /* 行 hover 或键盘聚焦到行内任一元素时显出三点（更易发现，也兼顾键盘可达性） */ .dir-row:hover .dir-dots, .dir-row:focus-within .dir-dots { opacity: 1; } .dir-dots:hover, .dir-dots:focus-visible { opacity: 1; background: var(--accent-soft-tint); color: var(--accent-strong); } /* 方案 B：目录节点下直接渲染的附件列表（token 取回 + 本人/管理员可删除） */ .dir-files { padding-left: 16px; margin-left: 7px; border-left: 1px solid var(--border); } .file-leaf .file-row { min-height: 34px; padding: 5px 12px; gap: 6px; } .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-1); } .file-size { flex: none; font-size: 11px; color: var(--text-3); } .file-dl, .file-del { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-3); border-radius: var(--radius-xs); cursor: pointer; transition: var(--ease); } .file-dl .icon, .file-del .icon { width: 15px; height: 15px; } .file-dl:hover { color: var(--accent-strong); background: var(--accent-soft-tint); } .file-del { opacity: 0; } .file-row:hover .file-del { opacity: 1; } .file-del:hover { color: var(--danger); background: var(--danger-weak); } /* ---------- 目录行三点浮层菜单（ctx-menu） ---------- */ /* 关键：必须 position:fixed + 高 z-index，否则菜单会作为静态块落到页面底部而不可见， 表现为"点三点没反应"。v4 重设计曾漏掉这组样式，导致菜单无定位/无外观。 */ .ctx-menu { position: fixed; z-index: 100; min-width: 168px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-3); padding: 6px; font-size: 14px; color: var(--text-1); animation: ctxPop var(--ease); } @keyframes ctxPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-xs); cursor: pointer; color: var(--text-1); white-space: nowrap; user-select: none; transition: var(--ease); } .ctx-item:hover, .ctx-item:focus-visible { background: var(--accent-soft-tint); color: var(--accent-strong); outline: none; } .ctx-item.danger { color: var(--danger); } .ctx-item.danger:hover, .ctx-item.danger:focus-visible { background: var(--danger-weak); color: var(--danger); } /* ---------- 报告列表卡片（v4 小卡 + grid 多列） ---------- */ /* v6.8: 顶层组之间用 dir-section 自带的 1px 顶边线主导节奏，gap 收小 */ .report-list { display: flex; flex-direction: column; gap: 0; } .report-grid { display: grid; /* v8.5（需求5）：列最小宽 240 → 260，卡片整体更舒展 */ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } /* 每个文件夹网格末尾的「展开 N 张 / 收起」折叠按钮（一行 + 多余收起） */ .grid-clamp-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: var(--pill); background: var(--surface); color: var(--accent-strong); border: 1px solid var(--accent-weak); cursor: pointer; font-family: inherit; box-shadow: var(--shadow-1); transition: var(--ease); } .grid-clamp-toggle:hover { background: var(--accent-soft-tint); color: var(--accent-strong); border-color: var(--accent); } .grid-clamp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .report-card { background: var(--surface); border: none; border-radius: var(--radius-lg); /* v8.5（需求5）：卡片适当加大——padding 14/16 → 16/18 */ padding: 16px 18px; box-shadow: var(--shadow-1); transition: transform var(--ease), box-shadow var(--ease); display: flex; flex-direction: column; gap: 10px; min-width: 0; /* v8.5（需求2）：锁定宽度=所在网格轨道宽，点击/聚焦绝不变宽；盒模型锁死 + outline:none（避免浏览器默认焦点轮廓） */ box-sizing: border-box; width: 100%; max-width: 100%; outline: none; /* v8.8(#486):为多选 checkbox 覆盖层提供定位锚点 */ position: relative; } /* v8.5（需求2）：键盘焦点指示用 inset 软环 + 外部阴影保持 shadow-1（与常态一致，不增大视觉尺寸），杜绝「点击变宽」错觉 */ .report-card:focus-visible { box-shadow: var(--shadow-1), inset 0 0 0 2px var(--accent); } .report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .report-card-title { /* v8.5（需求5）：标题字号 15 → 16，卡片更醒目 */ font-size: 16px; font-weight: 700; color: var(--text-1); line-height: 1.45; /* v8.5（需求3）：固定预留两行高度，即使标题只占一行也占两行空间， 保证所有卡片的标题下边界 + 三个按钮都在同一水平线 */ min-height: calc(1.45em * 2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer; } /* v6.8：作者/时间与阅读/人数合并到同一行（meta），视觉重心更聚合，操作按钮独立贴底 */ .report-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); } /* 内部用 ::before 在阅读数前加分隔点，与作者·时间形成「A · B · 👁 120 · 👤 5」连续节奏 */ .report-card-meta .dot { color: var(--border-strong); } /* v8.7：目录右边报告缩略卡片（grid 视图）的上传者头像——16px 圆，与 meta 行 12px 字号视觉协调 */ .report-card-uploader { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); min-width: 0; } /* v8.7.2：grid card 18px 头像——与 .report-row 头像同尺寸，跨视图视觉一致。 - 18×18 圆能容下两字 11px（中文字符宽 ≈ 11px × 2 ≈ 22px，圆内正好贴齐） - 三锁定：width/height/flex-basis 同 px + box-sizing:border-box， 否则 inline-flex 子元素默认 min-width:auto=字符内禀宽 → 撑成椭圆（v8.7 BUG） */ .report-card .comment-avatar { width: 22px; height: 22px; flex: 0 0 22px; box-sizing: border-box; box-shadow: 0 0 0 1px var(--surface); /* 1px 边框让圆从卡片背景剥离 */ } .report-card .avatar { width: 100%; height: 100%; } .report-card .avatar.two { font-size: 11px; } /* 22px 圆两字用 11px（中文 ≈ 22px 宽，刚好贴齐） */ .report-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 6px; } /* v6.8: 阅读/人数已迁移到 meta 行，foot 容器保留但清空（aria-hidden）—— 视觉上不可见、不占高 */ .report-card-foot[aria-hidden="true"] { display: none; } .report-card-foot .views, .report-card-foot .viewers { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 12px; } .report-card-foot .views .icon, .report-card-foot .viewers .icon { width: 14px; height: 14px; } /* 报告卡操作按钮组（小卡用紧凑胶囊按钮） v6.9：强制 flex-wrap:nowrap，使「分享 / 重命名 / 删除」始终排成一行（避免 hover 时按钮换行 导致卡片高度抖动）。按钮内文本再 nowrap，溢出由父 grid 的 1fr 兜底撑开。 */ .report-card-actions { display: flex; gap: 6px; flex-wrap: nowrap; /* v8.5（需求4）：不再裁切溢出内容——原先的溢出裁切会切掉三个按钮底部的投影， 导致「只看到左右阴影、看不到下方阴影」。靠 flex-wrap:nowrap 防换行抖动（按钮已在 .rc-btn 基类 flex-shrink:0 不收缩）。 */ } .rc-btn { display: inline-flex; align-items: center; gap: 4px; min-width: 0; /* v8.5（需求4）：按钮不收缩，避免 .report-card-actions 内 nowrap 时被压扁 */ flex-shrink: 0; height: 28px; padding: 0 10px; border: none; background: var(--surface); color: var(--text-2); border-radius: var(--pill); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: var(--shadow-1); transition: var(--ease); white-space: nowrap; } .rc-btn:hover { background: var(--accent-soft-tint); color: var(--accent-strong); box-shadow: var(--shadow-2); } .rc-btn .icon { width: 12px; height: 12px; stroke-width: 2; flex-shrink: 0; } .rc-btn.danger:hover { background: var(--danger-weak); color: var(--danger); } .rc-btn.primary { background: var(--accent-soft-tint); color: var(--accent-strong); } .rc-btn.primary:hover { background: var(--accent-strong); color: #fff; box-shadow: var(--shadow-2); } /* 报告徽章（顶部右上角） */ .badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; border-radius: var(--pill); font-size: 11px; font-weight: 700; letter-spacing: .4px; background: var(--accent-weak); color: var(--accent-strong); } .badge.danger { background: var(--danger-weak); color: var(--danger); } .badge.warn { background: #FFF7E5; color: #A87800; } .badge.success { background: #DEF4E5; color: var(--success); } .badge.neutral { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); } /* ---------- 阅读器 ---------- */ /* v6.9：取消硬边框（border:none），改用加强阴影（var(--shadow-2)）浮起 —— 阴影代替边框分隔， 与顶栏主题切换按钮一致视觉语言（需求3）。head 与 stage 仍为普通区块。 */ .reader { background: var(--surface); border: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-2); padding: var(--canvas-pad); overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0; } .reader-head { display: flex; align-items: center; gap: 12px; padding: 0 0 16px 0; flex-wrap: wrap; } /* v8.4（需求8）：报告标题再左缩进一点——给左侧 flex 容器加 padding-left 让标题远离边缘 */ .reader-head-left { flex: 1 1 200px; min-width: 0; padding-left: 10px; } /* v8.4（需求8）：右侧按钮再往右缩进一点——给右侧 flex 容器加 padding-right 让按钮远离边缘（同时不影响居中布局） */ .reader-head-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; padding-right: 10px; } /* 阅读器头按钮：两个按钮同尺寸/无边框/底部柔和阴影，hover 抬起 — 避免「返回」(.btn.ghost) 与「分享」(.rc-btn.primary) 大小不一、配色繁杂 */ .reader-head-right .rc-btn { border: none; box-shadow: 0 2px 8px rgba(31, 35, 41, .08); /* 需求4：与嵌入页「在新窗口打开」(.btn.ghost) 尺寸/字号对齐（padding/font/weight 一致） */ height: auto; padding: 8px 18px; font-size: 13px; font-weight: 700; gap: 6px; } .reader-head-right .rc-btn .icon { width: 14px; height: 14px; stroke-width: 1.8; } .reader-head-right .rc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31, 35, 41, .12); } .reader-title { font-size: 17px; font-weight: 700; color: var(--text-1); } /* 文件型报告（上传的 PDF/图片等）：标题下方显示文件名 + 大小 */ .reader-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; font-weight: 500; } /* 阅读器头的「下载」以 承载 .rc-btn 样式，去掉链接默认下划线 */ a.rc-btn { text-decoration: none; } .reader-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .reader-meta .dot { color: var(--border-strong); } .reader-frame { width: 100%; flex: 1; min-height: 0; height: 100%; border: 0; background: transparent; display: block; } .reader-empty { padding: 40px 20px; color: var(--text-3); text-align: center; } /* 阅读器承载区（iframe + 加载遮罩 + 划词弹出按钮 共同定位上下文） */ .reader-stage { position: relative; min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* 「报告渲染中…」遮罩：v3 重写时漏了样式，此处补回——绝对居中覆盖 iframe */ .reader-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(255, 255, 255, .92); color: var(--text-2); font-size: 14px; font-weight: 600; z-index: 3; backdrop-filter: blur(2px); } .reader-loading[hidden] { display: none; } .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent-strong); border-radius: 50%; animation: reader-spin .8s linear infinite; } @keyframes reader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--accent); } } /* 划词弹出的「评论」按钮（父页面，避免被报告 CSS 遮挡） */ .float-comment { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--accent-strong); color: #fff; border: 1px solid var(--accent-strong); border-radius: var(--pill); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-accent-soft); transform: translateY(-2px); transition: background var(--ease), transform var(--ease), box-shadow var(--ease); } .float-comment:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 6px 20px rgba(47,149,84,.28); transform: translateY(-3px); } .float-comment[hidden] { display: none; } .float-comment .icon { width: 14px; height: 14px; } /* M6-C：划词同时弹出"评论/待办"，共享位置 */ .float-pick { position: absolute; z-index: 5; display: inline-flex; gap: 6px; transform: translateY(-2px); } .float-pick[hidden] { display: none; } .float-pick .float-comment, .float-pick .float-todo { position: static; transform: none; } .float-todo { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--surface); color: var(--accent-strong); border: 1px solid var(--accent-strong); border-radius: var(--pill); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1); transition: background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease); } .float-todo:hover { background: var(--accent-soft-tint); transform: translateY(-2px); box-shadow: var(--shadow-2); } .float-todo .icon { width: 14px; height: 14px; } /* M6-C：划词进入待办 composer 时顶部的引用行 */ .todo-pending-quote { margin: 8px 12px 0; background: var(--accent-weak); border-left: 3px solid var(--accent-strong); padding: 6px 10px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: 12px; color: var(--accent-ink); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .todo-pending-clear { font-size: 12px; color: var(--text-3); flex: 0 0 auto; } .todo-pending-clear:hover { color: var(--danger); } /* M6-C：评论转待办后，待办面板上的"跳到原文"链接 */ .todo-back-origin { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12px; padding: 2px 8px; border-radius: var(--pill); background: var(--accent-soft-tint); color: var(--accent-strong); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600; } .todo-back-origin:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-hover); } /* M12-F：原文摘录改为可折叠——默认 hidden（由 JS 控制），展开时才占整行，不挤压待办文本 */ .todo-source-quote { flex: 1 1 100%; align-self: stretch; margin: 4px 0 2px; padding: 6px 10px; font-size: 12px; line-height: 1.5; color: var(--text-2); background: var(--quote-weak); border-left: 3px solid var(--warn); border-radius: 4px; word-break: break-word; } .todo-source-quote[hidden] { display: none; } .todo-quote-label { font-weight: 600; color: var(--text-1); } .todo-quote-text { color: var(--text-2); } /* M12-F：「原文」标识——常驻小标签，点击跳原文位置（参考评论的原文标识） */ .todo-origin-tag { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--accent-strong); background: var(--accent-weak); border-radius: 999px; padding: 2px 9px; cursor: pointer; user-select: none; transition: filter var(--ease); } .todo-origin-tag:hover { filter: brightness(.96); } /* M6-UI1：编辑态：textarea 居左、按钮列右侧上下排布；按钮白底阴影+绿字 */ /* M10-A：编辑态时整条切换为 block 全宽，避免被 .todo-item 的 flex 横向压缩；按钮列右对齐、输入框舒展 */ .todo-item:has(.todo-edit-wrap) { display: block; } .todo-edit-wrap { display: flex; align-items: stretch; gap: 12px; margin-top: 6px; width: 100%; } .todo-edit-textarea { flex: 1 1 auto; min-height: 60px; resize: vertical; min-width: 0; padding: 8px 12px; box-sizing: border-box; } .todo-edit-btncol { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 6px; flex: 0 0 auto; min-width: 64px; align-self: flex-end; } .todo-edit-btncol .btn-white-green { width: auto; min-width: 64px; } /* M6-UI1/UI2/UI4：通用白底 + 阴影 + 彩色文字按钮族（M8-C 去边框、加阴影） */ .btn-white-green, .btn-white-blue { appearance: none; cursor: pointer; font: inherit; border-radius: var(--pill); padding: 6px 14px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--accent-strong); border: none; box-shadow: var(--shadow-1); transition: background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease); display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-white-green:hover { background: var(--accent-soft-tint); color: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-2); } /* M20：钉钉 logo 跟随按钮字色（绿色）—不再锁钉钉蓝，与按钮整体视觉统一 */ .btn-white-green .dingtalk-icon { color: inherit; flex: 0 0 16px; } .btn-white-green:active { transform: translateY(0); } .btn-white-blue { color: #0F6FC9; } .btn-white-blue:hover { background: rgba(15, 111, 201, .08); color: #0F6FC9; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(15, 111, 201, .22); } .btn-white-blue:active { transform: translateY(0); } .btn-white-green:disabled, .btn-white-blue:disabled { opacity: .5; cursor: not-allowed; } .todo-overview-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; gap: 12px; } .overview-tabs { flex: 0 0 auto; } /* M6-C：发送模态「单独通知本人」复选框 */ /* M17：背景改为暖色（var(--quote-weak)）—— "推荐选项" 视觉提示，与表面 2 的中灰区分 */ .bot-checkbox-wrap { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; background: var(--quote-weak); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-2); cursor: pointer; } .bot-checkbox-wrap input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; } .bot-checkbox-wrap span { flex: 1; min-width: 0; line-height: 1.5; } /* M6-C：评论「转为待办」操作链接 */ .comment .actions a.to-todo { color: var(--accent-strong); } .comment .actions a.to-todo:hover { color: var(--accent-hover); } .breadcrumb-bar { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); padding: 12px 4px 0; } .breadcrumb-bar a { color: var(--accent-strong); cursor: pointer; } .breadcrumb-bar a:hover { text-decoration: underline; } .breadcrumb-bar .crumb-current { color: var(--text-1); font-weight: 700; } .breadcrumb-bar .sep { color: var(--border-strong); } /* ---------- 评论 ---------- */ .comment-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 18px; } .comment { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--surface); border-radius: var(--radius-sm); transition: background var(--ease); } .comment-head { display: flex; align-items: center; gap: 8px; } .comment-head .name { font-size: 13px; font-weight: 700; color: var(--text-1); } .comment-head .role { font-size: 10px; color: var(--text-3); } .comment .text { font-size: 13px; color: var(--text-1); white-space: pre-wrap; word-break: break-word; line-height: 1.6; margin: 2px 0; } .comment .time { color: var(--text-3); font-size: 12px; } .comment .quote { background: var(--accent-weak); border-left: 3px solid var(--accent-strong); padding: 6px 10px; font-size: 12px; color: var(--accent-ink); margin: 8px 0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comment .body { font-size: 13px; color: var(--text-1); white-space: pre-wrap; word-break: break-word; line-height: 1.6; margin-top: 4px; } .comment .actions { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; } .comment .actions a { color: var(--accent-strong); cursor: pointer; } .comment .actions a:hover { color: var(--accent-hover); } .comment .actions a.del { color: var(--text-3); } .comment .actions a.del:hover { color: var(--danger); } .comment .replies { margin-left: 14px; padding-left: 12px; margin-top: 10px; border-left: 2px solid var(--accent-weak); } .comment.flash { animation: flash 1.2s ease; } @keyframes flash { 0% { background: #FFF7D6; } 100% { background: transparent; } } .deleted { color: var(--text-3); font-style: italic; } .replies-toggle { margin: 8px 0 0 14px; font-size: 12px; } .replies-toggle a { color: var(--text-2); cursor: pointer; } .replies-toggle a:hover { color: var(--accent-strong); } .more-replies { display: inline-block; margin: 10px 0 0 14px; font-size: 12px; color: var(--accent-strong); cursor: pointer; } .more-replies:hover { color: var(--accent-hover); } .reply-box { margin-top: 10px; } .comment .replies .comment { border-bottom: 1px solid var(--border); } .comment .replies .comment:last-child { border-bottom: none; } .collapse-toolbar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; padding: 2px 0; position: sticky; top: 0; z-index: 2; background: var(--surface); } .collapse-btn { font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--pill); padding: 4px 12px; cursor: pointer; transition: var(--ease); } .collapse-btn:hover { color: var(--accent-strong); border-color: var(--accent-strong); background: var(--accent-soft-tint); } .collapse-btn.active { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); } /* 顶层评论卡片化 */ .comment-entry { border: none; border-radius: var(--radius); background: var(--surface); overflow: hidden; margin-bottom: 10px; transition: box-shadow .15s ease; box-shadow: var(--shadow-1); } .comment-entry[open] { box-shadow: var(--shadow-2); } .comment-entry-sum { display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin: 0; cursor: pointer; list-style: none; user-select: none; outline: none; } .comment-entry-sum::-webkit-details-marker { display: none; } .comment-entry-sum:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-weak); } .comment-entry-sum:hover { background: var(--accent-soft-tint); } .ce-avatar { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-2); } .ce-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ce-meta { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; } .ce-nick { font-size: 13px; font-weight: 700; color: var(--text-1); } .ce-time { font-size: 12px; color: var(--text-3); } .ce-anchor-tag { font-size: 11px; color: var(--accent-strong); background: var(--accent-weak); border: 1px solid var(--accent-weak); border-radius: var(--radius-xs); padding: 1px 7px; flex-shrink: 0; font-weight: 700; } .ce-replies { font-size: 12px; color: var(--text-3); flex-shrink: 0; } .ce-chev { margin-left: 2px; color: var(--text-3); font-size: 13px; flex-shrink: 0; transition: transform .18s ease; transform: rotate(-90deg); line-height: 1; } .comment-entry[open] .ce-chev { transform: rotate(0deg); } .comment-entry > .comment { padding: 0 14px 12px; } /* 评论撰写框（v4: 边框更浅、圆角更大，像「聊天输入框」;v6.4 容器底边线也一并去掉 — 与右上评论框呼应整体无边框语言） */ .comment-compose { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 8px; border-bottom: none; background: var(--surface); } .compose-input { width: 100%; min-height: 68px; resize: vertical; padding: 10px 14px; border: none !important; border-radius: var(--radius); font-family: inherit; font-size: 13px; color: var(--text-1); background: var(--surface-2); box-shadow: var(--shadow-1); transition: box-shadow var(--ease), background var(--ease); } .compose-input:hover { box-shadow: var(--shadow-2); } .compose-input:focus { outline: none; background: var(--surface); box-shadow: var(--shadow-focus); } .compose-input::placeholder { color: var(--text-3-soft); } .compose-toolbar { display: flex; align-items: center; gap: 8px; } .compose-toolbar .hint { color: var(--text-3); font-size: 12px; } .compose-toolbar .btn { margin-left: auto; } /* @通知复选框：独占一行（块级 flex），不与评论框/发表按钮同行； 关键：display:flex(块级) 避免回复框等非 flex 容器内与 textarea 挤在同一行。 [hidden] 必须显式 display:none，否则 display:flex 会盖掉 HTML hidden 属性。 */ .notify-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--text-2); } .notify-row[hidden] { display: none; } .notify-cb { width: 15px; height: 15px; flex: none; accent-color: var(--accent); cursor: pointer; } .notify-text { line-height: 1.4; } /* ---------- 按钮（统一） ---------- */ .btn { background: var(--accent-strong); color: #fff; border: none; border-radius: var(--pill); padding: 8px 18px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: var(--ease); letter-spacing: .2px; box-shadow: var(--shadow-1); } .btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent-soft); transform: translateY(-1px); } .btn.ghost { background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-1); } .btn.ghost:hover { background: var(--accent-soft-tint); color: var(--accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn.danger { background: var(--danger); } .btn.danger:hover { background: #C03B40; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* M6：次级按钮 / 钉钉转发按钮 —— 历史 .btn-ghost 缺样式 fallback 到浏览器默认（白底黑边） 导致"发送到钉钉群"看着突兀，现补全：钉钉蓝渐变 + 内嵌 logo SVG。*/ .btn-ghost { background: linear-gradient(180deg, #1A8FE3 0%, #0F6FC9 100%); color: #fff; border: none; border-radius: var(--pill); padding: 8px 14px 8px 12px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: var(--ease); box-shadow: 0 1px 2px rgba(15, 111, 201, 0.18); letter-spacing: .2px; } .btn-ghost:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15, 111, 201, 0.28); } .btn-ghost:active { transform: translateY(0); } .btn-ghost:disabled { opacity: .5; cursor: not-allowed; } .btn-ghost .dingtalk-icon { width: 16px; height: 16px; flex: 0 0 16px; } /* 评论/待办 compose 区按钮行 */ .compose-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .btn .icon { stroke-width: 1.8; } /* ---------- 模态框 ---------- */ .modal-mask { position: fixed; inset: 0; background: rgba(20, 28, 46, .42); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; } .modal-mask[hidden] { display: none; } .modal { background: var(--surface); border-radius: var(--radius-xl); padding: 28px; width: 460px; max-width: 100%; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(31, 35, 41, .18); } .modal h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--text-1); } .modal label { display: block; font-size: 13px; color: var(--text-2); margin: 16px 0 6px; font-weight: 600; } .modal input[type="text"], .modal input:not([type]), .modal select, .modal textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 14px; font-family: inherit; font-size: 13px; color: var(--text-1); background: var(--surface); transition: var(--ease); } .modal input::placeholder, .modal textarea::placeholder { color: var(--text-3); } .modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--accent-strong); box-shadow: var(--shadow-focus); } .modal input[type="file"] { font-size: 13px; color: var(--text-2); } .modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; } .modal .hint { font-size: 12px; color: var(--text-3); margin-top: 10px; line-height: 1.5; } /* ---------- 发送到钉钉群弹窗（M3） ---------- */ .modal-select { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 14px; font-family: inherit; font-size: 13px; color: var(--text-1); background: var(--surface); transition: var(--ease); } .modal-select:focus { outline: none; border-color: var(--accent-strong); box-shadow: var(--shadow-focus); } .bot-choose { display: flex; gap: 8px; margin-top: 10px; align-items: center; } .bot-choose input { flex: 1; } .bot-will { margin-top: 10px; font-size: 13px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; } .bot-temp { margin-top: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; } .bot-temp summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); } .bot-temp-body { margin-top: 8px; } .bot-save-wrap { margin-bottom: 4px; } .bot-warn { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: 8px 10px; margin: 10px 0; line-height: 1.5; } .bot-preview { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 64px; } .bot-err { color: var(--danger, #c0392b); } /* ---------- 进度条 / 抽屉背景 ---------- */ .progress { margin-top: 14px; height: 6px; background: var(--border); border-radius: var(--pill); overflow: hidden; } .progress[hidden] { display: none; } .progress-bar { height: 100%; width: 0%; background: var(--accent-strong); border-radius: var(--pill); transition: width .15s ease; } .progress-text { font-size: 12px; color: var(--text-2); margin-top: 6px; text-align: right; } .up-size { font-size: 12px; color: var(--text-2); margin-top: 6px; } .up-size.over { color: #c0392b; font-weight: 600; } .up-file { font-size: 13px; color: var(--text-1); margin: 2px 0 10px; word-break: break-all; } .drawer-backdrop { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(20, 28, 46, .36); backdrop-filter: blur(2px); z-index: 35; opacity: 0; visibility: hidden; transition: opacity var(--ease), visibility var(--ease); } .drawer-backdrop.show { opacity: 1; visibility: visible; } /* ---------- 响应式 ---------- */ @media (max-width: 1024px) { .layout { grid-template-columns: 1fr !important; grid-template-areas: "content"; } .layout > .content { grid-area: content; } .sidebar, .comments { position: fixed; top: calc(var(--topbar-h) + var(--canvas-pad)); bottom: var(--canvas-pad); z-index: 40; width: min(var(--sidebar-w), 84vw); transition: transform var(--ease); box-shadow: var(--shadow-3); } .sidebar { left: var(--canvas-pad); transform: translateX(-110%); } .sidebar:not(.collapsed-drawer) { transform: translateX(0); } .comments { right: var(--canvas-pad); width: min(var(--comments-w), 88vw); transform: translateX(110%); } .comments:not(.collapsed-drawer) { transform: translateX(0); } .sidebar .panel-head, .comments .panel-head { flex-direction: row; height: 48px; padding: 0 16px; } .sidebar .panel-title, .comments .panel-title { writing-mode: horizontal-tb; letter-spacing: normal; color: var(--text-2); } .sidebar .panel-actions, .comments .panel-actions { flex-direction: row; } .sidebar .panel-body, .comments .panel-body { display: block; } .topbar-toggle { display: inline-flex; } .content { padding: 16px; } .sidebar-resizer { display: none; } } @media (max-width: 560px) { .report-grid { grid-template-columns: 1fr; } .breadcrumb { display: none; } .brand-sub { display: none; } } /* ---------- 动效偏好 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .spinner { animation: none; border-top-color: var(--accent-strong); } } /* ---------- 评论 @提及 ---------- */ .mention { color: var(--accent-strong); background: var(--accent-weak); border-radius: var(--radius-xs); padding: 1px 5px; font-weight: 700; cursor: pointer; } .mention-drop { position: fixed; z-index: 1200; min-width: 180px; max-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-3); overflow: hidden; padding: 6px; } .mention-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-xs); cursor: pointer; font-size: 14px; } .mention-item .avatar { width: 22px; height: 22px; font-size: 12px; } .mention-item.active, .mention-item:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } /* v8.8(#485):报告日期筛选 chip 组——放在 #content 顶部 */ .date-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 4px 12px; margin: 0 0 4px; } .date-filter-label { font-size: 13px; color: var(--text-3); font-weight: 600; } .date-filter-group { display: inline-flex; gap: 6px; background: var(--surface); border-radius: var(--pill); padding: 3px; } .date-filter-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: var(--pill); border: 0; cursor: pointer; background: transparent; color: var(--text-2); transition: background 120ms ease, color 120ms ease; } .date-filter-chip:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } .date-filter-chip.is-active { background: var(--accent-strong); color: #fff; box-shadow: var(--shadow-1); } .date-filter-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* v8.8(#486):报告多选 checkbox 覆盖层——绝对定位左上角,默认隐藏,multi-select 模式开启时显示。 选中态:卡片整张加 .is-selected(强化阴影 + accent 描边),checkbox 切到 filled 态 */ .report-card-check { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); cursor: pointer; display: none; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease; z-index: 2; } body.multi-select-mode .report-card-check { display: inline-flex; } body.multi-select-mode .report-card { padding-left: 44px; } .report-card.is-selected .report-card-check { background: var(--accent-strong); border-color: var(--accent-strong); } .report-card.is-selected .report-card-check::after { content: ''; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); } .report-card.is-selected { box-shadow: var(--shadow-2), inset 0 0 0 2px var(--accent); } /* 批量删除底栏:fixed 在视口底部,跨滚动可见 */ .batch-action-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--surface); border-radius: var(--pill); box-shadow: var(--shadow-3); z-index: 50; font-size: 14px; } .batch-action-bar .count-label { font-weight: 700; color: var(--text-1); } .batch-action-bar .count-label strong { color: var(--accent-strong); font-size: 16px; margin: 0 4px; } .batch-action-bar button { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--pill); border: 0; cursor: pointer; font-family: inherit; background: var(--surface-2); color: var(--text-1); transition: background 120ms ease; } .batch-action-bar button:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } .batch-action-bar button:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .batch-action-bar button.primary { background: var(--accent-strong); color: #fff; } .batch-action-bar button.primary:hover { background: var(--accent-hover); color: #fff; } .batch-action-bar button.danger { background: var(--danger); color: #fff; } .batch-action-bar button.danger:hover { background: var(--danger-hover, #b03030); color: #fff; } .batch-action-bar button.danger:disabled { opacity: .4; cursor: not-allowed; } /* v8.8(#486):「批量管理」按钮在 date-filter-bar 右侧,multi-select 模式下变成「退出批量」 */ .batch-toggle-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: var(--pill); border: 0; cursor: pointer; background: var(--surface-2); color: var(--text-1); transition: background 120ms ease; } .batch-toggle-btn:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } .batch-toggle-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .batch-toggle-btn.is-on { background: var(--accent-soft-tint); color: var(--accent-strong); } /* ---------- 评论 / 高亮闪烁 ---------- */ .comment.flash { animation: commentFlash 1.2s ease; border-radius: var(--radius-sm); } @keyframes commentFlash { 0% { background: rgba(255, 212, 59, 0.55); } 50% { background: rgba(255, 243, 191, 0.35); } 100% { background: transparent; } } .actions a { margin-right: 12px; } /* ---------- 分享弹窗 ---------- */ .share-row { display: flex; gap: 8px; align-items: center; } .share-row input { flex: 1; } .hint { color: var(--text-3); font-size: 13px; line-height: 1.5; } /* 标签页 hint 改 icon + 自定义 popover:占据面积小,mouseenter 立即显示完整说明(零延迟,优于浏览器原生 title)。 结构:.hint-tip-wrap(相对定位)> .hint-tip(触发器 ⓘ) + .hint-tip-pop(默认隐藏,absolute 定位).open=显示 */ .hint-tip-wrap { position: relative; display: inline-flex; } .hint-tip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 12px; line-height: 1; cursor: help; user-select: none; margin-left: 4px; transition: background .15s, color .15s; } .hint-tip:hover, .hint-tip:focus-visible { background: var(--accent-soft); color: var(--accent-strong); outline: none; } .hint-tip-pop { position: absolute; left: 24px; top: 50%; transform: translateY(-50%) translateY(-4px); background: var(--surface); color: var(--text-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; min-width: 240px; max-width: 360px; font-size: 12px; line-height: 1.55; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility .12s, transform .12s ease; z-index: 100; white-space: normal; } .hint-tip-pop.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateY(0); } /* ---------- 顶栏文字链接 ---------- */ .topbar-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-strong); font-size: 14px; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: var(--pill); background: transparent; border: 0; cursor: pointer; text-decoration: none; transition: background 120ms ease, color 120ms ease; } .topbar-link:hover { background: var(--accent-soft-tint); color: var(--accent-hover); } .topbar-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .topbar-link .icon { width: 16px; height: 16px; stroke: currentColor; } .topbar-link.muted { color: var(--text-3); } .topbar-link.muted:hover { background: var(--surface-2); color: var(--text-2); } /* ---------- 评论整条可点 ---------- */ .comment.has-anchor { cursor: pointer; transition: background 120ms ease; } .comment.has-anchor:hover { background: var(--accent-soft-tint); } /* ---------- 列表按目录结构分组 ---------- */ /* ---------- 报告列表分组层级（v6.8 重新设计）---------- 核心问题：原 dir-section 父子目录样式完全相同（同样的 16px 加粗 + 文件夹图标 + 徽章）， 视觉上看不出谁是父谁是子；报告卡片与分组标题也没有从属关系。 修复思路：纯 CSS 表达层级 + 节奏，不改 DOM / JS。 - 顶层组（不在 .dir-subsections 内）：左侧 3px accent 竖条作为层级锚，更大字号 / 字重 - 子组（嵌在 .dir-subsections 内）：左缩进 24px，小字号，靠 1px 引导虚线与上方父组呼应 - 子组与紧随的报告网格用 14px 留白 + 顶边线，让眼睛自然往下走 - 顶层组之间用 18px 间距 + 顶边线区分（"新分组开始了"） */ .dir-section { margin-bottom: 0; padding-top: 18px; /* v8.3：卡片底部与下方分组分割线之间留白，避免紧贴（需求1） */ padding-bottom: 14px; border-top: 1px solid var(--border-soft); } .dir-section:first-child { border-top: none; padding-top: 4px; } /* v8.8(#484):文件夹折叠态隐藏网格 + 子目录;head 始终保留 */ .dir-section[data-folded="true"] > .report-grid, .dir-section[data-folded="true"] > .dir-subsections { display: none; } /* v8.8(#484):chevron 折叠按钮——单 icon + CSS 90° 旋转,展开=向下,收起=向右 */ .dir-fold-chev { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; padding: 0; border: 0; cursor: pointer; background: transparent; color: var(--text-3); border-radius: var(--radius-xs); transition: background 120ms ease, color 120ms ease, transform .15s ease; } .dir-fold-chev:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } .dir-fold-chev:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .dir-fold-chev .icon { width: 14px; height: 14px; stroke: currentColor; fill: none; } /* 默认(folded=false)=展开态→旋转 90°(向下);folded=true→0°(向右) */ .dir-fold-chev { transform: rotate(90deg); } .dir-section[data-folded="true"] > .dir-section-head .dir-fold-chev { transform: rotate(0deg); } /* 折叠态 head 减下边距(因为没有内容显示) */ .dir-section[data-folded="true"] > .dir-section-head { margin-bottom: 0; } .dir-section-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 4px; } /* 顶层组（左竖条 + 更大字号 + 上下分隔）：父组是页面节奏的"主标题" */ .dir-section > .dir-section-head { position: relative; padding-left: 14px; font-weight: 800; } .dir-section > .dir-section-head::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--accent-strong); border-radius: 2px; } .dir-section > .dir-section-head .dir-section-name { font-size: 17px; font-weight: 800; letter-spacing: -.2px; } /* 子组（嵌在 .dir-subsections 里）：缩进 + 小字号 + 虚线引导 = 明确从属于父组 */ .dir-subsections > .dir-section { padding-top: 14px; border-top: none; margin-left: 24px; } .dir-subsections > .dir-section:first-child { padding-top: 4px; } .dir-subsections > .dir-section > .dir-section-head { padding-left: 0; } .dir-subsections > .dir-section > .dir-section-head::before { display: none; } .dir-subsections > .dir-section > .dir-section-head .dir-section-name { font-size: 13.5px; font-weight: 600; color: var(--text-2); } .dir-section-name { display: inline-flex; align-items: center; gap: 6px; color: var(--text-1); } .dir-section-name .icon { width: 16px; height: 16px; stroke: var(--text-3); } .dir-subsections > .dir-section > .dir-section-head .dir-section-name .icon { width: 14px; height: 14px; } .dir-section-count { color: var(--accent-strong); background: var(--accent-weak); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--pill); } /* 子组的徽章弱化：跟从父组的视觉权重，否则"双周 2份"和"济南分校 2份"一样亮，层级就丢了 */ .dir-subsections > .dir-section > .dir-section-head .dir-section-count { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border-soft); } /* 子组到报告网格的连接：左侧虚线从子组标题延伸到卡片列，让眼睛自然顺着走到具体报告 */ .dir-subsections > .dir-section > .report-grid { position: relative; margin-left: 0; padding-left: 14px; } .dir-subsections > .dir-section > .report-grid::before { content: ""; position: absolute; left: 4px; top: -14px; bottom: 14px; width: 1px; background-image: linear-gradient(to bottom, var(--border) 50%, transparent 50%); background-size: 1px 6px; background-repeat: repeat-y; opacity: .7; } /* 子组里的 report-card 自身也要进一步缩进，与虚线对齐 */ .dir-subsections > .dir-section > .report-grid > .report-card { margin-left: 6px; } /* 评论图片 */ .comment-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .comment-img-link { display: block; line-height: 0; } .comment-img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: zoom-in; transition: transform var(--ease); } .comment-img:hover { transform: scale(1.04); } .comment-img.comment-img-broken { border-style: dashed; border-color: var(--text-3); background: var(--surface-2); cursor: help; object-fit: contain; font-size: 12px; color: var(--text-3); } /* ---------- 图片灯箱 ---------- */ .img-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(20, 24, 33, 0.82); backdrop-filter: blur(4px); padding: 32px; box-sizing: border-box; animation: lightbox-fade 0.18s ease; } .img-lightbox.open { display: flex; } @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } .img-lightbox-img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); background: var(--surface); } .img-lightbox-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.15s var(--ease), transform 0.15s var(--ease); } .img-lightbox-close:hover { background: rgba(255, 255, 255, 0.32); transform: scale(1.08); } /* 评论框图片附件预览 */ .img-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .img-thumb { position: relative; line-height: 0; } .img-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); } .img-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; } .dir-subsections { /* 仅用标题缩进表达层级 */ } /* ---------- 数据看板 ---------- */ .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0 22px; } .stat-card { border: none; border-radius: var(--radius-lg); background: var(--surface); padding: 18px 20px; box-shadow: var(--shadow-1); transition: transform var(--ease), box-shadow var(--ease); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .stat-val { font-size: 28px; font-weight: 800; color: var(--accent-strong); line-height: 1.1; } .stat-label { margin-top: 6px; color: var(--text-2); font-size: 13px; } .dash-table { border: none; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); } .dash-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 90px 70px 70px 64px; align-items: center; border-top: 1px solid var(--border-soft); } .dash-row:first-child { border-top: 0; } .dash-head { background: var(--surface-2); font-size: 13px; color: var(--text-2); font-weight: 700; } .dash-cell { padding: 10px 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .dash-title { font-weight: 700; color: var(--text-1); } .dash-detail { /* v6.3: 移除原顶虚线层级感 → 让读者头像像在更通透的卡片里（与上方 trend-card/tree-tab 同语言：纯底 + 阴影） */ background: transparent; border: 0; padding: 14px 6px 8px 26px; } .dash-detail-title { font-size: 13px; color: var(--text-2); margin-bottom: 10px; font-weight: 700; } .reader-list { display: flex; flex-wrap: wrap; gap: 10px 18px; } .reader-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; /* 无底色、无边框，像内嵌在页面里的标签而不是独立卡片 */ background: transparent; border: 0; padding: 0; } /* v8.7.2：阅读明细视图（reader-item）头像——26px 圆，与 grid card 同根因 fix。 26px 单字头像默认无 flex 撑大问题；但两字用户（极少见）也需锁定 */ .reader-item .comment-avatar { width: 26px; height: 26px; flex: 0 0 26px; box-sizing: border-box; box-shadow: 0 0 0 1px var(--surface); /* 1px 边框剥离卡片背景 */ } .reader-item .avatar { width: 100%; height: 100%; } .reader-item .avatar.two { font-size: 11px; } .reader-name { font-weight: 700; } .reader-count { color: var(--accent-strong); font-weight: 700; } .reader-time { color: var(--text-3); } .report-row { cursor: pointer; } /* v8.6.9: 展开时改为上下堆叠 + 主行强制占满宽度,避免阅读明细(reader-list 多头像时) 横向挤压 .report-main 内的标题/上传人/时间,导致报告名被挤没。 关闭时 .dash-detail 是 hidden(display:none)→ 不影响布局,主行仍是 row+flex:1。 展开后 .dash-detail 整行堆到 .report-main 下方,主行自然占满一行。 */ .report-row.open { background: var(--accent-soft-tint); flex-direction: column; align-items: stretch; } .report-row.open .report-main { width: 100%; min-width: 0; } /* 近 7 天走势卡 */ .trend-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 14px 0 6px; } .trend-card { border: none; border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px 12px; box-shadow: var(--shadow-1); transition: transform var(--ease), box-shadow var(--ease); } .trend-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .trend-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .trend-top-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .trend-label { font-size: 13px; color: var(--text-2); font-weight: 600; } .trend-val { font-size: 26px; font-weight: 800; color: var(--text-1); line-height: 1.1; } .trend-total { font-size: 12px; color: var(--text-3); margin-left: auto; white-space: nowrap; } .trend-svg-wrap { margin-top: 4px; } .trend-svg { display: block; width: 100%; height: 140px; } .trend-empty { color: var(--text-3); font-size: 12px; text-align: center; padding: 30px 0; } /* 报告明细树 */ .tree-tab { border: none; border-radius: var(--radius-lg); background: var(--surface); margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-1); } .tree-tab > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text-1); } .tree-tab > summary::-webkit-details-marker { display: none; } .tree-tab > summary::before { content: '\25B8'; color: var(--text-3); transition: transform var(--ease); } .tree-tab[open] > summary::before { content: '\25BE'; } .tree-tab-name { color: var(--text-1); } .tree-count { font-size: 12px; color: var(--accent-strong); font-weight: 700; background: var(--accent-weak); padding: 2px 10px; border-radius: var(--pill); } .tree-dir { margin-left: 16px; border-left: 1px solid var(--border); } .tree-dir > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 8px; color: var(--text-2); } .tree-dir > summary::-webkit-details-marker { display: none; } .tree-dir > summary::before { content: '\25B8'; color: var(--text-3); font-size: 11px; } .tree-dir[open] > summary::before { content: '\25BE'; } .tree-dir > summary .icon { width: 16px; height: 16px; flex: none; } .tree-dir-name { font-weight: 600; } .report-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); } .report-row:first-child { border-top: 0; } .report-main { min-width: 0; flex: 1; } .report-title { font-weight: 700; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .report-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-top: 4px; } .report-uploader { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); } /* v8.7.2：报告明细视图（report-row）上传人头像——22px 圆，与 grid card 一致。 与 grid card 同根因 fix：flex-basis=22px 锁避免被字符内禀宽撑椭圆 */ .report-uploader .comment-avatar { width: 22px; height: 22px; flex: 0 0 22px; box-sizing: border-box; box-shadow: 0 0 0 1px var(--surface); /* 1px 边框让圆从卡片背景剥离 */ } .report-uploader .avatar { width: 100%; height: 100%; } .report-uploader .avatar.two { font-size: 11px; } /* 22px 圆两字用 11px */ .report-uploader-name { font-weight: 600; } .report-dot { color: var(--border-strong); } .report-toggle { flex: none; } @media (max-width: 760px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } .trend-cards { grid-template-columns: 1fr; } .dash-row { grid-template-columns: minmax(0, 1fr) 70px 56px 56px 56px; } .dash-cell:nth-child(2), .dash-head .dash-cell:nth-child(2) { display: none; } } /* ---------- 后台管理 ---------- */ .admin-section-head { font-size: 15px; font-weight: 700; color: var(--text-2); margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); } /* v8.5（需求1）：圆角对齐下方「当前应用可见范围」卡片——统一用 var(--radius-lg)=20px（原先 var(--radius)=16px 偏小，两个卡弧度不一致） */ /* v8.6：删 v8.5 加的 border（Q2 你不要边框），并把圆角提到 28px 与 .content/.admin-tabs-row 一致（Q1） */ .admin-manage { background: var(--surface); border: none; border-radius: var(--radius-xl); padding: 14px 16px; } .admin-add-row { display: flex; gap: 8px; margin: 4px 0 6px; flex-wrap: wrap; } .dash-select { flex: 1; min-width: 200px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--pill); background: var(--surface); color: var(--text-1); font-size: 14px; } .admin-add-input { flex: 1; min-width: 200px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--pill); background: var(--surface); color: var(--text-1); font-size: 14px; } .admin-add-input:focus { outline: none; border-color: var(--accent-strong); box-shadow: var(--shadow-focus); } .admin-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .pager { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 16px; } .pager-right { justify-content: flex-end; padding-right: 4px; } .pager-info { font-size: 13px; color: var(--text-3); } .pager-btn { height: 32px; min-width: 80px; padding: 0 14px; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--pill); font-size: 13px; cursor: pointer; transition: var(--ease); } .pager-btn:hover:not(:disabled) { background: var(--accent-soft-tint); color: var(--accent-strong); border-color: var(--accent); } .pager-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .pager-btn:disabled { opacity: .4; cursor: not-allowed; } .admin-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .admin-row .comment-avatar { width: 28px; height: 28px; } .admin-name { font-weight: 700; color: var(--text-1); } .admin-uid { color: var(--text-3); font-size: 12px; margin-right: auto; } .admin-locked { color: var(--text-3); font-size: 12px; } .sum-chips-inline { margin-bottom: 18px; } .member-group { margin-top: 14px; } .member-group + .member-group { margin-top: 22px; } .member-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; } .member-group-title { font-size: 14px; font-weight: 700; color: var(--text-1); } .member-group-count { font-size: 12px; color: var(--accent-strong); font-weight: 700; background: var(--accent-weak); padding: 2px 10px; border-radius: var(--pill); } .member-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px; } .member-card { position: relative; /* v8.6.10:让 .member-login 可 absolute 定位到左上角 */ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 12px; cursor: pointer; border: none; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--ease), box-shadow var(--ease); user-select: none; } .member-card:hover, .member-card:focus-visible { box-shadow: var(--shadow-2); background: var(--accent-soft-tint); outline: none; transform: translateY(-2px); box-shadow: var(--shadow-2); } .member-card-av .comment-avatar, .member-card-av .avatar-wrap { width: 44px; height: 44px; } /* 需求5：姓名/部门统一文本块，固定两行高度（min-height），使有/无部门时姓名基线对齐、卡片高度一致 */ .member-card-text { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 40px; justify-content: flex-start; /* v8.4（需求6）：固定文本块宽度=父卡片宽度（不超过 100%），防止 dept/dept-name 长文本把 flex 列撑宽越出卡片 */ width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } .member-card-name { font-size: 13px; line-height: 1.4; color: var(--text-1); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .member-card-dept { font-size: 11px; line-height: 1.4; color: var(--text-3); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 2026-08-19:成员卡片用户标签 chips(仅后台超管可见) */ .member-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; } .member-tag { font-size: 10px; line-height: 1.4; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tag-color, #3D5A98) 12%, transparent); color: var(--tag-color, #3D5A98); font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .member-tag-more { background: var(--surface-2); color: var(--text-3); } /* 成员面板顶部「标签管理」入口 */ .member-tag-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; } .member-tag-bar .tag-mgr-btn { display: inline-flex; align-items: center; gap: 6px; } /* popover 内标签勾选区 */ .member-pop-tags { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .member-pop-tag-empty { font-size: 12px; color: var(--text-3); } /* v8.6.6:已点亮的标签 chips + ✕ 一键解绑;替代平铺所有标签按钮 */ .member-pop-tag-owned { display: flex; flex-wrap: wrap; gap: 4px; } .member-pop-tag-owned-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.4; padding: 2px 4px 2px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tag-color, #3D5A98) 40%, transparent); background: color-mix(in srgb, var(--tag-color, #3D5A98) 12%, transparent); color: var(--tag-color, #3D5A98); font-weight: 600; } .member-pop-tag-owned-name { white-space: nowrap; } .member-pop-tag-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: transparent; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: .6; padding: 0; } .member-pop-tag-x:hover { opacity: 1; background: rgba(0, 0, 0, .08); } /* v8.6.7:单「+」按钮触发下拉(替代 select + 添加按钮)，紧跟 chips 之后（在 .member-pop-tag-owned flex-wrap 内） */ .member-pop-tag-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--text-2); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; box-shadow: var(--shadow-1); transition: background .15s, color .15s, box-shadow .15s; } .member-pop-tag-plus:hover { background: var(--accent-soft-tint); color: var(--accent-strong); box-shadow: var(--shadow-2); } .member-pop-tag-plus:disabled { opacity: .5; cursor: not-allowed; } .member-pop-tag-plus:disabled:hover { background: var(--surface-2); color: var(--text-2); box-shadow: var(--shadow-1); } .member-pop-tag-drop { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; margin-top: 6px; max-height: 200px; overflow-y: auto; } .member-pop-tag-drop-head { padding: 6px 10px 4px; font-size: 10px; color: var(--text-3); letter-spacing: .03em; } .member-pop-tag-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: none; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer; text-align: left; font-size: 12px; color: var(--text-1); } .member-pop-tag-opt:last-child { border-bottom: none; } .member-pop-tag-opt:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } .member-pop-tag-opt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tag-color, #3D5A98); flex-shrink: 0; } /* ---------- 成员悬浮卡片 popover ---------- */ .member-pop { position: absolute; z-index: 1000; width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: 18px; } .member-pop-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .member-pop-av .comment-avatar, .member-pop-av .avatar-wrap { width: 48px; height: 48px; } .member-pop-text { flex: 1; min-width: 0; } .member-pop-name { font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-pop-close { appearance: none; background: transparent; border: none; color: var(--text-3); font-size: 20px; line-height: 1; width: 32px; height: 32px; border-radius: var(--pill); cursor: pointer; } .member-pop-close:hover { background: var(--surface-2); color: var(--text-1); } .member-pop-meta { padding: 14px 0; border-bottom: 1px solid var(--border); } .member-pop-uid { display: flex; align-items: center; gap: 8px; } .member-pop-label { font-size: 12px; color: var(--text-3); min-width: 56px; font-weight: 600; } .member-pop-uid-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .member-pop-dept { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .member-pop-dept-name { font-size: 13px; color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-pop-copy { appearance: none; height: 26px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--pill); font-size: 11px; font-weight: 600; cursor: pointer; } .member-pop-copy:hover { background: var(--accent-weak); color: var(--accent-strong); border-color: var(--accent); } .member-pop-act { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; } .member-pop-btn { appearance: none; width: 100%; height: 36px; padding: 0 12px; background: var(--surface-2); color: var(--text-1); border: 1px solid var(--border); border-radius: var(--pill); font-size: 13px; cursor: pointer; text-align: left; font-weight: 600; } .member-pop-btn:hover { background: var(--accent-soft-tint); color: var(--accent-strong); border-color: var(--accent); } .member-pop-btn.del { color: var(--danger); } /* 2026-08-19:成员卡片登录状态徽标(绿=已登录 / 灰=未登录) */ /* 2026-08-20:登录状态改为「卡片左上角实心圆」(取代之前的"圆点+文字胶囊")。 为避免与人员标签的彩色圆点在视觉上混淆,登录态只用色+位置区分,不再配文字。 */ .member-login { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; margin: 0; } .member-login-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; /* 用卡片色描边一环,让登录圆点跟卡片背景"剥离",不依赖纯色块对比 */ box-shadow: 0 0 0 2px var(--surface); } .member-login.on { color: #2F9554; } .member-login.off { color: var(--text-3); } /* 兼容旧文本(.member-login-txt):现在不再渲染,但防御性隐藏以防别处 leftover */ .member-login-txt { display: none; } /* 每角色折叠「展开全部 N 个 / 收起」按钮 */ .member-toggle { display: inline-block; margin: 10px 0 0; padding: 7px 16px; font-size: 12px; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft-tint); border: 1px solid var(--accent); border-radius: var(--pill); cursor: pointer; } .member-toggle:hover { background: var(--accent-weak); } /* 悬浮卡登录状态行 */ .member-pop-login { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .member-pop-login-val { font-size: 13px; font-weight: 600; } .member-pop-login-val.on { color: #2F9554; } .member-pop-login-val.off { color: var(--text-3); } /* 数据看板：用户访问日志 */ .access-log { display: flex; flex-direction: column; gap: 8px; } /* 两级折叠样式:外层 .access-log-details + 内层每人 .access-log-person */ .access-log-details { border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); } .access-log-sum { padding: 10px 14px; cursor: pointer; user-select: none; font-weight: 600; color: var(--text-1); list-style: none; } .access-log-sum::-webkit-details-marker { display: none; } .access-log-details[open] .access-log-sum { border-bottom: 1px solid var(--border); } .access-log-details > .access-log { padding: 10px 12px; gap: 6px; } .access-log-person { border-radius: var(--radius); } .access-log-person-sum { padding: 8px 10px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px; list-style: none; border-radius: var(--radius); transition: background .15s; } .access-log-person-sum::-webkit-details-marker { display: none; } .access-log-person-sum:hover, .access-log-person[open] > .access-log-person-sum { background: var(--accent-soft-tint); } .access-log-person[open] > .access-log-person-sum { font-weight: 600; } .access-log-person-body { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 8px 16px; } .access-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); } .access-av .comment-avatar, .access-av .avatar-wrap { width: 34px; height: 34px; } .access-main { flex: 1; min-width: 0; } .access-line1 { display: flex; align-items: baseline; gap: 8px; } .access-nick { font-size: 14px; font-weight: 600; color: var(--text-1); } .access-act { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft-tint); color: var(--accent-strong); font-weight: 600; } .access-time { font-size: 12px; color: var(--text-3); margin-top: 2px; } /* 窄屏适配：访问日志行padding收敛 */ @media (max-width: 560px) { .access-row { padding: 9px 10px; } } /* ---------- 报告操作日志（数据看板，仅种子超管可见，置于用户访问日志下方） ---------- V8.18.2: 两级
折叠(对齐 .access-log-details/.-person),日期组默认折叠; 每行改为扁平行布局(去掉 background/shadow/border-radius),仅 border-bottom 分隔。 */ .report-op-log-details { border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); } .report-op-log-sum { padding: 10px 14px; cursor: pointer; user-select: none; font-weight: 600; color: var(--text-1); list-style: none; } .report-op-log-sum::-webkit-details-marker { display: none; } .report-op-log-details[open] > .report-op-log-sum { border-bottom: 1px solid var(--border); } .report-op-log-list { display: flex; flex-direction: column; padding: 10px 12px; gap: 8px; } .report-op-date-block { border-radius: var(--radius); } .report-op-date-sum { padding: 8px 10px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; list-style: none; border-radius: var(--radius); transition: background .15s; font-size: 14px; font-weight: 600; color: var(--text-1); } .report-op-date-sum::-webkit-details-marker { display: none; } .report-op-date-sum:hover, .report-op-date-block[open] > .report-op-date-sum { background: var(--accent-soft-tint); } .report-op-date-block[open] > .report-op-date-sum { font-weight: 700; color: var(--text-1); } .report-op-date-body { display: flex; flex-direction: column; padding: 6px 10px 6px 16px; } .rop-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); } .rop-row:last-child { border-bottom: none; } .rop-info { flex: 0 0 auto; min-width: 120px; } .rop-line1 { display: flex; align-items: baseline; gap: 8px; } .rop-name { flex: 1; min-width: 0; font-size: 14px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .rop-batch { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--border); padding: 1px 6px; border-radius: 999px; } /* 操作类型徽章复用 .badge.success(上传=绿) / .badge.danger(删除=红) */ .rop-row .badge { flex: 0 0 auto; } /* 窄屏适配：报告操作日志行收敛 */ @media (max-width: 560px) { .rop-row { padding: 7px 2px; gap: 8px; } .rop-info { min-width: 96px; } .report-op-log-list { padding: 8px 10px; } } .member-pop-btn.del:hover { background: var(--danger-weak); color: var(--danger); border-color: var(--danger); } .member-pop-locked { color: var(--text-3); font-size: 12px; padding: 4px 0; } /* ---------- 当前应用可见范围 ---------- */ /* v6.4 移除边框：纯靠阴影分层对齐其他卡片/统计 chip 的"无边框 + 阴影"语言 v6.7.1: 在 .admin-shell 内与 .admin-card 视觉同质化——共一张大卡=admin-shell, 内部多个 section(section 各自有 padding 但不带 box-shadow/border-radius/独立 background)。 v6.9（需求4）：底部白色悬浮卡片 —— position:fixed bottom + 全宽 + max-height 自适应， 替代"与大卡融为一体"的版本，让"可见范围"独立可见、不被成员列表挡住视线。 admin-main 同步保留 padding-bottom 让出空间，主区可滚到底不被浮卡遮挡。 */ .admin-shell > .admin-main { display: flex; flex-direction: column; min-height: 0; /* 避免 grid 在无 height 时退化;flex 单子节点不会破坏其它面板 */ } .admin-shell > .admin-main > .admin-card { flex: 1 1 auto; min-height: 0; } /* v8.6：.admin-shell 内的 .admin-vis-scope 圆角也提到 28px 跟 .content/.admin-tabs-row 一致（Q1） */ .admin-shell > .admin-main > .admin-vis-scope, .admin-shell .admin-vis-scope { margin: 18px 0 0; padding: 18px 20px; border: none; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-2); } /* v8.6：vis-scope 也跟 .content/.admin-tabs-row 统一到 28px（Q1） */ /* .admin-vis-scope 基础样式（独立卡片场景，向后兼容）：v6.9/v8.6 设计。 嵌入场景(.members-diag 内)由下方专属规则扁平化 */ .admin-vis-scope { margin-top: 14px; padding: 18px 20px; border: none; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-2); } /* 嵌入到「名单来源诊断」展开 body(.members-diag)内时,扁平化:去掉背景/圆角/阴影,只保留 margin 收缩 */ .members-diag .admin-vis-scope { margin-top: 10px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; } .members-diag .vis-scope-head { padding: 0; } .members-diag .vis-scope-body, .members-diag .vis-scope-perm { padding: 0; } /* v8.6.7:可见范围子卡内嵌在诊断详情区时,底色浅灰卡片化(与诊断状态条区分) */ .members-diag .admin-vis-scope { background: #f7f7f5; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; } .vis-scope-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-wrap: wrap; } .vis-scope-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vis-scope-title { font-weight: 700; font-size: 15px; color: var(--text-1); } .vis-scope-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* v8.5（需求6）：显式 inline-flex + 居中 + line-height:1 + border-box，修复文字视觉偏上问题 */ .vis-scope-btn { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; } .flush-msg { font-size: 12px; color: var(--accent-strong); } .vis-scope-meta { font-size: 11px; color: #999; white-space: nowrap; } .vis-scope-perm { display: none; margin: 6px 0; padding: 10px 14px; font-size: 13px; color: var(--danger); background: var(--danger-weak); border: 1px solid #F5C6CB; border-radius: var(--radius-sm); } .vis-scope-body { font-size: 13px; line-height: 1.7; } /* v8.6.7:数字并排统计 + 部门前置 + 成员两列网格截断 */ .vis-stats { display: flex; gap: 16px; margin-bottom: 8px; } .vis-stat { display: inline-flex; align-items: baseline; gap: 4px; font-size: 11px; color: var(--text-2); } .vis-stat-num { font-size: 15px; color: var(--text-1); font-weight: 600; } .vis-block { margin-bottom: 8px; } .vis-block-label { font-size: 11px; color: var(--text-2); font-weight: 600; margin-bottom: 4px; } .vis-block-body { font-size: 11px; color: var(--text-2); line-height: 1.7; word-break: break-all; } .vis-scope-hint { font-size: 12px; color: #999; margin-top: 8px; } /* ---------- 顶部标签页（胶囊化）---------- */ .tabbar { display: flex; align-items: stretch; gap: 4px; padding: 0 12px; height: 48px; background: transparent; border-bottom: none; overflow-x: auto; scrollbar-width: thin; } .tabbar::-webkit-scrollbar { height: 6px; } .tabbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--pill); } /* 手机端左右过窄时标签页换行露出，最多两行（超出可纵向滚动） */ @media (max-width: 560px) { .tabbar { flex-wrap: wrap; align-items: center; height: auto; min-height: 48px; max-height: 84px; overflow-x: hidden; overflow-y: auto; padding: 8px 12px; row-gap: 6px; } } /* v6.7.3 窄屏顶栏：整列堆叠，标签页区整行换到平台名称下方 【第一行：logo + 平台名 副标居中】 【第二行：tabbar 整行可换行】 【第三行：管理按钮 + 头像 靠右】 ——解决用户反馈「标签页还挤在右上角、被遮挡」的根本问题 */ @media (max-width: 560px) { .topbar { flex-direction: column; align-items: stretch; height: auto; min-height: var(--topbar-h); padding: 10px 12px; row-gap: 8px; } .topbar-left { justify-content: flex-start; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); } .tabbar.tabbar-inline { width: 100%; height: auto; min-height: 44px; padding: 4px 0; overflow-x: visible; justify-content: flex-start; } .topbar-right { width: 100%; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--border-soft); } } .tab { appearance: none; border: none; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; padding: 0 14px; cursor: pointer; border-radius: var(--pill); white-space: nowrap; transition: color var(--ease), background var(--ease); display: inline-flex; align-items: center; gap: 5px; height: 32px; align-self: center; } .tab-emoji { font-size: 15px; line-height: 1; } .tab-ico { width: 16px; height: 16px; display: inline-flex; align-items: center; color: currentColor; } .tab-ico .icon { width: 16px; height: 16px; } .tab:hover { color: var(--accent-strong); background: var(--accent-soft-tint); } .tab.active { color: var(--accent-strong); background: var(--accent-weak); font-weight: 700; } .tab.fixed { font-weight: 700; } .tab-add { color: var(--accent-strong); display: inline-flex; align-items: center; gap: 4px; } .tab-add .icon { width: 16px; height: 16px; } .tab-add:hover { background: var(--accent-soft-tint); } .tab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .tab-card { border: none; border-radius: var(--radius-lg); background: var(--surface); padding: 16px; box-shadow: var(--shadow-1); transition: box-shadow var(--ease); } .tab-card.fixed { background: var(--surface-2); } .tab-card:hover { box-shadow: var(--shadow-2); } .tab-card-head { display: flex; align-items: center; gap: 10px; } .tab-card-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-1); min-width: 0; overflow: hidden; } .tab-card-title .tab-ico, .tab-card-title .tab-emoji { flex: none; } .tab-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab-card-actions { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex: none; } /* hover 标签页名称弹出的 tabId 浮层（portal 到 body，position:fixed，避免被 overflow/滚动容器裁切） */ .tab-id-tip { position: fixed; z-index: 120; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 8px 10px; font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 8px; max-width: 80vw; } .tab-id-tip .tab-id-label { font-weight: 600; color: var(--text-3); flex: none; } .tab-id-tip .tab-id-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-1); word-break: break-all; } .tab-id-tip .tab-id-copy { flex: none; border: 1px solid var(--accent); background: var(--accent-soft-tint, transparent); color: var(--accent-strong); border-radius: var(--pill); padding: 2px 10px; font-size: 12px; cursor: pointer; } .tab-id-tip .tab-id-copy:hover { filter: brightness(0.97); } .tab-id-tip .tab-id-note { color: var(--text-2); } .tab-card-actions .ren { cursor: pointer; white-space: nowrap; color: var(--accent-strong); font-size: 13px; font-weight: 600; } .tab-card-actions .ren.del { color: var(--danger); } /* v6.4: 加号按钮去边框加阴影,与其他 rc-btn 类按钮语言一致 */ .tab-plus { appearance: none; border: none; background: var(--surface); color: var(--accent-strong); width: 32px; height: 32px; border-radius: var(--pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--ease); box-shadow: var(--shadow-1); } .tab-plus .icon { width: 16px; height: 16px; } .tab-plus:hover { background: var(--accent-soft-tint); color: var(--accent-hover); box-shadow: var(--shadow-2); transform: translateY(-1px); } .tab-card-note { margin-top: 12px; font-size: 12px; color: var(--text-3); } .vis-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .vis-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border: none; border-radius: var(--pill); background: var(--surface); font-size: 13px; box-shadow: var(--shadow-1); } .vis-chip-av { width: 22px; height: 22px; flex: none; } .vis-chip-name { color: var(--text-1); font-weight: 600; } .modal-hint { font-size: 13px; color: var(--text-2); margin: 4px 0 10px; } .picker-list { max-height: 320px; overflow: auto; margin: 4px 0 12px; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; } .picker-group-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; margin: 8px 6px 4px; } .picker-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-xs); cursor: pointer; } .picker-row:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } .picker-row input { width: 16px; height: 16px; accent-color: var(--accent-strong); cursor: pointer; } /* 2026-08-19:标签页可见范围弹窗按标签筛选 chips 行 */ .picker-tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; } .picker-tag-filter-label { font-size: 12px; color: var(--text-3); margin-right: 2px; } .picker-tag-chip { font-size: 12px; line-height: 1.4; padding: 2px 10px; border-radius: 999px; border: none; background: transparent; color: var(--tag-color, #3D5A98); cursor: pointer; box-shadow: var(--shadow-1); transition: background .12s, color .12s, box-shadow .12s; } .picker-tag-chip:hover { background: color-mix(in srgb, var(--tag-color, #3D5A98) 10%, transparent); box-shadow: var(--shadow-2); } .picker-tag-chip.on { background: var(--tag-color, #3D5A98); color: #fff; box-shadow: var(--shadow-2); } /* 2026-08-20:单选模式下,筛选行右侧追加「全选/全不选」按钮 —— 与 chip 同高度,弱化色调区分语义。 */ .picker-select-all { margin-left: auto; font-size: 12px; line-height: 1.4; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--accent-strong); background: transparent; color: var(--accent-strong); cursor: pointer; transition: background .12s, color .12s; } .picker-select-all:hover { background: var(--accent-strong); color: #fff; } /* 2026-08-19:标签管理弹窗(成员与角色 → 标签管理) */ .tag-create { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .tag-create input[type=text] { flex: 1; min-width: 140px; } .tag-color-palette { display: flex; gap: 4px; } .tag-color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .1s, border-color .1s; } .tag-color-swatch:hover { transform: scale(1.15); } .tag-color-swatch.sel { border-color: var(--text-1); box-shadow: 0 0 0 2px var(--surface) inset; } .tag-list { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 12px; } .tag-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; } .tag-item + .tag-item { border-top: 1px solid var(--border); } .tag-item-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .tag-item-name { flex: 1; font-weight: 600; font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-item-count { font-size: 12px; color: var(--text-3); white-space: nowrap; } .tag-item-actions { display: flex; gap: 6px; } /* 2026-08-20:跟随平台设计语言重设计——去掉浏览器默认灰边框,改为卡片式(白底/阴影/圆角), 显式 color: var(--text-1) 解决深色模式下「按钮文字看不清」的根因(原本无样式 button 颜色继承自浏览器默认黑色,与深色 --surface 背景对比度不足)。 */ .tag-item-actions .mini { background: var(--surface); border: none; border-radius: var(--radius-xs); padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--text-1); /* 关键:深色模式可读性 */ cursor: pointer; box-shadow: var(--shadow-1); transition: background var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease); } .tag-item-actions .mini:hover { background: var(--accent-soft-tint); color: var(--accent-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); } .tag-item-actions .mini.del { color: var(--danger); } .tag-item-actions .mini.del:hover { background: var(--danger-weak); color: var(--danger); } /* ---------- 路由：后台管理 ---------- */ body.route-admin #tabbar { display: none; } body.route-admin #sidebar, body.route-admin #commentsPanel { display: none; } body.route-admin #layout { grid-template-columns: 1fr; height: calc(100vh - var(--topbar-h)); } /* ---------- 路由：更新日志 ---------- */ body.route-changelog #sidebar, body.route-changelog #commentsPanel { display: none; } body.route-changelog #layout { grid-template-columns: 1fr; } .changelog-loading, .changelog-error { padding: 24px; color: var(--text-3); font-size: 14px; } .changelog-error { color: var(--danger); } .changelog { max-width: 880px; margin: 0 auto; padding: 32px 32px 64px; line-height: 1.75; color: var(--text-1); font-size: 15px; } .changelog h1 { font-size: 28px; margin: 0 0 16px; letter-spacing: .5px; font-weight: 800; } .changelog h2 { font-size: 19px; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--accent-strong); font-weight: 700; } .changelog h3 { font-size: 16px; margin: 20px 0 10px; font-weight: 700; } .changelog p { margin: 0 0 12px; } .changelog hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; } .changelog blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--accent-strong); background: var(--accent-soft-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-2); } .changelog ul { margin: 0 0 12px; padding-left: 22px; } .changelog li { margin: 4px 0; } .changelog li > ul { margin: 6px 0 2px; } .changelog code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 6px; color: var(--accent-strong); } .changelog strong { font-weight: 700; color: var(--text-1); } /* 更新日志：日期分类卡片 (v6.4 移除边框，依赖阴影分层 + [open] 时阴影加重) */ .changelog .cl-entry { border: none; border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: box-shadow .15s ease; box-shadow: var(--shadow-1); } .changelog .cl-entry + .cl-entry { margin-top: 14px; } .changelog .cl-entry[open] { box-shadow: var(--shadow-2); } .changelog .cl-entry-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; margin: 0; cursor: pointer; list-style: none; user-select: none; outline: none; } .changelog .cl-entry-head::-webkit-details-marker { display: none; } .changelog .cl-entry-head:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-weak); } .changelog .cl-date { font-size: 17px; font-weight: 800; color: var(--accent-strong); letter-spacing: .3px; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; } .changelog .cl-sep { color: var(--text-3); font-size: 14px; flex-shrink: 0; } .changelog .cl-title { font-size: 15px; font-weight: 700; color: var(--text-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .changelog .cl-chev { margin-left: 4px; color: var(--text-3); font-size: 14px; flex-shrink: 0; transition: transform .18s ease; transform: rotate(-90deg); line-height: 1; } .changelog .cl-entry[open] .cl-chev { transform: rotate(0deg); } .changelog .cl-entry:hover .cl-entry-head { background: var(--accent-soft-tint); } .changelog .cl-entry-body { padding: 0 24px 22px; font-size: 14px; line-height: 1.75; color: var(--text-2); border-top: 1px dashed var(--border); } .changelog .cl-entry-body > p:first-child, .changelog .cl-entry-body > ul:first-child { margin-top: 18px; } .changelog .cl-entry-body > ul { margin: 8px 0 8px; padding-left: 22px; } .changelog .cl-entry-body > ul > li { margin: 4px 0; } .changelog .cl-entry-body > ul > li > ul { margin: 4px 0; } .changelog .cl-entry-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 6px; color: var(--accent-strong); } .changelog .cl-entry-body blockquote { margin: 10px 0; padding: 10px 16px; border-left: 3px solid var(--accent-strong); background: var(--accent-soft-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-2); } .changelog .cl-entry-body hr { margin: 14px 0; } .changelog .cl-entry-body strong { font-weight: 700; color: var(--text-1); } @media (max-width: 560px) { .changelog .cl-entry-head { padding: 12px 14px; gap: 8px; } .changelog .cl-entry-body { padding: 0 14px 16px; } .changelog .cl-date { font-size: 15px; } .changelog .cl-title { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .changelog .cl-entry, .changelog .cl-chev { transition: none; } } /* 非固定 tab 下的目录空状态 */ .dir-empty { padding: 14px; } .dir-empty .dir-empty-text { font-size: 13px; color: var(--text-3); line-height: 1.5; } /* ---------- 嵌入页（外链） ---------- */ body.route-embed #commentsPanel { display: none; } body.route-embed .layout { grid-template-columns: var(--sidebar-w) 1fr; } body.route-embed .layout.sidebar-collapsed { grid-template-columns: var(--rail-w) 1fr; } body.route-list #commentsPanel { display: none; } body.route-list .layout { grid-template-columns: var(--sidebar-w) 1fr; } body.route-list .layout.sidebar-collapsed { grid-template-columns: var(--rail-w) 1fr; } /* 嵌入页头部：标题（左）+ 右上角「在新窗口打开」按钮（右对齐） */ .embed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .embed-title { font-size: 16px; font-weight: 700; color: var(--text-1); } .embed-open { margin-left: auto; flex: none; } .embed-frame { width: 100%; height: calc(100vh - 200px); min-height: 360px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } /* ---------- 后台标签页管理（卡片化）---------- */ .tab-list { display: flex; flex-direction: column; gap: 10px; } .tab-item { padding: 12px 14px; border: none; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); } .tab-item.fixed { background: var(--surface-2); } .tab-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .tab-name { font-weight: 700; color: var(--text-1); } .tab-badge { color: var(--text-3); font-size: 12px; border: 1px solid var(--border); border-radius: var(--pill); padding: 2px 10px; } .tab-actions { display: inline-flex; gap: 12px; margin-left: 4px; } .tab-actions .ren { cursor: pointer; white-space: nowrap; } .vis-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; margin-right: 14px; } .vis-toggle input { width: 16px; height: 16px; accent-color: var(--accent-strong); } .tab-vis { display: flex; align-items: center; margin-left: auto; } /* ---------- per-user 人员多选面板 ---------- */ .tab-vis-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; width: 100%; padding: 12px; margin-top: 10px; background: var(--surface-2); border-radius: var(--radius); } .vis-person { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--pill); cursor: pointer; font-size: 13px; color: var(--text-1); user-select: none; transition: var(--ease); } .vis-person:hover { background: var(--accent-soft-tint); } .vis-person input { width: 16px; height: 16px; accent-color: var(--accent-strong); cursor: pointer; } .vis-person.is-super { opacity: 0.85; } .vis-person.is-super .vis-name { color: var(--text-2); } .vis-person .vis-avatar-wrap { width: 22px; height: 22px; flex: none; } .vis-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vis-role { font-size: 11px; padding: 1px 8px; border-radius: var(--pill); flex: none; background: var(--surface); color: var(--text-3); border: 1px solid var(--border); font-weight: 700; } .vis-role-superadmin { background: linear-gradient(135deg, #b8860b, #d4a017); color: #fff; border-color: transparent; } .vis-role-admin { background: var(--accent-strong); color: #fff; border-color: transparent; } .vis-role-member { background: var(--text-3); color: #fff; border-color: transparent; } .check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); } .check input { width: 16px; height: 16px; } /* ========================================================= 后台管理重设计（v3 对齐 · 2026-08-11） ========================================================= */ #adminProfile { position: relative; } .profile-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; margin-left: 8px; background: var(--surface); border: none; border-radius: var(--pill); transition: var(--ease); box-shadow: var(--shadow-1); } .profile-pill:hover { background: var(--accent-soft-tint); } .profile-pill .pp-av { width: 26px; height: 26px; flex: none; border-radius: 50%; overflow: hidden; display: inline-flex; } .profile-pill .pp-av .avatar-wrap, .profile-pill .pp-av .avatar { width: 26px; height: 26px; } .profile-pill .pp-name { font-size: 13px; font-weight: 700; color: var(--text-1); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-pill .pp-chev { font-size: 11px; color: var(--text-3); transition: transform var(--ease); } .profile-pill[aria-expanded="true"] .pp-chev { transform: rotate(180deg); } /* v6.3: .pp-role 已统一在主样式区隐藏；此处旧徽章样式（badge 风格）随 markup 一起退役 */ .profile-card { position: absolute; top: calc(100% + 10px); right: 0; width: 304px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; z-index: 40; box-shadow: var(--shadow-3); } .profile-card[hidden] { display: none; } .pc-banner { height: 64px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); } .pc-body { padding: 0 18px 18px; } .pc-av { width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface); background: var(--surface); display: flex; } .pc-av .avatar-wrap, .pc-av .avatar { width: 64px; height: 64px; } .pc-name { margin: 12px 0 2px; font-size: 18px; font-weight: 800; color: var(--text-1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pc-name .role-badge { font-size: 11px; padding: 2px 10px; border-radius: var(--pill); } .pc-name .role-badge.role-superadmin { background: linear-gradient(135deg, #b8860b, #d4a017); } .pc-name .role-badge.role-admin { background: var(--accent-strong); } .pc-name .role-badge.role-member { background: var(--text-3); } .pc-dept { margin-top: 4px; font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; } .pc-dept::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-strong); opacity: .6; } .pc-section { margin-top: 14px; } .pc-label { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .4px; margin-bottom: 8px; } .pc-perm { display: flex; flex-wrap: wrap; gap: 6px; } .perm-chip { font-size: 12px; color: var(--accent-strong); background: var(--accent-weak); border: 1px solid var(--accent-weak); border-radius: var(--pill); padding: 3px 10px; font-weight: 700; } .pc-actions { display: flex; gap: 8px; margin-top: 16px; } .pc-actions .btn { flex: 1; justify-content: center; padding: 8px 12px; } .pc-actions .btn-danger { color: #fff; } /* v6.7.4 按用户纠正：后台管理「双层卡片」的实质是 .admin-shell 这张大白卡（宽=整页=和顶栏同宽） 叠在顶部 .admin-tabs-row 标签导航之上。用户要「不要下面的大卡片，只要上面的标签页卡片」—— 因此把 .admin-shell 从「大卡片」降级为透明布局容器（去掉背景/圆角/阴影/overflow 裁切）， 保留 .admin-tabs-row（自带白底+底边线）作为页面上唯一的标签卡片层，内容直接铺在它下方。 */ .admin-shell { display: block; background: transparent; border-radius: 0; padding: 0; overflow: visible; box-shadow: none; } /* v6.7.5 标签页卡：与顶部导航栏同宽、同款（圆角 + 阴影 + 下方留白）， 作为后台页面上唯一的「卡片层」，下方内容直接铺在画布上。 */ .admin-tabs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; padding: 12px 18px; margin: 0 0 var(--canvas-pad) 0; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-1); } .admin-tabs-row .admin-nav-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--pill); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-2); transition: var(--ease); background: transparent; border: none; font-family: inherit; } .admin-tabs-row .admin-nav-item:hover { background: var(--accent-soft-tint); color: var(--accent-strong); } .admin-tabs-row .admin-nav-item .nav-ico { display: inline-flex; align-items: center; color: var(--text-3); } .admin-tabs-row .admin-nav-item .nav-ico .icon { width: 16px; height: 16px; } .admin-tabs-row .admin-nav-item.active { background: var(--accent-strong); color: #fff; font-weight: 700; box-shadow: var(--shadow-accent-soft); } .admin-tabs-row .admin-nav-item.active .nav-ico { color: #fff; } .admin-tabs-row .admin-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .admin-main { min-width: 0; padding: 16px 4px 0; } .admin-side { display: none; } .vis-chips.has-overflow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .vis-overflow { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .vis-overflow.open { display: flex; } .vis-overflow-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--pill); background: var(--accent-weak); color: var(--accent-strong); border: 1px solid var(--accent-weak); cursor: pointer; transition: var(--ease); font-family: inherit; } .vis-overflow-toggle:hover { background: var(--accent-soft-tint); border-color: var(--accent); } .vis-overflow-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .page-title { font-size: 22px; font-weight: 800; color: var(--text-1); margin: 0 0 4px; letter-spacing: .2px; } .page-desc { font-size: 13px; color: var(--text-3); margin: 0 0 20px; } .sum-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; } .sum-chip { background: var(--surface); border: none; border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-1); transition: transform var(--ease), box-shadow var(--ease); } .sum-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .sum-num { font-size: 28px; font-weight: 800; color: var(--accent-strong); line-height: 1.1; } .sum-lbl { margin-top: 6px; font-size: 13px; color: var(--text-2); font-weight: 600; } /* v6.7.5 还原（用户纠正）：v6.7.3 把 .admin-shell 内的 sum-chip / member-card 强制去卡化， 是基于对「双层卡片」的误判。用户确认双层的实质是 .admin-shell 大白卡 vs 顶部 .admin-tabs-row， 与这些小卡片无关。因此撤销 v6.7.3 的覆盖，让 5 个数字卡 / 成员卡恢复为普通卡片 （白底 + 阴影 + 圆角），直接铺在画布上——它们本就属于内容卡片，不是「双层」的元凶。 */ .admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .admin-card { background: var(--surface); border: none; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-1); transition: box-shadow var(--ease); } /* v8.6：圆角 0 → 28px（与 .content/.admin-tabs-row/同 admin-shell 内其他卡保持一致，Q1） */ .admin-shell > .admin-main > .admin-card, .admin-shell .admin-card { background: transparent; border: none; border-radius: var(--radius-xl); padding: 22px; } /* v8.6：删 v8.5 加的 border + 圆角升 28px 跟 .content/.admin-tabs-row 一致（Q1+Q2） */ .admin-card > .admin-manage, .admin-card > .tab-manage { border: none; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-xl); } .admin-quick { cursor: pointer; transition: transform var(--ease), box-shadow var(--ease), background var(--ease); display: flex; flex-direction: column; gap: 8px; } .admin-quick:hover { background: var(--accent-soft-tint); transform: translateY(-2px); box-shadow: var(--shadow-2); } .admin-quick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card-title { font-size: 15px; font-weight: 700; color: var(--text-1); } .card-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; } .admin-card .admin-section-head { margin: 4px 0 12px; padding-top: 0; border-top: none; } /* ---------- API 密钥面板 ---------- */ .section-head { margin: 0 0 16px; } .section-title-wrap { display: flex; flex-direction: column; gap: 6px; } .section-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-1); } .section-sub { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.6; } .apikey-create { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .apikey-name-label { font-size: 13px; color: var(--text-2); font-weight: 600; } .apikey-name-input { flex: 1 1 260px; min-width: 200px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 13px; font-family: inherit; font-size: 13px; color: var(--text-1); background: var(--surface); transition: var(--ease); } .apikey-name-input:focus { outline: none; border-color: var(--accent-strong); box-shadow: var(--shadow-focus); } /* M6-UI3：表单内输入框默认占满父容器显得"太宽"。限定到表单内部的最大宽度，留下视觉呼吸空间。 */ .apikey-form .apikey-name-input, .apikey-form select.modal-select { max-width: 420px; align-self: flex-start; } .apikey-reveal { background: var(--accent-soft-tint); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 18px; } .apikey-reveal-title { font-size: 13px; font-weight: 700; color: var(--accent-strong); margin-bottom: 10px; } .apikey-reveal-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .apikey-reveal-code code { flex: 1 1 auto; min-width: 200px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text-1); word-break: break-all; } .apikey-reveal-tip { margin-top: 10px; font-size: 12px; color: var(--text-2); line-height: 1.6; } .apikey-empty { font-size: 13px; color: var(--text-3); padding: 8px 0; } .apikey-table { display: flex; flex-direction: column; gap: 8px; } .apikey-row { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 1.6fr auto; gap: 12px; align-items: center; } .apikey-row-head { font-size: 12px; font-weight: 700; color: var(--text-3); padding: 0 2px; } .apikey-row:not(.apikey-row-head) { background: var(--surface); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow-1); } .ak-cell { font-size: 13px; color: var(--text-1); min-width: 0; } .ak-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ak-mask code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-2); word-break: break-all; } .ak-owner { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ak-time { color: var(--text-3); font-size: 12px; } .ak-ops { display: flex; justify-content: flex-end; } @media (max-width: 720px) { .apikey-row { grid-template-columns: 1fr auto; gap: 6px 12px; } .apikey-row-head { display: none; } .ak-mask, .ak-owner, .ak-time { font-size: 12px; } } @media (max-width: 860px) { .admin-tabs-row { padding: 12px 16px; gap: 4px; justify-content: flex-start; } .admin-tabs-row .admin-nav-item { padding: 6px 12px; font-size: 13px; } .sum-chips { grid-template-columns: repeat(2, 1fr); } .admin-shell { padding: 0; } } @media (max-width: 480px) { .sum-chips { grid-template-columns: 1fr; } .profile-pill .pp-name { display: none; } } /* 全局拖拽上传 overlay */ .drop-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(63, 168, 103, 0.16); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; pointer-events: none; animation: dropOverlayFade .14s ease-out; } .drop-overlay-box { background: var(--surface); border: 2px dashed var(--accent); border-radius: var(--radius-lg); padding: 28px 36px; font-size: 16px; font-weight: 700; color: var(--accent-strong); display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow-accent-soft); } .drop-overlay-box .icon { width: 32px; height: 32px; } @keyframes dropOverlayFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .drop-overlay { animation: none; } } /* ---------- #2 性能诊断 toast ---------- */ .rc-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); max-width: 86vw; background: rgba(33, 37, 41, 0.94); color: #fff; font-size: 13px; line-height: 1.5; padding: 10px 16px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 9999; word-break: break-word; } .rc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- 批量上传 ---------- */ .dropzone { border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: center; background: var(--bg); transition: border-color .15s ease, background .15s ease; cursor: pointer; } .dropzone.drag { border-color: var(--accent-strong); background: var(--accent-soft-tint); } .dropzone #rFile { margin: 0 auto; } /* ---------- /api/members 名册来源诊断条 (2026-08-19) ---------- */ .members-diag { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: -2px 0 16px; border-radius: 6px; font-size: 13px; line-height: 1.4; } .members-diag > span { flex: 1; min-width: 0; word-break: break-word; } .members-diag-ok { color: #2d7a3a; background: #e6f5ea; border: 1px solid #b9e0c0; } .members-diag-warn { color: #8a4a00; background: #fff4e0; border: 1px solid #f3d49a; } .members-diag-unknown { color: #5a5a5a; background: #f3f4f6; border: 1px solid #d4d6da; } .members-diag .mini { background: transparent; color: #3D5A98; border: 1px solid #3D5A98; border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px; } .members-diag .mini:hover { background: #3D5A98; color: #fff; } /* v8.6.7 UI 重设计:并排双按钮(诊断 + 标签管理)替代 details/summary;点「诊断」展开详情区 */ .members-diag-wrap { margin: -2px 0 16px; } .members-diag-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .members-diag-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-1); font-size: 12px; cursor: pointer; text-align: left; transition: background .15s, border-color .15s; } .members-diag-btn:hover { border-color: var(--accent-strong); } .members-diag-btn.open { background: var(--accent-soft-tint); border-color: var(--accent-strong); } .members-diag-tagbtn { flex: none; justify-content: flex-start; } .members-diag-tagbtn .icon { width: 14px; height: 14px; } .members-diag-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; flex-shrink: 0; } .members-diag-badge.ok { background: #e6f5ea; color: #2d7a3a; } .members-diag-badge.warn { background: #fff4e0; color: #8a4a00; } .members-diag-badge.unknown { background: #f3f4f6; color: #5a5a5a; } .members-diag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .members-diag-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text-2); } .members-diag-chev { font-size: 10px; opacity: .6; flex-shrink: 0; transition: transform .15s; } .members-diag-btn.open .members-diag-chev { transform: rotate(180deg); } /* 详情区:状态条 + 可见范围子卡 + 说明 */ .members-diag-detail { border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 12px; } .members-diag-detail > .members-diag { margin: 0 0 10px; } /* 诊断状态条(绿/黄/灰) */ .members-diag-detail .members-diag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-xs); font-size: 12px; line-height: 1.4; } .members-diag-detail .members-diag .members-diag-line { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .members-diag-ok { color: #2d7a3a; background: #e6f5ea; border: 1px solid #b9e0c0; } .members-diag-warn { color: #8a4a00; background: #fff4e0; border: 1px solid #f3d49a; } .members-diag-unknown { color: #5a5a5a; background: #f3f4f6; border: 1px solid #d4d6da; } /* v8.6.8:详情区底部的"成员名册来自..."说明文字已移除(用户反馈没什么价值) */ .dropzone .dz-hint { font-size: 12px; color: var(--text-2); margin-top: 8px; } .up-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; } .up-row { border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 10px 12px; background: var(--surface); } .up-meta { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .up-name { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-size2 { font-size: 12px; color: var(--text-2); flex: none; } .up-bar-wrap { margin-top: 8px; height: 6px; background: var(--border); border-radius: var(--pill); overflow: hidden; } .up-bar { height: 100%; width: 0%; background: var(--accent-strong); border-radius: var(--pill); transition: width .15s ease; } .up-bar.done { background: #2e8b57; } .up-bar.error { background: #c0392b; } .up-bar.uploading { background: var(--accent-strong); } .up-foot { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; } .up-state { font-size: 12px; color: var(--text-2); } .up-state.done { color: #2e8b57; font-weight: 600; } .up-state.error { color: #c0392b; font-weight: 600; } .up-state.uploading { color: var(--accent-strong); } .up-del { border: none; background: transparent; color: var(--text-2); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: var(--radius-xs); } .up-del:hover { background: var(--accent-soft-tint); color: #c0392b; } .batch-summary { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--text-1); } /* 2026-08-23:遗留管理员清理卡片（成员与角色后台） */ .stale-admin-card { border-radius: var(--radius-l, 10px); padding: 14px 16px; margin: 12px 0; } .stale-admin-head { font-size: 14px; line-height: 1.5; } .stale-admin-desc { margin: 8px 0; font-size: 13px; line-height: 1.6; color: #7a4a00; } .stale-admin-list { margin: 8px 0; padding-left: 20px; font-size: 13px; max-height: 140px; overflow: auto; color: var(--text-1); } .stale-admin-list li { margin: 2px 0; word-break: break-all; } .stale-admin-card .btn-danger { background: #e5484d; border: none; color: #fff; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-family: inherit; box-shadow: var(--shadow-1); } .stale-admin-card .btn-danger:hover { background: #d23b40; } .stale-admin-card .btn-danger:disabled { opacity: .6; cursor: default; } /* ===== 切换 tab 骨架占位（#501）：立即反馈，消除「高亮已切、内容还停旧 tab 几秒」的迟滞 ===== */ @keyframes sk-shimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } } .skeleton-card { height: 132px; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); background: linear-gradient(90deg, var(--surface) 0%, var(--border) 50%, var(--surface) 100%); background-size: 480px 100%; animation: sk-shimmer 1.1s ease-in-out infinite; } .skeleton-row { height: 30px; margin: 4px 0; border-radius: 8px; background: linear-gradient(90deg, var(--surface) 0%, var(--border) 50%, var(--surface) 100%); background-size: 480px 100%; animation: sk-shimmer 1.1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .skeleton-card, .skeleton-row { animation: none; } } /* ===== 冷启动加载页（2026-08-30）：消除首屏空白卡顿感 ===== */ .boot-splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity .35s ease; } .boot-splash.is-hidden { opacity: 0; pointer-events: none; } .boot-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } .boot-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: var(--surface); box-shadow: 0 6px 18px rgba(63, 168, 103, .22); } .boot-text { font-size: 15px; font-weight: 600; color: var(--text-2); letter-spacing: .3px; } .boot-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: boot-spin .8s linear infinite; } @keyframes boot-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .boot-spinner { animation: none; } } /* ===== 列表/面板加载占位（数据看板、成员与角色通用） ===== */ .empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 14px; line-height: 1.6; } /* ===== ICP 备案号悬挂 footer（对所有访客可见，含未登录/登录失败） ===== */ .site-footer { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; align-items: center; padding: 16px 16px 20px; font-size: 12px; color: var(--text-3); background: transparent; } .site-footer a { color: var(--text-3); text-decoration: none; transition: color .15s ease; } .site-footer a:hover { color: var(--text-2); } .site-footer .beian-icon { height: 14px; width: auto; vertical-align: middle; margin-right: 4px; }