MediaWiki:Citizen.css - 版本历史

泡泡：回退首页布局至原始grid

2026-05-14T15:24:53Z

回退首页布局至原始grid

←上一版本		2026年5月14日 (四) 23:24的版本
第242行：		第242行：
	.mp-inline-sections {		.mp-inline-sections {
	grid-template-columns: 2fr 1fr;		grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr;		grid-template-rows: auto 1fr;
	grid-template-areas: "left right~~-all~~";		grid-template-areas: "left site" "left right";
	}		}
	}		}

	~~/* 右栏合并为单列flex */~~
	~~.mp-right-all {~~
	~~display: flex;~~
	~~flex-direction: column;~~
	~~gap: 6px;~~
	}
	~~.mp-right-all > .mp-section-site,~~
	~~.mp-right-all > .mp-right {~~
	~~display: flex;~~
	~~flex-direction: column;~~
	~~gap: 6px;~~
	}
	~~.mp-right-all > .mp-right > :last-child { flex: 1; }~~

	.mp-left, .mp-right {		.mp-left, .mp-right {

泡泡：首页布局重构：右栏合并为单列flex，解决动态高度对齐问题

2026-05-14T15:19:46Z

首页布局重构：右栏合并为单列flex，解决动态高度对齐问题

←上一版本		2026年5月14日 (四) 23:19的版本
第242行：		第242行：
	.mp-inline-sections {		.mp-inline-sections {
	grid-template-columns: 2fr 1fr;		grid-template-columns: 2fr 1fr;
	grid-template-rows: ~~auto~~ 1fr;		grid-template-rows: 1fr;
	grid-template-areas: ~~"left site"~~ "left right";		grid-template-areas: "left right-all";
	}		}
	}		}

			/* 右栏合并为单列flex */
			.mp-right-all {
			display: flex;
			flex-direction: column;
			gap: 6px;
			}
			.mp-right-all > .mp-section-site,
			.mp-right-all > .mp-right {
			display: flex;
			flex-direction: column;
			gap: 6px;
			}
			.mp-right-all > .mp-right > :last-child { flex: 1; }

	.mp-left, .mp-right {		.mp-left, .mp-right {
	display: flex;		display: flex;

泡泡：mp-left/right加align-self:stretch + last-child display:flex

2026-05-14T15:09:56Z

mp-left/right加align-self:stretch + last-child display:flex

←上一版本		2026年5月14日 (四) 23:09的版本
第250行：		第250行：
	flex-direction: column;		flex-direction: column;
	gap: 6px;		gap: 6px;
			align-self: stretch;
	}		}

	.mp-left > :last-child,		.mp-left > :last-child,
	.mp-right > :last-child { flex: 1; }		.mp-right > :last-child {
			flex: 1;
			min-height: 0;
			display: flex;
			flex-direction: column;
			}

泡泡：回退min-height:100%，保持flex:1即可

2026-05-14T15:08:06Z

回退min-height:100%，保持flex:1即可

←上一版本		2026年5月14日 (四) 23:08的版本
第250行：		第250行：
	flex-direction: column;		flex-direction: column;
	gap: 6px;		gap: 6px;
	~~min-height: 100%;~~
	}		}

	~~/* 左右栏末位自动撑满 */~~
	.mp-left > :last-child,		.mp-left > :last-child,
	.mp-right > :last-child {		.mp-right > :last-child { flex: 1; }
	flex: 1;
	~~min-height: 0;~~
	}

泡泡：修复左右栏对齐：flex容器min-height:100%，末位子元素统一flex:1

2026-05-14T15:06:16Z

修复左右栏对齐：flex容器min-height:100%，末位子元素统一flex:1

