MediaWiki:Citizen.css：修订间差异

2026年8月19日 (三) 16:28的版本

/* ==========================================================================
   Kuke Wiki — Minecraft Wiki 风格主题
   直角 · 2px 硬边框 · inset 立体阴影 · 3D 按压 · 紧凑栅格
   ========================================================================== */

/* --- 1. 字体：无衬线为主，代码用等宽 -------------------------------------- */
:root {
	--font-family-citizen-base: 'Segoe UI', 'Helvetica Neue', Arial,
		'Noto Sans', sans-serif;
	--font-family-language-base: 'Microsoft YaHei UI', 'Microsoft YaHei',
		'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC';
	--font-family-citizen-serif: 'Georgia', 'Songti SC', serif;
	--font-family-citizen-monospace: 'Consolas', 'Cascadia Mono', 'DejaVu Sans Mono',
		monospace;
}

/* --- 2. 配色：草地绿主色 + 米白纸面 --------------------------------------- */
:root {
	/* #3a971e 草地绿 */
	--color-progressive-oklch__l: 57%;
	--color-progressive-oklch__c: 0.155;
	--color-progressive-oklch__h: 138;
	--color-progressive-hsl__h: 100;
	--color-progressive-hsl__s: 68%;
	--color-progressive-hsl__l: 36%;

	/* 表面：略带暖调的浅灰纸面，不是纯白 */
	--color-surface-0-oklch__l: 98.4%;
	--color-surface-0-oklch__c: 0.002;
	--color-surface-1-oklch__c: 0.003;
	--color-surface-2-oklch__c: 0.004;
	--color-surface-3-oklch__c: 0.005;
	--color-surface-4-oklch__c: 0.006;
	--delta-lightness-surface-base: -2%;

	/* 文字：接近纯黑，MC Wiki 的正文对比度很高 */
	--color-emphasized-oklch__l: 13%;
	--color-emphasized-oklch__c: 0.003;
	--color-base-oklch__l: 21%;
	--color-base-oklch__c: 0.003;
	--color-subtle-oklch__l: 45%;
	--color-subtle-oklch__c: 0.006;
	--color-placeholder-oklch__l: 55%;
	--color-placeholder-oklch__c: 0.006;

	/* 边框：MC 用看得见的实线，不是若隐若现的分隔线 */
	--border-color-base: #bbb;
	--border-color-subtle: #c8c8c8;
	--border-color-muted: #d8d8d8;

	--shadow-opacity: 0.12;
	--box-shadow-color-alpha-base: rgb( 0 0 0 / 0.12 );

	/* 主题私有令牌 */
	--mcw-border: #bbb;
	--mcw-section-bg: #fcfcfcb8;
	--mcw-inset: inset -2px -2px #0000000f, inset 2px 2px #ffffff0d;
	--mcw-green: #3a971e;
	--mcw-green-dark: #2b7315;
	--mcw-blue: #0b9bb8;
	--mcw-purple: #7d4fb3;
	--mcw-btn-border: rgb( 0 0 0 / 0.4 );
	--mcw-page-bg: #f4f2ee;
}

/* 暗色 */
.skin-theme-clientpref-night,
.skin-theme-clientpref-black {
	--color-progressive-oklch__l: 66%;
	--color-progressive-oklch__c: 0.16;
	--color-progressive-hsl__l: 46%;
	--color-surface-0-oklch__l: 17%;
	--color-surface-0-oklch__c: 0.004;
	--delta-lightness-surface-base: 3.5%;
	--color-emphasized-oklch__l: 95%;
	--color-emphasized-oklch__c: 0.002;
	--color-base-oklch__l: 86%;
	--color-base-oklch__c: 0.003;
	--color-subtle-oklch__l: 65%;
	--color-subtle-oklch__c: 0.006;
	--border-color-base: #202125;
	--border-color-subtle: #2a2b30;
	--border-color-muted: #33343a;
	--shadow-opacity: 0.55;
	--box-shadow-color-alpha-base: rgb( 0 0 0 / 0.55 );

	--mcw-border: #202125;
	--mcw-section-bg: #4c4e522e;
	--mcw-inset: inset -2px -2px #00000026, inset 2px 2px #ffffff0a;
	--mcw-green: #2eb06d;
	--mcw-green-dark: #1d7a4a;
	--mcw-blue: #0eb9a9;
	--mcw-purple: #9b6fd4;
	--mcw-page-bg: #1c1d21;
}

