kate522
8aa116ec43
Align homepage and category discovery, modern widgets, admin controls, quotes, and comments with the reference theme. Remove superseded paths and add rendering and behavior coverage. Update stale asset and finance contracts; all 760 Node tests and 139 widget assertions pass.
408 lines
9.5 KiB
CSS
408 lines
9.5 KiB
CSS
/* 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);
|
|
}
|
|
|
|
/* 用户中心（双栏）铺满视口：左栏 320 + 间距 20 + 右栏需要横向空间，被
|
|
* 阅读宽度收窄会在左右两侧留下大片空白。只有 page-profile.php 的 main 带
|
|
* .aksrt-profile（公开主页的该类只打在 body 上），因此不会误伤其它路由。 */
|
|
.site-main.content-shell.aksrt-profile {
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 公开主页是单栏，继续沿用后台「内容最大宽度」。顶部多功能组件位于
|
|
* main 之前；main 的通用 32/40px 上内边距会把资料卡与组件人为拉开，
|
|
* 这里仅对公开主页清除该段重复空白。 */
|
|
.site-main.content-shell.aksrt-user-home {
|
|
max-width: var(--container, 1440px);
|
|
padding-top: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@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
|
|
*
|
|
* This intentionally uses legacy's float/negative-margin ownership model.
|
|
* Below 992px the sidebar is hidden and the content margins collapse.
|
|
* ============================================================ */
|
|
|
|
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 legacy. */
|
|
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). legacy 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 (legacy .sidebar defaults) — layout variants override below */
|
|
.sidebar {
|
|
float: left;
|
|
width: 311px; /* legacy 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) — legacy: 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;
|
|
}
|
|
|
|
/* Sticky widgets inside sidebar */
|
|
@media (min-width: 992px) {
|
|
.sidebar .content-layout__aside,
|
|
.content-layout__aside {
|
|
position: sticky;
|
|
top: calc(var(--nav-height, 60px) + 16px);
|
|
}
|
|
|
|
.has-static-nav .content-layout__aside {
|
|
top: 16px;
|
|
}
|
|
}
|
|
|
|
/* Mobile collapse (legacy 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;
|
|
}
|
|
|
|
/* Reference cover ratio must outrank the shared panel padding. */
|
|
body.category .site-main {
|
|
line-height: 1.42857143;
|
|
}
|
|
|
|
.page-cover.aksrt-panel {
|
|
padding: 0 0 calc(25% + 80px);
|
|
}
|
|
|
|
.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));
|
|
}
|
|
|
|
.content-stream {
|
|
display: block;
|
|
}
|
|
|
|
.content-main--archive,
|
|
.content-main--tag,
|
|
.content-main--search,
|
|
.content-main--single {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.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 筛选的加载态与首页共用同一套骨架契约：
|
|
.post_ajax_loader 容器 + .is-loading 开关（见 frontend/modal-runtime.css）。
|
|
原先本文件另有一套独立 spinner 遮罩与 opacity 淡出，已删除 ——
|
|
全站只有一套加载语言。 */
|
|
|
|
@media (max-width: 767px) {
|
|
.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;
|
|
}
|
|
|
|
/* ========== 移动端/平板隐藏侧栏（与 legacy 一致：991px 以下隐藏） ========== */
|
|
@media (max-width: 991px) {
|
|
.content-layout__aside {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.content-layout__primary--cms {
|
|
min-width: 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;
|
|
}
|