/* 自托管字体：霞鹜文楷（LXGW WenKai）与汉仪文黑 85W
（GB2312 常用字子集化 woff2，消除第三方 CDN 供应链依赖） */
@font-face {
font-family: 'LXGW WenKai';
src: url('/fonts/LXGWWenKai.woff2') format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'HYWenHei 85W';
src: url('/fonts/HYWenHei85W.woff2') format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}
:root {
--color-dark: #1a1a1a;
--color-light: #F9F9F9;
--color-primary: #1a8fe3;
--size-step-0: clamp(0.85rem, calc(0.8rem + 0.22vw), 1rem);
--size-step-1: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
--size-step-2: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
--size-step-3: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
--size-step-4: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
--spacing: 1.2rem;
--font-stack: 'LXGW WenKai', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--code-background-color: var(--color-dark);
--code-color: var(--color-light);
}
/* 字体偏好（设置页选择，data-font 由 JS 写入 ） */
:root[data-font="system"] {
--font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
:root[data-font="hywenhei"] {
--font-stack: 'HYWenHei 85W', 'LXGW WenKai', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
@media (prefers-color-scheme: dark) {
:root {
--color-dark: #fafafa;
--color-light: #1a1a1a;
}
}
body {
background: var(--color-light);
color: var(--color-dark);
padding: var(--spacing) clamp(calc(var(--spacing) / 2), 5vw, calc(var(--spacing) * 3));
font-family: var(--font-stack);
font-size: var(--size-step-1);
line-height: 1.7;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-weight: 400;
}
* {
box-sizing: border-box;
}
header, main, footer {
width: 100%;
max-width: 65ch;
margin-inline: auto;
}
header {
padding-bottom: var(--spacing);
}
main {
flex: 1;
padding-bottom: calc(var(--spacing) * 2);
}
a {
color: currentColor;
text-decoration: none;
}
article a {
text-decoration: underline;
-webkit-text-decoration-color: var(--color-primary) !important;
text-decoration-color: var(--color-primary) !important;
text-decoration-thickness: 0.2ex !important;
text-underline-offset: 0.3ex !important;
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5 {
font-weight: 800;
line-height: 1.3;
text-wrap: balance;
}
h1 {
font-size: var(--size-step-4);
max-width: 24ch;
}
h2 {
font-size: var(--size-step-3);
max-width: 32ch;
}
h3 {
font-size: var(--size-step-2);
}
h4 {
font-size: var(--size-step-1);
}
h5 {
font-size: var(--size-step-0);
}
ul, ol {
padding-inline-start: var(--spacing);
}
li {
margin-block-start: var(--spacing);
}
blockquote {
padding-inline-start: var(--spacing);
border-inline-start: 0.3em solid;
font-style: italic;
font-size: var(--size-step-1);
margin: 0;
width: 100%;
background: #e9e9e9;
}
content > div > * {
margin-block-start: var(--spacing);
}
:is(h1, h2, h3, h4, h5, blockquote) {
--flow-space: calc(var(--spacing) * 2);
overflow-wrap: break-word;
word-break: normal;
}
:is(h1, h2, h3, h4, h5) + * {
--flow-space: calc(var(--spacing) / 3);
}
:is(h1, h2, h3, h4, h5) + :where(h2, h3, h4, h5) {
--flow-space: calc(var(--spacing) * 2);
}
.title {
text-decoration: none;
font-size: var(--size-step-2);
}
.subtitle {
padding: 0;
margin: 0;
color: gray;
font-size: var(--size-step-0);
}
nav {
margin: 10px 0;
}
nav p {
display: flex;
flex-wrap: wrap;
gap: var(--spacing);
}
button {
margin-left: 10px;
border-radius: 10px;
color: #4d4d4d;
background: var(--color-light);
border: 0px;
font-size: 18px;
padding: 10px 20px;
box-shadow: -5px -5px 15px #AAA, 5px 5px 15px #EEE;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
button:hover{
background: linear-gradient(145deg, #ffffff, #e6e6e6);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px white;
}
button:active{
background: linear-gradient(145deg, #e6e6e6, #ffffff);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px white;
}
.blog-posts {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0;
list-style: none;
}
.thumbnail {
width: 100%;
aspect-ratio: 1;
border-radius: 10px;
object-fit: cover;
}
.article-item {
position: relative;
/* 列数由 --cols 控制（ink.js 按用户设置写入 .blog-posts）：
未设置时取 3 列（默认现状）；媒体查询内的 var() 兜底值不同，
显式设置了 --cols 则全端统一跟随该值（断点不再降列） */
width: calc(100% / var(--cols, 3) - 20px);
padding: 0;
aspect-ratio: 1;
background-size: cover;
background-position: center;
border-radius: 10px;
transition: box-shadow 0.3s ease, transform 0.3s ease;
color: white;
margin: 10px;
}
.article-item a {
border-radius: 10px;
display: block;
color: inherit;
}
.article-item img {
border-radius: 10px;
}
.article-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: blur(10px);
/* 半透明黑底（浅色封面可读性）：ink.js 会对浅色封面（如白底漫画）
写入 rgba(255,255,255,0.4) 的 inline backgroundColor，白字在其上
发虚。background-image 黑层叠加白底效果不足（有效背景仍偏白），
故用 !important 统一压成半透明黑。深色封面下黑底亦无副作用。 */
background-color: rgba(0, 0, 0, 0.4) !important;
display: flex;
margin: 5px;
padding: 10px;
border-radius: 10px;
flex-direction: column;
max-height: 40%;
overflow: hidden;
}
.article-info time {
font-size: 0.8rem;
}
.article-info span {
font-size: var(--size-step-0);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.article-excerpt {
font-size: 0.75rem;
margin: 4px 0 0 0;
line-height: 1.3;
opacity: 0.85;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.blog-posts--list {
flex-direction: column;
gap: 0.35rem;
}
.blog-posts--list .article-item {
width: calc(100% - 20px);
aspect-ratio: auto;
color: var(--color-dark);
background: transparent;
}
.blog-posts--list .article-item a.link {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0.85rem;
padding: 0.65rem;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(0, 0, 0, 0.03);
}
.blog-posts--list .thumbnail,
.blog-posts--list .article-item img {
width: 132px;
min-width: 132px;
aspect-ratio: 4 / 3;
border-radius: 8px;
}
.blog-posts--list .article-info {
position: static;
margin: 0;
padding: 0.15rem 0;
max-height: none;
overflow: visible;
background-color: transparent !important;
backdrop-filter: none;
color: inherit;
justify-content: center;
}
.blog-posts--list .article-info time {
color: #888;
}
.blog-posts--list .article-info span {
color: var(--color-dark);
-webkit-line-clamp: 3;
}
.blog-posts--list .article-excerpt {
color: #666;
}
[data-theme="dark"] .blog-posts--list .article-item a.link {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .blog-posts--list .article-info span {
color: var(--color-light);
}
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: block;
margin-bottom: 20px;
}
time {
font-style: normal;
font-family: "monospace";
margin-right: 0.5em;
}
table {
width: 100%;
}
th {
text-align: left;
}
code, .highlight, .code {
font-family: var(--font-stack);
font-size: 0.9em;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin: 0 3px;
white-space: pre-wrap;
word-wrap: break-word;
}
/* 正文行内长串换行：code 无断点长串（路径、token、哈希）与长链接文本
默认不换行，移动端溢出页面；anywhere 仅在该单元超出容器时打断，
正常单词与中文不受影响（对比 word-break: break-all 的暴力拆词） */
article code,
article a {
overflow-wrap: anywhere;
}
/* 表格单元格：td/th 内长串（举报编号、哈希、URL）在窄屏下同样需要
可断行；否则单元格内容撑破列宽溢出页面 */
article table td,
article table th {
overflow-wrap: anywhere;
}
code {
padding:2px 3px;
}
pre code{
padding:3px 0px;
}
pre {
font-family: var(--font-stack);
border-radius: 3px;
padding: 5px;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
font-size: 0.8em;
background-color: var(--code-background-color);
}
.gallery {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
}
.gallery figure {
margin: 0;
position: relative;
}
.photo-title {
font-weight: bold;
display: block;
font-size: 1.2rem;
}
.photo-date {
display: block;
font-size: 0.8rem;
}
.gallery-item img {
border-radius: 10px;
min-height: 400px;
}
@media (max-width: 768px) {
.article-item {
width: calc(100% / var(--cols, 2) - 20px);
}
.gallery {
padding: 10px;
}
.gallery-item img {
min-height: 200px;
}
}
@media (max-width: 480px) {
.article-item {
width: calc(100% / var(--cols, 1) - 20px);
}
}
.link {
width: 100%;
height: 100%;
align-content: flex-end;
border-radius: 10px;
}
.article-item:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px white;
}
.article-item:active {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3) inset, -5px -5px 10px white inset;
}
.article-image {
position: relative;
display: inline-block; /* 确保宽度跟随内容 */
border-radius: 10px;
}
.article-image img {
border-radius: 10px;
height: auto;
display: block; /* 使图片为块级元素，以消除底部空白 */
}
.image-info {
text-align: right;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px; /* 仍然保持左右边距 */
width: calc(100% - 20px); /* 确保信息区域宽度适应 */
border-radius: 10px;
color: white;
backdrop-filter: blur(10px);
background-color: rgba(0,0,0,0.2);
padding: 15px 10px 10px 15px;
}
.image-title {
display: block;
font-size: calc(var(--size-step-0));
}
.image-alt {
display: block;
font-size: 0.8rem;
}
.image-alt .image-title {
padding: 0;
margin: 0;
color: #606060;
}
/* ======================== 代码块复制按钮 ======================== */
.copy-btn {
position: absolute;
top: 6px;
right: 6px;
min-height: 44px;
min-width: 44px;
padding: 8px 12px;
font-size: 12px;
font-family: var(--font-stack);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
line-height: 1.4;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
pre:hover .copy-btn {
opacity: 1;
}
@media (hover: none), (pointer: coarse) {
.copy-btn {
opacity: 1;
}
}
.copy-btn:hover {
background: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.9);
}
.copy-btn.copied {
background: var(--color-primary, #1a8fe3);
color: #fff;
border-color: var(--color-primary, #1a8fe3);
opacity: 1;
}
@media (prefers-color-scheme: dark) {
.copy-btn {
border-color: rgba(0,0,0,0.2);
background: rgba(0,0,0,0.15);
color: rgba(255,255,255,0.5);
}
.copy-btn:hover {
background: rgba(0,0,0,0.3);
color: rgba(255,255,255,0.85);
}
}
/* ======================== 文章目录 TOC ======================== */
.post-toc {
margin-bottom: 2rem;
padding: 12px 16px;
background: #f5f5f5;
border-radius: 8px;
border: 1px solid #e8e8e8;
}
.toc-header {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.toc-label {
font-weight: bold;
font-size: 0.9rem;
}
.toc-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 0.8rem;
color: #666;
padding: 2px 8px;
box-shadow: none;
margin: 0;
border-radius: 4px;
}
.toc-toggle:hover {
background: #e0e0e0;
}
.toc-list, .toc-sublist {
margin: 0;
padding-left: 1.2em;
}
.toc-list {
padding-left: 0;
list-style: none;
}
.toc-sublist {
list-style: none;
}
.toc-item {
margin: 0;
}
.toc-h2 {
font-size: 0.9rem;
margin-top: 4px;
}
.toc-h3 {
font-size: 0.8rem;
margin-top: 2px;
padding-left: 0.6em;
}
.toc-item a {
text-decoration: none;
color: #444;
display: block;
padding: 2px 4px;
border-radius: 4px;
transition: background 0.2s;
}
.toc-item a:hover {
background: #e0e0e0;
}
.toc-item.active > a {
color: #1a8fe3;
font-weight: 500;
}
.toc-list.collapsed,
.toc-list.collapsed .toc-sublist {
display: none;
}
@media (prefers-color-scheme: dark) {
.post-toc {
background: #2a2a2a;
border-color: #333;
}
.toc-item a {
color: #ccc;
}
.toc-item a:hover {
background: #333;
}
.toc-item.active > a {
color: #66b8f0;
}
.toc-toggle {
color: #aaa;
}
}
/* ======================== 返回顶部 ======================== */
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: white;
border: none;
cursor: pointer;
font-size: 18px;
line-height: 40px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 999;
box-shadow: none;
margin: 0;
padding: 0;
}
#back-to-top.visible {
opacity: 1;
pointer-events: auto;
}
#back-to-top:hover {
background: rgba(0, 0, 0, 0.8);
}
@media (max-width: 767px) {
#back-to-top {
bottom: 4.5rem;
right: 1rem;
width: 44px;
height: 44px;
font-size: 18px;
line-height: 44px;
}
}
/* ======================== 阅读进度条 ======================== */
#reading-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: #1a8fe3;
z-index: 99999;
width: 0%;
transition: width 0.1s linear;
}
#twilight-rain-name.hover-trigger {
color: #00AEEC;
text-decoration: underline;
cursor: pointer;
}
#hover-card {
position: fixed;
z-index: 9999;
width: 320px;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 14px 16px;
font-size: 14px;
line-height: 1.7;
color: #222;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
#hover-card.visible {
opacity: 1;
pointer-events: auto;
}
#hover-card .hover-card-title {
font-weight: bold;
font-size: 15px;
margin-bottom: 6px;
color: #000;
}
#hover-card ul {
margin: 0;
padding-left: 18px;
list-style-type: disc;
}
#hover-card ul li {
margin-block-start: 0;
}
#hover-card .hover-card-signature {
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid #e8e8e8;
color: #888;
font-style: italic;
font-size: 13px;
}
/* ======================== 深色/浅色主题切换 ======================== */
.header-top {
display: flex;
align-items: center;
justify-content: space-between;
}
[data-theme="dark"] {
--color-dark: #f0f0f0;
--color-light: #1a1a1a;
}
[data-theme="dark"] .post-toc {
background: #2a2a2a;
border-color: #333;
}
[data-theme="dark"] .post-toc a {
color: #ccc;
}
[data-theme="dark"] .post-toc a:hover {
background: #333;
}
[data-theme="dark"] .post-toc .toc-item.active > a {
color: #66b8f0;
}
[data-theme="dark"] .toc-toggle {
color: #aaa;
}
[data-theme="dark"] blockquote {
background: #2a2a2a;
}
/* ======================== 主导航菜单 ======================== */
.main-nav {
margin: 8px 0 0 0;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
}
.main-nav a {
color: inherit;
text-decoration: none;
font-size: var(--size-step-0);
padding: 2px 0;
border-bottom: 2px solid transparent;
transition: border-color 0.2s;
}
.main-nav a:hover {
border-bottom-color: var(--color-primary, #1a8fe3);
}
/* ======================== 标签云 ======================== */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
padding: 10px 0;
align-items: center;
}
.tag-cloud-item {
display: inline-block;
text-decoration: none;
padding: 4px 10px;
border-radius: 6px;
background: rgba(26, 143, 227, 0.08);
border: 1px solid rgba(26, 143, 227, 0.15);
transition: background 0.2s, border-color 0.2s, transform 0.2s;
line-height: 1.3;
}
.tag-cloud-item:hover {
background: rgba(26, 143, 227, 0.15);
border-color: var(--color-primary, #1a8fe3);
transform: translateY(-1px);
}
.tag-count {
font-size: 0.75em;
opacity: 0.6;
margin-left: 3px;
}
[data-theme="dark"] .tag-cloud-item {
background: rgba(102, 184, 240, 0.1);
border-color: rgba(102, 184, 240, 0.2);
}
[data-theme="dark"] .tag-cloud-item:hover {
background: rgba(102, 184, 240, 0.2);
}
/* ======================== 分类归档 ======================== */
.category-list {
list-style: none;
padding: 0;
}
.category-list-item {
margin: 8px 0;
padding: 8px 12px;
border-radius: 6px;
transition: background 0.2s;
}
.category-list-item:hover {
background: rgba(128, 128, 128, 0.08);
}
.category-list-item a {
text-decoration: none;
color: inherit;
display: block;
font-size: var(--size-step-1);
}
.category-count {
font-size: 0.8em;
opacity: 0.6;
margin-left: 8px;
}
/* ======================== 站内搜索 ======================== */
.search-container {
max-width: 100%;
}
.search-box {
position: relative;
display: flex;
align-items: center;
margin-bottom: 20px;
}
#search-input {
width: 100%;
padding: 12px 40px 12px 16px;
font-size: var(--size-step-1);
font-family: var(--font-stack);
border: 2px solid #ddd;
border-radius: 8px;
background: var(--color-light);
color: var(--color-dark);
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
#search-input:focus {
border-color: var(--color-primary, #1a8fe3);
}
.search-clear-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: rgba(128, 128, 128, 0.2);
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
cursor: pointer;
font-size: 14px;
display: none;
align-items: center;
justify-content: center;
color: #666;
margin: 0;
padding: 0;
box-shadow: none;
line-height: 1;
}
.search-clear-btn:hover {
background: rgba(128, 128, 128, 0.35);
box-shadow: none;
}
.search-stats {
font-size: var(--size-step-0);
color: #888;
margin-bottom: 12px;
}
.search-result {
min-height: 100px;
}
.search-results-list {
list-style: none;
padding: 0;
}
.search-result-item {
margin: 0 0 16px 0;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid #e8e8e8;
transition: background 0.2s, border-color 0.2s;
}
.search-result-item:hover {
background: rgba(128, 128, 128, 0.05);
border-color: #ccc;
}
.search-result-item a {
text-decoration: none;
color: inherit;
display: block;
}
.search-result-item h3 {
margin: 0 0 6px 0;
font-size: var(--size-step-1);
}
.search-snippet {
margin: 0;
font-size: var(--size-step-0);
opacity: 0.75;
line-height: 1.5;
}
.search-highlight {
background: #ffd54f;
color: #333;
padding: 0 2px;
border-radius: 2px;
}
.search-no-result,
.search-error,
.search-loading {
text-align: center;
padding: 40px 20px;
color: #888;
}
[data-theme="dark"] #search-input {
border-color: #444;
}
[data-theme="dark"] #search-input:focus {
border-color: var(--color-primary, #1a8fe3);
}
[data-theme="dark"] .search-result-item {
border-color: #333;
}
[data-theme="dark"] .search-result-item:hover {
border-color: #555;
}
[data-theme="dark"] .search-highlight {
background: #e65100;
color: #fff;
}
[data-theme="dark"] .category-list-item:hover {
background: rgba(255, 255, 255, 0.05);
}
/* ======================== 一键安装区块 ======================== */
.install-badge {
display: inline-block;
background: #e74c3c;
color: #fff;
font-size: 0.7em;
padding: 1px 8px;
border-radius: 10px;
vertical-align: middle;
margin-left: 6px;
}
.install-block {
background: #000000;
border-radius: 12px;
padding: 24px 28px;
margin: 16px 0;
text-align: center;
}
.install-btn {
display: inline-block;
background: #fff;
color: #000000 !important;
font-weight: 700;
font-size: 1.1rem;
padding: 12px 36px;
border-radius: 8px;
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.install-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.install-btn:active {
transform: translateY(0);
}
.install-hint {
color: rgba(255,255,255,0.85);
font-size: 0.85rem;
margin: 10px 0 0;
}
/* ======================== 评论区 ======================== */
.post-comments {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid #e8e8e8;
}
.post-comments h2 {
font-size: var(--size-step-2);
margin-bottom: 16px;
}
[data-theme="dark"] .post-comments {
border-top-color: #333;
}
/* ======================== footer 改进 ======================== */
#footer-nav p {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
justify-content: center;
}
.footer-nav-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 0.35rem;
text-decoration: none;
color: inherit;
font-size: max(0.85em, 12px);
opacity: 0.6;
transition: opacity 0.2s;
}
.footer-nav-link:hover {
opacity: 1;
}
#footer-nav .footer-meta {
margin: 8px 0 0;
font-size: max(0.75em, 12px);
opacity: 0.55;
line-height: 1.5;
}
/* ======================== 设置页 ======================== */
.settings-desc {
color: #888;
font-size: var(--size-step-0);
margin-top: 0;
}
.setting-group {
margin-top: calc(var(--spacing) * 2);
}
.setting-group h2 {
font-size: var(--size-step-2);
margin: 0 0 12px 0;
}
.setting-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.setting-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.setting-option:hover {
border-color: var(--color-primary, #1a8fe3);
}
.setting-option input {
accent-color: var(--color-primary, #1a8fe3);
width: 18px;
height: 18px;
flex-shrink: 0;
cursor: pointer;
}
.setting-option:has(input:checked) {
border-color: var(--color-primary, #1a8fe3);
background: rgba(26, 143, 227, 0.08);
}
.setting-option-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.setting-option-title {
font-weight: 600;
font-size: var(--size-step-1);
}
.setting-option-desc {
font-size: var(--size-step-0);
opacity: 0.7;
}
.setting-option-desc.font-preview-wenkai {
font-family: 'LXGW WenKai', serif;
}
.setting-option-desc.font-preview-hywenhei {
font-family: 'HYWenHei 85W', sans-serif;
font-weight: 500;
}
.setting-group--disabled > h2,
.setting-group--disabled .setting-option-desc {
opacity: 0.55;
}
.setting-option--disabled {
opacity: 0.55;
pointer-events: none;
}
.setting-option--disabled:hover {
border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .setting-option--disabled:hover {
border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .setting-option {
border-color: #444;
}
[data-theme="dark"] .setting-option:hover {
border-color: var(--color-primary, #1a8fe3);
}
[data-theme="dark"] .setting-option:has(input:checked) {
border-color: var(--color-primary, #1a8fe3);
background: rgba(102, 184, 240, 0.12);
}
[data-theme="dark"] .settings-desc {
color: #aaa;
}
/* ======================== 归档页 ======================== */
.archive-total {
color: #888;
font-size: var(--size-step-0);
margin: 0 0 4px;
}
.archive-controls {
margin: 0 0 12px;
font-size: var(--size-step-0);
}
.archive-controls a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 0.25rem;
color: var(--color-primary, #1a8fe3);
cursor: pointer;
text-decoration: none;
}
.archive-controls a:hover {
text-decoration: underline;
}
.archive-year {
margin: 20px 0 8px;
font-size: var(--size-step-2);
}
.archive-month {
margin: 0 0 6px;
}
.archive-month summary {
cursor: pointer;
font-size: var(--size-step-1);
min-height: 44px;
display: flex;
align-items: center;
padding: 4px 0;
}
user-select: none;
}
.archive-month summary:hover {
color: var(--color-primary, #1a8fe3);
}
.archive-list {
list-style: none;
margin: 4px 0 8px 1.2em;
padding: 0;
}
.archive-item {
display: flex;
align-items: baseline;
gap: 0.8em;
padding: 2px 0;
}
.archive-date {
color: #999;
font-size: var(--size-step-0);
flex-shrink: 0;
}
.archive-title {
color: var(--color-dark);
text-decoration: none;
overflow-wrap: break-word;
word-break: normal;
}
.archive-title:hover {
color: var(--color-primary, #1a8fe3);
}
[data-theme="dark"] .archive-total,
[data-theme="dark"] .archive-date {
color: #999;
}
/* ======================== 文章导航（上一篇/下一篇） ======================== */
.post-prevnext {
display: flex;
gap: 12px;
margin: 1.5rem 0;
}
.post-prevnext-link {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 14px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 8px;
text-decoration: none;
color: var(--color-dark);
transition: border-color 0.2s ease;
min-width: 0;
}
.post-prevnext-link:hover {
border-color: var(--color-primary, #1a8fe3);
}
.post-prevnext-link.next {
text-align: right;
}
.post-prevnext-label {
font-size: var(--size-step-0);
color: #999;
}
.post-prevnext-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="dark"] .post-prevnext-link {
border-color: rgba(255, 255, 255, 0.15);
}
/* ======================== 文章头图横幅 ======================== */
.post-banner {
position: relative;
height: 30vh;
min-height: 180px;
overflow: hidden;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.post-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.post-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55));
}
.post-banner-title {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
margin: 0;
color: #fff;
font-size: var(--size-step-3);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* ======================== 文章版权声明 ======================== */
.post-license {
margin: 1.5rem 0 0;
padding-top: 0.8rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
font-size: var(--size-step-0);
color: #999;
}
.post-license a {
color: #999;
text-decoration: none;
}
.post-license a:hover {
color: var(--color-primary, #1a8fe3);
}
[data-theme="dark"] .post-license {
border-top-color: rgba(255, 255, 255, 0.15);
}
/* ======================== 首页公告条 ======================== */
.notice-bar {
background: rgba(26, 143, 227, 0.08);
border-left: 3px solid var(--color-primary, #1a8fe3);
border-radius: 4px;
padding: 10px 14px;
margin-bottom: 1.2rem;
font-size: var(--size-step-0);
color: var(--color-dark);
}
[data-theme="dark"] .notice-bar {
background: rgba(26, 143, 227, 0.15);
}
/* ======================== 首页分页链接 ======================== */
/* 原 button + 内联 onclick 被 CSP 拦截（script-src 无 unsafe-inline），
改为语义化 ，保留原按钮外观 */
.post-nav-btn {
display: inline-block;
margin-left: 10px;
border-radius: 10px;
color: #4d4d4d;
background: var(--color-light);
font-size: 18px;
padding: 10px 20px;
box-shadow: -5px -5px 15px #AAA, 5px 5px 15px #EEE;
text-decoration: none;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.post-nav-btn:hover {
background: linear-gradient(145deg, #ffffff, #e6e6e6);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px white;
color: #4d4d4d;
}
.post-nav-btn:active {
background: linear-gradient(145deg, #e6e6e6, #ffffff);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px white;
}
/* ======================== 友链页 ======================== */
.links-intro,
.link-group-desc {
color: #888;
font-size: var(--size-step-0);
}
.link-group-title {
margin: 20px 0 6px;
font-size: var(--size-step-2);
}
.link-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
/* 友链波浪网格（2026-08-18 移植自 SanYeCao-blog FriendlyLinkList）：
桌面 24 列 nth-child 列宽交错形成连续波浪（5.5:6.5 / 6:6 / 6.5:5.5 / 6:6），
移动端宽度交错（84/92/100%）。li 直接作为 grid item，无需改 EJS 结构。 */
@media (min-width: 721px) {
.link-list {
grid-template-columns: repeat(24, minmax(0, 1fr));
}
.link-item {
min-width: 0;
}
.link-item:nth-child(8n + 1),
.link-item:nth-child(8n + 6) {
grid-column: span 11;
}
.link-item:nth-child(8n + 3),
.link-item:nth-child(8n + 4),
.link-item:nth-child(8n + 7),
.link-item:nth-child(8n + 8) {
grid-column: span 12;
}
.link-item:nth-child(8n + 2),
.link-item:nth-child(8n + 5) {
grid-column: span 13;
}
}
@media (max-width: 720px) {
.link-list {
grid-template-columns: 1fr;
}
.link-item {
grid-column: auto;
justify-self: left;
width: 100%;
}
.link-item:nth-child(4n + 1) {
width: 84%;
}
.link-item:nth-child(4n + 2),
.link-item:nth-child(4n) {
width: 92%;
}
.link-item:nth-child(4n + 3) {
width: 100%;
}
}
.link-item a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 8px;
text-decoration: none;
color: var(--color-dark);
transition: border-color 0.2s ease;
}
.link-item a:hover {
border-color: var(--color-primary, #1a8fe3);
}
.link-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.link-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
background: rgba(128, 128, 128, 0.25);
color: var(--color-dark);
}
.link-name {
font-weight: 600;
}
.link-desc {
display: block;
font-size: var(--size-step-0);
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="dark"] .link-item a {
border-color: rgba(255, 255, 255, 0.15);
}
/* 代码高亮（highlight.js 配色，深浅反色适配） */
/* 浅色页面代码块为深底（--code-background-color 反色），用 github-dark 配色 */
/*!
Theme: GitHub Dark
Description: Dark theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-dark
Current colors taken from GitHub's CSS
*/
.hljs {
color: #c9d1d9;
background: #0d1117
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #ff7b72
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #d2a8ff
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #79c0ff
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #a5d6ff
}
.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #ffa657
}
.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #8b949e
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #7ee787
}
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #c9d1d9
}
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #1f6feb;
font-weight: bold
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #f2cc60
}
.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #c9d1d9;
font-style: italic
}
.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #c9d1d9;
font-weight: bold
}
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #aff5b4;
background-color: #033a16
}
.hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #ffdcd7;
background-color: #67060c
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}
/* 深色页面代码块为浅底，用 github 浅色配色（ink.js 深色时始终设置 html[data-theme=dark]） */
[data-theme="dark"] /*!
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/
.hljs{
color: #24292e;
background: #ffffff
}[data-theme="dark"] .hljs-doctag, [data-theme="dark"] .hljs-keyword, [data-theme="dark"] .hljs-meta .hljs-keyword, [data-theme="dark"] .hljs-template-tag, [data-theme="dark"] .hljs-template-variable, [data-theme="dark"] .hljs-type, [data-theme="dark"] .hljs-variable.language_{
/* prettylights-syntax-keyword */
color: #d73a49
}[data-theme="dark"] .hljs-title, [data-theme="dark"] .hljs-title.class_, [data-theme="dark"] .hljs-title.class_.inherited__, [data-theme="dark"] .hljs-title.function_{
/* prettylights-syntax-entity */
color: #6f42c1
}[data-theme="dark"] .hljs-attr, [data-theme="dark"] .hljs-attribute, [data-theme="dark"] .hljs-literal, [data-theme="dark"] .hljs-meta, [data-theme="dark"] .hljs-number, [data-theme="dark"] .hljs-operator, [data-theme="dark"] .hljs-variable, [data-theme="dark"] .hljs-selector-attr, [data-theme="dark"] .hljs-selector-class, [data-theme="dark"] .hljs-selector-id{
/* prettylights-syntax-constant */
color: #005cc5
}[data-theme="dark"] .hljs-regexp, [data-theme="dark"] .hljs-string, [data-theme="dark"] .hljs-meta .hljs-string{
/* prettylights-syntax-string */
color: #032f62
}[data-theme="dark"] .hljs-built_in, [data-theme="dark"] .hljs-symbol{
/* prettylights-syntax-variable */
color: #e36209
}[data-theme="dark"] .hljs-comment, [data-theme="dark"] .hljs-code, [data-theme="dark"] .hljs-formula{
/* prettylights-syntax-comment */
color: #6a737d
}[data-theme="dark"] .hljs-name, [data-theme="dark"] .hljs-quote, [data-theme="dark"] .hljs-selector-tag, [data-theme="dark"] .hljs-selector-pseudo{
/* prettylights-syntax-entity-tag */
color: #22863a
}[data-theme="dark"] .hljs-subst{
/* prettylights-syntax-storage-modifier-import */
color: #24292e
}[data-theme="dark"] .hljs-section{
/* prettylights-syntax-markup-heading */
color: #005cc5;
font-weight: bold
}[data-theme="dark"] .hljs-bullet{
/* prettylights-syntax-markup-list */
color: #735c0f
}[data-theme="dark"] .hljs-emphasis{
/* prettylights-syntax-markup-italic */
color: #24292e;
font-style: italic
}[data-theme="dark"] .hljs-strong{
/* prettylights-syntax-markup-bold */
color: #24292e;
font-weight: bold
}[data-theme="dark"] .hljs-addition{
/* prettylights-syntax-markup-inserted */
color: #22863a;
background-color: #f0fff4
}[data-theme="dark"] .hljs-deletion{
/* prettylights-syntax-markup-deleted */
color: #b31d28;
background-color: #ffeef0
}[data-theme="dark"] .hljs-char.escape_, [data-theme="dark"] .hljs-link, [data-theme="dark"] .hljs-params, [data-theme="dark"] .hljs-property, [data-theme="dark"] .hljs-punctuation, [data-theme="dark"] .hljs-tag{
/* purposely ignored */
}
.hljs { background: transparent; }
[data-theme="dark"] .hljs { background: transparent; }
/* hljs 代码必须块级：inline 会导致代码行不撑满宽度（官方主题自带，
此前去 padding 时误删整条规则，此处只补 display/overflow 不补 padding） */
pre code.hljs {
display: block;
overflow-x: auto;
}
/* 代码块：行号与代码统一字号
Hexo 输出的 带 .code 类，落入 0.9em 字号链
（td 0.9em -> pre 0.8em -> code 0.9em），代码文字约 10.5px，
而 gutter 行号无 .code 类，约 13px；行多时 gutter 内容高于 code 内容，
表格行高被 gutter 撑开，td 默认 vertical-align:middle 把 code 整体下推半个行差
（1663 行下推 3.2k px，代码块前约 150 行只剩空背景）。
统一两格字号使行高一致，偏移归零。 */
figure.highlight td {
font-size: inherit;
}
figure.highlight td.code code {
font-size: inherit;
}
/* 代码不换行，超长行横向滚动：行号与代码行严格一一对应。
pre-wrap 下超长行（如长 URL/长 token）折行会产生额外行盒，
行号与代码行错位；折行与行号对齐原理上不可兼得，故代码区禁用折行。 */
figure.highlight table {
table-layout: fixed;
width: 100%;
}
figure.highlight td.gutter {
width: 43px;
}
figure.highlight td.code code {
white-space: pre;
}
/* Hexo 8 在 code 末尾输出双
，多出一个尾随空行盒，行号与代码整体错位半行 */
figure.highlight td.code code br:last-child {
display: none;
}
/* ======================== 二级菜单（header 导航） ======================== */
/* _config.yml menu 值可为对象 { url, children }，header.ejs 渲染为 .has-sub。
桌面 hover 展开；触摸设备（hover: none）由 ink.js 点击切换 .open。 */
.main-nav .has-sub {
position: relative;
display: inline-flex;
}
.main-nav .sub-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
/* 展开指示箭头：CSS 边框三角，不依赖字体图标 */
.main-nav .sub-trigger::after {
content: '';
display: inline-block;
margin-left: 2px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
vertical-align: middle;
}
.main-nav .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 20;
min-width: 140px;
padding: 4px 0;
margin: 0;
list-style: none;
background: var(--color-light);
border: 1px solid color-mix(in srgb, var(--color-dark) 20%, transparent);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.main-nav .has-sub:hover .sub-menu,
.main-nav .has-sub.open .sub-menu {
display: block;
}
.main-nav .sub-menu a {
display: block;
padding: 6px 14px;
border-bottom: none;
white-space: nowrap;
}
.main-nav .sub-menu a:hover {
border-bottom: none;
background: rgba(26, 143, 227, 0.08);
}
/* 动态分类子项（header.ejs categories: true）的文章数 */
.main-nav .sub-menu .sub-cat-count {
margin-left: 6px;
font-size: 0.85em;
color: #999;
}
[data-theme="dark"] .main-nav .sub-menu .sub-cat-count {
color: #888;
}
/* ======================== 移动端汉堡导航（TD-002） ======================== */
.header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.menu-btn {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
color: inherit;
border-radius: 8px;
}
.menu-btn:focus-visible {
outline: 2px solid var(--color-primary, #1a8fe3);
outline-offset: 2px;
}
.menu-btn__line {
display: block;
width: 1.5rem;
height: 2px;
margin: 3px 0;
background: currentColor;
border-radius: 1px;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.menu-btn.is-active .menu-btn__line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.menu-btn.is-active .menu-btn__line:nth-child(2) {
opacity: 0;
}
.menu-btn.is-active .menu-btn__line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
.menu-btn__line {
transition: none;
}
}
.mobile-drawer {
display: none;
}
.mobile-drawer.is-open {
display: block;
}
.mobile-drawer__backdrop {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(0, 0, 0, 0.45);
}
.mobile-drawer__panel {
position: fixed;
top: 0;
right: 0;
z-index: 100;
width: min(88vw, 320px);
height: 100%;
padding: 72px 16px 24px;
overflow-y: auto;
background: var(--color-light, #fff);
color: var(--color-dark, #222);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: transform 0.3s ease-out;
}
.mobile-drawer.is-open .mobile-drawer__panel {
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.mobile-drawer__panel {
transition: none;
}
}
[data-theme="dark"] .mobile-drawer__panel {
background: var(--color-light, #1a1a1a);
color: var(--color-dark, #f0f0f0);
}
@media (max-width: 767px) {
.menu-btn {
display: flex;
}
.main-nav--desktop {
display: none;
}
.mobile-drawer .main-nav {
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
margin: 0;
}
.mobile-drawer .main-nav > a,
.mobile-drawer .main-nav .has-sub {
width: 100%;
}
.mobile-drawer .main-nav a {
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 12px;
border-bottom: none;
border-radius: 8px;
}
.mobile-drawer .main-nav a:hover,
.mobile-drawer .main-nav a:focus-visible {
background: rgba(26, 143, 227, 0.08);
}
.mobile-drawer .main-nav .has-sub {
flex-direction: column;
align-items: stretch;
}
.mobile-drawer .main-nav .sub-menu {
position: static;
display: none;
min-width: 0;
margin: 0 0 4px 0;
padding: 0 0 0 8px;
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
}
/* 抽屉内仅 .open 控制展开；覆盖触摸设备 :hover 粘性态（否则收起后仍显示） */
.mobile-drawer .main-nav .has-sub:hover .sub-menu {
display: none;
}
.mobile-drawer .main-nav .has-sub.open .sub-menu {
display: block;
}
.mobile-drawer .main-nav .sub-menu a {
min-height: 44px;
white-space: normal;
}
}
/* ======================== 文章页头图 + TOC 双卡（banner→TOC 重构） ======================== */
/* post.ejs 输出 .post-toc-row（图卡 + 目录槽），ink.js 将生成的 TOC 移入槽内。
原 30vh banner 仅文章页移除；banner 样式/模板保留给普通页面（about/links 等）。 */
.post-toc-row {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
align-items: flex-start;
}
/* 目录卡占左 60%，高度由 ink.js 同步为图卡高度（max-height 内联），超出滚动 */
.post-toc {
flex: 1 1 60%;
margin-bottom: 0;
overflow-y: auto;
}
/* 图卡占右 40%，固定高裁切（cover），边框与 TOC 卡同款 */
.post-imgcard {
flex: 0 0 40%;
margin: 0;
border-radius: 8px;
border: 1px solid #e8e8e8;
overflow: hidden;
}
.post-imgcard img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
/* 无 TOC 的文章（无 h2/h3）：图卡独立全宽 */
.post-toc-row:not(:has(.post-toc)) .post-imgcard {
flex-basis: 100%;
}
/* 移动端：图卡全宽堆顶，目录卡在下 */
@media (max-width: 767px) {
.post-toc-row {
flex-direction: column;
}
.post-imgcard {
flex-basis: auto;
width: 100%;
}
}
@media (prefers-color-scheme: dark) {
.post-imgcard {
border-color: #333;
}
}
[data-theme="dark"] .post-imgcard {
border-color: #333;
}
/* ======================== 提示块（admonitions） ========================
:::note / :::tip / :::important / :::warning / :::caution（Twilight 迁移）
语法见 scripts/marked-admonitions.js；图标为 mask（颜色跟随 --bdm-accent）。 */
:root {
--admonitions-color-note: #1a8fe3;
--admonitions-color-tip: #2da44e;
--admonitions-color-important: #8250df;
--admonitions-color-warning: #bf8700;
--admonitions-color-caution: #cf222e;
--admonitions-bg: #eef2f6;
}
[data-theme="dark"] {
--admonitions-bg: #24292f;
}
blockquote.admonition {
background: var(--admonitions-bg);
border-inline-start: 0.3em solid var(--bdm-accent, var(--admonitions-color-note));
border-radius: 0.375rem;
padding: 0.75rem 1rem;
font-style: normal;
font-size: var(--size-step-0);
margin-block: var(--spacing);
}
[data-theme="dark"] blockquote.admonition {
background: var(--admonitions-bg);
}
blockquote.admonition .bdm-title {
display: flex;
align-items: center;
font-weight: bold;
margin-bottom: 0.4rem;
color: var(--bdm-accent, var(--admonitions-color-note));
}
blockquote.admonition .bdm-title::before {
content: '';
display: inline-block;
margin-right: 0.5rem;
height: 1em;
width: 1em;
flex-shrink: 0;
background: var(--bdm-accent, var(--admonitions-color-note));
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
blockquote.admonition p {
margin-block: 0.25rem;
}
blockquote.admonition.bdm-tip { --bdm-accent: var(--admonitions-color-tip); }
blockquote.admonition.bdm-important { --bdm-accent: var(--admonitions-color-important); }
blockquote.admonition.bdm-warning { --bdm-accent: var(--admonitions-color-warning); }
blockquote.admonition.bdm-caution { --bdm-accent: var(--admonitions-color-caution); }
blockquote.admonition.bdm-note .bdm-title::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
}
blockquote.admonition.bdm-tip .bdm-title::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'%3E%3C/path%3E%3C/svg%3E");
}
blockquote.admonition.bdm-important .bdm-title::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E");
}
blockquote.admonition.bdm-warning .bdm-title::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E");
}
blockquote.admonition.bdm-caution .bdm-title::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
}
/* ======================== Mermaid 图表 ========================
```mermaid 代码块（marked 扩展 → .mermaid 容器），ink.js 按需渲染：
渲染前显示源码（无 JS 时可见），渲染成功后替换为 SVG。 */
.mermaid {
margin-block: calc(var(--spacing) * 1.5);
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.mermaid > pre code {
display: block;
text-align: left;
}
/* 尺寸控制（2026-08-18 修复超宽缩放）：mermaid 输出的 svg 自带 width="100%"
+ 内联 style="max-width: Npx"（N = 图表自然宽），容器窄于 N 时整图等比缩小、
节点文字无法辨认。曾设 .mermaid svg { max-width: 100% } 覆盖不了内联样式
（内联优先，是死规则）；现由 ink.js fitMermaid 检测超宽后把 width 改为自然宽，
交给本容器 overflow-x: auto 横向滚动。窄图保持 mermaid 默认 min(容器, 自然宽)
行为不变。此处不设 max-width，避免与 fitMermaid 冲突。 */
.mermaid-error {
margin: 0;
padding: 0.5rem 0.75rem;
border: 1px dashed var(--admonitions-color-caution);
color: var(--admonitions-color-caution);
font-size: var(--size-step-0);
border-radius: 0.375rem;
}
/* ======================== 文章页阅读时间 ======================== */
.post-reading-meta {
font-size: var(--size-step-0);
color: #888;
text-align: right;
margin-block: 0 0.25rem;
}
[data-theme="dark"] .post-reading-meta {
color: #aaa;
}
/* ======================== GitHub 仓库卡片 ========================
::card{type="github" repo="owner/repo"}（scripts/marked-card.js），
静态卡片：不调 API，不展示动态数据；样式参考 Twilight a.card-github。 */
a.card-github {
display: block;
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0.5rem;
padding: 0.9rem 1.1rem;
margin-block: var(--spacing);
color: inherit;
text-decoration: none;
transition: border-color 0.2s ease;
}
a.card-github:hover {
border-color: var(--color-primary, #1a8fe3);
}
.gc-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.gc-titlebar-left {
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.gc-owner,
.gc-divider {
color: #999;
}
.gc-repo {
font-weight: 600;
color: var(--color-primary, #1a8fe3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.github-logo {
flex-shrink: 0;
color: #666;
display: inline-flex;
}
.gc-description {
margin-top: 0.4rem;
font-size: var(--size-step-0);
color: #888;
}
.card-error {
color: var(--admonitions-color-caution);
font-size: var(--size-step-0);
}
[data-theme="dark"] a.card-github {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .github-logo {
color: #bbb;
}
/* ======================== 友链卡片增强 ========================
纯边框卡片 → 浅背景 + hover 浮起（Twilight friends 卡片风格） */
.link-item a {
background: rgba(0, 0, 0, 0.03);
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.link-item a:hover {
background: rgba(0, 0, 0, 0.06);
border-color: var(--color-primary, #1a8fe3);
transform: translateY(-1px);
}
[data-theme="dark"] .link-item a {
background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .link-item a:hover {
background: rgba(255, 255, 255, 0.09);
}
/* GitHub 卡片动态数据行（ink.js 用 API 填充；无数据时整行隐藏） */
.gc-meta {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 0.4rem;
font-size: var(--size-step-0);
color: #888;
}
.gc-meta:empty {
display: none;
}
[data-theme="dark"] .gc-meta {
color: #aaa;
}
/* ======================== 通用链接卡片（2026-08-18，Reimu 批二迁移） ========================
::card{type="link" url="..."}（scripts/marked-card.js），
纯静态卡片：不调 API、无前端 JS、CSP 零新增；样式与 GitHub 卡片同款。 */
a.card-link {
display: block;
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0.5rem;
padding: 0.9rem 1.1rem;
margin-block: var(--spacing);
color: inherit;
text-decoration: none;
transition: border-color 0.2s ease;
}
a.card-link:hover {
border-color: var(--color-primary, #1a8fe3);
}
.lc-titlebar {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.link-logo {
flex-shrink: 0;
color: #666;
display: inline-flex;
}
.lc-title {
font-weight: 600;
color: var(--color-primary, #1a8fe3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lc-host {
flex-shrink: 0;
margin-left: auto;
color: #999;
font-size: 0.85em;
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lc-description {
margin-top: 0.4rem;
font-size: var(--size-step-0);
color: #888;
}
[data-theme="dark"] a.card-link {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .link-logo {
color: #bbb;
}
[data-theme="dark"] .lc-host {
color: #888;
}
/* ======================== 标签页 tabs（2026-08-18，Reimu 批二迁移） ========================
:::tabs + "--- 标题" 分隔（scripts/marked-tabs.js），ink.js 事件委托切换，
默认激活第一个；面板内容为完整 Markdown 二次解析结果。 */
.tabs {
margin-block: calc(var(--spacing) * 1.5);
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0.5rem;
overflow: hidden;
}
.tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
padding: 0.5rem 0.5rem 0;
background: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.tabs-tab {
padding: 0.35rem 0.9rem;
border: none;
background: transparent;
color: #666;
font-size: var(--size-step-0);
cursor: pointer;
border-radius: 0.375rem 0.375rem 0 0;
}
.tabs-tab:hover {
color: var(--color-primary, #1a8fe3);
}
.tabs-tab.is-active {
color: var(--color-primary, #1a8fe3);
background: #fff;
border-bottom: 2px solid var(--color-primary, #1a8fe3);
font-weight: 600;
}
.tabs-panel {
display: none;
padding: 0.9rem 1.1rem;
}
.tabs-panel.is-active {
display: block;
}
.tabs-error {
color: var(--admonitions-color-caution);
font-size: var(--size-step-0);
}
[data-theme="dark"] .tabs {
border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .tabs-nav {
background: rgba(255, 255, 255, 0.05);
border-bottom-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .tabs-tab {
color: #bbb;
}
[data-theme="dark"] .tabs-tab.is-active {
background: transparent;
color: var(--color-primary, #1a8fe3);
}
/* ======================== 图片网格 .md-grid ======================== */
.md-grid {
display: grid;
grid-template-columns: repeat(var(--md-grid-cols, 2), minmax(0, 1fr));
gap: 0.75rem;
margin-block: calc(var(--spacing) * 1.5);
}
.md-grid img {
width: 100%;
height: auto;
border-radius: 0.375rem;
cursor: zoom-in;
}
@media (max-width: 480px) {
.md-grid {
grid-template-columns: repeat(min(var(--md-grid-cols, 2), 2), minmax(0, 1fr));
}
}
/* fancybox 灯箱：左上角「查看原图」（ink.js 注入 .fancybox-ori-link） */
.fancybox-ori-link {
position: absolute;
top: 16px;
left: 16px;
z-index: 99999;
padding: 0.4rem 0.75rem;
border-radius: 4px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 0.875rem;
text-decoration: none;
line-height: 1.2;
}
.fancybox-ori-link:hover,
.fancybox-ori-link:focus {
background: rgba(0, 0, 0, 0.85);
color: #fff;
}
/* ======================== 文章分享（2026-08-18，Reimu 批三） ========================
post.ejs 版权声明下方输出纯链接分享（微博 / QQ / X），无第三方脚本
（CSP 零新增），rel noopener 外链纪律。微信省略：官方分享需二维码生成。 */
.post-share {
display: flex;
align-items: center;
gap: 0.6rem;
margin-block: 0.75rem 0;
font-size: 0.85em;
color: #999;
}
.post-share a {
color: #888;
text-decoration: none;
}
.post-share a:hover {
color: var(--color-primary, #1a8fe3);
}
[data-theme="dark"] .post-share {
color: #888;
}
[data-theme="dark"] .post-share a {
color: #aaa;
}
/* ======================== 面包屑（2026-08-21） ========================
首页 / 分类链 / 当前标题；分隔用 /，当前项不链接。 */
.breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.4rem;
margin-block: 0 0.75rem;
font-size: 0.85em;
color: #999;
line-height: 1.4;
}
.breadcrumbs a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #888;
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--color-primary, #1a8fe3);
}
.breadcrumbs-sep {
color: #ccc;
user-select: none;
}
.breadcrumbs-current {
color: #666;
}
[data-theme="dark"] .breadcrumbs {
color: #888;
}
[data-theme="dark"] .breadcrumbs a {
color: #aaa;
}
[data-theme="dark"] .breadcrumbs-sep {
color: #555;
}
[data-theme="dark"] .breadcrumbs-current {
color: #ccc;
}
/* ======================== 双链相关（2026-08-21） ========================
scripts/wikilinks.js：出站「链接到」+ 入站「反向链接」；无链接时不渲染。 */
.post-wikilinks {
margin-block: 1rem 0;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
display: grid;
gap: 0.75rem;
}
[data-theme="dark"] .post-wikilinks {
border-top-color: rgba(255, 255, 255, 0.12);
}
.post-wikilinks-title {
margin: 0 0 0.35rem;
font-size: 0.9em;
font-weight: 600;
color: #666;
}
[data-theme="dark"] .post-wikilinks-title {
color: #aaa;
}
.post-wikilinks-list {
margin: 0;
padding-left: 1.15rem;
font-size: 0.9em;
}
.post-wikilinks-list a {
color: var(--color-primary, #1a8fe3);
text-decoration: none;
}
.post-wikilinks-list a:hover {
text-decoration: underline;
}
/* ======================== 展柜页（项目 / 技能 / 时间线） ======================== */
.projects-grid,
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin-block: var(--spacing);
}
.project-card {
display: block;
padding: 14px 16px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 10px;
text-decoration: none;
color: inherit;
background: rgba(0, 0, 0, 0.03);
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.project-card:hover {
border-color: var(--color-primary, #1a8fe3);
background: rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
.project-card-head {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.35rem 0.5rem;
}
.project-pinned-tag {
font-size: 0.75rem;
line-height: 1.2;
padding: 0.1rem 0.45rem;
border-radius: 0.25rem;
background: rgba(26, 143, 227, 0.12);
color: var(--color-primary, #1a8fe3);
flex-shrink: 0;
}
.project-name {
font-weight: 600;
color: var(--color-primary, #1a8fe3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-lang,
.skill-name {
font-size: var(--size-step-0);
color: #999;
flex-shrink: 0;
}
.project-desc,
.skill-desc {
margin-block: 6px 0;
font-size: var(--size-step-0);
color: #888;
}
.skill-card {
padding: 14px 16px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 10px;
background: rgba(0, 0, 0, 0.03);
}
.skill-card .skill-name {
color: inherit;
font-weight: 600;
}
[data-theme="dark"] .project-card,
[data-theme="dark"] .skill-card {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .project-card:hover {
background: rgba(255, 255, 255, 0.09);
}
/* 时间线 */
.timeline-year {
margin: 24px 0 8px;
font-size: var(--size-step-2);
}
.timeline-item {
display: flex;
gap: 14px;
margin-block: 10px;
align-items: baseline;
}
.timeline-date {
flex-shrink: 0;
font-size: var(--size-step-0);
color: #999;
min-width: 3em;
}
.timeline-body {
min-width: 0;
}
.timeline-title {
font-weight: 600;
}
.timeline-desc {
margin-block: 4px 0;
font-size: var(--size-step-0);
color: #888;
}
/* ======================== 日/月主题切换按钮（header 右侧） ========================
2026-08-17 由外部组件适配：html.dark 选择器改为 [data-theme="dark"]，
尺寸基准 --base-scale 由 120px 降为 12px 以适配博客 header，
width/height 由无效的 calc(em * 1px) 修正为直接使用 em 变量。
JS 逻辑在 ink.js 偏好设置模块（与设置页 radio 同构，共享 theme-preference）。 */
.theme-toggle {
--transition-standard: 0.3s ease;
--base-scale: 12px;
--toggle-width: 5.625em;
--toggle-height: 2.5em;
--radius-pill: 100em;
--sun-diameter: 2.125em;
--sun-offset: calc((var(--toggle-height) - var(--sun-diameter)) / 2);
--bg-toggle-light: #3d7eae;
--bg-toggle-dark: #1d1f2c;
--color-sun: #ecca2f;
--color-moon: #c4c9d1;
--color-crater: #a0a5ad;
--color-star: #f5f5fa;
--color-cloud-front: #ffffffcc;
--color-cloud-back: #ffffff80;
--shadow-primary: rgba(0, 0, 0, 0.35);
--shadow-highlight: rgba(255, 255, 255, 0.6);
--halo-color: rgba(236, 202, 47, 0.25);
border: none;
background: transparent;
cursor: pointer;
font-size: var(--base-scale);
padding: 0;
width: var(--toggle-width);
height: var(--toggle-height);
flex-shrink: 0;
}
@media (max-width: 767px) {
.theme-toggle {
--base-scale: 9px;
}
}
/* ======================== Glass 玻璃光标（2026-08-18 加入） ========================
资源：themes/ink/source/img/cursors/（Windows Glass 光标集 .ani 帧提取，
64x64 半透明 PNG，text 为 32x64）。
实现说明：
- CSS cursor url() 不支持动画帧（Chrome/Edge/Safari 均取静态图），故从每套
动画中取最完整的一帧做静态光标，全浏览器生效。
- url 后的坐标是热点（光标功能点：箭头顶端、手型指尖、I-beam 中线、
resize 箭头中心），由帧像素分析确定。
- 光标全部集中在 :root 变量，替换光标集只需改 url 与热点坐标。
- giscus iframe 内评论区的光标不受本站 CSS 控制（iframe 独立文档）。 */
:root {
--cursor-default: url('/img/cursors/glass-arrow.png') 1 0, default;
--cursor-pointer: url('/img/cursors/glass-link.png') 6 1, pointer;
--cursor-text: url('/img/cursors/glass-text.png') 6 13, text;
--cursor-help: url('/img/cursors/glass-helps.png') 1 0, help;
--cursor-wait: url('/img/cursors/glass-busy.png') 9 10, wait;
--cursor-progress: url('/img/cursors/glass-working.png') 9 11, progress;
--cursor-move: url('/img/cursors/glass-move.png') 11 10, move;
--cursor-not-allowed: url('/img/cursors/glass-unavail.png') 9 8, not-allowed;
--cursor-crosshair: url('/img/cursors/glass-precision.png') 11 10, crosshair;
--cursor-n-resize: url('/img/cursors/glass-vertical.png') 10 11, n-resize;
--cursor-e-resize: url('/img/cursors/glass-horizontal.png') 10 11, e-resize;
--cursor-nw-resize: url('/img/cursors/glass-diagonal-1.png') 10 11, nw-resize;
--cursor-ne-resize: url('/img/cursors/glass-diagonal-2.png') 10 11, ne-resize;
}
/* 基础态：页面默认光标 */
html,
body {
cursor: var(--cursor-default);
}
/* 可点击元素：链接、按钮、可折叠摘要、role=button */
a,
button,
summary,
[role='button'] {
cursor: var(--cursor-pointer);
}
/* 文本输入元素（checkbox/radio/range/select 保持系统默认） */
input[type='text'],
input[type='search'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='password'],
textarea,
[contenteditable='true'] {
cursor: var(--cursor-text);
}
/* 带 tooltip 的元素：帮助光标（交互元素除外，交互元素优先显示自身光标） */
[title]:not(a):not(button):not(summary) {
cursor: var(--cursor-help);
}
/* 禁用控件 */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
cursor: var(--cursor-not-allowed);
}
/* 全局加载态（JS 给容器加 .is-loading 时生效） */
.is-loading,
.is-loading * {
cursor: var(--cursor-progress) !important;
}
/* ======================== SanYeCao 移植（2026-08-18） ========================
1. :::fold[details] 折叠块样式（来源：SanYeCao-blog src/styles/posts.css）
2. 块级公式过长时独立横向滚动（MathJax 3 CHTML 适配，来源同上）
选择器限定 article details.md-details，不美化手写原生 details，也不影响归档页。 */
/* 1. :::fold[details] 折叠块：顶部粗边框 + 圆角 + summary 箭头旋转 */
article details.md-details {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
margin: 1.5rem 0;
overflow: hidden;
border-top: 2px solid var(--color-primary);
border-radius: 0 0 0.5rem 0.5rem;
background: rgba(128, 128, 128, 0.14);
}
article details.md-details summary {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: 0.8rem 0.9rem;
cursor: pointer;
font-weight: 600;
user-select: none;
list-style: none;
}
article details.md-details summary::-webkit-details-marker {
display: none;
}
article details.md-details summary::before {
content: '>';
display: inline-block;
flex: 0 0 auto;
font-size: 1.25rem;
line-height: 1;
transition: transform 0.2s ease;
}
article details.md-details[open] summary::before {
transform: rotate(90deg);
}
article details.md-details > :not(summary) {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
margin-top: 0;
margin-bottom: 0;
padding-right: 1rem;
}
article details.md-details > .md-details-body {
padding-top: 0.5rem;
}
article details.md-details > ol,
article details.md-details > ul {
padding: 0.6rem 1rem 1rem 3rem;
}
article details.md-details li {
margin: 0.8rem 0;
}
[data-theme="dark"] article details.md-details {
border-top-color: #6ab0f3;
background: rgba(160, 160, 160, 0.16);
}
/* 2. 块级公式过长时独立横向滚动（MathJax 3 的 display 公式输出） */
article mjx-container[display="true"] {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
padding: 0.25rem 0;
-webkit-overflow-scrolling: touch;
}
article mjx-container[display="true"] > mjx-math {
display: inline-block;
min-width: max-content;
white-space: nowrap;
}
/* 3. 移动端胶囊 TOC（来源：SanYeCao-blog PostMenu.astro）
<768px 时 .post-toc-slot 隐藏，ink.js 将 toc 移入 .post-toc-mobile-panel；
按钮滚动 80px 后出现（.is-visible），点击展开面板。桌面双卡不受影响。 */
@media (max-width: 767px) {
.post-toc-slot {
display: none;
}
}
.post-toc-mobile-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
position: fixed;
top: calc(env(safe-area-inset-top) + 0.75rem);
right: 0.8rem;
z-index: 40;
max-width: min(78vw, 22rem);
min-height: 44px;
padding: 0.5rem 0.75rem;
border: 1.5px solid var(--color-primary);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
color: inherit;
font-size: 0.85rem;
cursor: pointer;
opacity: 0;
transform: translateY(calc(-100% - 0.6rem));
pointer-events: none;
transition: transform 0.28s ease, opacity 0.22s ease;
}
.post-toc-mobile-toggle[hidden] {
display: none;
}
.post-toc-mobile-toggle.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.post-toc-mobile-toggle.is-scrolling {
opacity: 0;
pointer-events: none;
transform: translateY(calc(-100% - 0.6rem));
}
.post-toc-mobile-preview {
display: inline-block;
max-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.post-toc-mobile-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
opacity: 0.78;
}
.post-toc-mobile-panel {
position: fixed;
top: calc(env(safe-area-inset-top) + 3.5rem);
right: 0.8rem;
z-index: 39;
display: none;
width: min(88vw, 24rem);
max-height: min(65vh, 32rem);
overflow: auto;
padding: 0.9rem 1rem;
border: 1.5px solid var(--color-primary);
border-radius: 8px;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.post-toc-mobile-panel[hidden] {
display: none;
}
.post-toc-mobile-panel.is-open {
display: block;
}
.post-toc-mobile-panel .post-toc {
margin-bottom: 0;
overflow-y: visible;
height: auto !important;
}
[data-theme="dark"] .post-toc-mobile-toggle,
[data-theme="dark"] .post-toc-mobile-panel {
background: rgba(26, 26, 26, 0.96);
color: #e6e6e6;
}
/* 4. 构建版本色块（来源：SanYeCao-blog BuildHashBlocks.astro）
footer.ejs 读 site.data.commit（scripts/commit-data.js 构建期注入），
commit sha 前 36 位 hex 切成 6 块色块，hover 显示完整 hash。 */
.build-hash {
display: inline-flex;
align-items: center;
gap: 0.15rem;
vertical-align: middle;
cursor: default;
}
.build-block {
width: 0.75rem;
height: 0.75rem;
display: inline-block;
border-radius: 2px;
}
.theme-toggle__container {
position: relative;
width: 100%;
height: 100%;
background-color: var(--bg-toggle-light);
border-radius: var(--radius-pill);
transition: background-color var(--transition-standard);
overflow: hidden;
box-shadow: 0.06em 0.06em 0.125em var(--shadow-highlight);
}
[data-theme="dark"] .theme-toggle__container {
background-color: var(--bg-toggle-dark);
}
.theme-toggle__container::after {
content: "";
position: absolute;
inset: 0;
box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.5) inset;
border-radius: var(--radius-pill);
pointer-events: none;
}
.theme-toggle__sun {
width: var(--sun-diameter);
height: var(--sun-diameter);
background-color: var(--color-sun);
border-radius: 50%;
position: absolute;
top: var(--sun-offset);
transform: translateX(var(--sun-offset));
box-shadow: 0.05em 0.125em 0.125em var(--shadow-primary),
0em 0.05em 0.125em var(--shadow-primary),
0.05em 0.05em 0.05em 0em rgba(254, 255, 239, 0.61) inset,
0em -0.05em 0.05em 0em #a1872a inset,
0 0 0 0.625em var(--halo-color),
0 0 0 1.25em var(--halo-color),
0 0 0 1.875em var(--halo-color);
transition: transform var(--transition-standard);
overflow: hidden;
}
[data-theme="dark"] .theme-toggle__container .theme-toggle__sun {
transform: translateX(
calc(var(--toggle-width) - var(--sun-diameter) - var(--sun-offset))
);
}
.theme-toggle__moon-mask {
position: relative;
width: 100%;
height: 100%;
background-color: var(--color-moon);
border-radius: inherit;
transform: translateX(100%);
transition: transform var(--transition-standard);
box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
0em -0.062em 0.062em 0em #969696 inset;
}
[data-theme="dark"] .theme-toggle__container .theme-toggle__moon-mask {
transform: translateX(0);
}
.theme-toggle__crater {
position: absolute;
background-color: var(--color-crater);
border-radius: 50%;
box-shadow: 0em 0.03em 0.06em var(--shadow-primary) inset;
}
.theme-toggle__crater:nth-of-type(1) {
top: 0.75em;
left: 0.375em;
width: 0.75em;
height: 0.75em;
}
.theme-toggle__crater:nth-of-type(2) {
top: 0.9em;
left: 1.375em;
width: 0.375em;
height: 0.375em;
}
.theme-toggle__crater:nth-of-type(3) {
top: 0.3em;
left: 0.8em;
width: 0.25em;
height: 0.25em;
}
.theme-toggle__stars {
position: absolute;
left: 0.3em;
transform: translateY(-2em);
transition: transform var(--transition-standard);
width: 2.75em;
color: var(--color-star);
}
[data-theme="dark"] .theme-toggle__container .theme-toggle__stars {
transform: translateY(0.5em);
}
.theme-toggle__clouds {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5em;
transform: translateY(0);
width: 1.25em;
height: 1.25em;
background-color: var(--color-cloud-front);
border-radius: 50%;
box-shadow: 0.937em 0.312em var(--color-cloud-front),
1.437em 0.375em var(--color-cloud-front),
2.187em 0 var(--color-cloud-front),
2.937em 0.312em var(--color-cloud-front),
3.625em -0.062em var(--color-cloud-front),
4.5em -0.312em var(--color-cloud-front),
4.625em -1.75em 0 0.437em var(--color-cloud-front),
-0.312em -0.312em var(--color-cloud-back),
0.5em -0.125em var(--color-cloud-back),
1.25em -0.062em var(--color-cloud-back),
2em -0.312em var(--color-cloud-back),
2.625em 0em var(--color-cloud-back),
3.375em -0.437em var(--color-cloud-back),
4em -0.625em var(--color-cloud-back),
4.125em -2.125em 0 0.437em var(--color-cloud-back);
transition: transform var(--transition-standard);
}
[data-theme="dark"] .theme-toggle__container .theme-toggle__clouds {
transform: translateY(3em);
}
.theme-toggle__container:hover .theme-toggle__sun {
transform: translateX(calc(var(--sun-offset) + 0.187em));
}
[data-theme="dark"] .theme-toggle__container:hover .theme-toggle__sun {
transform: translateX(
calc(
var(--toggle-width) - var(--sun-diameter) - var(--sun-offset) - 0.187em
)
);
}
/* ======================== 段落锚点（2026-08-18，Reimu 批一迁移） ========================
scripts/heading-anchor.js 构建期给 h2/h3 注入 id + 锚点链接（# 号），
标题悬停/键盘聚焦时显示，点击直达本段落；深链 #hash 加载时目标标题高亮闪烁。 */
.heading-anchor {
opacity: 0;
margin-left: 0.35em;
font-size: 0.85em;
color: inherit;
text-decoration: none;
transition: opacity 0.15s;
}
h2:hover .heading-anchor, h3:hover .heading-anchor,
.heading-anchor:focus-visible {
opacity: 0.6;
}
.heading-anchor:hover {
opacity: 1;
}
h2, h3 {
scroll-margin-top: 1rem; /* 深链/TOC 跳转时标题不被顶部元素遮挡 */
}
@keyframes target-flash {
from { background: rgba(26, 143, 227, 0.18); }
to { background: transparent; }
}
h2:target, h3:target {
animation: target-flash 1.2s ease-out;
}
/* ======================== 代码块超长折叠（2026-08-18，Reimu 批一；2026-08-23 布局修复） ========================
ink.js 用 .code-fold-viewport 裁切整表（行号+代码同高），按钮与渐变在预览区底。 */
figure.highlight {
position: relative;
}
.code-fold-viewport {
position: relative;
}
.code-collapsed .code-fold-viewport {
max-height: 420px;
overflow: hidden;
}
.code-collapsed .code-fold-viewport::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 56px;
background: linear-gradient(to bottom, transparent, var(--code-background-color));
pointer-events: none;
}
.code-fold-btn {
display: block;
position: relative;
z-index: 1;
margin: 0.5rem auto 0.25rem;
padding: 3px 16px;
border: 1px solid var(--color-primary, #1a8fe3);
border-radius: 0.375rem;
background: transparent;
color: var(--color-primary, #1a8fe3);
font-size: 0.85em;
line-height: 1.6;
cursor: pointer;
}
.code-fold-btn:hover {
background: var(--color-primary, #1a8fe3);
color: #fff;
}
/* ======================== 文章时效（2026-08-18，Reimu 批一迁移） ========================
post.ejs 按 post-staleness.js 注入的标记输出：过期提示条（warning 配色，
与提示块 admonition 同色系）+ 显式手写 updated 的更新时间（弱化小字）。 */
.post-stale {
margin-block: 0 0.5rem;
padding: 0.5rem 0.75rem;
border: 1px dashed var(--admonitions-color-warning);
color: var(--admonitions-color-warning);
font-size: var(--size-step-0);
border-radius: 0.375rem;
}
.post-updated {
margin: 0 0 0.5rem;
font-size: var(--size-step-0);
color: #888;
}
[data-theme="dark"] .post-updated {
color: #aaa;
}
/* ======================== Butterfly 批一（2026-08-21） ========================
文内 timeline / btn / label；类名与站点 /timeline/ 展柜隔离。 */
/* :::text 剧透揭示（拍板 M2） */
.md-text {
margin-block: calc(var(--spacing) * 1.25);
cursor: pointer;
border-radius: 0.375rem;
outline: none;
}
.md-text-hint {
display: inline-block;
margin-bottom: 0.35rem;
font-size: 0.85em;
color: #888;
}
.md-text-body {
filter: blur(6px);
user-select: none;
transition: filter 0.2s ease;
background: rgba(128, 128, 128, 0.12);
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
}
.md-text:hover .md-text-body,
.md-text:focus .md-text-body,
.md-text.is-revealed .md-text-body {
filter: none;
user-select: text;
}
[data-theme="dark"] .md-text-body {
background: rgba(255, 255, 255, 0.08);
}
/* B 站懒嵌入 */
.bili-embed {
margin-block: calc(var(--spacing) * 1.25);
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0.5rem;
overflow: hidden;
background: rgba(0, 0, 0, 0.03);
}
.bili-embed-trigger {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
min-height: 180px;
padding: 1.25rem;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
}
.bili-embed-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--color-primary, #1a8fe3);
color: #fff;
font-size: 1.1rem;
}
.bili-embed-label {
font-weight: 600;
}
.bili-embed-hint {
font-size: 0.85em;
color: #666;
}
.bili-embed-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.bili-embed-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
[data-theme="dark"] .bili-embed {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .bili-embed-hint {
color: #aaa;
}
.md-bili-error {
color: var(--admonitions-color-caution);
}
/* ======================== 系列文目录（2026-08-23，Butterfly 批三） ======================== */
.post-series {
margin-block: calc(var(--spacing) * 1.25);
padding: 0.85rem 1rem;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0.5rem;
background: rgba(26, 143, 227, 0.06);
}
.post-series-label {
margin: 0 0 0.5rem;
font-weight: 600;
font-size: 0.92em;
}
.post-series-list {
margin: 0;
padding-left: 1.25rem;
font-size: 0.92em;
}
.post-series-item {
margin: 0.25rem 0;
}
.post-series-item.is-current span {
font-weight: 600;
color: var(--color-primary, #1a8fe3);
}
.post-series-item a {
color: inherit;
text-decoration: none;
}
.post-series-item a:hover {
color: var(--color-primary, #1a8fe3);
text-decoration: underline;
}
.post-series-error {
color: var(--admonitions-color-caution);
font-size: var(--size-step-0);
}
[data-theme="dark"] .post-series {
background: rgba(26, 143, 227, 0.12);
border-color: rgba(255, 255, 255, 0.12);
}
.post-timeline {
margin-block: calc(var(--spacing) * 1.5);
padding-left: 1.25rem;
border-left: 2px solid rgba(0, 0, 0, 0.15);
}
.post-timeline-headline {
font-weight: 600;
margin: 0 0 0.75rem -1.25rem;
padding-left: 1.25rem;
}
.post-timeline-item {
position: relative;
margin-bottom: 1.25rem;
}
.post-timeline-item::before {
content: '';
position: absolute;
left: -1.45rem;
top: 0.4em;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: var(--color-primary, #1a8fe3);
}
.post-timeline-title {
font-weight: 600;
margin-bottom: 0.35rem;
}
.post-timeline-body > :first-child {
margin-top: 0;
}
.post-timeline-error {
color: var(--admonitions-color-caution);
}
[data-theme="dark"] .post-timeline {
border-left-color: rgba(255, 255, 255, 0.2);
}
|