/** * AKSRT Card Primitives — 1:1 Zibll Alignment * * 对齐 zibll 的 .theme-box / .box-bg / .box-body / .box-header: * 阴影优先,无边框,8px 圆角,15px 内边距。 * * @package AKSRT */ /* ============================================================ * .aksrt-theme-box — 完整卡片原语(阴影 + 圆角 + 表面) * 对齐 zibll .theme-box + .box-bg * ============================================================ */ .aksrt-theme-box { border: none; border-radius: var(--radius, 8px); background: var(--surface-1); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease; } .aksrt-theme-box:hover { box-shadow: var(--shadow); } /* ============================================================ * .aksrt-box-bg — 表面原语(仅背景 + 阴影) * ============================================================ */ .aksrt-box-bg { background-color: var(--surface-1); box-shadow: var(--shadow-sm); } /* ============================================================ * .aksrt-box-body / .aksrt-box-header — 内边距区段 * 对齐 zibll .box-body / .box-header { padding: 15px } * ============================================================ */ .aksrt-box-body, .aksrt-box-header { padding: var(--card-padding); } .aksrt-box-header { border-bottom: 1px solid var(--color-line-soft); } .aksrt-box-header + .aksrt-box-body { padding-top: 0; } .aksrt-box-body.notop, .aksrt-box-header.notop { padding-top: 0; } .aksrt-box-body.nobottom, .aksrt-box-header.nobottom { padding-bottom: 0; } /* ============================================================ * .aksrt-muted-box — 柔和背景嵌套 * 对齐 zibll .muted-box * ============================================================ */ .aksrt-muted-box { background-color: var(--surface-2); border-radius: var(--radius); padding: var(--card-padding); } /* ============================================================ * .aksrt-noshadow — 去除阴影 * ============================================================ */ .aksrt-noshadow { box-shadow: none !important; } /* ============================================================ * Zibll 兼容别名 * ============================================================ */ /* Zibll .theme-box is ONLY a spacing utility (margin-bottom: 20px). * Background/shadow live on .main-bg / .main-shadow / .box-bg / .zib-widget. * Do NOT turn every theme-box into a card — article-header also uses it. */ .theme-box, .mb20 { margin-bottom: 20px; } .box-bg { background-color: var(--main-bg-color, var(--surface-1)); box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); } .box-body { padding: var(--card-padding); } .box-header { padding: var(--card-padding); border-bottom: 1px solid var(--color-line-soft); } .box-header + .box-body { padding-top: 0; } .radius8 { border-radius: var(--radius); } .main-shadow { box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); } .main-bg { background: var(--main-bg-color, var(--surface-1)); } .muted-box { background-color: var(--surface-2); border-radius: var(--radius); padding: var(--card-padding); } /* ============================================================ * 暗色模式 * ============================================================ */ html.dark .aksrt-theme-box, body.dark-theme .aksrt-theme-box, html.dark .box-bg, body.dark-theme .box-bg { border-color: transparent; box-shadow: 0 0 10px var(--main-shadow, rgba(0, 0, 0, 0.2)); } html.dark .aksrt-theme-box:hover, body.dark-theme .aksrt-theme-box:hover { box-shadow: 0 0 10px var(--main-shadow, rgba(0, 0, 0, 0.28)); } /* ============================================================ * 卡片 hover 动效 * ============================================================ */ .aksrt-theme-box { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .aksrt-card-hover:hover, .aksrt-card-hover:focus-within { box-shadow: none; transform: none; } .aksrt-card-hover-lg:hover, .aksrt-card-hover-lg:focus-within { box-shadow: var(--shadow-lg); transform: none; } .aksrt-noshadow:hover { box-shadow: none !important; transform: none !important; } /* ============================================================ * .zib-widget — zibll sidebar/widget surface * ============================================================ */ .zib-widget { clear: both; background-color: var(--surface-1); padding: var(--card-padding); box-shadow: var(--shadow-sm); border-radius: var(--radius, 8px); margin-bottom: 20px; }