—— 24px 卡片内边距 + 48px 的
mt-5 = 卡片顶部 73px 纯空白，然后一条横线凭空出现（实测 hr 在 y=213，
卡片顶在 y=140）。那条 hr 本来是给标题当下划线的，标题没写。
补一个真正的头：图标 + 标题 + 右侧计数。 */
.bv-cnt-head {
display: flex;
align-items: center;
gap: var(--s3, 12px);
padding-bottom: var(--s3, 12px);
margin-bottom: var(--s2, 8px);
/* 不画下划线。三页的头下面接的都是自带边界的东西（列表首行有 border-bottom、
下载表头是整条灰底），再加一条就是双线。 */
}
.bv-cnt-head-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: var(--r-ctl, 8px);
background: var(--brand-50, #FFF4ED);
color: var(--brand-600, #D9520A);
font-size: 19px;
}
.bv-cnt-head h5 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--ink-1, #111823);
line-height: 1.3;
}
.bv-cnt-head-sub {
margin: 2px 0 0;
font-size: 12px;
color: var(--ink-4, #8D9AAB);
line-height: 1.3;
}
.bv-cnt-head-n {
margin-left: auto;
flex: 0 0 auto;
font-size: 12px;
color: var(--ink-3, #5E6B7C);
background: var(--surface-sunk, #EFF2F7);
border-radius: 999px;
padding: 3px 11px;
font-variant-numeric: tabular-nums;
}
/* ══ 2 · 新闻 / 帮助 列表 ══════════════════════════════════════════════════
一行一条，标题吃满剩余宽度，日期定宽右贴。层级靠三件事拉开：
· 标题 --ink-2 14.5px，日期 --ink-4 12.5px —— 一眼分得出主次
· hover 时整行浅底 + 左边冒出一条 3px 品牌色竖条（和侧栏选中态同语言）
· 日期用 tabular-nums，一列数字对齐，扫得快 */
.bv-cnt-list {
margin: 0 calc(-1 * var(--s3, 12px));
}
.bv-cnt-item.list-group-item {
position: relative;
display: flex;
align-items: center;
gap: var(--s3, 12px);
padding: 13px var(--s3, 12px) 13px 18px;
border: 0;
border-bottom: 1px solid var(--line, #E2E7EF);
background: transparent;
transition: background-color var(--t-fast, 120ms) var(--ease, ease);
}
.bv-cnt-item.list-group-item:last-child { border-bottom: 0; }
/* 左侧竖条：静止透明，hover 才上色。用 ::before 而不是 border-left，
免得静止态就占掉 3px 让文字跳位。 */
.bv-cnt-item::before {
content: "";
position: absolute;
left: 0;
top: 9px;
bottom: 9px;
width: 3px;
border-radius: 0 3px 3px 0;
background: transparent;
transition: background-color var(--t-fast, 120ms) var(--ease, ease);
}
.bv-cnt-item:hover {
background: var(--surface-2, #FAFBFD);
text-decoration: none;
}
.bv-cnt-item:hover::before { background: var(--brand-500, #F2610C); }
.bv-cnt-title {
flex: 1 1 auto;
min-width: 0;
font-size: 14.5px;
line-height: 1.5;
color: var(--ink-2, #333F4E);
transition: color var(--t-fast, 120ms) var(--ease, ease);
}
.bv-cnt-item:hover .bv-cnt-title { color: var(--brand-600, #D9520A); }
.bv-cnt-time {
flex: 0 0 auto;
font-size: 12.5px;
color: var(--ink-4, #8D9AAB);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ══ 3 · 侧栏：搜索 + 分类 ════════════════════════════════════════════════ */
.bv-cnt-side-h {
display: flex;
align-items: center;
gap: var(--s2, 8px);
margin: 0 0 var(--s3, 12px);
font-size: 13px;
font-weight: 600;
color: var(--ink-1, #111823);
}
/* 小竖条标记小节起点。纯装饰的话不写，这里它确实在传达「一个新分区开始了」。 */
.bv-cnt-side-h::before {
content: "";
width: 3px;
height: 13px;
border-radius: 2px;
background: var(--brand-500, #F2610C);
}
.bv-cnt-cate {
margin: 0;
padding: 0;
list-style: none;
}
.bv-cnt-cate > li { margin-bottom: 2px; }
.bv-cnt-cate a {
display: flex;
align-items: center;
gap: var(--s2, 8px);
padding: 8px 10px;
border-radius: var(--r-ctl, 8px);
font-size: 13.5px;
font-weight: 400;
color: var(--ink-2, #333F4E);
transition: background-color var(--t-fast, 120ms) var(--ease, ease),
color var(--t-fast, 120ms) var(--ease, ease);
}
.bv-cnt-cate a:hover {
background: var(--surface-2, #FAFBFD);
color: var(--brand-600, #D9520A);
text-decoration: none;
}
.bv-cnt-cate a > i {
font-size: 15px;
color: var(--ink-4, #8D9AAB);
flex: 0 0 auto;
transition: color var(--t-fast, 120ms) var(--ease, ease);
}
.bv-cnt-cate a:hover > i { color: var(--brand-500, #F2610C); }
.bv-cnt-cate-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 计数徽章。上游用的是 .badge-soft-success —— 绿色是「成功」的语义色，
这里数的只是条数，跟成败无关，一列全绿纯属噪点。改中性灰底。 */
.bv-cnt-n {
flex: 0 0 auto;
min-width: 24px;
text-align: center;
font-size: 11.5px;
font-weight: 500;
color: var(--ink-3, #5E6B7C);
background: var(--surface-sunk, #EFF2F7);
border-radius: 999px;
padding: 2px 7px;
font-variant-numeric: tabular-nums;
transition: background-color var(--t-fast, 120ms) var(--ease, ease),
color var(--t-fast, 120ms) var(--ease, ease);
}
.bv-cnt-cate a:hover .bv-cnt-n {
background: var(--brand-50, #FFF4ED);
color: var(--brand-700, #B84508);
}
/* 当前分类。原来完全没有选中态 —— 点进某个分类后无从知道自己在哪。 */
.bv-cnt-cate a.bv-on,
.bv-cnt-cate a.bv-on:hover {
background: var(--brand-50, #FFF4ED);
color: var(--brand-700, #B84508);
font-weight: 500;
}
.bv-cnt-cate a.bv-on > i { color: var(--brand-600, #D9520A); }
.bv-cnt-cate a.bv-on .bv-cnt-n {
background: var(--brand-100, #FFE3D0);
color: var(--brand-700, #B84508);
}
.bv-cnt-side .search-icon {
color: var(--ink-4, #8D9AAB);
cursor: pointer;
}
.bv-cnt-side hr {
border-color: var(--line, #E2E7EF);
}
/* ══ 4 · 空态 ══════════════════════════════════════════════════════════════ */
.bv-cnt-empty {
padding: 56px 20px;
text-align: center;
color: var(--ink-4, #8D9AAB);
}
.bv-cnt-empty i {
display: block;
font-size: 40px;
margin-bottom: var(--s3, 12px);
color: var(--line-strong, #CFD7E3);
}
.bv-cnt-empty p { margin: 0; font-size: 13.5px; }
/* ══ 5 · 窄屏 ══════════════════════════════════════════════════════════════
⚠ 992px 以下，上游把侧栏（搜索框 + 分类）排到列表**后面**。实测 390px 下
侧栏落在 y=1699 —— 要往下滚 1700px 才够得着搜索框，等于手机上没有搜索
和分类。.row 本身是 flex，给两列写 order 就能把侧栏提到列表前面。 */
@media (max-width: 991.98px) {
.bv-cnt-page > .bv-cnt-side-col { order: 1; }
.bv-cnt-page > .bv-cnt-main-col { order: 2; }
.bv-cnt-side-col .card { margin-bottom: var(--s4, 16px); }
.bv-cnt-side .card-body { padding: var(--s3, 12px) !important; }
.bv-cnt-side hr { margin: var(--s3, 12px) 0 !important; }
/* ⚠ 光把侧栏提上来还不够：竖着排的分类列表本身就有 400~530px 高
（新闻 4 类 398px、帮助 7 类 531px），正文照样被推到折叠线以下，
只是从「滚 1700px 才看得到搜索」换成「滚 500px 才看得到正文」。
分类在窄屏改成横向胶囊条，整块压到 ~150px。和 downloads 侧栏同一套做法。 */
.bv-cnt-cate {
display: flex;
gap: var(--s2, 8px);
overflow-x: auto;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.bv-cnt-cate::-webkit-scrollbar { display: none; }
.bv-cnt-cate > li { margin: 0; flex: 0 0 auto; }
.bv-cnt-cate a {
white-space: nowrap;
border: 1px solid var(--line, #E2E7EF);
padding: 7px 12px;
}
.bv-cnt-cate a.bv-on { border-color: var(--brand-100, #FFE3D0); }
.bv-cnt-cate-name { overflow: visible; text-overflow: clip; }
.bv-cnt-side-h { margin-bottom: var(--s2, 8px); }
}
@media (max-width: 575.98px) {
.bv-cnt-page .card.p-4 { padding: var(--s4, 16px) !important; }
.bv-cnt-list { margin: 0 calc(-1 * var(--s2, 8px)); }
/* 手机上标题几乎必然换行，日期跟在右边会把标题挤成一列窄条。
改成标题独占一行、日期换到下面。 */
.bv-cnt-item.list-group-item {
flex-wrap: wrap;
gap: 3px;
padding: 12px var(--s2, 8px) 12px 14px;
}
.bv-cnt-title { flex: 1 1 100%; font-size: 14px; }
.bv-cnt-time { flex: 0 0 auto; font-size: 12px; }
.bv-cnt-head-n { font-size: 11.5px; }
}
/* ══════════════════════════════════════════════════════════════════════════
6 · 资源下载 /downloads
══════════════════════════════════════════════════════════════════════════ */
/* ⚠ 侧栏被压扁的真根因（实测）：
结构是
[.filemanager-sidebar] [.w-100]
，
而 .filemanager-sidebar **在上游 app.min.css 里根本没有定义**（grep 无
命中），既没 width 也没 flex-basis。旁边那个 .w-100 是 width:100%，
于是 flex 分配时侧栏只能拿剩下的：
1440px → 侧栏 280px（还有富余，取到 max-content）
1024px → 侧栏 66px ← 分类名被压成竖排单字
768px → 侧栏 64px
390px → 侧栏 64px，整张卡从 1768px 拉到 3372px 高
给侧栏一个确定的 flex basis，并且给 .w-100 min-width:0（否则表格的
min-content 会反过来顶开容器）。 */
.bv-dl-wrap {
align-items: flex-start;
}
.bv-dl-wrap > .filemanager-sidebar {
flex: 0 0 244px;
max-width: 244px;
min-width: 0;
}
.bv-dl-wrap > .bv-dl-main {
flex: 1 1 auto;
min-width: 0;
}
.bv-dl-wrap > .filemanager-sidebar .card-body { padding: var(--s5, 24px) 18px; }
.bv-dl-cate { margin: 0; padding: 0; list-style: none; }
.bv-dl-cate > li { margin-bottom: 2px; }
.bv-dl-cate a {
display: flex;
align-items: center;
gap: var(--s2, 8px);
padding: 8px 10px;
border-radius: var(--r-ctl, 8px);
font-size: 13.5px;
color: var(--ink-2, #333F4E);
transition: background-color var(--t-fast, 120ms) var(--ease, ease),
color var(--t-fast, 120ms) var(--ease, ease);
}
.bv-dl-cate a:hover {
background: var(--surface-2, #FAFBFD);
color: var(--brand-600, #D9520A);
text-decoration: none;
}
.bv-dl-cate a > i {
font-size: 16px;
flex: 0 0 auto;
color: var(--brand-500, #F2610C);
}
.bv-dl-cate a.bv-on,
.bv-dl-cate a.bv-on:hover {
background: var(--brand-50, #FFF4ED);
color: var(--brand-700, #B84508);
font-weight: 500;
}
/* 表格 */
.bv-dl-table thead th {
background: var(--surface-sunk, #EFF2F7);
border-top: 0;
border-bottom: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--ink-3, #5E6B7C);
white-space: nowrap;
padding: 11px 12px;
}
.bv-dl-table thead th:first-child { border-radius: var(--r-ctl, 8px) 0 0 var(--r-ctl, 8px); }
.bv-dl-table thead th:last-child { border-radius: 0 var(--r-ctl, 8px) var(--r-ctl, 8px) 0; }
.bv-dl-table tbody td {
padding: 13px 12px;
border-top: 1px solid var(--line, #E2E7EF);
font-size: 13px;
color: var(--ink-2, #333F4E);
}
.bv-dl-table tbody tr:hover td { background: var(--surface-2, #FAFBFD); }
.bv-dl-name {
display: inline-flex;
align-items: center;
gap: var(--s2, 8px);
font-size: 13.5px;
font-weight: 500;
color: var(--ink-1, #111823) !important;
}
.bv-dl-name:hover { color: var(--brand-600, #D9520A) !important; text-decoration: none; }
.bv-dl-name > i { font-size: 17px; flex: 0 0 auto; }
.bv-dl-desc {
white-space: normal !important;
max-width: 420px;
font-size: 12.5px;
line-height: 1.6;
color: var(--ink-3, #5E6B7C) !important;
}
.bv-dl-time { color: var(--ink-3, #5E6B7C); font-variant-numeric: tabular-nums; }
.bv-dl-hits { font-variant-numeric: tabular-nums; color: var(--ink-3, #5E6B7C); }
/* 下载入口：原来是个 text-primary 的蓝图标（站内早就没有蓝了），
而且 16px 的裸图标在手机上根本点不准。做成 32px 的圆形按钮。 */
.bv-dl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 32px;
height: 32px;
padding: 0 9px;
border-radius: var(--r-ctl, 8px);
background: var(--brand-50, #FFF4ED);
color: var(--brand-600, #D9520A) !important;
font-size: 16px;
transition: background-color var(--t-fast, 120ms) var(--ease, ease),
color var(--t-fast, 120ms) var(--ease, ease);
}
.bv-dl-btn:hover {
background: var(--brand-600, #D9520A);
color: #FFFFFF !important;
text-decoration: none;
}
.bv-dl-btn span { display: none; font-size: 13px; font-weight: 500; }
/* ── 窄屏：侧栏改成横向胶囊条，表格改成卡片流 ──────────────────────────
手机上 5 列表格只能横向拖（实测表格 631px 塞进 390px 视口），
「上传时间 / 下载次数 / 下载按钮」三列在屏幕外，等于看不到也点不到。 */
@media (max-width: 991.98px) {
.bv-dl-wrap { display: block !important; }
.bv-dl-wrap > .filemanager-sidebar {
flex: none;
max-width: none;
margin: 0 0 var(--s3, 12px) !important;
}
.bv-dl-wrap > .filemanager-sidebar .card-body { padding: var(--s3, 12px); }
.bv-dl-cate {
display: flex;
gap: var(--s2, 8px);
overflow-x: auto;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.bv-dl-cate::-webkit-scrollbar { display: none; }
.bv-dl-cate > li { margin: 0; flex: 0 0 auto; }
.bv-dl-cate a {
white-space: nowrap;
border: 1px solid var(--line, #E2E7EF);
padding: 7px 12px;
}
.bv-dl-cate a.bv-on { border-color: var(--brand-100, #FFE3D0); }
}
@media (max-width: 767.98px) {
.bv-dl-main .table-responsive { overflow-x: visible; }
.bv-dl-table,
.bv-dl-table tbody,
.bv-dl-table tr,
.bv-dl-table td { display: block; width: auto; }
.bv-dl-table thead { display: none; }
.bv-dl-table tbody tr {
position: relative;
border: 1px solid var(--line, #E2E7EF);
border-radius: var(--r-ctl, 8px);
padding: 12px 52px 12px 12px;
margin-bottom: var(--s2, 8px);
}
.bv-dl-table tbody tr:hover td { background: transparent; }
.bv-dl-table tbody td {
border-top: 0;
padding: 0;
white-space: normal !important;
}
.bv-dl-desc { max-width: none; margin-top: 5px; }
.bv-dl-desc:empty { display: none; }
/* 上传时间 / 下载次数：并成一行，各自用 data-l 补个标签，
否则脱离表头之后两个数字谁是谁分不清。 */
.bv-dl-table td.bv-dl-meta {
display: inline-block;
margin-top: 7px;
margin-right: 14px;
font-size: 12px;
color: var(--ink-4, #8D9AAB);
}
.bv-dl-table td.bv-dl-meta::before {
content: attr(data-l) "：";
color: var(--ink-4, #8D9AAB);
}
/* 下载按钮钉在卡片右侧垂直居中 */
.bv-dl-table td.bv-dl-act {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
margin: 0;
}
.bv-dl-table td.bv-dl-act .dropdown { display: block; }
}