@media ( prefers-color-scheme: dark ) {
	.skin-theme-clientpref-os {
		--color-progressive-oklch__l: 66%;
		--color-progressive-oklch__c: 0.16;
		--color-progressive-hsl__l: 46%;
		--color-surface-0-oklch__l: 17%;
		--color-surface-0-oklch__c: 0.004;
		--delta-lightness-surface-base: 3.5%;
		--color-emphasized-oklch__l: 95%;
		--color-emphasized-oklch__c: 0.002;
		--color-base-oklch__l: 86%;
		--color-base-oklch__c: 0.003;
		--color-subtle-oklch__l: 65%;
		--color-subtle-oklch__c: 0.006;
		--border-color-base: #202125;
		--border-color-subtle: #2a2b30;
		--border-color-muted: #33343a;
		--shadow-opacity: 0.55;
		--box-shadow-color-alpha-base: rgb( 0 0 0 / 0.55 );

		--mcw-border: #202125;
		--mcw-section-bg: #4c4e522e;
		--mcw-inset: inset -2px -2px #00000026, inset 2px 2px #ffffff0a;
		--mcw-green: #2eb06d;
		--mcw-green-dark: #1d7a4a;
		--mcw-blue: #0eb9a9;
		--mcw-purple: #9b6fd4;
		--mcw-page-bg: #1c1d21;
	}
}

/* --- 3. 直角：把 Citizen 的圆角全部收掉 ----------------------------------- */
:root {
	--border-radius-base: 0;
	--border-radius-medium: 0;
	--border-radius-large: 0;
	--border-radius-pill: 0;
	--border-radius-sharp: 0;
	--backdrop-filter-frosted-glass: none;
	--transition-timing-function-ease: linear;
	--transition-timing-function-ease-out: linear;
}

/* --- 4. 顶栏：实色 + 硬分隔线 --------------------------------------------- */
.citizen-header {
	background-color: var( --color-surface-1 );
	border-inline-end: 2px solid var( --mcw-border );
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.citizen-drawer__card,
.citizen-menu__card,
.citizen-search__card,
.citizen-dropdown__content {
	border: 2px solid var( --mcw-border );
	border-radius: 0;
}

/* --- 5. 排版：粗体标题 + 下划线分隔 --------------------------------------- */
#firstHeading {
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
}

.mw-body h2 {
	font-weight: 700;
	font-size: 1.5em;
	letter-spacing: 0;
	border-bottom: 2px solid var( --mcw-border );
	padding-bottom: 0.2em;
}

.mw-body h3,
.mw-body h4 {
	font-weight: 700;
	letter-spacing: 0;
}

.mw-body p {
	line-height: 1.6;
}

/* --- 6. 链接：MC Wiki 保留下划线习惯，hover 才显 -------------------------- */
.mw-body-content a:not( .mw-ui-button ):not( .cdx-button ) {
	text-decoration: none;
}

.mw-body-content a:not( .mw-ui-button ):not( .cdx-button ):hover {
	text-decoration: underline;
}

/* --- 7. 按钮：3D 立体 + 按压下沉 ------------------------------------------ */
.mw-ui-button,
.cdx-button {
	border-radius: 0;
	border: 2px solid var( --mcw-btn-border );
	font-weight: 700;
	box-shadow: inset 2px 2px 0 0 rgb( 255 255 255 / 0.28 ),
		inset -2px -2px 0 0 rgb( 0 0 0 / 0.22 );
	transition: background-color 0.1s linear, box-shadow 0.1s linear;
}

.mw-ui-button:active,
.cdx-button:active {
	box-shadow: inset 2px 2px 0 0 rgb( 0 0 0 / 0.22 ),
		inset -2px -2px 0 0 rgb( 255 255 255 / 0.18 );
	transform: none;
}

/* --- 8. 搜索框：直角 + 硬边框 --------------------------------------------- */
.citizen-typeahead__input,
.citizen-search__input {
	border-radius: 0;
	border: 2px solid var( --mcw-border );
}

