/* ========== Single Post ========== */ .entry-header, .article-header { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--color-line-soft); } /* 标题 — 对齐 zibll: 22px, bold, line-height 1.4 */ .entry-title, .article-title { font-size: 28px; font-weight: 700; margin: 0 0 18px; line-height: 1.35; letter-spacing: -0.01em; color: var(--color-ink); } .entry-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 0.875rem; color: var(--color-ink-4); } .entry-meta a { color: var(--color-ink-3); } .entry-meta a:hover { color: var(--color-primary); } .entry-thumb { margin: 0 0 28px; border-radius: var(--radius-btn); overflow: hidden; } /* 内容区 — 对齐 zibll: 16px, line-height 2 */ .entry-content { font-size: 16px; line-height: 1.95; color: var(--color-ink); overflow-wrap: break-word; word-wrap: break-word; min-height: 90px; } .entry-content > *:first-child { margin-top: 0; } .entry-content p { margin: 0 0 1.5em; } .entry-content h2 { font-size: 20px; font-weight: 700; margin: 20px 0 10px; } .entry-content h3 { font-size: 18px; font-weight: 700; margin: 20px 0 10px; } .entry-content blockquote { margin: 0 0 24px; padding: 18px 20px; border-left: 4px solid var(--color-primary); background: var(--surface-4, rgba(0, 0, 0, 0.03)); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; color: var(--color-ink-3); } .entry-content img { margin: 0 auto; display: block; max-width: 100%; height: auto; } /* ===== 图片灯箱 ===== */ .lightbox-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; background: rgba(0, 0, 0, 0.85); } .lightbox-overlay.is-open { display: flex; } .lightbox-img { max-width: 90vw; max-height: 85vh; width: auto; height: auto; border-radius: 4px; object-fit: contain; } .lightbox-caption { max-width: min(96vw, 1200px); color: #fff; font-size: 14px; line-height: 1.5; text-align: center; opacity: 0.92; } .lightbox-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background-color 0.2s ease; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.22); } .lightbox-close i { pointer-events: none; } .entry-content iframe, .entry-content .wp-block-embed iframe, .entry-content video { max-width: 100%; height: auto; } .entry-content .wp-block-embed { position: relative; width: 100%; max-width: 100%; overflow: hidden; margin: 1.5em 0; } /* 行内代码 — 对齐 zibll: 粉色文字 + 粉色背景 */ .entry-content code { font-family: var(--font-mono); font-size: 0.9em; color: #ff3c98; background: rgba(253, 153, 153, 0.2); padding: 2px 6px; border-radius: 4px; } .entry-content ul, .entry-content ol { padding-left: 1.5em; margin: 0 0 1.5em; } .entry-content ul li::marker { color: var(--color-primary); } .entry-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-line); } .post-tags { display: flex; flex-wrap: wrap; gap: 8px; } .post-tags a { padding: 4px 10px; border-radius: 50px; background: var(--muted-bg-color, #eee); border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06)); font-size: 13px; color: var(--muted-color, #777); } .post-tags a:hover { border-color: var(--color-primary); color: var(--color-primary); } .related-posts { margin-top: 48px; padding: 20px 0 0; border-top: 1px solid var(--color-line-soft); } .related-posts__title { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--key-color, #333); } .related-posts__title::before { content: ''; display: inline-block; width: 40px; height: 3px; background: var(--theme-color, #f04494); border-radius: 5px; vertical-align: middle; margin-right: 8px; } .related-posts__grid { display: flex; flex-direction: column; gap: 0; } .related-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06)); transition: 0.15s; } .related-card:last-child { border-bottom: none; } .related-card a { display: flex; align-items: center; gap: 12px; color: var(--key-color, #333); text-decoration: none; width: 100%; } .related-card:hover a { color: var(--focus-color, #f04494); } .related-card__thumb { width: 96px; min-width: 96px; height: 64px; border-radius: var(--main-radius, 8px); overflow: hidden; flex-shrink: 0; } .related-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .related-card:hover .related-card__thumb img { transform: scale(1.05); } .related-card h4 { font-size: 14px; font-weight: 600; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }