//… 等块级子元素，
所以把这些内容元素都列进来，而不只是 p。 */
#detailPanel p,
#detailPanel div,
#detailPanel li,
#detailPanel td, #detailPanel th,
#detailPanel h1, #detailPanel h2, #detailPanel h3,
#detailPanel h4, #detailPanel h5, #detailPanel h6,
#detailPanel blockquote {
white-space: pre-wrap;
}
/* pre/code 本来就是保留空白，维持其等宽源码块的展示 */
#detailPanel pre,
#detailPanel pre * {
white-space: pre;
}
.detail-content h1 {
font-size: 1.3rem;
color: var(--text-primary);
margin: 24px 0 12px;
}
.detail-content h2 {
font-size: 1.2rem;
color: var(--text-primary);
margin: 20px 0 10px;
}
.detail-content h3, .detail-content h4 {
font-size: 1.15rem;
color: var(--text-primary);
margin: 18px 0 8px;
}
/* 正文第一个元素不要上外边距，避免标题紧贴 meta 下方却多出 24px */
.detail-content > :first-child {
margin-top: 0;
}
.detail-content ul,
.detail-content ol {
margin-left: 20px;
margin-bottom: 16px;
}
.detail-content li {
margin-bottom: 6px;
}
.detail-content blockquote {
border-left: 4px solid var(--accent-green);
padding-left: 16px;
margin: 16px 0;
color: var(--text-muted);
font-style: italic;
background: rgba(255, 255, 255, 0.3);
}
.detail-content img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 10px 0;
}
/* 正文末尾的标签栏。
★ 注意：这段在 #detailPanel 内部、位于正文之后。
文章没有标签时 .detail-tags 是个空容器，但它照样会吃掉
margin-top + padding-top 共 40px，还会画出一条突兀的分隔线，
在正文下方凭空多出一大块空白。
解决：加 :empty 规则，空的时候完全不占空间（也去掉那条线）；
同时把有标签时的间距从 24/16 收到 16/10，更紧凑。 */
.detail-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
padding-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.detail-tags:empty {
display: none;
margin: 0;
padding: 0;
border: none;
}
/* 页脚：固定两行 —— 第 1 行标语（居中），第 2 行署名（左）+ 备案号（右下角）。
高度按"正好两行"算：行高 1.5 + 上下内边距各 10px，不再留 20px 大内边距
和原来 3 行之间 4px / 8px 的额外段间距（那套加起来有 107px 高）。 */
.mc-footer {
/* margin-top:auto：内容不满一屏时把页脚推到视口底部。
之前是靠给 .mc-main 写死 min-height:calc(100vh - 顶栏 - 80px) 估出来的，
手机端顶栏换行后高度变了，估算失效，才会"能把页面划到页脚下面"。 */
margin-top: auto;
padding: 10px 16px;
/* 底部安全区：iPhone 的小白条不压页脚文字（需要 viewport-fit=cover） */
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(5px);
border-top: 1px solid rgba(255, 255, 255, 0.5);
font-size: 0.65rem;
line-height: 1.5;
color: var(--text-muted);
letter-spacing: 0.5px;
position: relative;
z-index: 1;
}
/* 两行都要贴紧，所以清掉全局 p 的下边距 */
.mc-footer p { margin: 0; }
/* 第 1 行标语与第 2 行的「Made by …」左对齐到同一条竖线上，两行都从最左侧开始 */
.mc-footer .footer-line1 { text-align: left; }
/* 第 2 行：左右两端对齐 → 备案号自然落在右下角 */
.mc-footer .footer-line2 {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.mc-footer .footer-icp {
color: var(--text-muted);
white-space: nowrap; /* 备案号绝不折行，否则页脚会变第 3 行 */
}
.mc-footer a {
color: var(--accent-green);
text-decoration: none;
}
.mc-footer a:hover {
text-decoration: underline;
}
.tools-top-bar {
margin-bottom: 24px;
}
/* 内容区域动画 */
#homeContent {
animation: mcFadeIn 0.3s ease;
}
.category-page {
animation: mcFadeIn 0.3s ease;
}
.detail-main-content {
animation: mcFadeIn 0.3s ease;
}
#page-about .detail-panel {
animation: mcFadeIn 0.3s ease;
}
/* ==================== 音效按钮 ==================== */
.sound-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.sound-btn {
background: transparent;
border: none;
padding: 0;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.sound-btn:hover { transform: translateY(-4px); }
.sound-btn:active { transform: translateY(0); }
.sound-btn img {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
/* 音效预览面板 */
.sound-preview {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 180px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--panel-border);
border-radius: 4px;
padding: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
z-index: 1000;
}
.sound-wrapper:hover .sound-preview {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sound-preview-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.7rem;
color: var(--text-primary);
transition: background 0.2s;
}
.sound-preview-item:hover {
background: rgba(0, 0, 0, 0.06);
}
.sound-preview-item.active {
background: rgba(46, 125, 50, 0.15);
color: var(--accent-green);
font-weight: bold;
}
.sound-icon {
font-size: 1rem;
min-width: 20px;
text-align: center;
}
/* 音效名称文字（与 .sound-icon 同属一个条目的两段） */
.sound-name {
font-size: 0.7rem;
color: var(--text-primary);
}
.sound-preview-item.active .sound-name {
color: var(--accent-green);
font-weight: bold;
}
/* ==================== 分页 ==================== */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 30px 0 20px;
flex-wrap: wrap;
}
.pagination button,
.pagination .page-info {
background: var(--panel-bg);
border: 1px solid var(--panel-border);
border-radius: 4px;
padding: 6px 12px;
font-family: inherit;
font-size: 0.75rem;
color: var(--text-primary);
cursor: pointer;
transition: background 0.2s;
}
.pagination button:hover:not(:disabled) {
background: var(--panel-bg-hover);
}
.pagination button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination button.active {
background: #a7aba894;
color: #fff;
border-color: #a7aba894;
}
.pagination .page-info {
cursor: default;
background: transparent;
border: none;
}
/* ==================== 长条文章卡片 ==================== */
.category-items-panel,
.search-results-panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.article-card {
display: flex;
position: relative; /* 卡片徽章浮层的定位基准 */
background: var(--panel-bg);
backdrop-filter: blur(4px);
border: 1px solid var(--panel-border);
border-radius: var(--card-border-radius);
overflow: hidden;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
height: 140px; /* 高度不变 */
max-width: 100%; /* ★ 宽度缩小 1/3 */
width: 100%;
padding: 4px; /* ★ 内边距，让图片和内容不贴边 */
gap: 8px; /* ★ 图片与文字之间的间距 */
box-sizing: border-box; /* 保证 padding 不增加总宽高 */
}
.article-card:hover {
background: var(--panel-bg-hover);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.article-card:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* 置顶的文章在列表里给一圈金色描边，让"为什么它在最前面"一眼可见 */
.article-card.is-pinned {
border-color: #B8860B;
box-shadow: 0 2px 10px rgba(184, 134, 11, 0.35);
}
/* 封面区域：固定宽度，高度撑满卡片内部 */
.article-card-cover {
flex: 0 0 180px; /* 封面宽度 */
align-self: stretch; /* 高度撑满父容器 */
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px; /* ★ 图片圆角，视觉更柔和 */
display: flex;
align-items: center;
justify-content: center;
}
.article-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 右侧文字区：占满剩余宽度，纵向排列标题/摘要/作者日期。
min-width:0 是必需的 —— 否则长标题会把 flex 子项撑破，省略号失效。 */
.article-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: 8px 10px 8px 4px;
}
.article-card-title {
font-size: 0.9rem;
color: var(--text-primary);
line-height: 1.4;
margin: 0 0 6px 0;
/* 标题最多两行，超出省略，避免长短不一把卡片撑变形 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card-excerpt {
font-size: 0.65rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
/* 摘要最多三行 */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 作者与日期：推到卡片底部，中间用细线分隔 */
.article-card-meta {
margin-top: auto;
padding-top: 6px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 0.6rem;
color: var(--text-muted);
}
.article-card-author {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article-card-date {
flex-shrink: 0;
white-space: nowrap;
}
/* 空状态提示（分类无文章、搜索无结果等） */
.empty-state {
padding: 40px 20px;
text-align: center;
font-size: 0.75rem;
color: var(--text-muted);
}
/* ============================================================
响应式：手机端（<= 768px）
------------------------------------------------------------
设计原则：
· 首页（分类列表）＝ 桌面版的等比例缩小，DOM 结构完全不动，
只收字号/内边距，保持"缩小版电脑端"的观感；
· 顶栏改成两行（第 1 行品牌+图标按钮，第 2 行四个文字按钮），
彻底解决窄屏下导航被 overflow-x:hidden 裁掉的问题；
· 分类页/搜索/详情/工具箱/服务器等内页按窄屏单列重新排布。
============================================================ */
@media (max-width: 768px) {
:root {
--header-height: 56px;
--sidebar-width: 180px;
--sidebar-left: 10px;
--sidebar-gap: 10px;
--category-gap: 10px;
}
/* ---------- 顶栏：高度自适应 + 允许换行 ----------
375px 实测：品牌(≈160px) + 图标组(≈120px) + 4 个文字按钮(≈240px)
一行绝对放不下，而 body 又是 overflow-x:hidden，多余部分直接被裁掉。 */
.mc-header {
height: auto;
min-height: 52px;
flex-wrap: wrap;
align-content: center;
/* 行间距/左右内边距各压一档，给第 1 行再挤出约 10px。
实测 375px：不压的话"左组 160 + 间距 8 + 右组 192 + 内边距 20 = 380 > 375"，
右组被挤到第 2 行，加上第 2 行的文字导航 → 整条顶栏变成 3 行（112px 高）。 */
gap: 6px;
padding: 6px 8px;
}
/* flex:0 1 auto + min-width:0 允许左组被压缩；但决定"换不换行"的是
每个 flex 项的首选宽度（hypothetical main size），所以标题还得靠 max-width 收窄 */
.mc-header-left { gap: 6px; flex: 0 1 auto; min-width: 0; }
.mc-logo-img { width: 28px; height: 28px; }
.mc-header-title {
font-size: 0.68rem;
letter-spacing: 0;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 8em; /* 站名过长时省略号截断，保证第 1 行放得下 */
}
.mc-header-right {
gap: 5px;
flex-wrap: wrap;
justify-content: flex-end;
position: static; /* 让三个下拉面板改为相对 .mc-header 定位 */
}
/* 第二行：四个文字按钮整行居中 */
.mc-header-textnav {
flex: 1 0 100%;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.mc-nav-btn {
padding: 7px 9px;
font-size: 0.52rem;
letter-spacing: 0;
}
.sound-btn, .toolbox-btn, .server-btn, .search-btn { width: 28px; height: 28px; }
.guest-badge { padding: 4px 6px; font-size: 0.5rem; letter-spacing: 0; }
.guest-badge .badge-full { display: none; } /* 长文案换短文案，给图标腾地方 */
.guest-badge .badge-short { display: inline; }
/* ---------- 三个下拉面板改成"贴在顶栏下方的整宽面板" ----------
原来 left:0 + min-width:280px，在 375px 屏上必然向右溢出屏幕。 */
.sound-wrapper, .toolbox-wrapper { position: static; }
.sound-preview, .toolbox-preview, .search-panel {
left: 0;
right: 0;
min-width: 0;
top: calc(100% + 6px);
}
.sound-preview, .toolbox-preview { max-height: 60vh; overflow-y: auto; }
/* ---------- 主体与页脚 ---------- */
.mc-main { padding: 18px 12px 32px; }
body.detail-mode .mc-main { padding: 18px 10px 32px; }
.mc-footer {
padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
font-size: 0.58rem;
letter-spacing: 0.2px;
}
/* ---------- 首页：桌面版的缩小版，结构不动 ---------- */
.category-box { margin-bottom: 10px; }
.category-header { padding: 11px 14px; gap: 10px; }
.category-icon { font-size: 1.3rem; }
.category-name { font-size: 0.75rem; }
.category-arrow { font-size: 1rem; }
/* ---------- 分类页 / 搜索结果：横向紧凑卡片 ---------- */
.category-top-bar, .search-top-bar, .tools-top-bar { gap: 10px; margin-bottom: 14px; }
.category-title-big, .search-title { font-size: 0.95rem; }
.mc-back-btn { padding: 6px 10px; font-size: 0.6rem; }
.category-items-panel, .search-results-panel { gap: 10px; }
.article-card { height: 106px; gap: 6px; }
.article-card-cover { flex: 0 0 96px; }
.article-card-body { padding: 6px 8px 6px 2px; }
.article-card-title { font-size: 0.72rem; }
.article-card-excerpt { font-size: 0.56rem; line-height: 1.45; -webkit-line-clamp: 2; }
.article-card-meta { font-size: 0.5rem; padding-top: 4px; gap: 6px; }
.card-badges { top: 6px; left: 6px; }
.special-badge { font-size: 0.5rem; padding: 2px 5px; }
/* ---------- 文章详情 ---------- */
.detail-page { padding: 0; }
.detail-top-bar { margin-left: 0; margin-bottom: 12px; }
.detail-sidebar { display: none; }
.detail-main-content { margin-left: 0; }
.detail-panel { padding: 16px 14px; }
.detail-title { font-size: 0.92rem; line-height: 1.5; }
.detail-meta {
flex-wrap: wrap;
gap: 6px 12px;
margin: 14px 0;
padding-bottom: 12px;
font-size: 0.56rem;
}
.detail-content { font-size: 0.75rem; }
.detail-content p { margin-bottom: 12px; }
.detail-content h1 { font-size: 0.95rem; margin: 18px 0 10px; }
.detail-content h2 { font-size: 0.88rem; margin: 16px 0 8px; }
.detail-content h3, .detail-content h4 { font-size: 0.8rem; margin: 14px 0 6px; }
.detail-content ul, .detail-content ol { padding-left: 1.25em; margin-bottom: 12px; }
.detail-content img { max-width: 100%; height: auto; }
.detail-tags { margin-top: 14px; padding-top: 10px; gap: 6px; }
/* ---------- 工具箱 ---------- */
.tools-grid { grid-template-columns: 1fr; gap: 14px; }
.tool-card img { min-height: 150px; }
.tool-card-body { padding: 12px; }
.tool-card-title { font-size: 0.85rem; }
.tool-card-desc { font-size: 0.62rem; }
/* ---------- 服务器列表 ---------- */
#serverListPanel { padding: 10px; }
.srv-row { gap: 8px; padding: 8px; }
.srv-icon { width: 40px; height: 40px; }
.srv-name { font-size: 0.7rem; }
.srv-motd { font-size: 0.55rem; }
.srv-addr, .srv-mc-version { font-size: 0.5rem; }
.srv-count { font-size: 0.55rem; }
.srv-players-inner { padding: 6px 8px; }
.srv-player { font-size: 0.55rem; }
.srv-empty { font-size: 0.7rem; }
/* ---------- 分页 / 空状态 ---------- */
.pagination { gap: 5px; margin: 20px 0 12px; }
.pagination button, .pagination .page-info { padding: 5px 9px; font-size: 0.6rem; }
.empty-state { padding: 28px 14px; font-size: 0.68rem; }
}
/* 超窄屏（<= 360px，如 iPhone SE 竖屏）：把第 1 行的每一项再收一档，
保证"图标组"不换到第 2 行（否则整条顶栏会变成 3 行）。 */
@media (max-width: 360px) {
.mc-header { gap: 4px; padding: 6px 6px; }
.mc-header-left { gap: 4px; }
.mc-header-right { gap: 4px; }
.mc-header-title { font-size: 0.58rem; max-width: 6em; }
.mc-nav-btn { padding: 5px 6px; font-size: 0.48rem; }
.mc-header-textnav { gap: 6px; }
.guest-badge { padding: 3px 5px; }
}
/* 关闭背景模糊/遮罩 */
body.no-blur::before {
filter: none !important;
-webkit-filter: none !important;
}
body.no-blur::after {
background: transparent !important;
}
|