Template:展示卡片/styles.css：修订间差异

2026年8月27日 (四) 03:06的版本

/* ==========================================================================
   展示卡片（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);
	}
}

/* 用户选择「跟随系统」且系统为深色 */
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .display-card {
		box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	}

	html.skin-theme-clientpref-os .display-card:hover {
		box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
	}
}
DoubleCircle​（留言 | 贡献）

2026年8月27日 (四) 03:06的版本

DoubleCircle（留言 | 贡献）
