feat(cards): 卡片外观可配置(不透明度 / 毛玻璃)

- 站点设置新增 card.opacity(40–100)与 card.blur,后台「首页管理 → 卡片外观」可调
- 前台所有卡片(首页 / 分组页 / 详情 / 侧栏)共用一套 CSS 变量
- 顺带带上上一轮:背景缓存、搜索记忆、明暗图标跟随实际状态、卡片描边/阴影、分组页卡片外壳
This commit is contained in:
2026-11-05 12:45:11 +08:00
parent a9a913942a
commit 4ce1b7e7c1
8 changed files with 229 additions and 19 deletions
+49 -9
View File
@@ -1,12 +1,46 @@
/* 页面级样式:只保留「组件库没有」的部分(背景、外壳、封面兜底、正文版式)。
颜色 / 间距 / 字号全部取自 @stash/ui 的令牌。 */
/* 主题级覆盖:放 :root 而不是 .app,前后台两个壳才能拿到同一套阴影 */
/* 主题级覆盖:放 :root 而不是 .app,前后台两个壳才能拿到同一套描边/阴影。
卡片保留一层很浅的投影;浅色默认 gray-1 几乎看不见,描边提一档。 */
:root {
--su-card-border: var(--su-gray-3);
--su-shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
--su-shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
}
/* 深色下描边要比卡片底(#202022)亮一档,才是一条实线 */
:root[data-scheme='dark'] {
--su-card-border: var(--su-border-strong);
}
/* 卡片外观(后台「卡片外观」可调):底色透明度 + 毛玻璃,前台所有卡片共用一套。
变量由 AppNext 按站点设置写到 <html> 上;没设置时就是实底、无毛玻璃。 */
.app .section-card,
.app .profile-card,
.app .service-panel,
.app .nav-card,
.app .group-own-block,
.app .group-child-block,
.app .detail-nav,
.app .item-card,
.app .article-body-card,
.app .related-card {
background-color: color-mix(
in srgb,
var(--su-bg-card) var(--stash-card-alpha, 100%),
transparent
);
backdrop-filter: var(--stash-card-blur, none);
}
/* 卡片阴影默认会被滚动容器在左右边缘一刀切掉(卡片正好贴着容器边)。
负边距把容器撑宽 16px、再补同样的内边距,内容位置不变,阴影有地方画。 */
#page-scroll {
margin: 0 -16px;
padding: 0 16px;
}
.app {
position: relative;
z-index: 1;
@@ -1119,6 +1153,16 @@ a.entry-href:hover {
overflow: hidden;
}
/* 侧栏卡片也贴着 aside 的边缘,阴影同样会被裁掉。
撑宽 16px 再补等量内边距,卡片宽度和位置都不变,阴影有地方画(窄屏堆叠时不适用)。 */
@media (min-width: 1101px) {
#page-scroll > aside {
width: calc(var(--layout-sider) + 32px);
margin: 0 -16px;
padding: 0 16px;
}
}
#page-scroll > aside .sidebar-wrap,
#page-scroll > aside .sidebar-home {
display: flex;
@@ -1160,18 +1204,14 @@ a.entry-href:hover {
/* 侧栏到内容区共用一条滚动虚化遮罩,同一水平高度 */
/* 左侧卡片半透明,露出页面背景 */
.sidebar-home .profile-card,
.sidebar-home .service-panel,
.sidebar-home .nav-card {
background-color: color-mix(in srgb, var(--su-bg-card) 64%, transparent);
border-color: color-mix(in srgb, var(--su-card-border) 55%, transparent);
backdrop-filter: blur(14px) saturate(1.15);
}
/* 侧栏卡片保持实底:原来 64% 半透明 + 毛玻璃,同一张卡落在背景图不同亮度的位置
会显出深浅差,明暗两套主题也分不出来。现在和首页卡片同一种底,只有背景图透出卡片外面。 */
.sidebar-home .nav-card {
overflow: hidden;
border: 1px solid var(--su-card-border);
border-radius: var(--su-radius-md);
box-shadow: var(--su-shadow-card);
}
/* 首页卡片:左侧卡片列表 + 右侧分组表格 */