MediaWiki:Citizen.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* ==========================================================================
   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;
}