/* =====================================================================
* feedback-mgmt.css — 第87轮「问题反馈」专用样式
*
* 选择器**一律** fbk- 前缀（含 fbk- 前缀的复合类），只加类、不改 style.css 的
* 通用 .card/.tbl/.mask/.modal/.btn/.empty —— 零外溢到宿主应用
* （组织方式同 anti-crack.css / b36-apicfg.css：不外溢到宿主应用）。
* ===================================================================== */
/* 页面根：纵向排布 + 统一间距 */
.fbk-wrap { display: grid; gap: 14px; }
/* 软件端接入提示（小字说明，接口地址可能很长，允许折行） */
.fbk-tip { margin-bottom: 12px; line-height: 1.9; word-break: break-all; }
.fbk-tip .mono { font-size: 12px; }
/* ─── 筛选条：一行排开、窄屏自动换行 ─────────────────────────────── */
.fbk-filters { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fbk-fl { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #475569; white-space: nowrap; }
/* 宿主 .inp/.sel 是 width:100%（给整行表单用的），这里必须收回宽度，否则每个控件都占满一行 */
.fbk-fl .inp, .fbk-fl .sel { width: auto; height: 32px; padding: 4px 9px; font-size: 12.5px; }
/* ★ 第88轮修(用户反馈「下拉框和搜索框要宽一些」)：上面那条 `.fbk-fl .inp/.sel{width:auto}`
是两个类的选择器(0-2-0)，而原来这里写的 `.fbk-inp{width:260px}` 只有一个类(0-1-0) ——
**优先级更低, 从来没生效过**, 所以控件一直是浏览器默认宽度(输入框约 180px / 下拉约 140px)。
修法: 把宽度规则也提到两个类(0-2-0)并按文件顺序压过上面那条；下拉用 id 精确给宽度。
注意 `.fbk-filters` 是页面与弹窗共用的同一份 DOM 结构, 两处一起变宽。 */
.fbk-filters .fbk-inp { width: 340px; min-width: 240px; }
.fbk-filters .fbk-inp.sm { width: 240px; min-width: 180px; }
.fbk-filters .fbk-sel { min-width: 150px; }
/* 小类下拉只显示名字(第89轮: 不再带 #编号 · app_key —— 同一个大类下的子分类名本来就不允许重名),
所以宽度按最长产品名给: 够用又不占满一行 */
.fbk-filters #fbkApp { min-width: 220px; max-width: 340px; }
.fbk-filters #fbkCat { min-width: 180px; max-width: 280px; }
.fbk-filters #fbkStatus { min-width: 132px; }
.fbk-filters .fbk-date { width: 184px; }
/* ─── 统计行（counts 是全库口径，与表格里的筛选结果不是一回事） ────── */
.fbk-stat { font-size: 12.5px; color: #64748b; margin: 2px 0 10px; }
.fbk-stat b { color: #334155; font-variant-numeric: tabular-nums; }
/* ─── 列表 ────────────────────────────────────────────────────────
宿主 table.tbl td 的 padding 是 3px/4px（那是给行内输入框用的），
本页是纯文本行，只给带 fbk-tbl 的这张表加回呼吸感（不覆盖 .tbl 本体）。 */
.fbk-tbl td { padding: 8px 10px; }
/* 标题超长截断，全文在 title 属性里（鼠标悬停可见）。
★ 第89轮(站长「标题宽度少一些」): 420 -> 320, 与表头 | 对齐 ——
腾出来的宽度给「版本」列(原来那列是「来源」, 现在显示客户端上报的版本号)。 */
.fbk-ttl { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ★ 第89轮(站长「图中的这个界面优化下」): 详情里八个短字段排成**两列** —— 弹窗从又高又空
变成一屏看得完; 窄屏(<=760px)自动落回一列。左列标签宽度也跟着收窄(96 -> 84px)。 */
.fbk-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.fbk-kvs .fbk-kv { grid-template-columns: 84px 1fr; }
@media (max-width: 760px) { .fbk-kvs { grid-template-columns: 1fr; } }
/* 正文给定高 + 内部滚动: 长正文不再把弹窗撑到屏幕外, 弹窗高度稳定在可读范围内 */
.fbk-content { max-height: 220px; overflow: auto; }
.fbk-ops { white-space: nowrap; }
.fbk-ops .btn + .btn { margin-left: 6px; }
/* 「加载更多」：居中，与表格留出间距 */
.fbk-more { margin-top: 12px; text-align: center; }
/* ★ 第89轮修「选分类的时候会闪一下 / 跟刷新网页似的」(第二次):
请求在途时列表**不重绘、也不改变外观**(连变灰都去掉 —— 快速响应下"变灰又变回来"本身就像闪),
只禁止点击, 避免点到正在被替换的那一行。真正的更新是回来之后由 renderData() 只换列表+计数。 */
/* ★★★ 第89轮第四次修「弹窗会闪」的另一半: 弹窗高度 ★★★
弹窗是垂直居中的(style.css 的 .mask 是 flex center), 所以**内容一高一低, 整个弹窗就会上下跳**
—— 实测: 表格(2 行) 559px vs 空态/加载态 491px, 位置从 top 173 跳到 207(差 34px)。
列表区给个最小高度, 把这几种状态的高度撑成一致(行数少的时候也一样高), 弹窗就不动了。
表格多行时本来就超过这个高度, 且换筛选时不再切"加载中"(保留现有行, 见 load()), 所以同样不跳。 */
.fbk-list { min-height: 264px; }
.fbk-list.fbk-busy { pointer-events: none; }
/* ─── 弹窗宽度 ──────────────────────────────────────────────────────
★★★ 第89轮第四次修「弹窗自己会闪」(探针实测出来的真凶) ★★★
前几版这里写的是 `.modal.wide:has(.fbk-tbl){max-width:1360px}` —— 用 :has() 精确命中"有表格的
那个弹窗", 好处是不动全站规则, 但它**把宽度挂在了内容上**: 列表区一旦短暂没有表格
(加载态 / 空态 / 该筛选没有结果), :has 立刻不命中 -> 弹窗从 1360px 塌回 .modal.wide 的 1020px。
实测(每帧采样): 宽 1360→1020、横移 170px、下移 34px, 数据回来又跳回去 —— 肉眼就是"打开的问题
弹窗在闪"。**宽度绝不能再依赖内容**, 所以改用弹窗自己的类标定(选择器权重 .modal.wide.fbk-dlg
= 0-3-0, 稳压 .modal.wide 的 0-2-0, 与内容无关、永远不翻转)。 */
/* ★★★ 第89轮第五次修「还是闪」: 把弹窗高度**钉死** ★★★
弹窗在 .mask(style.css:835 flex center) 里是**垂直居中**的 —— 所以只要内容高度变一点点,
整个框就上下跳。逐帧实测过: 表格 559px vs 空态/加载态 491px => 框整体下移 34px。
min-height 只能兜住"内容比它还矮"的情况, 所以这里直接把高度写死:
内容怎么变(行数 / 空表格 / 加载态 / 空态), **框的宽高与位置全程一个像素都不动**;
超出部分由 .modal > .body 自己滚动(它本来就有 overflow-y:auto, style.css:849)。
—— 这就是"不闪"的最强保证, 也是照「卡密管理」那种固定大小面板的思路来的。 */
/* ★★ 第89轮(站长「问题反馈弹窗大些可以和卡密弹窗大小一致」) —— 尺寸**逐字对齐「卡密管理」浮层**
(b39-modals.css: `.mask.b39m-mask .modal.b39m-modal`):
width = 100vw - 236px(左侧导航固定宽) - 32px(左右各 16 的边距)
height = 88vh
为什么用 vw 而不是写死 px: 卡密弹窗就是这么算的(那边还要让出左侧 236px 导航), 两处口径一致、
屏越小弹窗越小, 永不横向溢出。本弹窗的遮罩是**整屏居中**的(不像卡密那样只盖右侧内容区),
所以这里只对齐"大小", 位置仍在屏幕正中。
高度仍写死(不随内容变) —— 上面那条「弹窗会闪」的教训照旧成立。 */
.modal.wide.fbk-dlg { max-width: calc(100vw - 236px - 32px); height: 88vh; max-height: 88vh; }
/* ★ 第89轮(站长「反馈详情弹窗这个宽度可以小一些，在问题反馈弹窗上显示」):
详情**不再和列表一样铺满内容区** —— 收成 820px(窄屏时再让位), 仍是浮在问题反馈弹窗上层的一层
(弹窗模式下 z-index 130, 只盖右侧内容区; 页面模式下由 modal({className:'fbk-detail'}) 承载)。
八字段两列的排版在 820px 下仍然宽松, 不会再出现"一行拉得老长"的观感。
★ 再追加(站长「高度小一些，空白区域太多」): 高度改成**贴合内容** ——
列表弹窗那条「高度钉死」的教训在这里不适用: 详情的内容在打开那一刻就定死了(没有筛选/翻页/重查),
不会出现"内容一高一低 -> 居中弹窗上下跳"的闪, 所以 height:auto 最合适:
内容多高就多高, 超过 88vh 才由 .modal 的 max-height + .body 的 overflow-y 接管滚动。 */
.modal.wide.fbk-detail { max-width: min(820px, calc(100vw - 268px)); height: auto; max-height: 88vh; }
/* ★★ 第89轮(站长「问题反馈弹窗的页面显示在除左边宽度的位置区域，和卡密弹窗一致就行」) ★★
遮罩只铺**右侧内容区** —— 与「卡密管理」浮层(.mask.b39m-mask, b39-modals.css:14-18)**逐字同一套**:
left:236px 让开左侧固定宽度的导航栏; padding:16px 让弹窗与内容区留出同样的边距;
inset:0 的 right/bottom 保持不动(见 style.css 的 .mask), 所以右边/下边仍是整屏。
配合上面那条 max-width(100vw - 236 - 32) -> 弹窗正好填满内容区, 与卡密弹窗位置尺寸完全一致。
⚠ 那个 236px 与 CSS 里的宽度算式必须**同源**(改一处就要改两处), 这是 b39m 那边就定下的规矩。 */
.mask.fbk-mask { left: 236px; padding: 16px; }
/* 页面模式(不带 fbk-mask 类, 遮罩由 app.js 的 modal() 生成)下的详情浮层: 用 :has() 精确命中,
只认外层挂 fbk-detail 类的那种遮罩, 不动 confirmBox / 其它 modal() 弹窗的遮罩。 */
#modalHost .mask:has(> .modal.fbk-detail) { left: 236px; padding: 16px; }
/* 窄屏兜底: 与 b39m 同断点 —— 侧边栏本身会被折起来的布局下, 遮罩不能再让开 236px */
@media (max-width: 900px) {
.mask.fbk-mask, #modalHost .mask:has(> .modal.fbk-detail) { left: 0; padding: 16px; }
.modal.wide.fbk-dlg, .modal.wide.fbk-detail { max-width: calc(100vw - 32px); }
}
/* 弹窗标题栏那一行(第89轮按用户截图优化): 标题 | … | 只看「X」的反馈 [看全部软件] ×
上一版提示与按钮**贴在一起**(截图里看着挤), 现在给提示右侧 12px、按钮右侧 8px 留白;
提示里的「· #编号」也去掉了 —— 小类下拉已经不显示编号, 头部再带一个反而更乱。 */
.fbk-dlg > header .fbk-scope { margin-right: 12px; color: #64748b; font-size: 12.5px; }
.fbk-dlg > header [data-fbk-all] { margin-right: 8px; }
/* 键值两列：左列固定（「客户端版本」四个字也放得下），右列可折行 */
.fbk-kv {
display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px;
padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #eef1f6;
}
.fbk-kv:last-child { border-bottom: 0; }
.fbk-k { color: #64748b; }
.fbk-v { color: #1f2937; word-break: break-word; }
/* ─── 状态胶囊（第89轮：站长「已处理和待处理颜色要设置不同」）───────────
基础排版仍用全站 .tag（圆角/内距/字号），这里只加两组**模块自己的配色**:
待处理 = 橙(底浅橙、字深橙、描边橙)；已处理 = 绿(底浅绿、字深绿、描边绿)。
两色同一明度但不同色相, 远看也能一眼分开。 */
.tag.fbk-tag-pending { background: #fff4e8; color: #c2410c; border: 1px solid #fdba74; }
.tag.fbk-tag-handled { background: #e9f9ef; color: #15803d; border: 1px solid #86efac; }
/* 双击整行的鼠标提示（列表操作列只剩「查看」之后, 双击是最快的入口） */
.fbk-tbl tbody tr { cursor: default; }
.fbk-tbl tbody tr:hover td { background: #f7f9fc; }
/* ─── 图片灯箱（第89轮：点击放大 + ←/→ 切换 + Esc/点背景关闭） ───────────
遮罩沿用 .fbk-mask(只铺右侧内容区) + 这一层更深的底; 图片最大 92%×86%, 两侧箭头与计数胶囊
一律纯 CSS 画, 不引图标库、不新增任何依赖。 */
/* ★ 第89轮再改(站长「也不用全区域都放大」): 遮罩**不再压暗** —— 背景全透明,
它只是一层"点空白处关闭"的接板; 页面保持可见, 观感收成一个小浮窗(可读性由浮窗自己承担)。 */
.mask.fbk-lb-mask { background: transparent; }
.fbk-lb { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
/* 箭头与图片同一行: flex gap 挨着图片两侧(站长「左右按钮挨着图片的左右方」) */
.fbk-lb-stage { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; }
/* 图片本体: 一张小白卡; ✕ 的定位基准就是它(站长「关闭按钮放到图片右上角」的那次调整) */
.fbk-lb-figure { position: relative; display: inline-block; line-height: 0; }
/* ★ 站长「图片放大可以小一些」: 上限从 60vh/720px 收到 46vh/560px */
.fbk-lb-img { display: block; max-width: min(560px, 46vw); max-height: 46vh; background: #fff; border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
/* 箭头: 深色半透明块(透明背景下要保证在任何页面上都看得清); 尺寸沿用上一版 */
.fbk-lb-nav { flex: 0 0 auto; width: 46px; height: 82px; font-size: 28px; line-height: 1; color: #fff; background: rgba(16, 22, 34, .62); border: 0; border-radius: 10px; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .32); }
.fbk-lb-nav:hover:not(:disabled) { background: rgba(16, 22, 34, .82); }
.fbk-lb-nav:disabled { opacity: .28; cursor: default; }
/* 计数 + 提示合成一条深色胶囊(原来是一颗胶囊 + 一行绝对定位的白字, 现在都收进浮窗里) */
.fbk-lb-bar { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px; border-radius: 999px; background: rgba(16, 22, 34, .72); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.fbk-lb-count { color: #fff; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fbk-lb-tip { margin: 0; color: rgba(255, 255, 255, .82); font-size: 12px; }
/* ★ 关闭按钮: 46px 白圆钮 + 深色 ✕, 钉在**图片右上角**(不是屏幕右上角) */
.fbk-lb-x { position: absolute; top: -14px; right: -14px; width: 46px; height: 46px; font-size: 25px; line-height: 1; color: #16233b; background: #fff; border: 0; border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); cursor: pointer; }
.fbk-lb-x:hover { background: #eef2fb; }
/* 正文保留换行（提交的是多行文本，不能压成一整段） */
.fbk-content { white-space: pre-wrap; line-height: 1.8; }
.fbk-note { min-height: 56px; }
/* 截图缩略图：点击在新标签打开原图 */
.fbk-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.fbk-shot {
width: 88px; height: 88px; object-fit: cover; background: #fff;
border: 1px solid #e3e8ef; border-radius: 6px; cursor: zoom-in;
}
/* ─── 标题右边那把「客户端显示反馈」开关(第90轮) ─────────────────────
站长:「问题反馈弹窗, 标题右边添加个开关选项, 可以API识别开关状态, 这样就能实现客户端和网页
是否显示反馈窗口了」。**弹窗标题栏与页面卡片头共用这一个类**(同一时刻 DOM 里只有一份, 由
feedback-mgmt.js 的 visibleSwitchHtml/mountVisibleSwitch 保证), 所以两处都得好看:
· inline-flex = 跟着标题那行文字走, 绝不撑高标题行(两处标题行都是 flex + h3 flex:1, 本控件
只占右侧一小格, 高度由 12.5px 的字决定, 比标题的 14/15px 还矮);
· 右侧 12px = 与它后面的东西(「只看「X」的反馈」提示 / 计数文字 / × 按钮)留白 ——
宿主 .modal > header 是 flex 但**没有 gap**(.card > header 有 gap:10px, 多这一点不显眼);
· 两态颜色不同: 开 = 绿(勾选框 accent-color 变绿 + 文字加深), 关 = 灰。
:has() 在认不出它的旧内核里只会少一层灰字, 功能不受影响 ——
本站既有的 .mask:has(> .modal.fbk-detail) 已在用同一套写法。 */
.fbk-sw {
display: inline-flex; align-items: center; gap: 5px;
margin: 0 12px 0 8px; font-size: 12.5px; line-height: 1.2; white-space: nowrap;
color: #94a3b8; cursor: pointer; user-select: none;
}
.fbk-sw input { width: 15px; height: 15px; margin: 0; accent-color: #cbd5e1; cursor: pointer; }
.fbk-sw:has(input:checked) { color: #15803d; font-weight: 600; }
.fbk-sw:has(input:checked) input { accent-color: #16a34a; }
/* 请求在途: 变暗 + 进度光标(此时再点没有意义, 状态还没落地) */
.fbk-sw input:disabled { cursor: progress; opacity: .55; }
/* ═══ 第143轮: 批量删除(勾选列 + 全选 + 批量删除按钮) ═══════════════════
站长:「问题反馈弹窗里, 添加个批量删除功能, 删除的问题, 需要彻底删除, 包括图片等,
防止服务器资源占用太大」。
本段**只加新类**(fbk-pick / fbk-bulkdel / fbk-stat-txt / fbk-pickhint), 不覆盖 .tbl / .btn
的任何既有规则 —— 列表本身的排版(列宽、行距)一个像素都不动, 只多出最左边那一条窄列。 */
/* ─── 勾选列: 只占 34px ─────────────────────────────────────────────
为什么用 width 而不是 min-width: 表头 | 's width 是"建议宽度", 单元格内容(15px 的勾选框)
本来就比 34px 窄, 所以这一列不会被内容撑开; 剩下的宽度照旧按既有 6 列的 width 分。
padding 收到 6px(其它 td 是 8px 10px): 这一列里只有一个勾选框, 10px 的左右内距纯属浪费,
收窄之后"标题列少掉的那点宽度"基本可以忽略。 */
.fbk-tbl th.fbk-pick, .fbk-tbl td.fbk-pick {
width: 34px; min-width: 34px; max-width: 34px;
padding: 8px 6px; text-align: center; white-space: nowrap;
}
/* 勾选框本体: 与「客户端显示反馈」那颗同一套尺寸/配色(15px, 勾选态用主题绿), 点起来够大 */
.fbk-tbl input.fbk-pick {
width: 15px; height: 15px; margin: 0; vertical-align: middle;
accent-color: #2563eb; cursor: pointer;
}
.fbk-tbl input.fbk-pick:disabled { cursor: not-allowed; opacity: .5; }
/* ─── 统计行: 统计文字在左, 批量删除按钮靠右 ─────────────────────────
统计行(.fbk-stat)原来只是一行 12.5px 的灰字; 现在多一颗按钮, 所以把它摆成 flex:
文字自带 .fbk-stat-txt, 按钮由 margin-left:auto 顶到最右边。
★ 只在有按钮时才有 flex 效果 —— 万一将来按钮被去掉, 文字自己一行, 排版与原来一致。 */
.fbk-stat { display: flex; align-items: center; gap: 10px; }
.fbk-stat-txt { flex: 0 1 auto; }
/* 批量删除按钮: 靠右 + 不被压扁(危险色用站点现成的 .btn.danger, 这里只定位置) */
.fbk-bulkdel { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.fbk-bulkdel:disabled { cursor: not-allowed; }
/* ─── 「全选只作用于已加载的行」的提示 ───────────────────────────────
只在还有更多没加载时出现(见 feedback-mgmt.js 的 listAreaHtml), 挂在「加载更多」下面。
刻意做得比正文更小更淡: 它是防误会的说明, 不是操作入口。 */
.fbk-pickhint { margin-top: 6px; font-size: 12px; line-height: 1.5; }
|