164 lines
4.0 KiB
CSS
164 lines
4.0 KiB
CSS
/**
|
||
* 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);
|
||
background: var(--surface-1);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: box-shadow var(--dur) var(--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 兼容别名
|
||
* ============================================================ */
|
||
.theme-box {
|
||
background: var(--surface-1);
|
||
border: none;
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow-sm);
|
||
margin-bottom: 20px;
|
||
transition: box-shadow var(--dur) var(--ease);
|
||
}
|
||
|
||
.theme-box:hover {
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.box-bg {
|
||
background-color: var(--surface-1);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.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: var(--shadow);
|
||
}
|
||
|
||
.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 .theme-box,
|
||
body.dark-theme .theme-box,
|
||
html.dark .box-bg,
|
||
body.dark-theme .box-bg {
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
html.dark .aksrt-theme-box:hover,
|
||
body.dark-theme .aksrt-theme-box:hover,
|
||
html.dark .theme-box:hover,
|
||
body.dark-theme .theme-box:hover {
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
/* ============================================================
|
||
* 卡片 hover 动效
|
||
* ============================================================ */
|
||
.aksrt-theme-box,
|
||
.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: translateY(-4px);
|
||
}
|
||
|
||
.aksrt-noshadow:hover {
|
||
box-shadow: none !important;
|
||
transform: none !important;
|
||
}
|