Template:展示卡片/styles.css - 版本历史

DoubleCircle："移除展示卡片「跟随系统」暗色块"

2026-08-27T03:22:53Z

"移除展示卡片「跟随系统」暗色块"

←上一版本		2026年8月27日 (四) 03:22的版本
第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);~~
	}
	}

	~~/* 用户选择「跟随系统」且系统为深色 */~~
	~~@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);		box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
	}		}
	}		}

DoubleCircle："展示卡片样式接入 common.css 变量并支持暗色模式"

2026-08-27T03:06:06Z

"展示卡片样式接入 common.css 变量并支持暗色模式"

←上一版本		2026年8月27日 (四) 03:06的版本
第1行：		第1行：
	/* ===== 展示卡片（Template:展示卡片/styles.css）===== */		/* ==========================================================================
			展示卡片（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 {		.display-card {
	position: relative;		position: relative;
第6行：		第15行：
	margin: 5px;		margin: 5px;
	padding: 12px 14px;		padding: 12px 14px;
	border: 1px solid #D4E8C0;		border: 1px solid var(--color-primary-light, #D4E8C0);
	border-radius: 8px;		border-radius: 8px;
	background: linear-gradient(180deg, #F9FCF4, #F1F8E6);		background: linear-gradient(180deg, var(--color-theme-soft, #F9FCF4), var(--color-theme, #F1F8E6));
	box-shadow: 0 1px 3px rgba(143, 188, 143, .25);		box-shadow: 0 1px 3px rgba(143, 188, 143, .25);
	transition: box-shadow .2s ease, transform .2s ease;		transition: box-shadow .2s ease, transform .2s ease;
第22行：		第31行：
	height: 4px;		height: 4px;
	border-radius: 8px 8px 0 0;		border-radius: 8px 8px 0 0;
	background: linear-gradient(90deg, #8FBC8F, #DCEFDC);		background: linear-gradient(90deg, var(--color-primary, #8FBC8F), var(--color-primary-lite, #DCEFDC));
	}		}

第34行：		第43行：
	margin-bottom: 6px;		margin-bottom: 6px;
	padding-bottom: 4px;		padding-bottom: 4px;
	border-bottom: 1px solid #8FBC8F;		border-bottom: 1px solid var(--color-primary, #8FBC8F);
	font-size: 1.1em;		font-size: 1.1em;
	font-weight: bold;		font-weight: bold;
	color: #2E6B45;		color: var(--color-primary-deep, #2E6B45);
	}		}

第43行：		第52行：
	content: "◆";		content: "◆";
	margin-right: 6px;		margin-right: 6px;
	color: #8FBC8F;		color: var(--color-primary, #8FBC8F);
	font-size: .75em;		font-size: .75em;
	}		}

	.display-card-body {		.display-card-body {
	color: #~~333~~;		color: var(--color-text, #333333);
	font-size: .95em;		font-size: .95em;
	line-height: 1.6;		line-height: 1.6;
第71行：		第80行：
	/* 强调样式 */		/* 强调样式 */
	.display-card-accent {		.display-card-accent {
	background: linear-gradient(180deg, #FFF8EF, #FDF2E3);		background: linear-gradient(180deg, var(--color-accent-bg, #FFF8EF), var(--color-accent-bg-soft, #FDF2E3));
	border-color: #E8CFA8;		border: 1px solid var(--color-accent-border, #E8CFA8);
	}		}

	.display-card-accent::before {		.display-card-accent::before {
	background: linear-gradient(90deg, #E8B96A, #F3D9AE);		background: linear-gradient(90deg, var(--color-accent, #E8B96A), var(--color-accent-light, #F3D9AE));
	}		}

	.display-card-accent .display-card-head {		.display-card-accent .display-card-head {
	border-bottom-color: #E8B96A;		border-bottom-color: var(--color-accent, #E8B96A);
	color: #8A5A1E;		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-08-25T10:57:51Z

"新增展示卡片模板与样式，首页子模板统一使用"

新页面

/* ===== 展示卡片（Template:展示卡片/styles.css）===== */
.display-card {
position: relative;
box-sizing: border-box;
height: 100%;
margin: 5px;
padding: 12px 14px;
border: 1px solid #D4E8C0;
border-radius: 8px;
background: linear-gradient(180deg, #F9FCF4, #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, #8FBC8F, #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 #8FBC8F;
font-size: 1.1em;
font-weight: bold;
color: #2E6B45;
}

.display-card-head::before {
content: "◆";
margin-right: 6px;
color: #8FBC8F;
font-size: .75em;
}

.display-card-body {
color: #333;
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, #FFF8EF, #FDF2E3);
border-color: #E8CFA8;
}

.display-card-accent::before {
background: linear-gradient(90deg, #E8B96A, #F3D9AE);
}

.display-card-accent .display-card-head {
border-bottom-color: #E8B96A;
color: #8A5A1E;
}

Template:展示卡片/styles.css - 版本历史

DoubleCircle：​"移除展示卡片「跟随系统」暗色块"

DoubleCircle：​"展示卡片样式接入 common.css 变量并支持暗色模式"

DoubleCircle：​"新增展示卡片模板与样式，首页子模板统一使用"

DoubleCircle："移除展示卡片「跟随系统」暗色块"

DoubleCircle："展示卡片样式接入 common.css 变量并支持暗色模式"

DoubleCircle："新增展示卡片模板与样式，首页子模板统一使用"