查看“︁MediaWiki:Citizen.css”︁的源代码

/* ==========================================================================
   Kuke Wiki — Apple-inspired theme for Citizen
   覆盖 Citizen 的 OKLCH 分量令牌，整站配色/圆角/字体随之改变。
   ========================================================================== */

/* --- 1. 字体：优先 Apple 系统字体，中文走苹方 ------------------------------ */
:root {
	--font-family-citizen-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
		'SF Pro Display', 'Helvetica Neue', 'Segoe UI Variable Text', 'Segoe UI';
	--font-family-language-base: 'PingFang SC', 'Hiragino Sans GB',
		'Microsoft YaHei UI', 'Microsoft YaHei';
	--font-family-citizen-serif: 'New York', 'Songti SC', 'Source Han Serif SC';
	--font-family-citizen-monospace: 'SF Mono', 'Menlo', 'JetBrains Mono',
		'Cascadia Code', 'Consolas';

	/* Apple 的字距：大字号收紧，正文略松 */
	letter-spacing: -0.003em;
}

/* --- 2. 配色：Apple Blue #0071e3 / 中性灰阶 -------------------------------- */
:root {
	/* 主色相 = #0071e3 的 OKLCH 色相角 */
	--color-progressive-oklch__l: 56.3%;
	--color-progressive-oklch__c: 0.193;
	--color-progressive-oklch__h: 256.16;
	--color-progressive-hsl__h: 211;
	--color-progressive-hsl__s: 100%;
	--color-progressive-hsl__l: 45%;

	/* 表面：接近 #ffffff / #f5f5f7，几乎无色偏（苹果的灰是中性偏冷） */
	--color-surface-0-oklch__l: 100%;
	--color-surface-0-oklch__c: 0;
	--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.4%;

	/* 文字：#1d1d1f 正文，#6e6e73 次要 */
	--color-emphasized-oklch__l: 15%;
	--color-emphasized-oklch__c: 0.004;
	--color-base-oklch__l: 23.2%;
	--color-base-oklch__c: 0.004;
	--color-subtle-oklch__l: 54%;
	--color-subtle-oklch__c: 0.008;
	--color-placeholder-oklch__l: 62%;
	--color-placeholder-oklch__c: 0.008;

	/* 边框：苹果几乎不用实线边框，用极淡的分隔线 */
	--border-color-base: rgb( 0 0 0 / 0.08 );
	--border-color-subtle: rgb( 0 0 0 / 0.05 );
	--border-color-muted: rgb( 0 0 0 / 0.03 );

	/* 阴影：更柔、更散、几乎无色 */
	--shadow-opacity: 0.07;
	--box-shadow-color-alpha-base: rgb( 0 0 0 / 0.07 );
}

/* 暗色：#000 纯黑底 + #0a84ff 提亮蓝，对齐 macOS/iOS 深色模式 */
.skin-theme-clientpref-night,
.skin-theme-clientpref-black {
	--color-progressive-oklch__l: 62.4%;
	--color-progressive-oklch__c: 0.206;
	--color-progressive-hsl__l: 58%;
	--color-surface-0-oklch__l: 11%;
	--color-surface-0-oklch__c: 0;
	--delta-lightness-surface-base: 3.2%;
	--color-emphasized-oklch__l: 97%;
	--color-emphasized-oklch__c: 0.002;
	--color-base-oklch__l: 88%;
	--color-base-oklch__c: 0.003;
	--color-subtle-oklch__l: 66%;
	--color-subtle-oklch__c: 0.006;
	--border-color-base: rgb( 255 255 255 / 0.1 );
	--border-color-subtle: rgb( 255 255 255 / 0.06 );
	--shadow-opacity: 0.5;
	--box-shadow-color-alpha-base: rgb( 0 0 0 / 0.5 );
}

@media ( prefers-color-scheme: dark ) {
	.skin-theme-clientpref-os {
		--color-progressive-oklch__l: 62.4%;
		--color-progressive-oklch__c: 0.206;
		--color-progressive-hsl__l: 58%;
		--color-surface-0-oklch__l: 11%;
		--color-surface-0-oklch__c: 0;
		--delta-lightness-surface-base: 3.2%;
		--color-emphasized-oklch__l: 97%;
		--color-emphasized-oklch__c: 0.002;
		--color-base-oklch__l: 88%;
		--color-base-oklch__c: 0.003;
		--color-subtle-oklch__l: 66%;
		--color-subtle-oklch__c: 0.006;
		--border-color-base: rgb( 255 255 255 / 0.1 );
		--border-color-subtle: rgb( 255 255 255 / 0.06 );
		--shadow-opacity: 0.5;
		--box-shadow-color-alpha-base: rgb( 0 0 0 / 0.5 );
	}
}

