/* Breadcrumb chrome lives in breadcrumb.css (single source). */ /* ========== 主布局 ========== */ .content-main { width: 100%; } .content-main--single { max-width: 100%; } .content-shell { width: 100%; margin: 0 auto; padding: 32px 16px 48px; max-width: var(--container); } @media (min-width: 768px) { .content-shell { padding: 40px 24px 56px; } } /* page.php 专用:阅读宽度收窄 */ .content-shell--page { max-width: var(--container-page, 860px); } .content-shell--cms { max-width: 100%; padding: 0; } /* page.php 内的元素 */ .entry-page .entry-thumb { margin: 0 0 var(--space-6, 24px); border-radius: var(--radius-lg, 12px); overflow: hidden; } .entry-page .page-links { margin-top: var(--space-6, 24px); font-size: var(--text-sm, 0.875rem); color: var(--color-ink-3, var(--color-ink-3)); } .entry-page .page-links-title { margin-right: 8px; font-weight: 600; } /* ============================================================ * Site shell — site-layout-1/2/3 dual-column * DOM: main.container > .content-wrap + .sidebar (siblings) * body.site-layout-1 = no sidebar * body.site-layout-2 = sidebar right * body.site-layout-3 = sidebar left * * Desktop columns use Grid so the sidebar is always a real second column. * The float rules below remain as a narrow-screen compatibility fallback; * below 992px the sidebar is intentionally hidden. * ============================================================ */ main.container, main.content-shell, .site-main.container { position: relative; } /* content-shell is a padding shell for non-dual pages; when it also hosts * the float dual-column, kill horizontal padding so negative-margin math matches Zibll. */ main.container.content-shell, main.content-shell.container, .site-main.container.content-shell { padding-left: 0; padding-right: 0; max-width: var(--container, var(--mian-max-width, 1200px)); width: 100%; box-sizing: border-box; } main.container::after, main.content-shell::after, .site-main.container::after { content: ""; display: table; clear: both; } /* Float/negative-margin compatibility fallback. * * Critical: .content-layout must NOT set width:100%. Under box-sizing:border-box * a 100% width + margin-right gutter keeps the border-box at full container * width, so the gutter never shrinks the content box and .sidebar (margin-left:-311px) * sits under the main column (overlap). Zibll only sets margin on .content-layout; * width stays auto so margin carves out the column. */ .content-wrap { float: left; width: 100%; min-width: 0; display: block; box-sizing: border-box; } .content-layout { display: block; /* width:auto — never 100%; margin must shrink the used width */ width: auto; min-width: 0; max-width: none; margin-right: 0; margin-left: 0; box-sizing: border-box; } .content-layout__primary { min-width: 0; max-width: 100%; } /* Base sidebar column (Zibll .sidebar defaults) — layout variants override below */ .sidebar { float: left; width: 311px; /* Zibll hard 311px; --sidebar-width kept in sync via runtime vars */ width: var(--sidebar-width, 311px); min-width: 0; position: relative; box-sizing: border-box; display: block; } .content-layout__aside { min-width: 0; } /* No sidebar */ body.site-layout-1 .sidebar, .site-layout-1 .sidebar { display: none; } body.site-layout-1 .content-layout, body.site-layout-1 .content-layout--no-sidebar, .site-layout-1 .content-layout { margin-left: 0; margin-right: 0; } /* Compat: templates may still stamp content-layout--no-sidebar */ .content-layout--no-sidebar { margin-left: 0 !important; margin-right: 0 !important; } /* Sidebar RIGHT (layout 2) — Zibll: margin-right: calc(311px + 15px) only */ body.site-layout-2 .content-layout, .site-layout-2 .content-layout { margin-right: calc(311px + 15px); margin-right: calc(var(--sidebar-width, 311px) + 15px); margin-left: 0; width: auto; } body.site-layout-2 .sidebar, .site-layout-2 .sidebar { float: left; width: 311px; width: var(--sidebar-width, 311px); margin-left: -311px; margin-left: calc(0px - var(--sidebar-width, 311px)); position: unset; } /* Sidebar LEFT (layout 3) */ body.site-layout-3 .content-layout, .site-layout-3 .content-layout { margin-left: calc(311px + 15px); margin-left: calc(var(--sidebar-width, 311px) + 15px); margin-right: unset; width: auto; } body.site-layout-3 .sidebar, .site-layout-3 .sidebar { float: left; width: 311px; width: var(--sidebar-width, 311px); margin-left: -100%; position: unset; } /* Desktop dual-column geometry. * * A full-width floated .content-wrap plus a negatively-margined sidebar can * leave the sidebar outside the visible painting area when a parent clips * horizontal overflow. Put the two direct children in explicit grid columns * instead, so widgets cannot be positioned off-canvas. */ @media (min-width: 992px) { body.site-layout-2 main.container, body.site-layout-2 main.content-shell, body.site-layout-2 .site-main.container { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 311px); column-gap: 15px; align-items: start; } body.site-layout-3 main.container, body.site-layout-3 main.content-shell, body.site-layout-3 .site-main.container { display: grid; grid-template-columns: var(--sidebar-width, 311px) minmax(0, 1fr); column-gap: 15px; align-items: start; } body.site-layout-2 main.container::after, body.site-layout-2 main.content-shell::after, body.site-layout-2 .site-main.container::after, body.site-layout-3 main.container::after, body.site-layout-3 main.content-shell::after, body.site-layout-3 .site-main.container::after { content: none; } body.site-layout-2 main.container > .content-wrap, body.site-layout-2 main.content-shell > .content-wrap, body.site-layout-2 .site-main.container > .content-wrap { float: none; grid-column: 1; grid-row: 1; width: auto; } body.site-layout-3 main.container > .content-wrap, body.site-layout-3 main.content-shell > .content-wrap, body.site-layout-3 .site-main.container > .content-wrap { float: none; grid-column: 2; grid-row: 1; width: auto; } body.site-layout-2 main.container > .content-wrap > .content-layout, body.site-layout-2 main.content-shell > .content-wrap > .content-layout, body.site-layout-2 .site-main.container > .content-wrap > .content-layout, body.site-layout-3 main.container > .content-wrap > .content-layout, body.site-layout-3 main.content-shell > .content-wrap > .content-layout, body.site-layout-3 .site-main.container > .content-wrap > .content-layout { width: auto; margin-right: 0; margin-left: 0; } body.site-layout-2 main.container > .sidebar, body.site-layout-2 main.content-shell > .sidebar, body.site-layout-2 .site-main.container > .sidebar { float: none; grid-column: 2; grid-row: 1; width: var(--sidebar-width, 311px); margin-left: 0; position: relative; } body.site-layout-3 main.container > .sidebar, body.site-layout-3 main.content-shell > .sidebar, body.site-layout-3 .site-main.container > .sidebar { float: none; grid-column: 1; grid-row: 1; width: var(--sidebar-width, 311px); margin-left: 0; position: relative; } } /* Sticky widgets inside sidebar */ @media (min-width: 992px) { body.site-layout-2 .sidebar .posts-nav-box, body.site-layout-3 .sidebar .posts-nav-box, .sidebar .content-layout__aside, .content-layout__aside { position: sticky; top: calc(var(--nav-height, 60px) + 16px); } .has-static-nav .sidebar .posts-nav-box, .has-static-nav .content-layout__aside { top: 16px; } } /* Mobile collapse (Zibll max-width: 991px) */ @media (max-width: 991.98px) { body.site-layout-2 .content-layout, body.site-layout-3 .content-layout, .site-layout-2 .content-layout, .site-layout-3 .content-layout { margin-left: auto; margin-right: auto; } body.site-layout-2 .sidebar, body.site-layout-3 .sidebar, .site-layout-2 .sidebar, .site-layout-3 .sidebar, .sidebar { display: none; } } /* ========== 页面标题区 ========== */ .page-header { margin-bottom: 28px; } .page-header .entry-title { margin-bottom: 8px; } .page-header p { color: var(--color-ink-3); margin: 0; max-width: 720px; } .term-page-header { position: relative; overflow: hidden; border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08)); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-sm, 0 1px 6px rgba(15, 23, 42, 0.04)); } .term-page-header__body { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px; } .term-page-header__eyebrow { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); } .term-page-header__desc { margin-top: 10px; } .term-page-header__cover { min-height: 140px; background-position: center; background-size: cover; border-top: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08)); } .term-page-header--simple .term-page-header__cover { display: none; } /* Card style: accent top border, slightly more padding */ .term-page-header--card { border-top: 3px solid var(--color-primary, #f04494); } .term-page-header--card .term-page-header__body { padding: 28px 24px; } /* Cover style: full-width hero with background image */ .term-page-header--cover { border: none; border-radius: var(--radius-lg); background: transparent; box-shadow: none; min-height: 220px; display: flex; flex-direction: column; } .term-page-header__cover-bg { position: absolute; inset: 0; background-position: center; background-size: cover; border-radius: var(--radius-lg); } .term-page-header__cover-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 100%); border-radius: var(--radius-lg); } .term-page-header--cover .term-page-header__body { flex: 1; align-items: flex-end; z-index: 2; } .term-page-header__body--overlay .entry-title, .term-page-header__body--overlay .term-page-header__desc, .term-page-header__body--overlay .term-page-header__eyebrow { color: #fff; } .term-page-header__body--overlay .term-page-header__eyebrow { color: rgba(255, 255, 255, 0.8); } @media (max-width: 767px) { .term-page-header--cover { min-height: 160px; } } .aksrt-admin-quicklink { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--color-line); border-radius: var(--radius-pill, 999px); background: var(--surface-2); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; font-size: 0.875rem; font-weight: 600; } .aksrt-admin-quicklink:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft, rgba(59, 130, 246, 0.08)); } .archive-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: -8px 0 24px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.06)); } .archive-filter-bar__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .archive-filter-bar__label { color: var(--color-ink-4); font-size: 0.8125rem; font-weight: 600; } .archive-filter-bar__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .archive-filter-bar__chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--radius-pill, 999px); background: var(--surface-1); color: var(--color-ink-2); text-decoration: none; font-size: 0.875rem; font-weight: 500; } .archive-filter-bar__chip.is-active, .archive-filter-bar__chip:hover { background: var(--color-primary); color: var(--color-on-primary, #fff); } .archive-filter-bar__meta { color: var(--color-ink-4); font-size: 0.8125rem; font-weight: 600; } .archive-filter-bar__sort { display: flex; align-items: center; gap: 8px; margin-left: auto; } .archive-filter-bar__main--tags { border-top: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.06)); padding-top: 10px; margin-top: 10px; } /* §3.4 custom_filter dimension rows */ .archive-filter-bar__main--custom { border-top: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.06)); padding-top: 10px; margin-top: 10px; } .content-stream { display: grid; gap: 20px; } .content-main--archive, .content-main--tag, .content-main--category, .content-main--search, .content-main--single { display: grid; gap: 20px; } .content-stream__list { width: 100%; } .content-stream__footer { margin-top: 4px; } .content-stream__footer > .content-stream__footer-nav, .archive__ajax-wrap > .content-stream__footer-nav { margin-top: 0; } .content-stream__empty { padding: 28px 24px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08)); } .article-shell { overflow: hidden; } /* AJAX 筛选加载状态 */ .archive__ajax-wrap { position: relative; transition: opacity 0.2s ease; } .archive__ajax-wrap.is-loading { opacity: 0.5; pointer-events: none; } .archive__ajax-loading { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; align-items: center; justify-content: center; z-index: 5; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(1px); } .archive__ajax-loading.is-loading { display: flex; } .archive__ajax-spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid var(--surface-3, #e8e8e8); border-top-color: var(--color-primary, #f04494); border-radius: 50%; animation: aksrt-spin 0.6s linear infinite; } @media (max-width: 767px) { .term-page-header__body { flex-direction: column; align-items: stretch; padding: 20px; } .aksrt-admin-quicklink { width: fit-content; } } /* ========== AJAX 分页(加载更多 / 无限滚动) ========== */ .aksrt-pagination-ajax { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 40px 0 8px; } .aksrt-load-more-btn { min-width: 180px; height: 44px; padding: 0 32px; border-radius: var(--radius-btn); border: 1px solid var(--color-line); background: var(--surface-page); color: var(--color-ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .aksrt-load-more-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .aksrt-load-more-btn:disabled { opacity: 0.5; pointer-events: none; } .aksrt-loading-indicator { display: none; align-items: center; gap: 8px; font-size: 14px; color: var(--color-ink-4); } .aksrt-loading-indicator i { font-size: 16px; } .aksrt-scroll-sentinel { width: 100%; height: 1px; pointer-events: none; } /* ========== 移动端/平板隐藏侧栏(与 zibll 一致:991px 以下隐藏) ========== */ @media (max-width: 991px) { .content-layout__aside { display: none; } } /* CMS 模块在侧栏布局中的适配 */ .content-layout__primary--cms { min-width: 0; } .content-layout__primary--cms .home-modules { gap: var(--space-7, 32px); } .content-layout__primary--cms .home-modules > .home-module { max-width: 100%; padding-left: 0; padding-right: 0; } /* ============================================================ * Phase 2 — 背景遮罩层级修正 * body.aksrt-bg-overlay 的 ::before 需要 z-index: -1 让内容在其上方 * ============================================================ */ body.aksrt-bg-overlay { position: relative; } body.aksrt-bg-overlay::before { z-index: -1; } body.aksrt-bg-overlay .site-wrapper { position: relative; z-index: 0; } /* ============================================================ * Phase 2 — 侧栏 widget 内链接增强 * ============================================================ */ .content-layout__aside .widget a { transition: color var(--dur-fast, 0.15s) var(--ease); } .content-layout__aside .widget a:hover { color: var(--color-primary); } /* ============================================================ * Phase 5 — 文章操作卡片增强 * ============================================================ */ /* ============================================================ * Phase 6 — 评论卡片容器 * ============================================================ */ .comments-card { overflow: hidden; }