/* --- 9. 表格：MC Wiki 的 wikitable 是经典硬边框 --------------------------- */
.wikitable {
	border: 2px solid var( --mcw-border );
	border-radius: 0;
	border-collapse: collapse;
	background-color: var( --color-surface-1 );
}

.wikitable > * > tr > th {
	background-color: var( --color-surface-3 );
	border: 1px solid var( --mcw-border );
	font-weight: 700;
	padding: 0.4em 0.7em;
}

.wikitable > * > tr > td {
	border: 1px solid var( --mcw-border );
	padding: 0.4em 0.7em;
}

/* --- 10. 代码块 ----------------------------------------------------------- */
.mw-highlight pre,
pre {
	border: 2px solid var( --mcw-border );
	border-radius: 0;
	background-color: var( --color-surface-2 );
}

code {
	border: 1px solid var( --mcw-border );
	border-radius: 0;
	background-color: var( --color-surface-2 );
	padding: 0.1em 0.35em;
}

kbd {
	border: 2px solid var( --mcw-border );
	border-radius: 0;
	box-shadow: inset -2px -2px 0 0 rgb( 0 0 0 / 0.12 );
}

/* --- 11. 图片：直角 + 硬边框缩略图 ---------------------------------------- */
.mw-body-content img {
	border-radius: 0;
}

figure[ typeof~='mw:File/Thumb' ] {
	border: 2px solid var( --mcw-border );
	border-radius: 0;
	background-color: var( --color-surface-1 );
	padding: 4px;
}

/* --- 12. 滚动条：细窄方形 ------------------------------------------------- */
* {
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: rgb( 0 0 0 / 0.28 );
	border-radius: 0;
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgb( 0 0 0 / 0.42 );
}

/* --- 13. 焦点环 ----------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var( --color-progressive );
	outline-offset: 1px;
	border-radius: 0;
}


/* ==========================================================================
   14. 首页布局层 — Minecraft Wiki 风格
   直角 / 2px 硬边框 / inset 双向立体 / 6px 紧凑间距 / 草地绿
   ========================================================================== */

.page-首页 .mw-parser-output,
.page-Main_Page .mw-parser-output {
	max-width: none;
}

.mw-parser-output [class^="mp-"],
.mw-parser-output [class^="mp-"] *,
.mw-parser-output [class^="mp-"] *::before,
.mw-parser-output [class^="mp-"] *::after {
	box-sizing: border-box;
}

/* MediaWiki 会把连续的链接行包进 <p>，破坏 flex/grid，这里让它透明化 */
.mp-portals > p,
.mp-icons > p,
.mp-actions > p,
.mp-languages > p {
	display: contents;
	margin: 0;
}

.mp-layout > p:empty,
.mp-left > p:empty,
.mp-right > p:empty {
	display: none;
}

/* --- 顶部标签栏 ---------------------------------------------------------- */

.mp-portals {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 6px;
	padding: 0;
}

.mp-tab {
	display: inline-block;
	padding: 6px 14px;
	border: 2px solid var( --mcw-border );
	background-color: var( --mcw-section-bg );
	box-shadow: var( --mcw-inset );
	color: var( --color-base );
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	transition: background-color 0.1s linear, border-color 0.1s linear;
}

.mp-portals a {
	text-decoration: none;
}

.mp-portals a:hover .mp-tab {
	border-color: var( --mcw-green );
	background-color: var( --background-color-progressive-subtle );
}

.mp-tab--active {
	border-color: var( --mcw-green );
	background-color: var( --mcw-green );
	color: #fff;
}

.mp-portals a:hover .mp-tab--active {
	background-color: var( --mcw-green-dark );
	border-color: var( --mcw-green-dark );
	color: #fff;
}

/* --- 主栅格 -------------------------------------------------------------- */

.mp-layout {
	display: grid;
	gap: 6px;
	grid-template-columns: 1fr;
	grid-template-areas:
		"site"
		"left"
		"right";
}