/* --- 3. 圆角与毛玻璃：苹果的连续曲率大圆角 -------------------------------- */
:root {
	--border-radius-base: 8px;      /* Citizen 默认 4px */
	--border-radius-pill: 980px;    /* apple.com 按钮就是 980px */

	/* 更强的毛玻璃，贴近 macOS 侧栏材质 */
	--backdrop-filter-frosted-glass: saturate( 180% ) blur( 20px );

	/* 苹果标志性缓动曲线 */
	--transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );
	--transition-timing-function-ease-out: cubic-bezier( 0.25, 0.1, 0.25, 1 );
}

/* --- 4. 顶栏：磨砂玻璃 + 极细分隔线 --------------------------------------- */
.citizen-header {
	background-color: color-mix( in srgb, var( --color-surface-0 ) 72%, transparent );
	-webkit-backdrop-filter: var( --backdrop-filter-frosted-glass );
	backdrop-filter: var( --backdrop-filter-frosted-glass );
	border-inline-end: 1px solid var( --border-color-subtle );
}

/* --- 5. 排版：SF 风格的标题层级 ------------------------------------------- */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.citizen-page-heading {
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.14;
}

.mw-body h1,
#firstHeading {
	font-size: 2.5rem;
	letter-spacing: -0.03em;
}

/* h2 去掉 Citizen 的下划线，改用留白分隔（苹果不用横线） */
.mw-body h2 {
	border-bottom: 0;
	margin-top: 2.2em;
	font-size: 1.75rem;
}

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

/* --- 6. 链接：去下划线，hover 才出现（apple.com 的做法） ------------------ */
.mw-body-content a:not( .mw-ui-button ):not( .cdx-button ) {
	text-decoration: none;
	transition: color 0.2s var( --transition-timing-function-ease );
}

.mw-body-content a:not( .mw-ui-button ):not( .cdx-button ):hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* --- 7. 按钮：药丸形 + 按压回弹 ------------------------------------------- */
.cdx-button,
.mw-ui-button {
	border-radius: var( --border-radius-pill );
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: transform 0.15s var( --transition-timing-function-ease ),
		background-color 0.2s var( --transition-timing-function-ease );
}

.cdx-button:active,
.mw-ui-button:active {
	transform: scale( 0.96 );
}

/* --- 8. 搜索框：iOS 风格圆角胶囊 ------------------------------------------ */
.citizen-search__input,
.citizen-typeahead__input {
	border-radius: var( --border-radius-pill );
}

/* --- 9. 卡片/下拉：更大圆角 + 柔和投影 ------------------------------------ */
.citizen-menu__card,
.citizen-dropdown-details .citizen-menu__card,
.citizen-search__card {
	border-radius: 14px;
	box-shadow: 0 8px 32px rgb( 0 0 0 / 0.12 ), 0 2px 8px rgb( 0 0 0 / 0.06 );
}

/* --- 10. 表格与代码块：圆角化，去掉生硬边框 ------------------------------- */
.wikitable {
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var( --border-color-base );
}

.wikitable > * > tr > th,
.wikitable > * > tr > td {
	border: 0;
	border-bottom: 1px solid var( --border-color-subtle );
}

.wikitable > * > tr:last-child > td {
	border-bottom: 0;
}

.wikitable > * > tr > th {
	background-color: var( --color-surface-2 );
	font-weight: 600;
}

pre,
.mw-highlight pre {
	border-radius: 12px;
	border: 1px solid var( --border-color-subtle );
	padding: 1rem 1.2rem;
}

code,
kbd {
	border-radius: 6px;
}

/* --- 11. 图片：圆角 + 悬停微缩放，去掉缩略图边框 -------------------------- */
.thumbinner,
figure[ typeof~='mw:File/Thumb' ] {
	border-radius: 12px;
	border: 0;
	overflow: hidden;
}

.mw-body-content img {
	border-radius: 8px;
}

/* --- 12. 首页卡片（配合 首页 里的 .kuke-card） ---------------------------- */
.kuke-hero {
	text-align: center;
	padding: 4rem 1rem 3rem;
}

.kuke-hero__title {
	font-size: clamp( 2.4rem, 6vw, 3.6rem );
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.06;
	margin: 0;
	background: linear-gradient( 180deg, var( --color-emphasized ), var( --color-subtle ) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.kuke-hero__sub {
	font-size: clamp( 1.05rem, 2.2vw, 1.3rem );
	color: var( --color-subtle );
	margin-top: 0.7rem;
	letter-spacing: -0.01em;
}

.kuke-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) );
	gap: 1.1rem;
	margin: 2rem 0;
}

