模板:卡片/Cards.css - 版本历史

2025年7月26日 (六) 15:53 目白光明Mejiro Bright

2025-07-26T15:53:58Z

←上一版本		2025年7月26日 (六) 23:53的版本
第153行：		第153行：

	/* ======================		/* ======================
	~~暗色模式适配样式~~		暗色模式适配样式（修改为 skin-citizen-dark 触发）
	====================== */		====================== */
	~~@media (prefers~~-~~color~~-~~scheme:~~ dark~~) {~~		html.skin-citizen-dark .home-card {
	~~/* 卡片主体背景与边框 */~~		background: #1e1e2e; /* 深色背景 */
	.home-card {		border-color: #373747; /* 深色边框 */
	background: #1e1e2e; /* ~~深色背景（可根据需求调整）~~ */		box-shadow: 0 3px 6px rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.25); /* 深色环境增强阴影 */
	border-color: #373747; /* 深色边框 */		}
	}

	~~/* 标题区域背景 */~~		html.skin-citizen-dark .home-card:hover {
	.home-~~card__header~~ {		border-color: #4a90e2; /* 暗色模式下悬停边框色调整 */
	~~background: #2d2d3f; /* 标题栏深色背景 */~~		}
	border~~-bottom~~-color: #~~373747~~; /* ~~标题栏底部边框~~ */
	~~color: #e0e0f5; /* 标题文本色（浅色） */~~
	}

	/* ~~正文文本颜色~~ */		html.skin-citizen-dark .home-card__header {
	~~.home~~-~~card__text {~~		background: #2d2d3f; /* 标题栏深色背景 */
	color: #~~d0d0e0~~; /* ~~正文浅色文本，确保在深色背景上可读~~ */		border-bottom-color: #373747; /* 标题栏底部边框 */
	}		color: #e0e0f5; /* 标题文本色（浅色） */
			}

	~~/* 按钮样式优化（确保与深色背景对比） */~~		html.skin-citizen-dark .home-card__text {
	.~~home~~-~~link__button {~~		color: #d0d0e0; /* 正文浅色文本，确保在深色背景上可读 */
	~~background: #4a90e2; /* 稍亮的蓝色按钮，增强对比度 */~~		}
	}
	.home-~~link__button:hover~~ {
	~~background~~: #~~357abd~~; /* ~~悬停时加深~~ */
	}

	/* ~~按钮内链接样式（覆盖 MediaWiki 默认链接色）~~ */		html.skin-citizen-dark .home-link__button {
	.home-link__button a {		background: #4a90e2; /* 稍亮的蓝色按钮，增强对比度 */
	color: #ffffff !important; /* 白色文本，确保清晰 */		}
	}
			html.skin-citizen-dark .home-link__button:hover {
			background: #357abd; /* 悬停时加深 */
			}

			html.skin-citizen-dark .home-link__button a {
			color: #ffffff !important; /* 白色文本，确保清晰 */
	}		}

2025年7月26日 (六) 15:51 目白光明Mejiro Bright

2025-07-26T15:51:25Z

←上一版本		2025年7月26日 (六) 23:51的版本
第152行：		第152行：
	}		}

	/* ~~覆盖按钮内 MediaWiki 链接的默认样式~~ */		/* ======================
	~~.home~~-~~link__button a~~ {		暗色模式适配样式
	~~color: white !important;~~ /* ~~强制文本为白色，与按钮背景匹配~~ */		====================== */
	~~text~~-~~decoration~~: ~~none !important~~; /* ~~移除默认下划线~~ */		@media (prefers-color-scheme: dark) {
	~~display~~: ~~inline-block~~; /* ~~确保链接占据按钮完整区域（可选）~~ */		/* 卡片主体背景与边框 */
	}		.home-card {
			background: #1e1e2e; /* 深色背景（可根据需求调整） */
			border-color: #373747; /* 深色边框 */
			}

	/* ~~悬停时保持样式一致（可选）~~ */		/* 标题区域背景 */
	.home-link__button a:hover {		.home-card__header {
	~~color~~: ~~white !important~~;		background: #2d2d3f; /* 标题栏深色背景 */
	~~text~~-~~decoration~~: ~~none~~ !important;		border-bottom-color: #373747; /* 标题栏底部边框 */
			color: #e0e0f5; /* 标题文本色（浅色） */
			}

			/* 正文文本颜色 */
			.home-card__text {
			color: #d0d0e0; /* 正文浅色文本，确保在深色背景上可读 */
			}

			/* 按钮样式优化（确保与深色背景对比） */
			.home-link__button {
			background: #4a90e2; /* 稍亮的蓝色按钮，增强对比度 */
			}
			.home-link__button:hover {
			background: #357abd; /* 悬停时加深 */
			}

			/* 按钮内链接样式（覆盖 MediaWiki 默认链接色） */
			.home-link__button a {
			color: #ffffff !important; /* 白色文本，确保清晰 */
			}
	}		}

2025年7月26日 (六) 15:50 目白光明Mejiro Bright

2025-07-26T15:50:57Z

@@ 第137行： / 第137行： @@
 .home-link__button:hover {
    background: #2980b9;
+}

2025年7月26日 (六) 15:50 目白光明Mejiro Bright

2025-07-26T15:50:03Z

@@ 第137行： / 第137行： @@
 .home-link__button:hover {
    background: #2980b9;
+}

2025年7月26日 (六) 15:46 目白光明Mejiro Bright

2025-07-26T15:46:02Z

显示更改

目白光明Mejiro Bright：撤销目白光明Mejiro Bright（讨论）的修订版本1014

2025-07-25T15:57:45Z

撤销目白光明Mejiro Bright（讨论）的修订版本1014

显示更改

2025年7月25日 (五) 15:55 目白光明Mejiro Bright

2025-07-25T15:55:30Z

显示更改

2025年6月19日 (四) 12:18 目白光明Mejiro Bright

2025-06-19T12:18:03Z

←上一版本		2025年6月19日 (四) 20:18的版本
第51行：		第51行：
	.home-card {		.home-card {
	overflow: hidden; /* 溢出隐藏，配合圆角 */		overflow: hidden; /* 溢出隐藏，配合圆角 */
	background: ~~var(--color-surface-2)~~; /* 背景色 */		background: #f5f7fa; /* 背景色 */
	border: 1px solid ~~var(--border-color-base)~~; /* ~~基础边框~~ */		border: 1px solid #dee2e6; /* 边框色 */
	border-radius: 15px; /* 圆角边框 */		border-radius: 15px; /* 圆角边框 */
	box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575); /* 双层阴影 */		box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575); /* 双层阴影 */
第58行：		第58行：
	display: flex;		display: flex;
	flex-direction: column; /* 垂直布局 */		flex-direction: column; /* 垂直布局 */
			height: 100%; /* 确保卡片高度一致 */
	}		}

