208 lines
6.2 KiB
CSS
208 lines
6.2 KiB
CSS
|
/**
|
|||
|
|
* 代码块样式（highlight.js 自研接管后的卡片外观）
|
|||
|
|
*
|
|||
|
|
* 与 kratos.css 里原有那段的关系：
|
|||
|
|
* 原有 `.k-main .details .article .content pre { … }` 里有
|
|||
|
|
* `background-color:#f8f8f8`、`font-size:11px`、**`word-break:break-all`**。
|
|||
|
|
* 最后这条会在任意字符处断行，代码看起来像乱码 —— 必须压掉。
|
|||
|
|
* 本文件加载在 kratos.css 之后，用更高的特异性覆盖。
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* ── 卡片外壳 ── */
|
|||
|
|
.k-main .details .article .content .cb,
|
|||
|
|
.comment-body .cb,
|
|||
|
|
.cb {
|
|||
|
|
position: relative;
|
|||
|
|
margin: 14px 0;
|
|||
|
|
border: 1px solid #d0d7de;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 顶部条：语言标签 + 复制按钮 ── */
|
|||
|
|
.k-main .details .article .content .cb .cb-bar,
|
|||
|
|
.cb .cb-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
background: #f6f8fa;
|
|||
|
|
border-bottom: 1px solid #d0d7de;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 语言标签：让人一眼看到"这是 Java"，防止把 Python 和 Java 的实现贴反。
|
|||
|
|
站内实测有 19 篇文章含 ≥2 种语言、38 处相邻代码块语言不同 —— 确有实用价值。 */
|
|||
|
|
.cb .cb-lang {
|
|||
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: .02em;
|
|||
|
|
color: #656d76;
|
|||
|
|
padding: 1px 6px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid #d0d7de;
|
|||
|
|
background: #fff;
|
|||
|
|
text-transform: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🔴 自动识别出来的标签要**看得出来是猜的**：虚线边框 + 斜体。
|
|||
|
|
站内 18 个 ≥4 行的未标注代码块实测自动识别只对了 4 个（22%）——
|
|||
|
|
如果把它画得和作者标的一模一样，等于把 78% 的错误结果伪装成确定事实。 */
|
|||
|
|
.cb .cb-lang[data-guess="1"] {
|
|||
|
|
border-style: dashed;
|
|||
|
|
font-style: italic;
|
|||
|
|
opacity: .8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cb .cb-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cb .cb-copy {
|
|||
|
|
font: inherit;
|
|||
|
|
font-size: 11px;
|
|||
|
|
padding: 3px 9px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: #656d76;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #d0d7de;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
transition: color .12s, border-color .12s, opacity .12s;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.cb:hover .cb-copy,
|
|||
|
|
.cb .cb-copy:focus-visible { opacity: 1; }
|
|||
|
|
.cb .cb-copy:hover { color: #0969da; border-color: #0969da; }
|
|||
|
|
.cb .cb-copy.done { color: #1a7f37; border-color: #1a7f37; }
|
|||
|
|
.cb .cb-copy.err { color: #cf222e; border-color: #cf222e; }
|
|||
|
|
|
|||
|
|
/* 🔴 触屏兜底：没有 hover 的设备上按钮必须常驻，否则永远点不到。
|
|||
|
|
注意这里必须是「默认隐藏 + 触屏覆盖回 1」的写法。
|
|||
|
|
如果默认是 1、只在 @media(hover:none) 里再写 1，那条规则等于空操作 ——
|
|||
|
|
因为 1 本来就是默认值，删掉也不会变，故障测不出来。 */
|
|||
|
|
@media (hover: none) {
|
|||
|
|
.cb .cb-copy { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 代码区：左行号槽 + 右可滚动 pre ── */
|
|||
|
|
.cb .cb-body {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 行号槽。
|
|||
|
|
🔴 它在 <pre> **外面**，所以行号文字永远不会进 code.textContent ⇒
|
|||
|
|
"复制不带行号"是结构保证的，不靠 JS 删、也不靠正则过滤。
|
|||
|
|
🔴 除了用户要求，这里还有一层现实原因：hljs 输出的是 token span，
|
|||
|
|
没有行结构，想在 span 上挂 ::before 计数是挂不住的（没有 span.line 这种元素）。
|
|||
|
|
原型阶段就是这么写的，结果 CSS 规则齐全、画面上零行号。 */
|
|||
|
|
.cb .cb-ln {
|
|||
|
|
display: none;
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
padding: 12px 0 12px 10px;
|
|||
|
|
text-align: right;
|
|||
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|||
|
|
font-size: 12.5px;
|
|||
|
|
line-height: 1.62;
|
|||
|
|
color: #9aa0a6;
|
|||
|
|
background: #f6f8fa;
|
|||
|
|
border-right: 1px solid #eaecef;
|
|||
|
|
user-select: none;
|
|||
|
|
-webkit-user-select: none;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.cb .cb-ln > span { display: block; }
|
|||
|
|
|
|||
|
|
/* 行号开关（body 上带 opt-ln 类时显示）*/
|
|||
|
|
.opt-ln .cb .cb-ln { display: block; }
|
|||
|
|
|
|||
|
|
/* 🔴 这里必须把 padding 显式写成 12px，和 .cb-ln 的 padding-top 对齐。
|
|||
|
|
每套 hljs 官方主题都自带 `pre code.hljs{padding:1em}`，会把代码整体
|
|||
|
|
往下压 1em。行号槽没有这个 padding，于是第一行代码的 top 比行号低 15.5px，
|
|||
|
|
屏幕上就是"第 1 行代码旁边写着 2"，往下每行错一位。
|
|||
|
|
实测（原型页）：修前逐行偏差 15.5px，修后 0.00px。 */
|
|||
|
|
.k-main .details .article .content .cb pre,
|
|||
|
|
.cb pre {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 12px 14px;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|||
|
|
font-size: 12.5px;
|
|||
|
|
line-height: 1.62;
|
|||
|
|
/* 🔴 原有主题写的是 word-break:break-all，会在任意字符断行，代码像乱码。
|
|||
|
|
长行必须横向滚动，不能折断。 */
|
|||
|
|
word-break: normal;
|
|||
|
|
overflow-wrap: normal;
|
|||
|
|
white-space: pre;
|
|||
|
|
tab-size: 4;
|
|||
|
|
border: 0;
|
|||
|
|
border-radius: 0;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 主题自带的 code padding 必须归零，否则与行号槽错位（见上） */
|
|||
|
|
.cb .cb-body > pre > code.hljs {
|
|||
|
|
padding: 0;
|
|||
|
|
overflow-x: visible;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cb .cb-body > pre { flex: 1 1 auto; min-width: 0; }
|
|||
|
|
|
|||
|
|
.cb pre code {
|
|||
|
|
display: block;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background: transparent;
|
|||
|
|
font-size: inherit;
|
|||
|
|
line-height: inherit;
|
|||
|
|
color: inherit;
|
|||
|
|
font-family: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 深色配色必须让卡片自带深色底与深色顶条。
|
|||
|
|
站点正文是浅色，若只在浅底上印深色配色，
|
|||
|
|
token 与背景对比不足（现有 Prism 出问题的地方正在这里）。 */
|
|||
|
|
.cb[data-kind="dark"] {
|
|||
|
|
border-color: #30363d;
|
|||
|
|
background: #0d1117;
|
|||
|
|
}
|
|||
|
|
.cb[data-kind="dark"] .cb-bar {
|
|||
|
|
background: #21262d;
|
|||
|
|
border-bottom-color: #30363d;
|
|||
|
|
}
|
|||
|
|
.cb[data-kind="dark"] .cb-lang {
|
|||
|
|
background: #21262d;
|
|||
|
|
border-color: #30363d;
|
|||
|
|
color: #8b949e;
|
|||
|
|
}
|
|||
|
|
.cb[data-kind="dark"] .cb-copy {
|
|||
|
|
background: #21262d;
|
|||
|
|
border-color: #30363d;
|
|||
|
|
color: #8b949e;
|
|||
|
|
}
|
|||
|
|
.cb[data-kind="dark"] .cb-copy:hover {
|
|||
|
|
color: #58a6ff;
|
|||
|
|
border-color: #58a6ff;
|
|||
|
|
}
|
|||
|
|
.cb[data-kind="dark"] .cb-ln {
|
|||
|
|
background: #161b22;
|
|||
|
|
border-right-color: #30363d;
|
|||
|
|
color: #6e7681;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 窄屏：行号槽收窄，避免挤占代码宽度 */
|
|||
|
|
@media (max-width: 560px) {
|
|||
|
|
.cb .cb-ln { padding: 12px 0 12px 6px; font-size: 11px; }
|
|||
|
|
.cb .cb-ln > span { padding-right: 4px; }
|
|||
|
|
.cb pre { padding: 12px 10px; font-size: 12px; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 打印：行号与复制按钮都不需要 */
|
|||
|
|
@media print {
|
|||
|
|
.cb .cb-ln, .cb .cb-actions { display: none !important; }
|
|||
|
|
.cb { break-inside: avoid; }
|
|||
|
|
}
|