.kuke-card {
	background-color: var( --color-surface-1 );
	border: 1px solid var( --border-color-subtle );
	border-radius: 18px;
	padding: 1.6rem 1.5rem;
	transition: transform 0.3s var( --transition-timing-function-ease ),
		box-shadow 0.3s var( --transition-timing-function-ease );
}

.kuke-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 12px 32px rgb( 0 0 0 / 0.1 );
}

.kuke-card h3,
.kuke-card .kuke-card__title {
	margin: 0 0 0.9rem;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	border: 0;
}

.kuke-card ul {
	margin: 0;
	list-style: none;
}

.kuke-card li {
	margin: 0.45rem 0;
}

.kuke-card li a {
	color: var( --color-progressive );
}

/* --- 13. 滚动条：macOS 细窄样式 ------------------------------------------- */
* {
	scrollbar-width: thin;
	scrollbar-color: var( --color-placeholder ) transparent;
}

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

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

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

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

/* --- 14. 焦点环：Apple 的蓝色柔光 ---------------------------------------- */
:focus-visible {
	outline: 2px solid var( --color-progressive );
	outline-offset: 2px;
	border-radius: 6px;
}


/* ==========================================================================
   15. 首页布局 — 参考 Minecraft Wiki 的双栏结构，配色沿用本主题
   ========================================================================== */

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

/* --- 15.1 通栏门户标签条 --- */
.mp-portals {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.9rem;
}

.mp-portals a {
	text-decoration: none !important;
	color: inherit !important;
}

.mp-tab {
	display: inline-block;
	padding: 0.42rem 0.9rem;
	border-radius: 980px;
	background-color: var( --color-surface-2 );
	color: var( --color-emphasized );
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: background-color 0.16s var( --transition-timing-function-ease );
}

.mp-portals a:hover .mp-tab {
	background-color: var( --color-surface-3 );
}

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

.mp-portals a:hover .mp-tab--active {
	background-color: var( --color-progressive--hover );
}

/* --- 15.2 主栅格：左 2fr 跨两行 / 右 1fr，990px 断点 --- */
.mp-layout {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: 'site' 'left' 'right';
	gap: 0.9rem;
	align-items: start;
}

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

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

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

.mp-site {
	grid-area: site;
}