第63行：		第64行：
	.home-card:hover {		.home-card:hover {
	transform: translateY(-5px); /* 上移5px */		transform: translateY(-5px); /* 上移5px */
	border-color: ~~var(--color-primary)~~; /* 边框变主题色 */		border-color: #3498db; /* 边框变主题色 */
	box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 加深阴影 */		box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 加深阴影 */
	}		}
第74行：		第75行：
	margin: 0;		margin: 0;
	padding: 15px 20px; /* 内边距 */		padding: 15px 20px; /* 内边距 */
	background: ~~var(--color-surface-3)~~; /* 次级背景色 */		background: #e9ecef; /* 次级背景色 */
	border-bottom: 1px solid ~~var(--border-color-base)~~; /* 底部边框 */		border-bottom: 1px solid #dee2e6; /* 底部边框 */
	font-size: 1.2rem; /* 标题字号 */		font-size: 1.2rem; /* 标题字号 */
	font-weight: bold; /* 粗体 */		font-weight: bold; /* 粗体 */
第114行：		第115行：
	line-height: 1.6; /* 行高 */		line-height: 1.6; /* 行高 */
	flex-grow: 1; /* 自动填充剩余空间 */		flex-grow: 1; /* 自动填充剩余空间 */
			max-height: 76.8px; /* 3行文本高度（1.6163） */
			overflow: hidden; /* 超出隐藏 */
			position: relative; /* 为伪元素定位 */
			}

			/* 渐变遮罩（可选） */
			.home-card__text::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 30px;
			background: linear-gradient(to bottom, rgba(245,247,250,0) 0%, rgba(245,247,250,1) 100%);
			pointer-events: none; /* 允许点击穿透 */
	}		}

第129行：		第145行：
	display: inline-block;		display: inline-block;
	padding: 8px 16px; /* 内边距 */		padding: 8px 16px; /* 内边距 */
	background: ~~var(--color-primary)~~; /* 主题色背景 */		background: #3498db; /* 主题色背景 */
	color: white; /* 白色文字 */		color: white; /* 白色文字 */
	border-radius: 8px; /* 圆角 */		border-radius: 8px; /* 圆角 */