←上一版本		2026年5月14日 (四) 23:06的版本
第250行：		第250行：
	flex-direction: column;		flex-direction: column;
	gap: 6px;		gap: 6px;
			min-height: 100%;
	}		}
	~~.mp-right > :last-child { flex: 1; }~~

	/* ~~左栏末位自动撑满~~ */		/* 左右栏末位自动撑满 */
	.mp-left > :last-child {		.mp-left > :last-child,
			.mp-right > :last-child {
	flex: 1;		flex: 1;
			min-height: 0;
	}		}

泡泡：左栏公告区域自动延伸到底，与右栏对齐

2026-05-14T15:00:38Z

左栏公告区域自动延伸到底，与右栏对齐

←上一版本		2026年5月14日 (四) 23:00的版本
第252行：		第252行：
	}		}
	.mp-right > :last-child { flex: 1; }		.mp-right > :last-child { flex: 1; }

			/* 左栏末位自动撑满 */
			.mp-left > :last-child {
			flex: 1;
			}


	/* 粘性侧边栏 */		/* 粘性侧边栏 */

泡泡：回滚圆角至0px，保留浅绿背景+细边框+柔和阴影

2026-05-13T20:04:35Z

回滚圆角至0px，保留浅绿背景+细边框+柔和阴影

←上一版本		2026年5月14日 (四) 04:04的版本
第32行：		第32行：


	/* 圆角 —— ~~微圆角融合~~ */		/* 圆角 —— 全部强制为 0 */
	--border-radius-base: ~~3px~~;		--border-radius-base: 0px;
	--border-radius-medium: ~~4px~~;		--border-radius-medium: 0px;
	--border-radius-large: ~~6px~~;		--border-radius-large: 0px;
	--border-radius-pill: ~~9999px~~;		--border-radius-pill: 0px;

	/* 字体大小 */		/* 字体大小 */
第83行：		第83行：
	border: 1.5px solid #C8DDD5;		border: 1.5px solid #C8DDD5;
	color: var(--color-base);		color: var(--color-base);
	~~border-radius: 3px;~~
	}		}

第93行：		第93行：
	background-color: #ffffff;		background-color: #ffffff;
	border: 1.5px solid #C8DDD5;		border: 1.5px solid #C8DDD5;
	border-radius: ~~4px~~;		border-radius: 0px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);		box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	padding: 1rem;		padding: 1rem;
第112行：		第112行：
	}		}

	/* ~~统一微圆角~~ */		/* 强制所有元素无圆角 */
	* {		* {
	border-radius: ~~3px~~;		border-radius: 0px !important;
	}		}

第123行：		第123行：
	background-color: #ffffff;		background-color: #ffffff;
	border: 1.5px solid #C8DDD5;		border: 1.5px solid #C8DDD5;
	~~border-radius: 3px;~~
	}		}
	.wikitable th {		.wikitable th {
第148行：		第148行：
	text-align: center;		text-align: center;
	margin-bottom: 2rem;		margin-bottom: 2rem;
	~~border-radius: 4px;~~
	}		}

第164行：		第163行：
	margin: 8px 0;		margin: 8px 0;
	position: relative;		position: relative;
	~~border-radius: 4px;~~
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);		box-shadow: 0 1px 3px rgba(0,0,0,0.03);
	}		}

泡泡：融合清新现代风：微圆角+浅绿背景+细边框+柔和阴影，保留MC硬边感

2026-05-13T19:56:53Z

融合清新现代风：微圆角+浅绿背景+细边框+柔和阴影，保留MC硬边感

←上一版本		2026年5月14日 (四) 03:56的版本
第32行：		第32行：


	/* 圆角 —— ~~全部强制为 0~~ */		/* 圆角 —— 微圆角融合 */
	--border-radius-base: ~~0px~~;		--border-radius-base: 3px;
	--border-radius-medium: ~~0px~~;		--border-radius-medium: 4px;
	--border-radius-large: ~~0px~~;		--border-radius-large: 6px;
	--border-radius-pill: ~~0px~~;		--border-radius-pill: 9999px;

	/* 字体大小 */		/* 字体大小 */