/* --- 15.3 卡片外壳 --- */
.mp-section {
	background-color: var( --color-surface-1 );
	border: 1px solid var( --border-color-subtle );
	border-radius: 18px;
	padding: 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mp-section .mp-title {
	margin: 0 0 0.85rem;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var( --color-emphasized );
	line-height: 1.3;
}

.mp-title__sub {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var( --color-subtle );
}

.mp-section .mp-body {
	flex: 1;
	min-width: 0;
}

.mp-section .mp-actions {
	flex: 0 0 auto;
	margin-top: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

@media ( min-width: 990px ) {
	.mp-right > .mp-section:last-child {
		flex: 1;
	}
}

.mp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

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

/* --- 15.4 出血大图 highlight --- */
.mp-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.mp-highlight {
	flex: 1 1 0;
	min-width: 300px;
	min-height: calc( 150px + 5vh );
	max-height: 300px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-radius: 18px;
	overflow: hidden;
	color: #fff;
	background-image: linear-gradient( 135deg, #0071e3 0%, #42a5f5 55%, #5ac8fa 100% );
	text-shadow: 0 1px 10px rgb( 0 0 0 / 0.35 );
	transition: transform 0.3s var( --transition-timing-function-ease ), box-shadow 0.3s var( --transition-timing-function-ease );
}

.mp-highlight:hover {
	transform: translateY( -3px );
	box-shadow: 0 14px 34px rgb( 0 0 0 / 0.18 );
}

.mp-highlight--alt {
	background-image: linear-gradient( 135deg, #5e5ce6 0%, #7d5fff 55%, #bf5af2 100% );
}

.mp-highlight__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.mp-highlight__title {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}

.mp-highlight__tag {
	padding: 0.16rem 0.6rem;
	border-radius: 980px;
	background-color: rgb( 255 255 255 / 0.22 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-shadow: none;
}

.mp-highlight__meta {
	font-size: 0.8125rem;
	opacity: 0.92;
}

.mp-highlight a,
.mp-highlight__meta a {
	color: #fff !important;
}

/* --- 15.5 图标网格 --- */
.mp-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	--mp-icon-w: 92px;
}

.mp-icons > a {
	flex: 1 auto;
	width: var( --mp-icon-w );
	max-width: 170px;
	text-decoration: none !important;
	color: inherit !important;
}

.mp-icon {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.85rem 0.4rem;
	border-radius: 14px;
	background-color: var( --color-surface-2 );
	color: var( --color-emphasized );
	text-align: center;
	transition: background-color 0.16s var( --transition-timing-function-ease ), transform 0.16s var( --transition-timing-function-ease );
}

.mp-icons > a:hover .mp-icon {
	background-color: var( --color-surface-3 );
	transform: translateY( -2px );
}

.mp-icons > a:active .mp-icon {
	transform: scale( 0.96 );
}

.mp-icon__glyph {
	font-size: 1.5rem;
	line-height: 1;
}

.mp-icon__label {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

@media ( min-width: 1200px ) {
	.mp-icons {
		--mp-icon-w: 6vw;
	}
}

@media ( max-width: 950px ) {
	.mp-icons {
		--mp-icon-w: 74px;
	}
}

/* --- 15.6 特色文章 --- */
.mp-feature {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: flex-start;
}

.mp-feature__text {
	flex: 1 1 0;
	min-width: 190px;
}

.mp-feature__text p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --color-subtle );
}

.mp-feature__media {
	flex: 0 1 240px;
	max-width: 270px;
	border-radius: 12px;
	overflow: hidden;
}

.mp-feature__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* --- 15.7 时间线 --- */
.mp-timeline {
	border-left: 2px solid var( --border-color-base );
	margin: 0 0 0 0.6rem;
	padding-left: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

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

.mp-timeline__item::before {
	content: '';
	position: absolute;
	left: -1.58rem;
	top: 0.36rem;
	width: 11px;
	height: 11px;
	border-radius: 3px;
	background-color: var( --color-progressive );
	box-shadow: 0 0 0 3px var( --color-surface-1 );
}

.mp-timeline__name {
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.mp-timeline__date {
	font-size: 0.8125rem;
	color: var( --color-subtle );
}

/* --- 15.8 站点欢迎块 / 统计 --- */
.mp-site__welcome {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --color-subtle );
	margin: 0;
}

.mp-stats {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.5rem;
	margin-top: 0.95rem;
}

.mp-stat {
	padding: 0.7rem 0.5rem;
	border-radius: 12px;
	background-color: var( --color-surface-2 );
	text-align: center;
}

.mp-stat__num {
	display: block;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.1;
	color: var( --color-progressive );
}

.mp-stat__label {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.75rem;
	color: var( --color-subtle );
}

/* --- 15.9 新闻列表 --- */
.mp-news {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mp-news__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.mp-news__date {
	font-size: 0.75rem;
	color: var( --color-placeholder );
	letter-spacing: 0;
}

.mp-news__title {
	font-size: 0.9375rem;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

/* --- 15.10 多列链接组 --- */
.mp-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.mp-cols > div {
	flex: 1 1 0;
	min-width: 130px;
}

.mp-colhead {
	margin: 0 0 0.4rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --color-placeholder );
	border: 0;
}

.mp-cols ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-cols li {
	margin: 0.28rem 0;
	font-size: 0.875rem;
}

/* --- 15.11 按钮 --- */
.mp-actions a,
.mp-highlight a,
.mp-feature a {
	text-decoration: none !important;
	color: inherit !important;
}

.mp-button {
	display: inline-block;
	padding: 0.5rem 1.05rem;
	border-radius: 980px;
	background-color: var( --color-progressive );
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: background-color 0.16s var( --transition-timing-function-ease ), transform 0.12s var( --transition-timing-function-ease );
}

.mp-button:hover {
	background-color: var( --color-progressive--hover );
}

.mp-button:active {
	transform: scale( 0.96 );
}

.mp-button--quiet {
	background-color: var( --color-surface-2 );
	color: var( --color-emphasized );
}

.mp-button--quiet:hover {
	background-color: var( --color-surface-3 );
}

/* --- 15.12 通栏语言条 --- */
.mp-languages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.9rem;
}

.mp-languages a {
	flex: 1 1 90px;
	max-width: 180px;
	padding: 0.42rem 0.7rem;
	border-radius: 10px;
	background-color: var( --color-surface-2 );
	color: var( --color-emphasized ) !important;
	font-size: 0.8125rem;
	text-align: center;
	text-decoration: none !important;
	transition: background-color 0.16s var( --transition-timing-function-ease );
}

.mp-languages a:hover {
	background-color: var( --color-surface-3 );
}



@media ( prefers-reduced-motion: reduce ) {
	.mp-highlight,
	.mp-icon,
	.mp-button {
		transition: none;
	}

	.mp-highlight:hover,
	.mp-icon:hover {
		transform: none;
	}
}