第139行：		第155行：
	/* 按钮悬停效果 */		/* 按钮悬停效果 */
	.home-link__button:hover {		.home-link__button:hover {
	background: ~~var(--color-primary--hover)~~; /* 深一级主题色 */		background: #2980b9; /* 深一级主题色 */
	}		}

2025年6月19日 (四) 12:09 目白光明Mejiro Bright

2025-06-19T12:09:56Z

@@ 第4行： / 第4行： @@
 .home-grid {
    display: grid;
-   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自适应列数，单卡最小300px */
+   grid-template-columns: repeat(3, minmax(300px, 1fr)); /* 默认三列 */
    gap: 20px; /* 卡片间距 */
    padding: 20px; /* 容器内边距 */
    box-sizing: border-box;
+}
@@ 第15行： / 第51行： @@
 .home-card {
    overflow: hidden; /* 溢出隐藏，配合圆角 */
-   background: var(--color-surface-2); /* 背景色（取自星际公民维基设计） */
+   background: var(--color-surface-2); /* 背景色 */
    border: 1px solid var(--border-color-base); /* 基础边框 */
-   border-radius: 15px; /* 15px圆角边框 */
+   border-radius: 15px; /* 圆角边框 */
    box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575); /* 双层阴影 */
-   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* 平滑过渡动画 */
+   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* 过渡动画 */
    display: flex;
    flex-direction: column; /* 垂直布局 */
@@ 第27行： / 第63行： @@
 .home-card:hover {
    transform: translateY(-5px); /* 上移5px */
-   border-color: var(--color-primary); /* 边框变为主题色 */
+   border-color: var(--color-primary); /* 边框变主题色 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 加深阴影 */
+}
@@ 第54行： / 第90行： @@
 .home-card .transport-image {
    position: absolute;
-   inset: 0; /* 等价于top/right/bottom/left:0 */
+   inset: 0; /* 全方向定位 */
    margin: 0;
    border-radius: 0; /* 图片区域无边角 */
@@ 第77行： / 第113行： @@
    padding: 15px 20px; /* 内边距 */
    line-height: 1.6; /* 行高 */
-   flex-grow: 1; /* 自动填充剩余空间，保证卡片高度一致 */
+   flex-grow: 1; /* 自动填充剩余空间 */
+}
@@ 第97行： / 第133行： @@
    border-radius: 8px; /* 圆角 */
    text-decoration: none; /* 移除下划线 */
-   transition: background 0.3s ease; /* 背景色过渡动画 */
+   transition: background 0.3s ease; /* 背景色过渡 */
    font-weight: 600; /* 半粗体 */
+}
@@ 第104行： / 第140行： @@
 .home-link__button:hover {
    background: var(--color-primary--hover); /* 深一级主题色 */
+}

2025年6月19日 (四) 12:07 目白光明Mejiro Bright

2025-06-19T12:07:52Z

@@ 第1行： / 第1行： @@
 /* ======================
-    基础布局与网格系统（默认三列）
+    基础布局与网格系统
     ====================== */
 .home-grid {
    display: grid;
-   grid-template-columns: repeat(3, minmax(300px, 1fr)); /* 默认三列 */
+   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自适应列数，单卡最小300px */
    gap: 20px; /* 卡片间距 */
    padding: 20px; /* 容器内边距 */
    box-sizing: border-box;
+}
@@ 第131行： / 第104行： @@
 .home-link__button:hover {
    background: var(--color-primary--hover); /* 深一级主题色 */
+}

模板:卡片/Cards.css - 版本历史

2025年7月26日 (六) 15:53 目白光明Mejiro Bright

2025年7月26日 (六) 15:51 目白光明Mejiro Bright

2025年7月26日 (六) 15:50 目白光明Mejiro Bright

2025年7月26日 (六) 15:50 目白光明Mejiro Bright

2025年7月26日 (六) 15:46 目白光明Mejiro Bright

目白光明Mejiro Bright：​撤销目白光明Mejiro Bright（讨论）的修订版本1014

2025年7月25日 (五) 15:55 目白光明Mejiro Bright

2025年6月19日 (四) 12:18 目白光明Mejiro Bright

2025年6月19日 (四) 12:09 目白光明Mejiro Bright

2025年6月19日 (四) 12:07 目白光明Mejiro Bright

目白光明Mejiro Bright：撤销目白光明Mejiro Bright（讨论）的修订版本1014