第54行：		第54行：
	--------------------------------------------- */		--------------------------------------------- */
	body {		body {
	background-color: ~~var(--background-color-base)~~;		background-color: #F4FCF9;
	color: var(--color-base);		color: var(--color-base);
	font-family: 'Inter', 'HarmonyOS Sans SC', '思源黑体', system-ui, sans-serif;		font-family: 'Inter', 'HarmonyOS Sans SC', '思源黑体', system-ui, sans-serif;

	~~background-color: #faf5ed;~~
	~~/* 使用 SVG 滤镜 */~~
	~~filter: url(#paper-fiber-filter);~~
	~~/* 增强：叠加微妙的渐变模拟光照 */~~
	~~background-image:~~
	~~radial-gradient(ellipse at 35% 25%,~~
	~~rgba(255, 255, 255, 0.35) 0%,~~
	~~transparent 55%),~~
	~~radial-gradient(ellipse at 65% 70%,~~
	~~rgba(180, 160, 130, 0.12) 0%,~~
	~~transparent 50%);~~

	}		}

第94行：		第81行：
	.citizen-search-box input {		.citizen-search-box input {
	background-color: #ffffff;		background-color: #ffffff;
	border: ~~2px~~ solid ~~var(--border-color-base)~~;		border: 1.5px solid #C8DDD5;
	color: var(--color-base);		color: var(--color-base);
	border-radius: ~~0px~~;		border-radius: 3px;
	}		}

第103行：		第90行：
	--------------------------------------------- */		--------------------------------------------- */
	.citizen-body-container .card,		.citizen-body-container .card,
	.mw-body-content > div:not(.no-card),		.mw-body-content > div:not(.no-card) {
	~~.block-border~~ {
	background-color: #ffffff;		background-color: #ffffff;
	border: ~~2px~~ solid ~~var(--border-color-subtle)~~;		border: 1.5px solid #C8DDD5;
	border-radius: ~~0px~~;		border-radius: 4px;
	box-shadow: ~~var~~(~~--box-shadow-card~~);		box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	padding: 1rem;		padding: 1rem;
	margin-bottom: 1.5rem;		margin-bottom: 1.5rem;
	transition: transform 0.~~1s ease~~, box-shadow 0.~~1s ease~~;		transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
	}		}

第126行：		第112行：
	}		}

	/* ~~强制所有元素无圆角~~ */		/* 统一微圆角 */
	* {		* {
	border-radius: ~~0px !important~~;		border-radius: 3px;
	}		}

