/* ===== legacy article-nav (prev/next) ===== */ .article-nav { display: block; width: 100%; } .article-nav .box-body { width: calc(50% - 7px); margin: 0; display: inline-block; vertical-align: top; } .article-nav .box-body + .box-body { margin-right: 0; float: right; text-align: right; } .article-nav a { display: block; color: inherit; text-decoration: none; } .article-nav a:hover { color: var(--focus-color, #f04494); } .article-nav .text-ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--key-color, #333); } .article-nav p { margin: 0 0 6px; font-size: 12px; } /* ===== Previous / Next Navigation ===== */ .post-nav-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .post-nav-box__item { display: block; padding: 15px; text-decoration: none; transition: color 0.15s ease; color: var(--key-color, #333); } .post-nav-box__item:hover { color: var(--focus-color, #f04494); text-decoration: none; } .post-nav-box__item--next { text-align: right; } .post-nav-box__label { display: block; font-size: 12px; color: var(--color-ink-4, var(--color-ink-4)); margin-bottom: 4px; } .post-nav-box__title { display: block; font-size: 14px; font-weight: 600; color: var(--key-color, #333); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===== Related Posts — 对齐 legacy 卡片容器 ===== */ .related-box { margin-bottom: 16px; overflow: hidden; background: var(--surface-1, #fff); border: none; border-radius: var(--radius-2xl, 16px); box-shadow: var(--shadow-sm); } .related-box__header { padding-bottom: 0; } .related-box__title { font-size: 14px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; } .related-box__title i { color: var(--color-primary); font-size: 13px; } .related-box__list { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 0; } .related-box__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-line); text-decoration: none; color: inherit; } .related-box__item:last-child { border-bottom: none; } .related-box__item:hover { color: var(--color-primary); } .related-box__thumb { width: 96px; min-width: 96px; height: 64px; border-radius: var(--main-radius, 8px); overflow: hidden; flex-shrink: 0; background: var(--muted-bg-color, #eee); } .related-box__thumb img { width: 100%; height: 100%; object-fit: cover; } .related-box__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-ink-4); font-size: 14px; } .related-box__item-title { font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* ===== Comment Card Spacing ===== */ .comments-card { margin-bottom: 16px; } /* ===== Content Height Clamp (legacy) ===== */ .limit-height, .wp-posts-content.limit-height { position: relative; overflow: hidden; } .limit-height .read-more { position: absolute; bottom: 0; width: 100%; text-align: center; background-image: linear-gradient(0deg, var(--main-bg-color, #fff) 70px, rgba(255, 255, 255, 0) 100%); animation: lazy_fade 0.5s; z-index: 80; } html.dark .limit-height .read-more, body.dark-theme .limit-height .read-more { background-image: linear-gradient(0deg, var(--main-bg-color, #2a2a2a) 70px, rgba(53, 54, 55, 0) 100%); } .limit-height .read-more a, .limit-height .read-more .read-more-open { padding: 25px 0; display: inline-block; color: var(--focus-color, #f04494); margin-top: 80px; cursor: pointer; background: none; border: 0; font-size: 14px; } @keyframes lazy_fade { from { opacity: 0; } to { opacity: 1; } } .wp-posts-content.limit-height::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, transparent, var(--surface-page)); pointer-events: none; } .wp-posts-content.limit-height.is-expanded::after { display: none; } .entry-content.limit-height { position: relative; overflow: hidden; } .entry-content.limit-height::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, transparent, var(--surface-page)); pointer-events: none; } .entry-content.limit-height.is-expanded::after { display: none; } .content-expand-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; margin-top: -30px; position: relative; z-index: 2; border: none; background: var(--surface-page); color: var(--color-primary); font-size: 13px; font-weight: 500; cursor: pointer; border-top: 1px solid var(--color-line); } .content-expand-btn:hover { background: var(--color-primary-soft, rgba(240, 68, 148, 0.06)); } .content-expand-btn.is-expanded i { transform: rotate(180deg); } /* ===== Mobile ===== */ @media (max-width: 767px) { .single-cover { padding-bottom: 55%; } .single-cover__content { padding: 14px; } .single-cover__title { font-size: 1rem; } .post-nav-box { grid-template-columns: 1fr; } .post-actions-card__buttons { gap: 8px; } .action-btn { padding: 8px 14px; font-size: 13px; } } /* ===== 鏆楄壊妯″紡 ===== */ .theme-dark .article-end-separator span, html.dark .article-end-separator span { background: var(--surface-1); } /* ============================================================ * Phase 7 single/article controls * ============================================================ */ .reading-progress-bar { position: fixed; top: 0; left: 0; z-index: 120; width: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #fff)); box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 24%, transparent); } .author-info-bar.article-author-bar { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .author-info-bar.article-author-bar .author-info-bar__avatar img, .author-info-bar.article-author-bar .author-info-bar__avatar .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .author-info-bar.article-author-bar .author-info-bar__body { min-width: 0; flex: 1; } .author-info-bar.article-author-bar .author-info-bar__name { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink); font-weight: 600; font-size: 15px; } .author-info-bar.article-author-bar .author-info-bar__sub { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 4px; color: var(--color-ink-4); font-size: 12px; } .author-info-bar.article-author-bar .author-info-bar__bio { margin: 8px 0 0; color: var(--color-ink-3); font-size: 13px; line-height: 1.6; } .action-btn--ghost { background: var(--surface-2); } .resource-mobile-fab { position: fixed; right: 18px; bottom: 24px; z-index: 42; width: 52px; height: 52px; display: none; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-primary); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } .resource-mobile-download-bar { display: none; margin-bottom: 16px; } .resource-related { margin-bottom: 16px; } .resource-related__header { margin-bottom: 14px; } .resource-related__title { margin: 0; font-size: 18px; font-weight: 700; } .resource-related__grid { margin-top: 0; } @media (max-width: 991px) { .resource-mobile-download-bar { display: block; } .resource-mobile-fab { display: inline-flex; } } @media (max-width: 767px) { .author-info-bar.article-author-bar { gap: 10px; margin-bottom: 16px; } .author-info-bar.article-author-bar .author-info-bar__sub { gap: 6px 8px; } } /* ===== Related list (legacy-like) ===== */ .relates .title-theme, .related-box .title-theme { font-size: 14px; font-weight: 700; margin: 0 0 8px; } .related-list, .relates ul.no-thumb { list-style: none; margin: 0; padding: 4px 0 8px; } .related-list li, .relates ul.no-thumb li { padding: 8px 0; border-bottom: 1px solid var(--color-line); } .related-list li:last-child, .relates ul.no-thumb li:last-child { border-bottom: none; } .related-list a, .relates ul.no-thumb a { color: var(--color-ink); text-decoration: none; font-size: 14px; } .related-list a:hover, .relates ul.no-thumb a:hover { color: var(--color-primary); } .post-nav-box.is-empty, .post-nav-box__item.is-empty { visibility: hidden; } /* ===== Related (legacy .relates / .relates-thumb) ===== */ .relates .title-theme { margin-bottom: 0; } .relates .aksrt-panel { padding: 12px 15px; } .relates ul.no-thumb { list-style: none; margin: 0; padding: 0; } .relates ul.no-thumb li { padding: 6px 0; border-bottom: 1px dashed var(--color-line, rgba(0,0,0,.06)); } .relates ul.no-thumb li:last-child { border-bottom: 0; } .relates ul.no-thumb a.icon-circle { color: inherit; text-decoration: none; } .relates ul.no-thumb a.icon-circle:hover { color: var(--focus-color, #f04494); } .relates-thumb .swiper-scroll { padding-bottom: 4px; } .relates-thumb .swiper-slide { width: 200px; max-width: 70vw; } .relates-thumb .graphic.style-3 { position: relative; overflow: hidden; border-radius: 8px; } .relates-thumb .graphic.style-3 .graphic-img { position: relative; overflow: hidden; background: var(--surface-2, #f3f4f6); } .relates-thumb .graphic.style-3 img.fit-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .relates-thumb .graphic.style-3 .graphic-text { padding: 10px 12px; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; } .relates-thumb .graphic.style-3 .text1 { font-size: 13px; font-weight: 600; color: #fff; } .relates-thumb .graphic.style-3 .text3 { opacity: .9; margin-top: 4px; } /* Colored tag pills on single */ .article-tags .but { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 6px 0; } .article-tags .but.ml6 { margin-left: 0; } .allow-view-deny { margin: 20px 0; }