Template:展示卡片/styles.css：修订间差异
模板页面
更多操作
DoubleCircle（留言 | 贡献） 小 "展示卡片样式接入 common.css 变量并支持暗色模式" |
DoubleCircle（留言 | 贡献） 小 "移除展示卡片「跟随系统」暗色块" |
||
| 第104行： | 第104行： | ||
html.skin-theme-clientpref-night .display-card:hover { | html.skin-theme-clientpref-night .display-card:hover { | ||
box-shadow: 0 4px 14px rgba(0, 0, 0, .55); | box-shadow: 0 4px 14px rgba(0, 0, 0, .55); | ||
} | } | ||
} | } | ||
2026年8月27日 (四) 03:22的最新版本
/* ==========================================================================
展示卡片（Template:展示卡片/styles.css）
==========================================================================
配色与 MediaWiki:Common.css 全局变量保持一致：
- 所有颜色通过 var(--xxx, 浅色回退) 引用 common.css 定义的变量，
站点调色后本模板自动同步；
- 暗色模式自动生效：common.css 会根据站内偏好（<html> 上的
skin-theme-clientpref-night / skin-theme-clientpref-os 类）重定义这些变量，
本模板颜色无需额外覆盖；仅投影在此按 common.css 的暗色阴影显式适配。
========================================================================== */
.display-card {
position: relative;
box-sizing: border-box;
height: 100%;
margin: 5px;
padding: 12px 14px;
border: 1px solid var(--color-primary-light, #D4E8C0);
border-radius: 8px;
background: linear-gradient(180deg, var(--color-theme-soft, #F9FCF4), var(--color-theme, #F1F8E6));
box-shadow: 0 1px 3px rgba(143, 188, 143, .25);
transition: box-shadow .2s ease, transform .2s ease;
}
/* 顶部装饰条 */
.display-card::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 4px;
border-radius: 8px 8px 0 0;
background: linear-gradient(90deg, var(--color-primary, #8FBC8F), var(--color-primary-lite, #DCEFDC));
}
/* 悬停效果 */
.display-card:hover {
box-shadow: 0 4px 14px rgba(143, 188, 143, .4);
transform: translateY(-2px);
}
.display-card-head {
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--color-primary, #8FBC8F);
font-size: 1.1em;
font-weight: bold;
color: var(--color-primary-deep, #2E6B45);
}
.display-card-head::before {
content: "◆";
margin-right: 6px;
color: var(--color-primary, #8FBC8F);
font-size: .75em;
}
.display-card-body {
color: var(--color-text, #333333);
font-size: .95em;
line-height: 1.6;
overflow-wrap: break-word;
}
.display-card-body ul {
margin: 0 0 0 1.2em;
padding: 0;
}
.display-card-body p {
margin: .3em 0;
}
.display-card-body .more-link {
margin-top: 4px;
text-align: right;
font-size: .9em;
}
/* 强调样式 */
.display-card-accent {
background: linear-gradient(180deg, var(--color-accent-bg, #FFF8EF), var(--color-accent-bg-soft, #FDF2E3));
border: 1px solid var(--color-accent-border, #E8CFA8);
}
.display-card-accent::before {
background: linear-gradient(90deg, var(--color-accent, #E8B96A), var(--color-accent-light, #F3D9AE));
}
.display-card-accent .display-card-head {
border-bottom-color: var(--color-accent, #E8B96A);
color: var(--color-accent-deep, #8A5A1E);
}
/* ==========================================================================
暗色模式投影（颜色由 common.css 变量自动适配，此处仅覆盖投影）
与 common.css 暗色 --shadow-card / --shadow-card-hover 一致
========================================================================== */
@media screen {
/* 用户明确选择「深色」 */
html.skin-theme-clientpref-night .display-card {
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
html.skin-theme-clientpref-night .display-card:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}
}