.mp-left {
	grid-area: left;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mp-right {
	grid-area: right;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mp-site {
	grid-area: site;
	min-width: 0;
}

@media screen and ( min-width: 990px ) {
	.mp-layout {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"left site"
			"left right";
	}

	.mp-right > .mp-section:last-child {
		flex: 1;
	}
}

.mp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mp-row > .mp-section {
	flex: 1 1 260px;
	min-width: 0;
}

/* --- 区块卡片 ------------------------------------------------------------ */

.mp-section {
	display: flex;
	flex-direction: column;
	padding: 12px;
	border: 2px solid var( --mcw-border );
	background-color: var( --mcw-section-bg );
	box-shadow: var( --mcw-inset );
}

.mp-title {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	color: var( --color-emphasized );
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.3;
}

.mp-title__sub {
	display: block;
	margin-top: 2px;
	color: var( --color-subtle );
	font-size: 0.75em;
	font-weight: normal;
}

.mp-body {
	flex: 1;
	color: var( --color-base );
	font-size: 0.9375rem;
	line-height: 1.65;
}

.mp-body > p:first-child {
	margin-top: 0;
}

.mp-body > p:last-child {
	margin-bottom: 0;
}

.mp-body ul {
	margin: 0;
	padding-left: 1.25em;
}

.mp-body li {
	margin-bottom: 4px;
}

/* --- 横幅 ---------------------------------------------------------------- */

.mp-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mp-highlight {
	flex: 1 1 280px;
	min-width: 0;
	padding: 12px;
	border: 2px solid var( --mcw-btn-border );
	background-image: linear-gradient( to bottom, #81bb5b, #3a971e );
	box-shadow: inset 0 4px #ffffff2e, inset 0 -6px #0000002e;
	color: #fff;
}

.mp-highlight--alt {
	background-image: linear-gradient( to bottom, #50adff, #0b78b8 );
}

.mp-highlight__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.mp-highlight__title {
	font-size: 1.15em;
	font-weight: bold;
	text-shadow: 0 1px 0 rgb( 0 0 0 / 0.25 );
}

.mp-highlight__tag {
	padding: 1px 8px;
	border: 2px solid rgb( 255 255 255 / 0.45 );
	background-color: rgb( 0 0 0 / 0.18 );
	font-size: 0.75em;
	font-weight: bold;
	white-space: nowrap;
}

.mp-highlight__meta {
	font-size: 0.9375rem;
	line-height: 1.6;
	opacity: 0.95;
}

.mp-highlight a {
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- 图标网格 ------------------------------------------------------------ */

.mp-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: auto;
	--icon-base-width: 84px;
	--icon-max-width: 140px;
}

.mp-icons a {
	flex: 1 auto;
	width: var( --icon-base-width );
	max-width: var( --icon-max-width );
	text-decoration: none;
}

.mp-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
}

.mp-icon__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	max-height: 72px;
	border: 2px solid var( --mcw-btn-border );
	background-color: #00000030;
	box-shadow: inset 0 4px #00000030, inset 0 -4px #ffffff40;
	font-size: 1.75rem;
	line-height: 1;
	transition: background-color 0.1s linear;
}

.mp-icons a:hover .mp-icon__glyph {
	background-color: #ffffff26;
}

.mp-icon__label {
	flex: 1;
	color: var( --color-base );
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
}

.mp-icons a:hover .mp-icon__label {
	color: var( --mcw-green );
	text-decoration: underline;
}

@media screen and ( max-width: 640px ) {
	.mp-icons {
		--icon-base-width: 68px;
		--icon-max-width: 100px;
	}

	.mp-icon__glyph {
		font-size: 1.375rem;
	}
}

/* --- 按钮（MC 3D 按压） -------------------------------------------------- */

.mp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.mp-actions a {
	text-decoration: none;
}

.mp-button {
	position: relative;
	display: inline-block;
	padding: 8px 16px;
	border: 2px solid var( --mcw-btn-border );
	background-color: var( --mcw-green );
	color: #fff;
	font-size: 0.9375rem;
	font-weight: bold;
	line-height: 1.4;
	transition: background-color 0.1s linear, transform 0.1s linear;
}

.mp-button::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow:
		0 -6px 0 0 rgb( 104 104 104 ) inset,
		2px 2px 0 0 rgb( 178 178 178 / 0.5 ) inset,
		-2px -8px 0 0 rgb( 153 153 153 / 0.5 ) inset;
	mix-blend-mode: hard-light;
	pointer-events: none;
}

.mp-actions a:hover .mp-button::after {
	background-color: #ffffff1a;
}

.mp-actions a:active .mp-button {
	transform: translateY( 3px );
}

.mp-actions a:active .mp-button::after {
	box-shadow:
		2px 2px 0 0 rgb( 178 178 178 / 0.5 ) inset,
		-2px -2px 0 0 rgb( 153 153 153 / 0.5 ) inset;
	background-color: #0000001a;
}

.mp-button--quiet {
	background-color: var( --mcw-section-bg );
	border-color: var( --mcw-border );
	color: var( --color-base );
}

/* --- 站点卡片 ------------------------------------------------------------ */

.mp-site__welcome {
	margin-bottom: 10px;
	font-size: 0.9375rem;
	line-height: 1.65;
}

.mp-stats {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 6px;
}

.mp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	border: 2px solid var( --mcw-border );
	background-color: var( --background-color-interactive-subtle );
	box-shadow: var( --mcw-inset );
}

