MediaWiki:Common.css - 版本历史

2026年8月27日 (四) 15:19 Lyx

2026-08-27T15:19:51Z

@@ 第1,453行： / 第1,453行： @@
 /* 修复代码块白底 */
 .mw-card-code-block {
      white-space: pre-wrap;
      word-break: break-all;

2026年8月27日 (四) 15:07 Lyx

2026-08-27T15:07:33Z

@@ 第1,477行： / 第1,477行： @@
          align-self: flex-end;
+     }
+}

2026年8月27日 (四) 15:05 Lyx

2026-08-27T15:05:26Z

←上一版本		2026年8月27日 (四) 23:05的版本
第1,495行：		第1,495行：

	/* ============================================================		/* ============================================================
	~~🔧 紧急修复：~~<pre>~~标签内容显示~~		🚀 最终修复：<pre>标签内容强制显示（2026-08-27）
	============================================================ */		============================================================ */

	/* ~~确保pre内所有文本为白色/浅灰色~~ */		/* 1. 修复pre内所有文字颜色 */
	pre,		pre,
	pre *,		pre *,
第1,507行：		第1,507行：
	pre code,		pre code,
	.mw-code code,		.mw-code code,
	pre span,		pre span:not([class*="hljs"]),
	.mw-code span {		.mw-code span:not([class*="hljs"]) {
	color: #e6edf3 !important;		color: #e6edf3 !important;
			background-color: transparent !important;
			}

			/* 2. 保留语法高亮插件的颜色（如果有） */
			pre .hljs-keyword,
			.mw-code .hljs-keyword { color: #ff7b72 !important; }

			pre .hljs-string,
			.mw-code .hljs-string { color: #a5d6ff !important; }

			pre .hljs-comment,
			.mw-code .hljs-comment { color: #8b949e !important; font-style: italic; }

			pre .hljs-function,
			.mw-code .hljs-function { color: #d2a8ff !important; }

			pre .hljs-number,
			.mw-code .hljs-number { color: #d2a8ff !important; }

			/* 3. 强制白色背景（如果pre背景被其他规则覆盖） */
			pre,
			.mw-code,
			.mw-json,
			.mw-highlight,
			.hljs,
			.plainlinks pre,
			.mw-card-code-block {
			background-color: #0d1117 !important;
			color: #e6edf3 !important;
			border: 1px solid #30363d !important;
			}

			/* 4. 修正card样式中的代码块 */
			.mw-card-code-block,
			.mw-card-code-block * {
	background-color: #0d1117 !important;		background-color: #0d1117 !important;
			color: #e6edf3 !important;
	}		}

	/* ~~保留语法高亮插件的颜色（如果使用）~~ */		/* 5. 确保pre内的链接是蓝色（而非金色） */
	pre ~~.hljs-keyword { color: #ff7b72 !important; }~~		pre a,
	pre ~~.hljs-string { color~~: ~~#a5d6ff !important; }~~		pre a:visited,
	~~pre~~ .~~hljs~~-~~comment { color: #8b949e !important; font-style: italic; }~~		.mw-code a,
	~~pre~~ .~~hljs~~-~~function~~ { ~~color: #d2a8ff !important; }~~		.mw-code a:visited {
	~~pre .hljs-number {~~ color: #~~d2a8ff~~ !important; }		color: #58a6ff !important;
	~~pre .hljs-operator { color: #ff7b72 !important;~~ }		}

	~~/* 强制pre内的文字不继承其他奇怪颜色 */~~		pre a:hover,
	pre *:~~not(.hljs-keyword):not(.hljs-string):not(.hljs-comment):not(.hljs-function):not(~~.~~hljs~~-~~number)~~:~~not(.hljs-operator)~~ {		.mw-code a:hover {
	color: #~~e6edf3~~ !important;		color: #79c0ff !important;
	}		}

2026年8月27日 (四) 15:05 Lyx

2026-08-27T15:05:00Z

@@ 第1,477行： / 第1,477行： @@
          align-self: flex-end;
+     }
+}

2026年8月27日 (四) 14:44 Lyx

2026-08-27T14:44:53Z

←上一版本		2026年8月27日 (四) 22:44的版本
第1,356行：		第1,356行：
	.mw-card-box {		.mw-card-box {
	width: 100% !important;		width: 100% !important;
	background-color: ~~#161b22~~ !important; /* ~~改为真正的容器背景色~~ */		background-color: transparent !important; /* 去掉原来的浅灰背景，直接透出深色底 */
	border: 1px solid #~~30363d !important~~; /* ~~恢复外边框，防止被全局代码吞掉~~ */		border: 1px solid #444; /* 边框改为深灰色，更契合暗黑主题 */
			padding: 0;
	border-spacing: 0;		border-spacing: 0;
	border-collapse: collapse;		border-collapse: collapse;
第1,363行：		第1,364行：
	overflow: hidden;		overflow: hidden;
	border-radius: 8px;		border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);		box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 阴影加深 */
	}		}

	.mw-card-header {		.mw-card-header {
	background-color: #1a1a1a ~~!important~~;		background-color: #1a1a1a; /* 深黑背景 */
	color: var(--theme-color, #0077FF) ~~!important~~;		color: var(--theme-color, #0077FF); /* 标题文字使用主题色 */
	font-weight: bold;		font-weight: bold;
	padding: 12px 18px;		padding: 12px 18px;
	text-align: left;		text-align: left;
	border-bottom: 3px solid var(--theme-color, #0077FF) ~~!important~~;		border-bottom: 3px solid var(--theme-color, #0077FF);
	font-size: 1.2em;		font-size: 1.2em;
	}		}
第1,378行：		第1,379行：
	.mw-card-body {		.mw-card-body {
	padding: 15px 18px;		padding: 15px 18px;
	color: #ddd ~~!important~~;		color: #ddd; /* 文字改为浅色，配合暗黑主题 */
	}		}

第1,399行：		第1,400行：
	.mw-card-icon-box {		.mw-card-icon-box {
	flex: 0 0 auto;		flex: 0 0 auto;
	background-color: var(--theme-color, #0077FF) ~~!important~~;		background-color: var(--theme-color, #0077FF);
	padding: 4px 8px;		padding: 4px 8px;
	border-radius: 3px;		border-radius: 3px;
第1,408行：		第1,409行：
	.mw-card-divider {		.mw-card-divider {
	padding: 0;		padding: 0;
	border-bottom: 1px solid #~~30363d !important~~;		border-bottom: 1px solid #333; /* 暗色分割线 */
	}		}

			/* 核心修复：图片区 */
	.mw-card-image-frame {		.mw-card-image-frame {
	text-align: center;		text-align: center;
	padding: 15px;		padding: 15px;
	background-color: transparent !important;		background-color: transparent !important; /* 去掉白色背景！ */
	border: ~~1px solid #30363d !important~~; /* ~~恢复图片框的边框~~ */		border: none; /* 去掉边框 */
	margin: 0;		margin: 0;
	}		}
第1,428行：		第1,430行：

	.mw-card-caption {		.mw-card-caption {
	color: #888;		color: #888; /* 图片说明文字颜色调暗 */
	margin-top: 6px;		margin-top: 6px;
	display: block;		display: block;
第1,436行：		第1,438行：
	padding: 15px 18px;		padding: 15px 18px;
	line-height: 1.8;		line-height: 1.8;
	color: #~~e6edf3 !important~~; /* ~~恢复正常正文颜色，免受全局CSS影响~~ */		color: #ccc; /* 文字颜色 */
	}		}

第1,445行：		第1,447行：
	.mw-card-code-divider {		.mw-card-code-divider {
	padding: 0;		padding: 0;
	border-bottom: 1px solid #~~30363d !important~~;		border-bottom: 1px solid #333;
	margin-bottom: 15px;		margin-bottom: 15px;
	}		}

	/* ~~修复代码块样式：强制黑底和边框，防止被全局覆盖~~ */		/* 修复代码块白底 */
	.mw-card-code-block {		.mw-card-code-block {
	white-space: pre-wrap;		white-space: pre-wrap;
第1,456行：		第1,458行：
	max-width: 100%;		max-width: 100%;
	box-sizing: border-box;		box-sizing: border-box;
	background-color: #~~0d1117~~ !important;		background-color: #1e1e1e !important; /* 暗黑代码背景 */
	border: 1px solid #~~30363d~~ !important;		border: 1px solid #444 !important;
	color: #~~e6edf3 !important~~;		color: #a9b7c6; /* 代码文字颜色 */
	~~padding: 20px;~~		padding: 10px;
	~~border-radius: 6px;~~
	}

	/* ~~修复代码块中可能出现的乱码链接颜色~~ */
	~~.mw-card-code-block * {~~
	~~color~~: ~~#e6edf3 !important;~~
	~~text-decoration: none !important;~~
	~~text-shadow: none !important~~;
	}		}

2026年8月27日 (四) 14:44 Lyx

2026-08-27T14:44:24Z

←上一版本		2026年8月27日 (四) 22:44的版本
第1,356行：		第1,356行：
	.mw-card-box {		.mw-card-box {
	width: 100% !important;		width: 100% !important;
	background-color: ~~transparent~~ !important; /* ~~去掉原来的浅灰背景，直接透出深色底~~ */		background-color: #161b22 !important; /* 改为真正的容器背景色 */
	border: 1px solid #~~444~~; /* ~~边框改为深灰色，更契合暗黑主题~~ */		border: 1px solid #30363d !important; /* 恢复外边框，防止被全局代码吞掉 */
	~~padding: 0;~~
	border-spacing: 0;		border-spacing: 0;
	border-collapse: collapse;		border-collapse: collapse;
第1,364行：		第1,363行：
	overflow: hidden;		overflow: hidden;
	border-radius: 8px;		border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3); ~~/* 阴影加深 */~~		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	}		}

	.mw-card-header {		.mw-card-header {
	background-color: #1a1a1a; ~~/* 深黑背景 */~~		background-color: #1a1a1a !important;
	color: var(--theme-color, #0077FF); ~~/* 标题文字使用主题色 */~~		color: var(--theme-color, #0077FF) !important;
	font-weight: bold;		font-weight: bold;
	padding: 12px 18px;		padding: 12px 18px;
	text-align: left;		text-align: left;
	border-bottom: 3px solid var(--theme-color, #0077FF);		border-bottom: 3px solid var(--theme-color, #0077FF) !important;
	font-size: 1.2em;		font-size: 1.2em;
	}		}
第1,379行：		第1,378行：
	.mw-card-body {		.mw-card-body {
	padding: 15px 18px;		padding: 15px 18px;
	color: #ddd; ~~/* 文字改为浅色，配合暗黑主题 */~~		color: #ddd !important;
	}		}

第1,400行：		第1,399行：
	.mw-card-icon-box {		.mw-card-icon-box {
	flex: 0 0 auto;		flex: 0 0 auto;
	background-color: var(--theme-color, #0077FF);		background-color: var(--theme-color, #0077FF) !important;
	padding: 4px 8px;		padding: 4px 8px;
	border-radius: 3px;		border-radius: 3px;
第1,409行：		第1,408行：
	.mw-card-divider {		.mw-card-divider {
	padding: 0;		padding: 0;
	border-bottom: 1px solid #~~333~~; ~~/* 暗色分割线 */~~		border-bottom: 1px solid #30363d !important;
	}		}

	~~/* 核心修复：图片区 */~~
	.mw-card-image-frame {		.mw-card-image-frame {
	text-align: center;		text-align: center;
	padding: 15px;		padding: 15px;
	background-color: transparent !important; ~~/* 去掉白色背景！ */~~		background-color: transparent !important;
	border: ~~none~~; /* ~~去掉边框~~ */		border: 1px solid #30363d !important; /* 恢复图片框的边框 */
	margin: 0;		margin: 0;
	}		}
第1,430行：		第1,428行：

	.mw-card-caption {		.mw-card-caption {
	color: #888; ~~/* 图片说明文字颜色调暗 */~~		color: #888;
	margin-top: 6px;		margin-top: 6px;
	display: block;		display: block;
第1,438行：		第1,436行：
	padding: 15px 18px;		padding: 15px 18px;
	line-height: 1.8;		line-height: 1.8;
	color: #~~ccc~~; /* ~~文字颜色~~ */		color: #e6edf3 !important; /* 恢复正常正文颜色，免受全局CSS影响 */
	}		}

第1,447行：		第1,445行：
	.mw-card-code-divider {		.mw-card-code-divider {
	padding: 0;		padding: 0;
	border-bottom: 1px solid #~~333~~;		border-bottom: 1px solid #30363d !important;
	margin-bottom: 15px;		margin-bottom: 15px;
	}		}

	/* ~~修复代码块白底~~ */		/* 修复代码块样式：强制黑底和边框，防止被全局覆盖 */
	.mw-card-code-block {		.mw-card-code-block {
	white-space: pre-wrap;		white-space: pre-wrap;
第1,458行：		第1,456行：
	max-width: 100%;		max-width: 100%;
	box-sizing: border-box;		box-sizing: border-box;
	background-color: #~~1e1e1e~~ !important; ~~/* 暗黑代码背景 */~~		background-color: #0d1117 !important;
	border: 1px solid #~~444~~ !important;		border: 1px solid #30363d !important;
	color: #~~a9b7c6~~; /* ~~代码文字颜色~~ */		color: #e6edf3 !important;
	~~padding~~: ~~10px~~;		padding: 20px;
			border-radius: 6px;
			}

			/* 修复代码块中可能出现的乱码链接颜色 */
			.mw-card-code-block * {
			color: #e6edf3 !important;
			text-decoration: none !important;
			text-shadow: none !important;
	}		}

2026年8月27日 (四) 14:04 Lyx

2026-08-27T14:04:46Z

@@ 第1,477行： / 第1,477行： @@
          align-self: flex-end;
+     }
+}

2026年8月27日 (四) 14:04 Lyx

2026-08-27T14:04:27Z

@@ 第1,477行： / 第1,477行： @@
          align-self: flex-end;
+     }
+}

2026年8月27日 (四) 13:57 Lyx

2026-08-27T13:57:03Z

显示更改

2026年8月27日 (四) 13:51 Lyx

2026-08-27T13:51:14Z

←上一版本		2026年8月27日 (四) 21:51的版本
第1,354行：		第1,354行：
	/* --- 通用信息卡片样式 (基于 CSS 变量) --- */		/* --- 通用信息卡片样式 (基于 CSS 变量) --- */

	/* 1. 卡片外层容器 */		/* 1. 卡片外层容器 (修复手机端溢出核心：锁定表格宽度和布局) */
	.mw-card-box {		.mw-card-box {
	width: 100%;		width: 100% !important;
	background-color: #f8f9fa;		background-color: var(--theme-bg, #f8f9fa); /* 改为跟随变量，修复白底突兀的问题 */
	border: 1px solid #a2a9b1;		border: 1px solid #a2a9b1;
	padding: 0;		padding: 0;
	border-spacing: 0;		border-spacing: 0;
			border-collapse: collapse; /* 防止双边框 */
			table-layout: fixed; /* 强制表格在移动端不超出屏幕 */
			overflow: hidden;
			border-radius: 8px; /* 增加圆角使卡片更好看 */
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}		}

第1,379行：		第1,384行：
	}		}

	/* 4. 数据区内部弹性布局 */		/* 4. 数据区内部弹性布局 (修复小屏溢出) */
	.mw-card-flex {		.mw-card-flex {
	display: flex;		display: flex;
	justify-content: space-between;		justify-content: space-between;
	align-items: flex-start;		align-items: flex-start;
	flex-wrap: wrap;		flex-wrap: wrap; /* 允许小屏幕时内容换行 */
	gap: 15px 30px;		gap: 15px 30px;
			box-sizing: border-box;
	}		}

第1,392行：		第1,398行：
	line-height: 1.7;		line-height: 1.7;
	min-width: 120px;		min-width: 120px;
			word-break: break-word; /* 防止长文本撑破 */
	}		}

第1,419行：		第1,426行：
	}		}

			/* 修复手机端图片撑爆 */
	.mw-card-image-frame img {		.mw-card-image-frame img {
	max-width: 100%;		max-width: 100% !important;
	height: auto;		height: auto !important;
			display: block;
			margin: 0 auto;
	}		}

第1,445行：		第1,455行：
	border-bottom: 1px solid #eaecf0;		border-bottom: 1px solid #eaecf0;
	margin-bottom: 15px;		margin-bottom: 15px;
			}

			/* === 新增：修复移动端具体问题 === */
			@media screen and (max-width: 800px) {
			.mw-card-header {
			padding: 10px 12px;
			font-size: 1.1em;
			}
			.mw-card-flex {
			flex-direction: column; /* 手机上强制改为单列 */
			gap: 10px;
			}
			.mw-card-icon-box {
			align-self: flex-end; /* 图标靠右，避免占据整行 */
			}
			}

			/* 修复 code 块在移动端溢出 */
			.mw-card-code-block {
			white-space: pre-wrap; /* 允许代码换行 */
			word-break: break-all; /* 强制在单词/字符边界断行 */
			overflow-x: auto; /* 保留横向滚动作为兜底 */
			max-width: 100%;
			box-sizing: border-box;
	}		}