kate522
0b5b153265
- tokens：收紧 surface 层级/边框/圆角/阴影/间距与暗黑基线 - 组件：按钮、卡片原语、导航、侧栏、分页、模态、浮动按钮 - 首页：hero 外壳、fixed 列表/宫格、tab、skeleton/error 及各运营模块卡片化 - 内容页：单篇封面/标题/正文/blockquote/相关/TOC/上一篇下一篇、评论区 - 社区：forum board/topic/compose 子控件与卡片体系 - 交易/认证：cart/orders/revenue/product/auth 表面块与模态浮层统一 - footer：页脚主体、社交/联系、移动端 tabbar/搜索覆盖
90 lines
1.8 KiB
CSS
90 lines
1.8 KiB
CSS
/**
|
||
* Home Modules · CMS 形态首页模块系统样式
|
||
*
|
||
* 仅在 site_profile=cms 时（首页）加载。
|
||
*
|
||
* 宽度模型：
|
||
* - .home-modules > .home-module 锁定到 --container（默认 1280）
|
||
* - .home-modules > .hero 走 full-bleed（不在此处约束）
|
||
* - banner 模块的精细微调见 hero.css `.banner-slider.home-modules__banner`
|
||
*/
|
||
|
||
.home-modules {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-8, 40px);
|
||
padding-bottom: var(--space-8, 40px);
|
||
}
|
||
|
||
.home-modules--fullbleed {
|
||
width: 100%;
|
||
}
|
||
|
||
.home-modules--fullbleed > .home-module {
|
||
max-width: 100%;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* 容器宽度统一：所有非 hero 的 home-module 都对齐到 --container */
|
||
.home-modules > .home-module {
|
||
width: 100%;
|
||
max-width: var(--container);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.home-modules > .home-module {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
}
|
||
|
||
/* ============ 公共 header ============ */
|
||
.home-module__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-3, 12px);
|
||
margin-bottom: var(--space-5, 20px);
|
||
padding-bottom: var(--space-3, 12px);
|
||
border-bottom: 1px solid var(--color-line-soft);
|
||
}
|
||
|
||
.home-module__title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font: 700 22px/1.2 var(--font-display);
|
||
margin: 0;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.home-module__title i {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.home-module__more {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font: 500 13px/1 var(--font-ui);
|
||
color: var(--color-primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.home-module__more:hover {
|
||
color: var(--color-primary-active);
|
||
}
|
||
|
||
.home-module__admin-tools {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 14px;
|
||
}
|
||
|