.mp-stat__num {
	color: var( --mcw-green );
	font-size: 1.35rem;
	font-weight: bold;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.mp-stat__label {
	margin-top: 2px;
	color: var( --color-subtle );
	font-size: 0.75rem;
}

/* --- 特色条目 ------------------------------------------------------------ */

.mp-feature__text p:first-child {
	margin-top: 0;
}

.mp-feature__text p:last-child {
	margin-bottom: 0;
}

/* --- 时间线 -------------------------------------------------------------- */

.mp-timeline {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 10px;
	margin-left: 8px;
	padding-left: 15px;
	border-left: 2px solid var( --mcw-border );
}

.mp-timeline__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5em;
}

.mp-timeline__item::before {
	content: "";
	position: absolute;
	top: 4px;
	left: -23px;
	width: 14px;
	height: 14px;
	border: 2px solid var( --color-base );
	background-color: var( --mcw-green );
}

.mp-timeline__name {
	flex: 1 1 auto;
	color: var( --color-base );
	font-size: 0.9375rem;
	line-height: 1.5;
}

.mp-timeline__date {
	color: var( --color-subtle );
	font-size: 0.75rem;
	white-space: nowrap;
	opacity: 0.8;
}

/* --- 新闻列表 ------------------------------------------------------------ */

.mp-news {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mp-news__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-bottom: 8px;
	border-bottom: 2px solid var( --mcw-border );
}

.mp-news__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.mp-news__date {
	flex: none;
	padding: 1px 6px;
	border: 2px solid var( --mcw-btn-border );
	background-color: var( --mcw-green );
	color: #fff;
	font-size: 0.6875rem;
	font-weight: bold;
	white-space: nowrap;
}

.mp-news__title {
	flex: 1;
	color: var( --color-base );
	font-size: 0.875rem;
	line-height: 1.5;
}

/* --- 更多入口分栏 -------------------------------------------------------- */

.mp-cols {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
	gap: 10px;
}

.mp-cols ul {
	margin: 0;
	padding-left: 1.1em;
	font-size: 0.875rem;
}

.mp-cols li {
	margin-bottom: 3px;
}

.mp-colhead {
	margin-bottom: 4px;
	padding-bottom: 3px;
	border-bottom: 2px solid var( --mcw-border );
	color: var( --color-emphasized );
	font-size: 0.75rem;
	font-weight: bold;
	letter-spacing: 0.04em;
}

/* --- 页脚语言条 ---------------------------------------------------------- */

.mp-languages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 6px;
	padding: 8px 12px;
	border: 2px solid var( --mcw-border );
	background-color: var( --mcw-section-bg );
	box-shadow: var( --mcw-inset );
	font-size: 0.8125rem;
}

.mp-languages a {
	padding: 2px 8px;
	border: 2px solid transparent;
	text-decoration: none;
}

.mp-languages a:hover {
	border-color: var( --mcw-border );
	background-color: var( --background-color-interactive-subtle );
}
Admin​（留言 | 贡献）

2026年8月19日 (三) 16:28的版本

Admin（留言 | 贡献）