第136行：		第122行：
	.wikitable {		.wikitable {
	background-color: #ffffff;		background-color: #ffffff;
	border: ~~2px~~ solid ~~var(--border-color-base)~~;		border: 1.5px solid #C8DDD5;
	border-radius: ~~0px~~;		border-radius: 3px;
	}		}
	.wikitable th {		.wikitable th {
第157行：		第143行：
	--------------------------------------------- */		--------------------------------------------- */
	.home-hero {		.home-hero {
	background: linear-gradient(135deg, ~~var(--background-color-neutral-subtle)~~ 0%, ~~var(--background-color-progressive-subtle)~~ 100%);		background: linear-gradient(135deg, #EBF7F3 0%, #E6FAF3 100%);
	border: ~~2px~~ solid ~~var(--border-color-base)~~;		border: 1.5px solid #C8DDD5;
	padding: 2rem;		padding: 2rem;
	text-align: center;		text-align: center;
	margin-bottom: 2rem;		margin-bottom: 2rem;
			border-radius: 4px;
	}		}

第172行：		第159行：
	/* 区块边框效果（游戏中的“边界”感） */		/* 区块边框效果（游戏中的“边界”感） */
	.mw-parser-output .block-border {		.mw-parser-output .block-border {
	border: ~~2px~~ solid ~~var(--border-color-interactive)~~;		border: 1.5px solid #C8DDD5;
	background-color: #ffffff;		background-color: #ffffff;
	padding: 8px;		padding: 8px;
	margin: 8px 0;		margin: 8px 0;
	position: relative;		position: relative;
			border-radius: 4px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.03);
	}		}

第277行：		第266行：
	/* ── 卡片（直角、内阴影浮雕感）── */		/* ── 卡片（直角、内阴影浮雕感）── */
	.mp-section {		.mp-section {
	border: ~~2px~~ solid #~~bbb~~;		border: 1.5px solid #C8DDD5;
	background-color: #fcfcfc;		background-color: #fcfcfc;
	box-shadow: ~~inset -~~2px ~~-2px #0000000f~~, ~~inset 2px 2px #ffffff0d~~;		box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,184,124,0.03);
	padding: 12px;		padding: 12px;
	}		}
第333行：		第322行：
	background-repeat: no-repeat;		background-repeat: no-repeat;
	background-color: #2a5a2a;		background-color: #2a5a2a;
	box-shadow: inset -~~4px~~ -~~4px~~ #~~0000003d~~, inset ~~4px 4px~~ #~~fff2~~;		box-shadow: inset -2px -2px #0000001a, inset 2px 2px #fff1;
	color: #fff !important;		color: #fff !important;
	font-size: small;		font-size: small;
第484行：		第473行：
	justify-content: center;		justify-content: center;
	background-color: #00000030;		background-color: #00000030;
	box-shadow: inset 0 ~~4px~~ #~~00000030~~, inset 0 -~~4px~~ #~~ffffff40~~;		box-shadow: inset 0 2px #00000015, inset 0 -2px #ffffff30;
	border: ~~2px~~ solid rgba(0,0,0,0.4);		border: 1.5px solid rgba(0,0,0,0.3);
	}		}
	.mp-icon-img a { padding: 12px; display: block; }		.mp-icon-img a { padding: 12px; display: block; }

泡泡：mp-icon按压动画改transform避免撑容器

2026-05-13T16:57:13Z

mp-icon按压动画改transform避免撑容器

←上一版本		2026年5月14日 (四) 00:57的版本
第494行：		第494行：
	object-fit: contain;		object-fit: contain;
	}		}
	.mp-icon:active .mp-icon-img { ~~padding-bottom~~: ~~6px~~; }		.mp-icon:active .mp-icon-img { transform: translateY(2px); }

	/* 响应式缩小 */		/* 响应式缩小 */

泡泡：按钮按压动画改用transform避免撑开容器高度

2026-05-13T16:54:44Z

按钮按压动画改用transform避免撑开容器高度

←上一版本		2026年5月14日 (四) 00:54的版本
第427行：		第427行：
	}		}
	body.mediawiki .mp-button:active > * {		body.mediawiki .mp-button:active > * {
	~~padding~~: ~~14px 10px 8px !important;~~		transform: translateY(1px);
	~~margin-top: -8px;~~
	~~height: calc~~(~~100% + 10px~~);
	}		}
	.mp-button:active {		.mp-button:active {
	~~margin-top~~: ~~6px~~;		transform: translateY(2px);
	}		}

MediaWiki:Citizen.css - 版本历史

泡泡：​回退首页布局至原始grid

泡泡：​首页布局重构：右栏合并为单列flex，解决动态高度对齐问题

泡泡：​mp-left/right加align-self:stretch + last-child display:flex

泡泡：​回退min-height:100%，保持flex:1即可

泡泡：​修复左右栏对齐：flex容器min-height:100%，末位子元素统一flex:1

泡泡：​左栏公告区域自动延伸到底，与右栏对齐

泡泡：​回滚圆角至0px，保留浅绿背景+细边框+柔和阴影

泡泡：​融合清新现代风：微圆角+浅绿背景+细边框+柔和阴影，保留MC硬边感

泡泡：​mp-icon按压动画改transform避免撑容器

泡泡：​按钮按压动画改用transform避免撑开容器高度